/* ==========================================================================
   K2 Developers — style.css
   Software studio site. Ink + electric blue + mint, on near-white.
   ========================================================================== */

:root {
  /* brand — teal and coral on white. Light throughout, no dark sections. */
  --brand:    #0f9d8e;
  --brand-d:  #0b7a6f;
  --brand-l:  #7fded4;
  --brand-xl: #d8f5f0;
  --accent:   #ff6b57;
  --accent-d: #e04b36;
  --honey:    #ffc247;
  --plum:     #6b5bd2;

  /* aliases so existing rules keep working */
  --violet:   var(--brand);
  --violet-d: var(--brand-d);
  --violet-l: var(--brand-l);
  --cyan:     #34c6bd;
  --mint:     #2fd0a5;
  --coral:    var(--accent);
  --gold:     var(--honey);
  --blue:     var(--brand);
  --blue-d:   var(--brand-d);
  --blue-l:   var(--brand-l);
  --amber:    var(--honey);
  --rose:     var(--accent);

  /* neutrals — cool, light, never black */
  --ink:      #16323a;
  --ink-2:    #1f4450;
  --slate:    #2c5561;
  --text:     #4d646d;
  --muted:    #7f959d;
  --line:     #e2eded;
  --line-2:   #eef6f5;
  --tint:     #f5fbfa;
  --tint-2:   #e6f6f2;
  --white:    #ffffff;

  --g-brand:  linear-gradient(120deg, var(--brand) 0%, #35c3b4 100%);
  --g-mint:   linear-gradient(120deg, #2fd0a5, var(--brand));
  --g-warm:   linear-gradient(120deg, var(--accent) 0%, var(--honey) 100%);
  --g-aurora: linear-gradient(120deg, var(--brand) 0%, #35c3b4 34%, var(--honey) 70%, var(--accent) 100%);
  --g-deep:   linear-gradient(150deg, #eafaf7 0%, #f6fbff 52%, #fff3ee 100%);
  --g-ink:    var(--g-deep);

  --ff:      "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:40px; --s8:56px; --s9:72px; --s10:96px;

  --wrap: 1200px;
  --gut: 20px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;

  --sh-1: 0 1px 2px rgba(22,50,58,.05), 0 4px 14px rgba(22,50,58,.05);
  --sh-2: 0 12px 32px rgba(22,50,58,.08);
  --sh-3: 0 26px 60px rgba(22,50,58,.13);
  --sh-blue: 0 14px 32px rgba(15,157,142,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --hh: 70px;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:88px; }
body {
  margin:0; font-family:var(--ff); font-size:16px; line-height:1.62;
  color:var(--text); background:var(--white); overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
ul,ol { margin:0; padding:0; list-style:none; }
table { border-collapse:collapse; width:100%; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }
::selection { background:var(--blue); color:#fff; }

h1,h2,h3,h4 { font-family:var(--ff); font-weight:800; line-height:1.14; letter-spacing:-.03em; color:var(--ink); margin:0 0 var(--s3); text-wrap:balance; }
h1 { font-size:clamp(2.1rem,4.4vw,3.4rem); }
h2 { font-size:clamp(1.6rem,3vw,2.35rem); }
h3 { font-size:clamp(1.1rem,1.6vw,1.3rem); }
h4 { font-size:1rem; }
p { margin:0 0 var(--s3); }
p:last-child { margin-bottom:0; }
strong { color:var(--ink); font-weight:700; }
.lead { font-size:clamp(1rem,1.35vw,1.1rem); color:var(--muted); max-width:64ch; }
.small { font-size:.86rem; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px 6px 9px; border-radius:99px;
  background:var(--tint-2); color:var(--blue-d);
  font-family:var(--ff-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s3);
}
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); }
.eyebrow.is-light { background:rgba(255,255,255,.12); color:#cfd8ff; }
.grad { background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- layout ------------------------------------------------------ */
.wrap { width:min(100% - (var(--gut)*2), var(--wrap)); margin-inline:auto; }
.wrap-narrow { width:min(100% - (var(--gut)*2), 800px); margin-inline:auto; }
.section { padding-block:clamp(52px,5.6vw,88px); }
.section-sm { padding-block:clamp(32px,3.4vw,52px); }
.section-head { max-width:700px; margin-bottom:var(--s7); }
.section-head :last-child { margin-bottom:0; }
.section-head.is-center { margin-inline:auto; text-align:center; }
.section-head.is-split { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); }
.section-head.is-split > div { max-width:640px; }

.bg-tint { background:var(--tint); }
.bg-ink { background:var(--ink); color:#a8b2cc; }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4 { color:#fff; }
.bg-ink .lead { color:#94a0c0; }

.grid { display:grid; gap:var(--s5); }
.g-2 { grid-template-columns:repeat(2,1fr); }
.g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); }
.gap-sm { gap:var(--s4); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.4vw,64px); align-items:center; }
.split.is-wide-left { grid-template-columns:1.1fr .9fr; }
.split.is-wide-right { grid-template-columns:.9fr 1.1fr; }
.split.is-top { align-items:start; }
.row { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.stack > * + * { margin-top:var(--s3); }
.mt-5 { margin-top:var(--s5); } .mt-6 { margin-top:var(--s6); }
.center { text-align:center; }
hr.rule { border:0; height:1px; background:var(--line); margin:var(--s6) 0; }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:2px solid transparent; border-radius:99px;
  font-size:.93rem; font-weight:700; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s, background-color .22s, color .22s, border-color .22s;
}
.btn > span { position:relative; z-index:2; }
.btn::before { content:""; position:absolute; inset:0; background:rgba(255,255,255,.2); transform:translateY(101%); transition:transform .34s var(--ease); }
.btn:hover::before { transform:translateY(0); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-primary:hover { box-shadow:0 16px 38px rgba(79,107,255,.42); }
.btn-mint { background:var(--g-mint); color:#04302a; box-shadow:0 10px 26px rgba(34,211,167,.32); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-outline { border-color:var(--line); color:var(--ink); background:#fff; }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-ghost { border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost:hover { background:#fff; color:var(--ink); border-color:#fff; }
.btn-sm { padding:9px 18px; font-size:.85rem; }
.btn-block { width:100%; }
.link-arrow { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.9rem; color:var(--blue); transition:gap .24s var(--ease), color .2s; }
.link-arrow::after { content:"\2192"; transition:transform .24s var(--ease); }
.link-arrow:hover { color:var(--violet); }
.link-arrow:hover::after { transform:translateX(4px); }

/* ---------- header ------------------------------------------------------ */
.topbar { background:var(--ink); color:#8d99b8; font-size:.8rem; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:36px; flex-wrap:wrap; }
.topbar ul { display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; }
.topbar a:hover { color:var(--mint); }
.topbar .tag-live { display:inline-flex; align-items:center; gap:7px; }
.topbar .tag-live i { width:7px; height:7px; border-radius:50%; background:var(--mint); animation:pulse 2s ease-out infinite; }
@keyframes pulse { 70%{ box-shadow:0 0 0 8px rgba(34,211,167,0);} 100%{ box-shadow:0 0 0 0 rgba(34,211,167,0);} }

.header { position:sticky; top:0; z-index:90; background:rgba(255,255,255,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); transition:box-shadow .3s; }
.header.is-stuck { box-shadow:var(--sh-1); }
.header .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:var(--hh); }
.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand img { width:38px; height:38px; border-radius:11px; }
.brand-name { font-weight:800; font-size:1.06rem; color:var(--ink); line-height:1.05; letter-spacing:-.02em; }
.brand-sub { font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.nav-list { display:flex; align-items:center; gap:2px; }
.nav-list > li { position:relative; }
.nav-list > li > a { display:flex; align-items:center; gap:5px; padding:9px 13px; border-radius:var(--r-sm); font-size:.92rem; font-weight:600; color:var(--ink); white-space:nowrap; transition:color .2s, background-color .2s; }
.nav-list > li > a:hover { color:var(--blue); background:var(--tint); }
.nav-list > li > a.is-active { color:var(--blue); }
.nav-list > li > a.is-active::after { content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px; background:var(--g-brand); }
.has-sub > a::after { content:""; width:5px; height:5px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); }
.submenu { position:absolute; top:calc(100% + 6px); left:0; min-width:270px; padding:var(--s2); background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s, visibility .22s, transform .22s var(--ease); z-index:5; }
.has-sub:hover .submenu,.has-sub:focus-within .submenu { opacity:1; visibility:visible; transform:none; }
.submenu a { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-sm); transition:background-color .18s; }
.submenu a:hover { background:var(--tint); }
.submenu b { display:block; font-size:.88rem; color:var(--ink); }
.submenu span { font-size:.76rem; color:var(--muted); }
.submenu i { flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--tint-2); }
.submenu i svg { width:15px; height:15px; fill:none; stroke:var(--blue); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.nav-cta { display:flex; align-items:center; gap:var(--s3); flex:none; }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; position:relative; }
.nav-toggle span { position:absolute; left:50%; top:50%; width:17px; height:2px; border-radius:2px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle span:nth-child(1){ transform:translate(-50%,-6px);} .nav-toggle span:nth-child(3){ transform:translate(-50%,4px);}
.nav-toggle.is-open span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){ opacity:0;}
.nav-toggle.is-open span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg);}
.nav-backdrop { position:fixed; inset:0; background:rgba(11,16,32,.55); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; z-index:95; }
.nav-backdrop.is-open { opacity:1; visibility:visible; }
.scroll-progress { position:absolute; left:0; bottom:-1px; height:3px; width:100%; background:var(--g-brand); transform:scaleX(0); transform-origin:0 50%; }

/* ---------- hero -------------------------------------------------------- */
.hero { position:relative; background:var(--g-deep); color:#a8b2cc; overflow:hidden; }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero::before { width:620px; height:620px; right:-180px; top:-260px; background:radial-gradient(circle,rgba(79,107,255,.55),transparent 66%); animation:drift 18s ease-in-out infinite alternate; }
.hero::after { width:520px; height:520px; left:-200px; bottom:-260px; background:radial-gradient(circle,rgba(139,92,246,.42),transparent 66%); animation:drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform:translate(70px,44px) scale(1.2);} }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(52px,6.4vw,92px); }
.hero h1 { color:#fff; margin-bottom:var(--s4); }
.hero-text { color:#a8b6d8; font-size:clamp(.98rem,1.3vw,1.1rem); margin-bottom:var(--s6); max-width:52ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero-tags { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6); }
.hero-tags li { font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.06em; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#c3cdea; }

/* floating product screenshot */
.hero-shot { position:relative; }
.hero-shot img { border-radius:14px; box-shadow:0 40px 90px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); animation:floaty 9s ease-in-out infinite; }
@keyframes floaty { 50% { transform:translateY(-14px); } }
.hero-shot .chip {
  position:absolute; background:#fff; color:var(--ink); border-radius:12px;
  padding:10px 14px; box-shadow:var(--sh-3); animation:floaty 7s ease-in-out infinite;
}
.hero-shot .chip b { display:block; font-size:1.05rem; font-weight:800; line-height:1.1; }
.hero-shot .chip span { font-size:.72rem; color:var(--muted); }
.hero-shot .chip-1 { left:-26px; bottom:16%; }
.hero-shot .chip-2 { right:-18px; top:10%; animation-delay:1.3s; }

/* ---------- trust bar --------------------------------------------------- */
.trust { border-block:1px solid var(--line); background:var(--white); }
.trust .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-block:var(--s5); }
.trust b { font-size:1.5rem; font-weight:800; color:var(--ink); display:block; line-height:1; }
.trust span { font-size:.82rem; color:var(--muted); }

/* ---------- page head --------------------------------------------------- */
.pagehead { position:relative; background:var(--g-deep); color:#a8b2cc; overflow:hidden; }
.pagehead::before { content:""; position:absolute; width:560px; height:560px; right:-160px; top:-240px; border-radius:50%; background:radial-gradient(circle,rgba(79,107,255,.5),transparent 66%); animation:drift 20s ease-in-out infinite alternate; }
.pagehead::after { content:""; position:absolute; width:420px; height:420px; left:-150px; bottom:-220px; border-radius:50%; background:radial-gradient(circle,rgba(34,211,167,.3),transparent 66%); animation:drift 26s ease-in-out infinite alternate-reverse; }
.pagehead-inner { position:relative; z-index:2; padding-block:clamp(46px,5.4vw,78px); }
.pagehead h1 { color:#fff; margin-bottom:var(--s3); }
.pagehead p { color:#a8b6d8; max-width:60ch; margin:0; }
.crumbs { display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; font-size:.8rem; color:#7c8bb0; margin-bottom:var(--s4); }
.crumbs a:hover { color:var(--mint); }

/* ---------- product cards ----------------------------------------------- */
.prod {
  position:relative; display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .32s var(--ease), box-shadow .32s, border-color .32s;
}
.prod:hover { transform:translateY(-7px); box-shadow:var(--sh-3); border-color:transparent; }
.prod-shot { position:relative; padding:var(--s5) var(--s5) 0; background:var(--tint); overflow:hidden; }
.prod-shot img { border-radius:10px 10px 0 0; box-shadow:0 -2px 24px rgba(11,16,32,.12); transition:transform .6s var(--ease); }
.prod:hover .prod-shot img { transform:translateY(-8px) scale(1.02); }
.prod-body { padding:var(--s5); display:flex; flex-direction:column; flex:1; }
.prod-ic { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--g-brand); color:#fff; margin-bottom:var(--s4); box-shadow:var(--sh-blue); transition:transform .35s var(--ease); }
.prod:hover .prod-ic { transform:rotate(-7deg) scale(1.06); }
.prod-ic svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.prod h3 { margin-bottom:var(--s2); }
.prod p { font-size:.92rem; }
.prod ul { display:flex; flex-wrap:wrap; gap:6px; margin:var(--s4) 0 var(--s5); }
.prod ul li { font-size:.73rem; font-weight:700; color:var(--blue-d); background:var(--tint-2); padding:4px 10px; border-radius:7px; }
.prod .prod-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-top:var(--s4); border-top:1px dashed var(--line); }

/* ---------- feature tiles ----------------------------------------------- */
.feat { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); height:100%; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.feat:hover { transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent; }
.feat-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--tint-2); color:var(--blue); margin-bottom:var(--s4); transition:background-color .3s,color .3s,transform .35s var(--ease); }
.feat:hover .feat-ic { background:var(--g-brand); color:#fff; transform:rotate(-6deg); }
.feat-ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feat h3 { font-size:1.04rem; margin-bottom:var(--s2); }
.feat p { font-size:.9rem; margin:0; }
.bg-ink .feat { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
.bg-ink .feat h3 { color:#fff; }
.bg-ink .feat p { color:#94a0c0; }
.bg-ink .feat-ic { background:rgba(255,255,255,.1); color:var(--mint); }

/* ---------- process steps ----------------------------------------------- */
.steps { counter-reset:st; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); position:relative; }
.step { counter-increment:st; padding:var(--s5); border-radius:var(--r); background:#fff; border:1px solid var(--line); transition:transform .28s var(--ease), box-shadow .28s; }
.step:hover { transform:translateY(-5px); box-shadow:var(--sh-2); }
.step::before { content:counter(st,decimal-leading-zero); display:block; font-size:1.5rem; font-weight:800; color:var(--blue); opacity:.3; margin-bottom:var(--s2); }
.step h3 { font-size:1rem; } .step p { font-size:.88rem; margin:0; }

/* ---------- stack chips ------------------------------------------------- */
.stack-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s3); }
.tech { display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.tech:hover { transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--blue-l); }
.tech i { flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-family:var(--ff-mono); font-size:.7rem; font-weight:700; color:#fff; background:var(--c,var(--blue)); }
.tech b { font-size:.85rem; color:var(--ink); display:block; line-height:1.2; }
.tech span { font-size:.7rem; color:var(--muted); }

/* ---------- stats ------------------------------------------------------- */
.stat-tile { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); text-align:center; }
.bg-ink .stat-tile { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13); }
.stat-tile .n { display:block; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:800; line-height:1; color:var(--blue); letter-spacing:-.03em; }
.bg-ink .stat-tile .n { color:var(--mint); }
.stat-tile .l { display:block; font-size:.82rem; color:var(--muted); margin-top:6px; font-weight:600; }
.bg-ink .stat-tile .l { color:#8d99b8; }

/* ---------- pricing ----------------------------------------------------- */
.plan { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6) var(--s5); height:100%; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.plan:hover { transform:translateY(-6px); box-shadow:var(--sh-3); }
.plan.is-featured { border-color:var(--blue); box-shadow:0 18px 44px rgba(79,107,255,.18); }
.plan-ribbon { position:absolute; right:0; top:20px; background:var(--g-brand); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:99px 0 0 99px; }
.plan h3 { margin-bottom:var(--s2); }
.plan .price { font-size:2rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; margin-bottom:4px; }
.plan .price span { font-size:.85rem; font-weight:600; color:var(--muted); }
.plan ul { margin:var(--s5) 0; display:grid; gap:10px; }
.plan ul li { display:flex; gap:10px; font-size:.9rem; align-items:flex-start; }
.plan ul li::before { content:""; flex:none; width:17px; height:17px; margin-top:3px; border-radius:50%; background:var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6bff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.plan .btn { margin-top:auto; }

/* ---------- accordion / tables / forms ---------------------------------- */
.accordion { display:grid; gap:var(--s3); }
.acc-item { border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.acc-item.is-open { border-color:var(--blue-l); box-shadow:var(--sh-2); }
.acc-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s4) var(--s5); background:none; border:0; cursor:pointer; text-align:left; font-size:1rem; font-weight:700; color:var(--ink); }
.acc-icon { flex:none; width:26px; height:26px; border-radius:50%; background:var(--tint-2); display:grid; place-items:center; position:relative; transition:background-color .25s, transform .3s var(--ease); }
.acc-icon::before,.acc-icon::after { content:""; position:absolute; background:var(--blue); border-radius:2px; transition:opacity .25s, background-color .25s; }
.acc-icon::before { width:11px; height:2px; } .acc-icon::after { width:2px; height:11px; }
.acc-item.is-open .acc-icon { background:var(--blue); transform:rotate(180deg); }
.acc-item.is-open .acc-icon::before { background:#fff; }
.acc-item.is-open .acc-icon::after { opacity:0; }
.acc-panel { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-panel-inner { padding:0 var(--s5) var(--s5); font-size:.93rem; max-width:78ch; }

.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.data-table { min-width:600px; font-size:.9rem; }
.data-table th,.data-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top; }
.data-table thead th { background:var(--ink); color:#fff; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:var(--tint); }
.data-table td:first-child { font-weight:700; color:var(--ink); }

.form-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--sh-2); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field { display:flex; flex-direction:column; gap:6px; }
.field.is-full { grid-column:1/-1; }
.field label { font-size:.8rem; font-weight:700; color:var(--ink); }
.field label .req { color:var(--rose); }
.field input,.field select,.field textarea { padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--tint); font-size:.94rem; transition:border-color .22s, background-color .22s, box-shadow .22s; }
.field textarea { resize:vertical; min-height:100px; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(79,107,255,.13); }
.field.has-error input,.field.has-error select,.field.has-error textarea { border-color:var(--rose); background:#fff5f7; }
.field-error { font-size:.78rem; color:var(--rose); display:none; }
.field.has-error .field-error { display:block; }
.form-note { font-size:.8rem; color:var(--muted); }
.form-alert { display:none; padding:12px 16px; border-radius:var(--r-sm); background:#e9fbf5; border:1px solid #b7ecd9; color:#0f7a5c; font-size:.9rem; margin-bottom:var(--s4); }
.form-alert.is-visible { display:block; }

/* ---------- contact items ----------------------------------------------- */
.contact-item { display:flex; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--line); }
.contact-item:last-child { border-bottom:0; }
.contact-ic { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--tint-2); color:var(--blue); }
.contact-ic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contact-item h4 { margin-bottom:2px; font-size:.96rem; }
.contact-item p { margin:0; font-size:.93rem; }

/* ---------- cta --------------------------------------------------------- */
.cta { position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--g-deep); color:#a8b6d8; padding:clamp(32px,4.4vw,60px); text-align:center; }
.cta h2 { color:#fff; max-width:22ch; margin-inline:auto; }
.cta p { max-width:56ch; margin-inline:auto; }
.cta::before,.cta::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.cta::before { width:320px; height:320px; right:-70px; top:-120px; background:radial-gradient(circle,rgba(79,107,255,.5),transparent 66%); animation:drift 15s ease-in-out infinite alternate; }
.cta::after { width:280px; height:280px; left:-80px; bottom:-130px; background:radial-gradient(circle,rgba(34,211,167,.36),transparent 66%); animation:drift 19s ease-in-out infinite alternate-reverse; }
.cta > * { position:relative; z-index:2; }
.cta-actions { display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:var(--s5); }

/* ---------- footer ------------------------------------------------------ */
.footer { background:var(--ink); color:#8d99b8; padding-top:clamp(44px,5vw,68px); font-size:.9rem; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,3.4vw,44px); padding-bottom:var(--s8); }
.footer h4 { color:#fff; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; margin-bottom:var(--s4); }
.footer a { transition:color .2s, padding-left .22s var(--ease); }
.footer-links li { margin-bottom:9px; }
.footer-links a:hover { color:var(--mint); padding-left:5px; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:var(--s4); }
.footer-brand img { width:38px; height:38px; border-radius:11px; }
.footer-brand .brand-name { color:#fff; }
.footer .social { display:flex; gap:var(--s2); margin-top:var(--s4); }
.footer .social a { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); transition:background-color .22s, transform .22s var(--ease); }
.footer .social a:hover { background:var(--blue); transform:translateY(-2px); }
.footer .social svg { width:14px; height:14px; fill:currentColor; }
.footer-contact li { margin-bottom:var(--s3); line-height:1.55; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:var(--s4); display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:.82rem; color:#6f7c9c; }

/* ---------- floating actions -------------------------------------------- */
.wa-float { position:fixed; right:18px; bottom:74px; z-index:85; display:flex; align-items:center; height:52px; padding:0 14px; border-radius:99px; background:#25d366; color:#fff; box-shadow:0 12px 28px rgba(37,211,102,.4); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s; }
.wa-float svg { width:26px; height:26px; fill:currentColor; flex:none; position:relative; z-index:2; }
.wa-float b { max-width:0; white-space:nowrap; overflow:hidden; font-size:.88rem; font-weight:700; position:relative; z-index:2; transition:max-width .35s var(--ease), margin-left .35s var(--ease); }
.wa-float:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(37,211,102,.5); }
.wa-float:hover b { max-width:190px; margin-left:10px; }
.wa-pulse { position:absolute; inset:0; border-radius:99px; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.totop { position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; border:0; background:var(--blue); color:#fff; cursor:pointer; display:grid; place-items:center; z-index:80; opacity:0; visibility:hidden; transform:translateY(10px); box-shadow:var(--sh-blue); transition:opacity .3s,visibility .3s,transform .3s var(--ease),background-color .22s; }
.totop.is-visible { opacity:1; visibility:visible; transform:none; }
.totop:hover { background:var(--violet); }
.totop svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- motion ------------------------------------------------------ */
[data-enter] { opacity:0; transform:translateY(16px); }
.is-loaded [data-enter] { animation:enterUp .8s var(--ease) forwards; animation-delay:calc(var(--i,0)*100ms); }
@keyframes enterUp { to { opacity:1; transform:none; } }
.reveal { opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal[data-anim="up"],.reveal:not([data-anim]) { transform:translateY(24px); }
.reveal[data-anim="left"] { transform:translateX(-30px); }
.reveal[data-anim="right"] { transform:translateX(30px); }
.reveal[data-anim="zoom"] { transform:scale(.95); }
.reveal.is-in { opacity:1; transform:none; }
.preload { position:fixed; inset:0; z-index:300; background:var(--ink); display:grid; place-items:center; transition:opacity .5s var(--ease), visibility .5s; }
.preload.is-done { opacity:0; visibility:hidden; }
.preload-name { font-weight:800; color:#fff; font-size:1.2rem; text-align:center; letter-spacing:-.02em; }
.preload-bar { width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.14); overflow:hidden; margin:var(--s4) auto 0; }
.preload-bar i { display:block; height:100%; width:40%; background:var(--g-brand); animation:pre 1.1s var(--ease) infinite; }
@keyframes pre { from{transform:translateX(-110%);} to{transform:translateX(320%);} }

/* ---------- responsive -------------------------------------------------- */
@media (max-width:1120px){ .stack-grid { grid-template-columns:repeat(3,1fr);} .steps{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:980px){
  .nav-toggle { display:block; }
  .nav { position:fixed; top:0; right:0; width:min(90vw,360px); height:100dvh; background:#fff; border-left:1px solid var(--line); padding:82px var(--s5) var(--s7); overflow-y:auto; transform:translateX(104%); visibility:hidden; transition:transform .38s var(--ease), visibility .38s; z-index:96; }
  .nav.is-open { transform:none; visibility:visible; }
  .nav-list { flex-direction:column; align-items:stretch; gap:0; }
  .nav-list > li > a { padding:13px 8px; font-size:1rem; border-bottom:1px solid var(--line-2); border-radius:0; }
  .nav-list > li > a.is-active::after { display:none; }
  .submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-bottom:1px solid var(--line-2); border-radius:0; padding:0 0 var(--s3) var(--s4); min-width:0; }
  .nav-cta .btn { display:none; }
  .hero-grid,.split,.split.is-wide-left,.split.is-wide-right,.g-3,.g-4,.form-grid { grid-template-columns:1fr; }
  .hero-shot .chip-1 { left:0; } .hero-shot .chip-2 { right:0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .section-head.is-split { flex-direction:column; align-items:flex-start; }
}
@media (max-width:620px){
  :root { --gut:16px; }
  .g-2,.steps,.stack-grid,.footer-grid { grid-template-columns:1fr; }
  .stack-grid { grid-template-columns:repeat(2,1fr); }
  .wa-float b { display:none; } .wa-float { padding:0 13px; }
  .hero-shot .chip { display:none; }
}
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal,[data-enter] { opacity:1 !important; transform:none !important; }
  .preload { display:none; }
}

/* ==========================================================================
   Animated sections
   ========================================================================== */

/* ---------- aurora + grain in the hero ---------------------------------- */
.aurora {
  position:absolute; inset:-30% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 28%, rgba(99,91,255,.75), transparent 62%),
    radial-gradient(34% 40% at 78% 22%, rgba(0,212,255,.55), transparent 62%),
    radial-gradient(40% 46% at 62% 82%, rgba(47,224,168,.38), transparent 62%),
    radial-gradient(30% 36% at 26% 78%, rgba(255,92,122,.40), transparent 62%);
  filter:blur(38px);
  animation:auroraShift 22s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform:translate3d(3%,-2%,0) scale(1.12) rotate(6deg); }
  100% { transform:translate3d(-3%,2%,0) scale(1.06) rotate(-5deg); }
}
.grain {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero::before,.hero::after { display:none; }

/* ---------- rotating word ------------------------------------------------ */
.rotator {
  display:inline-grid; vertical-align:bottom;
  height:1.12em; overflow:hidden; position:relative;
}
.rotator i {
  grid-area:1/1; font-style:normal;
  background:var(--g-aurora); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(100%);
  animation:rotWord 12s var(--ease) infinite;
}
.rotator i:nth-child(1){ animation-delay:0s; }
.rotator i:nth-child(2){ animation-delay:2.4s; }
.rotator i:nth-child(3){ animation-delay:4.8s; }
.rotator i:nth-child(4){ animation-delay:7.2s; }
.rotator i:nth-child(5){ animation-delay:9.6s; }
@keyframes rotWord {
  0%   { opacity:0; transform:translateY(100%); }
  4%   { opacity:1; transform:translateY(0); }
  18%  { opacity:1; transform:translateY(0); }
  22%  { opacity:0; transform:translateY(-100%); }
  100% { opacity:0; transform:translateY(-100%); }
}

/* ---------- marquee band ------------------------------------------------- */
.mqband { background:var(--ink); padding-block:var(--s5); overflow:hidden; }
.mq { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.mq + .mq { margin-top:var(--s3); }
.mq-track { display:flex; align-items:center; width:max-content; animation:mqL 38s linear infinite; }
.mq-track.is-rev { animation:mqR 46s linear infinite; }
.mqband:hover .mq-track { animation-play-state:paused; }
.mq-track span {
  font-family:var(--ff-mono); font-size:.86rem; letter-spacing:.02em;
  color:#c3c8ea; padding:0 var(--s5); white-space:nowrap;
  transition:color .3s;
}
.mq-track span:hover { color:#fff; }
.mq-track i { width:6px; height:6px; border-radius:50%; background:var(--g-brand); flex:none; }
.mq .is-rev i { background:var(--g-warm); }
@keyframes mqL { to { transform:translateX(-50%); } }
@keyframes mqR { from { transform:translateX(-50%); } to { transform:translateX(0); } }

/* ---------- sticky scroll showcase --------------------------------------- */
.showcase { background:var(--tint); overflow:clip; }
.sc-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:start; }
.sc-sticky { position:sticky; top:100px; }
.sc-frame {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink); box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.1); aspect-ratio:900/580;
}
.sc-pane { position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.04) translateY(10px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.sc-pane.is-on { opacity:1; transform:none; }
.sc-pane img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.sc-glow { position:absolute; inset:auto -20% -60% -20%; height:70%; background:radial-gradient(circle,rgba(99,91,255,.5),transparent 66%); pointer-events:none; }
.sc-dots { display:flex; gap:7px; justify-content:center; margin-top:var(--s4); }
.sc-dots button { width:8px; height:8px; border:0; border-radius:99px; padding:0; background:var(--line); cursor:pointer; transition:width .3s var(--ease), background .3s; }
.sc-dots button.is-on { width:26px; background:var(--g-brand); }

.sc-steps { display:grid; gap:var(--s5); }
.sc-step {
  position:relative; padding:var(--s6) var(--s5) var(--s6) var(--s7);
  border-radius:var(--r); background:#fff; border:1px solid var(--line);
  opacity:.45; transition:opacity .45s, transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.sc-step::before {
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px; background:var(--g-brand); transform:scaleY(0); transform-origin:0 0;
  transition:transform .5s var(--ease);
}
.sc-step.is-on { opacity:1; transform:translateX(4px); box-shadow:var(--sh-2); border-color:transparent; }
.sc-step.is-on::before { transform:scaleY(1); }
.sc-num {
  position:absolute; right:var(--s5); top:var(--s5);
  font-size:2.2rem; font-weight:800; color:var(--tint-2); line-height:1;
  transition:color .45s;
}
.sc-step.is-on .sc-num { color:var(--violet-l); }
.sc-tag { font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--violet-d); }
.sc-step h3 { margin:6px 0 var(--s2); }
.sc-step p { font-size:.92rem; }
.sc-chips { display:flex; flex-wrap:wrap; gap:6px; margin:var(--s4) 0; }
.sc-chips li { font-size:.72rem; font-weight:700; color:var(--violet-d); background:var(--tint-2); padding:4px 10px; border-radius:7px; }

/* ---------- counters band ------------------------------------------------ */
.ctband { position:relative; background:var(--ink); color:#a8b2cc; overflow:hidden; }
.ctband h2 { color:#fff; }
.ct-aurora {
  position:absolute; inset:-40% -10%; pointer-events:none; opacity:.75;
  background:
    radial-gradient(30% 40% at 20% 30%, rgba(99,91,255,.7), transparent 62%),
    radial-gradient(28% 36% at 76% 26%, rgba(0,212,255,.5), transparent 62%),
    radial-gradient(30% 40% at 54% 84%, rgba(255,92,122,.42), transparent 62%);
  filter:blur(44px); animation:auroraShift 26s ease-in-out infinite alternate;
}
.ctband .wrap { position:relative; z-index:2; }
.ct {
  position:relative; padding:var(--s6) var(--s5) var(--s5); border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px); text-align:center; overflow:hidden;
  transition:transform .35s var(--ease), background-color .35s;
}
.ct:hover { transform:translateY(-6px); background:rgba(255,255,255,.1); }
.ct-n { display:block; font-size:clamp(2rem,3.4vw,2.8rem); font-weight:800; line-height:1; letter-spacing:-.03em;
  background:var(--g-aurora); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ct-l { display:block; font-size:.84rem; color:#9aa3c8; margin-top:8px; font-weight:600; }
.ct-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--g-brand);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease); }
.ct.is-in .ct-bar { transform:scaleX(1); }

/* ---------- testimonials -------------------------------------------------- */
.quotes { position:relative; overflow:hidden; }
.quotes-track { display:flex; transition:transform .6s var(--ease); }
.q { flex:0 0 100%; padding:0 4px; }
.q-in { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.6vw,48px); text-align:center; }
.q-mark { display:grid; place-items:center; width:52px; height:52px; margin:0 auto var(--s5);
  border-radius:16px; background:var(--g-brand); color:#fff; box-shadow:var(--sh-blue); }
.q-mark svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.q blockquote { margin:0 auto var(--s5); max-width:60ch; font-size:clamp(1.02rem,1.7vw,1.28rem); line-height:1.55; color:var(--ink); font-weight:600; }
.q-who b { display:block; color:var(--ink); }
.q-who span { font-size:.84rem; color:var(--muted); }
.quotes-nav { display:flex; justify-content:center; gap:8px; margin-top:var(--s5); }
.quotes-dot { width:8px; height:8px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer;
  transition:width .3s var(--ease), background .3s; }
.quotes-dot.is-active { width:26px; border-radius:99px; background:var(--g-brand); }

/* ---------- gradient accents on existing pieces --------------------------- */
.prod-ic,.feat:hover .feat-ic,.contact-ic:hover { background:var(--g-brand); }
.prod::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.5px; background:var(--g-aurora);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:0; transition:opacity .4s;
}
.prod:hover::after { opacity:1; }
.plan.is-featured { border-color:transparent; }
.plan.is-featured::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px; background:var(--g-aurora);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.plan-ribbon { background:var(--g-aurora); }

@media (max-width:980px){
  .sc-grid { grid-template-columns:1fr; }
  .sc-sticky { position:static; }
  .sc-step { opacity:1; }
  .sc-step::before { transform:scaleY(1); }
  .sc-dots { display:none; }
}
@media (prefers-reduced-motion:reduce){
  .aurora,.ct-aurora,.mq-track,.rotator i { animation:none !important; }
  .rotator { height:auto; }
  .rotator i { opacity:0; transform:none; }
  .rotator i:first-child { opacity:1; }
  .sc-pane { transition:none; }
}

/* ==========================================================================
   LIGHT THEME — every previously dark surface reworked
   ========================================================================== */

/* ---------- top bar ------------------------------------------------------ */
.topbar { background:var(--tint-2); color:var(--brand-d); border-bottom:1px solid var(--line); }
.topbar a { color:var(--brand-d); }
.topbar a:hover { color:var(--accent-d); }
.topbar .tag-live i { background:var(--brand); }

/* ---------- hero --------------------------------------------------------- */
.hero { background:var(--g-deep); color:var(--text); }
.hero h1 { color:var(--ink); }
.hero-text { color:var(--muted); }
.hero .eyebrow.is-light { background:var(--white); color:var(--brand-d); box-shadow:var(--sh-1); }
.hero-tags li { background:var(--white); border-color:var(--line); color:var(--slate); box-shadow:var(--sh-1); }
.hero .btn-ghost { border-color:var(--brand); color:var(--brand-d); background:var(--white); }
.hero .btn-ghost:hover { background:var(--brand); color:#fff; border-color:var(--brand); }

/* soft pastel aurora, not neon */
.aurora {
  background:
    radial-gradient(38% 44% at 16% 26%, rgba(15,157,142,.32), transparent 62%),
    radial-gradient(34% 40% at 80% 20%, rgba(255,194,71,.30), transparent 62%),
    radial-gradient(40% 46% at 64% 84%, rgba(255,107,87,.24), transparent 62%),
    radial-gradient(30% 36% at 24% 80%, rgba(107,91,210,.20), transparent 62%);
  filter:blur(46px);
}
.grain { opacity:.16; }

.rotator i { background:var(--g-aurora); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-shot img { box-shadow:var(--sh-3); border-color:var(--line); }
.hero-shot .chip { box-shadow:var(--sh-3); border:1px solid var(--line); }

/* ---------- page head ---------------------------------------------------- */
.pagehead { background:var(--g-deep); color:var(--text); border-bottom:1px solid var(--line); }
.pagehead::before { background:radial-gradient(circle,rgba(15,157,142,.26),transparent 66%); }
.pagehead::after { background:radial-gradient(circle,rgba(255,194,71,.26),transparent 66%); }
.pagehead h1 { color:var(--ink); }
.pagehead p { color:var(--muted); }
.crumbs { color:var(--muted); }
.crumbs a:hover { color:var(--brand-d); }

/* ---------- marquee band -------------------------------------------------- */
.mqband { background:var(--white); border-block:1px solid var(--line); }
.mq-track span { color:var(--slate); }
.mq-track span:hover { color:var(--brand-d); }

/* ---------- counters band ------------------------------------------------- */
.ctband { background:var(--tint); color:var(--text); }
.ctband h2 { color:var(--ink); }
.ctband .eyebrow.is-light { background:var(--white); color:var(--brand-d); box-shadow:var(--sh-1); }
.ct-aurora {
  background:
    radial-gradient(30% 40% at 18% 28%, rgba(15,157,142,.28), transparent 62%),
    radial-gradient(28% 36% at 78% 24%, rgba(255,194,71,.26), transparent 62%),
    radial-gradient(30% 40% at 56% 86%, rgba(255,107,87,.20), transparent 62%);
  opacity:1; filter:blur(50px);
}
.ct { background:rgba(255,255,255,.78); border-color:var(--line); box-shadow:var(--sh-1); }
.ct:hover { background:#fff; box-shadow:var(--sh-2); }
.ct-l { color:var(--muted); }

/* ---------- sections that were dark -------------------------------------- */
.bg-ink { background:var(--tint); color:var(--text); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4 { color:var(--ink); }
.bg-ink .lead { color:var(--muted); }
.bg-ink .eyebrow.is-light { background:var(--white); color:var(--brand-d); box-shadow:var(--sh-1); }
.bg-ink .feat { background:#fff; border-color:var(--line); }
.bg-ink .feat h3 { color:var(--ink); }
.bg-ink .feat p { color:var(--text); }
.bg-ink .feat-ic { background:var(--tint-2); color:var(--brand); }
.bg-ink .feat:hover .feat-ic { background:var(--g-brand); color:#fff; }
.bg-ink .stat-tile { background:#fff; border-color:var(--line); box-shadow:var(--sh-1); }
.bg-ink .stat-tile .n { background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bg-ink .stat-tile .l { color:var(--muted); }
.bg-ink .tech { background:#fff; border-color:var(--line); }

/* ---------- product showcase frame --------------------------------------- */
.sc-frame { background:var(--white); border-color:var(--line); }
.sc-glow { background:radial-gradient(circle,rgba(15,157,142,.20),transparent 66%); }

/* ---------- call to action ------------------------------------------------ */
.cta { background:var(--g-deep); color:var(--text); border:1px solid var(--line); }
.cta h2 { color:var(--ink); }
.cta::before { background:radial-gradient(circle,rgba(15,157,142,.34),transparent 66%); }
.cta::after { background:radial-gradient(circle,rgba(255,194,71,.32),transparent 66%); }
.cta .btn-ghost { border-color:var(--brand); color:var(--brand-d); background:var(--white); }
.cta .btn-ghost:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-mint { background:var(--g-warm); color:#5a1e12; box-shadow:0 10px 26px rgba(255,107,87,.28); }

/* ---------- footer -------------------------------------------------------- */
.footer { background:var(--tint); color:var(--text); border-top:1px solid var(--line); }
.footer h4 { color:var(--ink); }
.footer .brand-name { color:var(--ink); }
.footer .brand-sub { color:var(--muted); }
.footer-links a:hover { color:var(--brand-d); }
.footer .social a { background:var(--white); color:var(--brand-d); border:1px solid var(--line); }
.footer .social a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
.footer-contact li a { color:var(--brand-d); font-weight:600; }
.footer-bottom { border-top-color:var(--line); color:var(--muted); }

/* ---------- preloader ----------------------------------------------------- */
.preload { background:var(--white); }
.preload-name { color:var(--ink); }
.preload-bar { background:var(--tint-2); }

/* ---------- data table ---------------------------------------------------- */
.data-table thead th { background:var(--tint-2); color:var(--brand-d); }
.data-table tbody tr:hover { background:var(--tint); }

/* ---------- accents ------------------------------------------------------- */
.eyebrow { background:var(--tint-2); color:var(--brand-d); }
.eyebrow::before { background:var(--accent); }
.prod-ic,.q-mark { background:var(--g-brand); }
.plan-ribbon { background:var(--g-warm); color:#5a1e12; }
.link-arrow { color:var(--brand-d); }
.link-arrow:hover { color:var(--accent-d); }
.totop { background:var(--brand); }
.totop:hover { background:var(--accent); }
.scroll-progress { background:var(--g-warm); }
.nav-list > li > a:hover,.nav-list > li > a.is-active { color:var(--brand-d); }

/* ==========================================================================
   Flyer-style footer
   ========================================================================== */
.footer { padding-top:0; }

/* ---------- headline strip ---------------------------------------------- */
.fl-top {
  position:relative; overflow:hidden;
  background:var(--g-deep);
  border-block:1px solid var(--line);
  padding-block:clamp(40px,4.6vw,68px) clamp(48px,5vw,74px);
  margin-bottom:clamp(32px,3.4vw,52px);
}
.fl-blob { position:absolute; border-radius:50%; pointer-events:none; filter:blur(4px); }
.fl-blob.b1 { width:420px; height:420px; right:-120px; top:-180px;
  background:radial-gradient(circle,rgba(15,157,142,.32),transparent 66%);
  animation:drift 18s ease-in-out infinite alternate; }
.fl-blob.b2 { width:360px; height:360px; left:-140px; bottom:-190px;
  background:radial-gradient(circle,rgba(255,194,71,.34),transparent 66%);
  animation:drift 24s ease-in-out infinite alternate-reverse; }

.fl-top-in {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,4vw,64px); align-items:center;
}
.fl-kick {
  display:inline-block; font-family:var(--ff-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand-d);
  background:var(--white); padding:6px 13px; border-radius:99px;
  box-shadow:var(--sh-1); margin-bottom:var(--s4);
}
.fl-copy h2 { color:var(--ink); font-size:clamp(1.7rem,3.2vw,2.6rem); margin-bottom:var(--s3); }
.fl-copy p { color:var(--text); max-width:46ch; margin-bottom:var(--s5); }
.fl-actions { display:flex; flex-wrap:wrap; gap:var(--s3); }

/* the big torn-ticket phone block */
.fl-call {
  position:relative; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6) var(--s5); box-shadow:var(--sh-2);
  text-align:center;
}
.fl-call::before {
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--g-aurora);
}
.fl-call-label {
  display:block; font-family:var(--ff-mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3);
}
.fl-number {
  display:block; font-size:clamp(1.35rem,2.3vw,1.85rem); font-weight:800;
  letter-spacing:-.02em; color:var(--ink); line-height:1.25;
  transition:color .22s, transform .22s var(--ease);
}
.fl-number:hover { color:var(--brand-d); transform:translateY(-2px); }
.fl-number.is-alt { font-size:clamp(1rem,1.5vw,1.15rem); color:var(--muted); font-weight:700; }
.fl-hours {
  margin-top:var(--s4); padding-top:var(--s4); border-top:1px dashed var(--line);
  display:flex; align-items:baseline; justify-content:center; gap:8px;
}
.fl-hours b { color:var(--brand-d); }
.fl-hours span { font-size:.84rem; color:var(--muted); }

/* perforated edge, like a tear-off flyer */
.fl-perf {
  position:absolute; left:0; right:0; bottom:-9px; height:18px; z-index:3;
  background:radial-gradient(circle at 9px 9px, var(--white) 8px, transparent 8.5px) repeat-x;
  background-size:26px 18px;
}

/* ---------- product tickets ---------------------------------------------- */
.fl-tickets {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  margin-bottom:clamp(32px,3.6vw,52px);
}
.fl-ticket {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:4px;
  padding:var(--s5) var(--s4) var(--s4);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .28s var(--ease), box-shadow .28s, border-color .28s;
}
.fl-ticket::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--g-brand); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--ease);
}
.fl-ticket:hover { transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent; }
.fl-ticket:hover::after { transform:scaleX(1); }
.fl-ticket i {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--tint-2); color:var(--brand-d); margin-bottom:var(--s2);
  transition:background-color .3s, color .3s, transform .35s var(--ease);
}
.fl-ticket:hover i { background:var(--g-brand); color:#fff; transform:rotate(-7deg); }
.fl-ticket i svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fl-ticket b { color:var(--ink); font-size:.95rem; }
.fl-ticket span { font-size:.78rem; color:var(--muted); }

/* ---------- bottom stamp -------------------------------------------------- */
.fl-stamp {
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.1em;
  color:var(--brand-d); border:1px dashed var(--brand-l);
  padding:4px 12px; border-radius:99px;
}

@media (max-width:980px){
  .fl-top-in { grid-template-columns:1fr; }
  .fl-tickets { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .fl-tickets { grid-template-columns:1fr; }
  .fl-perf { display:none; }
}
@media (prefers-reduced-motion:reduce){ .fl-blob { animation:none !important; } }

/* ==========================================================================
   Animated process timeline
   ========================================================================== */
.timeline-sec { background:var(--tint); }
.tl-wrap { position:relative; max-width:880px; margin-inline:auto; padding-left:56px; }
.tl-rail {
  position:absolute; left:19px; top:10px; bottom:10px; width:3px;
  border-radius:3px; background:var(--line);
}
.tl-fill {
  display:block; width:100%; height:0; border-radius:3px;
  background:var(--g-aurora);
  transition:height .25s linear;
}
.tl-row {
  position:relative; margin-bottom:var(--s5);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.tl-row:last-child { margin-bottom:0; }
.tl-row:hover { transform:translateX(5px); box-shadow:var(--sh-2); border-color:transparent; }
.tl-dot {
  position:absolute; left:-52px; top:26px;
  width:19px; height:19px; border-radius:50%;
  background:var(--white); border:3px solid var(--line);
  transition:border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.tl-row.is-in .tl-dot {
  border-color:var(--brand);
  box-shadow:0 0 0 5px rgba(15,157,142,.14);
  transform:scale(1.08);
}
.tl-step {
  display:inline-block; font-family:var(--ff-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-d);
  margin-bottom:6px;
}
.tl-row h3 { margin-bottom:var(--s2); }
.tl-row p { font-size:.93rem; margin:0; }

/* ==========================================================================
   Live activity panel
   ========================================================================== */
.pulse { background:var(--white); }
.pulse-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s5); align-items:stretch; }
.pulse-card,.pulse-feed {
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1);
}
.pulse-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4); }
.pulse-head b { display:block; color:var(--ink); font-size:1rem; }
.pulse-head span span { font-size:.8rem; color:var(--muted); }
.pulse-live {
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-d); background:var(--tint-2); padding:5px 11px; border-radius:99px;
}
.pulse-live i { width:7px; height:7px; border-radius:50%; background:var(--brand); animation:pulse 2s ease-out infinite; }

.pulse-chart { width:100%; height:200px; display:block; }
.pg-grid line { stroke:var(--line-2); stroke-width:1; }
.pg-line { stroke-dasharray:1200; stroke-dashoffset:1200; }
.pulse-card.is-in .pg-line { animation:drawLine 2.2s var(--ease) .2s forwards; }
@keyframes drawLine { to { stroke-dashoffset:0; } }
.pg-area { opacity:0; }
.pulse-card.is-in .pg-area { animation:fadeArea .9s var(--ease) 1.3s forwards; }
@keyframes fadeArea { to { opacity:1; } }

.pulse-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5); padding-top:var(--s5); border-top:1px dashed var(--line); }
.pulse-stats b { display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.02em;
  background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pulse-stats span { font-size:.78rem; color:var(--muted); }

.pf-list { display:grid; gap:2px; }
.pf-list li {
  display:flex; align-items:center; gap:var(--s3);
  padding:11px 10px; border-radius:var(--r-sm);
  opacity:0; transform:translateY(8px);
  animation:pfIn .5s var(--ease) forwards;
  transition:background-color .22s;
}
.pf-list li:hover { background:var(--tint); }
.pulse-feed.is-in .pf-list li:nth-child(1){ animation-delay:.10s; }
.pulse-feed.is-in .pf-list li:nth-child(2){ animation-delay:.25s; }
.pulse-feed.is-in .pf-list li:nth-child(3){ animation-delay:.40s; }
.pulse-feed.is-in .pf-list li:nth-child(4){ animation-delay:.55s; }
.pulse-feed.is-in .pf-list li:nth-child(5){ animation-delay:.70s; }
.pulse-feed.is-in .pf-list li:nth-child(6){ animation-delay:.85s; }
@keyframes pfIn { to { opacity:1; transform:none; } }
.pf-dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--g-brand); box-shadow:0 0 0 4px var(--tint-2); }
.pf-txt { flex:1; min-width:0; }
.pf-txt b { display:block; font-size:.86rem; color:var(--ink); font-weight:700; line-height:1.3; }
.pf-txt span { font-size:.74rem; color:var(--muted); }
.pf-time { flex:none; font-family:var(--ff-mono); font-size:.68rem; color:var(--muted); }

@media (max-width:980px){
  .pulse-grid { grid-template-columns:1fr; }
  .tl-wrap { padding-left:44px; }
  .tl-rail { left:13px; }
  .tl-dot { left:-42px; }
}
@media (max-width:560px){ .pulse-stats { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .pg-line { stroke-dashoffset:0 !important; animation:none !important; }
  .pg-area { opacity:1 !important; animation:none !important; }
  .pf-list li { opacity:1 !important; transform:none !important; animation:none !important; }
  .tl-fill { transition:none; }
}

/* ==========================================================================
   GLASS & SHINE LAYER
   Appended last so it wins the cascade. Brighter washes, frosted glass
   surfaces, gloss highlights and a specular sweep on the primary controls.
   Remove this whole block to go back to the flat look.
   ========================================================================== */

:root {
  /* brighter, more saturated take on the same palette */
  --brand:    #0ea896;
  --brand-l:  #8ce7dd;
  --brand-xl: #dcfaf5;
  --accent:   #ff6f58;
  --honey:    #ffc43d;
  --plum:     #6f5ee0;

  --g-brand:  linear-gradient(125deg, #0ea896 0%, #3ad6c4 55%, #6ceadb 100%);
  --g-mint:   linear-gradient(125deg, #34e0b4, #0ea896);
  --g-warm:   linear-gradient(125deg, #ff6f58 0%, #ff9a4d 52%, #ffc43d 100%);
  --g-aurora: linear-gradient(120deg, #0ea896 0%, #3ad6c4 30%, #ffc43d 68%, #ff6f58 100%);
  --g-deep:   linear-gradient(150deg, #e6fbf6 0%, #f7fdff 48%, #fff2ec 100%);

  /* glass surface */
  --glass:      rgba(255,255,255,.66);
  --glass-solid:rgba(255,255,255,.88);
  --glass-line: rgba(255,255,255,.9);
  --gloss:      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0));

  --sh-1: 0 1px 2px rgba(12,74,68,.05), 0 6px 18px rgba(12,74,68,.06);
  --sh-2: 0 14px 38px rgba(12,74,68,.10);
  --sh-3: 0 30px 70px rgba(12,74,68,.16);
  --sh-blue: 0 12px 28px rgba(14,168,150,.36);
  --sh-glass: 0 18px 44px rgba(12,74,68,.11), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------- a faint sheen that sweeps across shiny things ---------------- */
@keyframes k2sheen {
  0%   { transform:translateX(-130%) skewX(-18deg); }
  55%  { transform:translateX(230%)  skewX(-18deg); }
  100% { transform:translateX(230%)  skewX(-18deg); }
}

/* ---------- frosted header ---------------------------------------------- */
.header {
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(12,74,68,.05);
}
.header.is-stuck {
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 30px rgba(12,74,68,.09);
}
.submenu {
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border-color:rgba(255,255,255,.8);
}

/* ---------- glass cards -------------------------------------------------- */
.feat, .stat-tile, .plan, .form-card, .prod, .sc-frame,
.fl-call, .fl-ticket, .contact-card {
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-glass);
}
/* gloss cap — a soft highlight across the top of each card */
.feat::before, .stat-tile::before, .plan::before,
.form-card::before, .fl-ticket::before {
  content:""; position:absolute; left:0; right:0; top:0; height:48%;
  background:var(--gloss); border-radius:inherit; pointer-events:none; z-index:0;
}
.feat > *, .stat-tile > *, .plan > *, .form-card > *,
.fl-ticket > * { position:relative; z-index:1; }

.feat:hover, .stat-tile:hover, .plan:hover {
  background:var(--glass-solid);
  box-shadow:0 26px 56px rgba(12,74,68,.16), inset 0 1px 0 rgba(255,255,255,.95);
  transform:translateY(-5px);
}
.prod { overflow:hidden; }
.prod:hover { box-shadow:0 30px 66px rgba(12,74,68,.17); }

/* screenshot frames get a crisp bright edge */
.prod-shot { background:linear-gradient(160deg,#eefbf9,#fdfeff 60%,#fff4ef); }
.prod-shot img, .sc-pane img, .hero-shot img {
  box-shadow:0 -2px 26px rgba(12,74,68,.14), 0 0 0 1px rgba(255,255,255,.85);
}
.sc-frame {
  background:linear-gradient(160deg,#f1fcfa,#ffffff 55%,#fff5f1);
  box-shadow:0 34px 74px rgba(12,74,68,.18), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------- shiny hero screenshot ---------------------------------------- */
.hero-shot img {
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 40px 80px rgba(12,74,68,.22), 0 0 0 1px rgba(14,168,150,.10);
}
.hero-shot .chip {
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 34px rgba(12,74,68,.14), inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------- glossy buttons ----------------------------------------------- */
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn-primary {
  background:var(--g-brand); color:#fff;
  box-shadow:0 12px 28px rgba(14,168,150,.34), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-mint {
  background:var(--g-warm); color:#5a1e12;
  box-shadow:0 12px 28px rgba(255,111,88,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-outline {
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(12,74,68,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-outline:hover { background:#fff; border-color:var(--brand-l); }
/* specular sweep */
.btn::after {
  content:""; position:absolute; top:-60%; left:0; width:38%; height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform:translateX(-130%) skewX(-18deg); pointer-events:none; z-index:2;
}
.btn:hover::after { animation:k2sheen 1.05s var(--ease) forwards; }
.btn-primary:hover, .btn-mint:hover { filter:saturate(112%) brightness(1.03); }

/* ---------- glossy icon chips -------------------------------------------- */
.prod-ic, .q-mark, .sc-num, .contact-ic {
  background:var(--g-brand); color:#fff;
  box-shadow:0 12px 26px rgba(14,168,150,.34), inset 0 1px 0 rgba(255,255,255,.55);
}
.feat-ic {
  background:linear-gradient(160deg,#ffffff,#e2faf5);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(12,74,68,.10), inset 0 1px 0 #fff;
}
.feat:hover .feat-ic {
  background:var(--g-brand); color:#fff;
  box-shadow:0 12px 26px rgba(14,168,150,.36), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- glassy pills -------------------------------------------------- */
.eyebrow, .hero-tags li, .sc-chips li, .prod ul li, .stack-list li {
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(12,74,68,.07), inset 0 1px 0 rgba(255,255,255,.95);
}
.eyebrow { color:var(--brand-d); }

/* ---------- brighter washes ---------------------------------------------- */
.hero::before  { background:radial-gradient(circle, rgba(14,168,150,.38), transparent 66%); }
.hero::after   { background:radial-gradient(circle, rgba(255,196,61,.36), transparent 66%); }
.pagehead::before { background:radial-gradient(circle, rgba(14,168,150,.34), transparent 66%); }
.pagehead::after  { background:radial-gradient(circle, rgba(255,111,88,.30), transparent 66%); }
.cta::before   { background:radial-gradient(circle, rgba(14,168,150,.42), transparent 66%); }
.cta::after    { background:radial-gradient(circle, rgba(255,196,61,.40), transparent 66%); }
.cta {
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 26px 60px rgba(12,74,68,.12), inset 0 1px 0 rgba(255,255,255,.95);
}
.aurora { filter:saturate(118%); }
.bg-tint { background:linear-gradient(170deg,#f4fcfb,#fbfeff 55%,#fff6f2); }

/* ---------- form fields --------------------------------------------------- */
.field input, .field select, .field textarea {
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.95);
  box-shadow:inset 0 1px 3px rgba(12,74,68,.06);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background:#fff; border-color:var(--brand-l);
  box-shadow:0 0 0 4px rgba(14,168,150,.15), inset 0 1px 3px rgba(12,74,68,.05);
}

/* ---------- footer flyer -------------------------------------------------- */
.fl-top { box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.fl-call {
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 50px rgba(12,74,68,.14), inset 0 1px 0 rgba(255,255,255,.95);
}
.footer { background:linear-gradient(180deg,#f6fdfc,#eef9f7); }

/* ---------- respect reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation:none; }
}

/* backdrop-filter is still missing on a few older browsers — fall back to
   solid white there so nothing looks washed out. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .header, .submenu, .feat, .stat-tile, .plan, .form-card, .prod,
  .fl-call, .fl-ticket, .contact-card, .hero-shot .chip, .btn-outline,
  .eyebrow, .hero-tags li, .sc-chips li, .prod ul li, .stack-list li {
    background:#fff;
  }
}

/* ==========================================================================
   NO-JS FAIL-SAFE
   script.js adds `is-loaded` to <body> the moment it runs. If it is missing,
   blocked or throws, that class never appears — and because the preloader is
   dismissed by script and every .reveal / [data-enter] element starts at
   opacity 0, the page would sit on the loader forever with blank content
   behind it. These two rules only apply while `is-loaded` is absent, so they
   cost nothing on a normal load and cannot interfere with the scroll reveals.
   ========================================================================== */
@keyframes k2preOut  { to { opacity:0; visibility:hidden; } }
@keyframes k2revealIn{ to { opacity:1; transform:none; } }

body:not(.is-loaded) .preload {
  animation:k2preOut .5s var(--ease) 2.8s forwards;
  pointer-events:none;
}
body:not(.is-loaded) .reveal,
body:not(.is-loaded) [data-enter] {
  animation:k2revealIn .5s var(--ease) 2.9s forwards;
}

/* ---------- enquiry form: honeypot + error banner ------------------------- */
/* A bot fills every field it can see in the markup. This one is off-screen
   for a human, so anything arriving with it filled is discarded silently by
   enquiry.php. Not display:none — some bots skip hidden fields. */
.field.hp {
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
.form-alert.is-error {
  background:#fff1ee; border-color:#ffcfc4; color:#c23f28;
}
.form-alert.is-visible { display:block; }