/* =========================================================
   HOMEPAGE (v2) — scoped under .home2
   Ported from temp/style.css (demo "fintech-broker" palette),
   kept intentionally distinct from the site's navy/gold system
   in style.css. Every selector is scoped under .home2 so it
   cannot collide with the shared .btn/.card/.hero/... classes
   used by the header/footer/other pages. Uses the site's own
   .container utility (style.css) and [data-reveal]/[data-counter]
   behavior (animations.css) rather than re-implementing them.
   ========================================================= */

.home2{
  --color-primary:#0A4FAF;
  --color-primary-dark:#073b85;
  --color-secondary:#2E6EFF;
  --color-accent:#00C2A8;
  --color-bg:#F8FAFC;
  --color-bg-alt:#EFF3F9;
  --color-text:#111827;
  --color-muted:#6B7280;
  --color-card:#FFFFFF;
  --color-border:rgba(17,24,39,.08);

  --gradient-primary:linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-accent:linear-gradient(135deg, var(--color-accent) 0%, #00E0C2 100%);
  --gradient-dark:linear-gradient(135deg, #061A38 0%, #0A4FAF 55%, #073b85 100%);
  --gradient-mesh:
    radial-gradient(circle at 15% 20%, rgba(46,110,255,.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0,194,168,.30), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(10,79,175,.45), transparent 55%);

  /* Hero surface — light theme: a bright daytime sky (pale blue fading to
     white near the content) with a soft sun glow top-right, so the copy
     still needs a dark (navy) foreground. Reuses --c-navy-deep (style.css).
     The dark theme override below redeclares every one of these for its
     own night-sky surface, which needs the opposite (light) foreground. */
  --hero-bg:
    radial-gradient(circle clamp(26px,3.2vw,52px) at 84% 16%, #FFFDF2 0%, #FFFDF2 88%, rgba(255,253,242,0) 100%),
    radial-gradient(circle clamp(120px,16vw,260px) at 84% 16%, rgba(255,224,130,.5) 0%, rgba(255,224,130,0) 100%),
    linear-gradient(180deg, #A9D4F7 0%, #C9E4FB 30%, #E4F1FC 58%, #F6FAFE 82%, #FFFFFF 100%);
  --hero-text:var(--c-navy-deep);
  --hero-text-soft:rgba(10,27,51,.72);
  --hero-text-muted:rgba(10,27,51,.56);
  --hero-em:var(--color-primary);
  /* A handful of hand-placed cloud clusters (not a repeating tile) so they
     read as a real sky rather than a pattern. Swapped for a fainter, bluer
     set in the dark theme below. */
  --hero-clouds:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='%23FFFFFF'%3E%3Cg opacity='0.9'%3E%3Ccircle cx='190' cy='150' r='34'/%3E%3Ccircle cx='230' cy='130' r='44'/%3E%3Ccircle cx='275' cy='150' r='36'/%3E%3Ccircle cx='225' cy='168' r='50'/%3E%3C/g%3E%3Cg opacity='0.75'%3E%3Ccircle cx='110' cy='400' r='28'/%3E%3Ccircle cx='150' cy='382' r='38'/%3E%3Ccircle cx='195' cy='400' r='30'/%3E%3Ccircle cx='150' cy='418' r='42'/%3E%3C/g%3E%3Cg opacity='0.6'%3E%3Ccircle cx='260' cy='680' r='42'/%3E%3Ccircle cx='320' cy='655' r='56'/%3E%3Ccircle cx='385' cy='680' r='46'/%3E%3Ccircle cx='325' cy='705' r='62'/%3E%3C/g%3E%3Cg opacity='0.5'%3E%3Ccircle cx='1180' cy='120' r='24'/%3E%3Ccircle cx='1212' cy='105' r='32'/%3E%3Ccircle cx='1246' cy='120' r='26'/%3E%3Ccircle cx='1212' cy='136' r='36'/%3E%3C/g%3E%3Cg opacity='0.65'%3E%3Ccircle cx='1470' cy='480' r='30'/%3E%3Ccircle cx='1512' cy='462' r='40'/%3E%3Ccircle cx='1556' cy='480' r='32'/%3E%3Ccircle cx='1512' cy='500' r='44'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --hero-stars:none;
  --hero-badge-bg:rgba(10,79,175,.06);
  --hero-badge-border:rgba(10,79,175,.18);
  --hero-ghost-bg:rgba(10,27,51,.04);
  --hero-ghost-border:rgba(10,27,51,.28);
  --hero-ghost-hover-bg:rgba(10,27,51,.08);

  --radius-card:20px;
  --radius-pill:999px;
  --radius-sm2:12px;

  --shadow-sm2:0 2px 8px rgba(17,24,39,.06);
  --shadow-md2:0 8px 30px rgba(17,24,39,.10);
  --shadow-lg2:0 20px 60px rgba(10,79,175,.18);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.4) inset, 0 20px 60px rgba(10,79,175,.25);

  --ease-out2:cubic-bezier(.16,1,.3,1);
  --transition-base2:.35s var(--ease-out2);
  --theme-transition:.45s cubic-bezier(.4,0,.2,1);

  color:var(--color-text);
  background:var(--color-bg);
}

/* ---------- Dark theme palette ----------
   Toggled by setting data-theme="dark" on <html> (see theme.js). Only
   redeclares the tokens that actually need to shift; gradients used on
   already-dark surfaces (stats band, claims banner, final CTA) are
   intentionally left untouched since they read fine in both modes.
   The hero is the exception — see --hero-bg below. */
html[data-theme="dark"] .home2{
  --color-bg:#0B1220;
  --color-bg-alt:#111B30;
  --color-text:#E7ECF5;
  --color-muted:#93A0B8;
  --color-card:#152036;
  --color-border:rgba(255,255,255,.08);
  --shadow-sm2:0 2px 10px rgba(0,0,0,.35);
  --shadow-md2:0 10px 34px rgba(0,0,0,.45);
  --shadow-lg2:0 24px 64px rgba(0,0,0,.55);
  --shadow-glow:0 0 0 1px rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.5);

  /* Dark theme hero: a night sky (deep navy gradient) with a soft moon glow
     top-right and a scattered starfield, distinct from the page's
     navy-heavy --gradient-dark used elsewhere. Foreground stays light —
     the light-theme tokens above assume a light hero surface and would be
     unreadable here. */
  --hero-bg:
    radial-gradient(circle clamp(24px,3vw,48px) at 82% 14%, #F5F7FC 0%, #F5F7FC 85%, rgba(245,247,252,0) 100%),
    radial-gradient(circle clamp(120px,16vw,260px) at 82% 14%, rgba(210,220,245,.26) 0%, rgba(210,220,245,0) 100%),
    linear-gradient(180deg, #060B1E 0%, #0B1530 30%, #121D3E 55%, #1B274A 78%, #232E52 100%);
  --hero-text:#E7ECF5;
  --hero-text-soft:rgba(231,236,245,.75);
  --hero-text-muted:rgba(231,236,245,.58);
  --hero-clouds:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cg fill='%23AEB9D6'%3E%3Cg opacity='0.10'%3E%3Ccircle cx='200' cy='160' r='40'/%3E%3Ccircle cx='250' cy='140' r='52'/%3E%3Ccircle cx='305' cy='160' r='42'/%3E%3Ccircle cx='250' cy='182' r='58'/%3E%3C/g%3E%3Cg opacity='0.08'%3E%3Ccircle cx='1300' cy='620' r='46'/%3E%3Ccircle cx='1360' cy='598' r='60'/%3E%3Ccircle cx='1420' cy='620' r='48'/%3E%3Ccircle cx='1360' cy='644' r='66'/%3E%3C/g%3E%3Cg opacity='0.07'%3E%3Ccircle cx='700' cy='760' r='38'/%3E%3Ccircle cx='750' cy='742' r='50'/%3E%3Ccircle cx='805' cy='760' r='40'/%3E%3Ccircle cx='750' cy='782' r='54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* Each star gets its own SMIL <animate> (independent duration + negative
     begin offset) baked into the SVG so they twinkle out of phase with one
     another, instead of the whole starfield fading as a single block. */
  --hero-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Ccircle cx='128' cy='108' r='1.6' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.2s' begin='-0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='288' cy='252' r='1.2' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4.1s' begin='-1.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='480' cy='90' r='1.4' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='2.8s' begin='-0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='672' cy='216' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.6s' begin='-2.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='880' cy='72' r='1.6' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4.6s' begin='-1.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1040' cy='180' r='1.2' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3s' begin='-0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1184' cy='54' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.9s' begin='-3.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='192' cy='405' r='1.4' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='2.6s' begin='-1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='384' cy='540' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4.3s' begin='-0.7s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='608' cy='378' r='1.6' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.4s' begin='-2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='768' cy='495' r='1.2' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.8s' begin='-1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='960' cy='360' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='2.9s' begin='-3.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1120' cy='450' r='1.4' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4s' begin='-0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1440' cy='270' r='1.2' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.3s' begin='-1.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1520' cy='162' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4.5s' begin='-2.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='96' cy='630' r='1.6' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='2.7s' begin='-0.3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='320' cy='720' r='1' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.7s' begin='-1.3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='560' cy='675' r='1.2' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='4.2s' begin='-2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='1408' cy='558' r='1.4' fill='%23FFFFFF'%3E%3Canimate attributeName='opacity' values='0.22;1;0.22' dur='3.1s' begin='-0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  --hero-badge-bg:rgba(231,236,245,.08);
  --hero-badge-border:rgba(231,236,245,.18);
  --hero-ghost-bg:rgba(231,236,245,.06);
  --hero-ghost-border:rgba(231,236,245,.3);
  --hero-ghost-hover-bg:rgba(231,236,245,.12);
}

/* Smooth, page-wide crossfade whenever the theme flips. More specific
   rules below (cards with their own hover transitions) extend this list
   rather than being overridden by it — see the merged transitions on
   .product-card / .feature-card / .insight-card. */
.home2, .home2 *{
  transition: background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}

.home2 img{max-width:100%; display:block;}
.home2 button{font-family:inherit; cursor:pointer; border:none; background:none;}
.home2 ul{list-style:none; margin:0; padding:0;}
.home2 input,.home2 select,.home2 textarea{font-family:inherit; font-size:1rem;}

/* ---------- Section rhythm ---------- */
.home2 section{padding:110px 0; position:relative;}
.home2 .bg-alt{background:var(--color-bg-alt);}

.home2 .section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-secondary); margin-bottom:14px;
}
.home2 .section-eyebrow::before{content:''; width:24px; height:2px; background:var(--gradient-primary); border-radius:2px;}
.home2 .section-head{max-width:640px; margin-bottom:56px;}
.home2 .section-head.center{margin-inline:auto; text-align:center;}
.home2 .section-head h2{font-size:clamp(1.9rem,3.2vw,2.75rem); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-bottom:14px; color:var(--color-text);}
.home2 .section-head p{color:var(--color-muted); font-size:1.05rem; margin:0;}

/* ---------- Buttons ---------- */
.home2 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem;
  transition:transform var(--transition-base2), box-shadow var(--transition-base2), background var(--transition-base2);
  white-space:nowrap; border:none;
}
.home2 .btn-primary{background:var(--gradient-primary); color:#fff; box-shadow:0 10px 30px rgba(10,79,175,.35);}
.home2 .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(10,79,175,.45);}
.home2 .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.35); backdrop-filter:blur(8px);}
.home2 .btn-ghost:hover{background:rgba(255,255,255,.18); transform:translateY(-2px);}
.home2 .btn-outline{background:transparent; color:var(--color-primary); border:1.5px solid var(--color-border);}
.home2 .btn-outline:hover{background:var(--color-bg-alt); border-color:var(--color-primary);}
html[data-theme="dark"] .home2 .btn-outline{color:#7FB3FF;}
html[data-theme="dark"] .home2 .btn-outline:hover{border-color:#7FB3FF;}
.home2 .btn-light{background:#fff; color:var(--color-primary); box-shadow:var(--shadow-md2);}
.home2 .btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg2);}
.home2 .btn-block{width:100%;}
.home2 .btn-sm{padding:10px 18px; font-size:.85rem;}

/* ---------- Hero ---------- */
.home2 .hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:var(--header-h);
  background:var(--hero-bg); overflow:hidden;
}
.home2 .hero::before{
  content:''; position:absolute; inset:0;
  background-image:var(--hero-clouds); background-repeat:no-repeat; background-size:cover; background-position:center;
  animation:home2CloudDrift 40s ease-in-out infinite alternate;
}
.home2 .hero::after{
  content:''; position:absolute; inset:0;
  background-image:var(--hero-stars); background-repeat:no-repeat; background-size:cover; background-position:center;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 90%);
}
@keyframes home2CloudDrift{0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(2%,0,0);}}

/* ---------- Nav bar blended with hero (home page only, initial position) ----------
   #site-header is fixed and sits outside .home2, directly over the top of
   the hero section (which starts at y:0 behind it). Making it fully
   transparent — rather than trying to re-declare the hero's gradient —
   guarantees a pixel-exact match with no visible seam. Reverts to the
   default light header (style.css) automatically once .scrolled is added. */
body[data-page="home"] #site-header:not(.scrolled){
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body[data-page="home"] #site-header:not(.scrolled) .lang-switch{background:rgba(10,27,51,.06); border-color:rgba(10,27,51,.22); color:var(--c-navy-deep);}
body[data-page="home"] #site-header:not(.scrolled) .lang-switch:hover{border-color:var(--c-navy-deep); color:var(--c-navy-deep);}
body[data-page="home"] #site-header:not(.scrolled) .nav-toggle span{background:var(--c-navy-deep);}

/* .main-nav a is navy here only above 992px, where .main-nav is still the
   inline desktop nav sitting directly on the transparent/hero-blended
   header — the light-theme hero surface is white/very-light-blue, so navy
   text is what stays visible. Below 992px .main-nav becomes the fixed,
   opaque mobile menu panel (responsive.css) and keeps the normal --c-ink
   color instead. */
@media (min-width:992px){
  body[data-page="home"] #site-header:not(.scrolled) .main-nav a{color:rgba(10,27,51,.75);}
  body[data-page="home"] #site-header:not(.scrolled) .main-nav a:hover,
  body[data-page="home"] #site-header:not(.scrolled) .main-nav a.active{color:var(--c-navy-deep); background:rgba(10,27,51,.08);}
}

/* Dark theme's hero is a dark-grey surface (not light like the light-theme
   one above), so the header-on-hero text flips back to light — mirrors
   the light-theme rules above but with the light/navy roles swapped. */
html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .lang-switch{background:rgba(231,236,245,.1); border-color:rgba(231,236,245,.3); color:#E7ECF5;}
html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .lang-switch:hover{border-color:#E7ECF5; color:#E7ECF5;}
html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .nav-toggle span{background:#E7ECF5;}
@media (min-width:992px){
  html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .main-nav a{color:rgba(231,236,245,.85);}
  html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .main-nav a:hover,
  html[data-theme="dark"] body[data-page="home"] #site-header:not(.scrolled) .main-nav a.active{color:#E7ECF5; background:rgba(231,236,245,.14);}
}

/* Dark theme: once scrolled, the header goes back to a solid surface
   (style.css default is a light one) — give it a dark counterpart. */
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled{
  background:rgba(11,18,32,.92); border-bottom-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled .main-nav a{color:#B7C2D6;}
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled .main-nav a:hover,
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled .main-nav a.active{color:#fff; background:rgba(255,255,255,.08);}
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled .lang-switch{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#E7ECF5;}
html[data-theme="dark"] body[data-page="home"] #site-header.scrolled .nav-toggle span{background:#E7ECF5;}
@media (max-width:991.98px){
  html[data-theme="dark"] body[data-page="home"] .main-nav{background:#0B1220; border-top-color:rgba(255,255,255,.08);}
  html[data-theme="dark"] body[data-page="home"] .main-nav a{color:#B7C2D6; border-bottom-color:rgba(255,255,255,.08);}
}

.home2 .hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; width:100%;}
.home2 .hero-copy{color:var(--hero-text);}
.home2 .hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--radius-pill);
  background:var(--hero-badge-bg); border:1px solid var(--hero-badge-border); backdrop-filter:blur(10px);
  font-size:.82rem; font-weight:600; margin-bottom:24px;
}
.home2 .hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--color-accent); box-shadow:0 0 0 4px rgba(0,194,168,.25);}
.home2 .hero h1{font-size:clamp(2.4rem,4.4vw,3.9rem); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin-bottom:22px; color:var(--hero-text);}
.home2 .hero h1 .accent-text{background:linear-gradient(135deg,#7FB3FF,var(--color-accent)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.home2 .hero h1 em{font-style:italic; color:var(--hero-em);}
/* Dark theme only: "since 1993." gets a golden metallic treatment (the
   site's own --c-gold/--c-gold-light tokens, style.css) instead of the
   flat --hero-em blue — a repeating diagonal gradient clipped to the text
   gives it a subtle shine rather than a plain solid gold fill. */
html[data-theme="dark"] .home2 .hero h1 em{
  background:linear-gradient(135deg, var(--c-gold-light) 0%, var(--c-gold) 45%, var(--c-gold-light) 75%, var(--c-gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.home2 .hero-sub{font-size:1.15rem; color:var(--hero-text-soft); max-width:500px; margin-bottom:36px;}
.home2 .hero-ctas{display:flex; gap:16px; margin-bottom:56px; flex-wrap:wrap;}
.home2 .hero-ctas .btn-ghost{background:var(--hero-ghost-bg); color:var(--hero-text); border-color:var(--hero-ghost-border);}
.home2 .hero-ctas .btn-ghost:hover{background:var(--hero-ghost-hover-bg);}
.home2 .hero-badges{display:grid; grid-template-columns:repeat(4,auto); gap:28px;}
.home2 .hero-badge-stat .num{font-size:1.6rem; font-weight:800; color:var(--hero-text); letter-spacing:-.02em;}
.home2 .hero-badge-stat .label{font-size:.78rem; color:var(--hero-text-muted); font-weight:500;}

/* Hero quote card */
.home2 .hero-card-wrap{position:relative;}
.home2 .quote-card{position:relative; background:rgba(255,255,255,.96); border-radius:24px; padding:34px; box-shadow:var(--shadow-glow); border:1px solid rgba(255,255,255,.5);}
html[data-theme="dark"] .home2 .quote-card{background:rgba(21,32,54,.92); border-color:rgba(255,255,255,.1);}
.home2 .quote-card h3{font-size:1.2rem; font-weight:700; margin-bottom:4px; color:var(--color-text);}
.home2 .quote-card .quote-sub{color:var(--color-muted); font-size:.88rem; margin-bottom:22px;}
.home2 .form-row{margin-bottom:14px;}
.home2 .form-row label{display:block; font-size:.78rem; font-weight:600; color:var(--color-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.home2 .form-row select,.home2 .form-row input,.home2 .form-row textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--color-border);
  background:var(--color-bg-alt); color:var(--color-text); transition:border-color var(--transition-base2), background var(--transition-base2);
}
.home2 .form-row select:focus,.home2 .form-row input:focus,.home2 .form-row textarea:focus{border-color:var(--color-secondary); background:var(--color-card); outline:none; box-shadow:0 0 0 4px rgba(46,110,255,.14);}
.home2 .form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.home2 .quote-card .btn{margin-top:6px;}
.home2 .quote-card-foot{display:flex; align-items:center; gap:6px; margin-top:14px; font-size:.76rem; color:var(--color-muted); justify-content:center;}
.home2 .quote-card .form-success-box{
  display:none; background:#E7F7F2; border:1px solid #B7E7D8; color:#0F7A5C;
  padding:12px 16px; border-radius:12px; margin-bottom:16px; font-size:.85rem;
}
.home2 .quote-card .form-error{color:#C0362C; font-size:.74rem; margin-top:5px; display:none;}
.home2 .quote-card .form-row.has-error .form-error{display:block;}
.home2 .quote-card .form-row.has-error select,
.home2 .quote-card .form-row.has-error input{border-color:#C0362C;}
.home2 .quote-card .form-error-box{color:#C0362C; font-size:.82rem; margin-top:10px; display:none;}

.home2 .floating-chip{
  position:absolute; background:var(--color-card); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-lg2);
  display:flex; align-items:center; gap:10px; font-size:.82rem; font-weight:700; color:var(--color-text);
  animation:home2FloatChip 6s ease-in-out infinite;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.home2 .floating-chip .chip-icon{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff;}
.home2 .floating-chip .chip-icon svg{width:16px; height:16px;}
.home2 .floating-chip small{display:block; font-weight:500; color:var(--color-muted); font-size:.68rem;}
.home2 .floating-chip.is-dismissed{opacity:0 !important; transform:scale(.9) !important; pointer-events:none; animation-play-state:paused;}
.home2 .chip-close{
  position:absolute; top:-7px; inset-inline-end:-7px; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--color-border); background:var(--color-card); color:var(--color-muted);
  display:grid; place-items:center; padding:0; cursor:pointer; box-shadow:var(--shadow-sm2);
}
.home2 .chip-close svg{width:10px; height:10px;}
/* chip-1/chip-2 only: close button sits on the opposite corner from the
   other chips (left in English, right in Arabic — the reverse of the
   inset-inline-end default above), per specific request. */
.home2 .chip-1 .chip-close, .home2 .chip-2 .chip-close{inset-inline-end:auto; inset-inline-start:-7px;}
.home2 .chip-1{top:14%; inset-inline-start:-12%; animation-delay:0s;}
.home2 .chip-1 .chip-icon{background:var(--gradient-primary);}
.home2 .chip-2{bottom:8%; inset-inline-start:-14%; animation-delay:1.5s;}
.home2 .chip-2 .chip-icon{background:var(--gradient-accent);}
.home2 .chip-3{top:38%; inset-inline-end:-13%; animation-delay:3s;}
.home2 .chip-3 .chip-icon{background:linear-gradient(135deg,#FFB020,#FF7A00);}
.home2 .chip-4{bottom:-6%; inset-inline-end:6%; animation-delay:4.5s;}
.home2 .chip-4 .chip-icon{background:linear-gradient(135deg,#7C3AED,#A78BFA);}
@keyframes home2FloatChip{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}

.home2 .scroll-cue{
  position:absolute; bottom:28px; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--hero-text-muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; z-index:2;
}
.home2 .scroll-cue .line{width:1px; height:30px; background:linear-gradient(var(--hero-text-soft), transparent); animation:home2ScrollLine 2s ease-in-out infinite;}
@keyframes home2ScrollLine{0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;}}

/* ---------- Trust bar ---------- */
.home2 .trust-bar{background:var(--color-card); border-bottom:1px solid var(--color-border); position:relative; z-index:3;}
.home2 .trust-bar-inner{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:26px 0; gap:20px;}
.home2 .trust-item{display:flex; align-items:center; gap:10px; font-size:.88rem; font-weight:600; color:var(--color-text);}
.home2 .trust-item svg{width:20px; height:20px; color:var(--color-accent); flex-shrink:0;}

/* ---------- Product cards ---------- */
.home2 .products-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.home2 .product-card{
  position:relative; isolation:isolate;
  background:var(--color-card); border-radius:var(--radius-card); padding:34px 30px; border:1px solid var(--color-border);
  transition:transform var(--transition-base2), box-shadow var(--transition-base2), border-color var(--theme-transition), background-color var(--theme-transition);
}
.home2 .product-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg2); border-color:transparent;}

/* Gold "chase" shine on hover: a bright point travels once around the
   card's border per loop and returns to where it started, via a
   rotating conic-gradient ring clipped to just the border's width
   (padding + mask-composite carves out the card's content-box, leaving
   only the outer ring visible). */
@property --shine-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.home2 .product-card::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; padding:2px;
  background:conic-gradient(from var(--shine-angle),
    transparent 0deg, transparent 270deg,
    var(--c-gold) 315deg, var(--c-gold-light) 333deg, var(--c-gold) 351deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .3s var(--transition-base2);
}
.home2 .product-card:hover::before{
  opacity:1; animation:productCardShine 2.4s linear infinite;
}
@keyframes productCardShine{ to{ --shine-angle:360deg; } }
@media (prefers-reduced-motion:reduce){
  .home2 .product-card:hover::before{animation:none;}
}
/* Icon frame — the icons themselves are illustrated GIFs (their own
   accent color already matches --color-accent) drawn on a white plate,
   so the frame stays a fixed white card rather than a theme-adaptive
   background: a colored/dark plate would clash with their built-in
   white backdrop in dark mode. */
.home2 .product-icon{
  width:64px; height:64px; border-radius:18px; padding:9px;
  background:#fff; box-shadow:0 0 0 1px rgba(17,24,39,.06), var(--shadow-sm2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:22px; transition:transform var(--transition-base2), box-shadow var(--transition-base2);
}
.home2 .product-card:hover .product-icon{transform:scale(1.08) rotate(-4deg); box-shadow:0 0 0 1px rgba(0,194,168,.35), var(--shadow-md2);}
.home2 .product-icon svg{width:26px; height:26px; color:#fff;}
.home2 .product-icon img{width:100%; height:100%; object-fit:contain;}
.home2 .product-card h3{font-size:1.15rem; font-weight:700; margin-bottom:8px; color:var(--color-text);}
.home2 .product-card p{color:var(--color-muted); font-size:.92rem; margin-bottom:18px;}
.home2 .card-link{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:var(--color-secondary);}
.home2 .card-link svg{width:14px; height:14px; transition:transform var(--transition-base2);}
.home2 .product-card:hover .card-link svg{transform:translateX(4px);}
[dir="rtl"] .home2 .product-card:hover .card-link svg{transform:translateX(-4px);}

/* ---------- Why choose us ---------- */
.home2 .features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.home2 .feature-card{padding:30px 26px; border-radius:var(--radius-card); background:var(--color-card); box-shadow:var(--shadow-sm2); transition:transform var(--transition-base2), box-shadow var(--transition-base2), background-color var(--theme-transition);}
.home2 .feature-card:hover{box-shadow:var(--shadow-md2); transform:translateY(-4px);}
.home2 .feature-icon{width:48px; height:48px; border-radius:14px; background:rgba(46,110,255,.1); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
html[data-theme="dark"] .home2 .feature-icon{background:rgba(46,110,255,.2);}
.home2 .feature-icon svg{width:24px; height:24px; color:var(--color-secondary);}
.home2 .feature-card h3{font-size:1.05rem; font-weight:700; margin-bottom:6px; color:var(--color-text);}
.home2 .feature-card p{color:var(--color-muted); font-size:.88rem; margin:0;}

/* ---------- Partners: 3x2 grid, auto-sliding carousel ---------- */
.home2 .partners-carousel{position:relative; max-width:900px; margin:0 auto;}
.home2 .partners-track-wrap{overflow:hidden;}
.home2 .partners-track{display:flex; transition:transform .6s var(--ease-out2);}
.home2 .partners-page{
  min-width:100%; display:grid;
  grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
  gap:20px; padding:4px;
}
.home2 .partner-logo-tile{
  height:110px; background:#fff; border-radius:var(--radius-sm2); border:1px solid rgba(17,24,39,.08);
  display:flex; align-items:center; justify-content:center; padding:18px;
  transition:box-shadow var(--transition-base2), transform var(--transition-base2), border-color var(--transition-base2);
}
.home2 .partner-logo-tile:hover{box-shadow:var(--shadow-md2); transform:translateY(-3px); border-color:transparent;}
.home2 .partner-logo-tile img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}

/* ---------- Strategic service locations ---------- */
.home2 .locations-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.home2 .location-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:var(--radius-card);
  padding:26px 18px; overflow:hidden;
  transition:transform var(--transition-base2), box-shadow var(--transition-base2), border-color var(--transition-base2);
}
.home2 .location-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-md2); border-color:transparent;}
.home2 .location-logo{width:100%; height:56px; flex:none; display:flex; align-items:center; justify-content:center;}
.home2 .location-logo img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.home2 .location-tile span{font-size:.85rem; font-weight:600; color:var(--color-text); line-height:1.3;}

/* shared slider chrome (partners + testimonials) */
.home2 .slider-dots{display:flex; justify-content:center; gap:8px; margin-top:28px;}
.home2 .slider-dot{width:8px; height:8px; border-radius:50%; background:var(--color-border); transition:background var(--transition-base2), width var(--transition-base2); padding:0;}
.home2 .slider-dot.active{background:var(--color-secondary); width:24px; border-radius:4px;}
.home2 .slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--color-card); box-shadow:var(--shadow-md2);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--transition-base2), background var(--transition-base2);
}
.home2 .slider-arrow:hover{background:var(--color-bg-alt); transform:translateY(-50%) scale(1.06);}
.home2 .slider-arrow svg{width:18px; height:18px;}
.home2 .slider-prev{inset-inline-start:-60px;}
.home2 .slider-next{inset-inline-end:-60px;}
[dir="rtl"] .home2 .slider-arrow svg{transform:scaleX(-1);}

/* ---------- How it works ---------- */
.home2 .timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
.home2 .timeline::before{
  content:''; position:absolute; top:34px; inset-inline:10%; height:2px;
  background:repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px);
}
.home2 .timeline-step{text-align:center; padding:0 12px; position:relative;}
.home2 .timeline-num{
  width:68px; height:68px; border-radius:50%; background:var(--gradient-primary); color:#fff; font-weight:800; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px;
  box-shadow:0 10px 24px rgba(10,79,175,.3); position:relative; z-index:2;
}
.home2 .timeline-step h3{font-size:1rem; font-weight:700; margin-bottom:8px; color:var(--color-text);}
.home2 .timeline-step p{font-size:.84rem; color:var(--color-muted); margin:0;}

/* ---------- Stats band ---------- */
.home2 .stats-section{background:var(--gradient-dark); position:relative; overflow:hidden;}
.home2 .stats-section::before{content:''; position:absolute; inset:0; background:var(--gradient-mesh); opacity:.7;}
.home2 .stats-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
.home2 .stat-item b{display:block; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.home2 .stat-item span{color:rgba(255,255,255,.65); font-size:.9rem; margin-top:6px; display:block;}

/* ---------- Testimonials ---------- */
.home2 .testimonial-slider{position:relative; max-width:760px; margin:0 auto;}
.home2 .testimonial-track-wrap{overflow:hidden;}
.home2 .testimonial-track{display:flex; transition:transform .6s var(--ease-out2);}
.home2 .testimonial-slide{min-width:100%; padding:8px;}
.home2 .testimonial-card{background:var(--color-card); border-radius:var(--radius-card); padding:44px; box-shadow:var(--shadow-md2); text-align:center;}
.home2 .testimonial-rating{color:#FFB020; font-size:1.1rem; margin-bottom:18px; letter-spacing:2px;}
.home2 .testimonial-quote{font-size:1.15rem; font-weight:500; line-height:1.6; margin-bottom:26px; color:var(--color-text);}
.home2 .testimonial-person{display:flex; align-items:center; justify-content:center; gap:12px;}
.home2 .testimonial-avatar{width:46px; height:46px; border-radius:50%; background:var(--gradient-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem;}
.home2 .testimonial-name{font-weight:700; font-size:.92rem; color:var(--color-text);}
.home2 .testimonial-role{font-size:.8rem; color:var(--color-muted);}

/* ---------- Claims CTA banner ---------- */
.home2 .claims-section{background:var(--gradient-primary); border-radius:32px; margin:0 32px; padding:70px; overflow:hidden; position:relative;}
.home2 .claims-inner{display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; position:relative; z-index:2;}
.home2 .claims-inner h2{color:#fff; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; margin-bottom:12px; letter-spacing:-.02em;}
.home2 .claims-inner p{color:rgba(255,255,255,.85); max-width:460px; margin:0;}

/* ---------- About ---------- */
.home2 .about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.home2 .about-media{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:var(--gradient-primary);}
.home2 .about-media-pattern{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:36px 36px;}
.home2 .about-media-pattern.coverage-panel{display:flex; align-items:center; justify-content:center; padding:28px 28px 130px; border:none;}
.home2 .about-media-pattern.coverage-panel #coverageMap{width:100%; max-width:360px;}
.home2 .about-media-badge{position:absolute; bottom:24px; inset-inline:24px; background:rgba(255,255,255,.95); border-radius:16px; padding:20px; box-shadow:var(--shadow-lg2);}
.home2 .about-media-badge .num{font-size:1.8rem; font-weight:800; color:var(--color-primary);}
.home2 .about-media-badge .label{font-size:.82rem; color:var(--color-muted);}
.home2 .about-copy p{color:var(--color-muted); margin-bottom:18px;}
.home2 .about-copy h2{font-size:clamp(1.9rem,3vw,2.5rem); font-weight:800; margin-bottom:20px; letter-spacing:-.02em; color:var(--color-text);}
.home2 .about-list{margin:24px 0 30px; display:grid; gap:12px;}
.home2 .about-list li{display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:500; color:var(--color-text);}
.home2 .about-list svg{width:18px; height:18px; color:var(--color-accent); flex-shrink:0;}

/* ---------- Insights (placeholder teaser) ---------- */
.home2 .insights-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.home2 .insight-card{background:var(--color-card); border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--color-border); transition:transform var(--transition-base2), box-shadow var(--transition-base2), background-color var(--theme-transition), border-color var(--theme-transition);}
.home2 .insight-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md2);}
.home2 .insight-media{height:170px; background:var(--gradient-primary); position:relative; overflow:hidden;}
.home2 .insight-media::before{content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size:26px 26px; transition:transform .6s var(--ease-out2);}
.home2 .insight-card:hover .insight-media::before{transform:scale(1.15);}
.home2 .insight-tag{position:absolute; top:16px; inset-inline-start:16px; background:rgba(255,255,255,.9); color:var(--color-primary); font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:var(--radius-pill);}
.home2 .insight-body{padding:24px;}
.home2 .insight-body h3{font-size:1.05rem; font-weight:700; margin-bottom:8px; line-height:1.35; color:var(--color-text);}
.home2 .insight-body p{color:var(--color-muted); font-size:.88rem; margin-bottom:14px;}
.home2 .insight-meta{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--color-muted);}

/* ---------- Glass hover (Restrained Liquid Glass, style.css --glass-*
   tokens) — the homepage's own stat/bento tiles. Default state is
   untouched (solid var(--color-card)); the glass surface only shows on
   hover, matching the shared .card--glass variant's "hover states"
   scoping in style.css. Global :root custom properties, so home.css can
   consume them even though its own token system is otherwise scoped. */
.home2 .product-card:hover, .home2 .feature-card:hover, .home2 .insight-card:hover{
  background:var(--glass-bg);
}
html[data-theme="dark"] .home2 .product-card:hover,
html[data-theme="dark"] .home2 .feature-card:hover,
html[data-theme="dark"] .home2 .insight-card:hover{
  background:var(--glass-bg-dark);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .home2 .product-card:hover, .home2 .feature-card:hover, .home2 .insight-card:hover{
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border-color:var(--glass-border);
  }
}

/* ---------- Final CTA ---------- */
.home2 .final-cta{background:linear-gradient(135deg,#061021 0%,#0A1F44 60%,#0A4FAF 130%); text-align:center; border-radius:32px; margin:0 32px; padding:90px 40px; position:relative; overflow:hidden;}
.home2 .final-cta::before{content:''; position:absolute; inset:0; background:var(--gradient-mesh); opacity:.6;}
.home2 .final-cta-inner{position:relative; z-index:2;}
.home2 .final-cta h2{color:#fff; font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; margin-bottom:16px;}
.home2 .final-cta p{color:rgba(255,255,255,.7); margin-bottom:34px; font-size:1.05rem;}
.home2 .final-cta-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Responsive ----------
   1100px matches the breakpoint used in responsive.css. Keep these two
   in sync — this used to sit at 1024px, which left common 1366x768/
   1280x800 laptop viewports (~1140-1200 CSS px) stuck in the full 2-col
   hero / 3-col grid layout meant for wide desktops — cramped grids on a
   narrower viewport read as "oversized" even though nothing was zoomed. */
@media (max-width:1100px){
  .home2 section{padding:88px 0;}
  .home2 .slider-prev{inset-inline-start:0;}
  .home2 .slider-next{inset-inline-end:0;}
  .home2 .hero-inner{grid-template-columns:1fr; gap:48px;}
  .home2 .hero-card-wrap{max-width:460px; margin:0 auto;}
  .home2 .hero-badges{grid-template-columns:repeat(4,auto); justify-content:space-between;}
  .home2 .products-grid,.home2 .features-grid{grid-template-columns:repeat(2,1fr);}
  .home2 .partners-page{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr);}
  .home2 .about-grid{grid-template-columns:1fr;}
  .home2 .timeline{grid-template-columns:repeat(5,1fr);}
  .home2 .insights-grid{grid-template-columns:1fr 1fr;}
  .home2 .locations-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767.98px){
  .home2 section{padding:72px 0;}
  .home2 .hero-badges{grid-template-columns:repeat(2,auto); row-gap:20px;}
  .home2 .products-grid,.home2 .features-grid,.home2 .insights-grid{grid-template-columns:1fr;}
  .home2 .partners-page{grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr);}
  .home2 .locations-grid{grid-template-columns:repeat(2,1fr);}
  .home2 .timeline{grid-template-columns:1fr; gap:30px;}
  .home2 .timeline::before{display:none;}
  .home2 .stats-grid{grid-template-columns:repeat(2,1fr); gap:32px;}
  .home2 .claims-section,.home2 .final-cta{margin:0 20px; padding:50px 26px; border-radius:24px;}
  .home2 .claims-inner{grid-template-columns:1fr; text-align:center;}
  .home2 .claims-inner p{margin:0 auto;}
  .home2 .form-grid-2{grid-template-columns:1fr;}
  .home2 .floating-chip{display:none;}
}
@media (max-width:575.98px){
  .home2 .partners-page{grid-template-columns:1fr; grid-template-rows:repeat(6,1fr);}
}

@media (prefers-reduced-motion:reduce){
  .home2 .hero::before,.home2 .hero::after,.home2 .floating-chip,.home2 .scroll-cue .line{animation:none;}
  .home2,.home2 *,body[data-page="home"] .theme-toggle,body[data-page="home"] .theme-toggle *{transition-duration:.01ms !important;}
  /* The per-star twinkle lives inside the --hero-stars SVG itself (SMIL
     <animate>), so it isn't stopped by the CSS animation:none above —
     swap in a static starfield with no <animate> tags instead. */
  html[data-theme="dark"] .home2{
    --hero-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Ccircle cx='128' cy='108' r='1.6' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='288' cy='252' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='480' cy='90' r='1.4' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='672' cy='216' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='880' cy='72' r='1.6' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1040' cy='180' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1184' cy='54' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='192' cy='405' r='1.4' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='384' cy='540' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='608' cy='378' r='1.6' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='768' cy='495' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='960' cy='360' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1120' cy='450' r='1.4' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1440' cy='270' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1520' cy='162' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='96' cy='630' r='1.6' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='320' cy='720' r='1' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='560' cy='675' r='1.2' fill='%23FFFFFF' opacity='0.85'/%3E%3Ccircle cx='1408' cy='558' r='1.4' fill='%23FFFFFF' opacity='0.85'/%3E%3C/svg%3E");
  }
}