:root{
  --night:#101D32;
  --night-2:#0B1424;
  --blue:#1677FF;
  --ice:#F7F9FC;
  --steel:#AAB5C5;
  --gold:#E8B84B;
  --ink:#0E1A2E;
  --line:rgba(170,181,197,.28);
  --radius:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
  background:var(--ice);color:var(--ink);line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{width:min(1180px,92%);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:14px;font-weight:800;font-size:1.05rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
  overflow:hidden;isolation:isolate;white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(120%);transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(-120%)}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:#1a1405;box-shadow:0 10px 30px -8px rgba(232,184,75,.55)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 30px -8px rgba(22,119,255,.6)}
.btn-ghost{border:1.5px solid rgba(247,249,252,.35);color:#fff}
.btn-ghost:hover{background:rgba(247,249,252,.08)}
.btn-wa{background:#25D366;color:#06210f;box-shadow:0 10px 30px -8px rgba(37,211,102,.55)}
.btn-dark{background:var(--night);color:#fff}
.pulse{animation:btnPulse 2.4s infinite}
@keyframes btnPulse{
  0%{box-shadow:0 0 0 0 rgba(232,184,75,.55)}
  70%{box-shadow:0 0 0 18px rgba(232,184,75,0)}
  100%{box-shadow:0 0 0 0 rgba(232,184,75,0)}
}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(11,20,36,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(170,181,197,.14);
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.logo{display:flex;align-items:center;gap:.7rem;color:#fff}
.logo-mark{width:44px;height:44px}
.logo-mark .fan{transform-origin:50% 50%;animation:spin 9s linear infinite}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text b{font-size:1.45rem;font-weight:900;letter-spacing:-.3px}
.logo-text b em{font-style:normal;color:var(--gold)}
.logo-text small{font-size:.68rem;color:var(--steel);font-weight:600;letter-spacing:.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{display:flex;align-items:center;gap:2rem}
.nav a.link{color:var(--steel);font-weight:600;font-size:.98rem;position:relative;padding:.3rem 0;transition:color .3s}
.nav a.link::after{content:"";position:absolute;inset:auto 0 -2px 0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a.link:hover{color:#fff}
.nav a.link:hover::after{transform:scaleX(1)}
.header .btn{padding:.6rem 1.2rem;font-size:.95rem;border-radius:12px}
.burger{display:none;cursor:pointer;color:#fff;padding:.4rem}
.burger .ico{width:28px;height:28px}
#menu-toggle{position:absolute;opacity:0;pointer-events:none}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--night);color:#fff;
  padding:150px 0 90px;overflow:hidden;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(170,181,197,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,181,197,.07) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);
  animation:gridMove 24s linear infinite;
}
@keyframes gridMove{to{background-position:56px 56px}}
.hero::after{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;
  inset-inline-start:-180px;top:-120px;z-index:-1;
  background:radial-gradient(circle,rgba(22,119,255,.28),transparent 65%);
  animation:glow 7s ease-in-out infinite alternate;
}
@keyframes glow{from{transform:scale(1)}to{transform:scale(1.25) translate(30px,20px)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1.1rem;border-radius:999px;
  background:linear-gradient(100deg,rgba(232,184,75,.12),rgba(232,184,75,.22),rgba(232,184,75,.12));
  background-size:200% 100%;animation:shimmer 3.5s linear infinite;
  border:1px solid rgba(232,184,75,.55);color:var(--gold);font-weight:800;font-size:.95rem;
}
@keyframes shimmer{to{background-position:-200% 0}}
.badge .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25;transform:scale(.7)}}
.hero h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:900;line-height:1.28;margin:1.3rem 0 1.1rem;letter-spacing:-.5px}
.hero h1 .gold{color:var(--gold);position:relative;display:inline-block}
.hero h1 .gold::after{
  content:"";position:absolute;inset:auto 0 .05em 0;height:.14em;background:var(--gold);opacity:.35;border-radius:4px;
  transform-origin:right;animation:underline 1.2s .6s var(--ease) both;
}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero p.sub{color:var(--steel);font-size:1.15rem;max-width:34em}
.hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero-points{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.2rem;color:var(--steel);font-size:.95rem;font-weight:600}
.hero-points span{display:flex;align-items:center;gap:.5rem}
.hero-points .ico{color:var(--gold)}

.stage{position:relative;aspect-ratio:1/1;max-width:560px;margin-inline:auto;width:100%}
.stage .ring{position:absolute;inset:6%;border-radius:50%;border:1.5px dashed rgba(170,181,197,.35);animation:spin 40s linear infinite}
.stage .ring.r2{inset:18%;border:1.5px solid rgba(22,119,255,.4);animation-duration:26s;animation-direction:reverse}
.stage .core{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle,rgba(22,119,255,.45),rgba(22,119,255,0) 70%);animation:glow 5s ease-in-out infinite alternate}
.unit{position:absolute;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45))}
.unit.u1{width:78%;inset-inline-start:11%;top:6%;animation:float 6s ease-in-out infinite}
.unit.u2{width:46%;inset-inline-start:-2%;bottom:6%;animation:float 7s -2s ease-in-out infinite}
.unit.u3{width:38%;inset-inline-end:-1%;bottom:2%;animation:float 8s -4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.air{position:absolute;inset-inline:22% 22%;top:34%;height:22%;pointer-events:none}
.air span{
  position:absolute;height:3px;border-radius:3px;width:70%;
  background:linear-gradient(90deg,transparent,rgba(247,249,252,.8),transparent);
  animation:airflow 2.6s linear infinite;opacity:0;
}
.air span:nth-child(1){top:0;inset-inline-start:5%}
.air span:nth-child(2){top:35%;inset-inline-start:20%;animation-delay:.7s}
.air span:nth-child(3){top:70%;inset-inline-start:0;animation-delay:1.4s}
@keyframes airflow{0%{transform:translateY(0) scaleX(.3);opacity:0}30%{opacity:1}100%{transform:translateY(60px) scaleX(1);opacity:0}}
.price-tag{
  position:absolute;inset-inline-end:2%;top:8%;z-index:3;
  background:var(--gold);color:#1a1405;border-radius:18px;padding:.7rem 1.1rem;font-weight:900;line-height:1.2;
  box-shadow:0 18px 40px -10px rgba(232,184,75,.6);animation:tilt 4s ease-in-out infinite;
  display:flex;flex-direction:column;align-items:center;
}
.price-tag small{font-size:.75rem;font-weight:700;opacity:.8}
.price-tag b{font-size:1.5rem}
@keyframes tilt{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
.coin{position:absolute;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff3c4,var(--gold) 55%,#b98a1f);
  display:grid;place-items:center;color:#5c4308;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.coin.c1{inset-inline-start:2%;top:22%;animation:float 5s ease-in-out infinite}
.coin.c2{inset-inline-end:8%;top:52%;width:34px;height:34px;animation:float 6s -1s ease-in-out infinite}

/* ---------- Ticker ---------- */
.ticker{background:var(--gold);color:#1a1405;overflow:hidden;border-block:1px solid rgba(0,0,0,.08)}
.ticker-track{display:flex;gap:2.5rem;width:max-content;padding:.8rem 0;animation:marquee 32s linear infinite;font-weight:800}
.ticker-track span{display:flex;align-items:center;gap:2.5rem;white-space:nowrap}
.ticker-track i{width:8px;height:8px;border-radius:50%;background:#1a1405;display:inline-block}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(50%)}}

/* ---------- Sections ---------- */
section{position:relative}
.sec{padding:100px 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--blue);font-weight:800;font-size:.95rem;letter-spacing:.3px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--blue)}
.sec h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:900;line-height:1.3;margin:.5rem 0 .8rem;letter-spacing:-.4px}
.sec .lead{color:#51607a;font-size:1.1rem;max-width:40em}
.head{margin-bottom:3rem}

/* Services */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem}
.card{
  position:relative;background:#fff;border:1px solid #E4EAF3;border-radius:var(--radius);padding:1.6rem;
  display:flex;flex-direction:column;gap:.9rem;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px circle at 100% 0,rgba(22,119,255,.10),transparent 55%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(16,29,50,.35);border-color:rgba(22,119,255,.4)}
.card:hover::before{opacity:1}
.card .no{position:absolute;z-index:3;top:2.2rem;inset-inline-start:2.4rem;font-weight:900;font-size:.85rem;color:var(--steel);letter-spacing:2px;pointer-events:none}
.card .art{
  height:150px;border-radius:16px;background:linear-gradient(160deg,var(--night),#1a2e4d);
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.card .art::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(170,181,197,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(170,181,197,.08) 1px,transparent 1px);
  background-size:26px 26px;
}
.card .art svg{width:62%;height:auto;position:relative;z-index:1;transition:transform .6s var(--ease)}
.card:hover .art svg{transform:scale(1.1) translateY(-4px)}
.card h3{font-size:1.3rem;font-weight:900}
.card p{color:#5a6a85;font-size:.98rem;flex:1}
.card .tag{display:flex;align-items:center;gap:.5rem;color:#9a6f0b;font-weight:800;font-size:.92rem}
.card .tag .ico{color:var(--gold)}
.card .go{
  position:relative;z-index:2;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.7rem 1.1rem;border-radius:12px;background:var(--ice);font-weight:800;border:1px solid #E4EAF3;
  transition:background .3s,color .3s,border-color .3s;
}
.card .go .ico{transition:transform .4s var(--ease)}
.card:hover .go{background:var(--blue);color:#fff;border-color:var(--blue)}
.card:hover .go .ico{transform:translateX(-5px)}
.c-a{grid-column:span 3}.c-b{grid-column:span 3}
.c-c,.c-d,.c-e{grid-column:span 2}
.c-f{grid-column:span 3}
.c-g{grid-column:span 3;background:var(--night);border-color:var(--night);color:#fff}
.c-g p{color:var(--steel)}
.c-g .go{background:rgba(247,249,252,.08);border-color:rgba(247,249,252,.2);color:#fff}
.c-g .art{background:linear-gradient(160deg,#16294a,#0B1424)}
.c-g .tag{color:var(--gold)}

/* Offer */
.offer{background:var(--night);color:#fff;overflow:hidden;isolation:isolate}
.offer::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(600px circle at 15% 20%,rgba(232,184,75,.14),transparent 60%),
    radial-gradient(700px circle at 90% 90%,rgba(22,119,255,.22),transparent 60%);
}
.offer .bigword{
  position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);z-index:-1;text-align:center;
  font-size:clamp(8rem,24vw,22rem);font-weight:900;color:transparent;-webkit-text-stroke:1.5px rgba(170,181,197,.1);
  line-height:1;pointer-events:none;white-space:nowrap;animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(-3%,-50%)}to{transform:translate(3%,-50%)}}
.offer h2{font-size:clamp(2.4rem,6.5vw,5rem);line-height:1.15}
.offer h2 span{color:var(--gold)}
.offer .lead{color:var(--steel);font-size:1.2rem}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.perk{
  padding:1.7rem;border-radius:var(--radius);border:1px solid rgba(232,184,75,.28);
  background:linear-gradient(160deg,rgba(247,249,252,.06),rgba(247,249,252,.02));
  transition:transform .5s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden;
}
.perk:hover{transform:translateY(-8px);border-color:var(--gold);background:rgba(232,184,75,.08)}
.perk .ico-box{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--gold);color:#1a1405;margin-bottom:1rem;transition:transform .6s var(--ease)}
.perk:hover .ico-box{transform:rotate(-8deg) scale(1.08)}
.perk .ico-box .ico{width:28px;height:28px}
.perk h3{font-size:1.25rem;font-weight:900}
.offer .cta-row{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:.9rem}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #E1E8F2;border-radius:var(--radius);overflow:hidden;background:#fff}
.why{padding:2rem 1.8rem;border-inline-start:1px solid #E1E8F2;border-bottom:1px solid #E1E8F2;transition:background .4s;position:relative}
.why:nth-child(3n+1){border-inline-start:0}
.why:nth-last-child(-n+3){border-bottom:0}
.why:hover{background:var(--ice)}
.why .ico-box{width:54px;height:54px;border-radius:14px;border:1.5px solid var(--blue);color:var(--blue);display:grid;place-items:center;margin-bottom:1rem;transition:background .4s,color .4s,transform .5s var(--ease)}
.why:hover .ico-box{background:var(--blue);color:#fff;transform:translateY(-4px) rotate(-6deg)}
.why .ico-box .ico{width:26px;height:26px}
.why h3{font-size:1.2rem;font-weight:900;margin-bottom:.3rem}
.why p{color:#5a6a85;font-size:.97rem}

/* Steps */
.steps-sec{background:#fff;border-block:1px solid #E7ECF4}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.steps .path{
  position:absolute;inset-inline:12.5%;top:45px;height:3px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 20px);
  background-size:20px 3px;animation:pathMove 1s linear infinite;
}
@keyframes pathMove{to{background-position:-20px 0}}
@keyframes dash{to{stroke-dashoffset:-36}}
.step{position:relative;z-index:1;text-align:center;padding:0 .5rem}
.step .num{
  width:92px;height:92px;margin:0 auto 1.2rem;border-radius:26px;background:var(--night);color:var(--gold);
  display:grid;place-items:center;font-weight:900;font-size:2rem;position:relative;
  box-shadow:0 18px 36px -14px rgba(16,29,50,.6);transition:transform .5s var(--ease);
}
.step .num::after{content:"";position:absolute;inset:-7px;border-radius:32px;border:1.5px dashed rgba(22,119,255,.45);animation:spin 18s linear infinite}
.step:hover .num{transform:translateY(-8px) rotate(-4deg)}
.step h3{font-size:1.2rem;font-weight:900}
.step p{color:#5a6a85;font-size:.97rem}

/* Coverage */
.cov{background:var(--night);color:#fff;overflow:hidden}
.cov-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.cov .lead{color:var(--steel)}
.cov .eyebrow{color:var(--gold)}.cov .eyebrow::before{background:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2rem}
.chips span{padding:.45rem 1rem;border-radius:999px;border:1px solid rgba(170,181,197,.35);color:var(--ice);font-weight:700;font-size:.92rem;transition:background .3s,border-color .3s,color .3s}
.chips span:hover{background:var(--gold);border-color:var(--gold);color:#1a1405}
.map{width:100%;height:auto;max-width:560px;margin-inline:auto}
.map .zone{fill:rgba(22,119,255,.12);stroke:rgba(22,119,255,.55);stroke-width:1.5;transition:fill .4s}
.map .zone:hover{fill:rgba(232,184,75,.22)}
.map .roads path{stroke:rgba(170,181,197,.35);stroke-width:1.4;fill:none;stroke-dasharray:6 8;animation:dash 2s linear infinite}
.map .pin{fill:var(--gold)}
.map .wave{fill:none;stroke:var(--gold);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:wave 2.8s ease-out infinite;opacity:0}
.map .wave.w2{animation-delay:.9s}.map .wave.w3{animation-delay:1.8s}
@keyframes wave{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.map text{fill:var(--steel);font-family:inherit;font-size:15px;font-weight:700}
.map .ctr{fill:var(--gold);font-size:17px;font-weight:900}

/* FAQ */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:.9rem}
.faq details{background:#fff;border:1px solid #E1E8F2;border-radius:18px;overflow:hidden;transition:border-color .4s,box-shadow .4s}
.faq details[open]{border-color:var(--blue);box-shadow:0 20px 40px -26px rgba(22,119,255,.55)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 1.4rem;font-weight:800;font-size:1.08rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:34px;height:34px;border-radius:10px;background:var(--ice);display:grid;place-items:center;color:var(--blue);transition:transform .4s var(--ease),background .3s,color .3s;flex:none}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq .ans{padding:0 1.4rem 1.3rem;color:#4d5d78;animation:ansIn .5s var(--ease)}
@keyframes ansIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* CTA */
.cta{background:linear-gradient(160deg,var(--night),#16294a);color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(500px circle at 50% 110%,rgba(232,184,75,.28),transparent 65%)}
.cta .orb{position:absolute;border-radius:50%;border:1.5px solid rgba(170,181,197,.2);z-index:-1;animation:wave 6s ease-out infinite;inset-inline-start:50%;top:50%;width:400px;height:400px;margin:-200px -200px 0 0}
.cta .orb.o2{animation-delay:2s}.cta .orb.o3{animation-delay:4s}
.cta h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:900;line-height:1.25}
.cta h2 span{color:var(--gold)}
.cta p{color:var(--steel);font-size:1.2rem;margin:1rem auto 2.2rem;max-width:34em}
.cta .row{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cta .btn{padding:1.1rem 2.2rem;font-size:1.15rem}
.cta .phone{margin-top:1.6rem;color:var(--steel);font-weight:700;direction:ltr;letter-spacing:1px}

/* Footer */
.footer{background:var(--night-2);color:var(--steel);padding:70px 0 0}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
.footer .logo{margin-bottom:1rem}
.footer p{max-width:30em;font-size:.97rem}
.footer h4{color:#fff;font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.footer ul{list-style:none;display:grid;gap:.55rem}
.footer ul a{transition:color .3s,padding .3s}
.footer ul a:hover{color:var(--gold);padding-inline-start:6px}
.footer .info li{display:flex;align-items:center;gap:.6rem}
.footer .info .ico{color:var(--gold)}
.footer .info a[href^="tel"]{direction:ltr;unicode-bidi:embed}
.f-bottom{border-top:1px solid rgba(170,181,197,.16);padding:1.3rem 0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;font-size:.9rem}
.f-bottom a{color:var(--gold);font-weight:800;border-bottom:1px dashed var(--gold)}
.f-bottom a:hover{color:#fff;border-color:#fff}

/* Floating WhatsApp */
.wa-float{
  position:fixed;z-index:60;inset-inline-start:20px;bottom:20px;width:62px;height:62px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 14px 30px -6px rgba(37,211,102,.7);transition:transform .35s var(--ease);
}
.wa-float:hover{transform:scale(1.1) rotate(-6deg)}
.wa-float::before,.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wave 2.4s ease-out infinite}
.wa-float::after{animation-delay:1.2s}
.wa-float svg{width:34px;height:34px;fill:#fff;position:relative}
.wa-label{
  position:absolute;inset-inline-start:74px;background:#fff;color:#0c3b1d;font-weight:800;font-size:.9rem;padding:.4rem .9rem;border-radius:10px;
  white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);opacity:0;transform:translateX(-8px);transition:.35s var(--ease);pointer-events:none
}
.wa-float:hover .wa-label{opacity:1;transform:none}

/* Floating Call */
.call-float{
  position:fixed;z-index:60;inset-inline-end:20px;bottom:20px;width:62px;height:62px;border-radius:50%;
  background:var(--gold);color:#1a1405;display:grid;place-items:center;
  box-shadow:0 14px 30px -6px rgba(232,184,75,.75);transition:transform .35s var(--ease);
}
.call-float:hover{transform:scale(1.1) rotate(8deg)}
.call-float::before,.call-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:wave 2.4s ease-out infinite}
.call-float::after{animation-delay:1.2s}
.call-float .ico{width:30px;height:30px;position:relative;stroke-width:2.2;animation:ring 2.4s ease-in-out infinite}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}72%{transform:rotate(14deg)}79%{transform:rotate(-10deg)}86%{transform:rotate(8deg)}}
.call-label{
  position:absolute;inset-inline-end:74px;background:#fff;color:#1a1405;font-weight:800;font-size:.9rem;padding:.4rem .9rem;border-radius:10px;
  white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);opacity:0;transform:translateX(8px);transition:.35s var(--ease);pointer-events:none
}
.call-float:hover .call-label{opacity:1;transform:none}

/* ---------- Entrance animations (CSS only) ---------- */
.hero-in{animation:rise .9s var(--ease) both}
.hero-in.d1{animation-delay:.1s}.hero-in.d2{animation-delay:.25s}.hero-in.d3{animation-delay:.4s}.hero-in.d4{animation-delay:.55s}.hero-in.d5{animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.stage{animation:popIn 1.1s .3s var(--ease) both}

@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  .reveal.slow{animation-range:entry 0% entry 55%}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero{padding-top:130px}
  .hero-grid,.cov-grid{grid-template-columns:1fr}
  .stage{max-width:440px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .c-a,.c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 1}
  .c-g{grid-column:span 2}
  .perks{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why{border-inline-start:1px solid #E1E8F2!important;border-bottom:1px solid #E1E8F2!important}
  .why:nth-child(2n+1){border-inline-start:0!important}
  .why:nth-last-child(-n+2){border-bottom:0!important}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .steps .path{display:none}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid>div:first-child{grid-column:span 2}
  .burger{display:block}
  .nav{
    position:absolute;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--night-2);
    max-height:0;overflow:hidden;transition:max-height .5s var(--ease);border-bottom:1px solid rgba(170,181,197,.14);
  }
  .nav a.link{padding:1rem 5%;border-top:1px solid rgba(170,181,197,.1);font-size:1.05rem}
  .nav .btn{margin:1rem 5%}
  #menu-toggle:checked~.nav{max-height:520px}
}
@media (max-width:620px){
  .sec{padding:72px 0}
  .cards{grid-template-columns:1fr}
  .c-g{grid-column:span 1}
  .why-grid{grid-template-columns:1fr}
  .why{border-inline-start:0!important;border-bottom:1px solid #E1E8F2!important}
  .why:last-child{border-bottom:0!important}
  .steps{grid-template-columns:1fr}
  .hero .actions .btn,.cta .row .btn{width:100%}
  .f-grid{grid-template-columns:1fr}
  .f-grid>div:first-child{grid-column:auto}
  .price-tag{inset-inline-end:0}
  .wa-label,.call-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}