/* ==========================================================================
   ThinkHub India — Modern Theme
   Covers: include/header.php, include/footer.php, index.php
   Loaded once, site-wide, from the top of include/header.php so every page
   that includes the shared header/footer renders this design consistently.
   ========================================================================== */

:root{
  /* Palette — deep ink + teal accent (cloud/network/trust), not the generic
     purple-blue SaaS gradient. One accent, used with restraint. */
  --ink:#0f1720;
  --ink-soft:#525b66;
  --ink-faint:#8b939d;
  --surface:#ffffff;
  --bg:#f6f7f9;
  --bg-alt:#eef2f2;
  --accent:#0e7c74;
  --accent-dark:#0b5f59;
  --accent-soft:#e3f1ef;
  --line:#e3e6ea;
  --line-strong:#d2d7dc;
  --footer-bg:#0c1216;
  --footer-ink:#c7ccd1;
  --footer-line:rgba(255,255,255,.09);

  --font-display:"Sora","Segoe UI",Arial,sans-serif;
  --font-body:"Manrope","Segoe UI",Arial,sans-serif;

  --shell:1240px;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,23,32,.06), 0 1px 1px rgba(15,23,32,.04);
  --shadow-md:0 8px 24px -8px rgba(15,23,32,.16);
  --shadow-lg:0 24px 48px -16px rgba(15,23,32,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}

html, body{ margin:0; padding:0; }

/* ---- Accessibility utility ------------------------------------------ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Base ---------------------------------------------------------- */
.th-scope, .th-scope *{ box-sizing:border-box; }
.th-scope{
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.th-scope h1, .th-scope h2, .th-scope h3, .th-scope h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.18;
  margin:0;
  text-wrap:balance;
}
.th-scope p{ margin:0; color:var(--ink-soft); line-height:1.65; }
.th-scope a{ text-decoration:none; color:inherit; }
.th-scope img{ max-width:100%; display:block; }
.th-scope ul{ list-style:none; margin:0; padding:0; }

.th-container{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 24px;
}
.th-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.th-eyebrow::before{
  content:"";
  width:1.4em; height:2px;
  background:var(--accent);
  display:inline-block;
}

.th-btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  padding:.85em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.th-btn svg{ width:1em; height:1em; flex:none; }
.th-btn-primary{ background:var(--ink); color:#fff; }
.th-scope .th-btn-primary, .th-scope .th-btn-primary span, .th-scope .th-btn-primary svg{ color:#fff !important; fill:none; stroke:#fff; }
.th-scope .th-btn-light, .th-scope .th-btn-light span{ color:var(--ink) !important; }
.th-btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--accent-dark); }
.th-btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.th-btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.th-btn-light{ background:#fff; color:var(--ink); }
.th-btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Scroll-reveal (progressive enhancement — content is visible without JS) */
.th-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.th-reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .th-reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Header ---------------------------------------------------------- */
.th-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.th-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, #7fd8cd 50%, var(--accent) 80%, transparent);
  opacity:.55;
  z-index:0;
}
.th-header.is-scrolled{ box-shadow:var(--shadow-sm); background:rgba(255,255,255,.98); }
.th-header-bar{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
  gap:24px;
}
.th-logo{ display:flex; align-items:center; flex:none; }
.th-logo img{ height:44px; width:auto; display:block; }

.th-nav{ display:flex; align-items:center; gap:2px; margin:0 auto 0 44px; }
.th-nav > li{ position:relative; }
.th-nav > li > a, .th-nav > li > button{
  display:flex; align-items:center; gap:.35em;
  padding:.75em 1.05em;
  font-weight:600; font-size:.94rem; color:var(--ink);
  border-radius:999px;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.th-nav > li > a:hover, .th-nav > li.is-open > a,
.th-nav > li > button:hover, .th-nav > li.is-open > button{ background:var(--bg-alt); color:var(--accent-dark); }
.th-nav-trigger{ background:none; border:none; font-family:inherit; cursor:pointer; }
.th-nav .th-caret{ width:.7em; height:.7em; transition:transform .2s var(--ease); }
.th-nav li.is-open .th-caret{ transform:rotate(180deg); }
@media (min-width:901px){
  .th-nav > li:hover > .th-submenu{ opacity:1; visibility:visible; transform:none; }
  .th-nav > li:hover > a .th-caret, .th-nav > li:hover > button .th-caret{ transform:rotate(180deg); }
  .th-nav > li:hover > a, .th-nav > li:hover > button{ background:var(--bg-alt); color:var(--accent-dark); }
  /* signature: a teal underline that draws in on hover instead of a flat pill swap */
  .th-nav > li > a::after, .th-nav > li > button::after{
    content:""; position:absolute; left:1.05em; right:1.05em; bottom:6px;
    height:2px; background:var(--accent); border-radius:2px;
    transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
  }
  .th-nav > li:hover > a::after, .th-nav > li:hover > button::after,
  .th-nav > li.is-open > a::after, .th-nav > li.is-open > button::after{ transform:scaleX(1); }
}

.th-submenu{
  position:absolute; top:calc(100% + 12px); left:0;
  min-width:270px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:5;
}
.th-nav li.is-open .th-submenu{ opacity:1; visibility:visible; transform:none; }
.th-submenu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7em .9em; border-radius:6px; font-size:.9rem; font-weight:600; color:var(--ink-soft);
}
.th-submenu a:hover{ background:var(--accent-soft); color:var(--accent-dark); }
.th-submenu a.th-submenu-featured{ color:var(--accent-dark); }
.th-submenu-tag{ font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent-dark); padding:.2em .55em; border-radius:999px; }

.th-header-actions{ display:flex; align-items:center; gap:14px; flex:none; }
.th-nav-cta-item{ display:none; }
.th-header .th-btn-primary{ background:var(--accent); color:#fff; box-shadow:0 4px 16px -4px rgba(14,124,116,.4); }
.th-header .th-btn-primary:hover{ background:var(--accent-dark); box-shadow:0 6px 20px -4px rgba(14,124,116,.5); transform:translateY(-2px); }
.th-burger{
  display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line-strong);
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
  flex-direction:column; gap:5px;
}
.th-burger span{ width:18px; height:2px; background:var(--ink); transition:transform .22s var(--ease), opacity .18s; }
.th-burger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.th-burger.is-active span:nth-child(2){ opacity:0; }
.th-burger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px){
  .th-nav{ margin-left:24px; }
  .th-nav > li > a, .th-nav > li > button{ padding:.7em .8em; font-size:.9rem; }
}
@media (max-width:900px){
  .th-header-bar{ height:64px; }
  .th-logo img{ height:36px; }
  .th-burger{ display:flex; }
  .th-nav{
    position:fixed; top:64px; right:0; left:0; margin:0;
    /* explicit height, not inset's bottom:0 — .th-header has backdrop-filter, which
       makes it the containing block for this fixed element, so a bottom-based height
       would resolve against the 64px header instead of the viewport and collapse to 0 */
    height:calc(100vh - 64px); height:calc(100dvh - 64px);
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:12px; overflow-y:auto;
    transform:translateX(100%); transition:transform .28s var(--ease);
  }
  .th-nav.is-open{ transform:none; }
  .th-nav > li > a, .th-nav > li > button{ padding:.95em 1em; border-radius:10px; justify-content:space-between; color:var(--ink); width:100%; text-align:left; }
  .th-nav > li > a::after, .th-nav > li > button::after{ display:none; }
  .th-submenu{ position:static; box-shadow:none; border:none; opacity:1; visibility:visible; transform:none; display:none; margin:2px 0 8px; background:var(--bg); }
  .th-nav li.is-open .th-submenu{ display:block; }
  .th-submenu a{ color:var(--ink-soft); }
  .th-header-actions .th-btn-primary{ display:none; }
  .th-nav-cta-item{ display:block; margin-top:10px; padding-top:14px; border-top:1px solid var(--line); }
  .th-nav-cta{ width:100%; justify-content:center; }
}

/* ---- Hero -------------------------------------------------------------- */
.th-hero{
  position:relative; overflow:hidden;
  padding:96px 0 88px;
  background:
    radial-gradient(560px 360px at 88% -10%, var(--accent-soft), transparent 70%),
    radial-gradient(480px 320px at 6% 110%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.th-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 75%);
  mask-image:linear-gradient(to bottom, black, transparent 75%);
}
.th-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.th-hero h1{ font-size:clamp(2.2rem,4.2vw,3.4rem); margin:.5em 0 .45em; }
.th-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--accent-dark) 0%, var(--accent) 40%, #37b8ad 55%, var(--accent-dark) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:th-shine 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .th-hero h1 em{ animation:none; background-position:0 0; } }
@keyframes th-shine{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.th-hero p.lead{ font-size:1.1rem; max-width:46ch; margin-bottom:1.8em; }
.th-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.4em; }
.th-hero-facts{ display:flex; flex-wrap:wrap; gap:10px; }
.th-fact{
  display:flex; align-items:center; gap:.5em;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.55em 1em; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  box-shadow:var(--shadow-sm);
}
.th-fact svg{ width:1em; height:1em; color:var(--accent); flex:none; }

.th-hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; perspective:900px; }
.th-hero-visual::before{
  content:""; position:absolute; top:50%; left:50%; width:380px; height:380px;
  margin:-190px 0 0 -190px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(14,124,116,.32), rgba(55,184,173,.12) 45%, transparent 72%);
  filter:blur(6px);
  animation:th-glow-pulse 6s ease-in-out infinite;
}
@keyframes th-glow-pulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .th-hero-visual::before{ animation:none; } }

/* ---- Brand Hex Orbit -------------------------------------------------- */
.orbit-wrap{ position:relative; width:320px; height:320px; max-width:100%; transition:transform .25s var(--ease); transform-style:preserve-3d; }
.orbit-ring-line{
  position:absolute; inset:0; margin:auto; width:250px; height:250px; border:1px dashed var(--line-strong); border-radius:50%;
  animation:th-ring-spin 46s linear infinite;
}
@keyframes th-ring-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .orbit-ring-line{ animation:none; } }
.orbit-hex{
  position:absolute; top:50%; left:50%; width:104px; height:104px; margin:-52px 0 0 -52px;
  background:linear-gradient(135deg, #1DB1B3, #036568);
  clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.9rem;
  box-shadow:var(--shadow-lg); z-index:2;
}
.orbit-item{
  position:absolute; width:56px; height:56px; border-radius:16px; background:#fff;
  box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; animation:orbit-bob 5s ease-in-out infinite; z-index:2;
}
.orbit-item.o1{ top:1%; left:50%; margin-left:-28px; color:#2563eb; animation-delay:0s; }
.orbit-item.o2{ top:21%; left:87%; margin-left:-28px; color:#dc3b30; animation-delay:-.8s; }
.orbit-item.o3{ top:69%; left:87%; margin-left:-28px; color:#7c4fd6; animation-delay:-1.6s; }
.orbit-item.o4{ top:89%; left:50%; margin-left:-28px; color:#d98c0f; animation-delay:-2.4s; }
.orbit-item.o5{ top:69%; left:9%; margin-left:-28px; color:var(--accent-dark); animation-delay:-3.2s; }
.orbit-item.o6{ top:21%; left:9%; margin-left:-28px; color:#1a9a52; animation-delay:-4s; }
@keyframes orbit-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .orbit-item{ animation:none; } }
@media (max-width:520px){ .orbit-wrap{ width:260px; height:260px; } .orbit-ring-line{ width:205px; height:205px; } .orbit-hex{ width:86px; height:86px; margin:-43px 0 0 -43px; font-size:1.5rem; } .orbit-item{ width:46px; height:46px; font-size:1rem; } }

.th-hero-badge{
  position:relative; z-index:3; margin-top:18px;
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; border-radius:16px; padding:14px 18px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  animation:th-float 8s ease-in-out infinite; animation-delay:-2.2s;
}
.th-hero-badge-stars{ color:#e0a400; font-size:1rem; letter-spacing:.1em; flex:none; }
.th-hero-badge strong{ display:block; font-size:.85rem; }
.th-hero-badge span{ display:block; font-size:.74rem; color:var(--ink-faint); }
@keyframes th-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .th-hero-badge{ animation:none; } }

.th-hero-ctas .th-btn-primary:hover{ box-shadow:0 10px 28px -6px rgba(14,124,116,.45); }

.th-scroll-cue{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  background:rgba(255,255,255,.6); animation:th-cue-bob 2.2s ease-in-out infinite;
}
.th-scroll-cue svg{ width:14px; height:14px; }
@keyframes th-cue-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }
@media (prefers-reduced-motion: reduce){ .th-scroll-cue{ animation:none; } }

@media (max-width:960px){
  .th-hero{ padding:56px 0 64px; }
  .th-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .th-hero-visual{ order:-1; }
  .th-scroll-cue{ display:none; }
}

/* ---- Interior page hero (about/solution/contact pages, not the homepage) - */
.th-page-hero{
  position:relative; overflow:hidden;
  padding:60px 0 52px;
  background:linear-gradient(135deg, var(--ink) 0%, #17242a 100%);
}
.th-page-hero::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px;
}
.th-page-hero .th-container{ position:relative; }
.th-page-hero .th-eyebrow{ color:#7fd8cd; }
.th-page-hero .th-eyebrow::before{ background:#7fd8cd; }
.th-page-hero h1{ color:#fff; font-size:clamp(1.9rem,3.6vw,2.7rem); max-width:24ch; margin:.4em 0 .35em; }
.th-page-hero p.lead{ color:#c6cdd2; max-width:62ch; font-size:1.02rem; margin:0; }
.th-breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em; font-size:.82rem; font-weight:600; color:var(--ink-faint); margin:0 0 16px; }
.th-breadcrumbs a{ color:#c6cdd2; }
.th-breadcrumbs a:hover{ color:#fff; }
.th-breadcrumbs .th-crumb-sep{ opacity:.5; }
.th-breadcrumbs .th-crumb-current{ color:#fff; }
@media (max-width:480px){ .th-page-hero{ padding:40px 0 36px; } }

/* ---- Partner marquee ---------------------------------------------------- */
.th-marquee-section{ padding:52px 0 44px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.th-marquee-head{ text-align:center; max-width:560px; margin:0 auto 30px; }
.th-marquee-head .th-eyebrow{ justify-content:center; }
.th-marquee-head h2{ font-size:clamp(1.15rem,1.8vw,1.4rem); margin-top:.5em; color:var(--ink-soft); font-family:var(--font-body); font-weight:700; }
.th-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.th-marquee-track{ display:flex; align-items:center; gap:72px; width:max-content; animation:th-scroll 32s linear infinite; }
.th-marquee:hover .th-marquee-track{ animation-play-state:paused; }
.th-marquee-track img{ height:46px; width:auto; max-width:140px; object-fit:contain; opacity:.68; filter:grayscale(1); transition:opacity .22s var(--ease), filter .22s var(--ease), transform .22s var(--ease); }
.th-marquee-track img:hover{ opacity:1; filter:none; transform:translateY(-3px) scale(1.06); }
@keyframes th-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .th-marquee-track{ animation:none; overflow-x:auto; } }

/* ---- Platform comparison cards ----------------------------------------- */
.th-platforms-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.th-platform-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px 30px; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.th-platform-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.th-platform-card.zoho::before{ background:linear-gradient(90deg,#e2574c,#f9a11b); }
.th-platform-card.google::before{ background:linear-gradient(90deg,#4285F4,#34A853,#FBBC05,#EA4335); }
.th-platform-card.microsoft::before{ background:linear-gradient(90deg,#0078D4,#50e6ff); }
.th-platform-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.th-platform-mark{
  width:64px; height:64px; border-radius:16px; background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.th-platform-mark img{ width:46px; height:auto; }
.th-platform-mark.g{ background:#eaf1fe; color:#4285F4; font-size:1.9rem; }
.th-platform-mark.m{ background:#e5f2fb; color:#0078D4; font-size:1.9rem; }
.th-platform-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.th-platform-card p{ font-size:.92rem; margin-bottom:1.2em; }
.th-platform-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:1.7em; }
.th-platform-list li{ display:flex; align-items:flex-start; gap:.6em; font-size:.86rem; color:var(--ink-soft); font-weight:600; }
.th-platform-list li::before{ content:""; width:6px; height:6px; margin-top:.5em; border-radius:50%; background:var(--accent); flex:none; }
.th-platform-link{ display:inline-flex; align-items:center; gap:.5em; font-weight:700; font-size:.9rem; color:var(--accent-dark); }
.th-platform-link svg{ width:1em; height:1em; transition:transform .18s var(--ease); }
.th-platform-link:hover svg{ transform:translateX(3px); }
@media (max-width:960px){ .th-platforms-grid{ grid-template-columns:1fr; } }

/* ---- Logo wall (partners directory) ------------------------------------- */
.th-logo-wall{ display:flex; flex-wrap:wrap; gap:14px; }
.th-logo-wall-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  height:72px; width:150px; display:flex; align-items:center; justify-content:center; padding:10px 16px;
}
.th-logo-wall-item img{ max-height:42px; max-width:100%; width:auto; filter:grayscale(1); opacity:.72; transition:opacity .18s var(--ease), filter .18s var(--ease); }
.th-logo-wall-item:hover img{ filter:none; opacity:1; }

/* ---- FAQ ---------------------------------------------------------------- */
.th-faq-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
.th-faq-list{ display:flex; flex-direction:column; gap:12px; }
.th-faq-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 26px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.th-faq-item[open]{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.th-faq-item summary{
  list-style:none; cursor:pointer; padding:19px 34px 19px 0;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink);
  position:relative;
}
.th-faq-item summary::-webkit-details-marker{ display:none; }
.th-faq-item summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.5rem; line-height:1; color:var(--accent); transition:transform .22s var(--ease);
}
.th-faq-item[open] summary::after{ content:"\2212"; }
.th-faq-item p{ padding:0 0 22px; font-size:.92rem; max-width:60ch; }
@media (max-width:900px){ .th-faq-grid{ grid-template-columns:1fr; gap:28px; } }

/* ---- Section shell ---------------------------------------------------- */
.th-section{ padding:96px 0; }
.th-section.alt{ background:var(--bg-alt); }
.th-section-head{ max-width:640px; margin:0 0 52px; }
.th-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.th-section-head h2{ font-size:clamp(1.7rem,2.6vw,2.35rem); margin:.4em 0 .5em; }
.th-section-head p{ font-size:1.02rem; }

.th-partner-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:1.8em; }
.th-partner-badge{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--accent-soft); color:var(--accent-dark);
  font-size:.82rem; font-weight:700; padding:.55em 1em; border-radius:999px;
}
.th-partner-badge i{ font-size:.9em; }

/* ---- Who we are --------------------------------------------------------- */
.th-about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.th-about-media{ position:relative; }
.th-about-media img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.th-about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
.th-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.th-stat strong{ display:block; font-family:var(--font-display); font-size:1.35rem; color:var(--accent-dark); }
.th-stat span{ font-size:.82rem; color:var(--ink-faint); }
@media (max-width:900px){ .th-about-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---- Services grid ------------------------------------------------------ */
.th-services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.th-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.th-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.th-card-icon{ width:54px; height:54px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .22s var(--ease); }
.th-card-icon img{ width:26px; height:26px; }
.th-card-icon i{ font-size:1.4rem; }
.th-card:hover .th-card-icon{ transform:scale(1.08) rotate(-4deg); }
.th-card-icon.c-blue{ background:#e8f1fd; color:#2563eb; }
.th-card-icon.c-red{ background:#fdeceb; color:#dc3b30; }
.th-card-icon.c-purple{ background:#f2ecfb; color:#7c4fd6; }
.th-card-icon.c-amber{ background:#fdf3e0; color:#d98c0f; }
.th-card-icon.c-teal{ background:var(--accent-soft); color:var(--accent-dark); }
.th-card-icon.c-green{ background:#e8f7ee; color:#1a9a52; }
.th-card h3{ font-size:1.08rem; margin-bottom:.5em; }
.th-card p{ font-size:.92rem; }
@media (max-width:960px){ .th-services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .th-services-grid{ grid-template-columns:1fr; } }
.th-services-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .th-services-grid.cols-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .th-services-grid.cols-4{ grid-template-columns:1fr; } }

/* ---- Zoho spotlight band ------------------------------------------------- */
.th-spotlight{
  border-radius:24px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--ink) 0%, #17242a 100%);
  padding:56px; display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center;
}
.th-spotlight::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.th-spotlight-content{ position:relative; }
.th-spotlight .th-eyebrow{ color:#7fd8cd; }
.th-spotlight .th-eyebrow::before{ background:#7fd8cd; }
.th-spotlight h2{ color:#fff; font-size:clamp(1.6rem,2.6vw,2.15rem); margin:.4em 0 .5em; }
.th-spotlight p{ color:#c6cdd2; max-width:52ch; }
.th-spotlight-actions{ margin-top:1.6em; display:flex; gap:14px; flex-wrap:wrap; position:relative; }
.th-spotlight-chips{ position:relative; display:flex; flex-direction:column; gap:12px; }
.th-spotlight-chip{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:14px 16px; color:#e7ebec; font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:.6em; }
.th-spotlight-chip svg{ width:1.1em; height:1.1em; color:#7fd8cd; flex:none; }
@media (max-width:900px){ .th-spotlight{ grid-template-columns:1fr; padding:36px 26px; } }

/* ---- CTA band ------------------------------------------------------------ */
.th-cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--ink) 0%, #17242a 100%);
  border-radius:24px; padding:52px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.th-cta-band::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.th-cta-band::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:var(--accent); opacity:.25; filter:blur(40px);
  top:-80px; right:8%; pointer-events:none;
}
.th-cta-band h2{ position:relative; font-size:clamp(1.4rem,2.2vw,1.9rem); max-width:34ch; color:#fff; }
.th-cta-band .th-btn-primary{ position:relative; background:var(--accent); box-shadow:0 8px 24px -6px rgba(14,124,116,.55); }
.th-cta-band .th-btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 10px 28px -6px rgba(14,124,116,.7); }
@media (max-width:700px){ .th-cta-band{ padding:36px 28px; } }

/* ---- Testimonials --------------------------------------------------------- */
.th-testimonials{ position:relative; }
.th-testi-track{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.th-testi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; }
.th-testi-stars{ color:#e0a400; font-size:.85rem; letter-spacing:.15em; }
.th-testi-card p.quote{ font-size:.94rem; color:var(--ink-soft); }
.th-testi-person{ display:flex; align-items:center; gap:.7em; margin-top:auto; }
.th-testi-person img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.th-testi-person strong{ font-size:.86rem; display:block; }
.th-testi-nav{ display:flex; justify-content:center; gap:10px; margin-top:32px; }
.th-testi-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); border:none; padding:0; cursor:pointer; transition:background-color .2s, transform .2s; }
.th-testi-dot.is-active{ background:var(--accent); transform:scale(1.25); }
@media (max-width:960px){ .th-testi-track{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .th-testi-track{ grid-template-columns:1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.th-footer{ background:var(--footer-bg); color:var(--footer-ink); padding:76px 0 0; }
.th-footer a{ color:var(--footer-ink); }
.th-footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--footer-line); }
.th-footer-brand{ display:flex; align-items:center; margin-bottom:18px; }
.th-footer-brand img{ height:38px; width:auto; }
.th-footer p{ color:var(--footer-ink); font-size:.9rem; }
.th-footer-col h4{ color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.th-footer-col li{ margin-bottom:11px; }
.th-footer-col a{ font-size:.9rem; transition:color .16s; }
.th-footer-col a:hover{ color:#fff; }
.th-footer-contact li{ display:flex; align-items:flex-start; gap:.7em; font-size:.9rem; }
.th-footer-contact svg{ width:1.1em; height:1.1em; flex:none; margin-top:.2em; color:#7fd8cd; }
.th-social{ display:flex; gap:10px; margin-top:20px; }
.th-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background-color .18s, transform .18s; }
.th-social a:hover{ background:var(--accent); transform:translateY(-2px); }
.th-social svg{ width:16px; height:16px; }
.th-footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 0; font-size:.82rem; color:var(--ink-faint); }
.th-footer-bottom a{ color:var(--ink-faint); }
.th-footer-bottom a:hover{ color:#fff; }

.th-totop{
  position:fixed; right:22px; bottom:88px; z-index:89;
  width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.th-totop.is-visible{ opacity:1; visibility:visible; transform:none; }
.th-totop svg{ width:18px; height:18px; color:var(--ink); }

.th-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  transition:transform .2s var(--ease);
}
.th-whatsapp:hover{ transform:scale(1.08); }
.th-whatsapp img{ width:28px; height:28px; }

@media (max-width:960px){ .th-footer-grid{ grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:600px){ .th-footer-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Small-phone refinements — tighter spacing/typography below 480px
   ========================================================================== */
@media (max-width:480px){
  .th-container{ padding:0 18px; }
  .th-section{ padding:56px 0; }
  .th-section-head{ margin-bottom:36px; }
  .th-hero{ padding:44px 0 48px; }
  .th-hero h1{ font-size:clamp(1.9rem,7vw,2.4rem); }
  .th-hero p.lead{ font-size:1rem; }
  .th-hero-ctas{ flex-direction:column; }
  .th-hero-ctas .th-btn{ width:100%; justify-content:center; }
  .th-marquee-section{ padding:36px 0 32px; }
  .th-card, .th-platform-card, .th-testi-card{ padding:24px 20px; }
  .th-spotlight{ padding:30px 20px; }
  .th-cta-band{ padding:32px 22px; }
  .th-cta-band h2{ font-size:1.35rem; }
  .th-faq-item summary{ padding:16px 30px 16px 0; font-size:.94rem; }
  .th-about-stats{ gap:12px; }
  .th-footer{ padding:56px 0 0; }
}