/* ============================================================
   DVGA Digital Solutions — Liquid Glass Design System
   Light · Airy · Apple-inspired refraction glass
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --turquoise: #21B6BD;
  --turquoise-bright: #38D6DD;
  --deep: #0E4C8A;
  --deep-2: #0A2E5C;
  --mint: #6FE3C9;

  /* Tweakable accent (overridden by tweaks) */
  --accent: var(--turquoise);
  --accent-2: var(--deep);

  /* Ink */
  --ink: #0C2233;
  --ink-soft: #41576a;
  --ink-faint: #6b8295;

  /* Glass */
  --glass-blur: 22px;
  --glass-sat: 175%;
  --glass-fill-1: rgba(255,255,255,.62);
  --glass-fill-2: rgba(255,255,255,.26);
  --glass-stroke: rgba(255,255,255,.65);
  --glass-shadow: 0 24px 60px -26px rgba(13,58,107,.42);

  /* Background field intensities (per direction) */
  --bg-base-1: #eaf2f7;
  --bg-base-2: #f6fbfc;
  --orb-a: rgba(56,214,221,.55);   /* turquoise */
  --orb-b: rgba(14,76,138,.40);    /* deep blue */
  --orb-c: rgba(111,227,201,.40);  /* mint */
  --orb-blur: 90px;
  --grid-alpha: .035;
  --noise-alpha: .035;

  /* Fonts */
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Geometry */
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --maxw: 1200px;
}

/* ---------- Direction presets ---------- */
:root[data-direction="aurora"]{
  --bg-base-1:#e9f1f7; --bg-base-2:#f7fcfd;
  --orb-a:rgba(56,214,221,.58); --orb-b:rgba(14,76,138,.40); --orb-c:rgba(111,227,201,.42);
  --orb-blur:90px; --glass-fill-1:rgba(255,255,255,.62); --glass-fill-2:rgba(255,255,255,.26);
  --grid-alpha:.035;
}
:root[data-direction="deep"]{
  --bg-base-1:#dde9f4; --bg-base-2:#eef6fb;
  --orb-a:rgba(33,182,189,.50); --orb-b:rgba(14,76,138,.62); --orb-c:rgba(40,120,200,.40);
  --orb-blur:80px; --glass-fill-1:rgba(255,255,255,.55); --glass-fill-2:rgba(236,245,252,.30);
  --glass-stroke:rgba(255,255,255,.7); --grid-alpha:.05; --ink-soft:#3a536b;
}
:root[data-direction="mist"]{
  --bg-base-1:#f1f6f8; --bg-base-2:#fbfdfe;
  --orb-a:rgba(56,214,221,.34); --orb-b:rgba(14,76,138,.20); --orb-c:rgba(111,227,201,.28);
  --orb-blur:110px; --glass-fill-1:rgba(255,255,255,.7); --glass-fill-2:rgba(255,255,255,.4);
  --glass-stroke:rgba(255,255,255,.8); --grid-alpha:.022; --glass-blur:26px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-base-2);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:color-mix(in oklab,var(--accent) 40%,white);color:var(--ink)}

/* ---------- Background field ---------- */
.bg-field{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-base-2), transparent 60%),
    linear-gradient(180deg,var(--bg-base-1),var(--bg-base-2));
}
.orb{position:absolute;border-radius:50%;filter:blur(var(--orb-blur));will-change:transform;opacity:.9}
.orb.a{width:46vw;height:46vw;background:var(--orb-a);top:-12vw;left:-8vw;animation:drift1 26s ease-in-out infinite}
.orb.b{width:42vw;height:42vw;background:var(--orb-b);bottom:-14vw;right:-6vw;animation:drift2 32s ease-in-out infinite}
.orb.c{width:34vw;height:34vw;background:var(--orb-c);top:38%;left:46%;animation:drift3 24s ease-in-out infinite}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,76,138,var(--grid-alpha)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,76,138,var(--grid-alpha)) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 80%);
  -webkit-mask:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 80%);
}
.bg-noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--noise-alpha);
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift1{50%{transform:translate(6vw,4vw) scale(1.08)}}
@keyframes drift2{50%{transform:translate(-5vw,-5vw) scale(1.12)}}
@keyframes drift3{50%{transform:translate(-4vw,3vw) scale(.92)}}
:root[data-anim="off"] .orb{animation:none}

/* ---------- Glass primitive ---------- */
.glass{
  position:relative;
  background:linear-gradient(150deg,var(--glass-fill-1),var(--glass-fill-2));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 1px rgba(255,255,255,.25),
    var(--glass-shadow);
}
/* bright refraction edge */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 66%,color-mix(in oklab,var(--accent) 55%,white));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
/* cursor-follow specular glow */
.glow{overflow:hidden}
.glow::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    color-mix(in oklab,var(--accent) 28%,transparent),transparent 62%);
  opacity:0;transition:opacity .35s ease;z-index:0;
}
.glow:hover::before{opacity:1}
.glow>*{position:relative;z-index:1}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);white-space:nowrap}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 25%,transparent)}
.h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(30px,4.4vw,52px);color:var(--ink);text-wrap:balance}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-soft);max-width:58ch;text-wrap:pretty}
.sec-head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;margin-bottom:52px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,filter .25s;
  white-space:nowrap;overflow:hidden}
.btn svg{width:18px;height:18px}
.btn-primary{color:#fff;
  background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 88%,white),var(--accent-2));
  box-shadow:0 10px 26px -10px color-mix(in oklab,var(--accent-2) 70%,transparent),
    inset 0 1px 0 rgba(255,255,255,.45);}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s ease}
.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn-primary:hover::after{left:130%}
.btn-ghost{color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px -14px rgba(13,58,107,.4)}
.btn-ghost:hover{transform:translateY(-2px);background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.45))}
.btn-sm{padding:10px 18px;font-size:14px}

/* ---------- Nav ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;transition:transform .4s cubic-bezier(.4,0,.2,1),top .3s}
.nav.nav-hidden{transform:translateY(-150%)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:10px 12px 10px 18px;border-radius:999px;
  background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.28));
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--glass-stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 30px -16px rgba(13,58,107,.35);
  transition:padding .3s,box-shadow .3s,background .3s}
.nav.scrolled .nav-inner{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 40px -18px rgba(13,58,107,.5)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;flex-shrink:0}
.brand-logo{height:42px;width:auto;display:block}
.foot-brand .brand-logo{height:56px}
.brand-mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 88%,white),var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -8px color-mix(in oklab,var(--accent-2) 75%,transparent)}
.brand small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:0}
.nav-links{display:flex;gap:4px}
.nav-links a{padding:9px 15px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:color .2s,background .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.45)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.4);align-items:center;justify-content:center}
.nav-burger svg{width:20px;height:20px;stroke:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:150px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink-soft);
  background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.32));
  border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.badge .pill{font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;padding:3px 9px;border-radius:999px;
  background:linear-gradient(135deg,var(--turquoise-bright),var(--deep))}
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.0;
  font-size:clamp(40px,6.2vw,76px);margin:22px 0 0;text-wrap:balance}
.hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(17px,1.7vw,21px);color:var(--ink-soft);margin:22px 0 0;max-width:54ch;text-wrap:pretty}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:36px;flex-wrap:wrap}
.hero-trust .t{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-soft);font-weight:600}
.hero-trust svg{width:18px;height:18px;stroke:var(--accent)}

/* Hero dashboard mockup */
.mock{padding:18px;border-radius:var(--r-xl)}
.mock-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px}
.mock-top .dots{display:flex;gap:6px}
.mock-top .dots i{width:10px;height:10px;border-radius:50%;background:rgba(14,76,138,.18)}
.mock-top .live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent-2)}
.mock-top .live .blip{width:8px;height:8px;border-radius:50%;background:#19c37d;box-shadow:0 0 0 0 rgba(25,195,125,.5);animation:blip 2s infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(25,195,125,.5)}70%{box-shadow:0 0 0 8px rgba(25,195,125,0)}100%{box-shadow:0 0 0 0 rgba(25,195,125,0)}}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.mstat{padding:13px 14px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.mstat .k{font-size:11px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em}
.mstat .v{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}
.mstat .d{font-size:11px;font-weight:700;color:#19a06a;margin-top:1px}
.mock-chart{padding:14px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.66),rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.mock-chart .ch-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mock-chart .ch-head b{font-size:13px;font-weight:700}
.mock-chart .ch-head span{font-size:11.5px;color:var(--ink-faint);font-weight:600}
.spark{width:100%;height:88px;display:block}
.mock-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6)}
.mrow .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(140deg,var(--turquoise-bright),var(--deep))}
.mrow .ic svg{width:16px;height:16px;stroke:#fff}
.mrow .nm{font-size:13px;font-weight:700}
.mrow .sub{font-size:11px;color:var(--ink-faint);font-weight:600}
.mrow .amt{margin-left:auto;font-size:13.5px;font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums}
.mock-badge{position:absolute;top:-16px;right:-14px;padding:9px 15px;border-radius:14px;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--turquoise-bright),var(--deep));
  box-shadow:0 14px 30px -12px rgba(14,76,138,.7),inset 0 1px 0 rgba(255,255,255,.4);
  transform:rotate(3deg)}

/* ---------- Stat band ---------- */
.statband{margin-top:64px}
.statband-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-radius:var(--r-lg);overflow:hidden;padding:0}
.statcell{padding:30px 26px;text-align:center}
.statcell .num{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:clamp(34px,4vw,50px);
  background:linear-gradient(130deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.statcell .lbl{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:6px;text-wrap:balance}

/* ---------- Section spacing ---------- */
.sec{padding:96px 0}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{padding:26px;border-radius:var(--r-lg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card:hover{transform:translateY(-5px)}
.svc{grid-column:span 2}
.svc.wide{grid-column:span 3}
.svc-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(145deg,color-mix(in oklab,var(--accent) 80%,white),var(--accent-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 26px -12px color-mix(in oklab,var(--accent-2) 65%,transparent)}
.svc-ic svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.9}
.svc h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.svc p{font-size:14.5px;color:var(--ink-soft);text-wrap:pretty}
.svc .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--accent-2)}
.svc .more svg{width:15px;height:15px;transition:transform .25s}
.svc:hover .more svg{transform:translateX(4px)}

/* ---------- Web App showcase ---------- */
.app-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.feat-list{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .chk{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;margin-top:1px;
  background:linear-gradient(140deg,var(--turquoise-bright),var(--deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.feat .chk svg{width:16px;height:16px;stroke:#fff;stroke-width:2.6}
.feat .ft{font-size:15.5px;font-weight:600;color:var(--ink);padding-top:4px}
.panel{padding:20px;border-radius:var(--r-xl)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:2px 4px}
.panel-head b{font-size:15px;font-weight:800}
.panel-head .live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--accent-2)}
.panel-head .live .blip{width:8px;height:8px;border-radius:50%;background:#19c37d;animation:blip 2s infinite}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:14px}
.kpi{padding:15px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.7)}
.kpi .k{font-size:11.5px;font-weight:700;color:var(--ink-faint)}
.kpi .v{font-size:23px;font-weight:800;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11px;font-weight:700;color:#19a06a;margin-top:2px}
.bars{padding:16px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.38));border:1px solid rgba(255,255,255,.7)}
.bars b{font-size:13px;font-weight:700;display:block;margin-bottom:12px}
.barrow{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.barrow .nm{font-size:12.5px;font-weight:600;color:var(--ink-soft);width:130px;flex:none}
.barrow .track{flex:1;height:9px;border-radius:99px;background:rgba(14,76,138,.1);overflow:hidden}
.barrow .fill{height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.barrow .val{font-size:12px;font-weight:800;color:var(--accent-2);width:62px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Process ---------- */
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:30px 28px;border-radius:var(--r-lg)}
.step .n{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-display);
  font-weight:800;font-size:21px;color:#fff;margin-bottom:18px;
  background:linear-gradient(140deg,var(--turquoise-bright),var(--deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -12px rgba(14,76,138,.6)}
.step h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--ink-soft);text-wrap:pretty}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.why-feature{padding:34px;border-radius:var(--r-xl);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.why-big{font-family:var(--font-display);font-weight:800;font-size:clamp(48px,7vw,82px);letter-spacing:-.04em;line-height:1;
  background:linear-gradient(130deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.why-cells{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.why-cell{padding:26px;border-radius:var(--r-lg)}
.why-cell .wic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;
  background:linear-gradient(145deg,color-mix(in oklab,var(--accent) 80%,white),var(--accent-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.why-cell .wic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9}
.why-cell h4{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:7px}
.why-cell p{font-size:14px;color:var(--ink-soft);text-wrap:pretty}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.contact-card{padding:38px;border-radius:var(--r-xl)}
.contact-info{display:flex;flex-direction:column;gap:18px;margin-top:26px}
.cinfo{display:flex;gap:14px;align-items:center}
.cinfo .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(140deg,var(--turquoise-bright),var(--deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cinfo .ic svg{width:20px;height:20px;stroke:#fff}
.cinfo{min-width:0}
.cinfo>div{min-width:0}
.cinfo .k{font-size:12px;color:var(--ink-faint);font-weight:700}
.cinfo .v{font-size:15px;font-weight:700;overflow-wrap:anywhere}
.form{padding:34px;border-radius:var(--r-xl)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14.5px;color:var(--ink);padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.6);border:1px solid var(--glass-stroke);
  box-shadow:inset 0 1px 2px rgba(13,58,107,.06);transition:border .2s,box-shadow .2s,background .2s;outline:none}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:color-mix(in oklab,var(--accent) 60%,white);background:rgba(255,255,255,.85);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.form .btn-primary{width:100%;justify-content:center;margin-top:6px}

/* ---------- Footer ---------- */
.footer{margin-top:90px;padding:54px 0 30px}
.foot-card{padding:42px 40px;border-radius:var(--r-xl)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{font-size:14px;color:var(--ink-soft);max-width:34ch}
.foot-col h5{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent-2)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:34px;padding-top:24px;border-top:1px solid rgba(14,76,138,.1);font-size:13px;color:var(--ink-faint)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:11px;
  padding:12px 18px 12px 14px;border-radius:999px;color:#fff;font-weight:700;font-size:14px;
  background:linear-gradient(135deg,#25D366,#128C7E);
  box-shadow:0 16px 36px -12px rgba(18,140,126,.7),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .25s}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float svg{width:22px;height:22px;fill:#fff}

/* ---------- Mobile dropdown menu ---------- */
.nav-menu{display:none;flex-direction:column;gap:6px;margin-top:10px;padding:14px;
  border-radius:24px;
  background:linear-gradient(150deg,rgba(255,255,255,.93),rgba(244,250,252,.9));
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 44px -18px rgba(13,58,107,.5)}
.nav-menu a.m-link{padding:13px 16px;border-radius:14px;font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between}
.nav-menu a.m-link:active{background:rgba(255,255,255,.6)}
.nav-menu .m-divider{height:1px;background:rgba(14,76,138,.12);margin:6px 4px}
.nav-menu .btn{width:100%;justify-content:center;font-size:16px;padding:15px}
.nav.open .nav-menu{display:flex;animation:menuIn .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}
:root[data-anim="off"] .reveal{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.orb{animation:none}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.app-grid,.contact-grid,.why-grid{grid-template-columns:1fr}
  .why-cells{grid-template-columns:1fr 1fr}
  .svc{grid-column:span 3}.svc.wide{grid-column:span 6}
  .statband-inner{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .app-visual{order:-1}
}
@media (max-width:760px){
  .wrap{padding:0 18px}
  .nav{top:10px}
  .nav-inner{padding:9px 9px 9px 14px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta .btn{display:none}
  .brand-logo{height:34px}
  .hero{padding:116px 0 44px}
  .hero h1{font-size:clamp(34px,9vw,52px)}
  .hero p.sub{font-size:17px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1;justify-content:center;min-width:0}
  .hero-trust{gap:14px 18px;margin-top:28px}
  .badge{font-size:12px}
  .mock-badge{top:-12px;right:-6px;font-size:11px;padding:7px 12px}
  .statband{margin-top:44px}
  .statband-inner{grid-template-columns:1fr 1fr}
  .statcell{padding:22px 16px}
  .sec-head{margin-bottom:38px}
  .svc-grid{grid-template-columns:1fr}.svc,.svc.wide{grid-column:span 1}
  .card{padding:22px}
  .proc-grid{grid-template-columns:1fr}
  .why-grid{gap:16px}
  .why-cells{grid-template-columns:1fr}
  .why-feature{padding:28px}
  .frow{grid-template-columns:1fr}
  .contact-card,.form{padding:28px 22px}
  .foot-card{padding:32px 24px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}
  .sec{padding:60px 0}
  .wa-float{right:14px;bottom:14px;padding:12px;font-size:0;gap:0}
  .wa-float svg{width:26px;height:26px}
}
@media (max-width:380px){
  .statband-inner{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}