/* ============================================================
   AccelentAI v2 — Gladia-inspired design system
   Light hero → dark contrast sections, purple eclipse, glass,
   cursor halo, button text roll-up, layered blurred gradients.
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F5FB;
  --bg-tint:#EFEEF7;
  --ink:#0B0B12;
  --ink-2:#54545F;
  --ink-3:#8A8A97;
  --line:#E7E6F0;
  --line-soft:rgba(11,11,18,.07);

  --peri:#6D7AFF;
  --peri-2:#8C7BFF;
  --violet:#7C5CF0;
  --deep:#071FD3;
  --peri-ghost:rgba(109,122,255,.09);
  --peri-border:rgba(109,122,255,.26);

  /* dark section tokens */
  --d-bg:#08080F;
  --d-bg-2:#0E0E1A;
  --d-ink:#F3F2FB;
  --d-ink-2:#A6A6BC;
  --d-ink-3:#6E6E86;
  --d-line:rgba(255,255,255,.09);
  --d-line-2:rgba(255,255,255,.14);

  --green:#16A34A;
  --red:#E0483D;

  --radius-card:22px;
  --radius-sm:16px;
  --container:1180px;
  --pad-x:24px;
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;font-size:16px;line-height:1.5;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--peri);color:#fff}
img{max-width:100%}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

/* ---------- Custom cursor ---------- */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary,.has-cursor [data-cursor]{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}
.cursor-halo{
  position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:9998;
  background:radial-gradient(circle,rgba(124,92,240,.24) 0%,rgba(109,122,255,.12) 32%,rgba(109,122,255,0) 68%);
  filter:blur(60px);opacity:0;
  transition:opacity .5s ease,width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out);
  will-change:transform;
}
.cursor-dot{
  position:fixed;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;pointer-events:none;z-index:9999;
  background:var(--ink);opacity:0;
  transition:opacity .3s ease,width .25s var(--ease-spring),height .25s var(--ease-spring),
    margin .25s var(--ease-spring),background .25s ease,border-color .25s ease;
}
.cursor-hot .cursor-dot{
  width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent;
  border:1.5px solid var(--peri);
}
.cursor-hot .cursor-halo{width:640px;height:640px;margin:-320px 0 0 -320px}
.cursor-down .cursor-dot{transform-origin:center}
/* on dark sections invert the dot */
.cursor-dot.on-dark{background:#fff}

/* ---------- Typography ---------- */
h1,h2,h3{font-weight:400;text-wrap:balance;letter-spacing:-.03em}
.h1{font-size:clamp(42px,6.4vw,88px);line-height:1.02;letter-spacing:-.042em}
.h2{font-size:clamp(30px,3.8vw,50px);line-height:1.08;letter-spacing:-.032em}
.h3{font-size:clamp(19px,1.9vw,24px);line-height:1.18;letter-spacing:-.02em;font-weight:500}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:600px;font-weight:400}
.eyebrow{
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:var(--violet);
}
.muted{color:var(--ink-2)}

/* ---------- Pill badge ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:9999px;
  background:rgba(124,92,240,.07);border:1px solid var(--peri-border);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--peri);box-shadow:0 0 0 4px rgba(109,122,255,.16)}
.pill .dot.live{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(109,122,255,.35)}50%{box-shadow:0 0 0 6px rgba(109,122,255,0)}}
.pill b{font-weight:500;font-variant-numeric:tabular-nums}
.pill .sep{color:var(--ink-3)}

/* ---------- Buttons (with text roll-up) ---------- */
.btn{
  --bg-btn:var(--ink);--fg-btn:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:9999px;border:1px solid transparent;
  font-size:15px;font-weight:500;line-height:1;padding:15px 26px;white-space:nowrap;
  background:var(--bg-btn);color:var(--fg-btn);overflow:hidden;
  transition:transform .3s var(--ease-spring),box-shadow .3s,background .3s,border-color .3s,color .3s;
}
.btn .roll{position:relative;display:inline-block;overflow:hidden;height:1.15em}
.btn .roll span{display:block;transition:transform .42s var(--ease-out)}
.btn .roll span+span{position:absolute;top:100%;left:0}
.btn:hover{transform:translateY(-2px)}
.btn:hover .roll span{transform:translateY(-100%)}
.btn:active{transform:translateY(0)}
.btn-primary{--bg-btn:var(--ink);--fg-btn:#fff}
.btn-primary:hover{box-shadow:0 12px 30px -10px rgba(11,11,18,.5)}
.btn-accent{--bg-btn:var(--peri);--fg-btn:#fff;background:linear-gradient(180deg,#8290ff,#6D7AFF)}
.btn-accent:hover{box-shadow:0 14px 32px -8px rgba(109,122,255,.6)}
.btn-ghost{--bg-btn:transparent;--fg-btn:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-soft);border-color:var(--peri-border)}
.btn-white{--bg-btn:#fff;--fg-btn:var(--ink)}
.btn-white:hover{box-shadow:0 0 28px rgba(255,255,255,.35)}
.btn-glass{
  --bg-btn:rgba(255,255,255,.08);--fg-btn:#fff;
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.btn-glass:hover{--bg-btn:rgba(255,255,255,.16);box-shadow:0 0 30px rgba(140,123,255,.3)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn-lg{padding:17px 32px;font-size:16px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  width:min(1120px,calc(100% - 28px));z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 12px 11px 20px;border-radius:18px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(11,11,18,.08);
  transition:background .4s,box-shadow .4s,border-color .4s;
}
.nav.scrolled{background:rgba(255,255,255,.82);box-shadow:0 10px 34px -18px rgba(11,11,18,.22)}
.nav .logo img{height:34px;display:block}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{
  font-size:14px;color:var(--ink-2);padding:9px 13px;border-radius:10px;
  transition:background .2s,color .2s;
}
.nav-links a:hover{background:rgba(11,11,18,.05);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:8px}
@media (max-width:880px){.nav-links{display:none}}

/* ---------- Sections ---------- */
.section{padding:clamp(80px,10vw,132px) 0;position:relative}
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .lead{margin-left:auto;margin-right:auto}
.section-head .eyebrow{display:block;margin-bottom:18px}
.section-head .lead{margin-top:20px}

/* dark section */
.dark{background:var(--d-bg);color:var(--d-ink);position:relative;overflow:hidden}
.dark .eyebrow{color:var(--peri-2)}
.dark .lead{color:var(--d-ink-2)}
.dark .h2,.dark h3{color:var(--d-ink)}
.dark-glow{
  position:absolute;pointer-events:none;border-radius:50%;filter:blur(120px);opacity:.6;z-index:0;
}
.dark .container{position:relative;z-index:1}

/* ---------- Cards / bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .card{grid-column:span 2}
.bento .card.wide{grid-column:span 3}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento .card,.bento .card.wide{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento .card,.bento .card.wide{grid-column:span 1}}

.card{
  position:relative;border-radius:var(--radius-card);padding:30px;
  display:flex;flex-direction:column;gap:11px;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease-out),border-color .4s,box-shadow .4s;
}
/* light card */
.card.light{
  background:linear-gradient(150deg,#FBFBFF 0%,#F4F3FC 100%);
  border:1px solid var(--line-soft);
}
.card.light:hover{transform:translateY(-4px);border-color:var(--peri-border);box-shadow:0 22px 44px -26px rgba(80,70,200,.35)}
/* dark tinted card (135deg to near-black) */
.card.dk{border:1px solid var(--d-line);color:var(--d-ink)}
.card.dk.v{background:linear-gradient(135deg,#241245 0%,#160b30 42%,#0C0C16 100%)}
.card.dk.b{background:linear-gradient(135deg,#0e1d3a 0%,#101a34 46%,#0C0C16 100%)}
.card.dk.t{background:linear-gradient(135deg,#0c2a2e 0%,#0e2027 48%,#0C0C16 100%)}
.card.dk.g{background:linear-gradient(135deg,#182142 0%,#111427 50%,#0C0C16 100%)}
.card.dk:hover{transform:translateY(-4px);border-color:var(--d-line-2)}
.card.dk h3{color:#fff}
.card.dk p{color:var(--d-ink-2)}
.card.dk .tag{color:var(--peri-2)}

.card .icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--peri-ghost);border:1px solid var(--peri-border);color:var(--violet);margin-bottom:4px;
}
.card.dk .icon{background:rgba(140,123,255,.12);border-color:rgba(140,123,255,.28);color:var(--peri-2)}
.card .tag{font-family:'Geist Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.card h3{font-size:19px;font-weight:500;letter-spacing:-.018em}
.card p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- Dot grid texture ---------- */
.dots{background-image:radial-gradient(circle,rgba(11,11,18,.05) 1.1px,transparent 1.1px);background-size:24px 24px}
.dark .dots-d,.dots-d{background-image:radial-gradient(circle,rgba(255,255,255,.05) 1.1px,transparent 1.1px);background-size:24px 24px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
/* Phones: fade only. The 26px lift plus staggered delays made neighbouring
   cards sit at different offsets mid-scroll, so even gaps read as uneven. */
@media (max-width:720px){
  .reveal{transform:none}
  .reveal.d1,.reveal.d2,.reveal.d3,.reveal.d4,.reveal.d5{transition-delay:0s}
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:66px 0 44px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-grid a{font-size:14px;color:var(--ink-2)}
.foot-grid a:hover{color:var(--ink)}
.foot-brand img{height:32px}
.foot-brand p{font-size:14px;color:var(--ink-2);max-width:300px;margin-top:14px;line-height:1.6}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:54px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);
}