/* ===== THEME VARIABLES ===== */
:root{
  --signal:#0F2EE8;--sync:#19C37D;--clarity:#17A1E5;--spectrum:#8B96EE;--pulse:#EF16B1;--action:#FFD212;
  --bg:#050510;--bg2:#08081a;--bg3:#06061a;
  --text:#fff;--t2:rgba(255,255,255,0.55);--t3:rgba(255,255,255,0.42);--t4:rgba(255,255,255,0.38);--t5:rgba(255,255,255,0.25);
  --bd:rgba(255,255,255,0.07);--bd2:rgba(255,255,255,0.05);--bd3:rgba(255,255,255,0.06);
  --card:rgba(255,255,255,0.025);--card-h:rgba(255,255,255,0.05);
  --nav-bg:rgba(5,5,16,0.75);--nav-scroll:rgba(5,5,16,0.92);--mob-bg:rgba(5,5,16,0.98);--nav-sh:none;
  --hero-l:#020207;--hero-r:#07081c;
  --mq-l:rgba(2,2,7,0.95);--mq-r:rgba(7,8,28,0.95);
  --grid-c:rgba(255,255,255,0.015);
  --psc-bg:rgba(239,22,177,0.04);--psc-bd:rgba(239,22,177,0.1);--psc-num:rgba(239,22,177,0.85);
  --viz-bg:rgba(255,255,255,0.025);--viz-bd:rgba(255,255,255,0.08);
  --dvp-bg:rgba(255,255,255,0.03);--dvp-bd:rgba(255,255,255,0.08);
  --irw-bg:rgba(255,255,255,0.025);--ph-bd:rgba(255,255,255,0.06);
  --cts-a:#050510;--cts-b:#070922;
  --cog-l:rgba(255,255,255,0.02);--cog-r:rgba(15,46,232,0.07);
  --cog-lt:rgba(255,255,255,0.3);--cog-rt:rgba(255,255,255,0.82);--cog-x:rgba(255,80,80,0.5);
  --action-t:var(--action);--nl-r:rgba(255,255,255,0.4);
  --bc1:rgba(25,195,125,0.03);--bc2:rgba(15,46,232,0.03);--bc3:rgba(239,22,177,0.03);
  --bn-col:#fff;--bn-g1:0 0 50px rgba(25,195,125,0.55);--bn-g2:0 0 50px rgba(15,46,232,0.65);--bn-g3:0 0 50px rgba(239,22,177,0.55);
  --mi-bg:rgba(12,12,28,0.97);--mi-bd:rgba(255,255,255,0.08);--mi-sh:0 24px 80px rgba(0,0,0,0.5);
  --ml-h:rgba(255,255,255,0.05);--mlt4:#fff;--mltp:rgba(255,255,255,0.3);
  --mct:rgba(255,255,255,0.25);--mfl:rgba(255,255,255,0.4);--mdv:rgba(255,255,255,0.06);
  --bs-bg:rgba(255,255,255,0.06);--bs-bd:rgba(255,255,255,0.1);
  --peg-fade:#050510;--rs-bg:#08081a;--fs-bg:#06061a;
}
html.light{
  --bg:#fff;--bg2:#F6F7FB;--bg3:#F0F2F8;
  --text:#0F0F1A;--t2:rgba(0,0,0,0.52);--t3:rgba(0,0,0,0.42);--t4:rgba(0,0,0,0.36);--t5:rgba(0,0,0,0.22);
  --bd:rgba(0,0,0,0.08);--bd2:rgba(0,0,0,0.05);--bd3:rgba(0,0,0,0.06);
  --card:rgba(0,0,0,0.03);--card-h:rgba(0,0,0,0.055);
  --nav-bg:rgba(255,255,255,0.88);--nav-scroll:rgba(255,255,255,0.96);--mob-bg:rgba(255,255,255,0.98);--nav-sh:0 1px 20px rgba(0,0,0,0.06);
  --hero-l:#EEF1FF;--hero-r:#F3FBF7;
  --mq-l:rgba(238,241,255,0.98);--mq-r:rgba(243,251,247,0.98);
  --grid-c:rgba(0,0,0,0.04);
  --psc-bg:rgba(220,50,50,0.04);--psc-bd:rgba(220,50,50,0.1);--psc-num:rgba(200,40,40,0.8);
  --viz-bg:#fff;--viz-bd:rgba(0,0,0,0.08);
  --dvp-bg:#fff;--dvp-bd:rgba(0,0,0,0.08);
  --irw-bg:rgba(0,0,0,0.025);--ph-bd:rgba(0,0,0,0.05);
  --cts-a:#fff;--cts-b:#EEF1FF;
  --cog-l:#F6F7FB;--cog-r:rgba(15,46,232,0.04);
  --cog-lt:rgba(0,0,0,0.42);--cog-rt:#0F0F1A;--cog-x:rgba(200,50,50,0.7);
  --action-t:#8a6a00;--nl-r:rgba(0,0,0,0.3);
  --bc1:#fff;--bc2:#fff;--bc3:#fff;
  --bn-col:#0F0F1A;--bn-g1:none;--bn-g2:none;--bn-g3:none;
  --mi-bg:rgba(255,255,255,0.98);--mi-bd:rgba(0,0,0,0.08);--mi-sh:0 16px 60px rgba(0,0,0,0.12);
  --ml-h:rgba(0,0,0,0.03);--mlt4:#0F0F1A;--mltp:rgba(0,0,0,0.35);
  --mct:rgba(0,0,0,0.25);--mfl:rgba(0,0,0,0.4);--mdv:rgba(0,0,0,0.06);
  --bs-bg:rgba(0,0,0,0.06);--bs-bd:rgba(0,0,0,0.1);
  --peg-fade:#fff;--rs-bg:#F6F7FB;--fs-bg:#F0F2F8;
}
html.theme-anim,html.theme-anim *{transition:background-color .4s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease,text-shadow .35s ease !important}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 48px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:var(--nav-bg);border-bottom:1px solid var(--bd);box-shadow:var(--nav-sh);transition:padding .4s,background .4s}
.nl{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none!important;border:none!important;outline:none;line-height:0;font-size:0}

/* Nav logo — two variants for dark / light mode */
.nav-logo-dark{height:28px;width:auto;display:block;border:none!important;text-decoration:none!important;flex-shrink:0}
.nav-logo-light{height:28px;width:auto;display:none;border:none!important;text-decoration:none!important;flex-shrink:0}
html.light .nav-logo-dark{display:none}
html.light .nav-logo-light{display:block}
/* Nuclear underline kill for all nav anchors */
nav a, nav a:link, nav a:visited, nav a:hover{text-decoration:none!important;-webkit-text-decoration:none!important}

.nl .r{color:var(--nl-r);font-weight:400}
.nc{display:flex;gap:0;align-items:center}
.ni{position:relative;padding:10px 18px;font-size:.84rem;font-weight:500;color:var(--t2);cursor:pointer;transition:color .2s;letter-spacing:-0.01em;text-decoration:none}
.ni:hover{color:var(--text)}
.ni.hd::after{content:'';display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:3.5px solid currentColor;margin-left:5px;vertical-align:middle;opacity:.5;transition:transform .3s}
.ni.hd:hover::after{transform:rotate(180deg)}
.nr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nlog{color:var(--t2);text-decoration:none;font-size:.84rem;font-weight:500;padding:10px 18px;transition:color .2s}
.nlog:hover{color:var(--text)}
.ncta{background:var(--signal);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .3s}
.ncta:hover{background:#1a3df0;transform:translateY(-1px);box-shadow:0 4px 20px rgba(15,46,232,0.4)}

/* THEME TOGGLE */
.theme-tog{width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;overflow:hidden;flex-shrink:0}
.theme-tog:hover{background:var(--card-h);border-color:var(--bd3)}
.t-icon{position:absolute;transition:opacity .3s,transform .35s cubic-bezier(.23,1,.32,1);color:var(--t2)}
.t-moon{opacity:1;transform:rotate(0) scale(1)}
.t-sun{opacity:0;transform:rotate(90deg) scale(0.6)}
html.light .t-moon{opacity:0;transform:rotate(-90deg) scale(0.6)}
html.light .t-sun{opacity:1;transform:rotate(0) scale(1)}

/* HAMBURGER */
.nhb{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;z-index:1001;flex-shrink:0}
.nhb span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
.nhb.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nhb.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nhb.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav{position:fixed;inset:0;z-index:999;background:var(--mob-bg);backdrop-filter:blur(24px);display:flex;flex-direction:column;padding:88px 28px 48px;transform:translateX(100%);transition:transform .4s cubic-bezier(.23,1,.32,1);overflow-y:auto}
.mob-nav.open{transform:translateX(0)}
.mob-nav .mn-sect{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t5);margin:24px 0 8px}
.mob-nav a.mn-prod{padding-left:0}
.mn-icon{width:28px;height:28px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px;vertical-align:middle}
.mob-nav a{display:flex;align-items:center;font-size:1.2rem;font-weight:700;color:var(--t2);padding:13px 0;border-bottom:1px solid var(--bd2);letter-spacing:-0.02em;text-decoration:none;transition:color .2s}
.mob-nav a.mn-sub{font-size:.9rem;font-weight:500;color:var(--t3);padding:10px 0 10px 0}
.mob-cta{margin-top:28px;display:flex;flex-direction:column;gap:10px}

/* MEGA */
.mm{position:absolute;top:100%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:all .3s cubic-bezier(.23,1,.32,1);padding-top:10px}
.ni.hd:hover .mm{opacity:1;visibility:visible;pointer-events:all}
.mi{background:var(--mi-bg);backdrop-filter:blur(40px);border:1px solid var(--mi-bd);border-radius:14px;padding:28px 32px;box-shadow:var(--mi-sh)}
.mc3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;min-width:660px}
.mct{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--mct);margin-bottom:14px}
.ml{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:9px;transition:background .2s;cursor:pointer;text-decoration:none}
.ml:hover{background:var(--ml-h)}
.mli{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0}
.mlt h4{font-size:.8rem;font-weight:600;color:var(--mlt4);margin-bottom:1px}
.mlt p{font-size:.68rem;color:var(--mltp);line-height:1.35}
.mdv{width:100%;height:1px;background:var(--mdv);margin:12px 0}
.mfl{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:500;color:var(--mfl);padding:7px 10px;border-radius:7px;transition:all .2s;cursor:pointer}
.mfl:hover{color:var(--text);background:var(--card)}
.mfl svg{width:13px;height:13px}
.mi1{min-width:300px}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:110px 48px 60px;background:linear-gradient(110deg,var(--hero-l) 0%,var(--bg) 50%,var(--hero-r) 100%)}
.hg{position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:1000px;height:1000px;background:radial-gradient(ellipse at center,rgba(15,46,232,0.18) 0%,rgba(23,161,229,0.08) 30%,rgba(25,195,125,0.04) 50%,transparent 70%);pointer-events:none;animation:gp 8s ease-in-out infinite}
@keyframes gp{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:.7;transform:translateX(-50%) scale(1.1)}}
.hb{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 7px;border-radius:100px;background:rgba(25,195,125,0.1);border:1px solid rgba(25,195,125,0.2);font-size:.75rem;font-weight:500;color:var(--sync);margin-bottom:28px;animation:fu .8s ease both}
.hbd{width:7px;height:7px;border-radius:50%;background:var(--sync);animation:dp 2s ease-in-out infinite}
@keyframes dp{0%,100%{box-shadow:0 0 0 0 rgba(25,195,125,0.4)}50%{box-shadow:0 0 0 6px rgba(25,195,125,0)}}
.hero h1{font-size:clamp(2.8rem,6vw,5.2rem);font-weight:800;line-height:1.02;letter-spacing:-0.045em;max-width:900px;margin-bottom:14px;animation:fu .8s ease .1s both;color:var(--text)}
.gt{background:linear-gradient(135deg,var(--signal) 0%,var(--clarity) 40%,var(--sync) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hw{position:relative;display:inline-flex;justify-content:center;width:100%;height:1.45em;vertical-align:bottom;overflow:visible}
.hw span{position:absolute;white-space:nowrap;animation:wordCycle 16s ease-in-out infinite;opacity:0;padding-bottom:.2em;padding-right:.1em}
.hw span:nth-child(1){animation-delay:0s}.hw span:nth-child(2){animation-delay:4s}.hw span:nth-child(3){animation-delay:8s}.hw span:nth-child(4){animation-delay:12s}
@keyframes wordCycle{0%{opacity:0;transform:translateY(100%)}5%{opacity:1;transform:translateY(0)}22%{opacity:1;transform:translateY(0)}27%{opacity:0;transform:translateY(-100%)}100%{opacity:0}}
.hs{font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--t2);max-width:520px;line-height:1.65;font-weight:400;letter-spacing:-0.01em;margin-bottom:18px;animation:fu .8s ease .2s both}
.ha{display:flex;gap:12px;align-items:center;animation:fu .8s ease .3s both}
.bp{background:var(--signal);color:#fff;border:none;padding:13px 28px;border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px;letter-spacing:-0.01em}
.bp:hover{background:#1a3df0;transform:translateY(-2px);box-shadow:0 8px 30px rgba(15,46,232,0.4)}
.bs{background:var(--bs-bg);color:var(--text);border:1px solid var(--bs-bd);padding:13px 28px;border-radius:10px;font-size:.88rem;font-weight:500;cursor:pointer;transition:all .3s}
.bs:hover{background:var(--card-h);border-color:var(--bd3);transform:translateY(-2px)}
@keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.arr{width:15px;height:15px}

/* MARQUEE */
.hero-mq{width:100%;max-width:920px;overflow:hidden;position:relative;margin-top:36px;animation:fu 1s ease .4s both;border:1px solid var(--bd);border-radius:12px;padding:16px 0;background:var(--card);-webkit-mask-image:linear-gradient(90deg,transparent,black 80px,black calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent,black 80px,black calc(100% - 80px),transparent)}
.hero-mq-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--t5);margin-bottom:14px;text-align:center}
.hero-mq .mt{display:flex;gap:36px;animation:mq 50s linear infinite;white-space:nowrap;align-items:center}
@keyframes mq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.cl{flex-shrink:0;font-size:.8rem;font-weight:600;letter-spacing:-0.01em;color:var(--t2);transition:all .3s;cursor:default;padding:4px 0}
.cl:hover{color:var(--signal);text-shadow:0 0 20px rgba(15,46,232,0.4)}
.cdot{width:4px;height:4px;border-radius:50%;background:var(--bd);flex-shrink:0}

/* FACTORY */
.f2f{margin-top:48px;width:100%;max-width:1000px;animation:fu 1s ease .5s both;position:relative}
.f2f-track{position:relative;height:150px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.f2f-line{position:absolute;top:50%;left:60px;right:60px;height:2px;background:linear-gradient(90deg,rgba(239,22,177,0.35),rgba(255,210,18,0.35),rgba(139,150,238,0.35),rgba(25,195,125,0.35),rgba(23,161,229,0.35));transform:translateY(-50%)}
.f2f-glow{position:absolute;top:50%;left:60px;height:2px;width:60px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--sync),transparent);animation:scanLine 3.5s ease-in-out infinite;border-radius:2px;box-shadow:0 0 28px var(--sync),0 0 56px rgba(25,195,125,0.5)}
@keyframes scanLine{0%{left:60px;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:calc(100% - 120px);opacity:0}}
.f2f-node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.f2f-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--card);border:1px solid var(--bd3);transition:all .4s;backdrop-filter:blur(8px)}
.f2f-node:hover .f2f-icon{transform:translateY(-5px) scale(1.1);border-color:var(--bd);background:var(--card-h);box-shadow:0 8px 30px rgba(25,195,125,0.2)}
.f2f-label{font-size:.66rem;font-weight:600;color:var(--t3);letter-spacing:-0.01em}
.f2f-dots{position:absolute;top:50%;left:60px;right:60px;height:2px;transform:translateY(-50%);overflow:hidden}
.sd{position:absolute;width:4px;height:4px;border-radius:50%;top:-1px;background:var(--sync);opacity:0.7;animation:sdm 5s linear infinite}
.sd:nth-child(2){animation-delay:1s;background:var(--clarity)}.sd:nth-child(3){animation-delay:2s;background:var(--action)}.sd:nth-child(4){animation-delay:3s;background:var(--pulse)}.sd:nth-child(5){animation-delay:4s;background:var(--spectrum)}
@keyframes sdm{0%{left:-4px;opacity:0}3%{opacity:.8}97%{opacity:.8}100%{left:100%;opacity:0}}
.f2f-tag{position:absolute;top:50%;transform:translateY(-50%);animation:tagFloat 4s ease-in-out infinite}
.f2f-tag svg{width:26px;height:26px;filter:drop-shadow(0 0 8px rgba(25,195,125,0.4))}
@keyframes tagFloat{0%{left:8%;opacity:0;transform:translateY(-50%) rotate(-5deg)}10%{opacity:1}50%{transform:translateY(-50%) rotate(3deg)}90%{opacity:1}100%{left:88%;opacity:0;transform:translateY(-50%) rotate(-2deg)}}

/* UTILITIES */
.sl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--sync);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sl::before{content:'';width:18px;height:1px;background:var(--sync)}
.sd2{height:1px;background:linear-gradient(90deg,transparent,var(--bd3),transparent)}
.rv{opacity:0;transform:translateY(36px);transition:all .8s cubic-bezier(.23,1,.32,1)}
.rv.v{opacity:1;transform:translateY(0)}

/* RESULTS */
.rs{padding:56px 48px;position:relative;background:var(--rs-bg)}
.rs::before,.rs::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--bd3),transparent)}
.rs::before{top:0}.rs::after{bottom:0}
.rh{text-align:center;margin-bottom:40px}
.rh h2{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.04em;margin-bottom:10px;color:var(--text)}
.rh p{font-size:.95rem;color:var(--t4)}
.sg-wrap{max-width:1100px;margin:0 auto;position:relative;min-height:210px}
.stat-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:absolute;inset:0;transition:opacity .6s ease,transform .6s ease}
.stat-panel.hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.stat-panel.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.stc{text-align:center;padding:36px 18px;border-radius:14px;background:var(--card);transition:all .4s;position:relative;overflow:hidden}
.stc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.stc:hover{transform:translateY(-4px)}
.stc h3{font-size:clamp(2.8rem,4.5vw,3.8rem);font-weight:800;letter-spacing:-0.05em;line-height:1;margin-bottom:8px}
.stat-panel .stc:nth-child(1){border:1px solid rgba(15,46,232,0.22)}.stat-panel .stc:nth-child(1)::before{background:linear-gradient(90deg,transparent,rgba(15,46,232,0.5),transparent)}.stat-panel .stc:nth-child(1) h3{background:linear-gradient(135deg,#6680ff,var(--clarity));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-panel .stc:nth-child(1):hover{background:rgba(15,46,232,0.06);box-shadow:0 8px 32px rgba(15,46,232,0.15)}
.stat-panel .stc:nth-child(2){border:1px solid rgba(255,210,18,0.22)}.stat-panel .stc:nth-child(2)::before{background:linear-gradient(90deg,transparent,rgba(255,210,18,0.5),transparent)}.stat-panel .stc:nth-child(2) h3{background:linear-gradient(135deg,var(--action),#ffbc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-panel .stc:nth-child(2):hover{background:rgba(255,210,18,0.05);box-shadow:0 8px 32px rgba(255,210,18,0.12)}
.stat-panel .stc:nth-child(3){border:1px solid rgba(239,22,177,0.22)}.stat-panel .stc:nth-child(3)::before{background:linear-gradient(90deg,transparent,rgba(239,22,177,0.5),transparent)}.stat-panel .stc:nth-child(3) h3{background:linear-gradient(135deg,var(--pulse),#ff66cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-panel .stc:nth-child(3):hover{background:rgba(239,22,177,0.05);box-shadow:0 8px 32px rgba(239,22,177,0.12)}
.stat-panel .stc:nth-child(4){border:1px solid rgba(25,195,125,0.22)}.stat-panel .stc:nth-child(4)::before{background:linear-gradient(90deg,transparent,rgba(25,195,125,0.5),transparent)}.stat-panel .stc:nth-child(4) h3{background:linear-gradient(135deg,var(--sync),#0ea566);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-panel .stc:nth-child(4):hover{background:rgba(25,195,125,0.05);box-shadow:0 8px 32px rgba(25,195,125,0.12)}
.stc p{font-size:.78rem;color:var(--t3);font-weight:500;margin-top:6px}

/* PROBLEM */
.ps{padding:56px 48px;position:relative;background:var(--bg)}
.pw{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative}
/* Dotted horizontal connector — cause → effect */
.pw::before{content:'';position:absolute;top:50%;left:calc(50% - 30px);width:52px;height:0;border-top:1.5px dashed rgba(239,22,177,0.4);transform:translateY(-50%);pointer-events:none;animation:dashPulse 2.5s ease-in-out infinite;z-index:2}
.pw::after{content:'▶';position:absolute;top:50%;left:calc(50% + 20px);transform:translateY(-55%);color:rgba(239,22,177,0.55);font-size:.7rem;pointer-events:none;animation:dashPulse 2.5s ease-in-out infinite;z-index:2}
@keyframes dashPulse{0%,100%{opacity:.35}50%{opacity:1}}
/* Left card entry glow animation */
@keyframes pcGlowIn{0%{box-shadow:0 0 0 0 rgba(239,22,177,0);border-color:var(--bd)}40%{box-shadow:0 0 32px rgba(239,22,177,0.18);border-color:rgba(239,22,177,0.35)}100%{box-shadow:0 0 0 0 rgba(239,22,177,0);border-color:var(--bd)}}
.pc{padding:32px;border-radius:16px;border:1px solid var(--bd);transition:border-color .4s,box-shadow .4s;cursor:default}
.pc.v{animation:pcGlowIn 1.2s ease .4s both}
.pc:hover{border-color:rgba(239,22,177,0.25)!important;box-shadow:0 8px 48px rgba(239,22,177,0.1),0 2px 16px rgba(0,0,0,0.12)!important}
.pc h2{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin-bottom:20px;color:var(--text)}
.pc p{font-size:.95rem;color:var(--t2);line-height:1.7;margin-bottom:16px}
.pst{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.psc{padding:18px;border-radius:11px;background:var(--psc-bg);border:1px solid var(--psc-bd)}
.psc h4{font-size:1.4rem;font-weight:800;color:var(--psc-num);letter-spacing:-0.03em;margin-bottom:3px}
.psc p{font-size:.7rem;color:var(--t3);line-height:1.35;margin:0}
.viz{position:relative;border-radius:20px;overflow:hidden;background:var(--viz-bg);border:1px solid var(--viz-bd);padding:36px;transition:all .4s}
.viz:hover{box-shadow:0 12px 60px rgba(0,0,0,0.2)}
.viz::before{content:'';position:absolute;top:-1px;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(239,22,177,0.5),transparent)}
.viz-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t5);margin-bottom:28px;display:flex;align-items:center;gap:8px}
.viz-label::after{content:'';flex:1;height:1px;background:var(--bd2)}
.viz-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--bd2)}
.viz-row:last-child{border-bottom:none}
.viz-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.viz-copy{flex:1;min-width:0}
.viz-title{font-size:.82rem;font-weight:700;margin-bottom:3px;letter-spacing:-0.01em;color:var(--text)}
.viz-sub{font-size:.7rem;color:var(--t3);line-height:1.4}
.viz-impact{flex-shrink:0;text-align:right}
.viz-num{font-size:1.3rem;font-weight:800;letter-spacing:-0.04em;line-height:1}
.viz-unit{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);margin-top:2px}
.viz-bar-wrap{height:3px;background:var(--bd2);border-radius:2px;margin-top:6px;overflow:hidden;width:60px}
.viz-bar{height:100%;border-radius:2px}
.viz-row:nth-child(2) .viz-icon{background:rgba(239,22,177,0.1);color:var(--pulse)}.viz-row:nth-child(3) .viz-icon{background:rgba(255,160,60,0.1);color:#ffa040}.viz-row:nth-child(4) .viz-icon{background:rgba(239,22,177,0.08);color:var(--pulse)}.viz-row:nth-child(5) .viz-icon{background:rgba(255,160,60,0.08);color:#ffa040}
.viz-row:nth-child(2) .viz-num{color:var(--pulse)}.viz-row:nth-child(3) .viz-num{color:#ffa040}.viz-row:nth-child(4) .viz-num{color:var(--pulse)}.viz-row:nth-child(5) .viz-num{color:#ffa040}
.viz-row:nth-child(2) .viz-bar{background:rgba(239,22,177,0.6);width:92%}.viz-row:nth-child(3) .viz-bar{background:rgba(255,160,60,0.6);width:73%}.viz-row:nth-child(4) .viz-bar{background:rgba(239,22,177,0.5);width:55%}.viz-row:nth-child(5) .viz-bar{background:rgba(255,160,60,0.5);width:80%}
.viz-footer{margin-top:22px;padding-top:18px;border-top:1px solid var(--bd2);display:flex;align-items:center;justify-content:space-between}
.viz-footer span{font-size:.65rem;color:var(--t5)}
.viz-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:rgba(239,22,177,0.1);border:1px solid rgba(239,22,177,0.2);font-size:.62rem;font-weight:600;color:rgba(239,22,177,0.9)}
.viz-dot{width:5px;height:5px;border-radius:50%;background:var(--pulse);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* BFF — Blur / Focus / Flow */
.fs{padding:56px 48px;background:var(--fs-bg)}
.fh{max-width:1200px;margin:0 auto 36px;text-align:center}
.fh h2{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-0.04em;margin-bottom:14px;color:var(--text)}
.fh p{font-size:1rem;color:var(--t4);max-width:540px;margin:0 auto}
.bg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:1200px;margin:0 auto;overflow:visible}
.bc{padding:52px 40px;position:relative;transition:all .5s cubic-bezier(.23,1,.32,1);overflow:hidden}
/* Blur = Green (sync) */
.bc:nth-child(1){background:var(--bc1);border-radius:18px 0 0 18px;border:1px solid rgba(25,195,125,0.12)}
.bc:nth-child(1)::before{background:linear-gradient(135deg,rgba(25,195,125,0.09),transparent)}
.bc:nth-child(1)::after{background:linear-gradient(90deg,rgba(25,195,125,0.7),rgba(25,195,125,0.2),transparent)}
.bc:nth-child(1):hover{transform:translateY(-6px);box-shadow:0 16px 60px rgba(0,0,0,0.2),0 0 0 1px rgba(25,195,125,0.2)}
.bc:nth-child(1) .bn{text-shadow:var(--bn-g1)}
/* Focus = Blue (signal) */
.bc:nth-child(2){background:var(--bc2);border:1px solid rgba(15,46,232,0.12)}
.bc:nth-child(2)::before{background:linear-gradient(135deg,rgba(15,46,232,0.09),transparent)}
.bc:nth-child(2)::after{background:linear-gradient(90deg,rgba(15,46,232,0.7),rgba(15,46,232,0.2),transparent)}
.bc:nth-child(2):hover{transform:translateY(-6px);box-shadow:0 16px 60px rgba(0,0,0,0.2),0 0 0 1px rgba(15,46,232,0.28)}
.bc:nth-child(2) .bn{text-shadow:var(--bn-g2)}
/* Flow = Pink (pulse) */
.bc:nth-child(3){background:var(--bc3);border-radius:0 18px 18px 0;border:1px solid rgba(239,22,177,0.12)}
.bc:nth-child(3)::before{background:linear-gradient(135deg,rgba(239,22,177,0.09),transparent)}
.bc:nth-child(3)::after{background:linear-gradient(90deg,rgba(239,22,177,0.7),rgba(239,22,177,0.2),transparent)}
.bc:nth-child(3):hover{transform:translateY(-6px);box-shadow:0 16px 60px rgba(0,0,0,0.2),0 0 0 1px rgba(239,22,177,0.28)}
.bc:nth-child(3) .bn{text-shadow:var(--bn-g3)}
.bc::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.bc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.bc:hover::before{opacity:1}
.bn{font-size:4.5rem;font-weight:900;line-height:1;letter-spacing:-0.04em;margin-bottom:20px;color:var(--bn-col)}
.bc h3{font-size:1.6rem;font-weight:700;margin-bottom:14px;letter-spacing:-0.03em;color:var(--text)}
.bc p{font-size:.9rem;color:var(--t3);line-height:1.7;max-width:280px}
/* Light mode number colors */
html.light .bc:nth-child(1) .bn{color:rgba(25,195,125,0.65)}
html.light .bc:nth-child(2) .bn{color:rgba(15,46,232,0.55)}
html.light .bc:nth-child(3) .bn{color:rgba(239,22,177,0.6)}

/* VIDEO */
.vs{padding:56px 48px;background:var(--bg)}
.vw{max-width:960px;margin:0 auto;position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--card);border:1px solid var(--bd);cursor:pointer;transition:all .4s}
.vw:hover{border-color:var(--bd3);transform:scale(1.003)}
.vw::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--signal),transparent)}
.vi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vbp{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(15,46,232,0.08) 0%,transparent 60%);pointer-events:none}
.vpl{width:72px;height:72px;border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:all .3s;animation:pp 3s ease-in-out infinite}
@keyframes pp{0%,100%{box-shadow:0 0 0 0 rgba(15,46,232,0.3)}50%{box-shadow:0 0 0 18px rgba(15,46,232,0)}}
.vpl svg{margin-left:3px}
.vw:hover .vpl{transform:scale(1.06);background:#1a3df0}
.vlb{font-size:.82rem;font-weight:600;color:var(--t2)}
.vlb2{font-size:.72rem;color:var(--t4);margin-top:4px}
.vh{text-align:center;margin-bottom:28px}
.vh h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-0.04em;color:var(--text)}

/* PRODUCTS */
.pds{padding:56px 48px;background:var(--bg2)}
.pdh{max-width:1200px;margin:0 auto 48px;text-align:center}
.pdh h2{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin-bottom:16px;color:var(--text)}
.pdh p{font-size:1rem;color:var(--t3);max-width:520px;margin:0 auto;line-height:1.6}
.pdg{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;position:relative;overflow:visible;padding-bottom:6px}
.pdg::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--bd3),var(--bd),var(--bd3),transparent);z-index:1}
.pdc{padding:44px 32px;position:relative;overflow:hidden;transition:all .5s cubic-bezier(.23,1,.32,1);background:var(--card);border:1px solid transparent}
.pdc:first-child{border-radius:18px 0 0 18px}.pdc:last-child{border-radius:0 18px 18px 0}

.pdc:nth-child(1):hover{background:rgba(255,210,18,0.04);box-shadow:0 0 0 1px rgba(255,210,18,0.22) inset,0 8px 40px rgba(255,210,18,0.08);border-color:rgba(255,210,18,0.22)}
.pdc:nth-child(2):hover{background:rgba(239,22,177,0.04);box-shadow:0 0 0 1px rgba(239,22,177,0.22) inset,0 8px 40px rgba(239,22,177,0.08);border-color:rgba(239,22,177,0.22)}
.pdc:nth-child(3):hover{background:rgba(23,161,229,0.04);box-shadow:0 0 0 1px rgba(23,161,229,0.22) inset,0 8px 40px rgba(23,161,229,0.08);border-color:rgba(23,161,229,0.22)}
.pcb{width:100%;height:2px;border-radius:0;margin-bottom:24px}
.pdc:nth-child(1) .pcb{background:linear-gradient(90deg,var(--action),rgba(255,210,18,0.3))}.pdc:nth-child(2) .pcb{background:linear-gradient(90deg,var(--pulse),rgba(239,22,177,0.3))}.pdc:nth-child(3) .pcb{background:linear-gradient(90deg,var(--clarity),rgba(23,161,229,0.3))}
.pdc h3{font-size:1.3rem;font-weight:700;margin-bottom:6px;letter-spacing:-0.03em;color:var(--text)}
.ptg{font-size:.9rem;font-weight:600;margin-bottom:20px;line-height:1.4}
.pdc:nth-child(1) .ptg{color:var(--action-t)}.pdc:nth-child(2) .ptg{color:var(--pulse)}.pdc:nth-child(3) .ptg{color:var(--clarity)}
.pdc>p{font-size:.85rem;color:var(--t3);line-height:1.7;margin-bottom:20px}
.pf{display:flex;flex-direction:column;gap:8px}
.pfi{display:flex;align-items:center;gap:9px;font-size:.75rem;color:var(--t2);font-weight:500}
.pfd{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.pdc:nth-child(1) .pfd{background:var(--action-t)}.pdc:nth-child(2) .pfd{background:var(--pulse)}.pdc:nth-child(3) .pfd{background:var(--clarity)}
.pdl{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}
.pdc:nth-child(1) .pdl{color:var(--action-t)}.pdc:nth-child(2) .pdl{color:var(--pulse)}.pdc:nth-child(3) .pdl{color:var(--clarity)}
.pdl:hover{gap:10px}

/* LIVE DATA */
.dvs{padding:56px 48px;background:var(--bg)}
.dvw{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.dvc h2{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin-bottom:20px;color:var(--text)}
.dvc p{font-size:.95rem;color:var(--t3);line-height:1.7;margin-bottom:28px}
.dvp{background:var(--dvp-bg);border:1px solid var(--dvp-bd);border-radius:18px;padding:28px;position:relative;overflow:hidden;transition:all .4s}
.dvp::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--signal),transparent)}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--bd2)}
.ph h4{font-size:.8rem;font-weight:600;color:var(--text)}
.plv{display:flex;align-items:center;gap:5px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sync)}
.pld{width:5px;height:5px;border-radius:50%;background:var(--sync);animation:dp 2s ease-in-out infinite}
.ir{display:flex;flex-direction:column;gap:10px}
.irw{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--irw-bg);border-radius:9px;transition:all .3s;border:1px solid transparent}
.irw:hover{background:var(--card-h);border-color:var(--bd2)}
.irw:first-child{background:rgba(15,46,232,0.06);border-color:rgba(15,46,232,0.1)}
.iic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;flex-shrink:0}
.iif{flex:1;min-width:0}
.iin{font-size:.75rem;font-weight:600;margin-bottom:1px;color:var(--text)}
.iis{font-size:.62rem;color:var(--t5)}
.ibw{width:80px;height:4px;background:var(--bd);border-radius:2px;overflow:hidden;flex-shrink:0}
.ib{height:100%;border-radius:2px;transition:width 1.5s ease;animation:barPulse 4s ease-in-out infinite}
@keyframes barPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
.ic{font-size:.72rem;font-weight:700;width:44px;text-align:right}
.ist{font-size:.56rem;font-weight:600;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.isy{background:rgba(25,195,125,0.15);color:var(--sync)}.isc{background:rgba(23,161,229,0.15);color:var(--clarity)}.isa{background:rgba(255,210,18,0.15);color:var(--action)}
html.light .isy{color:#0a9a5c}.html.light .isc{color:#0a7ab8}.html.light .isa{color:#8a6a00}

/* PERSONAS */
.pes{padding:56px 48px;overflow:hidden;background:var(--bg)}
.peh{max-width:1200px;margin:0 auto 40px}
.peh h2{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-0.04em;margin-bottom:14px;color:var(--text)}
.peh p{font-size:.95rem;color:var(--t4);max-width:520px}
.peg-wrap{position:relative;max-width:1200px;margin:0 auto}
.peg-wrap::before{content:'';position:absolute;top:0;bottom:24px;left:0;width:120px;background:linear-gradient(90deg,var(--peg-fade) 30%,transparent);pointer-events:none;z-index:2;opacity:0;transition:opacity .3s}
.peg-wrap.scrolled::before{opacity:1}
.peg-wrap::after{content:'';position:absolute;top:0;bottom:24px;right:0;width:140px;background:linear-gradient(270deg,var(--peg-fade) 30%,transparent);pointer-events:none;z-index:2}
.peg-arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:opacity .3s}
.peg-arrow.peg-next{right:8px;animation:arrowBob 2s ease-in-out infinite}
.peg-arrow.peg-prev{left:8px;animation:arrowBobLeft 2s ease-in-out infinite;opacity:0;pointer-events:none}
.peg-arrow svg{width:40px;height:40px;background:rgba(25,195,125,0.1);border:1px solid rgba(25,195,125,0.25);border-radius:50%;padding:10px;color:var(--sync)}
@keyframes arrowBob{0%,100%{transform:translateY(-60%) translateX(0)}50%{transform:translateY(-60%) translateX(5px)}}
@keyframes arrowBobLeft{0%,100%{transform:translateY(-60%) translateX(0)}50%{transform:translateY(-60%) translateX(-5px)}}
.peg{overflow:hidden;padding:8px 0 28px;position:relative}
.peg::-webkit-scrollbar{display:none}
.peg:active{cursor:grabbing}
/* Wider, taller, more rectangular cards — 1.5 visible in 830px wrap */
.pec{min-width:720px;max-width:720px;flex-shrink:0;margin-right:20px;border-radius:16px;padding:52px 48px;text-align:left;background:var(--card);border:1px solid var(--bd);transition:all .4s cubic-bezier(.23,1,.32,1);display:flex;flex-direction:column}
.peg-inner{display:flex;will-change:transform;}
.pec:hover{background:var(--card-h);transform:translateY(-5px);box-shadow:0 12px 50px rgba(0,0,0,0.3),0 0 0 1px rgba(25,195,125,0.15)}
html.light .pec:hover{background:#fff;box-shadow:0 8px 40px rgba(0,0,0,0.08),0 0 0 1px rgba(25,195,125,0.2);transform:translateY(-5px)}
.pee{width:44px;height:44px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;color:var(--sync);background:rgba(25,195,125,0.08);border-radius:12px;border:1px solid rgba(25,195,125,0.15)}
.pec h4{font-size:1.35rem;font-weight:800;margin-bottom:8px;letter-spacing:-0.03em;color:var(--text);line-height:1.2}
.pe-role{font-size:.88rem;font-weight:600;color:var(--sync);margin-bottom:16px;line-height:1.35}
.pe-desc{font-size:.82rem;color:var(--t3);line-height:1.65;margin-bottom:20px;flex:1}
.peq{font-size:.78rem;color:var(--t4);font-style:italic;line-height:1.5;padding-top:16px;border-top:1px solid var(--bd2);width:100%}

/* COMPETITION */
.cos{padding:56px 48px;background:var(--bg2)}
.cow{max-width:1000px;margin:0 auto;text-align:center}
.cow h2{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:-0.04em;margin-bottom:14px;color:var(--text)}
.cow>p{font-size:.95rem;color:var(--t3);margin-bottom:40px;max-width:560px;margin-left:auto;margin-right:auto}
.cog{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:18px;overflow:hidden;text-align:left}
.cot{padding:40px 32px;background:var(--cog-l);border-right:1px solid var(--bd2)}
/* Right side — bigger, pulse animation */
.cou{padding:48px 40px;background:var(--cog-r);transition:all .35s;position:relative;animation:rightCardPulse 5s ease-in-out infinite}
@keyframes rightCardPulse{0%,100%{box-shadow:inset 0 0 40px rgba(25,195,125,0.02),0 0 0 rgba(25,195,125,0)}50%{box-shadow:inset 0 0 80px rgba(25,195,125,0.07),0 0 30px rgba(25,195,125,0.08)}}
.cou:hover{background:rgba(15,46,232,0.14);animation:none;box-shadow:inset 0 0 80px rgba(25,195,125,0.1),0 0 60px rgba(25,195,125,0.2)}
.col2{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:22px;display:flex;align-items:center;gap:7px}
.cot .col2{color:var(--t4)}.cou .col2{color:var(--sync);font-size:.7rem}
.coi{display:flex;flex-direction:column;gap:12px}
.coii{font-size:.85rem;display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.cot .coii{color:var(--cog-lt)}.cou .coii{color:var(--cog-rt);font-size:.92rem}
.cox{color:var(--cog-x);font-weight:700;flex-shrink:0}.coc{color:var(--sync);font-weight:700;flex-shrink:0}

/* CTA */
.cts{padding:80px 48px;text-align:center;position:relative;background:linear-gradient(180deg,var(--cts-a) 0%,var(--cts-b) 50%,var(--cts-a) 100%)}
.ctg{position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:900px;height:700px;background:radial-gradient(ellipse at center,rgba(15,46,232,0.12) 0%,rgba(25,195,125,0.06) 40%,transparent 70%);pointer-events:none;animation:ctaPulse 6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
.cts h2{font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:800;letter-spacing:-0.04em;line-height:1.05;margin-bottom:18px;position:relative;color:var(--text)}
.cts>p{font-size:1rem;color:var(--t3);margin-bottom:40px;position:relative;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.65}
.cta2{position:relative;display:flex;gap:12px;justify-content:center}
.cta2 .bp:hover{box-shadow:0 12px 40px rgba(15,46,232,0.5)}

/* FOOTER */
footer{padding:64px 48px 36px;border-top:1px solid var(--bd);background:var(--bg2)}
.fg{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.fb p{font-size:.82rem;color:var(--t3);line-height:1.6;margin-top:14px;max-width:260px}
.fc h4{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--t5);margin-bottom:16px}
.fc a{display:block;color:var(--t2);text-decoration:none;font-size:.8rem;margin-bottom:10px;transition:color .2s}
.fc a:hover{color:var(--text)}
.fbot{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid var(--bd);font-size:.75rem;color:var(--t4)}
.fbot a{color:var(--t4);text-decoration:none;font-size:.75rem}
.fbot a:hover{color:var(--text)}

/* GRID BG */
.gbg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid-c) 1px,transparent 1px),linear-gradient(90deg,var(--grid-c) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 30%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,black 20%,transparent 70%)}

/* ====== RESPONSIVE ====== */
@media(max-width:1024px){
  nav{padding:12px 28px}
  .hero{padding:90px 28px 48px}
  .rs,.ps,.fs,.vs,.pds,.dvs,.pes,.cos,.cts{padding:48px 28px}
  footer{padding:48px 28px 28px}
  .sg-wrap{min-height:auto}.stat-panel{position:relative;inset:auto;grid-template-columns:repeat(2,1fr)}.stat-panel.hidden{display:none}
  .pw{gap:44px}
  .dvw{grid-template-columns:1fr;gap:40px}
  .pdg{grid-template-columns:1fr}.pdc{border-radius:0}.pdc:first-child{border-radius:18px 18px 0 0}.pdc:last-child{border-radius:0 0 18px 18px}
  .peg-wrap{max-width:100%}
  .pec{min-width:600px;max-width:600px;padding:44px 36px}
  .fg{grid-template-columns:1fr 1fr;gap:28px}.fb{grid-column:1/-1}
  .cog{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nc,.nr{display:none}.nhb{display:flex}
  nav{padding:12px 20px}
  .hero{padding:80px 20px 36px;min-height:auto}
  .hs{max-width:100%}
  .ha{flex-direction:column;width:100%;max-width:340px}
  .bp,.bs{width:100%;justify-content:center}
  .f2f{overflow-x:auto;padding-bottom:12px;margin-left:-20px;margin-right:-20px;width:calc(100% + 40px)}.f2f-track{min-width:520px;padding:0 20px}
  .rs,.ps,.fs,.vs,.pds,.dvs,.pes,.cos,.cts{padding:40px 20px}
  footer{padding:40px 20px 24px}
  .sg-wrap{min-height:auto}.stat-panel{position:relative;inset:auto;grid-template-columns:repeat(2,1fr);gap:12px}.stat-panel.hidden{display:none}
  .pw{grid-template-columns:1fr;gap:32px}.pw::before,.pw::after{display:none}
  .bg{grid-template-columns:1fr}.bc:nth-child(1){border-radius:18px 18px 0 0}.bc:nth-child(2){border-radius:0}.bc:nth-child(3){border-radius:0 0 18px 18px}
  .pdg{grid-template-columns:1fr}.pdc{border-radius:0}.pdc:first-child{border-radius:18px 18px 0 0}.pdc:last-child{border-radius:0 0 18px 18px}
  .dvw{grid-template-columns:1fr;gap:28px}
  .peg-wrap{max-width:100%}
  .pec{min-width:82vw;max-width:82vw;padding:36px 28px}
  .cog{grid-template-columns:1fr}.cot{border-right:none;border-bottom:1px solid var(--bd2)}
  .cta2{flex-direction:column;align-items:center}.cta2 .bp,.cta2 .bs{width:100%;max-width:320px;justify-content:center}
  .fg{grid-template-columns:1fr;gap:24px}.fb{grid-column:auto}
  .fbot{flex-direction:column;gap:10px;text-align:center}.fbot div{justify-content:center}
}
@media(max-width:480px){
  .stat-panel{grid-template-columns:1fr}.pst{grid-template-columns:1fr}
  .bc{padding:36px 24px}.bn{font-size:3.5rem}
  .pec{min-width:78vw;max-width:78vw;padding:28px 22px}
  .viz{padding:24px 18px}
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BANNER
   Controlled via: theme-config.php → announcement
   OR: WP Admin > Appearance > Customize > Announcement Banner
   ═══════════════════════════════════════════════════════════════════ */

.crfid-banner {
    width: 100%;
    padding: 9px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1001;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    animation: bannerSlideIn .4s cubic-bezier(.23,1,.32,1) both;
    transition: background .4s;
}

@keyframes bannerSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.crfid-banner__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    position: relative;
}

.crfid-banner__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dp 2s ease-in-out infinite;
}

.crfid-banner__text {
    margin: 0;
    font-size: inherit;
    line-height: 1.4;
}

.crfid-banner__link {
    font-weight: 700;
    margin-left: 8px;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .85;
    transition: opacity .2s;
}
.crfid-banner__link:hover { opacity: 1; }

.crfid-banner__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    opacity: .5;
    transition: opacity .2s;
    padding: 10px 14px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crfid-banner__close:hover { opacity: 1; }

/* Color variants */
.crfid-banner--sync   { background: rgba(25,195,125,0.12);  color: var(--sync);    border-color: rgba(25,195,125,0.2); }
.crfid-banner--sync   .crfid-banner__dot { background: var(--sync); box-shadow: 0 0 6px rgba(25,195,125,0.5); }
.crfid-banner--sync   .crfid-banner__link { color: var(--sync); }
.crfid-banner--sync   .crfid-banner__close { color: var(--sync); }

.crfid-banner--signal { background: rgba(15,46,232,0.12);   color: var(--clarity); border-color: rgba(15,46,232,0.2); }
.crfid-banner--signal .crfid-banner__dot { background: var(--clarity); box-shadow: 0 0 6px rgba(23,161,229,0.5); }
.crfid-banner--signal .crfid-banner__link { color: var(--clarity); }
.crfid-banner--signal .crfid-banner__close { color: var(--clarity); }

.crfid-banner--action { background: rgba(255,210,18,0.1);   color: var(--action-t);border-color: rgba(255,210,18,0.25); }
.crfid-banner--action .crfid-banner__dot { background: var(--action); box-shadow: 0 0 6px rgba(255,210,18,0.5); }
.crfid-banner--action .crfid-banner__link { color: var(--action-t); }
.crfid-banner--action .crfid-banner__close { color: var(--action-t); }

.crfid-banner--pulse  { background: rgba(239,22,177,0.1);   color: var(--pulse);   border-color: rgba(239,22,177,0.2); }
.crfid-banner--pulse  .crfid-banner__dot { background: var(--pulse); box-shadow: 0 0 6px rgba(239,22,177,0.5); }
.crfid-banner--pulse  .crfid-banner__link { color: var(--pulse); }
.crfid-banner--pulse  .crfid-banner__close { color: var(--pulse); }

.crfid-banner--clarity{ background: rgba(23,161,229,0.1);   color: var(--clarity); border-color: rgba(23,161,229,0.2); }
.crfid-banner--clarity .crfid-banner__dot { background: var(--clarity); box-shadow: 0 0 6px rgba(23,161,229,0.5); }
.crfid-banner--clarity .crfid-banner__link { color: var(--clarity); }
.crfid-banner--clarity .crfid-banner__close { color: var(--clarity); }

/* Light mode banner adjustments */
html.light .crfid-banner--sync   { background: rgba(25,195,125,0.08);  color: #0a7a50; }
html.light .crfid-banner--action { color: #8a6a00; }

/* When banner is visible, offset the fixed nav */
body.has-banner nav { top: var(--banner-h, 38px); }

/* Push hero down by banner height so content is never hidden behind nav+banner */
body.has-banner .hero { padding-top: calc(110px + var(--banner-h, 38px)); }
@media(max-width:1024px){ body.has-banner .hero { padding-top: calc(90px + var(--banner-h, 38px)); } }
@media(max-width:768px) { body.has-banner .hero { padding-top: calc(72px + var(--banner-h, 0px)); } }

@media(max-width:768px) {
    .crfid-banner { padding: 8px 20px 8px 16px; }
    .crfid-banner__inner { justify-content: flex-start; gap: 8px; }
    .crfid-banner__text { font-size: .72rem; }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════════ */
.contact-hero{padding:140px 48px 72px;text-align:center;position:relative;background:linear-gradient(110deg,var(--hero-l) 0%,var(--bg) 50%,var(--hero-r) 100%)}
.contact-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-0.045em;line-height:1.05;margin-bottom:16px;color:var(--text)}
.contact-hero p{font-size:1rem;color:var(--t2);max-width:480px;margin:0 auto;line-height:1.65}
.contact-divider{height:1px;background:linear-gradient(90deg,transparent,var(--bd3),transparent)}
.contact-body{max-width:1200px;margin:0 auto;padding:64px 48px 80px;display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:start}
.cf{display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{display:flex;flex-direction:column;gap:7px}
.cf-field label{font-size:.7rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.09em}
.cf-field input,.cf-field select,.cf-field textarea{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px 16px;font-size:.86rem;color:var(--text);font-family:inherit;transition:border-color .2s,background .2s,box-shadow .2s;outline:none;width:100%;-webkit-appearance:none;appearance:none}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--t5)}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--signal);background:var(--card-h);box-shadow:0 0 0 3px rgba(15,46,232,0.12)}
.cf-field textarea{resize:vertical;min-height:120px;line-height:1.6}
.cf-field select{cursor:pointer;padding-right:36px}
.cf-field select option{background:var(--bg2);color:var(--text)}
html.light .cf-field select option{background:#fff}
.cf-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:14px 16px;border-radius:10px;border:1px solid var(--bd);background:var(--card);transition:all .2s}
.cf-check:hover{border-color:var(--signal);background:var(--card-h)}
.cf-check input[type=checkbox]{width:17px;height:17px;min-width:17px;cursor:pointer;margin-top:2px;accent-color:var(--signal)}
.cf-check span{font-size:.82rem;color:var(--t2);line-height:1.5}
.cf-check strong{color:var(--text);font-weight:600}
.req{color:var(--pulse);margin-left:2px}
.cf-submit{background:var(--signal);color:#fff;border:none;padding:14px 32px;border-radius:10px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:9px;letter-spacing:-0.01em;margin-top:6px;align-self:flex-start}
.cf-submit:hover{background:#1a3df0;transform:translateY(-2px);box-shadow:0 8px 30px rgba(15,46,232,0.4)}
.cf-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cf-note{font-size:.67rem;color:var(--t5);line-height:1.55;margin-top:2px}
.cf-error{display:none;padding:12px 16px;background:rgba(239,22,177,0.08);border:1px solid rgba(239,22,177,0.2);border-radius:9px;font-size:.8rem;color:var(--pulse);margin-top:4px}
.cf-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:64px 40px;border-radius:16px;background:var(--card);border:1px solid rgba(25,195,125,0.2)}
.cf-success-icon{width:52px;height:52px;color:var(--sync);margin-bottom:22px}
.cf-success h3{font-size:1.5rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:12px;color:var(--text)}
.cf-success p{font-size:.9rem;color:var(--t3);line-height:1.65;max-width:340px}
.ci{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
.ci-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:28px;transition:all .35s}
.ci-card:hover{background:var(--card-h);border-color:var(--bd3);transform:translateY(-3px)}
.ci-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ci-card h3{font-size:.92rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px;color:var(--text)}
.ci-card p{font-size:.78rem;color:var(--t3);line-height:1.6;margin:0}
.ci-card a{font-size:.78rem;font-weight:600;text-decoration:none;transition:opacity .2s;display:inline-block;margin-top:8px}
.ci-card a:hover{opacity:.75}
.ci-book{background:rgba(15,46,232,0.06);border-color:rgba(15,46,232,0.15)}
.ci-book:hover{background:rgba(15,46,232,0.09);border-color:rgba(15,46,232,0.25)}
.ci-book .ci-icon{background:rgba(15,46,232,0.12);color:var(--clarity)}
.ci-book a{color:var(--clarity)}
.ci-stat{display:flex;align-items:baseline;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--bd2)}
.ci-stat-num{font-size:1.8rem;font-weight:800;letter-spacing:-0.04em;color:var(--sync);line-height:1}
.ci-stat-label{font-size:.72rem;color:var(--t3);line-height:1.35}
.ci-social{display:flex;gap:10px;margin-top:10px}
.ci-soc-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;background:var(--card-h);border:1px solid var(--bd);font-size:.74rem;font-weight:600;color:var(--t2);text-decoration:none;transition:all .2s}
.ci-soc-btn:hover{color:var(--text);border-color:var(--bd3)}
.ci-soc-btn svg{width:13px;height:13px;flex-shrink:0}
@media(max-width:1024px){.contact-body{grid-template-columns:1fr;gap:48px;padding:48px 28px 64px}.ci{position:static}}
@media(max-width:768px){.contact-hero{padding:110px 20px 48px}.contact-body{padding:40px 20px 56px}.cf-row{grid-template-columns:1fr}.cf-submit{width:100%;justify-content:center}}