/* ============================================================
   SANSAR SETU — DESIGN SYSTEM v5
   Duotone. Two close deep tones, no white, no hard contrast.
   Accent light borrowed from the hero scene: gold · rose · sky.
   Tokens: primitive → semantic → component
   ============================================================ */

/* ---------------- LAYER 1 · PRIMITIVE ---------------- */
:root{
  --tone-a-900:#050F1B; --tone-a-800:#071A2B; --tone-a-700:#0A2235;
  --tone-b-900:#08182A; --tone-b-800:#0C2438; --tone-b-700:#112D44;
  --tone-line:#17384F;

  --gold-200:#F8E3B8; --gold-300:#F0C97F; --gold-400:#E4AF57; --gold-500:#CD9236; --gold-600:#A97528;
  --rose-200:#F4DCE2; --rose-300:#E4BCC8; --rose-400:#D3A3B4; --rose-500:#B5809A;
  --sky-200:#CDE8F2;  --sky-300:#9FD0E4;  --sky-400:#6FB3D4;  --sky-500:#3E88B4;

  --f-display-latin:"DM Serif Display",Georgia,serif;
  --f-body-latin:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-display-ar:"Amiri","IBM Plex Sans Arabic",serif;
  --f-body-ar:"IBM Plex Sans Arabic",sans-serif;
  --f-display-hi:"Tiro Devanagari Hindi",serif;
  --f-body-hi:"Mukta",sans-serif;

  --step--1:clamp(.78rem,.76rem + .1vw,.85rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.07rem);
  --step-1:clamp(1.14rem,1.06rem + .34vw,1.34rem);
  --step-2:clamp(1.45rem,1.26rem + .85vw,2rem);
  --step-3:clamp(1.9rem,1.55rem + 1.75vw,3rem);
  --step-4:clamp(2.4rem,1.75rem + 3.2vw,4.4rem);

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:88px;--sp-10:120px;

  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --container:1180px;
}

/* ---------------- LAYER 2 · SEMANTIC ---------------- */
:root{
  --surface-1:var(--tone-a-800);
  --surface-2:var(--tone-b-800);
  --surface-raised:rgba(255,255,255,.035);
  --surface-raised-2:rgba(255,255,255,.055);

  --ink-1:#FFFFFF;
  --ink-2:rgba(233,243,250,.80);
  --ink-3:rgba(233,243,250,.58);
  --ink-4:rgba(233,243,250,.40);

  --line-1:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --accent-a:var(--gold-400);
  --accent-m:var(--rose-400);
  --accent-b:var(--sky-400);

  --grad-line:linear-gradient(90deg,var(--gold-400) 0%,var(--rose-400) 50%,var(--sky-400) 100%);
  --grad-veil:linear-gradient(120deg,rgba(228,175,87,.13),rgba(211,163,180,.11),rgba(111,179,212,.13));
  --glow-a:rgba(228,175,87,.16);
  --glow-b:rgba(111,179,212,.16);

  --f-display:var(--f-display-latin);
  --f-body:var(--f-body-latin);
}
html[lang="ar"]{--f-display:var(--f-display-ar);--f-body:var(--f-body-ar)}
html[lang="hi"]{--f-display:var(--f-display-hi);--f-body:var(--f-body-hi)}

/* ---------------- BASE ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface-1);color:var(--ink-2);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink-1);line-height:1.14;letter-spacing:-.015em;margin:0 0 var(--sp-4);font-weight:400}
h3,h4{font-family:var(--f-body);font-weight:700;letter-spacing:-.005em}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}h3{font-size:var(--step-1)}
p{margin:0 0 var(--sp-4)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
ul{padding-inline-start:1.05em;margin:0 0 var(--sp-4)}
::selection{background:var(--rose-400);color:var(--tone-a-900)}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.section{padding:var(--sp-9) 0;position:relative}
@media(max-width:760px){.section{padding:var(--sp-8) 0}}
.section--a{background:var(--surface-1)}
.section--b{background:var(--surface-2)}
.section--b::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tone-line),transparent);
}

/* ---------------- COMPONENTS ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--f-body);font-size:var(--step--1);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sky-300);margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--grad-line)}
.eyebrow--center{justify-content:center}

.section-head{max-width:660px;margin-bottom:var(--sp-7)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{font-size:var(--step-1);color:var(--ink-3);margin-bottom:0}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:14px 28px;border-radius:var(--r-pill);overflow:hidden;
  font-family:var(--f-body);font-weight:700;font-size:var(--step-0);
  border:1px solid transparent;cursor:pointer;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),color .35s var(--ease),background .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .75s var(--ease);
}
.btn:hover{transform:translateY(-3px)}
.btn:hover::after{transform:translateX(130%)}
.btn--primary{background:var(--grad-line);color:var(--tone-a-900);box-shadow:0 12px 34px -14px rgba(228,175,87,.6)}
.btn--primary:hover{box-shadow:0 20px 46px -16px rgba(228,175,87,.8)}
.btn--ghost{border-color:var(--line-2);color:var(--ink-1);background:rgba(255,255,255,.04)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--sky-400)}
.btn--outline{border-color:var(--line-1);color:var(--ink-1);background:var(--surface-raised)}
.btn--outline:hover{border-color:var(--rose-400);background:var(--surface-raised-2)}
.btn--sm{padding:10px 20px;font-size:var(--step--1)}
.btn--block{width:100%}

/* ---------------- HEADER ---------------- */
.site-header{position:sticky;top:0;z-index:90;background:rgba(5,15,27,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-1)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:72px}
.brand{display:flex;align-items:center;gap:var(--sp-3);color:var(--ink-1);flex-shrink:0}
.brand svg{width:36px;height:36px;flex-shrink:0}
.brand-name{font-family:var(--f-display);font-size:1.24rem;line-height:1.1}
.brand-sub{display:block;font-family:var(--f-body);font-size:.55rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky-300)}

.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;padding:9px 14px;border-radius:var(--r-sm);font-size:.92rem;font-weight:500;color:var(--ink-3);transition:color .3s var(--ease);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:2px;background:var(--grad-line);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover{color:var(--ink-1)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink-1)}

.header-actions{display:flex;align-items:center;gap:var(--sp-3)}
.lang{display:flex;gap:2px;background:rgba(255,255,255,.06);padding:3px;border-radius:var(--r-pill);border:1px solid var(--line-1)}
.lang a{padding:5px 10px;border-radius:var(--r-pill);font-size:.7rem;font-weight:800;color:var(--ink-4);transition:.3s var(--ease)}
.lang a:hover{color:var(--ink-1)}
.lang a.is-active{background:var(--grad-line);color:var(--tone-a-900)}
.lang--mobile{display:none}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--line-1);border-radius:var(--r-sm);color:var(--ink-1);font-size:1.1rem;cursor:pointer}

@media(max-width:1040px){
  .nav{position:fixed;top:73px;right:0;bottom:0;left:0;flex-direction:column;align-items:stretch;justify-content:flex-start;
       background:var(--tone-a-900);padding:var(--sp-5);gap:2px;transform:translateY(-104%);transition:transform .45s var(--ease);overflow-y:auto}
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:16px;font-size:1.05rem;border-bottom:1px solid var(--line-1);border-radius:0}
  .nav a::after{left:16px;right:auto;width:24px;bottom:10px}
  .nav-toggle{display:flex}
  .header-actions .lang{display:none}
  .lang--mobile{display:flex;margin-top:var(--sp-5);align-self:flex-start}
}
@media(max-width:430px){.header-actions .btn{display:none}}

/* ---------------- HERO · scene first, words beneath ---------------- */
.hero{position:relative;background:var(--surface-1);overflow:hidden}
.hero-scene{position:relative;width:100%;line-height:0}
.scene{display:block;width:100%;height:auto}
.hero-scene::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:36%;
  background:linear-gradient(180deg,transparent,var(--surface-1) 90%);pointer-events:none;
}
.hero-body{position:relative;z-index:2;padding:var(--sp-5) 0 var(--sp-9);text-align:center}
.hero-body h1{margin:0 auto var(--sp-5);max-width:17ch}
.hero-body h1 .grad{background:var(--grad-line);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-lead{font-size:var(--step-1);color:var(--ink-3);max-width:62ch;margin:0 auto var(--sp-6)}
.hero-cta{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:center}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease-soft);
  background:radial-gradient(460px circle at var(--hx,50%) var(--hy,40%),var(--glow-b),transparent 68%);
}
.hero:hover::after{opacity:1}

/* scene motion */
.scene .tw{animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:1}}
.scene .bob{animation:islandBob 7s ease-in-out infinite}
@keyframes islandBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.scene .drift{animation:cloudDrift 46s ease-in-out infinite alternate}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(46px)}}
.scene .sway{transform-box:fill-box;transform-origin:bottom center;animation:palmSway 5.4s ease-in-out infinite alternate}
@keyframes palmSway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
.scene .ring{stroke-dasharray:6 14;animation:ringTrace 26s linear infinite}
.scene .ring--in{animation-duration:38s;animation-direction:reverse}
@keyframes ringTrace{to{stroke-dashoffset:-400}}
.scene .cableA{stroke-dasharray:1400;stroke-dashoffset:1400;animation:cableDraw 2.4s var(--ease) forwards}
.scene .cableA:nth-of-type(2){animation-delay:.22s}.scene .cableA:nth-of-type(3){animation-delay:.44s}
@keyframes cableDraw{to{stroke-dashoffset:0}}
.scene .thread{stroke-dasharray:5 9;animation:threadFlow 12s linear infinite}
@keyframes threadFlow{to{stroke-dashoffset:-140}}
.scene .shimmer{animation:seaShimmer 9s ease-in-out infinite alternate}
@keyframes seaShimmer{from{transform:translateX(0);opacity:.42}to{transform:translateX(-24px);opacity:.6}}
.scene .bird{animation:birdGlide 34s linear infinite}
@keyframes birdGlide{from{transform:translate(0,0)}to{transform:translate(-200px,-34px)}}
.scene .pod--go{fill:var(--gold-300);filter:drop-shadow(0 0 7px rgba(240,201,127,.95))}
.scene .pod--back{fill:var(--sky-300);filter:drop-shadow(0 0 7px rgba(159,208,228,.95))}

/* ---------------- PAGE HEAD ---------------- */
.page-head{position:relative;background:var(--surface-1);padding:var(--sp-9) 0 var(--sp-8);overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 320px at 12% -30%,rgba(111,179,212,.16),transparent 62%),
             radial-gradient(680px 300px at 88% 0%,rgba(228,175,87,.10),transparent 60%)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-line);opacity:.7}
.page-head .container{position:relative;z-index:2}
.page-head h1{max-width:17ch}
.page-head p{font-size:var(--step-1);color:var(--ink-3);max-width:64ch;margin-bottom:0}

/* ---------------- TRUST ---------------- */
.trust{background:var(--tone-a-900);border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1);padding:var(--sp-4) 0}
.trust .container{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-7);justify-content:center;align-items:center;font-size:.83rem;color:var(--ink-4)}
.trust b{color:var(--sky-300);font-weight:700}

/* ---------------- GRID + CARDS ---------------- */
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--surface-raised);border:1px solid var(--line-1);
  border-radius:var(--r-lg);padding:var(--sp-6);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease);
}
.card::before{content:"";position:absolute;top:0;inset-inline:0;height:1.5px;background:var(--grad-line);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-soft);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--glow-a),transparent 62%);
}
.card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--surface-raised-2)}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:var(--sp-2)}
.card p{color:var(--ink-3);margin-bottom:0;font-size:.95rem}
.card-num{font-family:var(--f-body);font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--rose-400);display:block;margin-bottom:var(--sp-3)}
.card-ico{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.25rem;margin-bottom:var(--sp-4);background:var(--grad-veil);border:1px solid var(--line-1)}

/* ---------------- AUDIENCE SPLIT ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split-card{position:relative;border-radius:var(--r-xl);padding:var(--sp-7);border:1px solid var(--line-1);overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.split-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease-soft);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 62%)}
.split-card:hover{transform:translateY(-5px);border-color:var(--line-2)}
.split-card:hover::after{opacity:1}
.split-card--a{background:linear-gradient(155deg,rgba(228,175,87,.13),rgba(228,175,87,.02) 60%)}
.split-card--b{background:linear-gradient(155deg,rgba(111,179,212,.13),rgba(111,179,212,.02) 60%)}
.split-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:var(--sp-4);padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-1)}
.split-card--a .split-tag{color:var(--gold-300)}
.split-card--b .split-tag{color:var(--sky-300)}
.split-card h3{font-family:var(--f-display);font-weight:400;font-size:var(--step-2);margin-bottom:var(--sp-3)}
.split-card p{color:var(--ink-3)}

/* ---------------- PILLARS ---------------- */
.pillar{border-top:1px solid var(--line-1);padding:var(--sp-7) 0;scroll-margin-top:92px}
.pillar:first-of-type{border-top:none}
.pillar-grid{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-7);align-items:start}
@media(max-width:900px){.pillar-grid{grid-template-columns:1fr;gap:var(--sp-5)}}
.pillar-aside h2{font-size:var(--step-2)}
.pillar-aside p{color:var(--ink-3);margin-bottom:0}
.pillar-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-300);background:var(--grad-veil);border:1px solid var(--line-1);border-radius:var(--r-pill);padding:6px 14px;margin-bottom:var(--sp-4)}

.activity{position:relative;background:var(--surface-raised);border:1px solid var(--line-1);border-radius:var(--r-md);padding:var(--sp-5);overflow:hidden;isolation:isolate;
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease)}
.activity::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease-soft);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),var(--glow-b),transparent 62%)}
.activity:hover{border-color:var(--line-2);transform:translateY(-4px);background:var(--surface-raised-2)}
.activity:hover::after{opacity:1}
.activity h3{font-size:1rem;margin-bottom:6px}
.activity p{font-size:.9rem;color:var(--ink-3);margin:0}
.activity .lic{display:block;margin-top:var(--sp-3);font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--ink-4);text-transform:uppercase}

/* ---------------- STEPS ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:var(--sp-5);border-top:1px solid var(--line-1)}
.step::after{content:"";position:absolute;top:-1px;inset-inline-start:0;width:46px;height:1.5px;background:var(--grad-line)}
.step em{font-family:var(--f-body);font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sky-300);display:block;margin-bottom:var(--sp-3)}
.step h3{font-size:1.02rem}
.step p{color:var(--ink-3);font-size:.94rem;margin-bottom:0}

/* ---------------- FACTS ---------------- */
.facts{display:grid;gap:var(--sp-4)}
.fact{display:flex;gap:var(--sp-4);align-items:flex-start}
.fact-ico{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--grad-veil);border:1px solid var(--line-1);color:var(--sky-300);flex-shrink:0;font-size:1rem}
.fact h3{font-size:.96rem;margin-bottom:2px}
.fact p{margin:0;font-size:.92rem;color:var(--ink-3)}

/* ---------------- BANNER ---------------- */
.banner{position:relative;border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-8);background:var(--tone-b-900);border:1px solid var(--line-1);overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;
  background:radial-gradient(680px 300px at 4% 0%,rgba(111,179,212,.20),transparent 62%),
             radial-gradient(560px 280px at 98% 100%,rgba(228,175,87,.16),transparent 60%)}
.banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--grad-line)}
.banner>*{position:relative;z-index:2}
.banner h2{max-width:26ch;margin-bottom:var(--sp-3)}
.banner p{color:var(--ink-3);max-width:56ch}
.banner-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
.banner-row>div{flex:1 1 460px;min-width:0}
.banner-row>.btn{flex:0 0 auto}

/* ---------------- FORM ---------------- */
.form-card{background:var(--surface-raised);border:1px solid var(--line-1);border-radius:var(--r-xl);padding:var(--sp-7)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:620px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1px solid var(--line-1);
  background:rgba(0,0,0,.22);font-family:inherit;font-size:.95rem;color:var(--ink-1);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky-400);background:rgba(0,0,0,.34)}
.field select option{background:var(--tone-a-800);color:var(--ink-1)}
.form-note{font-size:.79rem;color:var(--ink-4);margin:var(--sp-3) 0 0}
.form-msg{display:none;padding:13px 17px;border-radius:var(--r-sm);font-size:.9rem;margin-bottom:var(--sp-4);font-weight:600;border:1px solid}
.form-msg--ok{background:rgba(111,179,212,.12);border-color:rgba(111,179,212,.4);color:var(--sky-200)}
.form-msg--err{background:rgba(211,163,180,.12);border-color:rgba(211,163,180,.4);color:var(--rose-200)}

/* ---------------- FOOTER (deliberately unlike the header) ---------------- */
.site-footer{position:relative;background:var(--tone-a-900);padding:var(--sp-9) 0 var(--sp-5)}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:220px;pointer-events:none;
  background:radial-gradient(900px 220px at 50% 0%,rgba(111,179,212,.13),transparent 70%)}
.footer-top{position:relative;z-index:2;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--sp-6);padding-bottom:var(--sp-7);border-bottom:1px solid var(--line-1)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.site-footer h4{color:var(--ink-1);font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer a{display:block;color:var(--ink-3);font-size:.9rem;margin-bottom:9px;transition:color .3s var(--ease)}
.site-footer a:hover{color:var(--sky-300)}
.footer-about p{color:var(--ink-4);font-size:.9rem;max-width:36ch}
.footer-legal{position:relative;z-index:2;padding-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);justify-content:space-between;font-size:.76rem;color:var(--ink-4)}

/* ---------------- WHATSAPP ---------------- */
.wa{position:fixed;bottom:22px;inset-inline-end:22px;z-index:80;width:54px;height:54px;border-radius:50%;
    background:#25D366;color:#fff;display:grid;place-items:center;
    box-shadow:0 12px 28px -10px rgba(37,211,102,.7);transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.1) rotate(-6deg)}

/* ---------------- REVEAL ---------------- */
.reveal{opacity:0;transform:translateY(22px) scale(.995);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}

/* ---------------- UTIL ---------------- */
.center{text-align:center}
.mb-0{margin-bottom:0}
.tick{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;gap:9px}
.tick li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:.93rem;color:var(--ink-3)}
.tick li::before{content:"→";color:var(--accent-m);font-weight:700;flex-shrink:0}

/* ---------------- RTL ---------------- */
[dir="rtl"] .scene{transform:scaleX(-1)}
[dir="rtl"] .card::before{transform-origin:right}
[dir="rtl"] .nav a::after{transform-origin:right}
[dir="rtl"] ul{padding-inline-start:0;padding-inline-end:1.05em}
[dir="rtl"] .tick li::before{content:"←"}

/* ---------------- A11Y ---------------- */
:focus-visible{outline:2px solid var(--sky-400);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .scene .cableA{stroke-dashoffset:0!important}
}

/* ---------------- PRINT ---------------- */
@media print{
  .wa,.nav-toggle{display:none!important}
  body{background:#071A2B}
  .nav{position:static!important;transform:none!important;flex-direction:row!important;background:transparent!important;padding:0!important}
  .nav a{padding:5px 9px!important;font-size:.8rem!important;border-bottom:none!important}
  .lang--mobile{display:none!important}
  .header-actions .lang{display:flex!important}
  .site-header{position:static!important}
  .reveal{opacity:1!important;transform:none!important}
  .card,.activity,.pillar,.split-card{break-inside:avoid}
}