/* ============================================================
   08 · Aurora Glass — aurora gradient backdrop + glassmorphism
   Trend: aurora UI + frosted glass cards, soft pastel, modern
   SaaS/product feel. Light, dreamy, airy. See design.md.
   ============================================================ */
:root{
  --bg:#eef0fb; --text:#191b2e; --dim:#565a75; --faint:#8b8fa8; --line:rgba(25,27,46,.09);
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.7);
  --a1:#7c6cff; --a2:#4bc0e8; --a3:#ff8fce; --a4:#8be9c8;
  --grad:linear-gradient(120deg,var(--a1),var(--a2));
  --disp:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif; --body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(18px,4vw,44px); --r:22px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
/* aurora field */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;filter:saturate(1.1)}
.aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.72;mix-blend-mode:multiply}
.aurora .b1{width:52vw;height:52vw;background:var(--a1);top:-14vw;left:-8vw;animation:drift1 20s var(--ease) infinite alternate}
.aurora .b2{width:46vw;height:46vw;background:var(--a2);top:-6vw;right:-10vw;animation:drift2 24s var(--ease) infinite alternate}
.aurora .b3{width:44vw;height:44vw;background:var(--a3);bottom:-16vw;left:16vw;animation:drift3 26s var(--ease) infinite alternate}
.aurora .b4{width:38vw;height:38vw;background:var(--a4);bottom:-12vw;right:6vw;animation:drift1 22s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(6vw,5vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-5vw,7vw) scale(1.1)}}
@keyframes drift3{to{transform:translate(4vw,-6vw) scale(1.2)}}
@media(prefers-reduced-motion:reduce){.aurora span{animation:none}}

.eyebrow{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}

/* glass utility */
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-line);border-radius:var(--r);box-shadow:0 8px 40px -16px rgba(60,50,120,.35)}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1140px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px}
.nav .brand{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.nav .brand .dot{width:22px;height:22px;border-radius:8px;background:var(--grad)}
.nav .links{display:flex;align-items:center;gap:clamp(4px,1.4vw,12px)}
.nav .links a{font-size:14px;font-weight:600;color:var(--dim);padding:7px 12px;border-radius:999px;transition:.2s var(--ease)}
.nav .links a:hover{color:var(--text);background:rgba(255,255,255,.6)}
.lang{display:inline-flex;gap:2px;background:rgba(255,255,255,.5);border-radius:999px;padding:3px}
.lang button{font-family:var(--disp);font-size:12px;font-weight:700;padding:6px 11px;border:0;background:transparent;color:var(--faint);border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--grad);color:#fff}
@media(max-width:660px){.nav .links a:not(.hide-sm){display:none}}

/* hero — full viewport */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px var(--pad) var(--pad)}
.hero .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--dim);margin-bottom:26px}
.hero .pill .live{width:8px;height:8px;border-radius:50%;background:var(--a4);box-shadow:0 0 0 4px rgba(139,233,200,.4)}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,8vw,92px);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.hero p.lede{font-size:clamp(16px,1.7vw,20px);color:var(--dim);max-width:52ch;margin:24px auto 32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:14px;font-weight:700;padding:13px 24px;border-radius:999px;cursor:pointer;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--text);transition:.2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--grad);color:#fff;border-color:transparent}
.scrollcue{margin-top:52px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

.section{padding:clamp(48px,8vw,110px) 0}
.section-head{text-align:center;max-width:60ch;margin:0 auto clamp(32px,4vw,56px)}
.section-head h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.6vw,52px);letter-spacing:-.03em;line-height:1.05}
.section-head p{color:var(--dim);margin-top:14px}

.grid{display:grid;gap:clamp(14px,1.8vw,20px)}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.g3,.g2{grid-template-columns:1fr}}
.card{padding:clamp(22px,2.6vw,32px)}
.card .ico{width:46px;height:46px;border-radius:13px;background:var(--grad);margin-bottom:16px;display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:800}
.card h3{font-family:var(--disp);font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--dim);font-size:15px}
.card.big{grid-column:span 2}
@media(max-width:600px){.card.big{grid-column:span 1}}
.stat .n{font-family:var(--disp);font-weight:800;font-size:clamp(34px,5vw,54px);letter-spacing:-.02em}
.stat .l{color:var(--dim);font-size:14px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--dim);border:1px solid var(--glass-line)}

/* contact */
.cta-band{padding:clamp(34px,5vw,64px);text-align:center}
.cta-band h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,58px);letter-spacing:-.03em;margin-bottom:10px}
.cta-band p{color:var(--dim);margin-bottom:26px}
.cta-band .row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.cta-band .row a{font-size:13px;font-weight:600;color:var(--dim)}
.cta-band .row a:hover{color:var(--text)}
.foot{text-align:center;color:var(--faint);font-size:12.5px;padding:34px var(--pad)}
.tpl-note{text-align:center;color:var(--faint);font-size:12.5px;font-style:italic;margin-top:26px}

html.js [data-rise]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-rise].in{opacity:1;transform:none}
html.js [data-rise][data-d="1"]{transition-delay:.08s}html.js [data-rise][data-d="2"]{transition-delay:.16s}html.js [data-rise][data-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js [data-rise]{opacity:1;transform:none;transition:none}}