/* Blessin AI — Landing v3 (ZeroDrift-style dark immersive, Ember Owl palette) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Fluid root type (zerodrift technique) */
:root {
  --font-from: 16; --font-to: 18;
  --vw-from: calc(1440 / 100); --vw-to: calc(1920 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
  --ink: oklch(0.985 0 0);
  --ink-dim: oklch(0.708 0 0);
  --canvas: #131110;
  --panel: #1c1917;
  --hairline: rgba(255,255,255,.09);
}
html { font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw); }
@media (max-width: 1440px) { :root { --font-from: 14; --font-to: 16; --vw-from: calc(479 / 100); --vw-to: calc(1440 / 100); } }

body {
  margin: 0; font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  background: var(--canvas); color: var(--ink);
  overflow-x: hidden;
}
a { color: var(--brand-coral); text-decoration: none; }
a:hover { color: var(--brand-amber); }
::selection { background: var(--brand-ember); color: #fff; }
.word-mask { display: block; overflow: hidden; padding-block: .08em; margin-block: -.08em; }
.split-word { display: inline-block; white-space: nowrap; }

/* Glow washes (bokeh-style, pure CSS) */
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(90px); will-change: transform; }
.glow.g-coral { background: radial-gradient(circle, rgba(239,106,75,.5), rgba(239,106,75,0) 70%); }
.glow.g-amber { background: radial-gradient(circle, rgba(240,166,43,.42), rgba(240,166,43,0) 70%); }
.glow.g-ember { background: radial-gradient(circle, rgba(194,73,47,.5), rgba(194,73,47,0) 70%); }
.glow.g-sage  { background: radial-gradient(circle, rgba(14,159,110,.28), rgba(14,159,110,0) 70%); }

/* ---------- Navbar ---------- */
.topbar {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(1060px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 18px; border-radius: 26px;
  background: rgba(19,17,16,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--hairline);
}
.topbar .word { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: var(--ink); }
.topbar .word img { width: 30px; height: 30px; }
.topbar nav { display: flex; gap: 2px; }
.topbar nav a { font-size: 13px; font-weight: 500; color: var(--ink-dim); padding: 8px 14px; border-radius: 26px; transition: color .15s, background .15s; }
.topbar nav a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.cta-pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 26px;
  background: var(--brand-coral); color: #131110 !important; font-size: 13px; font-weight: 600;
  transition: background .15s, transform .1s, box-shadow .2s; box-shadow: 0 6px 24px rgba(239,106,75,.35);
}
.cta-pill:hover { background: var(--brand-amber); }
.cta-pill:active { transform: translateY(1px); }
@media (max-width: 880px) { .topbar nav { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg .g1 { width: 70vw; height: 70vw; top: -30vw; left: -22vw; }
.hero-bg .g2 { width: 44vw; height: 44vw; bottom: -14vw; right: -12vw; }
.hero-bg .g3 { width: 30vw; height: 30vw; top: 12vh; right: 8vw; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 75%); }
.hero-inner { position: relative; z-index: 2; text-align: center; padding: 150px 24px 110px; max-width: 980px; }
.hello-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 26px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline); backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 500; color: var(--brand-amber);
}
.hello-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--widget-online); box-shadow: 0 0 0 4px rgba(74,222,128,.18); }
h1.hero-h { font-size: clamp(46px, 7.2vw, 102px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; margin: 30px 0 0; }
h1.hero-h em { font-style: normal; color: var(--brand-coral); }
h1.hero-h em .split-word { background: linear-gradient(100deg, var(--brand-coral), var(--brand-amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(16px, 1.4vw, 20px); color: var(--ink-dim); max-width: 580px; margin: 28px auto 0; line-height: 1.6; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.cta-pill.lg { height: 50px; padding: 0 30px; font-size: 14px; }
.cta-ghost {
  display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 26px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline); color: var(--ink) !important;
  font-size: 14px; font-weight: 500; transition: background .15s;
}
.cta-ghost:hover { background: rgba(255,255,255,.1); }
/* typewriter line */
.typeline { margin-top: 60px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; color: var(--ink-dim); min-height: 22px; }
.typeline .caret { display: inline-block; width: 8px; height: 16px; background: var(--brand-coral); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 12px; color: var(--ink-dim); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 20px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.02); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 32s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-track span { font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-dim); white-space: nowrap; display: flex; align-items: center; gap: 48px; }
.marquee-track span::after { content: "✦"; color: var(--brand-amber); font-size: 13px; }
.marquee-track b { color: var(--brand-coral); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Sections ---------- */
section.beat { position: relative; padding: 140px 24px; overflow: hidden; }
.wrap { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-amber); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--brand-amber); }
h2.punch { font-size: clamp(34px, 4.8vw, 68px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; margin: 20px 0 0; text-wrap: balance; }
.lede { font-size: 17px; line-height: 1.65; color: var(--ink-dim); max-width: 600px; margin-top: 22px; text-wrap: pretty; }
.ghost-num { position: absolute; top: 40px; right: 2vw; font-size: clamp(120px, 20vw, 300px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: #fff; opacity: .035; pointer-events: none; user-select: none; }

/* ---------- Villain: scrub-lit manifesto ---------- */
.manifesto { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; max-width: 900px; margin: 60px 0 0; text-wrap: pretty; }
.manifesto .split-char { will-change: opacity; }
.manifesto em { font-style: normal; color: var(--brand-coral); }
.owl-peek { position: absolute; bottom: -12px; right: 5%; width: 120px; rotate: -6deg; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); z-index: 2; }

/* ---------- Turn: glass cards on glow ---------- */
.glass-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 60px; }
.glass {
  border-radius: 18px; padding: 30px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
}
.glass:hover { transform: translateY(-6px); background: rgba(255,255,255,.06); border-color: rgba(239,106,75,.35); }
.glass .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #131110; background: linear-gradient(145deg, var(--brand-coral), var(--brand-ember)); }
.glass .ic.amber { background: linear-gradient(145deg, #F6BC55, var(--brand-amber)); }
.glass .ic.sage { background: linear-gradient(145deg, #35B98A, var(--brand-sage)); color: #fff; }
.glass h3 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; letter-spacing: -.01em; }
.glass p { font-size: 14px; line-height: 1.6; color: var(--ink-dim); margin: 0; }

/* ---------- Magic: step-scroll with filling lines ---------- */
.steps { margin-top: 70px; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding: 44px 0; position: relative; }
.step .gutter { position: relative; display: flex; flex-direction: column; align-items: center; }
.step .num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--ink-dim); border: 1px solid var(--hairline); background: var(--panel); transition: color .3s, border-color .3s, box-shadow .3s; }
.step.lit .num { color: #131110; background: var(--brand-coral); border-color: var(--brand-coral); box-shadow: 0 0 30px rgba(239,106,75,.5); }
.step .line { flex: 1; width: 2px; margin-top: 10px; background: var(--hairline); position: relative; }
.step .line i { position: absolute; inset: 0; background: linear-gradient(var(--brand-coral), var(--brand-amber)); transform: scaleY(0); transform-origin: top; }
.step:last-child .line { display: none; }
.step h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.02em; margin: 8px 0 10px; }
.step p { font-size: 15px; line-height: 1.65; color: var(--ink-dim); margin: 0; max-width: 560px; }
.step .chip { display: inline-flex; white-space: nowrap; margin-top: 16px; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 26px; background: rgba(14,159,110,.14); color: #4ade80; border: 1px solid rgba(14,159,110,.3); }
.step .chip.coral { background: rgba(239,106,75,.12); color: var(--brand-coral); border-color: rgba(239,106,75,.3); }

/* ---------- Journey: light interlude ---------- */
.journey { background: #FBF6F3; color: #1a1614; border-radius: 32px 32px 0 0; }
.journey .kicker { color: var(--brand-ember); }
.journey .kicker::before { background: var(--brand-ember); }
.journey .lede { color: #6b5f58; }
.journey .ghost-num { color: var(--brand-ember); opacity: .06; }
.journey-media { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 60px; }
.journey-media .slot-wrap { min-height: 320px; }
@media (max-width: 880px) { .journey-media { grid-template-columns: 1fr; } }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 22px; }
.qcard { border-radius: 16px; background: #fff; border: 1px solid rgba(26,22,20,.08); padding: 22px; }
.qcard .t { font-size: 12px; font-weight: 600; color: var(--brand-ember); letter-spacing: .08em; text-transform: uppercase; }
.qcard p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #1a1614; }

/* ---------- Install (dark, spell) ---------- */
.install { border-radius: 0 0 32px 32px; background: #FBF6F3; color: #1a1614; padding-top: 40px; }
.install .kicker { color: var(--brand-ember); } .install .kicker::before { background: var(--brand-ember); }
.install .lede { color: #6b5f58; }
.spell { margin: 52px auto 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.spell .pill { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 26px; font-size: 15px; font-weight: 500; background: #fff; border: 1px solid rgba(26,22,20,.1); color: #1a1614; }
.spell .pill svg, .spell .pill i { color: var(--brand-amber); }
.spell .pill.glow-pill { background: linear-gradient(145deg, var(--brand-coral), var(--brand-ember)); border: none; color: #fff; box-shadow: 0 14px 44px rgba(239,106,75,.4); }
.spell .sp-arrow { color: var(--brand-ember); }
.widget-demo { display: flex; justify-content: center; margin-top: 60px; }
.wchat { width: 340px; border-radius: 16px; background: #fff; color: var(--zinc-900); box-shadow: 0 30px 80px rgba(26,22,20,.25); overflow: hidden; text-align: left; }
.wchat .whead { background: var(--brand-coral); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.wchat .whead img { width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 3px; }
.wchat .whead .nm { font-size: 14px; font-weight: 600; }
.wchat .whead .st { font-size: 11px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.wchat .whead .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--widget-online); }
.wchat .wbody { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.bub { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; overflow-wrap: break-word; height: auto; }
.bub.bot { background: var(--zinc-100); align-self: flex-start; border-bottom-left-radius: 6px; }
.bub.me { background: var(--brand-coral); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.cite { align-self: flex-start; font-size: 11px; color: var(--brand-pine); background: var(--widget-success-bg); padding: 4px 10px; border-radius: 26px; font-weight: 600; }
.dots { display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--zinc-100); border-radius: 16px; border-bottom-left-radius: 6px; align-self: flex-start; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--zinc-400); animation: dotb 1.1s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotb { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.wchat .wfoot { border-top: 1px solid var(--zinc-200); padding: 10px 12px; display: flex; gap: 8px; align-items: center; }
.wchat .wfoot .fake-in { flex: 1; height: 34px; border-radius: 26px; border: 1px solid var(--zinc-300); font-size: 13px; color: var(--zinc-400); display: flex; align-items: center; padding: 0 14px; }
.wchat .wfoot .snd { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-coral); display: grid; place-items: center; color: #fff; }
.pow { text-align: center; font-size: 10.5px; color: var(--zinc-400); padding: 6px 0 10px; }

/* ---------- Lead form (dark, glow) ---------- */
.leadform { text-align: center; }
.leadform .g-form1 { width: 60vw; height: 60vw; bottom: -30vw; left: -20vw; }
.leadform .g-form2 { width: 40vw; height: 40vw; top: -10vw; right: -14vw; }
.form-shell {
  margin: 56px auto 0; border-radius: 22px; padding: 42px; max-width: 720px; text-align: left;
  background: rgba(255,255,255,.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline); box-shadow: 0 30px 90px rgba(0,0,0,.4);
}
.form-shell label { color: var(--ink); }
.form-shell input, .form-shell textarea { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; color: var(--ink) !important; }
.form-shell input::placeholder, .form-shell textarea::placeholder { color: rgba(255,255,255,.32); }
@media (max-width: 640px) { .form-shell { padding: 24px; } }

/* ---------- Footer ---------- */
footer { padding: 44px 24px 60px; border-top: 1px solid var(--hairline); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .fword { display: flex; align-items: center; gap: 10px; font-weight: 600; }
footer .fword img { width: 26px; height: 26px; }
footer .fine { font-size: 13px; color: var(--ink-dim); }