/* =============================================================================
   neuday.ai — 2026 identity
   Palette is derived from the logo file itself (content stream: 0.49 0.125 0.149
   -> #7D2026), not from an eyeballed screenshot. Single committed dark world:
   this is an application surface, not a document.
   ========================================================================== */

:root {
  /* brand -------------------------------------------------------------- */
  --dahlia:       #7D2026;   /* exact brand red, Pantone 19-1555 TCX */
  --dahlia-lift:  #A6303A;   /* interactive / hover on dark ground */
  --dahlia-glow:  #C9414C;   /* rare emphasis only */
  --dahlia-deep:  #4C1216;   /* pressed, deep field */
  --dahlia-veil:  rgba(125, 32, 38, .22);

  /* ground — near-black carries a red bias so nothing reads as stock grey */
  --ink:      #130708;
  --ink-2:    #180A0C;
  --panel:    #1D0F11;
  --panel-2:  #29161A;
  --panel-3:  #351D21;
  --line:     #3A2125;
  --line-2:   #2A1519;

  /* bone — warm off-white, never pure #fff on the dark ground */
  --bone:    #F8F2EF;
  --bone-2:  #CBB4B2;
  --bone-3:  #8F7376;
  --bone-4:  #6A5254;

  /* light sections */
  --paper:    #F6EFEC;
  --paper-2:  #EDE2DE;
  --paper-ink:#1B0C0E;
  --paper-ink-2: #6B4E50;
  --paper-line: #DFCFCA;

  /* semantic — deliberately outside the red family so state reads at a glance */
  --ok:    #3E9E6B;
  --warn:  #D9992E;
  --info:  #5E8AC9;

  /* channel identity — real marketplace colours, same as the product panel */
  --ch-ty:  #F27A1A;
  --ch-hb:  #E4002B;
  --ch-n11: #5C2D91;
  --ch-wa:  #25D366;
  --ch-ig:  #C13584;

  /* type */
  --display: "Gabarito", system-ui, sans-serif;
  --ui: "Figtree", system-ui, -apple-system, sans-serif;
  --data: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Kept for the wordmark's .ai box only — the rest of the handwritten
     treatment (kickers, marker underlines, step numbers) is retired. */
  --hand: "Shantell Sans", var(--ui);

  /* form */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --shadow: 0 2px 4px rgba(0,0,0,.3), 0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-lift: 0 4px 8px rgba(0,0,0,.34), 0 40px 90px -28px rgba(0,0,0,.8);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* =============================================================================
   RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* App chrome, not a document: kill rubber-banding past the ends. */
  overscroll-behavior-y: none;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--dahlia-glow);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--dahlia); color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Custom scrollbar — a browser default scrollbar is the fastest way to make an
   app-like surface read as a web page again. */
* { scrollbar-width: thin; scrollbar-color: var(--panel-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--panel-3);
  border-radius: 20px;
  border: 3px solid var(--ink);
}
*::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* =============================================================================
   TYPE SCALE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* Capped so the nowrap highlight block always fits its column instead of
   spilling over the device scene. */
h1 { font-size: clamp(2.15rem, 3.7vw, 3.45rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.05; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2; }

p { margin: 0; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 56ch;
}

.eyebrow {
  font-family: var(--ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dahlia-glow);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--dahlia-lift);
  border-radius: 2px;
}

/* Emphasis device: a solid block, not a hand-drawn marker. Geometric reads as
   software; the scribble read as a greetings card. */
.mark-hl {
  background: var(--dahlia);
  color: var(--bone);
  padding: 0 .18em .06em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* The block must never split across lines — a staircase of ragged rectangles
     is the failure mode here, so the phrase wraps as one unit or not at all. */
  white-space: nowrap;
}
@media (max-width: 420px) { .mark-hl { white-space: normal; } }
.on-red .mark-hl { background: var(--bone); color: var(--dahlia); }

.num { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* =============================================================================
   LAYOUT
   ========================================================================== */

.shell {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}
@media (max-width: 640px) { .shell { width: min(1240px, 100% - 28px); } }

section { position: relative; }

.band       { padding: clamp(72px, 9vw, 132px) 0; }
.band-ink   { background: var(--ink); }
.band-panel { background: var(--ink-2); }
.band-paper { background: var(--paper); color: var(--paper-ink); }
.band-paper .lede { color: var(--paper-ink-2); }
.band-paper .eyebrow { color: var(--dahlia); }
.band-paper .eyebrow::before { background: var(--dahlia); }

.head { max-width: 68ch; }
.head h2 { margin: 16px 0 14px; }

/* Hairline between bands, tinted rather than grey. */
.band + .band { border-top: 1px solid var(--line-2); }
.band-paper + .band, .band + .band-paper { border-top: 0; }

/* Reveal on scroll — small, once, never a carousel of effects. */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.rv.in { opacity: 1; transform: none; }

/* =============================================================================
   BUTTONS — chunky pills, pressed state, no gradients
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-family: var(--ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .12s var(--ease), background .16s, box-shadow .16s, color .16s;
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn-primary { background: var(--bone); color: var(--dahlia-deep); }
.btn-primary:hover { background: #fff; box-shadow: 0 8px 26px -10px rgba(255,255,255,.45); }

.btn-solid { background: var(--dahlia); color: var(--bone); }
.btn-solid:hover { background: var(--dahlia-lift); box-shadow: 0 10px 30px -12px var(--dahlia-glow); }

.btn-ghost {
  background: rgba(255,255,255,.09);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.btn-ghost:hover { background: rgba(255,255,255,.15); }

.btn-outline {
  color: var(--paper-ink);
  box-shadow: inset 0 0 0 1.5px var(--paper-line);
}
.btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--dahlia); color: var(--dahlia); }

.btn-sm { padding: 9px 18px; font-size: .9rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   BRAND LOCKUP
   ========================================================================== */

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand .mark { color: var(--bone); flex: none; }
.band-paper .brand .mark { color: var(--dahlia); }

/* Wordmark is carried over unchanged from the previous identity — same face,
   same weight, same tracking, same boxed .ai. Only the box colour moves from
   orange to dahlia. The handwritten face survives here and nowhere else. */
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.62rem;
  letter-spacing: -.055em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.wordmark .tld {
  font-family: var(--hand);
  font-weight: 700;
  font-style: italic;
  font-size: .69em;
  letter-spacing: -.01em;
  line-height: 1;
  background: var(--dahlia-lift);
  color: #fff;
  padding: 3px 9px 4px;
  border-radius: 9px;
  margin-left: 6px;
}
/* On a dahlia field the box has to invert, or it vanishes into the ground. */
.on-red .wordmark .tld { background: var(--bone); color: var(--dahlia); }
.band-paper .wordmark .tld { background: var(--dahlia); color: #fff; }

/* =============================================================================
   NAV — floating glass pill, behaves like an app titlebar
   ========================================================================== */

#nav {
  position: fixed;
  inset: 14px 0 auto;
  z-index: 90;
  pointer-events: none;
  transition: transform .3s var(--ease);
}
#nav.hidden { transform: translateY(-130%); }

#nav .bar {
  pointer-events: auto;
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 9px 9px 18px;
  border-radius: 100px;
  background: rgba(19, 7, 8, .72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 44px -22px rgba(0,0,0,.9);
}

#nav .links { display: flex; gap: 4px; margin-left: auto; }
#nav .links a {
  padding: 8px 15px;
  border-radius: 100px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--bone-2);
  transition: color .15s, background .15s;
}
#nav .links a:hover { color: var(--bone); background: rgba(255,255,255,.08); }

@media (max-width: 900px) { #nav .links { display: none; } #nav .bar { gap: 12px; } }

/* =============================================================================
   HERO — full dahlia field, product window rising into it from below
   ========================================================================== */

#hero {
  position: relative;
  background: var(--dahlia);
  padding: clamp(130px, 15vw, 190px) 0 0;
  /* Visible, so the phone can break out of the bottom edge into the next band.
     The atmosphere is clipped by .ambient instead of by the section. */
  overflow: visible;
  z-index: 2;
}

/* Atmosphere lives here rather than on #hero::before, for two reasons: this
   container can clip it while the section stays overflow:visible, and the old
   `inset: -30% -10% auto; height:120%` stopped at 90% of the hero — leaving the
   bottom strip as flat, unshaded dahlia with a hard seam. It now runs past the
   bottom edge, so the vignette reaches all the way down. */
.ambient::before {
  content: "";
  position: absolute;
  inset: -30% -10% -12%;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(201, 65, 76, .45), transparent 70%),
    radial-gradient(95% 55% at 50% 100%, var(--dahlia-deep), transparent 74%);
  pointer-events: none;
}

/* Faint dot field — the texture of a canvas app, not notebook paper. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(75% 62% at 50% 34%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(75% 62% at 50% 34%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* Grounds the devices on the bottom strip: without this the scene floated on a
   flat band with nothing beneath it. */
.hero-shade {
  position: absolute;
  inset: auto 0 0;
  height: 190px;
  background: linear-gradient(180deg, transparent, rgba(43, 8, 11, .55));
  pointer-events: none;
  z-index: 1;
}

#hero .shell { position: relative; z-index: 2; }

/* Two columns: the argument on the left, the product on the right. A centred
   column of words is a poster; this has to read as a product page. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
  padding-bottom: clamp(60px, 8vw, 110px);
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .eyebrow, #hero .cta-row, .hero-trust { justify-content: center; }
  #hero .lede { margin-inline: auto; }
}

.hero-copy h1 { color: var(--bone); margin: 18px 0 0; }
.hero-copy .eyebrow { color: rgba(248,242,239,.72); display: inline-flex; }
.hero-copy .eyebrow::before { background: rgba(255,255,255,.5); }

#hero .lede {
  color: rgba(248,242,239,.85);
  max-width: 46ch;
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
}

#hero .cta-row { margin-top: 30px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  font-size: .86rem;
  font-weight: 600;
  color: rgba(248,242,239,.72);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust svg { flex: none; }

/* =============================================================================
   HERO SCENE — device mockups drawn here, not imported.
   A downloaded mockup would be someone else's licence, someone else's grey,
   and a dead image. These are real DOM, so the app inside them actually runs.
   ========================================================================== */

.hero-scene {
  position: relative;
  z-index: 3;
  perspective: 1800px;
  padding: 20px 0 40px;
}
.hero-scene > * { will-change: transform; }

/* --- monitor -------------------------------------------------------------- */

.monitor {
  position: relative;
  border-radius: 18px;
  padding: 12px 12px 26px;
  background: linear-gradient(165deg, #35191D, #1B0C0E 60%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 40px 80px -30px rgba(0,0,0,.85),
    0 8px 24px -8px rgba(0,0,0,.5);
  transform: rotateY(-7deg) rotateX(3deg);
  transform-style: preserve-3d;
}
.monitor::after {   /* glass sheen */
  content: "";
  position: absolute;
  inset: 12px 12px 26px;
  border-radius: 9px;
  background: linear-gradient(112deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 34%);
  pointer-events: none;
  z-index: 4;
}
.monitor .screen {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
  aspect-ratio: 16 / 10.4;
}
.monitor .chin {
  position: absolute;
  inset: auto 0 9px;
  height: 8px;
  display: grid;
  place-items: center;
}
.monitor .chin i {
  width: 44px; height: 4px;
  border-radius: 20px;
  background: rgba(255,255,255,.16);
}

/* stand: neck + base, in the same two-tone metal as the bezel */
.stand { position: relative; margin-top: -2px; display: grid; place-items: center; }
.stand .neck {
  width: 96px; height: 40px;
  background: linear-gradient(180deg, #2E1519, #1B0C0E);
  clip-path: polygon(26% 0, 74% 0, 88% 100%, 12% 100%);
}
.stand .base {
  width: 230px; height: 12px;
  border-radius: 0 0 40px 40px / 0 0 14px 14px;
  background: linear-gradient(180deg, #35191D, #170A0C);
  box-shadow: 0 22px 34px -18px rgba(0,0,0,.9);
}

/* --- app inside the screen ------------------------------------------------ */

.mini { display: grid; grid-template-columns: 46px 1fr; height: 100%; font-size: 11px; }
.mini-rail {
  background: var(--ink);
  border-right: 1px solid var(--line-2);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.mini-rail i {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  color: var(--bone-3);
  flex: none;
}
.mini-rail i.on { background: var(--dahlia); color: #fff; border-radius: 8px; }
.mini-rail i svg { width: 15px; height: 15px; }

.mini-main { padding: 10px 11px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.mini-top { display: flex; align-items: center; gap: 8px; }
.mini-top b { font-family: var(--display); font-size: 13px; letter-spacing: -.03em; }
.mini-top .live { font-size: 8.5px; }
.mini-top .live i { width: 5px; height: 5px; }

.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini-kpi {
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mini-kpi span { font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--bone-3); font-weight: 700; }
.mini-kpi b { display: block; font-family: var(--data); font-size: 13px; letter-spacing: -.03em; margin-top: 1px; }

.mini-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 7px; flex: 1; min-height: 0; }
.mini-cell {
  border-radius: 7px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mini-cell > b {
  padding: 6px 9px;
  font-size: 9.5px;
  border-bottom: 1px solid var(--line-2);
  color: var(--bone-2);
}
.mini-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 7px;
  align-items: center;
  padding: 5.5px 9px;
  border-bottom: 1px solid var(--line-2);
  font-size: 9.5px;
  white-space: nowrap;
}
.mini-row:last-child { border-bottom: 0; }
.mini-row .amt { font-family: var(--data); }
.mini-row .ch-dot { width: 6px; height: 6px; margin-right: 5px; }
.mini-msg { display: flex; align-items: center; gap: 7px; padding: 6px 9px; font-size: 9.5px; }
.mini-msg .av {
  width: 20px; height: 20px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 7px; font-weight: 800; color: #fff;
  flex: none;
}
.mini-msg span { overflow: hidden; text-overflow: ellipsis; color: var(--bone-3); }

/* --- phone ---------------------------------------------------------------- */

.phone {
  position: absolute;
  right: -1%;
  /* Deliberately past the hero's bottom edge — it crosses into the dark band
     below, which is why #hero is overflow:visible. */
  bottom: -30%;
  width: clamp(120px, 15%, 176px);
  border-radius: 24px;
  padding: 7px;
  background: linear-gradient(160deg, #3A1C21, #180A0C);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 30px 60px -20px rgba(0,0,0,.9);
  transform: rotate(4deg);
  z-index: 5;
}
/* Scoped to .pscreen, NOT .phone. The platform switcher reuses this same markup
   inside its own frame; scoping to the hero phone left that copy unstyled —
   full-size tab icons, name and message run together, clipped title.
   --ps scales the contents so one rule set serves both frame sizes. */
.pscreen {
  --ps: 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  display: flex;
  flex-direction: column;
}
.phone .pscreen { aspect-ratio: 9 / 18.5; }

.pscreen .notch { flex: none; height: calc(14px * var(--ps)); display: grid; place-items: center; }
.pscreen .notch i {
  width: calc(34px * var(--ps));
  height: calc(4px * var(--ps));
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
}
.pscreen .ptitle {
  flex: none;
  padding: 0 calc(9px * var(--ps)) calc(7px * var(--ps));
  font-family: var(--display);
  font-size: calc(10px * var(--ps));
  font-weight: 800;
  letter-spacing: -.02em;
}
.pscreen .plist { flex: 1; min-height: 0; overflow: hidden; }
.pscreen .pmsg {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ps));
  padding: calc(6px * var(--ps)) calc(8px * var(--ps));
}
.pscreen .pmsg .av {
  width: calc(17px * var(--ps));
  height: calc(17px * var(--ps));
  border-radius: calc(6px * var(--ps));
  display: grid;
  place-items: center;
  font-size: calc(6px * var(--ps));
  font-weight: 800;
  color: #fff;
  flex: none;
}
.pscreen .pmsg .t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pscreen .pmsg .t b {
  font-size: calc(8px * var(--ps));
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* a wrapping name pushed the row height out */
}
.pscreen .pmsg .t span {
  font-size: calc(7.5px * var(--ps));
  color: var(--bone-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pscreen .ptabs {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line-2);
  padding: calc(5px * var(--ps)) calc(4px * var(--ps)) calc(7px * var(--ps));
}
.pscreen .ptabs i { flex: 1; display: grid; place-items: center; color: var(--bone-4); }
.pscreen .ptabs i svg { width: calc(11px * var(--ps)); height: calc(11px * var(--ps)); }
.pscreen .ptabs i.on { color: var(--dahlia-glow); }

@media (max-width: 560px) { .phone { display: none; } }

/* --- floating notification cards ------------------------------------------ */

.fcard {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 10px;
  border-radius: 14px;
  background: rgba(29, 15, 17, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 22px 44px -18px rgba(0,0,0,.9);
  z-index: 6;
  animation: bob 6s ease-in-out infinite;
}
.fcard .ic {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
  flex: none;
}
.fcard .tx { display: flex; flex-direction: column; line-height: 1.25; }
.fcard .tx b { font-size: .82rem; font-weight: 700; color: var(--bone); }
.fcard .tx small { font-size: .72rem; color: var(--bone-3); }

.fcard.f1 { top: 2%;  left: -6%;  animation-delay: -.4s; }
.fcard.f2 { top: 54%; left: -8%;  animation-delay: -2.1s; }
/* Bottom-left of the scene: clear of the phone, which sits bottom-right. */
.fcard.f3 { bottom: 2%; left: 2%; animation-delay: -3.6s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (max-width: 1020px) { .fcard.f2 { display: none; } .fcard.f1 { left: 0; } }
@media (max-width: 700px)  { .fcard { display: none; } }

/* --- ambient: soft dahlia blobs + drifting sparks -------------------------- */

.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ambient .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
}
.ambient .b1 { width: 46vw; height: 46vw; top: -14%; right: -8%; background: #C9414C; opacity: .3; }
.ambient .b2 { width: 38vw; height: 38vw; bottom: -18%; left: -10%; background: #4C1216; opacity: .7; }
.ambient .spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  animation: drift linear infinite;
}
@keyframes drift {
  from { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: .8; }
  88%  { opacity: .8; }
  to   { transform: translateY(-140px) scale(.4); opacity: 0; }
}

/* =============================================================================
   DEMO SECTION — the full-size, fully interactive module switcher
   ========================================================================== */

.hero-stage { margin-top: 42px; }

/* =============================================================================
   APP WINDOW — the piece that has to read as software
   ========================================================================== */

.window {
  background: var(--panel);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
  overflow: hidden;
}
.window.floating { border-radius: var(--r-lg); }

.titlebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.titlebar .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.titlebar .dot:nth-child(1) { background: #E05A50; }
.titlebar .dot:nth-child(2) { background: #D9992E; }
.titlebar .dot:nth-child(3) { background: #3E9E6B; }
.titlebar .name {
  margin-left: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--bone-3);
}
.live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ok);
}
.live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,158,107,.55); }
  60%      { box-shadow: 0 0 0 7px rgba(62,158,107,0); }
}

.window-body { display: grid; grid-template-columns: 72px 1fr; min-height: 470px; }
@media (max-width: 780px) { .window-body { grid-template-columns: 58px 1fr; min-height: 0; } }

/* --- module rail: Discord's server rail, doing real navigation ------------ */

.rail {
  background: var(--ink);
  border-right: 1px solid var(--line-2);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  overflow-y: auto;
}

.rail-item {
  position: relative;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--bone-2);
  transition: border-radius .18s var(--ease), background .18s, color .18s, transform .12s var(--ease);
}
.rail-item:hover { border-radius: 13px; background: var(--dahlia); color: var(--bone); }
.rail-item:active { transform: scale(.93); }
.rail-item.on { border-radius: 13px; background: var(--dahlia); color: var(--bone); }

/* Brand tile: always lit, never carries the active pill. */
.rail-brand {
  background: var(--dahlia);
  color: var(--bone);
  border-radius: 15px;
  cursor: default;
}
.rail-brand:hover { background: var(--dahlia); border-radius: 15px; }
.rail-brand::before { display: none; }

/* The white pill that grows on the active item — Discord's exact affordance. */
.rail-item::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background: var(--bone);
  transition: height .2s var(--ease);
}
.rail-item:hover::before { height: 18px; }
.rail-item.on::before { height: 26px; }

.rail-item .tip {
  position: absolute;
  left: calc(100% + 14px);
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bone);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
  transition: opacity .14s, transform .14s var(--ease);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.9);
  z-index: 6;
}
.rail-item .tip::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--ink);
}
.rail-item:hover .tip { opacity: 1; transform: none; }
@media (max-width: 900px) { .rail-item .tip { display: none; } }

.rail-sep {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  flex: none;
  margin: 3px 0;
}

.rail-badge {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--dahlia-glow);
  color: #fff;
  font-family: var(--data);
  font-size: .66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px var(--ink);
}

/* --- panel --------------------------------------------------------------- */

.panel { padding: 20px 22px; overflow: hidden; }
@media (max-width: 780px) { .panel { padding: 15px 14px; } }

.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.panel-head h4 {
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.panel-head .sub { font-size: .84rem; color: var(--bone-3); }

.view { display: none; animation: swap .32s var(--ease); }
.view.on { display: block; }
@keyframes swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* KPI row */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kpi {
  position: relative;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.kpi .k {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bone-3);
}
.kpi .v {
  font-family: var(--data);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi .d { font-size: .76rem; color: var(--bone-3); margin-top: 2px; }
.kpi .d.up { color: var(--ok); }
.kpi .d.warn { color: var(--warn); }
.kpi .stripe { position: absolute; inset: 0 auto 0 0; width: 3px; }

/* Tables inside the panel */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
thead th {
  text-align: left;
  padding: 9px 13px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bone-3);
  background: var(--panel-2);
  white-space: nowrap;
}
tbody td { padding: 9px 13px; border-top: 1px solid var(--line-2); white-space: nowrap; }
tbody tr { transition: background .13s; }
tbody tr:hover { background: var(--panel-2); }
td.r, th.r { text-align: right; font-family: var(--data); font-variant-numeric: tabular-nums; }

.ch-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 0;
}

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
}
.tag-new  { background: rgba(125,32,38,.42);  color: #F09098; }
.tag-ok   { background: rgba(62,158,107,.2);  color: var(--ok); }
.tag-warn { background: rgba(217,153,46,.18); color: var(--warn); }
.tag-info { background: rgba(94,138,201,.18); color: var(--info); }

/* Two-column panel body */
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }

.cell {
  border-radius: var(--r-sm);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.cell > .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line-2);
  font-size: .8rem;
  font-weight: 700;
}
.cell > .h span:last-child { color: var(--bone-3); font-weight: 600; }
.cell .tbl-wrap { box-shadow: none; border-radius: 0; }
.cell thead th { background: transparent; }

/* Inbox list */
.msgs { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.msg {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  transition: background .13s;
}
.msg:hover { background: var(--panel-3); }
.msg .av {
  width: 32px; height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
  flex: none;
}
.msg .t { display: flex; flex-direction: column; min-width: 0; }
.msg .t b { font-size: .84rem; font-weight: 700; }
.msg .t span {
  font-size: .8rem;
  color: var(--bone-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg .when { margin-left: auto; font-size: .7rem; color: var(--bone-4); font-family: var(--data); }

/* Simple bar chart for the reports view */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 14px 4px 0; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars .b i {
  display: block;
  width: 100%;
  border-radius: 7px 7px 3px 3px;
  background: var(--dahlia);
  transition: height .7s var(--ease);
}
.bars .b.peak i { background: var(--dahlia-glow); }
.bars .b span { font-size: .72rem; color: var(--bone-3); font-family: var(--data); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: .8rem; color: var(--bone-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }

/* Stock meter */
.meter { height: 6px; border-radius: 20px; background: var(--panel-3); overflow: hidden; min-width: 74px; }
.meter i { display: block; height: 100%; border-radius: 20px; background: var(--ok); }
.meter.low i { background: var(--warn); }
.meter.out i { background: var(--dahlia-glow); }

/* =============================================================================
   MESS — the scattered tools that collapse into one
   ========================================================================== */

.mess-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .mess-grid { grid-template-columns: 1fr; } }

.scatter { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.scatter .chip {
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .88rem;
  font-weight: 600;
  color: var(--bone-2);
  transition: transform .3s var(--ease), opacity .3s;
}
.scatter .chip:nth-child(odd)  { transform: rotate(-1.4deg); }
.scatter .chip:nth-child(even) { transform: rotate(1.1deg); }
.scatter .chip:nth-child(3n)   { transform: rotate(2.2deg); }

.answer {
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  background: var(--dahlia);
  box-shadow: var(--shadow);
}
.answer h3 { color: var(--bone); margin: 20px 0 12px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.answer p { color: rgba(248,242,239,.86); font-size: 1rem; }

/* =============================================================================
   MODULES
   ========================================================================== */

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.mcard {
  padding: 24px 22px 22px;
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .2s var(--ease), box-shadow .2s, background .2s;
}
.mcard:hover {
  transform: translateY(-3px);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--dahlia-lift), var(--shadow);
}
.mcard .ic {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--dahlia-veil);
  color: var(--dahlia-glow);
  display: grid;
  place-items: center;
  margin-bottom: 17px;
}
.mcard h3 { margin-bottom: 8px; }
.mcard p { font-size: .93rem; color: var(--bone-3); line-height: 1.55; }

/* A dashed outline drawn with box-shadow, not `border-style: dashed` — that
   property with no border-width falls back to the UA default (medium/3px) and
   drew a raw rectangle over the neighbouring column. */
.mcard.soon {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
  background-image: none;
}

/* =============================================================================
   PLATFORM — where it runs
   ========================================================================== */

.plat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 42px; }

.plat {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.plat .ic { color: var(--dahlia-glow); margin-bottom: 16px; }
.plat h3 { margin-bottom: 7px; }
.plat p { font-size: .9rem; color: var(--bone-3); }
.plat .state {
  position: absolute;
  top: 18px; right: 18px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.state-live { background: rgba(62,158,107,.16); color: var(--ok); }
.state-soon { background: var(--panel-3); color: var(--bone-3); }

/* =============================================================================
   MARQUEE — customer logos
   ========================================================================== */

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  margin-top: 42px;
}
/* No `gap` here: with a duplicated track, -50% lands half a gap short and the
   loop visibly jumps. Spacing lives on the item so both halves are identical. */
.mtrack { display: flex; width: max-content; padding: 4px 0; animation: slide 44s linear infinite; }
.mtrack .mitem { margin-right: 16px; }
.marquee:hover .mtrack { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Logos keep their own colours on a light plate.
   Forcing them monochrome with brightness(0) invert(1) destroyed any logo whose
   counters are drawn as white shapes rather than transparency — Melomy collapsed
   into a solid blob, and normbitkisel (fill #ffffff) would have followed. A
   plate is the only treatment that is correct for every supplied asset. */
/* Fixed tiles. Scaling every logo to the same height made wide wordmarks huge
   and square marks tiny; each one now fits inside an identical plate instead. */
.mitem {
  flex: none;
  display: grid;
  place-items: center;
  width: 186px;
  height: 68px;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(248, 242, 239, .93);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .2s var(--ease), background .2s;
}
.mitem img {
  max-width: 100%;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.35) contrast(1.05);
  opacity: .82;
  transition: opacity .2s, filter .2s;
}
.mitem:hover { transform: translateY(-3px); background: #fff; }
.mitem:hover img { opacity: 1; filter: none; }

/* =============================================================================
   STATUS / STEPS / FAQ / CTA
   ========================================================================== */

.status {
  margin-top: 40px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.status h3 { margin: 12px 0 10px; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.status p { color: var(--bone-3); max-width: 52ch; font-size: .96rem; }

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--dahlia-veil);
  color: var(--dahlia-glow);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.2s var(--ease) infinite; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 44px; }
.step {
  padding: 26px 24px;
  border-radius: var(--r);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--paper-line);
}
.step .n {
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 700;
  color: var(--dahlia);
  letter-spacing: .1em;
}
.step h3 { margin: 12px 0 9px; color: var(--paper-ink); }
.step p { font-size: .93rem; color: var(--paper-ink-2); }

.qas { margin-top: 40px; display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.qa {
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
  transition: box-shadow .18s;
}
.qa.open { box-shadow: inset 0 0 0 1px var(--dahlia-lift); }
.qa > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 19px 22px;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.qa .pm { margin-left: auto; position: relative; width: 15px; height: 15px; flex: none; }
.qa .pm::before, .qa .pm::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2.2px;
  background: var(--dahlia-glow);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform .22s var(--ease), opacity .22s;
}
.qa .pm::after { transform: translateY(-50%) rotate(90deg); }
.qa.open .pm::after { transform: translateY(-50%) rotate(0); opacity: 0; }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans > div { overflow: hidden; }
.qa .ans p { padding: 0 22px 22px; color: var(--bone-3); max-width: 74ch; font-size: .96rem; }

.ctabox {
  padding: clamp(34px, 5vw, 62px);
  border-radius: var(--r-xl);
  background: var(--dahlia);
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.ctabox::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
  pointer-events: none;
}
.ctabox > * { position: relative; z-index: 1; }
.ctabox h2 { color: var(--bone); }
.ctabox .lede { color: rgba(248,242,239,.86); margin: 18px auto 0; text-align: center; }
.ctabox .cta-row { justify-content: center; margin-top: 30px; }

footer { background: var(--ink); padding: 44px 0 90px; border-top: 1px solid var(--line-2); }
.fg { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.fg .sp { flex: 1; }
.fg a, .fg span { font-size: .9rem; color: var(--bone-3); }
.fg a:hover { color: var(--bone); }

/* =============================================================================
   MOBILE TAB BAR — the single strongest "installed app" signal on a phone
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 780px) {
  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0;
    z-index: 95;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(19, 7, 8, .88);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--line-2);
  }
  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    font-size: .66rem;
    font-weight: 700;
    color: var(--bone-4);
    border-radius: 12px;
    transition: color .15s, background .15s;
  }
  .tabbar a.on { color: var(--dahlia-glow); background: rgba(125,32,38,.2); }
  .tabbar a:active { background: var(--panel-2); }

  #hero { padding-top: 116px; }
  .hero-stage { transform: none; }
  .hero-copy { max-width: 100%; }
}

/* =============================================================================
   STATS BAND — count-up numbers, the cheapest way to make a page feel alive
   ========================================================================== */

.stats-band { padding: clamp(40px, 5vw, 62px) 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat { text-align: center; }
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--dahlia-glow);
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 8px; font-size: .92rem; color: var(--bone-3); }

/* =============================================================================
   MODULE CARDS — pointer-tracked spotlight
   ========================================================================== */

.mcard { position: relative; overflow: hidden; }
.mcard::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(166,48,58,.28), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.mcard:hover::before { opacity: 1; }
.mcard > * { position: relative; z-index: 1; }
.mcard .ic { transition: transform .25s var(--ease), background .25s, color .25s; }
.mcard:hover .ic { transform: translateY(-2px) rotate(-6deg) scale(1.06); background: var(--dahlia); color: var(--bone); }

/* =============================================================================
   PLATFORM SWITCHER
   ========================================================================== */

.switcher { margin-top: 40px; }
.switch-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.switch-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: .94rem;
  font-weight: 700;
  color: var(--bone-2);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: all .18s var(--ease);
}
.switch-tabs button:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--line); }
.switch-tabs button.on { background: var(--dahlia); color: var(--bone); box-shadow: none; }
.switch-tabs .st-state {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,.12);
}
.switch-tabs button.on .st-state { background: rgba(255,255,255,.22); }

.switch-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 340px;
}
@media (max-width: 860px) { .switch-stage { grid-template-columns: 1fr; } }

.switch-frame { display: grid; place-items: center; }
.switch-copy h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin-bottom: 12px; }
.switch-copy p { color: var(--bone-3); max-width: 46ch; }
.switch-copy ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.switch-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--bone-2); }
.switch-copy li svg { flex: none; margin-top: 3px; color: var(--dahlia-glow); }

.dev { animation: swap .34s var(--ease); }
.dev-screen {
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
}
.dev-row { height: 9px; border-radius: 4px; background: var(--panel-3); }
.dev-row.w1 { width: 62%; background: var(--dahlia); }
.dev-row.w2 { width: 88%; }
.dev-row.w3 { width: 46%; }
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.dev-grid i { height: 26px; border-radius: 6px; background: var(--panel-3); display: block; }
.dev-grid i:first-child { background: var(--dahlia); }

/* device bodies */
.dev-desktop { width: min(100%, 400px); border-radius: 14px; padding: 10px 10px 20px; background: linear-gradient(165deg,#35191D,#1B0C0E); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -26px rgba(0,0,0,.9); }
.dev-desktop .dev-screen { border-radius: 7px; aspect-ratio: 16/10; }
.dev-phone { width: 178px; border-radius: 26px; padding: 8px; background: linear-gradient(160deg,#3A1C21,#180A0C); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 60px -24px rgba(0,0,0,.9); }
.dev-phone .dev-screen { border-radius: 19px; aspect-ratio: 9/18; }
.dev-tablet { width: min(100%, 300px); border-radius: 18px; padding: 12px; background: linear-gradient(160deg,#3A1C21,#180A0C); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 60px -24px rgba(0,0,0,.9); }
.dev-tablet .dev-screen { border-radius: 10px; aspect-ratio: 3/4; }

/* =============================================================================
   STEPPER
   ========================================================================== */

.stepper { position: relative; margin-top: 44px; }
.rail-line {
  position: absolute;
  inset: auto 0 100% 0;
  height: 3px;
  border-radius: 3px;
  background: var(--paper-line);
  margin-bottom: 20px;
  overflow: hidden;
}
.rail-line i { display: block; height: 100%; width: 33%; background: var(--dahlia); border-radius: 3px; transition: width .5s var(--ease); }

.stepper .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0; }
.stepper .step {
  text-align: left;
  padding: 26px 24px;
  border-radius: var(--r);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--paper-line);
  transition: background .22s, box-shadow .22s, transform .22s var(--ease);
}
.stepper .step:hover { transform: translateY(-2px); }
.stepper .step.on { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--dahlia); }
.stepper .step .n { color: var(--dahlia); opacity: .5; transition: opacity .22s; }
.stepper .step.on .n { opacity: 1; }
.stepper .step .who {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--dahlia);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
}

/* =============================================================================
   SCROLL PROGRESS + MISC
   ========================================================================== */

#progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--dahlia), var(--dahlia-glow));
  z-index: 99;
  transition: width .08s linear;
}

.magnet { transition: transform .18s var(--ease), background .16s, box-shadow .16s, color .16s; }


/* Mess chips settle into place instead of just fading in. */
.scatter .chip { opacity: 0; transform: translateY(14px) scale(.94); }
.scatter.go .chip { opacity: 1; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.scatter.go .chip:nth-child(odd)  { transform: rotate(-1.4deg); }
.scatter.go .chip:nth-child(even) { transform: rotate(1.1deg); }
.scatter.go .chip:nth-child(3n)   { transform: rotate(2.2deg); }

/* Real app inside the platform switcher frames (replaces the wireframe bars). */
.dev-screen.app { padding: 0; gap: 0; }
.dev-desktop .dev-screen.app .mini { font-size: 10px; }
.dev-desktop .dev-screen.app .mini-rail { width: 40px; }
.dev-desktop .dev-screen.app .mini-rail i { width: 25px; height: 25px; border-radius: 8px; }
.dev-desktop .dev-screen.app .mini-rail i svg { width: 13px; height: 13px; }
.dev-phone .dev-screen.app { display: flex; }
/* Switcher frame is ~2x the hero phone, so the shared internals scale with it. */
.dev-phone .dev-screen.app .pscreen {
  --ps: 1.95;
  background: transparent;
  border-radius: 0;
  flex: 1;
  min-height: 0;
}

/* =============================================================================
   AI SECTION
   The name is neuday.ai, so the claim gets its own band and a working
   demonstration rather than a single bullet buried in the module grid.
   ========================================================================== */

.ai-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(22px, 3.4vw, 46px);
  align-items: start;
  margin-top: 44px;
}
@media (max-width: 940px) { .ai-grid { grid-template-columns: 1fr; } }

.ai-demo {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
}
.ai-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.ai-head b { font-size: .95rem; font-weight: 700; }

.ai-spark {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--dahlia-veil);
  color: var(--dahlia-glow);
  flex: none;
}
.ai-spark svg { animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ai-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dahlia-glow);
  white-space: nowrap;
}
.ai-live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2.2s var(--ease) infinite;
}

.ai-in {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 13px 13px 13px 5px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.ai-in .av {
  width: 32px; height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
  flex: none;
}
.ai-in .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ai-in .t b { font-size: .86rem; }
.ai-in .t span { font-size: .88rem; color: var(--bone-2); }

.ai-out {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 13px 13px 5px 13px;
  background: var(--dahlia);
  min-height: 108px;
}
.ai-label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 7px;
}
.ai-out p { font-size: .93rem; line-height: 1.55; color: var(--bone); }
/* Caret only while text is still being written. */
.ai-out p::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.16em;
  background: var(--bone);
  animation: caret 1s steps(1) infinite;
}
.ai-out.done p::after { display: none; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.ai-actions { display: flex; align-items: center; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.ai-actions .btn { cursor: default; }
.ai-guard {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--bone-3);
  margin-left: auto;
}
.ai-guard svg { color: var(--ok); flex: none; }

.ai-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-caps li {
  padding: 14px 16px 14px 42px;
  border-radius: var(--r-sm);
  position: relative;
  transition: background .18s;
}
.ai-caps li:hover { background: var(--panel); }
.ai-caps li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--dahlia-lift);
  transform: rotate(45deg);
}
.ai-caps b { display: block; font-size: .96rem; font-weight: 700; margin-bottom: 3px; }
.ai-caps span { font-size: .89rem; color: var(--bone-3); line-height: 1.5; }

.ai-note {
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: .93rem;
  color: var(--bone-3);
  line-height: 1.6;
  max-width: 96ch;
}
.ai-note b { color: var(--bone); font-weight: 700; }

/* =============================================================================
   AI WOVEN THROUGH EVERY BLOCK
   The product's name is neuday.ai, so the claim cannot live in one section.
   These are the pieces that carry it into the hero, the module grid and the
   answer card.
   ========================================================================== */

/* Hero badge, replacing the plain eyebrow: AI leads the message now. */
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: .82rem;
  font-weight: 700;
  color: var(--bone);
  white-space: nowrap;
}
.ai-pill .sp { color: var(--bone); animation: spin 9s linear infinite; flex: none; }
@media (max-width: 420px) { .ai-pill { white-space: normal; } }

/* Fourth hero card — the AI one, marked so it reads as a different kind of
   signal from the three channel notifications. */
/* Top-right: the phone occupies bottom-right, so anything else there collides. */
.fcard.f4 { top: -3%; right: 1%; animation-delay: -5s; }
.fcard .ic.ai { background: var(--dahlia-lift); color: #fff; }
.fcard.is-ai { box-shadow: inset 0 0 0 1px var(--dahlia-lift), 0 22px 44px -18px rgba(0,0,0,.9); }
@media (max-width: 1020px) { .fcard.f4 { display: none; } }

/* Per-module AI line: what the AI actually does inside that module. */
.mcard .ai-line {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
  font-size: .84rem;
  line-height: 1.5;
}
.mcard .ai-line .sp { color: var(--dahlia-glow); flex: none; margin-top: 2px; }
.mcard .ai-line span { color: var(--bone-2); }
.mcard:hover .ai-line { border-top-color: var(--line); }

.chip-core {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--dahlia);
  color: var(--bone);
  font-family: var(--ui);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* AI aside inside the answer card on the dahlia field. */
.ai-inline {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(248, 242, 239, .92);
}
.ai-inline .sp { flex: none; margin-top: 3px; animation: spin 9s linear infinite; }


.foot-tag {
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--dahlia-veil);
  color: var(--dahlia-glow);
  font-size: .8rem;
  font-weight: 700;
}

/* =============================================================================
   INTEGRATIONS — every connected service named, not summarised
   ========================================================================== */

.int-grid {
  display: grid;
  /* Fixed 3 columns on wide screens: auto-fit gave 5 and stranded the sixth
     card alone on its own row. */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 44px;
}
@media (max-width: 900px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .int-grid { grid-template-columns: 1fr; } }

.int {
  padding: 20px 22px 22px;
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .2s, transform .2s var(--ease);
}
.int:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--dahlia-lift); }

.int-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--line-2);
}
.int-h span {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.int-h b {
  margin-left: auto;
  font-family: var(--data);
  font-size: .82rem;
  font-weight: 700;
  color: var(--dahlia-glow);
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--dahlia-veil);
}

.int ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.int li {
  position: relative;
  padding-left: 17px;
  font-size: .91rem;
  color: var(--bone-2);
}
.int li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--dahlia-lift);
}

.int-note {
  margin-top: 22px;
  font-size: .92rem;
  color: var(--bone-3);
  max-width: 74ch;
}

/* =============================================================================
   AI CAPABILITY TRIO
   ========================================================================== */

.ai-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 40px;
}
.ai-trio > div {
  padding: 22px 22px 24px;
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.ai-trio b {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 9px;
}
.ai-trio span { font-size: .93rem; color: var(--bone-3); line-height: 1.55; }

.ai-grid { margin-top: 22px; }

/* =============================================================================
   HEADLINE WORD REVEAL
   Words rise in sequence instead of the whole block fading — the one motion
   technique worth taking from the reference.
   ========================================================================== */

.w-rev { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w-rev > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(105%);
  opacity: 0;
}
.w-rev.go > i {
  transform: none;
  opacity: 1;
  transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .w-rev > i { transform: none; opacity: 1; }
}

/* =============================================================================
   PRESENTATION PASS
   The page was a wall of bordered cards with 130px between sections. The
   reference earns its calm from space and from one slow narrative moment, so
   both are introduced here.
   ========================================================================== */

/* --- narrative: three oversized sentences, centred and unboxed ------------- */

.story { text-align: center; }
.story .shell { max-width: 940px; }

.story .line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  line-height: 1.32;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: clamp(38px, 5vw, 76px);
}
.story .line:last-child { margin-bottom: 0; }
.story .line.accent { color: var(--dahlia-glow); }

/* Brand marks set inline in the sentence, centred on the text. */

/* A run of marks must never be orphaned onto a line without the word it
   belongs to — text-wrap:balance will happily split "biten stoğu" otherwise. */
.story .kn { white-space: nowrap; }

/* --- hero: a single button, with proof directly beneath it ---------------- */

.btn-plain {
  display: inline-flex;
  align-items: center;
  padding: 14px 4px;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(248, 242, 239, .8);
  transition: color .16s;
}
.btn-plain:hover { color: var(--bone); }

.proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: .9rem;
  color: rgba(248, 242, 239, .78);
}
.proof b { color: var(--bone); font-weight: 800; }
.faces { display: flex; }
.faces i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .6rem;
  font-weight: 800;
  font-style: normal;
  color: var(--dahlia-deep);
  background: var(--bone);
  box-shadow: 0 0 0 2px var(--dahlia);
  margin-right: -9px;
}
.faces i:last-child { margin-right: 0; }
@media (max-width: 1020px) { .proof { justify-content: center; } }