/* ==========================================================
   SolvSutra Software — Landing Page
   Primary #008088 · Secondary #252525 · White theme
   Mobile-first (≈70% traffic is mobile)
   ========================================================== */

:root{
  /* brand */
  --ss-primary:#008088;
  --ss-primary-d:#00666d;
  --ss-primary-l:#0aa8b2;
  --ss-secondary:#252525;

  /* tints */
  --ss-p-50:#eefafa;
  --ss-p-100:#d3f1f2;
  --ss-p-200:#a9e3e6;

  /* neutrals */
  --ss-fg:#141a1a;
  --ss-body:#5b6470;
  --ss-muted:#f6f9f9;
  --ss-line:#e4eaea;
  --ss-white:#fff;

  /* system */
  --ss-r-sm:14px;
  --ss-r:20px;
  --ss-r-lg:26px;
  --ss-pill:999px;
  --ss-sh:0 1px 2px rgba(20,26,26,.04), 0 8px 24px rgba(20,26,26,.05);
  --ss-sh-h:0 12px 24px rgba(0,128,136,.10), 0 28px 60px rgba(0,128,136,.12);
  --ss-ease:cubic-bezier(.22,1,.36,1);

  /* Typography — Latin પહેલા, Gujarati બીજા.
     Browser per-glyph fallback કરે છે, એટલે એક જ વાક્યમાં
     English Inter/Jakarta માંથી અને ગુજરાતી Mukta/Anek માંથી આવે. */
  --ss-ff-body:'Inter','Anek Gujarati',system-ui,-apple-system,sans-serif;
  --ss-ff-head:'Plus Jakarta Sans','Anek Gujarati',system-ui,-apple-system,sans-serif;

  /* એક જ dark background — `.ss-dark`, `.ss-ind-band` અને `.ss-final`
     ત્રણેય આ જ વાપરે છે. બદલવું હોય તો ફક્ત અહીં બદલો. */
  --ss-dark-bg:linear-gradient(135deg,var(--ss-secondary) 0%,#123c40 55%,var(--ss-primary-d) 100%);
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:24px; }

body{
  font-family:var(--ss-ff-body);
  color:var(--ss-body);
  background:var(--ss-white);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Anek Gujarati ભારે વજનમાં ગીચ લાગે છે — એટલે card titles 600 પર,
   અને મોટા section headings જ 700 પર રાખેલા છે. 800 ક્યાંય વાપરવું નહીં. */
/* ⚠️ Headings પર negative letter-spacing વાપરવું નહીં.
   ગુજરાતી અક્ષરો અને એની બાજુના English શબ્દો ચોંટી જાય છે
   (દા.ત. "Consultationથી Software" માં જગ્યા દેખાતી બંધ થઈ ગઈ હતી).
   ફક્ત આંકડા વાળા elements માં તે ચાલે. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ss-ff-head);
  color:var(--ss-fg);
  font-weight:600;
  line-height:1.34;
  letter-spacing:normal;
}
a{ text-decoration:none; }
img{ max-width:100%; }
.ss-text-primary{ color:var(--ss-primary)!important; }


/* ==========================================================
   DECORATIVE PRIMITIVES  (AiOneChat-style ambience)
   ========================================================== */

/* soft glow orbs */
.ss-orb{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(60px); opacity:.5; z-index:0;
}
.ss-orb-a{ background:radial-gradient(circle,rgba(0,128,136,.32),transparent 70%); }
.ss-orb-b{ background:radial-gradient(circle,rgba(10,168,178,.26),transparent 70%); }

/* faint grid pattern */
.ss-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(90deg,rgba(0,128,136,.055) 1px,transparent 1px),
    linear-gradient(rgba(0,128,136,.055) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%);
}
.ss-grid-dark{
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
}

/* hairline gradient divider */
.ss-hair{
  position:absolute; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,var(--ss-line) 18%,var(--ss-line) 82%,transparent);
}
.ss-hair-t{ top:0; } .ss-hair-b{ bottom:0; }

/* keeps content above ambience */
.ss-z{ position:relative; z-index:2; }


/* ==========================================================
   BUTTONS
   ========================================================== */
.btn{
  font-family:var(--ss-ff-head);
  font-weight:600; border-radius:var(--ss-pill);
  padding:.72rem 1.6rem; border:1.5px solid transparent;
  transition:.3s var(--ss-ease);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-lg{ padding:.92rem 2rem; font-size:1rem; }

.btn-ss-primary{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  border-color:var(--ss-primary);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,128,136,.28);
  position:relative; overflow:hidden;
}
.btn-ss-primary::after{
  content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); transition:none;
}
.btn-ss-primary:hover::after{ animation:ssShine .85s var(--ss-ease); }
.btn-ss-primary:hover,.btn-ss-primary:focus{
  color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,128,136,.36);
}

.btn-ss-ghost{
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  border-color:var(--ss-line); color:var(--ss-fg);
}
.btn-ss-ghost:hover{
  border-color:var(--ss-primary); color:var(--ss-primary);
  transform:translateY(-2px); box-shadow:var(--ss-sh);
}

.btn-ss-outline-light{
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
  border-color:rgba(255,255,255,.32); color:#fff;
}
.btn-ss-outline-light:hover{
  background:#fff; border-color:#fff; color:var(--ss-primary); transform:translateY(-2px);
}


/* ==========================================================
   BRAND LOCKUP  (hero નો ભાગ — navbar નથી)

   ⚠️ આ એક FUNNEL page છે. કોઈ navbar, કોઈ nav links,
   કોઈ footer links નહીં — દરેક link એ exit path છે.
   એક જ conversion goal: ફ્રી Consultation.
   ========================================================== */
/* original SVG lockup વપરાય છે — કોઈ CSS text wordmark નથી */
.ss-hero-brand{ text-align:center; margin-bottom:44px; }
.ss-hero-brand img{
  width:auto; height:96px; display:inline-block;
}

/* ==========================================================
   SECTION SHELL
   ========================================================== */
.ss-section{ padding:96px 0; position:relative; overflow:hidden; }
.ss-tint{ background:var(--ss-muted); }

.ss-head{ max-width:740px; margin:0 auto 54px; }

.ss-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ss-ff-head);
  font-size:.7rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--ss-primary); background:var(--ss-p-50);
  border:1px solid var(--ss-p-100);
  padding:.4rem 1rem; border-radius:var(--ss-pill); margin-bottom:16px;
}
.ss-eyebrow-light{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:var(--ss-p-200);
}

/* 3rem એ સૌથી મોટું માપ છે જેમાં headline desktop પર 2 લાઈનમાં બેસે છે.
   આનાથી વધારીએ તો 3 લાઈન થઈ જાય છે — માપીને નક્કી કરેલું છે. */
.ss-h1{ font-size:clamp(1.95rem,5.4vw,3rem); font-weight:700; letter-spacing:normal; margin-bottom:16px; }

/* Highlight — નક્કર રંગનું લખાણ + અક્ષરોની *નીચે* દોરાયેલી લીટી.
   ⚠️ પટ્ટો અક્ષરોની પાછળ ન મૂકવો: ગુજરાતીના નીચેના માત્રા એમાં કપાઈ જાય છે.
   Gradient text પણ ન વાપરવું: અમુક અક્ષરો ઝાંખા પડી જતા હતા. */
.ss-hl{
  position:relative; white-space:nowrap;
  color:var(--ss-primary);
  padding-bottom:.06em;
}
.ss-hl::after{
  content:''; position:absolute; left:0; right:0; bottom:-.1em;
  height:.1em; min-height:4px; border-radius:99px;
  background:linear-gradient(90deg,var(--ss-primary),var(--ss-primary-l) 70%,#3ad3dd);
  transform:scaleX(1); transform-origin:left center;
}

/* Heading reveal થાય ત્યારે લીટી ડાબેથી જમણે દોરાય.
   Default scaleX(1) છે, એટલે reveal બંધ હોય તો પણ લીટી દેખાય જ છે. */
.ss-anim [data-reveal] .ss-hl::after{ transform:scaleX(0); }
.ss-anim [data-reveal].in .ss-hl::after{
  transform:scaleX(1);
  transition:transform .75s var(--ss-ease) .3s;
}

/* dark background પર તેજસ્વી */
.ss-ind-band .ss-hl{ color:var(--ss-primary-l); }
.ss-ind-band .ss-hl::after{
  background:linear-gradient(90deg,var(--ss-primary-l),#5fe0e9 70%,#9df1f5);
}
.ss-h2{ font-size:clamp(1.55rem,3.4vw,2.35rem); font-weight:700; letter-spacing:normal; margin-bottom:12px; }
.ss-sub{ font-size:1.03rem; color:var(--ss-body); margin-bottom:0; }
.ss-dark .ss-sub{ color:rgba(255,255,255,.62); }


/* ==========================================================
   HERO
   ========================================================== */
.ss-hero{
  position:relative; overflow:hidden;
  padding:38px 0 90px;
  background:linear-gradient(180deg,#f4fbfb 0%,#fff 62%);
}
.ss-hero .ss-orb-a{ width:620px; height:620px; top:-240px; right:-160px; }
.ss-hero .ss-orb-b{ width:440px; height:440px; bottom:-200px; left:-160px; opacity:.35; }

.ss-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
  border:1px solid var(--ss-line); color:var(--ss-fg);
  font-weight:600; font-size:.82rem;
  padding:.42rem .5rem .42rem 1rem; border-radius:var(--ss-pill);
  margin-bottom:22px; box-shadow:var(--ss-sh);
}
.ss-badge b{ color:var(--ss-primary); font-weight:700; }
.ss-badge-tag{
  background:var(--ss-p-50); color:var(--ss-primary);
  font-size:.66rem; font-weight:700; letter-spacing:.9px;
  padding:.22rem .6rem; border-radius:var(--ss-pill);
}

/* live ping dot */
.ss-ping{ position:relative; width:8px; height:8px; flex:0 0 8px; }
.ss-ping i,.ss-ping b{
  position:absolute; inset:0; border-radius:50%; background:var(--ss-primary); display:block;
}
.ss-ping i{ animation:ssPing 1.9s cubic-bezier(0,0,.2,1) infinite; }

.ss-hero-sub{ font-size:1.18rem; font-weight:600; color:var(--ss-primary); margin-bottom:14px; }
.ss-hero-text{ font-size:1.03rem; margin-bottom:0; max-width:520px; }
.ss-hero-text b{ color:var(--ss-fg); }

.ss-hero-trust{ display:flex; flex-wrap:wrap; gap:9px; }
.ss-hero-trust span{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.8); border:1px solid var(--ss-line);
  border-radius:var(--ss-pill); padding:.34rem .85rem;
  font-size:.82rem; font-weight:600; color:var(--ss-fg);
}
.ss-hero-trust i{ color:var(--ss-primary); font-size:.92rem; }

/* hero mini stats */
.ss-hero-stats{
  display:flex; gap:0; margin-top:34px;
  border-top:1px solid var(--ss-line); padding-top:22px;
}
.ss-hero-stats > div{ flex:1; position:relative; padding-right:14px; }
.ss-hero-stats > div + div{ padding-left:20px; }
.ss-hero-stats > div + div::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px; background:var(--ss-line);
}
.ss-hero-stats h4{
  font-size:1.42rem; font-weight:700; color:var(--ss-primary);
  margin:0 0 2px; letter-spacing:normal;
}
.ss-hero-stats p{ margin:0; font-size:.76rem; font-weight:500; line-height:1.35; }

/* ==========================================================
   HERO — SOFTWARE / ERP MOCKUP
   ========================================================== */
.ss-hero-visual{ position:relative; padding:22px 10px; }

/* પાછળનો directional પ્રકાશ (RedSun reference) */
.ss-spot{
  position:absolute; z-index:0; pointer-events:none;
  left:-12%; right:-12%; top:2%; height:72%;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,128,136,.30),rgba(10,168,178,.10) 45%,transparent 70%);
  filter:blur(38px);
}

/* concentric rings (Mobit reference) */
.ss-rings{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:46%; width:0; height:0;
}
.ss-rings i{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(0,128,136,.14); transform:translate(-50%,-50%);
}
.ss-rings i:nth-child(1){ width:340px; height:340px; }
.ss-rings i:nth-child(2){ width:500px; height:500px; border-color:rgba(0,128,136,.10); }
.ss-rings i:nth-child(3){ width:670px; height:670px; border-color:rgba(0,128,136,.06); }

/* Scroll સાથે સીધું થતું 3D stage.
   --tilt અને --tscale main.js સેટ કરે છે. */
.ss-app-stage{
  position:relative; z-index:2;
  perspective:1600px;
  transform:rotateX(var(--tilt,0deg)) scale(var(--tscale,1));
  transform-origin:50% 12%;
  transform-style:preserve-3d;
  will-change:transform;
}

.ss-app{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--ss-line);
  border-radius:var(--ss-r-lg);
  box-shadow:0 2px 6px rgba(20,26,26,.05), 0 34px 80px rgba(0,128,136,.16);
  animation:ssFloat 8s ease-in-out infinite;
}

/* --- title bar --- */
.ss-app-bar{
  display:flex; align-items:center; gap:6px;
  padding:12px 16px; border-bottom:1px solid var(--ss-line);
  background:linear-gradient(180deg,#fbfefe,#f5fafa);
}
.ss-dot{ width:9px; height:9px; border-radius:50%; background:#dde6e6; }
.ss-dot:first-child{ background:var(--ss-primary); }
.ss-app-name{
  margin-left:10px; font-family:var(--ss-ff-head);
  font-weight:700; font-size:.78rem; color:var(--ss-fg);
}
.ss-app-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:.62rem; font-weight:700; letter-spacing:.8px; color:var(--ss-primary);
  background:var(--ss-p-50); border:1px solid var(--ss-p-100);
  padding:.2rem .55rem; border-radius:var(--ss-pill);
}

.ss-app-body{ display:flex; min-height:330px; }

/* --- sidebar --- */
.ss-app-side{
  flex:0 0 52px; display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:14px 0; background:var(--ss-muted);
  border-right:1px solid var(--ss-line);
}
.ss-side-i{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  color:#9aa8a8; font-size:.95rem; transition:.3s var(--ss-ease);
}
.ss-side-i.is-on{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; box-shadow:0 6px 14px rgba(0,128,136,.32);
  animation:ssSideGlow 3.4s ease-in-out infinite;
}
.ss-side-btm{ margin-top:auto; }

/* --- main --- */
.ss-app-main{ flex:1; padding:16px; min-width:0; }

.ss-app-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.ss-app-head b{
  display:block; font-family:var(--ss-ff-head);
  font-size:.94rem; color:var(--ss-fg); line-height:1.2;
}
.ss-app-head small{ font-size:.68rem; color:var(--ss-body); }
.ss-app-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.64rem; font-weight:600; color:var(--ss-fg);
  background:#fff; border:1px solid var(--ss-line);
  padding:.28rem .65rem; border-radius:var(--ss-pill);
}
.ss-app-chip i{ color:var(--ss-primary); font-size:.7rem; }

/* --- KPI cards --- */
.ss-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.ss-kpi{
  background:var(--ss-muted); border:1px solid var(--ss-line);
  border-radius:12px; padding:10px 11px; position:relative; overflow:hidden;
  animation:ssKpiIn .6s var(--ss-ease) both;
}
.ss-kpi:nth-child(1){ animation-delay:.25s }
.ss-kpi:nth-child(2){ animation-delay:.38s }
.ss-kpi:nth-child(3){ animation-delay:.51s }
.ss-kpi::after{
  content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg); animation:ssShine 3.6s var(--ss-ease) infinite;
}
.ss-kpi:nth-child(2)::after{ animation-delay:.5s }
.ss-kpi:nth-child(3)::after{ animation-delay:1s }
.ss-kpi p{ margin:0 0 3px; font-size:.6rem; font-weight:600; color:var(--ss-body); }
.ss-kpi h5{
  margin:0; font-family:var(--ss-ff-head);
  font-size:.9rem; font-weight:700; color:var(--ss-fg); letter-spacing:-.02em;
  white-space:nowrap;
}
.ss-kpi-up,.ss-kpi-dn{
  display:inline-flex; align-items:center; margin-top:3px;
  font-size:.58rem; font-weight:700; border-radius:var(--ss-pill); padding:.05rem .35rem;
}
.ss-kpi-up{ color:#0f9d58; background:#e9f7ef; }
.ss-kpi-dn{ color:#d9534f; background:#fdeceb; }

/* --- chart --- */
.ss-chart{
  position:relative; background:#fff; border:1px solid var(--ss-line);
  border-radius:12px; padding:11px 11px 6px; margin-bottom:12px;
}
.ss-chart-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ss-chart-top span:first-child{
  font-family:var(--ss-ff-head); font-size:.72rem; font-weight:700; color:var(--ss-fg);
}
.ss-chart-tag{ font-size:.58rem; font-weight:600; color:var(--ss-primary); }
.ss-chart-svg{ display:block; width:100%; height:66px; }
.ss-chart-area{ opacity:0; animation:ssFadeArea .9s ease 1.5s forwards; }
.ss-chart-line{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:ssDrawLine 1.8s var(--ss-ease) .5s forwards;
}
.ss-chart-pt{
  position:absolute; right:12px; top:34px;
  width:8px; height:8px; border-radius:50%; background:var(--ss-primary);
  box-shadow:0 0 0 3px rgba(0,128,136,.18);
  opacity:0; animation:ssPtIn .4s ease 2.2s forwards;
}
.ss-chart-pt::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--ss-primary); animation:ssPing 2.2s cubic-bezier(0,0,.2,1) infinite 2.4s;
}

/* --- order rows --- */
.ss-rows{ display:flex; flex-direction:column; gap:6px; }
.ss-row{
  display:flex; align-items:center; gap:9px;
  background:var(--ss-muted); border:1px solid var(--ss-line);
  border-radius:10px; padding:7px 9px;
  animation:ssRowIn .55s var(--ss-ease) both;
}
.ss-row:nth-child(1){ animation-delay:1.1s }
.ss-row:nth-child(2){ animation-delay:1.3s }
.ss-row:nth-child(3){ animation-delay:1.5s }
.ss-row-ic{
  width:24px; height:24px; flex:0 0 24px; border-radius:7px;
  display:grid; place-items:center;
  background:var(--ss-p-50); color:var(--ss-primary); font-size:.7rem;
}
.ss-row-tx{ min-width:0; flex:1; }
.ss-row-tx b{
  display:block; font-family:var(--ss-ff-head);
  font-size:.68rem; font-weight:700; color:var(--ss-fg); line-height:1.3;
}
.ss-row-tx small{ font-size:.6rem; color:var(--ss-body); }
.ss-tag{
  font-size:.55rem; font-weight:700; letter-spacing:.3px;
  padding:.16rem .45rem; border-radius:var(--ss-pill); white-space:nowrap;
}
.ss-tag-ok{ color:#0f9d58; background:#e9f7ef; }
.ss-tag-wait{ color:#c47f17; background:#fdf3e2; }

/* --- live toast --- */
.ss-toast{
  position:absolute; left:12px; bottom:12px; z-index:4;
  display:flex; align-items:center; gap:9px;
  background:var(--ss-secondary); color:#fff;
  border-radius:12px; padding:9px 13px;
  box-shadow:0 12px 30px rgba(20,26,26,.28);
  opacity:0; transform:translateY(12px);
  animation:ssToast 7s ease-in-out 3s infinite;
}
.ss-toast i{ color:var(--ss-primary-l); font-size:.95rem; }
.ss-toast b{
  display:block; font-family:var(--ss-ff-head);
  font-size:.68rem; font-weight:700; line-height:1.3;
}
.ss-toast small{ font-size:.6rem; color:rgba(255,255,255,.65); }

/* floating chips around mockup */
.ss-hv-float{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border:1px solid var(--ss-line); border-radius:var(--ss-r-sm);
  padding:10px 14px; box-shadow:0 10px 30px rgba(20,26,26,.10);
  animation:ssFloat 5.5s ease-in-out infinite;
}
.ss-hv-float i{ font-size:1.15rem; color:var(--ss-primary); }
.ss-hv-float b{
  display:block; font-size:.8rem; color:var(--ss-fg); line-height:1.25;
  font-family:var(--ss-ff-head); font-weight:700;
}
.ss-hv-float small{ font-size:.68rem; color:var(--ss-body); }
/* ⚠️ Chip placement rule — overlap ટાળવા માટે:
   · f1  → ડાબે, ફક્ત sidebar (icons) ઉપર. App name ને અડે નહીં.
   · f2  → નીચે-જમણા ખૂણેથી બહાર લટકે. Card નું content ઢંકાય નહીં.
   · toast → app ની અંદર નીચે-ડાબે (f2 થી સામે છેડે).
   Chart અને order rows ઉપર ક્યારેય chip ન મૂકવી — એ જ મુખ્ય visual છે. */
.ss-hv-f1{ top:70px; left:-16px; animation-delay:.4s; }
.ss-hv-f2{ bottom:-32px; right:-16px; animation-delay:2s; }


/* ==========================================================
   INDUSTRIES BAND  (two-row marquee)
   ========================================================== */
/* dark band — Final CTA જેવો જ gradient + grid texture */
.ss-ind-band{
  position:relative; overflow:hidden; padding:70px 0 74px; color:#fff;
  background:var(--ss-dark-bg);
}
.ss-ind-band .ss-orb-a{ opacity:.3; }

.ss-ind-head{ max-width:660px; margin:0 auto 36px; text-align:center; }
.ss-ind-title{
  font-size:clamp(1.3rem,2.8vw,1.9rem); font-weight:700;
  letter-spacing:normal; margin-bottom:10px; color:#fff;
}
.ss-ind-sub{ font-size:.97rem; color:rgba(255,255,255,.66); margin:0; }

/* dark પર highlight વધારે તેજસ્વી */
.ss-ind-band .ss-hl{ color:var(--ss-primary-l); }
.ss-ind-band .ss-hl::after{
  background:linear-gradient(90deg,rgba(10,168,178,.38),rgba(10,168,178,.12));
}

.ss-mq-wrap{ display:flex; flex-direction:column; gap:14px; }

/* કિનારીનો fade `mask` થી — background કોઈ પણ રંગનું હોય તો પણ ચાલે,
   એટલે gradient background સાથે ક્યાંય seam નથી દેખાતો */
.ss-marquee{
  position:relative; overflow:hidden; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}

.ss-mq-track{
  display:flex; width:max-content; gap:14px;
  animation:ssMarquee 38s linear infinite;
}
.ss-mq-rev{ animation-direction:reverse; animation-duration:44s; }
.ss-marquee:hover .ss-mq-track{ animation-play-state:paused; }

.ss-mq-item{
  display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--ss-pill);
  padding:.5rem 1.4rem .5rem .5rem;
  font-family:var(--ss-ff-head);
  font-size:.92rem; font-weight:600; color:#fff;
  backdrop-filter:blur(6px);
  transition:.32s var(--ss-ease);
}
.ss-mq-ic{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  display:grid; place-items:center; font-size:1.05rem;
  background:rgba(10,168,178,.16);
  border:1px solid rgba(10,168,178,.3);
  color:var(--ss-primary-l);
  transition:.32s var(--ss-ease);
}
.ss-mq-item:hover{
  background:rgba(0,128,136,.22); border-color:var(--ss-primary-l);
  transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.ss-mq-item:hover .ss-mq-ic{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; border-color:transparent; transform:rotate(-8deg) scale(1.06);
}


/* ==========================================================
   CHECKLIST (Section 2)
   ========================================================== */
.ss-check{
  display:flex; align-items:center; gap:13px; width:100%; height:100%; cursor:pointer;
  background:#fff; border:1.5px solid var(--ss-line); border-radius:var(--ss-r);
  padding:16px 18px; transition:.3s var(--ss-ease); position:relative; overflow:hidden;
}
.ss-check::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(0,128,136,.10),transparent);
  transform:skewX(-18deg);
}
.ss-check:hover{ border-color:var(--ss-primary-l); transform:translateY(-3px); box-shadow:var(--ss-sh-h); }
.ss-check:hover::after{ animation:ssShine .9s var(--ss-ease); }
.ss-check input{ display:none; }
.ss-check-box{
  flex:0 0 24px; width:24px; height:24px; border-radius:8px;
  border:2px solid #cfdcdc; display:grid; place-items:center; transition:.25s var(--ss-ease);
}
.ss-check-box i{ font-size:.85rem; color:#fff; opacity:0; transform:scale(.3); transition:.25s var(--ss-ease); }
.ss-check-txt{ font-size:.94rem; font-weight:500; color:var(--ss-fg); }
.ss-check input:checked ~ .ss-check-box{
  background:var(--ss-primary); border-color:var(--ss-primary); transform:scale(1.08);
}
.ss-check input:checked ~ .ss-check-box i{ opacity:1; transform:scale(1); }
.ss-check:has(input:checked){
  border-color:var(--ss-primary); background:var(--ss-p-50);
  box-shadow:0 0 0 4px rgba(0,128,136,.07);
}

/* checklist હવે જમણી કૉલમમાં ઊભી યાદી છે (grid નહીં) */
.ss-check-list{ display:flex; flex-direction:column; gap:10px; }

.ss-verdict{ max-height:0; opacity:0; overflow:hidden; transition:.5s var(--ss-ease); }
.ss-verdict.show{ max-height:360px; opacity:1; }
.ss-verdict-inner{
  display:flex; gap:16px; align-items:flex-start;
  background:linear-gradient(135deg,#fffaf0,#fffdf8);
  border:1px solid #ffe4bd; border-left:4px solid #f59e0b;
  border-radius:var(--ss-r); padding:22px 24px; margin-top:28px;
  box-shadow:0 12px 34px rgba(245,158,11,.10);
}
.ss-verdict-inner > i{ font-size:1.55rem; color:#f59e0b; margin-top:3px; }
.ss-verdict-inner h5{ font-size:1.05rem; margin-bottom:4px; }
.ss-verdict-inner p{ margin:0; font-size:.93rem; }
#painCount{
  display:inline-block; min-width:1.5em; text-align:center;
  color:#f59e0b; font-weight:700;
}


/* ==========================================================
   CARDS
   ========================================================== */
.ss-card{
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border:1px solid var(--ss-line); border-radius:var(--ss-r);
  padding:28px 26px; height:100%; transition:.35s var(--ss-ease);
  position:relative; overflow:hidden;
}
.ss-card::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(0,128,136,.08),transparent);
  transform:skewX(-18deg);
}
.ss-card:hover{ transform:translateY(-6px); box-shadow:var(--ss-sh-h); border-color:var(--ss-p-200); }
.ss-card:hover::after{ animation:ssShine 1s var(--ss-ease); }

.ss-card-ico{
  width:52px; height:52px; border-radius:var(--ss-r-sm); display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ss-p-50),var(--ss-p-100));
  border:1px solid var(--ss-p-100);
  color:var(--ss-primary); font-size:1.3rem; margin-bottom:16px;
  transition:.35s var(--ss-ease);
}
.ss-card:hover .ss-card-ico{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; transform:rotate(-6deg) scale(1.06); border-color:transparent;
}
.ss-card h5{ font-size:1.04rem; margin-bottom:8px; }
.ss-card p{ font-size:.92rem; margin:0; }


/* ==========================================================
   DARK SECTION
   ========================================================== */
.ss-dark{ background:var(--ss-dark-bg); position:relative; }
.ss-dark .ss-orb-a{ width:520px; height:520px; top:-180px; left:-120px; opacity:.28; }
.ss-dark .ss-orb-b{ width:420px; height:420px; bottom:-160px; right:-100px; opacity:.22; }

/* --- 3-વર્ષનું નુકસાન: asymmetric grid ---
   Row 1: [ભરેલું tile ×2] [card] [card]
   Row 2: [card] [card] [punch ×2] */
.ss-loss-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ss-loss-wide{ grid-column:span 2; }

/* Auto-placement પર ન છોડો — tiles ની ઊંચાઈ બદલાય તો ક્રમ ખસી જાય છે.
   Desktop પર દરેક tile ની જગ્યા સ્પષ્ટ લખેલી છે. */
@media (min-width:992px){
  .ss-loss-grid > *:nth-child(1){ grid-area:1 / 1 / 2 / 3; }
  .ss-loss-grid > *:nth-child(2){ grid-area:1 / 3 / 2 / 4; }
  .ss-loss-grid > *:nth-child(3){ grid-area:1 / 4 / 2 / 5; }
  .ss-loss-grid > *:nth-child(4){ grid-area:2 / 1 / 3 / 2; }
  .ss-loss-grid > *:nth-child(5){ grid-area:2 / 2 / 3 / 3; }
  .ss-loss-grid > *:nth-child(6){ grid-area:2 / 3 / 3 / 5; }
}

/* .ss-loss — light by default. `.ss-dark` ની અંદર આપોઆપ glass થઈ જાય. */
.ss-loss{
  display:flex; align-items:center; gap:15px; height:100%;
  background:#fff; border:1px solid var(--ss-line);
  border-radius:var(--ss-r); padding:20px 22px; transition:.35s var(--ss-ease);
}

/* સૌથી ભારે નુકસાન — ભરેલું tile */
.ss-loss-fill{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--ss-secondary) 0%,#123c40 60%,var(--ss-primary-d) 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 16px 40px rgba(20,26,26,.18);
  padding:26px 28px;
}
.ss-loss-fill::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:28px 28px;
}
/* ⚠️ બે class વાપરેલા છે (`.ss-loss.ss-loss-fill`) જેથી specificity વધે.
   ફક્ત `.ss-loss-fill p` લખીએ તો નીચે આવતો `.ss-loss p` એને હરાવી દે છે
   અને ઘેરા tile પર ઘેરું લખાણ થઈને અદૃશ્ય થઈ જાય છે. */
.ss-loss.ss-loss-fill i{ position:relative; font-size:1.9rem; color:var(--ss-primary-l); }
.ss-loss.ss-loss-fill p{ position:relative; color:#fff; font-size:1.06rem; font-weight:600; }
.ss-loss.ss-loss-fill:hover{ transform:translateY(-5px); box-shadow:0 24px 54px rgba(20,26,26,.26); }
.ss-loss.ss-loss-fill:hover i{ color:#fff; }
.ss-loss:hover{
  border-color:var(--ss-primary); transform:translateY(-5px); box-shadow:var(--ss-sh-h);
}
.ss-loss i{ font-size:1.4rem; color:var(--ss-primary); flex:0 0 auto; transition:.35s var(--ss-ease); }
.ss-loss:hover i{ transform:scale(1.14); }
.ss-loss p{ margin:0; color:var(--ss-fg); font-size:.95rem; font-weight:500; }

.ss-dark .ss-loss{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09);
  backdrop-filter:blur(6px);
}
.ss-dark .ss-loss:hover{
  background:rgba(0,128,136,.16); border-color:var(--ss-primary);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.ss-dark .ss-loss i{ color:var(--ss-primary-l); }
.ss-dark .ss-loss:hover i{ color:#fff; }
.ss-dark .ss-loss p{ color:#fff; }

/* punch હવે grid નું છેલ્લું પહોળું tile છે */
.ss-punch{
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(135deg,var(--ss-p-50),#fff 70%);
  border:1px solid var(--ss-p-100); border-radius:var(--ss-r);
  padding:26px 28px;
}
.ss-punch p{ color:var(--ss-body); font-size:.98rem; margin-bottom:6px; }
.ss-punch h3{ color:var(--ss-fg); font-size:clamp(1.15rem,2.1vw,1.5rem); font-weight:700; letter-spacing:normal; }
.ss-punch .btn{ align-self:flex-start; }
.ss-dark .ss-punch{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.ss-dark .ss-punch p{ color:rgba(255,255,255,.55); }
.ss-dark .ss-punch h3{ color:#fff; }


/* ==========================================================
   STEP CARDS
   ========================================================== */
.ss-step-card{
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border:1px solid var(--ss-line); border-radius:var(--ss-r);
  padding:32px 28px; height:100%; position:relative; overflow:hidden;
  transition:.35s var(--ss-ease);
}
.ss-step-card::before{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--ss-primary-l),var(--ss-primary));
  transition:.5s var(--ss-ease);
}
.ss-step-card:hover{ transform:translateY(-6px); box-shadow:var(--ss-sh-h); }
.ss-step-card:hover::before{ width:100%; }
.ss-step-num{
  display:block; font-family:var(--ss-ff-head);
  font-size:2.5rem; font-weight:700; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--ss-p-200),var(--ss-p-100));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px; transition:.35s var(--ss-ease);
}
.ss-step-card:hover .ss-step-num{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  -webkit-background-clip:text; background-clip:text;
}
.ss-step-card h5{ font-size:1.06rem; margin-bottom:9px; }
.ss-step-card p{ font-size:.92rem; margin:0; }

.ss-goal{
  display:flex; align-items:center; gap:18px; justify-content:center;
  background:linear-gradient(135deg,var(--ss-p-50),rgba(255,255,255,.4));
  border:1px solid var(--ss-p-100); border-radius:var(--ss-r);
  padding:26px 30px; text-align:center;
}
.ss-goal i{ font-size:1.85rem; color:var(--ss-primary); }
.ss-goal p{ margin:0; font-size:1.03rem; }
.ss-goal b{ color:var(--ss-primary); }

/* --- step cards / goal જ્યારે dark section માં હોય --- */
.ss-dark .ss-step-card{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
}
.ss-dark .ss-step-card:hover{ box-shadow:0 20px 46px rgba(0,0,0,.34); }
.ss-dark .ss-step-card h5{ color:#fff; }
.ss-dark .ss-step-card p{ color:rgba(255,255,255,.68); }
.ss-dark .ss-step-num{
  background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(10,168,178,.4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ss-dark .ss-step-card:hover .ss-step-num{
  background:linear-gradient(135deg,#7fe3e9,var(--ss-primary-l));
  -webkit-background-clip:text; background-clip:text;
}

.ss-dark .ss-goal{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);
}
.ss-dark .ss-goal i{ color:var(--ss-primary-l); }
.ss-dark .ss-goal p{ color:rgba(255,255,255,.82); }
.ss-dark .ss-goal b{ color:var(--ss-primary-l); }


/* ==========================================================
   COMPARE
   ========================================================== */
.ss-compare{
  background:#fff; border:1px solid var(--ss-line); border-radius:var(--ss-r-lg);
  padding:30px 28px; height:100%; position:relative; overflow:hidden;
  transition:.35s var(--ss-ease);
}
.ss-compare h5{ font-size:1.12rem; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.ss-compare ul{ list-style:none; padding:0; margin:0; }
.ss-compare li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.94rem; padding:11px 0; border-bottom:1px dashed var(--ss-line);
}
.ss-compare li:last-child{ border-bottom:none; }
.ss-compare li i{ font-size:.85rem; margin-top:6px; flex:0 0 auto; }

.ss-compare-bad{ background:var(--ss-muted); }
.ss-compare-bad h5,.ss-compare-bad h5 i{ color:#8b9797; }
.ss-compare-bad li{ color:#8b9797; }
.ss-compare-bad li i{ color:#e07070; }

.ss-compare-good{
  border:1.5px solid var(--ss-primary);
  box-shadow:0 18px 50px rgba(0,128,136,.14);
}
.ss-compare-good::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(0,128,136,.10),transparent);
  transform:skewX(-18deg);
}
.ss-compare-good:hover::after{ animation:ssShine 1.1s var(--ss-ease); }
.ss-compare-good h5,.ss-compare-good h5 i{ color:var(--ss-primary); }
.ss-compare-good li i{ color:var(--ss-primary); }
.ss-compare-tag{
  position:absolute; top:-1px; right:24px;
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary)); color:#fff;
  font-size:.63rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:.34rem .9rem; border-radius:0 0 10px 10px;
}

.ss-pills{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }
.ss-pills span{
  background:#fff; border:1px solid var(--ss-line); border-radius:var(--ss-pill);
  padding:.55rem 1.25rem; font-size:.88rem; font-weight:600; color:var(--ss-fg);
  transition:.3s var(--ss-ease);
}
.ss-pills span:hover{ border-color:var(--ss-primary); transform:translateY(-2px); box-shadow:var(--ss-sh); }
.ss-pills i{ color:var(--ss-primary); margin-right:7px; }


/* ==========================================================
   INDUSTRIES GRID
   ========================================================== */
.ss-ind-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ss-ind{
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px);
  border:1px solid var(--ss-line); border-radius:var(--ss-r);
  padding:24px 14px; text-align:center; transition:.35s var(--ss-ease);
}
.ss-ind:hover{
  border-color:var(--ss-primary); transform:translateY(-5px); box-shadow:var(--ss-sh-h);
}
.ss-ind i{ font-size:1.55rem; color:var(--ss-primary); display:block; margin-bottom:10px; transition:.35s var(--ss-ease); }
.ss-ind:hover i{ transform:scale(1.15) rotate(-6deg); }
.ss-ind span{ font-size:.87rem; font-weight:600; color:var(--ss-fg); }


/* ==========================================================
   BENEFITS · WHY
   ========================================================== */
/* --- Benefits: BENTO GRID ---------------------------------
   4 કૉલમ. બે tile બમણી પહોળી અને ત્રાંસા સામસામે —
   એટલે page ના બીજા સરખા card grids થી અલગ દેખાય. */
.ss-bento{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }

/* --rx / --ry mouse પ્રમાણે main.js સેટ કરે છે (desktop only).
   એક જ transform માં tilt + lift બંને રાખવા પડે, નહીં તો એક બીજાને ભૂંસી નાખે. */
.ss-bento-cell{
  grid-column:span 1; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  background:#fff; border:1px solid var(--ss-line);
  border-radius:var(--ss-r-lg); padding:26px 24px;
  transition:transform .35s var(--ss-ease), box-shadow .35s var(--ss-ease), border-color .35s var(--ss-ease);
  transform:perspective(900px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px));
  transform-style:preserve-3d;
}
.ss-bento-wide{ grid-column:span 2; flex-direction:row; align-items:center; gap:20px; }

.ss-bento-cell::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(0,128,136,.10),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.ss-bento-cell:hover{
  --ty:-6px; border-color:var(--ss-p-200); box-shadow:var(--ss-sh-h);
}
.ss-bento-cell:hover::after{ animation:ssShine 1s var(--ss-ease); }

.ss-bento-ic{
  position:relative; z-index:1;
  width:52px; height:52px; flex:0 0 52px;
  border-radius:16px; display:grid; place-items:center; font-size:1.4rem;
  background:linear-gradient(135deg,var(--ss-p-50),var(--ss-p-100));
  border:1px solid var(--ss-p-100); color:var(--ss-primary);
  transition:.35s var(--ss-ease);
}
.ss-bento-cell:hover .ss-bento-ic{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; border-color:transparent; transform:rotate(-8deg) scale(1.06);
}
.ss-bento-tx{ position:relative; z-index:1; min-width:0; }
.ss-bento-tx h5{ font-size:1.04rem; margin-bottom:7px; }
.ss-bento-tx p{ font-size:.92rem; margin:0; }

/* focal tile — ભરેલું teal */
.ss-bento-fill{
  background:linear-gradient(135deg,var(--ss-primary-l) 0%,var(--ss-primary) 55%,var(--ss-primary-d) 100%);
  border-color:transparent; box-shadow:0 14px 40px rgba(0,128,136,.26);
}
.ss-bento-fill::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:30px 30px;
}
.ss-bento-fill .ss-bento-ic{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff;
}
.ss-bento-fill .ss-bento-tx h5{ color:#fff; }
.ss-bento-fill .ss-bento-tx p{ color:rgba(255,255,255,.86); }
.ss-bento-fill:hover{ box-shadow:0 22px 52px rgba(0,128,136,.36); border-color:transparent; }
.ss-bento-fill:hover .ss-bento-ic{ background:#fff; color:var(--ss-primary); border-color:transparent; }

/* બીજું પહોળું tile — હળવો teal રંગ */
.ss-bento-tint{
  background:linear-gradient(135deg,var(--ss-p-50),#fff 70%);
  border-color:var(--ss-p-100);
}



/* ==========================================================
   TIMELINE
   ========================================================== */
.ss-timeline{ max-width:820px; margin:0 auto; position:relative; }
.ss-timeline::before{
  content:''; position:absolute; left:23px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,var(--ss-primary),var(--ss-p-100));
  transform:scaleY(0); transform-origin:top;
  animation:ssDraw 1.4s var(--ss-ease) forwards; animation-play-state:paused;
}
.ss-timeline.drawn::before{ animation-play-state:running; }

.ss-tl-item{ display:flex; gap:22px; padding-bottom:26px; position:relative; }
.ss-tl-item:last-child{ padding-bottom:0; }
.ss-tl-dot{
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; font-weight:700; font-size:1rem;
  font-family:var(--ss-ff-head);
  display:grid; place-items:center; z-index:1;
  box-shadow:0 0 0 6px var(--ss-muted), 0 8px 20px rgba(0,128,136,.28);
  transition:.35s var(--ss-ease);
}
.ss-tl-item:hover .ss-tl-dot{ transform:scale(1.1); }
.ss-tl-body{
  background:#fff; border:1px solid var(--ss-line); border-radius:var(--ss-r);
  padding:20px 24px; flex:1; transition:.35s var(--ss-ease);
}
.ss-tl-body:hover{ box-shadow:var(--ss-sh-h); border-color:var(--ss-p-200); transform:translateX(4px); }
.ss-tl-body h5{ font-size:1.04rem; margin-bottom:6px; }
.ss-tl-body p{ font-size:.92rem; margin:0; }

/* --- desktop: આડું stepper --------------------------------
   ઊભું timeline page ના બીજા list layouts જેવું જ લાગતું હતું.
   ≥992px પર પાંચેય step આડા બેસે છે અને રેલ ડાબે થી જમણે દોરાય છે.
   992px ની નીચે ઉપરનું ઊભું layout જ ચાલુ રહે છે.
   રેલ 10% inset છે — grid ના પહેલા/છેલ્લા column નું કેન્દ્ર ~9.3% પર
   આવે છે, એટલે રેલ ના બંને છેડા dot ની નીચે ઢંકાઈ જાય છે. */
@media (min-width:992px){
  .ss-timeline{
    max-width:none;
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  }
  .ss-timeline::before{
    left:10%; right:10%; top:23px; bottom:auto; width:auto; height:2px;
    background:linear-gradient(90deg,var(--ss-primary),var(--ss-p-100));
    transform:scaleX(0); transform-origin:left;
    animation-name:ssDrawX;
  }

  .ss-tl-item{
    flex-direction:column; align-items:center; text-align:center;
    gap:18px; padding-bottom:0;
  }
  /* બે dot વચ્ચે દિશા બતાવતું નાનું તીર — gap ની બરાબર વચ્ચે */
  .ss-tl-item:not(:last-child)::after{
    content:''; position:absolute; top:24px; left:calc(100% + 10px);
    width:7px; height:7px;
    border-top:2px solid var(--ss-p-200); border-right:2px solid var(--ss-p-200);
    transform:translate(-50%,-50%) rotate(45deg);
    opacity:0; transition:opacity .5s var(--ss-ease) .9s;
  }
  .ss-timeline.drawn .ss-tl-item:not(:last-child)::after{ opacity:1; }

  .ss-tl-dot{ flex:none; }
  .ss-tl-body{
    flex:1; width:100%; position:relative; overflow:hidden;
    padding:22px 20px; border-radius:var(--ss-r-lg);
  }
  .ss-tl-body::after{
    content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
    background:linear-gradient(100deg,transparent,rgba(0,128,136,.10),transparent);
    transform:skewX(-18deg); pointer-events:none;
  }
  .ss-tl-body:hover{ transform:translateY(-6px); }
  .ss-tl-body:hover::after{ animation:ssShine 1s var(--ss-ease); }
  .ss-tl-body h5{ font-size:1rem; }
  .ss-tl-body p{ font-size:.89rem; }
}


/* ==========================================================
   STATS BAND
   ========================================================== */
.ss-stats-wrap{
  padding:76px 0; position:relative; overflow:hidden;
  background:linear-gradient(125deg,var(--ss-primary) 0%,var(--ss-primary-d) 55%,#004f55 100%);
}

.ss-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* આંકડો ડાબે, icon જમણા ખૂણે — વચ્ચે centered stack કરતાં
   card ની પહોળાઈ વધારે વપરાય છે અને numeral ને જગ્યા મળે છે. */
.ss-stat{
  position:relative; overflow:hidden; text-align:left;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--ss-r-lg); padding:26px 24px 24px;
  backdrop-filter:blur(8px);
  transition:.35s var(--ss-ease);
}
.ss-stat::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.ss-stat:hover{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34);
  transform:translateY(-6px); box-shadow:0 20px 44px rgba(0,0,0,.24);
}
.ss-stat:hover::after{ animation:ssShine 1s var(--ss-ease); }

.ss-stat-ic{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; margin:0; border-radius:50%;
  display:grid; place-items:center; font-size:1.2rem; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  transition:.35s var(--ss-ease);
}
.ss-stat:hover .ss-stat-ic{
  background:#fff; color:var(--ss-primary); border-color:transparent;
  transform:rotate(-8deg) scale(1.08);
}
.ss-stat h3{
  color:#fff; font-family:var(--ss-ff-head);
  font-size:clamp(1.9rem,3.9vw,2.9rem); font-weight:700;
  letter-spacing:-.03em; margin-bottom:0; line-height:1.12;
}

/* ⚠️ suffix માં letter-spacing પાછું normal કરવું ફરજિયાત છે.
   h3 નું -.03em ફક્ત આંકડા માટે છે (§4 નો નિયમ). ચોથા card નો
   suffix ગુજરાતી *શબ્દ* છે ("કલાક"), પ્રતીક નહીં — negative tracking
   એના glyph ને આંકડા ઉપર ખેંચી લાવે છે. */
.ss-stat-sfx{
  font-size:.6em; font-weight:700; opacity:.92;
  letter-spacing:normal; margin-left:.14em;
}

/* લેબલ ઉપર નાનું accent rule — hover પર લંબાય છે */
.ss-stat p{
  position:relative; margin:0; padding-top:14px; margin-top:12px;
  color:rgba(255,255,255,.78); font-size:.84rem; font-weight:500;
}
.ss-stat p::before{
  content:''; position:absolute; top:0; left:0; width:28px; height:2px;
  border-radius:2px; background:rgba(255,255,255,.4);
  transition:.35s var(--ss-ease);
}
.ss-stat:hover p::before{ width:52px; background:#fff; }


/* ==========================================================
   SECURITY
   ========================================================== */
/* decorative shield — ધબકતાં વર્તુળો સાથે */
.ss-shield{
  position:relative; width:170px; height:170px; margin-top:34px;
  display:grid; place-items:center;
}
.ss-shield i{
  position:relative; z-index:2;
  width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center; font-size:2.3rem; color:#fff;
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  box-shadow:0 16px 38px rgba(0,128,136,.34);
}
.ss-shield::before,.ss-shield::after{
  content:''; position:absolute; border-radius:50%;
  border:1.5px solid rgba(0,128,136,.32);
  animation:ssRing 3.4s ease-out infinite;
}
.ss-shield::before{ width:120px; height:120px; }
.ss-shield::after{ width:170px; height:170px; animation-delay:1.7s; }

/* security checklist rows */
.ss-sec-list{ display:flex; flex-direction:column; gap:10px; }
.ss-sec-row{
  display:flex; align-items:center; gap:15px;
  background:#fff; border:1px solid var(--ss-line);
  border-radius:var(--ss-r); padding:15px 20px;
  transition:.35s var(--ss-ease);
}
.ss-sec-row:hover{
  border-color:var(--ss-primary); transform:translateX(6px); box-shadow:var(--ss-sh-h);
}
.ss-sec-ic{
  width:46px; height:46px; flex:0 0 46px; border-radius:14px;
  display:grid; place-items:center; font-size:1.2rem;
  background:linear-gradient(135deg,var(--ss-p-50),var(--ss-p-100));
  border:1px solid var(--ss-p-100); color:var(--ss-primary);
  transition:.35s var(--ss-ease);
}
.ss-sec-row:hover .ss-sec-ic{
  background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; border-color:transparent; transform:rotate(-8deg) scale(1.06);
}
.ss-sec-tx{ flex:1; min-width:0; }
.ss-sec-tx b{
  display:block; font-family:var(--ss-ff-head);
  font-size:.99rem; font-weight:700; color:var(--ss-fg); line-height:1.35;
}
.ss-sec-tx small{ font-size:.85rem; color:var(--ss-body); }
.ss-sec-ok{ font-size:1.2rem; color:var(--ss-primary); flex:0 0 auto; opacity:.55; transition:.35s var(--ss-ease); }
.ss-sec-row:hover .ss-sec-ok{ opacity:1; transform:scale(1.12); }

/* --- title અને description બાજુ બાજુમાં ----------------------
   પહેલાં બંને ઉપર-નીચે હતાં. row 631px પહોળી હોય અને લખાણ ફક્ત
   ડાબા ત્રીજા ભાગમાં પૂરું થઈ જાય, એટલે દરેક row માં માપ્યા પ્રમાણે
   289-379px ખાલી જગ્યા રહેતી હતી અને section ખાલી લાગતું હતું.
   હવે એક જ લીટીમાં, spec-table જેવું, આખી પહોળાઈ વપરાય છે.

   ⚠️ Breakpoint **row ની પહોળાઈ** પ્રમાણે નક્કી કર્યું છે, column ના
   layout પ્રમાણે નહીં. આ ભૂલ સહેલાઈથી થાય એવી છે:
   · 768-991px — બંને column ઉપર-નીચે થાય છે એટલે row *વધારે* પહોળી
     (~696px) બને છે; ત્યાં ખાલી જગ્યા સૌથી વધારે હતી (335-425px).
   · 576px ની *નીચે* container પ્રવાહી થાય છે, એટલે 575px પર row
     551px — 576px ના 516px કરતાં પણ પહોળી. એટલે 576 પર gate મૂકવું
     ખોટું હતું.
   480px સુધી row ~456px રહે છે, ત્યાં સુધી બે column સમાય છે.
   એની નીચે (375px પર row ~343px) description માટે જગ્યા બચતી નથી,
   એટલે ત્યાં પાછું ઉપર-નીચે જ રાખ્યું છે. */
@media (min-width:480px){
  .ss-sec-list{ gap:9px; }
  .ss-sec-row{ padding:13px 20px; }

  .ss-sec-tx{ display:flex; align-items:baseline; gap:0; }
  .ss-sec-tx b{ flex:0 0 138px; }
  .ss-sec-tx small{
    flex:1; min-width:0; line-height:1.5;
    padding-left:18px; margin-left:18px;
    border-left:1px solid var(--ss-line);
    transition:border-color .35s var(--ss-ease);
  }
  .ss-sec-row:hover .ss-sec-tx small{ border-left-color:var(--ss-p-200); }
}
/* પહોળી row પર title ને વધારે જગ્યા, જેથી બધા title એક લીટીમાં રહે */
@media (min-width:768px){
  .ss-sec-tx b{ flex:0 0 176px; }
}


/* ==========================================================
   FAQ
   ========================================================== */
.ss-acc .accordion-item{
  border:1px solid var(--ss-line); border-radius:var(--ss-r)!important;
  margin-bottom:12px; overflow:hidden; background:#fff;
  transition:.3s var(--ss-ease);
}
.ss-acc .accordion-item:hover{ border-color:var(--ss-p-200); box-shadow:var(--ss-sh); }
.ss-acc .accordion-button{
  font-family:var(--ss-ff-head);
  font-weight:600; font-size:1rem; color:var(--ss-fg);
  padding:20px 24px; background:#fff; box-shadow:none;
}
.ss-acc .accordion-button:not(.collapsed){ color:var(--ss-primary); background:var(--ss-p-50); }
.ss-acc .accordion-button:focus{ box-shadow:none; }
.ss-acc .accordion-button::after{
  background-image:none; content:'\F64D'; font-family:'bootstrap-icons';
  font-size:1.05rem; transition:.35s var(--ss-ease); width:auto; height:auto;
  color:var(--ss-primary);
}
.ss-acc .accordion-button:not(.collapsed)::after{ transform:rotate(180deg); }
.ss-acc .accordion-body{ padding:0 24px 22px; font-size:.94rem; }


/* ==========================================================
   FORM
   ========================================================== */
.ss-form-wrap{ background:var(--ss-muted); position:relative; overflow:hidden; }
.ss-form-wrap .ss-orb-a{ width:520px; height:520px; top:-180px; left:-140px; opacity:.3; }

.ss-form-points{ list-style:none; padding:0; margin:24px 0; }
.ss-form-points li{
  display:flex; align-items:center; gap:11px;
  font-size:.94rem; font-weight:500; color:var(--ss-fg); padding:7px 0;
}
.ss-form-points i{ color:var(--ss-primary); font-size:1.05rem; }

.ss-form-note{
  display:flex; gap:13px; align-items:flex-start;
  background:#fff; border:1px solid var(--ss-line); border-left:4px solid #25d366;
  border-radius:var(--ss-r-sm); padding:16px 18px;
}
.ss-form-note i{ font-size:1.3rem; color:#25d366; }
.ss-form-note p{ margin:0; font-size:.89rem; }

.ss-form-card{
  background:#fff; border:1px solid var(--ss-line); border-radius:var(--ss-r-lg);
  padding:34px 32px; box-shadow:0 2px 8px rgba(20,26,26,.04), 0 24px 60px rgba(0,128,136,.10);
  position:relative;
}
.ss-form-cap{ font-size:.89rem; margin-bottom:24px; }

.ss-form-card .form-label{ font-size:.85rem; font-weight:600; color:var(--ss-fg); margin-bottom:6px; }
.ss-form-card .form-label span{ color:#e05555; }
.ss-form-card .form-label small{ font-weight:400; color:var(--ss-body); }

.ss-form-card .form-control,
.ss-form-card .form-select{
  border:1.5px solid var(--ss-line); border-radius:var(--ss-r-sm);
  padding:.78rem 1rem; font-size:.94rem; color:var(--ss-fg); background:#fcfefe;
  transition:.25s var(--ss-ease);
}
.ss-form-card .form-control:focus,
.ss-form-card .form-select:focus{
  border-color:var(--ss-primary); box-shadow:0 0 0 4px rgba(0,128,136,.10); background:#fff;
}
.ss-form-card .form-control::placeholder{ color:#a9b6b6; }

.ss-radio-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.ss-radio input{ display:none; }
.ss-radio span{
  display:inline-block; border:1.5px solid var(--ss-line); border-radius:var(--ss-pill);
  padding:.52rem 1.15rem; font-size:.88rem; font-weight:500;
  color:var(--ss-fg); cursor:pointer; transition:.25s var(--ss-ease); background:#fcfefe;
}
.ss-radio span:hover{ border-color:var(--ss-primary-l); }
.ss-radio input:checked + span{
  background:var(--ss-primary); border-color:var(--ss-primary); color:#fff;
  box-shadow:0 4px 12px rgba(0,128,136,.24);
}

.ss-err{ display:none; color:#dc3545; font-size:.82rem; margin-top:8px; }
.ss-err.show{ display:block; }
.ss-form-priv{ text-align:center; font-size:.81rem; margin:14px 0 0; }
.ss-form-priv i{ color:var(--ss-primary); margin-right:4px; }

.ss-form-success{
  display:none; position:absolute; inset:0; z-index:5;
  background:#fff; border-radius:var(--ss-r-lg);
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 30px;
}
.ss-form-success.show{ display:flex; animation:ssPop .5s var(--ss-ease); }
.ss-form-success i{ font-size:3.4rem; color:#25d366; margin-bottom:16px; }
.ss-form-success h5{ font-size:1.28rem; margin-bottom:8px; }
.ss-form-success p{ font-size:.93rem; margin-bottom:20px; max-width:340px; }


/* ==========================================================
   FINAL CTA · FOOTER
   ========================================================== */
.ss-final{
  padding:96px 0; position:relative; overflow:hidden; color:#fff;
  background:var(--ss-dark-bg);
}
.ss-final .ss-orb-a{ width:560px; height:560px; top:-200px; right:-140px; opacity:.34; }
.ss-final-logo{
  width:auto; height:104px; margin-bottom:26px;
  animation:ssFloat 6s ease-in-out infinite;
}
.ss-final h2{ color:#fff; font-size:clamp(1.45rem,3.2vw,2.3rem); margin-bottom:12px; }
.ss-final p{ color:rgba(255,255,255,.72); font-size:1rem; margin:0; }

.ss-final-contact{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px 22px; margin-top:34px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
}
.ss-final-contact a{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.82); font-size:.93rem; font-weight:500;
  transition:.25s var(--ss-ease);
}
.ss-final-contact a:hover{ color:#fff; }
.ss-final-contact i{ color:var(--ss-primary-l); }
.ss-final-sep{ width:1px; height:16px; background:rgba(255,255,255,.2); }
/* website — link નથી, ફક્ત લખાણ (funnel માંથી exit ન થાય) */
.ss-final-web{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.82); font-size:.93rem; font-weight:500;
}

/* disclaimer strip — footer નથી, ફક્ત એક લાઈન, કોઈ link નહીં */
.ss-endbar{ background:var(--ss-secondary); padding:18px 0; text-align:center; }
.ss-endbar p{
  margin:0; font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.45);
}


/* ==========================================================
   FLOATING · MOBILE BAR
   ========================================================== */
/* floating WhatsApp બટન 2026-08-03 એ કાઢી નાખ્યું (client ની સૂચના).
   એની જગ્યા ખાલી ન રહે એ માટે back-to-top એ જ ઊંચાઈએ ખસેડ્યું છે,
   જેથી mobile bar થી ઉપર જ રહે. */
.ss-top{
  position:fixed; right:18px; bottom:92px; z-index:1030;
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--ss-secondary); color:#fff; font-size:1.05rem;
  opacity:0; pointer-events:none; transition:.3s var(--ss-ease);
  box-shadow:0 8px 22px rgba(20,26,26,.3);
}
.ss-top.show{ opacity:1; pointer-events:auto; }
.ss-top:hover{ background:var(--ss-primary); transform:translateY(-3px); }

.ss-mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; align-items:stretch; gap:1px;
  background:var(--ss-line);
  box-shadow:0 -6px 26px rgba(20,26,26,.12);
}
.ss-mobile-bar a{
  flex:1; background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  text-align:center; padding:10px 4px calc(10px + env(safe-area-inset-bottom));
  font-size:.79rem; font-weight:600; color:var(--ss-fg); line-height:1.4;
}
.ss-mobile-bar a i{ display:block; font-size:1.1rem; color:var(--ss-primary); margin-bottom:1px; }
.ss-mobile-bar .ss-mb-cta{
  flex:1.5; background:linear-gradient(135deg,var(--ss-primary-l),var(--ss-primary));
  color:#fff; display:grid; place-items:center;
}

/* ---------- Scroll progress ---------- */
.ss-progress{
  position:fixed; top:0; left:0; z-index:1050;
  height:3px; width:0; pointer-events:none;
  background:linear-gradient(90deg,var(--ss-primary),var(--ss-primary-l),#4fdbe4);
  box-shadow:0 0 12px rgba(0,128,136,.5);
  transition:width .1s linear;
}


/* ==========================================================
   KEYFRAMES
   ========================================================== */
@keyframes ssShine{ to{ left:130%; } }
@keyframes ssFloat{ 50%{ transform:translateY(-12px); } }
@keyframes ssPing{
  0%{ transform:scale(1); opacity:.7; }
  75%,100%{ transform:scale(2.2); opacity:0; }
}
@keyframes ssMarquee{ to{ transform:translateX(-50%); } }
@keyframes ssDraw{ to{ transform:scaleY(1); } }
@keyframes ssDrawX{ to{ transform:scaleX(1); } }
@keyframes ssPop{ from{ transform:scale(.94); opacity:0; } }
@keyframes ssRing{
  0%{ transform:scale(.82); opacity:.75; }
  100%{ transform:scale(1.32); opacity:0; }
}

/* --- app mockup --- */
@keyframes ssKpiIn{ from{ opacity:0; transform:translateY(10px); } }
@keyframes ssRowIn{ from{ opacity:0; transform:translateX(-14px); } }
@keyframes ssDrawLine{ to{ stroke-dashoffset:0; } }
@keyframes ssFadeArea{ to{ opacity:1; } }
@keyframes ssPtIn{ to{ opacity:1; } }
@keyframes ssSideGlow{
  0%,100%{ box-shadow:0 6px 14px rgba(0,128,136,.32); }
  50%{ box-shadow:0 6px 22px rgba(0,128,136,.55); }
}
@keyframes ssToast{
  0%,4%{ opacity:0; transform:translateY(12px); }
  10%,42%{ opacity:1; transform:translateY(0); }
  50%,100%{ opacity:0; transform:translateY(12px); }
}


/* ==========================================================
   REVEAL
   ========================================================== */
/* SAFETY: hidden state લાગુ થાય છે ફક્ત `html.ss-anim` હોય ત્યારે.
   JS load ન થાય / અટકે તો class ઉમેરાતો નથી → આખું content દેખાય જ છે.
   ક્યારેય આ scoping દૂર ન કરવી. */
.ss-anim [data-reveal]{
  opacity:0; transition:opacity .75s var(--ss-ease), transform .75s var(--ss-ease);
  transition-delay:var(--d,0ms);
}
/* blur-in — desktop પર જ (mobile GPU માટે blur મોંઘું છે) */
@media (min-width:992px){
  .ss-anim [data-reveal]{
    filter:blur(5px);
    transition:opacity .75s var(--ss-ease), transform .75s var(--ss-ease), filter .75s var(--ss-ease);
    transition-delay:var(--d,0ms);
  }
  .ss-anim [data-reveal].in{ filter:blur(0); }
}
.ss-anim [data-reveal="up"],
.ss-anim [data-reveal=""]{ transform:translateY(28px); }
.ss-anim [data-reveal="pop"]{ transform:scale(.94); }
.ss-anim [data-reveal="left"]{ transform:translateX(-34px); }
.ss-anim [data-reveal="right"]{ transform:translateX(34px); }
.ss-anim [data-reveal].in{ opacity:1; transform:none; }


/* ==========================================================
   RESPONSIVE  (mobile-first priority)
   ========================================================== */
@media (max-width:1199.98px){
  .ss-hv-f1{ left:-4px; } .ss-hv-f2{ right:-6px; }
}

@media (max-width:991.98px){
  .ss-section{ padding:72px 0; }
  .ss-hero{ padding:30px 0 66px; }
  .ss-hero-visual{ margin-top:26px; max-width:520px; margin-left:auto; margin-right:auto; }
  /* bento — 2 કૉલમ, પહોળા tile આખી પહોળાઈ લે */
  .ss-bento{ grid-template-columns:repeat(2,1fr); }
  .ss-bento-wide{ grid-column:span 2; }
  /* stats — 2 કૉલમ */
  .ss-stats{ grid-template-columns:repeat(2,1fr); }
  /* નુકસાન grid — 2 કૉલમ, પહોળા tile આખી પહોળાઈ લે */
  .ss-loss-grid{ grid-template-columns:repeat(2,1fr); }
  .ss-loss-wide{ grid-column:span 2; }
  /* shield ને વચ્ચે લાવો, list ઉપર જગ્યા */
  .ss-shield{ margin:28px auto 0; }
  .ss-goal{ flex-direction:column; gap:12px; }
  body{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  /* blur is expensive on mobile GPUs */
  .ss-orb{ filter:blur(46px); opacity:.36; }
}

@media (max-width:767.98px){
  body{ font-size:15.5px; line-height:1.68; }
  .ss-section{ padding:58px 0; }
  .ss-hero{ padding:24px 0 52px; }
  .ss-hero-brand{ margin-bottom:30px; }
  .ss-hero-brand img{ height:72px; }
  .ss-final-logo{ height:80px; margin-bottom:20px; }
  .ss-head{ margin-bottom:34px; }

  .ss-h1{ font-size:clamp(1.75rem,8vw,2.3rem); letter-spacing:normal; }
  .ss-hl{ white-space:normal; }
  .ss-hero-sub{ font-size:1.04rem; }
  .ss-hero-text{ font-size:.97rem; }

  /* full-width tappable CTAs */
  .ss-hero .btn-lg,.ss-punch .btn-lg,.ss-final .btn-lg{ width:100%; }
  .btn-lg{ padding:.92rem 1.4rem; font-size:.96rem; }

  .ss-hero-trust span{ font-size:.78rem; padding:.3rem .75rem; }
  .ss-hero-stats{ margin-top:26px; padding-top:18px; }
  .ss-hero-stats > div + div{ padding-left:12px; }
  .ss-hero-stats > div{ padding-right:8px; }
  .ss-hero-stats h4{ font-size:1.14rem; }
  .ss-hero-stats p{ font-size:.68rem; }

  .ss-hero-visual{ padding:16px 6px; }
  /* Card મોબાઇલ પર ~339px જ પહોળું છે — chips મૂકીએ તો અડધું
     dashboard ઢંકાઈ જાય. અહીં mockup પોતે જ મુખ્ય આકર્ષણ છે,
     એટલે chips છુપાવી દો. એમનો સંદેશ ઉપરની trust chips માં છે જ. */
  .ss-hv-float{ display:none; }
  .ss-hv-float i{ font-size:1rem; }
  .ss-hv-float b{ font-size:.72rem; }
  .ss-hv-float small{ font-size:.62rem; }

  /* app mockup — mobile */
  .ss-app-body{ min-height:0; }
  .ss-app-side{ flex:0 0 44px; }
  .ss-side-i{ width:28px; height:28px; font-size:.85rem; }
  .ss-app-main{ padding:12px; }
  .ss-kpis{ gap:6px; }
  .ss-kpi{ padding:8px 8px; }
  .ss-kpi p{ font-size:.55rem; }
  .ss-kpi h5{ font-size:.76rem; }
  .ss-chart-svg{ height:56px; }
  .ss-rows .ss-row:nth-child(3){ display:none; }
  /* `left` જ રાખવું — `right` પણ આપીએ તો toast પૂરી પહોળાઈમાં ખેંચાય */
  .ss-toast{ left:8px; bottom:8px; padding:7px 10px; }

  /* bento — એક કૉલમ, બધા tile આડા (icon ડાબે) */
  .ss-bento{ grid-template-columns:1fr; gap:12px; }
  .ss-bento-wide{ grid-column:span 1; }
  .ss-bento-cell{ flex-direction:row; align-items:center; gap:16px; padding:20px 18px; }
  .ss-bento-ic{ width:46px; height:46px; flex:0 0 46px; font-size:1.2rem; border-radius:14px; }
  .ss-bento-tx h5{ font-size:.98rem; margin-bottom:5px; }
  .ss-bento-tx p{ font-size:.87rem; }

  /* નુકસાન grid — એક કૉલમ */
  .ss-loss-grid{ grid-template-columns:1fr; gap:10px; }
  .ss-loss-wide{ grid-column:span 1; }
  .ss-loss-fill{ padding:20px 18px; }
  .ss-loss-fill i{ font-size:1.55rem; }
  .ss-loss-fill p{ font-size:.98rem; }
  .ss-punch{ padding:22px 18px; }

  /* step rows — compact */
  .ss-step-row{ padding:18px; gap:14px; }
  .ss-step-row:hover{ transform:none; }
  .ss-step-row .ss-step-num{ font-size:1.6rem; }

  /* stats — નાની screen પર compact.
     ⚠️ અહીં icon ખૂણામાંથી નીકળીને પાછું flow માં, આંકડાની ઉપર આવે છે.
     375px પર card ફક્ત ~167px પહોળું હોય છે; ખૂણાવાળા icon સાથે
     "24 કલાક" અને icon વચ્ચે માંડ 5px બચતા હતા. ઉપર મૂકવાથી આડી
     ટક્કરની શક્યતા જ રહેતી નથી અને આંકડો મોટો રાખી શકાય છે. */
  .ss-stats{ gap:10px; }
  .ss-stat{ padding:18px 16px 16px; border-radius:var(--ss-r); }
  .ss-stat-ic{
    position:static; width:36px; height:36px; font-size:.95rem;
    margin:0 0 12px;
  }
  .ss-stat h3{ margin-bottom:0; }
  .ss-stat p{ font-size:.75rem; padding-top:11px; margin-top:9px; }
  .ss-stat p::before{ width:22px; }
  .ss-stat:hover p::before{ width:36px; }

  /* security — shield નાનું, rows compact */
  .ss-shield{ width:130px; height:130px; margin:22px auto 4px; }
  .ss-shield i{ width:72px; height:72px; font-size:1.9rem; }
  .ss-shield::before{ width:96px; height:96px; }
  .ss-shield::after{ width:130px; height:130px; }
  .ss-sec-row{ padding:13px 15px; gap:12px; }
  .ss-sec-row:hover{ transform:none; }
  .ss-sec-ic{ width:40px; height:40px; flex:0 0 40px; font-size:1.05rem; border-radius:12px; }
  .ss-sec-tx b{ font-size:.92rem; }
  .ss-sec-tx small{ font-size:.79rem; }

  .ss-card,.ss-step-card,.ss-compare{ padding:24px 20px; }
  .ss-form-card{ padding:24px 18px; }
  .ss-verdict-inner{ flex-direction:column; gap:10px; padding:20px; }

  .ss-timeline::before{ left:19px; }
  .ss-tl-dot{ flex:0 0 40px; width:40px; height:40px; font-size:.9rem; }
  .ss-tl-item{ gap:14px; padding-bottom:20px; }
  .ss-tl-body{ padding:16px 18px; }
  .ss-tl-body:hover{ transform:none; }

  /* industries band — mobile */
  .ss-ind-band{ padding:44px 0 48px; }
  .ss-ind-head{ margin-bottom:26px; }
  .ss-ind-sub{ font-size:.9rem; }
  .ss-mq-wrap{ gap:10px; }
  .ss-marquee::before,.ss-marquee::after{ width:52px; }
  .ss-mq-track{ animation-duration:26s; gap:10px; }
  .ss-mq-rev{ animation-duration:31s; }
  .ss-mq-item{
    font-size:.83rem; gap:9px; padding:.4rem 1.1rem .4rem .4rem;
  }
  .ss-mq-ic{ width:30px; height:30px; flex:0 0 30px; font-size:.92rem; }

  .ss-top{ bottom:86px; width:40px; height:40px; }

  .ss-grid{ background-size:40px 40px; }
}

@media (max-width:400px){
  .ss-hero-stats h4{ font-size:1rem; }
  .ss-hero-stats p{ font-size:.63rem; }
  .ss-mobile-bar a{ font-size:.72rem; }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  html{ scroll-behavior:auto; }
}