@font-face{
  font-family:"Power Grotesk";
  src:url("../fonts/PowerGrotesk-Regular.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* PALETTE:START */
:root{
  --bg:#FFFFFF; --bg-soft:#F7F8FB; --surface:#FFFFFF;
  --ink:#0B1220; --ink-2:#28324A; --muted:#5B6577;
  --line:#E8E9EF; --line-2:#F0F1F5;
  --brand:#0045FF; --brand-2:#1E4CFF; --brand-ink:#0A1533;
  --shadow:0 30px 60px -34px rgba(11,18,32,.30);
  --hero-bg:
    radial-gradient(1100px 520px at 15% -10%, #EEE9FF 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #E9F0FF 0%, transparent 55%),
    linear-gradient(180deg,#FCFBFF 0%, #FFFFFF 70%);
  --beta-bg:
    radial-gradient(700px 380px at 8% 10%, #EFEAFF 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 100%, #E7F0FF 0%, transparent 60%),
    #F7F8FB;
  --art-bg:linear-gradient(140deg,#ECE9FF 0%, #F7EAF3 45%, #E7EFFF 100%); --art-glow1:#C9B8FF; --art-glow2:#9FC0FF;
}
/* PALETTE:END */

:root{
  --shadow-sm:0 2px 4px rgba(11,18,32,.04), 0 12px 28px -20px rgba(11,18,32,.35);
  --maxw:1180px; --r:18px;
  --font-display:"Power Grotesk","Space Grotesk",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
h1,h2,h3{font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em; text-wrap:balance; margin:0; color:var(--ink);}
p{margin:0;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--brand-2); font-family:var(--font-body);}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}
:focus-visible{outline:2px solid var(--brand-2); outline-offset:3px; border-radius:6px;}

/* ===================== LOGO / NAV ===================== */
.logo{height:28px; width:auto; display:block;}
.brandlock{display:inline-flex; align-items:center; gap:11px;}
.brandlock .part{font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  border-left:1px solid var(--line); padding-left:11px;}

header.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-2);}
.nav-inner{display:flex; align-items:center; gap:24px; height:66px;}
.nav-links{display:flex; gap:28px; margin-left:auto;}
.nav-links a{font-size:14.5px; color:var(--muted); transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-tools{display:flex; align-items:center; gap:10px;}
.lang-seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px;}
.lang-seg button{border:0; background:transparent; color:var(--muted); cursor:pointer; font-family:var(--font-body);
  font-size:12.5px; font-weight:600; letter-spacing:.04em; height:28px; padding:0 11px; border-radius:999px; transition:all .18s;}
.lang-seg button[aria-pressed="true"]{background:var(--brand); color:#fff;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px;
  border-radius:999px; cursor:pointer; font-family:var(--font-body); font-size:15px; font-weight:600;
  border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s;}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 12px 26px -12px var(--brand);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -12px var(--brand);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--brand-2); color:var(--brand-2);}
.nav .btn{height:40px; padding:0 18px; font-size:14px;}

/* ===================== HERO ===================== */
.hero{position:relative; overflow:hidden; background:var(--hero-bg);}
.hero .wrap{padding-top:70px; padding-bottom:40px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; font-size:13px; color:var(--ink-2); box-shadow:var(--shadow-sm);}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%, transparent);}
h1.hero-title{font-size:clamp(40px,5.6vw,68px); line-height:1.02; margin:22px 0 20px;}
.hero-sub{font-size:clamp(17px,1.4vw,19px); color:var(--muted); max-width:46ch;}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}

/* hero visual: audio -> article (waveform card) */
.hero-visual{position:relative; display:flex; flex-direction:column;}
.hv-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
.hv-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.hv-label{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);}
.hv-chip{font-size:11px; color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 35%, transparent);
  background:color-mix(in srgb,var(--brand) 10%, transparent); border-radius:999px; padding:3px 10px; font-variant-numeric:tabular-nums;}
.wave{display:flex; align-items:center; gap:3px; height:46px;}
.wave span{flex:1; background:linear-gradient(var(--brand-2),var(--brand)); border-radius:3px; opacity:.9; animation:eq 1.5s ease-in-out infinite;}
@keyframes eq{0%,100%{height:20%;}50%{height:100%;}}
@media (prefers-reduced-motion:reduce){.wave span{animation:none; height:60%;}}
.hv-arrow{position:relative; align-self:center; margin:13px 0; z-index:3; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px var(--brand); animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(-3px);}50%{transform:translateY(3px);}}
@media (prefers-reduced-motion:reduce){.hv-arrow{animation:none;}}
.hv-doc{display:grid; gap:9px;}
.hv-doc .l{height:9px; border-radius:4px; background:var(--line);}
.hv-doc .l.t{width:58%; height:14px; background:color-mix(in srgb,var(--ink) 22%, transparent);}
.hv-doc .l.b{width:92%;} .hv-doc .l.c{width:80%;}
.hv-doc .l.mark{width:66%; background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 55%, transparent),color-mix(in srgb,var(--brand) 12%, transparent));}
.hv-verify{margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:#0F9D58;
  background:rgba(15,157,88,.12); border:1px solid rgba(15,157,88,.3); border-radius:999px; padding:5px 12px;}

/* stats */
.stats{display:flex; gap:44px; flex-wrap:wrap; margin-top:44px; padding-top:34px; border-top:1px solid var(--line);}
.stat .n{font-family:var(--font-display); font-size:clamp(26px,3vw,36px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat .k{margin-top:7px; font-size:13.5px; color:var(--muted);}

/* ===================== SECTION SHELL ===================== */
.band{padding:96px 0; position:relative;}
.band.soft{background:var(--bg-soft);}
.sec-head{max-width:720px; margin-bottom:52px;}
.sec-head h2{font-size:clamp(28px,3.4vw,44px); line-height:1.08; margin:14px 0 14px;}
.sec-head p{color:var(--muted); font-size:18px;}

/* WHY */
.why-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
.why-grid h2{font-size:clamp(30px,3.6vw,46px); line-height:1.04;}
.why-body{display:grid; gap:20px; color:var(--muted); font-size:18px;}
.why-body strong{color:var(--ink); font-weight:600;}

/* PHASES */
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.phase{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px;
  transition:transform .2s, box-shadow .2s, border-color .2s;}
.phase:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
.phase .pl{font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-2);}
.phase h3{font-size:21px; margin:12px 0 12px;}
.phase p{color:var(--muted); font-size:15px;}
.phase .bar{height:3px; border-radius:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); width:44px; margin-bottom:20px;}

/* DIFFERENTIATORS */
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.diff{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;}
.diff .ic{width:44px; height:44px; border-radius:12px; background:color-mix(in srgb,var(--brand) 12%, var(--surface)); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.diff h3{font-size:19px; margin-bottom:9px;}
.diff p{color:var(--muted); font-size:15px;}

/* BETA */
.beta{background:var(--beta-bg);}
.beta-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;}
.beta-badge{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:600; color:var(--brand); letter-spacing:.04em; text-transform:uppercase;}
.beta h2{font-size:clamp(28px,3vw,40px); line-height:1.08; margin:18px 0 16px;}
.beta-lead{color:var(--muted); font-size:18px; margin-bottom:26px;}
.beta-list{display:grid; gap:14px; list-style:none; padding:0; margin:0;}
.beta-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px;}
.beta-list .dot{flex:none; width:9px; height:9px; margin-top:8px; border-radius:50%; background:var(--brand);}
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:var(--shadow);}
.form-card h3{font-size:22px; margin-bottom:8px;}
.form-card .fp{color:var(--muted); font-size:14.5px; margin-bottom:22px;}
.field-row{display:grid; gap:6px; margin-bottom:16px;}
.field-row label{font-size:13px; font-weight:600; color:var(--ink-2);}
.field-row input, .field-row select, .field-row textarea{
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:11px 14px; width:100%; transition:border-color .2s, box-shadow .2s;}
.field-row textarea{resize:vertical; min-height:84px;}
.field-row input:focus, .field-row select:focus, .field-row textarea:focus{outline:none; border-color:var(--brand-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent);}
.form-card .btn-primary{width:100%; margin-top:6px;}
.form-note{margin-top:14px; text-align:center; font-size:13px; color:var(--muted);}
.form-msg{margin-top:12px; font-size:14.5px; font-weight:600; min-height:20px;}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start;}
.about-grid h2{font-size:clamp(28px,3.2vw,42px); line-height:1.06; margin-top:14px;}
.about-cards{display:grid; gap:18px;}
.ac-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.ac{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px;}
.ac h3{font-size:20px; margin-bottom:10px;}
.ac p{color:var(--muted); font-size:15px;}
.ac.wide{grid-column:1/-1;}
.ac.fair{background:color-mix(in srgb,var(--brand) 8%, var(--surface)); border-color:color-mix(in srgb,var(--brand) 22%, var(--line));}

/* FOOTER */
footer.foot{border-top:1px solid var(--line-2); padding:34px 0;}
.foot-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.foot-l{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13.5px;}
.foot-l .a{width:26px; height:26px; border-radius:8px; background:var(--brand-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px;}
.foot-links{display:flex; gap:22px; font-size:14px; color:var(--muted);}
.foot-links a:hover{color:var(--ink);}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .nav-links{display:none;}
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-visual{max-width:520px;}
  .why-grid,.beta-grid,.about-grid{grid-template-columns:1fr; gap:32px;}
  .phases{grid-template-columns:1fr;}
  .diff-grid{grid-template-columns:1fr;}
  .ac-row{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .band{padding:70px 0;}
  .stats{gap:28px;}
  .hero-cta .btn{width:100%;}
}


/* ---- floating-papers hero art (Audio = waveform, gentle motion) ---- */
.hero-art{position:relative; border-radius:26px; background:var(--art-bg); aspect-ratio:5/4;
  border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); box-shadow:var(--shadow); overflow:hidden;}
.hero-art .glow{position:absolute; border-radius:50%; filter:blur(48px); opacity:.6;}
.hero-art .g1{width:230px; height:230px; background:var(--art-glow1); top:-40px; left:-30px;}
.hero-art .g2{width:200px; height:200px; background:var(--art-glow2); bottom:-30px; right:-20px;}
.paper{position:absolute; background:#fff; border-radius:12px; box-shadow:0 26px 50px -24px rgba(11,18,32,.45); padding:18px; display:grid; gap:8px; align-content:start;}
.paper .l{height:7px; border-radius:4px; background:#E7E7EF;}
.paper .l.t{background:#C9CBD9; width:60%; height:10px; margin-bottom:2px;}
.paper .l.s{width:90%;} .paper .l.m{width:78%;} .paper .l.b{background:color-mix(in srgb,var(--brand) 45%, #fff); width:60%;}
.paper .tag{position:absolute; top:-12px; left:16px; font-family:var(--font-display); font-size:14px; color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:9px; padding:3px 10px; box-shadow:var(--shadow-sm);}
.paper.p1{width:48%; left:11%; top:15%; transform:rotate(-7deg); animation:floatA 7s ease-in-out infinite;}
.paper.p2{width:48%; right:11%; bottom:15%; transform:rotate(6deg); animation:floatB 8s ease-in-out infinite;}
.pwave{display:flex; align-items:flex-end; gap:3px; height:46px; padding-top:4px;}
.pwave span{flex:1; min-width:2px; background:linear-gradient(var(--brand-2),var(--brand)); border-radius:3px; opacity:.92; animation:eq 1.3s ease-in-out infinite;}
@keyframes floatA{0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-7deg) translateY(-10px);}}
@keyframes floatB{0%,100%{transform:rotate(6deg) translateY(0);}50%{transform:rotate(6deg) translateY(8px);}}
@media (max-width:900px){.hero-art{max-width:520px;}}
@media (prefers-reduced-motion:reduce){.paper{animation:none !important;} .pwave span{animation:none;}}

/* transformation badge: audio -> article */
.art-x{position:absolute; z-index:4; top:43%; left:50%; width:52px; height:52px; border-radius:50%;
  transform:translate(-50%,-50%) rotate(45deg); color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px var(--brand), 0 0 0 7px rgba(255,255,255,.5);
  animation:artpulse 2.6s ease-in-out infinite;}
@keyframes artpulse{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.09);}}
@media (prefers-reduced-motion:reduce){.art-x{animation:none;}}

/* beta: form removed → single-column CTA to external form */
.beta-cta{max-width:680px;}
.beta-actions{margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.beta-actions .form-note{margin-top:0; text-align:left;}
.btn-lg{height:54px; padding:0 34px; font-size:16px;}
@media (max-width:520px){ .beta-actions{flex-direction:column; align-items:flex-start; gap:14px;} .beta-actions .btn-lg{width:100%;} }

/* About / footer: real brand logos in place of text titles */
.ac-logo{height:34px; width:auto; display:block; margin-bottom:16px;}
.ac-logo--geneea{height:30px;}
.foot-logo{height:22px; width:auto; display:block;}

/* FAIR card: logo top + full-bleed banner strip clipped by the card radius */
.ac.fair{overflow:hidden; padding-bottom:0;}
.fair-logo{height:34px; width:auto; display:block; margin:2px 0 16px;}
.fair-strip{display:block; width:calc(100% + 56px); margin:26px -28px 0;}
/* clickable brand logos */
.logo-link{display:inline-flex; transition:opacity .2s;}
.logo-link:hover{opacity:.72;}

/* beta CTA — centered on the page + catchy, elegant, on-brand button */
.beta-cta{margin-left:auto; margin-right:auto; text-align:center;}
.beta-list{display:inline-grid; text-align:left; margin:0 auto;}
.beta-actions{flex-direction:column; align-items:center; gap:14px; margin-top:34px;}
.beta-actions .form-note{text-align:center;}
.btn-cta{height:58px; padding:0 42px; font-size:17px; font-weight:600; gap:10px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 20px 46px -14px color-mix(in srgb,var(--brand) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.30);
  position:relative; overflow:hidden;}
.btn-cta::before{content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s ease;}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 26px 56px -14px color-mix(in srgb,var(--brand) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.30);}
.btn-cta:hover::before{transform:translateX(120%);}
.btn-cta svg{transition:transform .2s ease;}
.btn-cta:hover svg{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){.btn-cta::before{display:none;} .btn-cta svg{transition:none;}}