/* ============================================================
   Cyber Design — Shared Design System (UI/UX Pro Max driven)
   Modern Dark Cinema + Aurora · used across all pages
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  /* new tokens */
  --bg-deep:#050506;--bg-base:#08090C;--bg-elev:#0C0E14;
  --surface:rgba(255,255,255,.035);--surface2:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  --p:#FF2D3F;--p2:#DA1F2C;--ph:#FF3344;--p-soft:rgba(255,45,63,.14);--p-glow:rgba(255,45,63,.45);
  --g:#00E08C;--g2:#19FFA3;--vi:#7C5CFF;--cy:#22D3EE;
  --tx:#F4F6FC;--mu:#9AA4C0;--mu2:#5A6585;
  --rad:16px;--rad-lg:22px;--rad-xl:30px;
  --ease:cubic-bezier(0.16,1,0.3,1);--ease-out:cubic-bezier(0.22,1,0.36,1);
  --maxw:1220px;
  /* legacy aliases (so original inline styles render premium) */
  --bg:#050506;--bg1:#0C0E14;--bg2:#14161F;
}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bg-deep);color:var(--tx);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;outline:none;background:none}
::selection{background:var(--p);color:#fff}
.mono{font-family:"JetBrains Mono",monospace}

/* ---------- BACKGROUND ---------- */
.bg-fx{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,#0E0A12 0%,var(--bg-deep) 55%)}
.aurora{position:absolute;inset:-20%;filter:blur(70px);opacity:.7;mix-blend-mode:screen}
.aurora b{position:absolute;border-radius:50%;display:block}
.aurora .b1{width:42vw;height:42vw;left:-6vw;top:-8vw;background:radial-gradient(circle,var(--p),transparent 62%);animation:drift1 20s var(--ease) infinite}
.aurora .b2{width:38vw;height:38vw;right:-8vw;top:4vw;background:radial-gradient(circle,var(--vi),transparent 62%);opacity:.55;animation:drift2 26s var(--ease) infinite}
.aurora .b3{width:40vw;height:40vw;left:24vw;bottom:-18vw;background:radial-gradient(circle,var(--g),transparent 60%);opacity:.4;animation:drift3 30s var(--ease) infinite}
.aurora .b4{width:26vw;height:26vw;right:18vw;bottom:-6vw;background:radial-gradient(circle,var(--cy),transparent 60%);opacity:.35;animation:drift1 24s var(--ease) infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vw) scale(1.18)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vw) scale(1.12)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-6vw) scale(1.2)}}
.grid-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 25%,transparent 78%)}
.noise-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.spotlight{position:fixed;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,45,63,.10),transparent 65%);pointer-events:none;z-index:0;transform:translate(-50%,-50%);transition:opacity .4s;opacity:0}
.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--p),var(--g));z-index:200;transition:width .1s linear}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:120;padding:0 5vw;transition:.4s var(--ease)}
nav.scrolled{background:rgba(5,5,6,.7);backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--bd)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:78px;transition:.4s var(--ease)}
nav.scrolled .nav-inner{height:64px}
.nav-logo img{height:40px;width:auto;filter:brightness(1.12) drop-shadow(0 0 1px rgba(255,255,255,.06));transition:.3s var(--ease)}
.nav-logo:hover img{transform:scale(1.05)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{position:relative;padding:9px 15px;font-size:14.5px;font-weight:500;color:var(--mu);border-radius:10px;transition:.25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--p);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:.3s var(--ease)}
.nav-links a:hover{color:var(--tx)}.nav-links a.cur{color:var(--tx)}
.nav-links a:hover::after,.nav-links a.cur::after{transform:scaleX(1)}
.nav-cta{margin-left:10px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff!important;padding:11px 22px!important;border-radius:12px!important;font-weight:600!important;box-shadow:0 10px 26px -10px var(--p-glow);transition:.3s var(--ease)!important}
.nav-cta::after{display:none}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--p-glow)}
.ham{display:none;flex-direction:column;gap:5px;padding:8px}
.ham span{display:block;width:24px;height:2px;background:var(--tx);border-radius:2px;transition:.3s var(--ease)}
.ham.act span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.act span:nth-child(2){opacity:0}
.ham.act span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{display:none;position:fixed;inset:0;background:rgba(5,5,6,.97);backdrop-filter:blur(22px);z-index:119;padding:104px 8vw 40px;flex-direction:column;gap:4px}
.mob-menu.open{display:flex;animation:fade .35s var(--ease)}
.mob-menu a{padding:18px 14px;font-family:"Syne",sans-serif;font-size:24px;font-weight:700;color:var(--mu);border-bottom:1px solid var(--bd);transition:.25s var(--ease)}
.mob-menu a:hover,.mob-menu a.cur{color:var(--tx);padding-left:26px}
.mob-cta{margin-top:20px;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff!important;text-align:center;border-radius:14px;border:none!important}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 5vw}
section{padding:110px 0;position:relative}
.pt-hero{padding-top:150px;padding-bottom:60px}
.divider{height:1px;background:var(--bd)}

/* eyebrow / title / sub  (new + legacy) */
.eyebrow,.sec-label{display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--p);margin-bottom:20px}
.eyebrow::before,.sec-label::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--p),transparent)}
h1.sec-title,h2.title,h2.sec-title{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(32px,4.6vw,56px);line-height:1.05;letter-spacing:-.03em;color:var(--tx)}
h1.sec-title em,h2.title em,h2.sec-title em{font-style:normal;background:linear-gradient(115deg,var(--g),var(--g2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub,.sec-sub{margin-top:18px;font-size:17.5px;color:var(--mu);max-width:600px;line-height:1.75}

/* ---------- BUTTONS (new + legacy) ---------- */
.btn,.btn-pri,.btn-sec,.btn-wa{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:14px;font-size:15px;font-weight:600;transition:.3s var(--ease);will-change:transform;cursor:pointer}
.btn svg,.btn-pri svg,.btn-sec svg,.btn-wa svg{width:17px;height:17px}
.btn-pri{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 14px 34px -12px var(--p-glow);overflow:hidden}
.btn-pri::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:.7s var(--ease)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px var(--p-glow)}
.btn-pri:hover::before{left:140%}
.btn-sec{background:var(--surface);color:var(--tx);border:1px solid var(--bd2);backdrop-filter:blur(8px)}
.btn-sec:hover{transform:translateY(-2px);border-color:var(--p);color:var(--p);background:var(--p-soft)}
.btn-wa{background:linear-gradient(135deg,#25D366,#1ebe59);color:#fff;box-shadow:0 14px 34px -12px rgba(37,211,102,.6)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(37,211,102,.75)}

/* ---------- HERO (home) ---------- */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--bd2);border-radius:100px;padding:7px 16px;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:500;color:var(--mu);letter-spacing:.06em;text-transform:uppercase;margin-bottom:28px;backdrop-filter:blur(8px)}
.hero-badge .dot{width:8px;height:8px;background:var(--g);border-radius:50%;box-shadow:0 0 0 0 rgba(0,224,140,.5);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,224,140,.5)}70%{box-shadow:0 0 0 9px rgba(0,224,140,0)}100%{box-shadow:0 0 0 0 rgba(0,224,140,0)}}
.hero h1{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(42px,6vw,78px);line-height:1.02;letter-spacing:-.035em;color:var(--tx)}
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(40px) rotate(3deg);animation:wordUp .85s var(--ease) forwards}
.hero h1 em{font-style:normal;background:linear-gradient(115deg,var(--p),#FF7A85);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes wordUp{to{opacity:1;transform:none}}
.hero-sub{margin-top:26px;font-size:18.5px;color:var(--mu);line-height:1.75;max-width:510px;opacity:0;animation:fadeUp .9s var(--ease) .7s forwards}
.hero-btns{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.hero .hero-btns{opacity:0;animation:fadeUp .9s var(--ease) .85s forwards}
.hero-foot{margin-top:36px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) 1s forwards}
.hero-foot .stars{color:#FFC542;letter-spacing:2px;font-size:15px}
.hero-foot .ht{font-size:13.5px;color:var(--mu2)}
@keyframes fadeUp{to{opacity:1;transform:none}}
/* generic page hero (inner pages) */
.page-hero h1,.page-hero h2{margin-top:0}

/* hero dashboard card */
.hcard{position:relative;background:linear-gradient(165deg,rgba(16,18,26,.85),rgba(8,9,13,.9));border:1px solid var(--bd2);border-radius:var(--rad-xl);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);backdrop-filter:blur(14px);opacity:0;transform:translateY(50px) scale(.95);animation:cardIn 1.1s var(--ease) .5s forwards}
@keyframes cardIn{to{opacity:1;transform:none}}
.hcard.float{animation:cardIn 1.1s var(--ease) .5s forwards,floaty 7s ease-in-out 1.6s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hcard::before{content:"";position:absolute;inset:0;border-radius:var(--rad-xl);padding:1px;background:linear-gradient(140deg,var(--p-glow),transparent 38%,transparent 62%,rgba(0,224,140,.4));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hc-bar{display:flex;align-items:center;gap:9px;padding:15px 20px;border-bottom:1px solid var(--bd);background:rgba(255,255,255,.02)}
.hc-bar .dots{display:flex;gap:6px}
.hc-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.hc-bar .dots i:nth-child(1){background:#FF5F57}.hc-bar .dots i:nth-child(2){background:#FEBC2E}.hc-bar .dots i:nth-child(3){background:#28C840}
.hc-bar .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mu);letter-spacing:.03em}
.hc-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--g);text-transform:uppercase;letter-spacing:.1em}
.hc-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g);animation:ping 1.6s infinite}
.hc-body{padding:22px}
.hc-stats{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.hc-stat{background:var(--surface);border:1px solid var(--bd);border-radius:14px;padding:16px;transition:.3s var(--ease)}
.hc-stat:hover{border-color:var(--bd2);transform:translateY(-3px)}
.hc-stat .n{font-family:"Syne",sans-serif;font-weight:800;font-size:25px;line-height:1}
.hc-stat .n .sup{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;color:var(--g);vertical-align:super;margin-left:2px}
.hc-stat .l{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.08em;margin-top:9px}
.hc-stat.hl{border-color:var(--p-glow);background:var(--p-soft)}
.hc-stat.hl .n{color:var(--p)}
.hc-chart{margin-top:16px;padding-top:16px;border-top:1px solid var(--bd)}
.hc-chart .ch-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hc-chart .ch-top .t{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mu);text-transform:uppercase;letter-spacing:.07em}
.hc-chart .ch-top .v{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--g)}
.spark{display:flex;align-items:flex-end;gap:5px;height:46px}
.spark i{flex:1;background:linear-gradient(180deg,var(--p),rgba(255,45,63,.2));border-radius:4px 4px 0 0;transform:scaleY(0);transform-origin:bottom;animation:bar .9s var(--ease) forwards}
@keyframes bar{to{transform:scaleY(1)}}
.hc-verified{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mu);margin-top:14px;line-height:1.5}
.hc-verified svg{color:var(--g);flex-shrink:0;width:15px;height:15px}
.chip-float{position:absolute;z-index:2;background:rgba(12,14,20,.9);border:1px solid var(--bd2);border-radius:14px;padding:11px 15px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(12px);box-shadow:0 16px 40px -16px rgba(0,0,0,.8)}
.chip-float .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip-float .ic svg{width:18px;height:18px}
.chip-float .ct{font-family:"Syne",sans-serif;font-weight:700;font-size:15px;line-height:1.1}
.chip-float .cl{font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.chip-1{top:-22px;right:-18px;animation:floaty 6s ease-in-out 2s infinite}
.chip-1 .ic{background:rgba(0,224,140,.14);color:var(--g)}
.chip-2{bottom:-22px;left:-28px;animation:floaty 6.5s ease-in-out 2.4s infinite}
.chip-2 .ic{background:var(--p-soft);color:var(--p)}

/* ---------- MARQUEE ---------- */
.marquee{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);overflow:hidden;background:rgba(8,9,13,.5);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;animation:scroll 36s linear infinite}
.mq-track:hover{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:11px;padding:18px 36px;font-family:"JetBrains Mono",monospace;font-size:13.5px;font-weight:500;color:var(--mu);white-space:nowrap}
.mq-item strong{color:var(--g);font-weight:700}
.mq-item .dot{width:5px;height:5px;border-radius:50%;background:var(--p)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SERVICES bento (home) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.svc{position:relative;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:38px;overflow:hidden;transition:.4s var(--ease)}
.svc::after{content:"";position:absolute;width:340px;height:340px;background:radial-gradient(circle,rgba(255,45,63,.15),transparent 70%);left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc:hover{border-color:var(--p-glow);transform:translateY(-5px);box-shadow:0 36px 70px -34px var(--p-glow)}
.svc:hover::after{opacity:1}
.svc-ic{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--p-soft),rgba(255,45,63,.04));border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;color:var(--p);margin-bottom:22px;transition:.35s var(--ease)}
.svc-ic svg{width:26px;height:26px}
.svc:hover .svc-ic{transform:scale(1.08) rotate(-5deg);background:linear-gradient(135deg,var(--p),var(--p2));color:#fff}
.svc h3{font-family:"Syne",sans-serif;font-weight:700;font-size:22px;margin-bottom:12px;position:relative;z-index:1}
.svc p{font-size:15px;color:var(--mu);line-height:1.75;position:relative;z-index:1}
.svc-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:500;color:var(--p);text-transform:uppercase;letter-spacing:.04em;position:relative;z-index:1;transition:.25s var(--ease)}
.svc-link svg{width:14px;height:14px;transition:.25s var(--ease)}
.svc-link:hover svg{transform:translateX(4px)}

/* ---------- PROOF (new + legacy .proof-card) ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.proof,.proof-card{position:relative;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:36px 26px;text-align:center;transition:.4s var(--ease);overflow:hidden}
.proof:hover,.proof-card:hover{transform:translateY(-5px);border-color:var(--bd2)}
.proof .n,.proof-card .n{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1;color:var(--tx)}
.proof .n .sup,.proof-card .n .sup{font-family:"JetBrains Mono",monospace;font-size:18px;color:var(--g);margin-left:2px}
.proof .l,.proof-card .l{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mu);margin-top:13px;text-transform:uppercase;letter-spacing:.06em}
.proof.hl,.proof-card.hl{border-color:var(--p-glow);background:linear-gradient(165deg,var(--p-soft),rgba(255,45,63,.02))}
.proof.hl .n,.proof-card.hl .n{color:var(--p)}

/* ---------- TRUST (new + legacy) ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.trust,.trust-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--rad);padding:28px 22px;text-align:center;transition:.35s var(--ease)}
.trust:hover,.trust-card:hover{border-color:var(--p-glow);transform:translateY(-4px);background:var(--surface2)}
.trust .tl,.trust-badge-label{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mu2);margin-bottom:16px}
.trust .tn,.trust-badge-name{font-family:"Syne",sans-serif;font-weight:700;font-size:19px;margin-bottom:6px;color:var(--tx)}
.trust .ts,.trust-badge-sub{font-size:11.5px;color:var(--mu)}
.award,.trust-award-band{margin-top:18px;background:linear-gradient(135deg,var(--p-soft),rgba(255,45,63,.02));border:1px solid var(--p-glow);border-radius:var(--rad-lg);padding:28px 34px;display:flex;align-items:center;gap:24px}
.award .ai{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--p),var(--p2));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 12px 30px -10px var(--p-glow)}
.award .ai svg{width:28px;height:28px}
.trust-award-icon{font-size:30px;flex-shrink:0}
.award .at,.trust-award-title{font-family:"Syne",sans-serif;font-weight:700;font-size:18px;margin-bottom:6px;color:var(--tx)}
.award .ad,.trust-award-desc{font-size:14px;color:var(--mu);line-height:1.6}

/* ---------- CASE STUDY cards (home .cs) ---------- */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.cs{position:relative;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:32px;overflow:hidden;transition:.4s var(--ease);display:block}
.cs::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--g));transform:scaleX(0);transform-origin:left;transition:.45s var(--ease)}
.cs:hover{border-color:var(--p-glow);transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.cs:hover::before{transform:scaleX(1)}
.cs-brand{font-family:"Syne",sans-serif;font-weight:700;font-size:22px;margin-bottom:8px;line-height:1.2;color:var(--tx)}
.cs-conf{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--mu2);margin-bottom:16px}
.cs-conf svg{width:11px;height:11px}
.cs-tags{display:flex;gap:7px;margin-bottom:22px;flex-wrap:wrap}
.cs-tags span{background:var(--p-soft);color:var(--p);border:1px solid var(--bd);font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.cs-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-stat .n{font-family:"Syne",sans-serif;font-weight:700;font-size:21px;color:var(--tx)}
.cs-stat .n .g{color:var(--g)}
.cs-stat .l{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mu);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:56px}
.testi{position:relative;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:40px;transition:.35s var(--ease)}
.testi:hover{border-color:var(--bd2);transform:translateY(-4px)}
.testi .q{position:absolute;top:18px;right:32px;font-family:"Playfair Display",serif;font-style:italic;font-size:100px;line-height:1;color:rgba(255,45,63,.13)}
.testi .stars{color:#FFC542;font-size:15px;letter-spacing:3px;margin-bottom:18px}
.testi blockquote{font-family:"Playfair Display",serif;font-style:italic;font-size:20px;color:var(--tx);line-height:1.65;position:relative;z-index:1}
.testi .auth{margin-top:26px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--bd);padding-top:20px}
.testi .av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--p),#FF7A85);display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-weight:700;font-size:15px;color:#fff;flex-shrink:0;box-shadow:0 8px 20px -8px var(--p-glow)}
.testi .nm{font-weight:600;font-size:15px;color:var(--tx)}
.testi .ro{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mu);margin-top:2px}

/* ---------- CTA (new .cta + legacy .cta-band) ---------- */
.cta,.cta-band{position:relative;background:linear-gradient(135deg,var(--p-soft),rgba(255,45,63,.02));border:1px solid var(--p-glow);border-radius:var(--rad-xl);padding:72px 60px;text-align:center;overflow:hidden}
.cta::before,.cta-band::before{content:"";position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(255,45,63,.2),transparent 68%);top:-360px;left:50%;transform:translateX(-50%);pointer-events:none}
.cta::after,.cta-band::after{content:"";position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(0,224,140,.12),transparent 68%);bottom:-300px;right:-100px;pointer-events:none}
.cta h2,.cta-band h2{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(28px,3.8vw,46px);letter-spacing:-.03em;margin-bottom:18px;position:relative;line-height:1.1;color:var(--tx)}
.cta p,.cta-band p{font-size:18px;color:var(--mu);margin:0 auto 36px;max-width:580px;position:relative}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--bd);padding:50px 0;background:rgba(5,5,6,.5)}
.foot,.foot-inner{max-width:var(--maxw);margin:0 auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.foot .fr,.foot-right{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--mu);line-height:1.9}

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:90;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25D366,#1ebe59);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 14px 34px -8px rgba(37,211,102,.7);transition:.3s var(--ease);animation:ping2 2.6s infinite}
.wa-float svg{width:28px;height:28px}
@keyframes ping2{0%{box-shadow:0 14px 34px -8px rgba(37,211,102,.7),0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 14px 34px -8px rgba(37,211,102,.7),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 14px 34px -8px rgba(37,211,102,.7),0 0 0 0 rgba(37,211,102,0)}}
.wa-float:hover{transform:scale(1.1)}

/* ====================================================
   INNER-PAGE COMPONENTS (legacy classes, premium style)
   ==================================================== */
.r2col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}

/* what we get / build / produce grid */
.what-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.what-card{background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad);padding:28px;transition:.35s var(--ease)}
.what-card:hover{border-color:var(--p-glow);transform:translateY(-4px)}
.what-card h4{font-family:"Syne",sans-serif;font-weight:700;color:var(--tx);margin-bottom:10px;font-size:16px}
.what-card p{font-size:14px;color:var(--mu);line-height:1.75}

/* numbered steps */
.steps-grid{margin-top:48px;border:1px solid var(--bd);border-radius:var(--rad-lg);overflow:hidden;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4))}
.step-row{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--bd);transition:.3s var(--ease)}
.step-row:last-child{border-bottom:none}
.step-row:hover{background:var(--p-soft)}
.step-num{font-family:"Syne",sans-serif;font-weight:800;font-size:30px;color:var(--p);background:var(--p-soft);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--bd)}
.step-body{padding:28px 30px}
.step-body h3{font-family:"Syne",sans-serif;font-weight:700;font-size:19px;color:var(--tx);margin-bottom:8px}
.step-body p{font-size:14.5px;color:var(--mu);line-height:1.75}

/* ROAS band */
.roas-band{background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:48px;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.roas-num{font-family:"Syne",sans-serif;font-weight:800;font-size:84px;color:var(--p);line-height:1;letter-spacing:-.04em}
.roas-num span{font-size:42px;color:var(--g)}

/* services overview cards */
.svc-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.svc-ov-card{position:relative;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);padding:38px;transition:.4s var(--ease);display:block;overflow:hidden}
.svc-ov-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--g));transform:scaleX(0);transform-origin:left;transition:.45s var(--ease)}
.svc-ov-card:hover{border-color:var(--p-glow);transform:translateY(-5px);box-shadow:0 36px 70px -36px var(--p-glow)}
.svc-ov-card:hover::after{transform:scaleX(1)}
.svc-ov-card h3{font-family:"Syne",sans-serif;font-weight:700;font-size:22px;color:var(--tx);margin:16px 0 12px}
.svc-ov-card p{font-size:14.5px;color:var(--mu);line-height:1.75}
.svc-ov-arrow{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:500;color:var(--p);text-transform:uppercase;letter-spacing:.04em}
.svc-icon{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--p-soft),rgba(255,45,63,.04));border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;color:var(--p);font-size:24px}
.svc-icon svg{width:26px;height:26px}
.svc-tag{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;color:var(--p);text-transform:uppercase;letter-spacing:.04em;transition:.2s var(--ease)}
.svc-tag:hover{gap:11px;color:var(--ph)}

/* values */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.val-card{background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad);padding:28px;transition:.35s var(--ease)}
.val-card:hover{border-color:var(--p-glow);transform:translateY(-4px)}
.val-card h4{font-family:"Syne",sans-serif;font-weight:700;font-size:17px;color:var(--tx);margin-bottom:10px}
.val-card p{font-size:14px;color:var(--mu);line-height:1.75}

/* team (if used) */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.team-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--rad);padding:28px;text-align:center}
.team-av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--p),#FF7A85);display:flex;align-items:center;justify-content:center;font-family:"Syne",sans-serif;font-weight:700;font-size:18px;color:#fff;margin:0 auto 14px}
.team-name{font-weight:600;font-size:15px;color:var(--tx);margin-bottom:4px}
.team-role{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mu)}

/* full case studies */
.cs-full{margin-bottom:32px;background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad-lg);overflow:hidden;transition:.4s var(--ease)}
.cs-full:hover{border-color:var(--bd2)}
.cs-full-header{padding:38px 42px 0}
.cs-full-title{font-family:"Syne",sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,40px);color:var(--tx);letter-spacing:-.02em}
.cs-full-sub{font-size:15px;color:var(--mu);margin-top:12px;max-width:640px;line-height:1.75}
.cs-chip{display:inline-flex;align-items:center;gap:6px;background:var(--p-soft);border:1px solid var(--p-glow);border-radius:100px;padding:6px 15px;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;color:var(--p);letter-spacing:.04em;text-transform:uppercase;margin-top:16px}
.cs-full-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bd);margin-top:30px}
.csf-stat{padding:26px 30px;border-right:1px solid var(--bd)}
.csf-stat:last-child{border-right:none}
.csf-stat .n{font-family:"Syne",sans-serif;font-weight:800;font-size:26px;color:var(--tx)}
.csf-stat .n .sup{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--g)}
.csf-stat .n.hl{color:var(--p)}
.csf-stat .l{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.cs-chart-wrap{padding:30px 42px}
.cs-chart-label{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;color:var(--mu);letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.cs-chart-label .peak{color:var(--p)}
.cs-callout{background:var(--p-soft);border-left:3px solid var(--p);padding:20px 26px;margin:0 42px 38px;border-radius:0 10px 10px 0;font-size:14.5px;color:var(--mu);line-height:1.8}
.cs-callout strong{color:var(--tx)}
.conf-notice{display:flex;align-items:flex-start;gap:12px;background:var(--p-soft);border:1px solid var(--bd);border-radius:12px;padding:16px 20px;max-width:680px}

/* contact page */
.contact-grid-v2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.ci-row{background:linear-gradient(165deg,var(--surface),rgba(8,9,13,.4));border:1px solid var(--bd);border-radius:var(--rad);padding:20px 22px;display:flex;align-items:center;gap:16px;margin-bottom:12px;transition:.3s var(--ease)}
.ci-row:hover{border-color:var(--bd2);transform:translateX(4px)}
.ci-icon{width:42px;height:42px;background:var(--p-soft);border:1px solid var(--bd);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ci-label{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mu);font-weight:500;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px}
.ci-val{font-size:15px;color:var(--tx);font-weight:500}
.cf-whatsapp{background:linear-gradient(135deg,#25D366,#1ebe59);color:#fff;border-radius:12px;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:16px;text-decoration:none;transition:.3s var(--ease);box-shadow:0 12px 30px -12px rgba(37,211,102,.6)}
.cf-whatsapp:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(37,211,102,.7)}
.cf-or{text-align:center;color:var(--mu2);font-family:"JetBrains Mono",monospace;font-size:12px;margin:18px 0;position:relative}
.cf-or::before,.cf-or::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--bd)}
.cf-or::before{left:0}.cf-or::after{right:0}
.cf-email{background:var(--surface);border:1px solid var(--bd2);border-radius:12px;padding:15px 22px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:500;font-size:15px;color:var(--tx);transition:.3s var(--ease)}
.cf-email:hover{border-color:var(--p);color:var(--p);background:var(--p-soft)}
.calendly-inline-widget{border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--bd2);background:#fff}

/* ---------- REVEAL ---------- */
.rev{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev.d1{transition-delay:.06s}.rev.d2{transition-delay:.14s}.rev.d3{transition-delay:.22s}.rev.d4{transition-delay:.3s}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rev{opacity:1;transform:none}
  .hero h1 .word,.hero-sub,.hero .hero-btns,.hero-foot,.hcard,.aurora b{opacity:1!important;transform:none!important}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:54px}
  .svc-grid,.svc-overview-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .cs-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .what-grid{grid-template-columns:1fr 1fr}
  .val-grid{grid-template-columns:1fr}
  .roas-band{grid-template-columns:1fr;padding:32px}
  .cs-full-stats{grid-template-columns:repeat(2,1fr)}
  .csf-stat:nth-child(2){border-right:none}
  .csf-stat:nth-child(3){border-top:1px solid var(--bd)}
  .csf-stat:nth-child(4){border-right:none;border-top:1px solid var(--bd)}
  .contact-grid-v2{grid-template-columns:1fr!important;gap:28px}
  .contact-grid-v2>div:last-child{padding-top:0!important}
  .r2col{grid-template-columns:1fr!important}
  .nav-links{display:none}
  .ham{display:flex}
  .cta,.cta-band{padding:48px 26px}
  .chip-1{right:6px}.chip-2{left:6px}
  .cs-full-header{padding:28px 24px 0}
  .cs-chart-wrap{padding:24px}
  .cs-callout{margin:0 24px 28px}
}
@media(max-width:600px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .what-grid{grid-template-columns:1fr}
  section{padding:76px 0}
  .pt-hero{padding-top:116px}
  .svc,.testi,.svc-ov-card{padding:28px}
  .award,.trust-award-band{flex-direction:column;text-align:center}
  .foot,.foot-inner{flex-direction:column;text-align:center}
  .chip-float{display:none}
  .spotlight{display:none}
  .cs-full-stats{grid-template-columns:1fr 1fr}
  .roas-num{font-size:64px}
}