/* ===== Arvo shared styles ===== */
:root{
  --void:#0C0714; --panel:#150D26; --panel-2:#1C1236;
  --violet:#B026FF; --lilac:#D18BFF; --ultra:#7B2BFF;
  --bone:#FAF9FC;
  --text:#EBE4F7;      /* main body — bright, readable */
  --muted:#CBBEE6;     /* secondary */
  --muted-2:#A99BCC;   /* tertiary */
  --border:#2C1C4E; --border-2:#3E2A6E;
  --grad:linear-gradient(135deg,#D18BFF 0%,#B026FF 52%,#7B2BFF 100%);
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:'Quicksand',system-ui,sans-serif; line-height:1.1; letter-spacing:-.01em; color:var(--bone)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ambient glows */
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0}
.glow-a{width:560px; height:560px; background:radial-gradient(circle,#B026FF,transparent 68%); top:-160px; right:-120px}
.glow-c{width:600px; height:600px; background:radial-gradient(circle,#B026FF,transparent 70%); bottom:-260px; left:50%; transform:translateX(-50%); opacity:.3}

/* nav */
nav{position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between;
    padding:22px 28px; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; font-family:'Quicksand'; font-weight:700; font-size:23px; letter-spacing:.01em; color:var(--bone)}
.brand svg{width:30px; height:30px; display:block}
.navlinks{display:flex; align-items:center; gap:34px; font-size:15px; color:var(--muted)}
.navlinks a{transition:color .2s}
.navlinks a:hover{color:var(--bone)}
.btn{
  font-family:'Quicksand'; font-weight:600; font-size:15px;
  background:var(--grad); color:#fff; padding:11px 22px; border-radius:11px;
  display:inline-block; transition:transform .18s, box-shadow .18s;
  box-shadow:0 6px 22px rgba(176,38,255,.32);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(176,38,255,.5)}
@media(max-width:720px){ .navlinks .lnk{display:none} }

/* eyebrow */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'Quicksand'; font-weight:600;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--lilac); margin-bottom:22px}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%;
  background:var(--lilac); box-shadow:0 0 12px 2px rgba(209,139,255,.9)}

/* hero */
header{position:relative; overflow:hidden; padding:56px 0 88px}
.netcanvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block}
.hero{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(38px,5.2vw,60px); font-weight:700; margin-bottom:22px}
.hero h1 .accent{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero p.lead{font-size:19px; color:var(--muted); max-width:520px; margin-bottom:18px}
.hero .founder{font-size:15px; color:var(--muted-2); max-width:480px; margin-bottom:30px}
.tagline{font-family:'Quicksand'; font-weight:700; font-size:15px; letter-spacing:.02em;
  color:var(--lilac); margin-bottom:8px}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.maillink{font-family:'Quicksand'; font-weight:600; font-size:15px; color:var(--lilac);
  display:inline-flex; align-items:center; gap:8px; transition:gap .2s}
.maillink:hover{gap:12px}
.avail{margin-top:26px; font-size:14px; color:var(--muted-2); display:flex; align-items:center; gap:9px}
.avail .dot{width:8px; height:8px; border-radius:50%; background:#5fe093; box-shadow:0 0 10px 1px rgba(95,224,147,.85)}
.heromark{position:relative; display:flex; justify-content:center; align-items:center}
.mark3d{perspective:900px}
.heromark svg{width:min(340px,80%); height:auto; filter:drop-shadow(0 0 40px rgba(176,38,255,.55)); transition:transform .15s ease-out; transform-style:preserve-3d}

/* 3D tilt cards */
.tilt{transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .25s; transform-style:preserve-3d; will-change:transform}

/* sections */
section{position:relative; padding:84px 0}
.sec-head{max-width:660px; margin-bottom:50px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-bottom:16px}
.sec-head p{font-size:17px; color:var(--muted)}
.divider{border:none; border-top:1px solid var(--border); max-width:var(--maxw); margin:0 auto}

/* products (home) */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.product{background:linear-gradient(180deg,var(--panel),transparent); border:1px solid var(--border);
  border-radius:18px; padding:30px 28px; display:flex; flex-direction:column; transition:border-color .25s, transform .25s}
.product.live:hover{border-color:var(--border-2); transform:translateY(-3px)}
.product .tag{align-self:flex-start; font-family:'Quicksand'; font-weight:600; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:20px; margin-bottom:20px}
.product .tag.on{background:rgba(95,224,147,.12); color:#7fe6a6; border:1px solid rgba(95,224,147,.3)}
.product .tag.soon{background:rgba(169,155,204,.1); color:var(--muted-2); border:1px solid var(--border)}
.product h3{font-size:22px; font-weight:700; margin-bottom:10px}
.product p{font-size:15px; color:var(--muted); flex-grow:1; margin-bottom:20px}
.product .go{font-family:'Quicksand'; font-weight:600; font-size:15px; color:var(--lilac);
  display:inline-flex; align-items:center; gap:8px; transition:gap .2s}
.product.live:hover .go{gap:12px}
.product.dim{opacity:.62}
.product .go.muted{color:var(--muted-2)}

/* problem + feature cards (crm) */
.probs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.prob{background:linear-gradient(180deg,var(--panel),transparent); border:1px solid var(--border);
  border-radius:16px; padding:28px 26px}
.prob .n{font-family:'Quicksand'; font-weight:700; font-size:15px; color:var(--lilac); margin-bottom:14px}
.prob h3{font-size:19px; font-weight:600; margin-bottom:10px}
.prob p{font-size:15px; color:var(--muted)}
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.feat{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:32px 30px;
  transition:border-color .25s, transform .25s}
.feat:hover{border-color:var(--border-2); transform:translateY(-3px)}
.feat .ic{width:46px; height:46px; border-radius:12px; background:rgba(176,38,255,.14);
  border:1px solid var(--border-2); display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.feat .ic svg{width:24px; height:24px; stroke:var(--lilac); fill:none; stroke-width:1.8}
.feat h3{font-size:20px; font-weight:600; margin-bottom:10px}
.feat p{font-size:15px; color:var(--muted)}

/* why band */
.why{position:relative; overflow:hidden; background:
  radial-gradient(600px 300px at 20% 30%, rgba(123,43,255,.2), transparent 70%),
  linear-gradient(180deg,var(--panel-2),var(--void));
  border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.why .inner{max-width:760px}
.why h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-bottom:20px}
.why p{font-size:18px; color:var(--muted); margin-bottom:18px}
.why p .hl{color:var(--bone); font-weight:500}

/* final cta */
.finalwrap{position:relative; overflow:hidden}
.final{text-align:center; position:relative; z-index:2}
.final h2{font-size:clamp(30px,4vw,46px); font-weight:700; margin-bottom:18px}
.final p{font-size:18px; color:var(--muted); max-width:520px; margin:0 auto 34px}

/* footer */
footer{border-top:1px solid var(--border); padding:44px 0 40px; position:relative; z-index:2}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap}
.foot .brand{margin-bottom:14px}
.foot .meta{font-size:14px; color:var(--muted-2); line-height:1.9}
.foot a.fmail{color:var(--lilac)}
.copy{font-size:13px; color:var(--muted-2); margin-top:26px}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

@media(max-width:860px){
  .hero{grid-template-columns:1fr; gap:12px}
  .heromark{order:-1; margin-bottom:20px}
  .heromark svg{width:200px}
  .products,.probs{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  section{padding:62px 0}
}