/* ============================================================
   GETI - Guinea Ecuatorial Tecnologia Informatica
   Design system. Palette contrast-verified to WCAG 2.2 AA.
   Usage rules baked in:
     - orange (#FF6B35) is a SURFACE colour. Text on it must be --ink.
     - orange-600 is UI-only (borders, icons, rings). Orange TEXT on
       light uses orange-700.
     - green (#00C46A) is a SURFACE colour. Text on it must be --ink.
       White text on green uses green-600 or darker.
   ============================================================ */

/* ---------- 1. Fonts ---------- */
@font-face{font-family:Sora;src:url(../fonts/sora-latin-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-400-normal.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;src:url(../fonts/inter-latin-600-normal.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#0A1628; --navy:#0F2C52; --navy-2:#163A6B; --navy-3:#1E4A85;
  --blue:#0F68C4; --blue-600:#0B5AAC; --blue-light:#5AB2FF;
  --orange:#FF6B35; --orange-600:#D9480F; --orange-700:#B23C0B; --orange-light:#FFA37A;
  --green:#00C46A; --green-600:#00875A; --green-700:#04703E; --green-light:#4ADE9B;
  --cyan:#22D3EE;
  --white:#fff; --paper:#F7F9FC; --sand:#FFF1EA; --line:#E3E9F2; --line-soft:#EDF1F7;
  --muted:#55657C; --muted-2:#4A5870; --muted-dark:#9DB2CE;

  --grad-brand:linear-gradient(135deg,var(--navy-2)0%,var(--blue)52%,var(--cyan)100%);
  --grad-hot:linear-gradient(135deg,#FF8A4C 0%,var(--orange)55%,#F2451F 100%);
  --grad-lime:linear-gradient(135deg,var(--green-light)0%,var(--green)60%,var(--green-600)100%);
  --grad-text:linear-gradient(100deg,var(--cyan)0%,var(--blue-light)40%,var(--green-light)100%);

  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:38px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,22,40,.06),0 2px 6px rgba(10,22,40,.05);
  --sh-2:0 4px 12px rgba(10,22,40,.07),0 12px 32px rgba(10,22,40,.07);
  --sh-3:0 12px 28px rgba(10,22,40,.10),0 28px 68px rgba(10,22,40,.12);
  --sh-hot:0 10px 26px rgba(217,72,15,.28);
  --ease:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.18s; --t:.34s; --t-slow:.7s;
  --wrap:1200px; --wrap-narrow:780px; --gut:clamp(18px,4.5vw,40px);
  --sec:clamp(64px,9vw,124px);
  --hdr:72px;
}
@media(min-width:900px){:root{--hdr:80px}}
@media(min-width:1600px){:root{--wrap:1340px}}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);
  font:400 17px/1.72 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:Sora,Inter,system-ui,sans-serif;font-weight:600;line-height:1.12;
  letter-spacing:-.03em;margin:0 0 .5em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(1.95rem,4.2vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
h3{font-size:clamp(1.05rem,1.25vw,1.22rem);letter-spacing:-.02em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--blue-600)}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.45em}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--orange-600);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.hero :focus-visible,.phero :focus-visible,.dark-sec :focus-visible,.cta :focus-visible,footer :focus-visible{outline-color:var(--orange-light)}
::selection{background:var(--orange);color:var(--ink)}

/* ---------- 4. Layout ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - var(--gut)*2,var(--wrap-narrow));margin-inline:auto}
.sec{padding-block:var(--sec);position:relative}
.sec-tight{padding-block:clamp(44px,6vw,76px)}
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.g3{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--r-sm)0;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 5. Type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.735rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-700);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad-hot)}
.dark .eyebrow,.hero .eyebrow,.phero .eyebrow,.cta .eyebrow{color:var(--orange-light)}
.lead{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.65;color:var(--muted)}
.dark .lead,.hero .lead,.phero .lead,.cta .lead{color:var(--muted-dark)}
.gtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{max-width:64ch;margin-bottom:clamp(34px,5vw,58px)}
.muted{color:var(--muted)}
.dark,.dark h1,.dark h2,.dark h3,.dark h4,
.dark-sec,.dark-sec>.wrap h1,.dark-sec>.wrap h2,.dark-sec>.wrap h3,.dark-sec>.wrap h4,
.dark-sec .step h3,.dark-sec .card h3,.dark-sec .card h4{color:#fff}
.dark p,.dark-sec>.wrap p,.dark-sec .step p,.dark-sec .card p{color:var(--muted-dark)}
.dark a:not(.btn):not(.chip),.dark-sec>.wrap a:not(.btn):not(.chip){color:var(--blue-light)}
.dark-sec .lead{color:var(--muted-dark)}
.dark-sec .eyebrow{color:var(--orange-light)}
.dark-sec .sec-head h2{color:#fff}

/* ---------- 6. Buttons ---------- */
.btn{--bg:var(--orange);--fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;min-height:52px;border-radius:var(--r-pill);border:2px solid transparent;
  font:600 1rem/1 Inter,sans-serif;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  background:var(--bg);color:var(--fg);position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hot);
  opacity:0;transition:opacity var(--t) var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-hot);color:var(--fg)}
.btn:hover::after{opacity:1}
.btn:active{transform:translateY(-1px)}
/* every inline UI icon gets an intrinsic size; an unsized viewBox SVG in a
   flex container expands to fill and has shipped as a 222px arrow before */
svg.ico{width:1.15em;height:1.15em;flex:none}
.btn .ico{width:19px;height:19px;flex:none;transition:transform var(--t) var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line)}
.btn-ghost::after{background:var(--ink)}
.btn-ghost:hover{--fg:#fff;border-color:var(--ink);box-shadow:var(--sh-2)}
.dark .btn-ghost,.hero .btn-ghost,.phero .btn-ghost,.cta .btn-ghost,.dark-sec .btn-ghost,footer .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.42)}
.dark .btn-ghost::after,.hero .btn-ghost::after,.phero .btn-ghost::after,.cta .btn-ghost::after,.dark-sec .btn-ghost::after,footer .btn-ghost::after{background:#fff}
.dark .btn-ghost:hover,.hero .btn-ghost:hover,.phero .btn-ghost:hover,.cta .btn-ghost:hover,.dark-sec .btn-ghost:hover,footer .btn-ghost:hover{--fg:var(--ink);border-color:#fff}
.btn-wa{--bg:var(--green);--fg:var(--ink)}
.btn-wa::after{background:var(--grad-lime)}
.btn-wa:hover{box-shadow:0 10px 26px rgba(0,135,90,.3)}
.btn-sm{padding:11px 20px;min-height:44px;font-size:.92rem}
.btn{white-space:nowrap}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;white-space:nowrap;
  color:var(--blue);border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color var(--t) var(--ease),gap var(--t) var(--ease)}
.tlink:hover{border-color:currentColor;gap:13px}
.tlink .ico{width:18px;height:18px;flex:none;transition:transform var(--t) var(--ease)}
.tlink:hover .ico{transform:translateX(3px)}
.dark .tlink,.dark-sec .tlink,.phero .tlink,footer .tlink{color:var(--cyan)}

/* ---------- 7. Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);display:flex;align-items:center;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),backdrop-filter var(--t)}
.hdr::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none}
.hdr.stuck::before{opacity:1}
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);position:relative;z-index:2;min-height:100%}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;line-height:1;
  transition:transform var(--t) var(--ease)}
.brand:hover{transform:scale(1.03)}
.brand svg{height:38px;width:auto}
.brand .bt{font:600 1.36rem/1 Sora,sans-serif;letter-spacing:-.045em;color:#fff;transition:color var(--t) var(--ease)}
.hdr.stuck .brand .bt{color:var(--ink)}
.brand .bs{display:none;font:600 .555rem/1.3 Inter,sans-serif;letter-spacing:.155em;
  text-transform:uppercase;color:var(--muted-dark);margin-top:4px;transition:color var(--t) var(--ease)}
.hdr.stuck .brand .bs{color:var(--muted)}
.brand .bmark{width:38px;height:auto;flex:none}
.nav{display:none;margin-left:auto;align-items:center;gap:2px;margin-block:0;padding:0;list-style:none}
@media(min-width:1024px){.nav{display:flex}}
.nav>li{list-style:none;position:relative;margin:0}
.nav>li>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 14px;border-radius:var(--r-pill);line-height:1;
  font-size:.945rem;font-weight:500;text-decoration:none;color:rgba(255,255,255,.86);white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.hdr.stuck .nav>li>a{color:var(--muted-2)}
.nav>li>a:hover,.nav>li>a[aria-current]{background:rgba(255,255,255,.13);color:#fff}
.hdr.stuck .nav>li>a:hover,.hdr.stuck .nav>li>a[aria-current]{background:var(--paper);color:var(--ink)}
.nav .caret{width:11px;height:11px;transition:transform var(--t) var(--ease)}
.nav li:hover .caret,.nav li:focus-within .caret{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;width:380px;max-width:min(380px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);
  padding:10px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
  transform-origin:top center;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.nav li:hover>.drop,.nav li:focus-within>.drop{opacity:1;visibility:visible;transform:none}
.drop li{margin:0}
.drop a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-sm);color:var(--ink)!important}
.drop a:hover{background:var(--paper)!important}
.drop .di{width:34px;height:34px;flex:none;border-radius:10px;background:var(--paper);
  display:grid;place-items:center;transition:background var(--t) var(--ease)}
.drop a:hover .di{background:var(--sand)}
.drop .di svg{width:19px;height:19px}
.drop b{display:block;font-size:.925rem;font-weight:600;line-height:1.35}
.drop span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.795rem;color:var(--muted);line-height:1.45;margin-top:3px;
  font-weight:400;overflow-wrap:anywhere}
.hdr-cta{margin-left:auto;display:none}
@media(min-width:1024px){.hdr-cta{display:flex;gap:10px;align-items:center;margin-left:6px}}
.hdr-cta .btn{height:40px;min-height:0;padding:0 18px;line-height:1}
.lang-btn{height:40px;line-height:1}

/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.09);color:#fff;
  font:600 .85rem/1 Inter,sans-serif;cursor:pointer;letter-spacing:.03em;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.hdr.stuck .lang-btn{border-color:var(--line);background:var(--white);color:var(--ink)}
.lang-btn:hover{background:rgba(255,255,255,.19)}
.hdr.stuck .lang-btn:hover{background:var(--paper)}
.lang-btn svg{width:15px;height:15px}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:172px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-3);padding:7px;
  margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.lang[data-open=true] .lang-menu,.lang:hover .lang-menu,.lang:focus-within .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-xs);
  text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500}
.lang-menu a:hover{background:var(--paper)}
.lang-menu a[aria-current]{background:var(--sand);color:var(--orange-700);font-weight:600}
.lang-menu .fl{font:600 .68rem/1 Inter,sans-serif;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:3px 5px;min-width:29px;text-align:center}

/* burger + drawer */
.burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;border:0;
  background:transparent;cursor:pointer;border-radius:var(--r-sm);padding:0}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:23px;height:2.5px;border-radius:2px;background:#fff;
  transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease),background var(--t)}
.burger span+span{margin-top:5.5px}
.hdr.stuck .burger span{background:var(--ink)}
body.menu-open .burger span{background:var(--ink)}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:99;background:#fff;pointer-events:none;padding:calc(var(--hdr) + 18px) var(--gut) 40px;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer>ul>li{border-bottom:1px solid var(--line-soft)}
.drawer>ul>li>a{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;
  font:600 1.13rem/1.3 Sora,sans-serif;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.drawer .sub{padding:0 0 14px 2px}
.drawer .sub a{display:flex;gap:11px;align-items:center;padding:9px 0;color:var(--muted);
  text-decoration:none;font-size:.96rem}
.drawer .sub a:hover{color:var(--blue)}
.drawer .sub svg{width:18px;height:18px;flex:none}
.drawer-foot{margin-top:26px;display:grid;gap:12px}
/* the drawer's language list is laid out inline. It must NOT declare its own
   visibility: an inline visible value beats the closed drawer's hidden state and
   leaves an invisible but clickable overlay across the page. */
.lang-menu-inline{position:static;opacity:1;transform:none;box-shadow:none;border:0;padding:0}
body.menu-open .lang-menu-inline{visibility:visible}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:clip;background:var(--ink);color:#fff;isolation:isolate;
  padding-top:calc(var(--hdr) + clamp(48px,8vw,96px));padding-bottom:clamp(64px,9vw,124px)}
.hero-home{min-height:min(94svh,940px);display:flex;align-items:center}
.hero .bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(76px);opacity:.5;will-change:transform}
.b1{width:56vw;height:56vw;max-width:760px;max-height:760px;left:-14%;top:-24%;
  background:radial-gradient(circle,#1E63C8 0%,rgba(30,99,200,0)70%)}
.b2{width:46vw;height:46vw;max-width:620px;max-height:620px;right:-10%;top:2%;
  background:radial-gradient(circle,#FF6B35 0%,rgba(255,107,53,0)70%);opacity:.36}
.b3{width:50vw;height:50vw;max-width:660px;max-height:660px;left:24%;bottom:-34%;
  background:radial-gradient(circle,#00C46A 0%,rgba(0,196,106,0)70%);opacity:.3}
.hero .grid-lines{position:absolute;inset:-2px;z-index:-2;opacity:.32;
  background-image:linear-gradient(rgba(90,178,255,.13)1px,transparent 1px),linear-gradient(90deg,rgba(90,178,255,.13)1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 40%,#000 20%,transparent 76%)}
.hero .noise{position:absolute;inset:0;z-index:-1;opacity:.038;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-in{position:relative;z-index:2;display:grid;gap:clamp(38px,5vw,64px);align-items:center}
@media(min-width:1000px){.hero-home .hero-in{grid-template-columns:1.12fr .88fr}}
.hero h1{color:#fff;margin-bottom:.42em}
.hero-sub{font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.68;color:var(--muted-dark);
  max-width:56ch;margin-bottom:34px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 9px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.15);
  font-size:.815rem;font-weight:500;color:#fff;margin-bottom:26px;backdrop-filter:blur(8px)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 4px rgba(0,196,106,.22);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,196,106,.22)}50%{box-shadow:0 0 0 9px rgba(0,196,106,0)}}
.hero-foot{margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.hero-foot span{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted-dark)}
.hero-foot svg{width:16px;height:16px;color:var(--green-light);flex:none}

/* hero visual card stack */
.hviz{position:relative;perspective:1400px}
.hcard{background:linear-gradient(160deg,rgba(30,74,133,.62),rgba(15,44,82,.5));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);padding:26px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 26px 64px rgba(0,0,0,.36)}
.hcard-head{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.hcard-head .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad-hot);flex:none}
.hcard-head .ic svg{width:23px;height:23px;color:var(--ink)}
.hcard-head b{font:600 1.02rem/1.3 Sora,sans-serif;color:#fff;letter-spacing:-.02em}
.hcard-head small{display:block;font-size:.78rem;color:var(--muted-dark);font-weight:400;margin-top:1px}
.hrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.08)}
.hrow svg{width:17px;height:17px;flex:none;color:var(--cyan)}
.hrow span{font-size:.9rem;color:rgba(255,255,255,.86)}
.hrow .val{margin-left:auto;font:600 .84rem/1 Inter,sans-serif;color:var(--green-light);
  background:rgba(0,196,106,.13);padding:5px 10px;border-radius:var(--r-pill)}
.hfloat{position:absolute;background:#fff;color:var(--ink);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:0 18px 42px rgba(0,0,0,.3);display:flex;align-items:center;gap:12px}
.hfloat b{font:600 1.3rem/1 Sora,sans-serif;letter-spacing:-.03em;display:block}
.hfloat small{font-size:.735rem;color:var(--muted);letter-spacing:.03em}
.hfloat .fi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.hf1{top:-30px;right:-18px;animation:float1 6.5s ease-in-out infinite}
.hf2{bottom:-44px;left:-34px;animation:float2 7.5s ease-in-out infinite}
@media(max-width:900px){.hf1{right:-6px;top:-22px}.hf2{left:-6px;bottom:-30px}}
@media(max-width:760px){.hf1{display:none}.hf2{left:0;bottom:-26px}}
@media(max-width:520px){.hfloat{padding:11px 14px}.hfloat b{font-size:1.18rem}.hf1{right:0;top:-16px}.hf2{left:0;bottom:-22px}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

/* ---------- 9. Page hero (inner) ---------- */
.phero{position:relative;background:var(--ink);color:#fff;overflow:clip;isolation:isolate;
  padding-top:calc(var(--hdr) + clamp(40px,6vw,72px));padding-bottom:clamp(52px,7vw,84px)}
.phero h1{color:#fff;max-width:19ch}
.phero .lead{max-width:60ch;color:var(--muted-dark)}
.crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;list-style:none;margin:0 0 22px;padding:0;
  font-size:.82rem;color:var(--muted-dark)}
.crumb li{margin:0;display:flex;align-items:center;gap:7px}
.crumb a{color:var(--muted-dark);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb svg{width:12px;height:12px;opacity:.5}
.crumb [aria-current]{color:#fff;font-weight:500}
.phero .glyph{position:absolute;right:1%;top:52%;translate:0 -50%;width:min(36vw,400px);
  opacity:.11;color:var(--cyan);pointer-events:none;z-index:-1;will-change:transform}
.phero .glyph svg{width:100%;height:auto;stroke-width:.85}
@media(max-width:980px){.phero .glyph{display:none}}

/* ---------- 10. Cards ---------- */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);isolation:isolate;overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(160deg,var(--paper),#fff 60%);transition:opacity var(--t) var(--ease)}
.card::after{content:"";position:absolute;inset-inline:0;top:0;height:4px;z-index:1;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-3);border-color:transparent}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted);font-size:.985rem;margin-bottom:0}
.card p+.tlink{margin-top:18px}
.card-link{text-decoration:none;color:inherit;display:block}
.card-link h3{transition:color var(--t) var(--ease)}
.card-link:hover h3{color:var(--blue)}
.card.hot::after{background:var(--grad-hot)}
.card.lime::after{background:var(--grad-lime)}

.ibox{width:60px;height:60px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:22px;position:relative;background:var(--paper);border:1px solid var(--line-soft);
  transition:transform var(--t) var(--ease-back),background var(--t) var(--ease),border-color var(--t)}
.card:hover .ibox{transform:translateY(-3px) rotate(-5deg) scale(1.06);background:var(--sand);border-color:transparent}
.ibox svg{width:30px;height:30px;color:var(--blue)}
.card:hover .ibox svg{color:var(--orange-700)}
.ibox.g svg{color:var(--green-600)}
.card:hover .ibox.g{background:#E6FAF0}
.card:hover .ibox.g svg{color:var(--green-700)}

/* dark cards */
.dark .card,.dark-sec .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}
.dark .card::before,.dark-sec .card::before{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.dark .ibox,.dark-sec .ibox{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.dark .ibox svg,.dark-sec .ibox svg{color:var(--cyan)}
.dark .ibox.g svg,.dark-sec .ibox.g svg{color:var(--green-light)}
.dark .card:hover .ibox,.dark-sec .card:hover .ibox{background:rgba(255,107,53,.17)}
.dark .card:hover .ibox svg,.dark-sec .card:hover .ibox svg{color:var(--orange-light)}
.dark .card:hover h3,.dark .card-link:hover h3,
.dark-sec .card:hover h3,.dark-sec .card-link:hover h3{color:#fff}
.dark-sec .tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.dark-sec .tag.g{background:rgba(0,196,106,.14);border-color:rgba(0,196,106,.3);color:var(--green-light)}
.dark-sec .tag.hot{background:rgba(255,107,53,.14);border-color:rgba(255,107,53,.32);color:var(--orange-light)}
.dark-sec .panel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.dark-sec .checks li{color:var(--muted-dark)}

/* ---------- 11. Sections ---------- */
.dark-sec{background:var(--ink);color:#fff;position:relative;overflow:clip;isolation:isolate}
.dark-sec::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(ellipse 62% 52% at 18% 8%,rgba(30,99,200,.5),transparent 62%),
             radial-gradient(ellipse 52% 48% at 88% 92%,rgba(0,196,106,.28),transparent 60%),
             radial-gradient(ellipse 44% 40% at 72% 12%,rgba(255,107,53,.2),transparent 62%)}
.paper-sec{background:var(--paper)}
.sand-sec{background:var(--sand)}

/* ---------- 12. Stats ---------- */
.stats{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.stat{position:relative;padding:clamp(24px,3vw,30px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.stat:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.24)}
.stat .sv{font:600 clamp(1.65rem,2.6vw,2.15rem)/1 Sora,sans-serif;letter-spacing:-.045em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:9px;display:block}
.stat .sl{font-size:.885rem;color:var(--muted-dark);line-height:1.45;display:block}
.stat .si{position:absolute;top:18px;right:18px;width:22px;height:22px;color:rgba(255,255,255,.16)}

/* ---------- 13. Process ---------- */
.steps{counter-reset:s;display:grid;gap:clamp(18px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(198px,1fr));position:relative}
.step{position:relative;padding-top:56px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font:600 .95rem/1 Sora,sans-serif;color:var(--ink);background:var(--orange);
  box-shadow:0 6px 16px rgba(255,107,53,.3);transition:transform var(--t) var(--ease-back)}
.step:hover::before{transform:scale(1.12) rotate(-7deg)}
.step::after{content:"";position:absolute;top:22px;left:56px;right:-14px;height:2px;
  background:repeating-linear-gradient(90deg,var(--line)0 7px,transparent 7px 14px)}
.step:last-child::after{display:none}
@media(max-width:640px){.step::after{display:none}}
.dark .step::after,.dark-sec .step::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2)0 7px,transparent 7px 14px)}
.step h3{font-size:1.06rem;margin-bottom:.4em}
.step p{font-size:.93rem;color:var(--muted);margin:0}
.dark-sec .step p{color:var(--muted-dark)}

/* ---------- 14. Checklist / feature list ---------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.checks li{display:flex;gap:13px;align-items:flex-start;margin:0;font-size:.975rem;line-height:1.6}
.checks svg{width:21px;height:21px;flex:none;margin-top:2px;color:var(--green-600)}
.dark .checks svg,.dark-sec .checks svg{color:var(--green-light)}

/* ---------- 15. Split / feature rows ---------- */
.split{display:grid;gap:clamp(32px,5vw,68px);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.wide-l{grid-template-columns:1.15fr .85fr}}
.panel{border-radius:var(--r-xl);padding:clamp(26px,3.6vw,42px);background:var(--paper);
  border:1px solid var(--line);position:relative;overflow:hidden}
.panel.dark{background:var(--ink);border-color:rgba(255,255,255,.1)}

/* ---------- 16. Marquee (toolbox) ---------- */
.mq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq.rev .mq-track{animation-direction:reverse;animation-duration:52s}
@keyframes mq{to{transform:translateX(-50%)}}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:.905rem;font-weight:500;white-space:nowrap;
  color:var(--ink);transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.chip:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--sh-2)}
.chip .cd{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.chip.o .cd{background:var(--orange)}.chip.g .cd{background:var(--green)}.chip.c .cd{background:var(--cyan)}
.dark-sec .chip{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);color:#fff}
.dark-sec .chip:hover{border-color:var(--orange-light)}

/* ---------- 17. Accordion / FAQ ---------- */
.faq{display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.qa[open]{border-color:var(--blue);box-shadow:var(--sh-2)}
.qa summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;position:relative;
  font:600 .995rem/1.5 Sora,sans-serif;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:20px;top:50%;width:13px;height:13px;
  margin-top:-8px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg);transition:transform var(--t) var(--ease)}
.qa[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.qa summary:hover{color:var(--blue)}
.qa .qa-b{padding:0 22px 22px;color:var(--muted);font-size:.975rem}
.qa .qa-b p:last-child{margin-bottom:0}

/* ---------- 18. Contact / form ---------- */
.form{display:grid;gap:18px}
.f2{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:grid;gap:7px}
.field label{font-size:.885rem;font-weight:600;letter-spacing:-.01em}
.field .req{color:var(--orange-700)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:400 1rem/1.5 Inter,sans-serif;color:var(--ink);background:#fff;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,104,196,.14)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.885rem;color:var(--muted);line-height:1.55}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--blue)}
.fmsg{padding:15px 18px;border-radius:var(--r-sm);font-size:.94rem;display:none}
.fmsg.ok{display:block;background:#E6FAF0;border:1px solid var(--green);color:var(--green-700)}
.fmsg.err{display:block;background:#FFEDE6;border:1px solid var(--orange);color:var(--orange-700)}
.cbox{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.cbox:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--orange)}
.cbox .ci{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--sand)}
.cbox .ci svg{width:23px;height:23px;color:var(--orange-700)}
.cbox b{display:block;font:600 .965rem/1.3 Sora,sans-serif;margin-bottom:4px}
.cbox span{font-size:.9rem;color:var(--muted);word-break:break-word}

/* ---------- 19. CTA band ---------- */
.cta{position:relative;overflow:clip;isolation:isolate;background:var(--ink);color:#fff;
  border-radius:var(--r-xl);padding:clamp(38px,5.6vw,72px);text-align:center}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 68% 100% at 22% 0%,rgba(255,107,53,.34),transparent 62%),
             radial-gradient(ellipse 62% 100% at 82% 100%,rgba(0,196,106,.3),transparent 62%),
             radial-gradient(ellipse 74% 90% at 50% 50%,rgba(15,104,196,.4),transparent 68%)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.07)1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07)1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 78%)}
.cta h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta p{color:var(--muted-dark);max-width:56ch;margin-inline:auto;margin-bottom:32px}
.cta .btn-row{justify-content:center}

/* ---------- 20. Footer ---------- */
footer{background:var(--ink);color:var(--muted-dark);padding-top:clamp(52px,7vw,86px);
  position:relative;overflow:clip}
footer::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 12% 0%,rgba(15,104,196,.4),transparent 64%)}
footer .wrap{position:relative;z-index:1}
.fgrid{display:grid;gap:clamp(30px,4vw,50px);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:44px}
@media(min-width:960px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.fcol h4{color:#fff;font:600 .78rem/1 Inter,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:20px}
.fcol ul{list-style:none;padding:0;margin:0}
.fcol li{margin-bottom:11px}
.fcol a{color:var(--muted-dark);text-decoration:none;font-size:.935rem;
  transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.fcol a:hover{color:#fff;padding-left:4px}
.fbrand p{font-size:.935rem;max-width:38ch;margin:18px 0 22px}
.fbrand .brand .bt{color:#fff}
.fmeta{display:grid;gap:9px;font-size:.895rem}
.fmeta a{display:inline-flex;align-items:center;gap:9px;color:var(--muted-dark);text-decoration:none}
.fmeta a:hover{color:#fff}
.fmeta svg{width:16px;height:16px;flex:none;color:var(--orange-light)}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:24px 0 30px;display:flex;flex-wrap:wrap;
  gap:12px 26px;align-items:center;justify-content:space-between;font-size:.855rem}
.fbot a{color:var(--muted-dark);text-decoration:none}
.fbot a:hover{color:#fff;text-decoration:underline}
.fbot .fl{display:flex;flex-wrap:wrap;gap:8px 20px}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t)}
.soc a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px);padding:0}
.soc svg{width:18px;height:18px;color:#fff}
.soc a:hover svg{color:var(--ink)}
.reg{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:var(--r-pill);
  background:rgba(0,196,106,.11);border:1px solid rgba(0,196,106,.28);
  font-size:.79rem;font-weight:500;color:var(--green-light);margin-top:6px}
.reg svg{width:15px;height:15px;flex:none}

/* ---------- 21. WhatsApp float ---------- */
.wafab{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:90;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--green);
  box-shadow:0 8px 26px rgba(0,135,90,.42);text-decoration:none;
  transition:transform var(--t) var(--ease-back),box-shadow var(--t) var(--ease)}
.wafab:hover{transform:scale(1.1);box-shadow:0 12px 34px rgba(0,135,90,.55)}
.wafab svg{width:29px;height:29px;color:var(--ink)}
.wafab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);
  animation:ring 2.6s var(--ease) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}

/* ---------- 22. Scroll progress ---------- */
.prog{position:fixed;top:0;left:0;height:3px;z-index:101;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:var(--grad-hot)}

/* ---------- 23. Reveal + parallax ----------
   Everything here is an ENHANCEMENT. The hidden starting state only applies
   where scripting is actually enabled, so with JavaScript off (or blocked)
   the page renders complete and static instead of blank. Above-the-fold
   content in a hero animates on a plain CSS timeline rather than waiting for
   IntersectionObserver, so it paints immediately even on a slow connection. */
[data-px]{will-change:transform}
@keyframes rv-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rv-in-l{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes rv-in-r{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes rv-in-s{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

@media (scripting: enabled){
  [data-rv]{opacity:0;transform:translateY(28px);
    transition:opacity .78s var(--ease),transform .78s var(--ease);
    transition-delay:var(--d,0ms);will-change:opacity,transform}
  [data-rv=l]{transform:translateX(-34px)}
  [data-rv=r]{transform:translateX(34px)}
  [data-rv=s]{transform:scale(.94)}
  [data-rv].in{opacity:1;transform:none}

  /* first viewport: no observer in the critical path */
  .hero [data-rv],.phero [data-rv]{
    opacity:1;transform:none;transition:none;
    animation:rv-in .78s var(--ease) var(--d,0ms) both}
  .hero [data-rv=l],.phero [data-rv=l]{animation-name:rv-in-l}
  .hero [data-rv=r],.phero [data-rv=r]{animation-name:rv-in-r}
  .hero [data-rv=s],.phero [data-rv=s]{animation-name:rv-in-s}
}

/* ---------- 24. Animated icons ----------
   Same rule: the undrawn starting state is script-only, so icons are fully
   drawn when JavaScript is unavailable rather than invisible. */
@media (scripting: enabled){
  .ai .dash{stroke-dasharray:var(--len,100);stroke-dashoffset:var(--len,100);
    transition:stroke-dashoffset 1.15s var(--ease)}
  .ai.in .dash,.card:hover .ai .dash,.ibox:hover .ai .dash{stroke-dashoffset:0}
  .ai .pop{transform-origin:center;transform:scale(0);transition:transform .5s var(--ease-back) .35s}
  .ai.in .pop,.card:hover .ai .pop{transform:scale(1)}
  .ai .rise{transform-origin:bottom;transform:scaleY(.15);transition:transform .7s var(--ease-back)}
  .ai .r2{transition-delay:.1s}.ai .r3{transition-delay:.2s}
  .ai.in .rise,.card:hover .ai .rise{transform:scaleY(1)}
  /* icons inside a hero draw straight away, no observer */
  .hero .ai .dash,.phero .ai .dash{stroke-dashoffset:0}
  .hero .ai .pop,.phero .ai .pop{transform:scale(1)}
  .hero .ai .rise,.phero .ai .rise{transform:scaleY(1)}
}
.ai .drift{transition:transform .8s var(--ease)}
.card:hover .ai .drift{transform:translateX(3px) translateY(-3px)}
.ai .blink{animation:none}
.card:hover .ai .blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* ---------- 26. Prose ---------- */
.prose h2{margin-top:1.9em}
.prose h3{margin-top:1.6em}
.prose>*:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink)}

/* ---------- 27. Misc ---------- */
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);font-size:.79rem;font-weight:500;color:var(--muted)}
.tag.hot{background:var(--sand);border-color:#FFD9C7;color:var(--orange-700)}
.tag.g{background:#E6FAF0;border-color:#B6EDD1;color:var(--green-700)}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.note{padding:18px 22px;border-radius:var(--r-md);background:var(--paper);
  border-left:4px solid var(--blue);font-size:.925rem;color:var(--muted)}
.note strong{color:var(--ink)}
.dark-sec .note{background:rgba(255,255,255,.05);border-left-color:var(--cyan);color:var(--muted-dark)}

/* ---------- 28. 404 ---------- */
.e404{min-height:78svh;display:grid;place-items:center;text-align:center}
.e404 .big{font:600 clamp(4.5rem,13vw,8rem)/0.85 Sora,sans-serif;letter-spacing:-.06em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.15em}

/* ---------- 29. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;animation:none!important}
  [data-px]{transform:none!important}
  .mq-track{animation:none;transform:none}
  .ai .dash{stroke-dashoffset:0!important}
  .ai .pop,.ai .rise{transform:none!important}
  .hfloat{animation:none}
  .prog{display:none}
}

/* ---------- 30. Print ---------- */
@media print{
  .hdr,.drawer,.wafab,.prog,.cta,.soc{display:none!important}
  body{color:#000;background:#fff;font-size:11pt}
  .hero,.phero,.dark-sec,footer{background:#fff!important;color:#000!important}
  .hero h1,.phero h1,.dark-sec h2{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* brand strapline only where there is room for it */
@media(min-width:1280px){.hdr .brand .bs{display:block}}
footer .brand .bs,.drawer .brand .bs{display:block}

/* eyebrow used as a step number on the process page */
.sec-head .eyebrow+.ibox,.split .eyebrow+.ibox{margin-top:4px}

/* keep long service names from colliding with the dropdown edge */
.drop b{overflow-wrap:anywhere}

/* card grids: equal-height children */
.grid>.card,.grid>.card-link{height:100%;display:flex;flex-direction:column}
.grid>.card>.tlink,.grid>.card-link>.tlink{margin-top:auto;padding-top:18px}
.grid>.card>p:last-of-type,.grid>.card-link>p:last-of-type{margin-bottom:0}

/* checks inside dark panels */
.panel.dark .checks span{color:var(--muted-dark)}

/* stat icons should not overlap long values */
.stat .sv{padding-right:30px}


/* ---------- 31. No-script fallbacks ----------
   The drawer needs script to open, so with scripting off it is removed
   entirely and the header keeps the language menu (pure CSS hover/focus)
   and the primary action; full navigation lives in the footer. */
@media (scripting: none){
  .burger,.drawer,.prog{display:none}
  .hdr-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
  .wafab::before{display:none}
  .mq{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .mq-track{animation:none;width:auto}
}
@media (scripting: none) and (max-width:1100px){
  .hdr .brand .bs{display:none}
  .hdr .brand .bt{font-size:1.25rem}
  .hdr-cta .btn{padding:10px 16px;min-height:42px;font-size:.9rem}
}
@media (scripting: none) and (max-width:520px){
  .hdr-cta .lang-btn span{display:none}
  .hdr-cta .lang-btn{padding:9px 10px}
}


/* ---------- 32. Megamenu ---------- */
.nav>li.has-mega{position:static}
.mega{position:absolute;top:calc(100% - 6px);left:50%;translate:-50% 0;pointer-events:none;
  width:min(1060px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:22px;z-index:5;
  opacity:0;visibility:hidden;transform:translateY(10px);transform-origin:top center;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-in{display:grid;gap:22px;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);align-items:start}
@media(max-width:1200px){.mega-in{grid-template-columns:minmax(0,1fr)}.mega-side{display:none}}
.mega-h{font:600 .72rem/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:2px 0 14px 12px}
.mega .drop{position:static;inset:auto;opacity:1;visibility:visible;
  /* the base .drop rule sets translate:-50% 0, which still applies to a static
     element and shifted the whole grid out of the panel */
  transform:none;translate:none;width:auto;max-width:none;
  box-shadow:none;border:0;padding:0;display:grid;gap:4px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.mega .drop{grid-template-columns:minmax(0,1fr)}}
.mega .drop a{display:flex;gap:13px;align-items:center;padding:12px;border-radius:var(--r-sm);
  color:var(--ink)!important;text-decoration:none;transition:background var(--t-fast) var(--ease)}
.mega .drop a:hover{background:var(--paper)!important}
.mega .di{width:40px;height:40px;flex:none;border-radius:12px;background:var(--paper);
  display:grid;place-items:center;transition:background var(--t) var(--ease),transform var(--t) var(--ease-back)}
.mega .drop a:hover .di{background:var(--sand);transform:translateY(-2px) rotate(-5deg)}
.mega .di svg{width:21px;height:21px;color:var(--blue)}
.mega .drop a:hover .di svg{color:var(--orange-700)}
.mega .dt{min-width:0;flex:1}
.mega .dt b{display:block;font:600 .93rem/1.35 Sora,sans-serif;letter-spacing:-.01em}
.mega .dt span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.79rem;color:var(--muted);line-height:1.45;margin-top:3px;font-weight:400}
.mega .dgo{flex:none;opacity:0;transform:translateX(-4px);color:var(--orange-600);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.mega .dgo svg{width:16px;height:16px}
.mega .drop a:hover .dgo{opacity:1;transform:none}
.mega-side{border-left:1px solid var(--line-soft);padding-left:22px}
.mega-sec{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:2px;min-width:0}
.mega-sec a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-xs);
  font-size:.86rem;color:var(--muted)!important;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast)}
.mega-sec a:hover{background:var(--paper)!important;color:var(--ink)!important}
.mega-sec svg{width:17px;height:17px;flex:none;color:var(--green-600)}
.mega-card{position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  text-decoration:none;isolation:isolate;transition:transform var(--t) var(--ease)}
.mega-card:hover{transform:translateY(-3px)}
.mega-card-bg{position:absolute;inset:0;z-index:-1;background:var(--ink)}
.mega-card-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 100% at 15% 0%,rgba(255,107,53,.42),transparent 62%),
             radial-gradient(ellipse 70% 100% at 90% 100%,rgba(0,196,106,.36),transparent 60%)}
.mega-card-in{display:block;padding:20px}
.mega-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);margin-bottom:14px}
.mega-ic svg{width:20px;height:20px;color:#fff}
.mega-card b{display:block;color:#fff;font:600 1rem/1.3 Sora,sans-serif;letter-spacing:-.02em}
.mega-card>.mega-card-in>span:not(.mega-ic):not(.tlink){display:block;font-size:.82rem;
  color:var(--muted-dark);line-height:1.5;margin-top:6px}
.mega-card .tlink{margin-top:14px;color:var(--orange-light);font-size:.86rem;border:0}
.mega-card:hover .tlink{gap:12px}

/* ---------- 33. Footer service links get a lead-in arrow ---------- */
.fcol li a{display:flex;align-items:flex-start;gap:9px}
.fcol svg.fa{width:14px;height:14px;flex:none;margin-top:5px;color:var(--orange-light);
  transition:transform var(--t) var(--ease)}
.fcol a:hover svg.fa{transform:translateX(3px)}
.fcol a:hover{padding-left:0}
.fcol li a span{display:block}

/* ---------- 34. Native selects, styled ---------- */
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:46px;cursor:pointer;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355657C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:17px}
.field select:hover{border-color:var(--muted-dark)}
.field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F68C4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.field select:invalid,.field select option[value=""]{color:var(--muted)}
.field select option{color:var(--ink);background:#fff;padding:10px}

/* ---------- 35. Legal pages ---------- */
.legal{display:grid;gap:clamp(28px,4vw,54px);align-items:start}
@media(min-width:900px){.legal{grid-template-columns:250px 1fr}}
.legal-toc{position:sticky;top:calc(var(--hdr) + 20px);font-size:.9rem}
@media(max-width:899px){.legal-toc{position:static}}
.legal-toc h2{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 12px;font-family:Inter,sans-serif;font-weight:600}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border-left:2px solid var(--line);padding-left:14px}
.legal-toc a{display:block;padding:5px 0;color:var(--muted);text-decoration:none;font-size:.87rem;
  line-height:1.45;transition:color var(--t-fast),transform var(--t-fast)}
.legal-toc a:hover{color:var(--blue);transform:translateX(2px)}
.legal-body{max-width:70ch}
.legal-sec{scroll-margin-top:calc(var(--hdr) + 24px)}
.legal-sec h2{font-size:clamp(1.16rem,1.5vw,1.34rem);margin-top:2.1em}
.legal-sec:first-of-type h2{margin-top:1.2em}
.legal-body>.lead{padding-bottom:20px;border-bottom:1px solid var(--line-soft)}


/* ---------- 36. Icon animations replay on hover ----------
   The reveal draw runs once via .in. Hover re-runs it as a real animation, so
   pointing at a card redraws its icon every time rather than only on first sight. */
@media (scripting: enabled) and (hover: hover){
  @keyframes ic-draw{from{stroke-dashoffset:var(--len,100)}to{stroke-dashoffset:0}}
  @keyframes ic-pop{0%{transform:scale(0)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
  @keyframes ic-rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
  @keyframes ic-drift{0%{transform:none}50%{transform:translateX(3px) translateY(-3px)}100%{transform:none}}
  .card:hover .ai .dash,.card-link:hover .ai .dash,.cbox:hover .ai .dash,
  .step:hover .ai .dash,.ibox:hover .ai .dash,.mega .drop a:hover .ai .dash,
  .split:hover>div>.ibox .ai .dash,.stat:hover .ai .dash{
    animation:ic-draw .95s var(--ease) both}
  .card:hover .ai .pop,.card-link:hover .ai .pop,.cbox:hover .ai .pop,
  .step:hover .ai .pop,.ibox:hover .ai .pop,.mega .drop a:hover .ai .pop,
  .split:hover>div>.ibox .ai .pop,.stat:hover .ai .pop{
    animation:ic-pop .5s var(--ease-back) .3s both}
  .card:hover .ai .rise,.card-link:hover .ai .rise,.step:hover .ai .rise,
  .ibox:hover .ai .rise,.mega .drop a:hover .ai .rise{
    animation:ic-rise .6s var(--ease-back) both}
  .card:hover .ai .r2,.mega .drop a:hover .ai .r2{animation-delay:.1s}
  .card:hover .ai .r3,.mega .drop a:hover .ai .r3{animation-delay:.2s}
  .card:hover .ai .drift,.card-link:hover .ai .drift,.mega .drop a:hover .ai .drift{
    animation:ic-drift .8s var(--ease) both}
}