/* ==========================================================
   SCHILLER DIGITAL SOLUTIONS — Premium Parallax v3
   Dark-Premium · Glassmorphism · Multi-Layer Parallax
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  --bg:        #060610;
  --bg2:       #09091a;
  --bg3:       #0d0d22;
  --bg4:       #111128;
  --surf:      rgba(255,255,255,0.04);
  --surf2:     rgba(255,255,255,0.07);
  --b1:        rgba(255,255,255,0.07);
  --b2:        rgba(255,255,255,0.12);
  --b3:        rgba(255,255,255,0.20);
  --tx:        #f0f0fc;
  --tx2:       #b0b0d0;
  --muted:     #6868a0;
  --muted2:    #44446a;
  --c:         #00d4ff;          /* cyan accent */
  --c2:        #0095cc;
  --cr:        0,212,255;        /* for rgba() */
  --g:         #00ffaa;          /* green */
  --gr:        0,255,170;
  --v:         #8b5cf6;          /* violet */
  --vr:        139,92,246;
  --head:      'Syne', sans-serif;
  --body:      'DM Sans', sans-serif;
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease2:     cubic-bezier(.16,1,.3,1);
}

/* ─── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg); color:var(--tx);
  font-family:var(--body); line-height:1.75;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a   { text-decoration:none; color:inherit; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }

/* ─── Typography ──────────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--head); line-height:1.1; letter-spacing:-.03em; }
h1  { font-size:clamp(2.4rem,5.2vw,4.4rem); font-weight:800; }
h2  { font-size:clamp(2rem,4vw,3.2rem);     font-weight:700; }
h3  { font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
.accent   { color:var(--c); }
.gradient {
  background:linear-gradient(120deg,#fff 0%,var(--c) 55%,var(--v) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─── Noise overlay ───────────────────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; z-index:9999;
  pointer-events:none; opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ─── Layout ──────────────────────────────────────────────── */
.W { max-width:1200px; margin:0 auto; padding:0 5%; }
.sec { position:relative; overflow:hidden; }
.pad { padding:9rem 0; }

/* ─── Tag pill ────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(var(--cr),.08); color:var(--c);
  border:1px solid rgba(var(--cr),.22); border-radius:99px;
  padding:5px 18px; font-family:var(--head);
  font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:1.5rem;
}
.tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--head); font-weight:700; border-radius:10px;
  font-size:.93rem; cursor:pointer; border:none;
  transition:all .35s var(--ease); position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent);
  opacity:0; transition:opacity .2s;
}
.btn:hover::after { opacity:1; }
.btn-c  { background:var(--c); color:#000; padding:15px 32px; }
.btn-c:hover  { transform:translateY(-3px); box-shadow:0 14px 40px rgba(var(--cr),.38); }
.btn-o  { background:transparent; color:var(--tx); border:1px solid var(--b2); padding:15px 32px; }
.btn-o:hover  { border-color:var(--c); color:var(--c); transform:translateY(-2px); }
.btn-wa { background:#25d366; color:#fff; padding:15px 32px; }
.btn-wa:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(37,211,102,.32); }

/* ─── Glassmorphism card ──────────────────────────────────── */
.glass {
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--b2); border-radius:20px;
}

/* ─── Reveal animation classes (JS adds .in) ─────────────── */
.rv {
  opacity:0; transform:translateY(38px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  will-change:opacity,transform;
}
.rv.in { opacity:1; transform:translateY(0); }
.rv-s  { opacity:0; transform:scale(.93); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.rv-s.in { opacity:1; transform:scale(1); }
.rv-l  { opacity:0; transform:translateX(-40px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rv-l.in { opacity:1; transform:translateX(0); }
.rv-r  { opacity:0; transform:translateX(40px);  transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rv-r.in { opacity:1; transform:translateX(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.18s} .d3{transition-delay:.26s}
.d4{transition-delay:.34s} .d5{transition-delay:.42s} .d6{transition-delay:.5s}

/* ══════════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:22px 5%;
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .4s var(--ease),background .4s,border .4s;
}
.nav.stuck {
  padding:13px 5%;
  background:rgba(6,6,16,.9);
  backdrop-filter:blur(30px) saturate(1.5);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);
  border-bottom:1px solid var(--b1);
  box-shadow:0 4px 40px rgba(0,0,0,.55);
}
.n-logo { font-family:var(--head); font-weight:800; font-size:1.12rem; color:var(--tx); letter-spacing:-.02em; z-index:2; }
.n-logo span { color:var(--c); }
.n-links { display:flex; gap:2.4rem; list-style:none; }
.n-links a { color:var(--muted); font-size:.87rem; transition:color .2s; position:relative; }
.n-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.n-links a:hover { color:var(--tx); }
.n-links a:hover::after { transform:scaleX(1); }
.n-cta { background:var(--c); color:#000; font-family:var(--head); font-weight:700; padding:9px 22px; border-radius:8px; font-size:.83rem; transition:all .2s; }
.n-cta:hover { opacity:.85; transform:translateY(-1px); }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; z-index:810; }
.burger span { width:26px; height:2px; background:var(--tx); border-radius:2px; transition:all .3s; display:block; }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mob-nav {
  display:none; position:fixed; inset:0; z-index:790;
  background:rgba(6,6,16,.97); backdrop-filter:blur(20px);
  flex-direction:column; justify-content:center; padding:5rem;
}
.mob-nav.open { display:flex; animation:mnIn .35s var(--ease); }
@keyframes mnIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.mob-nav a { color:var(--tx); font-family:var(--head); font-size:1.7rem; font-weight:700; padding:1rem 0; border-bottom:1px solid var(--b1); transition:color .2s; }
.mob-nav a:hover { color:var(--c); }
.mob-nav .btn-c { margin-top:2rem; justify-content:center; }

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  padding:10rem 5% 7rem;
  position:relative; overflow:hidden;
}
/* Layer 0 – gradient bg */
.h-grad {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 90% 70% at 65% 35%, rgba(var(--cr),.07) 0%,transparent 55%),
    radial-gradient(ellipse 55% 55% at 8%  80%, rgba(var(--vr),.06) 0%,transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 15%, rgba(var(--gr),.04) 0%,transparent 50%),
    var(--bg);
}
/* Layer 1 – grid */
.h-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:65px 65px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 45%,#000 0%,transparent 80%);
  will-change:transform;
}
/* Layer 2 – orbs */
.orb { position:absolute; border-radius:50%; filter:blur(75px); pointer-events:none; will-change:transform; }
.o1 { width:650px; height:650px; background:rgba(var(--cr),.07); top:-20%;  left:-12%; animation:orbF 15s ease-in-out infinite; }
.o2 { width:480px; height:480px; background:rgba(var(--vr),.06); bottom:-12%;right:4%;  animation:orbF 19s ease-in-out infinite; animation-delay:-5s; }
.o3 { width:320px; height:320px; background:rgba(var(--gr),.05); top:38%;   left:42%; animation:orbF 11s ease-in-out infinite; animation-delay:-8s; }
@keyframes orbF { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(22px,-18px) scale(1.06)} 66%{transform:translate(-16px,28px) scale(.96)} }

/* Layer 4 – content */
.h-inner {
  position:relative; z-index:10;
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:5rem; align-items:center;
  max-width:1200px; margin:0 auto; width:100%;
  will-change:transform;
}
.h-text .tag { margin-bottom:2rem; }
.h-text h1   { margin-bottom:1.5rem; line-height:1.06; }
.h-text p    { font-size:1.08rem; color:var(--tx2); max-width:540px; line-height:1.85; margin-bottom:2.5rem; }
.h-btns      { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }
.h-badges    { display:flex; flex-wrap:wrap; gap:.7rem; }
.h-bdg {
  display:flex; align-items:center; gap:8px;
  background:var(--surf); border:1px solid var(--b2);
  padding:8px 16px; border-radius:8px;
  font-size:.79rem; color:var(--tx2); transition:all .3s;
}
.h-bdg:hover { border-color:rgba(var(--cr),.3); color:var(--tx); }
.h-bdg::before { content:'✓'; color:var(--c); font-weight:800; }

/* Hero Visual */
.h-vis { position:relative; height:530px; }
.h-mock-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mock {
  width:90%; background:rgba(18,18,40,1);
  border:1px solid var(--b2); border-radius:16px; overflow:hidden;
  box-shadow:0 60px 120px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  will-change:transform;
  animation:mockFloat 7s ease-in-out infinite;
}
@keyframes mockFloat {
  0%,100%{transform:perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(0)}
  50%    {transform:perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(-13px)}
}
.m-bar { background:rgba(12,12,28,1); padding:10px 14px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--b1); }
.dot { width:10px; height:10px; border-radius:50%; }
.dr{background:#ff5f57} .dy{background:#ffbd2e} .dg{background:#28ca41}
.m-url { flex:1; background:rgba(6,6,16,1); border-radius:4px; padding:4px 12px; font-size:.7rem; color:var(--muted2); margin-left:6px; }
.m-body { padding:20px; background:linear-gradient(160deg,#0c0e20,#070810); }
.m-hero { background:linear-gradient(135deg,#12143a,#08091e); border-radius:10px; padding:22px; margin-bottom:14px; border:1px solid rgba(var(--cr),.08); }
.ml-tag { width:28%; height:9px; background:rgba(var(--cr),.28); border-radius:20px; margin-bottom:12px; }
.ml-h1  { width:82%; height:13px; background:rgba(255,255,255,.13); border-radius:4px; margin-bottom:7px; }
.ml-h2  { width:58%; height:13px; background:rgba(255,255,255,.08); border-radius:4px; margin-bottom:14px; }
.ml-p   { height:7px; background:rgba(255,255,255,.05); border-radius:3px; margin-bottom:6px; }
.ml-p.s { width:68%; }
.ml-btns{ display:flex; gap:8px; margin-top:14px; }
.ml-ba  { width:32%; height:24px; background:var(--c); border-radius:5px; opacity:.9; }
.ml-bb  { width:26%; height:24px; border:1px solid rgba(255,255,255,.12); border-radius:5px; }
.m-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.m-cd   { background:rgba(20,20,40,1); border:1px solid var(--b1); border-radius:7px; padding:12px; }
.m-ico  { width:24px; height:24px; background:rgba(var(--cr),.12); border-radius:5px; margin-bottom:9px; }
.m-ln   { height:6px; background:rgba(255,255,255,.07); border-radius:3px; margin-bottom:5px; }
.m-ln.s { width:60%; }
.m-ln.a { background:rgba(var(--cr),.2); width:42%; }

/* Floating badges */
.fbdg {
  position:absolute; background:rgba(14,14,32,.9);
  backdrop-filter:blur(14px); border:1px solid var(--b2);
  border-radius:12px; padding:10px 16px;
  display:flex; align-items:center; gap:10px;
  font-size:.77rem; font-weight:500;
  box-shadow:0 10px 28px rgba(0,0,0,.55); white-space:nowrap;
  will-change:transform;
}
.fbdg-dot { width:7px; height:7px; border-radius:50%; background:var(--g); box-shadow:0 0 8px var(--g); }
.fb1 { top:4%;   right:-4%;  animation:fb1F 5s ease-in-out infinite; }
.fb2 { bottom:10%;left:-7%;  animation:fb2F 6.5s ease-in-out infinite; }
.fb3 { top:44%;  right:-10%; animation:fb1F 7s ease-in-out infinite; animation-delay:-2.5s; }
@keyframes fb1F { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes fb2F { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ══════════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════════ */
.stats-bar {
  background:rgba(12,12,30,1);
  border-top:1px solid var(--b1); border-bottom:1px solid var(--b1);
  padding:2.8rem 5%; position:relative; z-index:2;
}
.stats-inner { display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:2rem; max-width:1200px; margin:0 auto; }
.s-num { font-family:var(--head); font-size:2.5rem; font-weight:800; color:var(--c); line-height:1; margin-bottom:4px; }
.s-lbl { font-size:.81rem; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   STICKY PROBLEM
══════════════════════════════════════════════════════════ */
.sticky-wrap { display:grid; grid-template-columns:1fr 1fr; }
.sticky-l {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:5rem 4rem 5rem 5%;
  background:var(--bg2);
  border-right:1px solid var(--b1);
}
.sticky-l h2 { font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:1.5rem; line-height:1.15; }
.sticky-l p  { color:var(--tx2); font-size:.97rem; line-height:1.8; max-width:380px; }
.sticky-r { background:var(--bg3); padding:8rem 5% 8rem 3rem; display:flex; flex-direction:column; gap:1.8rem; }
.prob-cd {
  background:var(--surf); border:1px solid var(--b1);
  border-radius:16px; padding:2rem;
  position:relative; overflow:hidden;
  transition:border-color .3s;
  will-change:opacity,transform,filter;
}
.prob-cd::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#ff4444,transparent); opacity:0; transition:opacity .3s; }
.prob-cd:hover { border-color:rgba(255,70,70,.28); }
.prob-cd:hover::before { opacity:1; }
.prob-ico { font-size:1.6rem; margin-bottom:.9rem; }
.prob-cd h3 { font-size:1rem; margin-bottom:.4rem; }
.prob-cd p  { font-size:.87rem; color:var(--tx2); line-height:1.65; }

/* ══════════════════════════════════════════════════════════
   SOLUTION
══════════════════════════════════════════════════════════ */
.sol-sec { background:var(--bg2); padding:9rem 0; }
.sol-bg  { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 70% 50%,rgba(var(--cr),.05),transparent 65%); will-change:transform; }
.sol-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.sol-text p { color:var(--tx2); font-size:1.02rem; line-height:1.85; margin-bottom:1.5rem; }
.ck { display:flex; gap:11px; align-items:flex-start; padding:.9rem 1.1rem; background:var(--surf); border:1px solid var(--b1); border-radius:9px; margin-bottom:.7rem; font-size:.94rem; color:var(--tx2); transition:all .25s; }
.ck:hover { border-color:rgba(var(--cr),.22); color:var(--tx); }
.ck::before { content:'✓'; color:var(--c); font-weight:800; flex-shrink:0; margin-top:1px; }
.sol-pills { display:flex; flex-direction:column; gap:.85rem; }
.pill {
  background:var(--surf); border:1px solid var(--b1);
  border-radius:13px; padding:1rem 1.25rem;
  display:flex; align-items:center; gap:14px;
  transition:all .35s var(--ease); will-change:transform;
}
.pill:hover { border-color:rgba(var(--cr),.25); transform:translateX(7px); }
.pill-ico { width:42px; height:42px; background:rgba(var(--cr),.08); border:1px solid rgba(var(--cr),.14); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }
.pill-t { font-size:.91rem; font-weight:600; }
.pill-s { font-size:.77rem; color:var(--muted); }

/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
.svc-sec { background:var(--bg3); padding:9rem 0; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; margin-top:3.5rem; }
.svc-cd {
  background:var(--surf); border:1px solid var(--b1);
  border-radius:20px; padding:2.5rem;
  position:relative; overflow:hidden;
  transition:all .4s var(--ease); will-change:transform;
  cursor:default;
}
.svc-cd::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),rgba(var(--cr),.1)); opacity:0; transition:opacity .35s; }
.svc-cd::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% -10%,rgba(var(--cr),.08),transparent); opacity:0; transition:opacity .4s; }
.svc-cd:hover { border-color:rgba(var(--cr),.22); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.55); }
.svc-cd:hover::before { opacity:1; }
.svc-cd:hover::after  { opacity:1; }
.svc-cd:hover .svc-ico { transform:scale(1.1) rotate(-4deg); }
.svc-ico { width:52px; height:52px; background:rgba(var(--cr),.07); border:1px solid rgba(var(--cr),.14); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.45rem; margin-bottom:1.5rem; transition:transform .3s var(--ease); position:relative; z-index:1; }
.svc-cd h3 { margin-bottom:.7rem; position:relative; z-index:1; }
.svc-cd p  { color:var(--tx2); font-size:.89rem; line-height:1.75; position:relative; z-index:1; }

/* ══════════════════════════════════════════════════════════
   REFERENCES
══════════════════════════════════════════════════════════ */
.ref-sec { background:var(--bg2); padding:9rem 0; }
.ref-hero {
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--surf); border:1px solid var(--b2);
  border-radius:24px; overflow:hidden; margin-top:3.5rem;
  box-shadow:0 50px 120px rgba(0,0,0,.55);
}
.ref-vis {
  background:var(--bg3); padding:3.5rem;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; min-height:460px;
}
.ref-vis-bg { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(var(--cr),.07),transparent 70%); pointer-events:none; will-change:transform; }
.ref-mock {
  width:92%; background:rgba(14,14,30,1);
  border-radius:14px; border:1px solid var(--b2); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  will-change:transform; animation:refFloat 6s ease-in-out infinite;
}
@keyframes refFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-11px) rotate(-1deg)} }
.ref-bar { background:rgba(8,8,22,1); padding:9px 12px; display:flex; align-items:center; gap:5px; border-bottom:1px solid var(--b1); }
.ref-url { flex:1; background:rgba(4,4,12,1); border-radius:4px; padding:3px 10px; font-size:.67rem; color:var(--muted2); margin-left:6px; }
.ref-body { padding:16px; background:linear-gradient(160deg,#0a0b1d,#060710); }
.rf-hdr  { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rf-logo { width:30px; height:30px; background:linear-gradient(135deg,#1b3a27,#091d13); border-radius:6px; border:1px solid rgba(0,160,70,.3); display:flex; align-items:center; justify-content:center; font-size:.57rem; font-weight:800; color:#00c060; }
.rf-lines { flex:1; }
.rf-ln  { height:6px; background:rgba(255,255,255,.08); border-radius:3px; margin-bottom:4px; }
.rf-ln.a { background:rgba(0,192,80,.28); width:60%; }
.rf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.rf-col  { background:rgba(255,255,255,.04); border-radius:4px; padding:8px; border:1px solid var(--b1); }
.rf-col .rf-ln { height:5px; }
.live-bd { position:absolute; top:14px; right:14px; background:rgba(0,255,100,.1); color:#00ff80; border:1px solid rgba(0,255,100,.2); padding:4px 12px; border-radius:99px; font-size:.67rem; font-weight:600; display:flex; align-items:center; gap:5px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#00ff80; animation:lp 2s infinite; }
@keyframes lp { 0%,100%{opacity:1} 50%{opacity:.2} }
.rf-fbdg { position:absolute; background:rgba(10,10,26,.9); backdrop-filter:blur(12px); border:1px solid var(--b2); border-radius:10px; padding:9px 14px; font-size:.75rem; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.rfb1 { bottom:16%; right:4%; animation:fb1F 5s ease-in-out infinite; }
.rfb2 { top:12%;   left:4%; animation:fb2F 6s ease-in-out infinite; }
.rfb-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c); margin-right:6px; box-shadow:0 0 6px var(--c); }

.ref-info { padding:3.5rem; display:flex; flex-direction:column; justify-content:center; }
.ref-info h3 { font-size:1.65rem; margin-bottom:1rem; }
.ref-info p  { color:var(--tx2); font-size:.93rem; line-height:1.8; margin-bottom:1.8rem; }
.ref-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.8rem; }
.ref-tag  { background:var(--surf); border:1px solid var(--b1); padding:3px 11px; border-radius:5px; font-size:.74rem; color:var(--tx2); }
.ref-link { display:inline-flex; align-items:center; gap:7px; color:var(--c); font-family:var(--head); font-weight:700; font-size:.92rem; transition:gap .2s; }
.ref-link:hover { gap:12px; }
.ref-ph-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; margin-top:2rem; }
.ref-ph {
  background:var(--surf); border:1px dashed var(--b2);
  border-radius:16px; overflow:hidden;
  transition:all .35s var(--ease);
}
.ref-ph:hover { border-color:rgba(var(--cr),.22); transform:translateY(-5px); }
.ref-ph-top { height:145px; background:var(--bg3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; }
.ref-ph-ico { font-size:2rem; opacity:.45; }
.ref-ph-top strong { font-size:.88rem; opacity:.65; }
.ref-ph-top small  { font-size:.73rem; color:var(--muted2); }
.ref-ph-bot { padding:1.2rem 1.5rem; }
.ref-ph-bot h4 { font-size:.93rem; margin-bottom:.35rem; }
.ref-ph-bot p  { font-size:.8rem; color:var(--tx2); }

/* ══════════════════════════════════════════════════════════
   INDUSTRIES
══════════════════════════════════════════════════════════ */
.ind-sec { background:var(--bg3); padding:9rem 0; }
.ind-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; margin-top:3.5rem; }
.ind-cd {
  background:var(--surf); border:1px solid var(--b1);
  border-radius:16px; padding:1.6rem;
  transition:all .4s var(--ease); will-change:transform;
}
.ind-cd:hover { border-color:rgba(var(--cr),.25); transform:translateY(-5px); box-shadow:0 18px 42px rgba(0,0,0,.45); }
.ind-ico { font-size:1.65rem; margin-bottom:.85rem; }
.ind-cd h3 { font-size:.93rem; margin-bottom:.55rem; }
.ind-cd ul { list-style:none; display:flex; flex-direction:column; gap:.28rem; }
.ind-cd li { font-size:.77rem; color:var(--tx2); display:flex; align-items:center; gap:6px; }
.ind-cd li::before { content:'→'; color:var(--c); font-size:.67rem; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   PRICING
══════════════════════════════════════════════════════════ */
.price-sec { background:var(--bg2); padding:9rem 0; }
.price-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:1.5rem; margin-top:3.5rem; }
.p-cd {
  background:var(--surf); border:1px solid var(--b1);
  border-radius:20px; padding:2.5rem; position:relative;
  transition:all .4s var(--ease); will-change:transform;
}
.p-cd:hover { transform:translateY(-6px); }
.p-cd.feat {
  border-color:var(--c);
  background:linear-gradient(160deg,rgba(var(--cr),.06),var(--surf));
  box-shadow:0 0 60px rgba(var(--cr),.1), 0 0 0 1px rgba(var(--cr),.22);
}
.p-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--c); color:#000; font-family:var(--head); font-size:.69rem; font-weight:700; padding:3px 18px; border-radius:99px; white-space:nowrap; }
.p-type  { font-size:.73rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.09em; margin-bottom:.45rem; font-weight:600; }
.p-amt   { font-family:var(--head); font-size:2.7rem; font-weight:800; line-height:1; margin-bottom:.2rem; }
.p-amt sup { font-size:1.2rem; vertical-align:super; }
.p-amt small { font-size:.86rem; font-weight:400; color:var(--muted); }
.p-hint  { font-size:.79rem; color:var(--muted2); margin-bottom:1.5rem; line-height:1.6; }
.p-feats { list-style:none; display:flex; flex-direction:column; gap:.65rem; margin-bottom:2rem; }
.p-feats li { font-size:.85rem; color:var(--tx2); display:flex; align-items:flex-start; gap:8px; }
.p-feats li::before { content:'✓'; color:var(--c); font-weight:800; flex-shrink:0; margin-top:1px; }
.p-cta  { display:block; text-align:center; padding:12px; border-radius:9px; font-family:var(--head); font-weight:700; font-size:.88rem; transition:all .25s; }
.pc-s   { background:var(--c); color:#000; }
.pc-s:hover { opacity:.88; transform:translateY(-2px); }
.pc-o   { border:1px solid var(--b2); color:var(--tx); }
.pc-o:hover { border-color:var(--c); color:var(--c); }
.p-note { max-width:720px; margin:2.5rem auto 0; background:rgba(255,200,60,.05); border:1px solid rgba(255,200,60,.15); border-radius:10px; padding:1.2rem 1.5rem; font-size:.84rem; color:rgba(255,210,80,.75); line-height:1.7; }

/* ══════════════════════════════════════════════════════════
   TIMELINE / PROCESS
══════════════════════════════════════════════════════════ */
.proc-sec { background:var(--bg3); padding:9rem 0; }
.tl { position:relative; max-width:760px; margin:4rem auto 0; padding:0 2rem; }
.tl-track { position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--b2); transform:translateX(-50%); overflow:hidden; }
.tl-fill  { position:absolute; top:0; left:0; right:0; background:linear-gradient(180deg,var(--c),var(--v)); height:0%; box-shadow:0 0 12px rgba(var(--cr),.6); }
.tl-step  { display:grid; grid-template-columns:1fr 60px 1fr; align-items:start; margin-bottom:4rem; }
.tl-step:nth-child(odd)  .tl-cnt { grid-column:1; text-align:right; padding-right:2.5rem; }
.tl-step:nth-child(odd)  .tl-node{ grid-column:2; }
.tl-step:nth-child(odd)  .tl-void{ grid-column:3; }
.tl-step:nth-child(even) .tl-void{ grid-column:1; }
.tl-step:nth-child(even) .tl-node{ grid-column:2; }
.tl-step:nth-child(even) .tl-cnt { grid-column:3; text-align:left; padding-left:2.5rem; }
.tl-node { display:flex; align-items:center; justify-content:center; padding-top:.2rem; position:relative; z-index:2; }
.tl-circ {
  width:52px; height:52px; border-radius:50%;
  background:var(--bg3); border:2px solid rgba(var(--cr),.3);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-weight:800; font-size:1.1rem; color:var(--c);
  box-shadow:0 0 18px rgba(var(--cr),.15); transition:all .4s;
}
.tl-circ.on { border-color:var(--c); box-shadow:0 0 28px rgba(var(--cr),.4); background:rgba(var(--cr),.1); }
.tl-cnt h3 { font-size:1.08rem; margin-bottom:.45rem; }
.tl-cnt p  { font-size:.86rem; color:var(--tx2); line-height:1.65; }

/* ══════════════════════════════════════════════════════════
   AUTOMATION
══════════════════════════════════════════════════════════ */
.auto-sec { background:var(--bg2); padding:9rem 0; }
.auto-gbg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--cr),.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--cr),.022) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000,transparent);
}
.auto-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.auto-text p { color:var(--tx2); font-size:.99rem; line-height:1.85; margin-bottom:1.4rem; }
.auto-cards  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.a-cd { background:var(--surf); border:1px solid var(--b1); border-radius:14px; padding:1.45rem; transition:all .35s var(--ease); will-change:transform; }
.a-cd:hover { border-color:rgba(var(--cr),.22); transform:scale(1.04); box-shadow:0 12px 32px rgba(0,0,0,.45); }
.a-ico { font-size:1.4rem; margin-bottom:.55rem; }
.a-t   { font-size:.88rem; font-weight:600; margin-bottom:.22rem; }
.a-s   { font-size:.77rem; color:var(--tx2); line-height:1.5; }

/* ══════════════════════════════════════════════════════════
   WHY / TRUST
══════════════════════════════════════════════════════════ */
.why-sec { background:var(--bg3); padding:9rem 0; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:1.2rem; margin-top:3rem; }
.why-i { background:var(--surf); border:1px solid var(--b1); border-radius:14px; padding:1.7rem; display:flex; gap:1.1rem; align-items:flex-start; transition:border-color .3s; }
.why-i:hover { border-color:rgba(var(--cr),.2); }
.why-ico { width:44px; height:44px; background:rgba(var(--cr),.08); border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.why-i h3 { font-size:.94rem; margin-bottom:.32rem; }
.why-i p  { font-size:.82rem; color:var(--tx2); line-height:1.65; }

/* ══════════════════════════════════════════════════════════
   CTA BLOCKS
══════════════════════════════════════════════════════════ */
.cta-blk {
  background:linear-gradient(150deg,rgba(20,20,48,1),rgba(12,12,30,1));
  border:1px solid var(--b2); border-radius:24px;
  padding:5.5rem; text-align:center; position:relative; overflow:hidden;
}
.cta-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; background:radial-gradient(circle,rgba(var(--cr),.07),transparent 65%); pointer-events:none; }
.cta-blk h2 { position:relative; margin-bottom:1rem; }
.cta-blk p  { color:var(--tx2); font-size:1.03rem; max-width:560px; margin:0 auto 2.5rem; position:relative; }
.cta-row    { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; }

/* ══════════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════════ */
.contact-sec { background:var(--bg2); padding:9rem 0; }
.c-bg { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 30% 50%,rgba(var(--cr),.04),transparent 60%); will-change:transform; }
.c-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:5rem; align-items:start; }
.c-info p { color:var(--tx2); font-size:1rem; line-height:1.85; margin-bottom:2rem; }
.c-dtl { display:flex; align-items:center; gap:13px; padding:1rem 1.2rem; background:var(--surf); border:1px solid var(--b1); border-radius:11px; margin-bottom:.7rem; color:var(--tx); transition:border-color .25s; }
.c-dtl:hover { border-color:rgba(var(--cr),.25); }
.c-ico { width:38px; height:38px; background:rgba(var(--cr),.08); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.c-lbl { font-size:.71rem; color:var(--muted); }
.c-val { font-size:.88rem; font-weight:500; }
.c-form-wrap {
  background:var(--surf); border:1px solid var(--b2);
  border-radius:22px; padding:2.75rem;
  position:relative; overflow:hidden;
}
.c-form-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),var(--v),transparent); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { margin-bottom:1rem; }
.fg label { display:block; font-size:.79rem; color:var(--muted); margin-bottom:6px; font-weight:500; letter-spacing:.02em; }
.fg input,.fg select,.fg textarea {
  width:100%; background:var(--bg3);
  border:1px solid var(--b2); border-radius:9px;
  padding:12px 15px; color:var(--tx); font-size:.89rem;
  font-family:var(--body); outline:none;
  transition:border-color .2s,box-shadow .2s;
  appearance:none; -webkit-appearance:none;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--c); box-shadow:0 0 0 3px rgba(var(--cr),.09); }
.fg textarea { resize:vertical; min-height:125px; }
.fg select option { background:#0e0e22; }
.btn-sub { width:100%; background:var(--c); color:#000; font-family:var(--head); font-weight:800; padding:15px; border-radius:10px; border:none; font-size:.98rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .35s var(--ease); }
.btn-sub:hover { opacity:.88; transform:translateY(-3px); box-shadow:0 12px 40px rgba(var(--cr),.3); }
.form-ok { display:none; text-align:center; padding:2.5rem; color:var(--g); font-size:1.1rem; font-weight:500; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer { background:var(--bg); border-top:1px solid var(--b1); padding:5rem 5% 2.5rem; }
.ft-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3.5rem; max-width:1200px; margin-left:auto; margin-right:auto; }
.ft-desc { color:var(--tx2); font-size:.86rem; line-height:1.75; max-width:280px; margin-top:1rem; }
.ft-col h4 { font-family:var(--head); font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:1.2rem; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.ft-col a  { color:var(--muted2); font-size:.86rem; transition:color .2s; }
.ft-col a:hover { color:var(--c); }
.ft-bot { border-top:1px solid var(--b1); padding-top:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; max-width:1200px; margin:0 auto; }
.ft-bot p { color:var(--muted2); font-size:.79rem; }
.ft-lnks { display:flex; gap:2rem; }
.ft-lnks a { color:var(--muted2); font-size:.79rem; transition:color .2s; }
.ft-lnks a:hover { color:var(--c); }
.ft-legal { max-width:1200px; margin:1.5rem auto 0; background:rgba(255,200,60,.05); border:1px solid rgba(255,200,60,.15); border-radius:8px; padding:.85rem 1.25rem; font-size:.76rem; color:rgba(255,210,80,.65); line-height:1.6; }

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .rv,.rv-s,.rv-l,.rv-r { opacity:1!important; transform:none!important; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .h-inner      { grid-template-columns:1fr; }
  .h-vis        { display:none; }
  .sticky-wrap  { grid-template-columns:1fr; }
  .sticky-l     { position:relative; height:auto; border-right:none; border-bottom:1px solid var(--b1); padding:4rem 5%; }
  .sticky-r     { padding:4rem 5%; }
  .sol-grid     { grid-template-columns:1fr; gap:3rem; }
  .ref-hero     { grid-template-columns:1fr; }
  .ref-vis      { min-height:260px; }
  .auto-layout  { grid-template-columns:1fr; gap:3rem; }
  .c-grid       { grid-template-columns:1fr; }
  .ft-grid      { grid-template-columns:1fr 1fr; }
  .cta-blk      { padding:4rem 2.5rem; }
  .n-links, .n-cta { display:none; }
  .burger       { display:flex; }
}
@media(max-width:700px) {
  .pad          { padding:5.5rem 0; }
  .hero         { padding:8rem 5% 4rem; }
  .form-row     { grid-template-columns:1fr; }
  .ft-grid      { grid-template-columns:1fr; gap:2.5rem; }
  .ft-bot       { flex-direction:column; align-items:flex-start; }
  .auto-cards   { grid-template-columns:1fr; }
  .cta-blk      { padding:3rem 1.5rem; }
  .tl           { padding:0 1rem; }
  .tl-step      { grid-template-columns:1fr; }
  .tl-track     { left:20px; }
  .tl-step .tl-void  { display:none; }
  .tl-step .tl-node  { grid-column:1; justify-content:flex-start; margin-bottom:.7rem; }
  .tl-step .tl-cnt   { grid-column:1; padding-left:4rem!important; padding-right:0!important; text-align:left!important; }
  h1 { font-size:2.2rem; } h2 { font-size:1.85rem; }
  .ref-info     { padding:2rem; }
  .pricing-grid { grid-template-columns:1fr; }
}