/* ============================================================
   AuraNex — Landing redesign
   Design system: "Ônix & Íris"
   ============================================================ */

:root {
  /* ---- Ink (dark base) ---- */
  --ink-900: #0B0C0E;
  --ink-850: #101216;
  --ink-800: #15171C;
  --ink-700: #1C1F25;
  --ink-600: #262A31;
  --ink-500: #323741;

  /* ---- Paper (light base) ---- */
  --paper:    #FBFBFC;
  --paper-2:  #F1F2F4;
  --card:     #FFFFFF;

  /* ---- Text ---- */
  --t-hi:     #15171A;
  --t-lo:     #565B63;
  --t-mute:   #888E97;
  --t-dk-hi:  #F5F6F8;
  --t-dk-lo:  #A6ABB5;
  --t-dk-mute:#737985;

  /* ---- Accent: Indigo (neutral, professional) ---- */
  --iris:        #3B5BD4;
  --iris-bright: #5E7CF0;
  --iris-deep:   #2C4296;
  --iris-soft:   #E5EAFB;
  --iris-tint:   #F2F5FD;

  /* ---- Steel (neutral secondary) ---- */
  --champagne:   #9AA6B8;
  --champagne-d: #6E7B8E;

  /* ---- Functional ---- */
  --mint:   #36B98A;
  --border-l: #E4E6EA;
  --border-l2:#EDEEF1;
  --border-d: rgba(255,255,255,.085);
  --border-d2:rgba(255,255,255,.14);

  /* ---- Type ---- */
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---- Shape ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(20,16,40,.06), 0 1px 3px rgba(20,16,40,.04);
  --sh-md: 0 4px 14px rgba(28,22,60,.07), 0 2px 6px rgba(28,22,60,.05);
  --sh-lg: 0 24px 60px -18px rgba(36,28,80,.28), 0 8px 24px -12px rgba(36,28,80,.16);
  --sh-iris: 0 18px 50px -16px rgba(59,91,212,.55);

  /* curated accent, overridable by tweaks */
  --accent: var(--iris);
  --accent-bright: var(--iris-bright);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--t-hi);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0; }
::selection { background: var(--accent); color: #fff; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section { padding: 80px 0; position: relative; }
.section--tight { padding: 56px 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center::before { display: none; }

.s-head { max-width: 680px; }
.s-head--center { margin: 0 auto; text-align: center; }
.s-title {
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.035em;
  margin-top: 14px;
  line-height: 1.06;
}
.s-sub {
  margin-top: 14px;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--t-lo);
  letter-spacing: -0.01em;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  border-radius: var(--r-md);
  font-size: 15.5px; font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .2s, box-shadow .25s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 17px; height: 17px; }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--sh-iris);
}
.btn--primary:hover { background: var(--accent-bright); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 22px 55px -14px rgba(59,91,212,.65); transform: translateY(-1px); }

.btn--ghost-d {
  background: rgba(255,255,255,.05);
  color: var(--t-dk-hi);
  border-color: var(--border-d2);
  backdrop-filter: blur(8px);
}
.btn--ghost-d:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }

.btn--ghost-l {
  background: var(--card);
  color: var(--t-hi);
  border-color: var(--border-l);
  box-shadow: var(--sh-sm);
}
.btn--ghost-l:hover { border-color: #d8d3e6; transform: translateY(-1px); box-shadow: var(--sh-md); }

.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 13px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 15.5px; color: var(--accent);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ============================================================
   Navbar
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px;
  display: flex; align-items: center;
  transition: background .3s, border-color .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250,251,252,.82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(59,91,212,.12);
}
.nav__inner { display: flex; align-items: center; gap: 38px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: #15171A; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--iris-bright), var(--iris-deep));
  box-shadow: 0 4px 14px -4px rgba(59,91,212,.5), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.brand__mark svg { width: 17px; height: 17px; }
.nav__links { display: flex; gap: 4px; margin-left: 6px; }
.nav__links a {
  color: #5B6270; font-size: 15px; font-weight: 450;
  padding: 8px 13px; border-radius: 9px; transition: color .2s, background .2s;
}
.nav__links a:hover { color: #15171A; background: rgba(59,91,212,.07); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__signin { color: #5B6270; font-size: 15px; font-weight: 450; padding: 8px 12px; transition: color .2s; }
.nav__signin:hover { color: #15171A; }
.nav__menu { display: none; }

/* ============================================================
   Hero (LIGHT cool slate)
   ============================================================ */
.hero {
  position: relative;
  background: #F3F5F9;
  color: #15171A;
  overflow: hidden;
  padding-top: 68px;
}
.hero__aurora {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 90% at 100% -40%, rgba(70,100,190,.05), transparent 60%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(59,91,212,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,91,212,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
  opacity: .55;
}
.hero__inner { position: relative; z-index: 2; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 7px;
  border-radius: 999px;
  background: rgba(59,91,212,.08);
  border: 1px solid rgba(59,91,212,.2);
  font-size: 13px; color: #5B6270;
  white-space: nowrap;
}
.hero__badge b { color: #15171A; font-weight: 500; }
.hero__badge .pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 3px 8px; border-radius: 999px; font-weight: 500;
}
.hero__h1 {
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.045em;
  margin-top: 26px;
  font-weight: 600;
  color: #15171A;
}
.hero__h1 .grad {
  background: linear-gradient(94deg, #2C4296 10%, #5E7CF0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__p {
  margin-top: 24px;
  font-size: 19.5px; line-height: 1.55;
  color: #5B6270;
  max-width: 540px;
  letter-spacing: -0.011em;
}
.hero__actions { margin-top: 34px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.hero__trust { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: #6B5A9A; font-size: 13.5px; }
.hero__trust .ti { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--mint); }

/* ----- Hero layout: SPLIT (variation A) ----- */
.hero[data-layout="split"] .hero__inner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.04fr);
  gap: 40px; align-items: center;
  padding: 88px 0 110px;
}
.hero[data-layout="split"] .hero__copy { text-align: left; }
.hero[data-layout="split"] .hero__h1 { max-width: 12ch; }
.hero[data-layout="split"] .hero__stage--center { display: none; }

/* ----- Hero layout: CENTERED (variation B) ----- */
.hero[data-layout="centered"] .hero__inner {
  padding: 96px 0 0;
  text-align: center;
}
.hero[data-layout="centered"] .hero__copy { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero[data-layout="centered"] .hero__h1 { max-width: 16ch; }
.hero[data-layout="centered"] .hero__p { max-width: 600px; }
.hero[data-layout="centered"] .hero__stage--split { display: none; }
.hero[data-layout="centered"] .hero__stage--center { display: block; margin-top: 58px; padding-bottom: 0; }

.hero__fade { display: none; }

/* ============================================================
   Product mockup (dark dashboard recreation)
   ============================================================ */
.app {
  background: var(--ink-800);
  border: 1px solid var(--border-d2);
  border-radius: 16px;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), 0 30px 60px -30px rgba(59,91,212,.45);
  overflow: hidden;
}
.hero__stage--center .app { max-width: 1040px; margin: 0 auto; }
.hero__stage--split .app { transform: perspective(2200px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; }

/* ============================================================
   Hero floating product cards (.hv)
   ============================================================ */
.hv {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  padding: 26px 30px 40px 10px;
}
.hv__main {
  background: #fff;
  border: 1px solid var(--border-l);
  border-radius: 18px;
  box-shadow: 0 30px 70px -28px rgba(45,28,100,.34), 0 2px 8px -2px rgba(45,28,100,.10);
  padding: 18px 18px 20px;
  position: relative;
  z-index: 2;
}
.hv__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.hv__title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--t-hi); }
.hv__date { font-family: var(--mono); font-size: 11.5px; color: var(--t-mute); margin-top: 3px; }
.hv__occ {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--iris-deep);
  background: var(--iris-tint); border: 1px solid var(--iris-soft);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.hv__occ-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.hv__list { display: flex; flex-direction: column; gap: 7px; }
.hv__appt {
  display: grid; grid-template-columns: 42px 30px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 11px;
  background: var(--paper-2); border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.hv__appt--now { background: var(--iris-tint); border-color: var(--iris-soft); }
.hv__tm { font-family: var(--mono); font-size: 11.5px; color: var(--iris-deep); font-weight: 500; }
.hv__av {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff; letter-spacing: -.02em;
}
.hv__who b { display: block; font-size: 13px; font-weight: 600; color: var(--t-hi); letter-spacing: -.01em; }
.hv__who small { display: block; font-size: 11px; color: var(--t-mute); margin-top: 1px; }
.hv__tag {
  font-size: 10px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: #fff; border: 1px solid var(--border-l); color: var(--t-mute);
}
.hv__tag--ok { background: rgba(54,185,138,.1); border-color: rgba(54,185,138,.24); color: #1f8f68; }
.hv__tag--now { background: var(--accent); border-color: var(--accent); color: #fff; }

/* floating sub-cards */
.hv__float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border-l);
  border-radius: 14px;
  box-shadow: 0 22px 50px -20px rgba(45,28,100,.40);
  z-index: 3;
}
.hv__float--notif {
  top: 6px; right: -6px;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px 11px 11px;
  animation: hvFloatA 5.5s ease-in-out infinite;
}
.hv__notif-ic {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: rgba(54,185,138,.12); color: #1f8f68;
  display: grid; place-items: center;
}
.hv__notif-ic svg { width: 16px; height: 16px; }
.hv__notif-t { font-size: 12.5px; font-weight: 600; color: var(--t-hi); }
.hv__notif-s { font-size: 11px; color: var(--t-mute); margin-top: 1px; }

.hv__float--rev {
  bottom: -4px; left: -14px;
  padding: 13px 16px 14px;
  animation: hvFloatB 6.5s ease-in-out infinite;
}
.hv__rev-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-mute); }
.hv__rev-v { font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: var(--t-hi); margin-top: 5px; }
.hv__rev-spark { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 9px; }
.hv__rev-spark i { width: 5px; border-radius: 2px 2px 0 0; background: linear-gradient(var(--iris-bright), var(--iris)); opacity: .85; }

@keyframes hvFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hvFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  .hv__float--notif, .hv__float--rev { animation: none; }
}

.app__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--border-d); background: var(--ink-850); }
.app__dot { width: 11px; height: 11px; border-radius: 50%; }
.app__dot.r{background:#FF5F57}.app__dot.y{background:#FEBC2E}.app__dot.g{background:#28C840}
.app__url { margin-left: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--t-dk-mute); }
.app__body { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; }
.app__side { border-right: 1px solid var(--border-d); padding: 14px 10px; background: rgba(255,255,255,.012); }
.app__brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-size: 14px; font-weight: 600; color: var(--t-dk-hi); }
.app__brand i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(140deg, var(--iris-bright), var(--iris-deep)); display: block; }
.app__nav { display: flex; flex-direction: column; gap: 2px; }
.app__nav a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; color: var(--t-dk-mute); }
.app__nav a .gl { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .8; }
.app__nav a.on { background: rgba(59,91,212,.16); color: #fff; }
.app__nav a.on .gl { background: var(--accent); border-color: var(--accent); }
.app__main { padding: 16px 18px; }
.app__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.app__title { font-size: 15px; font-weight: 600; color: var(--t-dk-hi); }
.app__title span { display: block; font-size: 11px; font-weight: 400; color: var(--t-dk-mute); margin-top: 2px; }
.app__cta { font-size: 11.5px; color: #fff; background: var(--accent); padding: 6px 11px; border-radius: 7px; font-weight: 500; }
.app__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.app__stat { border: 1px solid var(--border-d); border-radius: 10px; padding: 11px 12px; background: rgba(255,255,255,.018); }
.app__stat .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-dk-mute); }
.app__stat .val { font-size: 22px; font-weight: 600; color: var(--t-dk-hi); margin-top: 7px; letter-spacing: -.03em; }
.app__stat .val.ac { color: var(--iris-bright); }
.app__stat .sub { font-size: 10.5px; color: var(--t-dk-mute); margin-top: 2px; }
.app__panel { border: 1px solid var(--border-d); border-radius: 10px; background: rgba(255,255,255,.018); padding: 12px; }
.app__panel .ph { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--t-dk-mute); margin-bottom: 11px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.app__sched { display: flex; flex-direction: column; gap: 7px; }
.app__appt { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid var(--border-d); }
.app__appt .tm { font-family: var(--mono); font-size: 11px; color: var(--iris-bright); }
.app__appt .nm { font-size: 12px; color: var(--t-dk-hi); font-weight: 500; }
.app__appt .nm small { display: block; color: var(--t-dk-mute); font-weight: 400; font-size: 10.5px; }
.app__appt .av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--champagne), var(--champagne-d)); }
.app__appt:nth-child(2) .av { background: linear-gradient(135deg, #6E89E8, #3B5BD4); }
.app__appt:nth-child(3) .av { background: linear-gradient(135deg, #6fb3e0, #4a78c9); }

/* ============================================================
   Trust strip / stats
   ============================================================ */
.trust {
  background: var(--ink-900);
  border-top: 1px solid var(--border-d);
  padding: 0 0 64px;
}
.trust__label { text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-dk-mute); margin-bottom: 34px; }
.trust__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.trust__stat { text-align: center; padding: 22px 12px; border-left: 1px solid var(--border-d); }
.trust__stat:first-child { border-left: 0; }
.trust__num { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.04em; color: var(--t-dk-hi); }
.trust__num .u { color: var(--iris-bright); }
.trust__cap { font-size: 13.5px; color: var(--t-dk-mute); margin-top: 6px; }

/* ============================================================
   Features bento
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }
.card {
  background: var(--card);
  border: 1px solid var(--border-l);
  border-radius: var(--r-lg);
  padding: 26px;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: #ddd6ec; }
.card__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--iris-tint); color: var(--accent); border: 1px solid var(--iris-soft); margin-bottom: 18px; }
.card__ic svg { width: 21px; height: 21px; }
.card__t { font-size: 18.5px; font-weight: 600; letter-spacing: -.02em; }
.card__d { margin-top: 9px; font-size: 15px; color: var(--t-lo); line-height: 1.55; }
.b-3 { grid-column: span 3; }
.b-2 { grid-column: span 2; }
.b-6 { grid-column: span 6; }

/* feature card with mini visual */
.card--feat { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--feat .card__pad { padding: 26px 26px 0; }
.card--feat .mini { margin-top: 20px; flex: 1; min-height: 150px; position: relative; }

/* mini agenda visual */
.mini-agenda { padding: 0 22px; display: flex; flex-direction: column; gap: 7px; }
.mini-agenda .mrow { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; }
.mini-agenda .mt { font-family: var(--mono); font-size: 10px; color: var(--t-mute); }
.mini-agenda .mb { height: 24px; border-radius: 6px; background: var(--iris-tint); border: 1px solid var(--iris-soft); display: flex; align-items: center; padding: 0 9px; font-size: 10.5px; color: var(--iris-deep); font-weight: 500; }
.mini-agenda .mb.w { background: #F2F4F7; border-color: #E2E6EC; color: var(--champagne-d); }
.mini-agenda .mb.b { background: #EEF4FB; border-color: #DDEAF6; color: #4a78c9; }

/* mini revenue visual */
.mini-rev { padding: 6px 22px 0; height: 100%; display: flex; align-items: flex-end; gap: 7px; }
.mini-rev .bar { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(var(--iris-bright), var(--iris)); opacity: .85; }

.card--dark { background: var(--ink-800); border-color: var(--border-d); color: var(--t-dk-hi); }
.card--dark .card__d { color: var(--t-dk-lo); }
.card--dark:hover { border-color: var(--border-d2); }
.card--dark .card__ic { background: rgba(59,91,212,.16); border-color: rgba(59,91,212,.3); color: var(--iris-bright); }

/* ============================================================
   Spotlight (differentials: TV + App)
   ============================================================ */
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 56px; }
.spot__card {
  border-radius: var(--r-xl);
  padding: 40px;
  position: relative; overflow: hidden;
  border: 1px solid var(--border-d);
  min-height: 440px;
  display: flex; flex-direction: column;
}
.spot__card--tv { background: radial-gradient(120% 90% at 80% 0%, #1d1830, var(--ink-900)); color: var(--t-dk-hi); }
.spot__card--app { background: radial-gradient(120% 90% at 20% 0%, #161a2c, var(--ink-900)); color: var(--t-dk-hi); }
.spot__tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--iris-bright); display: inline-flex; align-items: center; gap: 8px; }
.spot__tag .plan { color: var(--iris-bright); border: 1px solid rgba(59,91,212,.32); padding: 2px 8px; border-radius: 999px; font-size: 10px; }
.spot__t { font-size: 28px; letter-spacing: -.03em; margin-top: 16px; font-weight: 600; }
.spot__d { margin-top: 12px; font-size: 16px; color: var(--t-dk-lo); line-height: 1.55; max-width: 38ch; }
.spot__visual { margin-top: auto; padding-top: 30px; }

/* TV signage visual */
.tv {
  border: 1px solid var(--border-d2); border-radius: 12px; overflow: hidden;
  background: var(--ink-850); box-shadow: var(--sh-lg);
}
.tv__top { background: linear-gradient(120deg, var(--iris-deep), #2a2440); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; }
.tv__top .now { font-size: 11px; color: rgba(255,255,255,.7); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tv__top .clk { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.tv__rows { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.tv__r { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.tv__r .pro { display: flex; align-items: center; gap: 9px; color: var(--t-dk-hi); font-weight: 500; }
.tv__r .pro i { width: 26px; height: 26px; border-radius: 50%; display: block; }
.tv__r .st { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.tv__r .st.free { background: rgba(54,185,138,.16); color: #5fd6a8; }
.tv__r .st.busy { background: rgba(154,166,184,.18); color: var(--champagne); }
.tv__r .sv { color: var(--t-dk-mute); font-size: 12px; }

/* App phone visual */
.phone { width: 230px; margin: 0 auto; border: 8px solid #06050a; border-radius: 34px; overflow: hidden; background: var(--ink-850); box-shadow: var(--sh-lg), 0 0 0 1px var(--border-d2); }
.phone__notch { height: 24px; display: flex; justify-content: center; }
.phone__notch::after { content:""; width: 80px; height: 16px; background: #06050a; border-radius: 0 0 12px 12px; }
.phone__scr { padding: 4px 14px 20px; }
.phone__hi { font-size: 11px; color: var(--t-dk-mute); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.phone__nm { font-size: 17px; font-weight: 600; margin: 2px 0 14px; }
.phone__appt { background: rgba(255,255,255,.04); border: 1px solid var(--border-d); border-radius: 12px; padding: 11px 12px; margin-bottom: 9px; }
.phone__appt .tt { display: flex; justify-content: space-between; align-items: center; }
.phone__appt .tm { font-family: var(--mono); font-size: 11px; color: var(--iris-bright); }
.phone__appt .dur { font-size: 10px; color: var(--t-dk-mute); }
.phone__appt .cl { font-size: 13.5px; font-weight: 500; margin-top: 5px; }
.phone__appt .sv { font-size: 11.5px; color: var(--t-dk-lo); margin-top: 1px; }
.phone__earn { background: linear-gradient(135deg, var(--iris-deep), var(--iris)); border-radius: 12px; padding: 13px; margin-top: 4px; }
.phone__earn .l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); font-family: var(--mono); }
.phone__earn .v { font-size: 21px; font-weight: 600; letter-spacing: -.03em; margin-top: 4px; }

/* ============================================================
   Segments
   ============================================================ */
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.seg {
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  border: 1px solid var(--border-l); background: var(--card);
  box-shadow: var(--sh-md);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.seg:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.seg__img { height: 230px; position: relative; }
.seg__img::after { content:""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(11,10,16,.78)); pointer-events: none; z-index: 2; }
.seg__tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; background: rgba(11,10,16,.55); backdrop-filter: blur(6px); border: 1px solid var(--border-d2); color: #fff; padding: 5px 11px; border-radius: 999px; }
.seg__cap { position: absolute; left: 18px; bottom: 16px; z-index: 3; color: #fff; }
.seg__cap h3 { font-size: 22px; letter-spacing: -.03em; }
.seg__body { padding: 20px 22px 24px; }
.seg__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.seg__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--t-lo); }
.seg__list svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   Pricing
   ============================================================ */
.pricing { background: var(--paper-2); border-top: 1px solid var(--border-l2); }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--border-l); border-radius: 999px; box-shadow: var(--sh-sm); margin: 28px auto 0; }
.toggle button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--t-lo); transition: color .2s; position: relative; }
.toggle button.on { color: #fff; }
.toggle__pin { position: absolute; inset: 4px auto 4px 4px; background: var(--accent); border-radius: 999px; box-shadow: var(--sh-iris); transition: transform .28s cubic-bezier(.3,.8,.3,1), width .28s; z-index: 0; }
.toggle button span { position: relative; z-index: 1; }
.toggle__save { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); background: rgba(54,185,138,.1); border: 1px solid rgba(54,185,138,.25); padding: 3px 9px; border-radius: 999px; margin-left: 4px; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; align-items: stretch; }
.plan {
  background: var(--card); border: 1px solid var(--border-l); border-radius: var(--r-lg);
  padding: 28px 24px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.plan--pop {
  background: var(--ink-850); border-color: var(--ink-600); color: var(--t-dk-hi);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(59,91,212,.4);
  transform: scale(1.035);
}
.plan--pop:hover { transform: scale(1.035) translateY(-3px); }
.plan__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.plan__name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.plan__sub { font-size: 12.5px; color: var(--t-mute); margin-top: 6px; letter-spacing: -.01em; }
.plan--pop .plan__sub { color: var(--t-dk-lo); }
.plan__pop { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 999px; }
.plan__price { margin-top: 18px; display: flex; align-items: baseline; gap: 3px; }
.plan__cur { font-size: 18px; font-weight: 500; color: var(--t-lo); }
.plan--pop .plan__cur { color: var(--t-dk-lo); }
.plan__val { font-size: 40px; font-weight: 600; letter-spacing: -.045em; }
.plan__per { font-size: 14px; color: var(--t-mute); align-self: flex-end; margin-bottom: 7px; }
.plan--pop .plan__per { color: var(--t-dk-mute); }
.plan__custom { font-size: 30px; font-weight: 600; letter-spacing: -.03em; margin-top: 18px; }
.plan__tagline { font-size: 13.5px; color: var(--t-lo); margin-top: 8px; min-height: 38px; }
.plan--pop .plan__tagline { color: var(--t-dk-lo); }
.plan__btn { margin-top: 20px; }
.plan__feats { list-style: none; padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid var(--border-l); display: flex; flex-direction: column; gap: 12px; }
.plan--pop .plan__feats { border-top-color: var(--border-d); }
.plan__feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--t-lo); line-height: 1.4; }
.plan--pop .plan__feats li { color: var(--t-dk-lo); }
.plan__feats svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.plan--pop .plan__feats svg { color: var(--iris-bright); }
.plan__feats li b { color: var(--t-hi); font-weight: 600; }
.plan--pop .plan__feats li b { color: #fff; }
/* disabled differentiator rows */
.plan__feats li.off { color: var(--t-mute); opacity: .72; }
.plan__feats li.off svg { color: var(--t-mute); }
.plan--pop .plan__feats li.off { color: var(--t-dk-mute); }
/* highlighted differentiator rows (accent tick) */
.plan__feats li.hl svg { color: var(--accent); }
.plan--pop .plan__feats li.hl svg { color: var(--iris-bright); }
.plan__annual {
  font-size: 12.5px; color: var(--t-mute); margin-top: 4px;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .25s, max-height .25s;
}
.plan--pop .plan__annual { color: var(--t-dk-mute); }
.bill-year .plan__annual { opacity: 1; max-height: 28px; }
.price-note { text-align: center; margin-top: 28px; font-size: 13.5px; color: var(--t-mute); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 780px; margin: 56px auto 0; }
.faq__item { border-bottom: 1px solid var(--border-l); }
.faq__q { width: 100%; background: none; border: 0; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--t-hi); }
.faq__q:hover { color: var(--accent); }
.faq__ic { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq__ic::before, .faq__ic::after { content:""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .28s cubic-bezier(.3,.8,.3,1); }
.faq__ic::before { top: 10px; left: 3px; right: 3px; height: 2px; }
.faq__ic::after { left: 10px; top: 3px; bottom: 3px; width: 2px; }
.faq__item.open .faq__ic::after { transform: scaleY(0); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .35s cubic-bezier(.3,.8,.3,1); }
.faq__a p { padding: 0 40px 26px 0; font-size: 16px; color: var(--t-lo); line-height: 1.6; }

/* ============================================================
   CTA band + Footer
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--ink-900); color: var(--t-dk-hi); padding: 96px 0 88px; text-align: center; border-top: 1px solid var(--border-d); }
.cta-band__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(44% 72% at 50% 2%, rgba(59,91,212,.26), transparent 68%); }
.cta-band > .wrap { position: relative; z-index: 1; }
.cta__t { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.04em; font-weight: 600; max-width: 20ch; margin: 16px auto 0; line-height: 1.05; text-wrap: balance; }
.cta__p { margin-top: 15px; font-size: 17.5px; color: var(--t-dk-lo); max-width: 46ch; margin-left: auto; margin-right: auto; }
.cta__actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta__fine { margin-top: 20px; font-size: 13px; color: var(--t-dk-mute); letter-spacing: .01em; }

.footer { background: var(--ink-900); color: var(--t-dk-lo); padding: 52px 0 30px; border-top: 1px solid var(--border-d); }
.footer__grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 32px; padding-bottom: 30px; border-bottom: 1px solid var(--border-d); align-items: start; }
.footer__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; color: var(--t-dk-hi); }
.footer__brand .brand__mark { width: 26px; height: 26px; }
.footer__about { margin-top: 11px; font-size: 13.5px; color: var(--t-dk-mute); max-width: 34ch; line-height: 1.5; }
.footer__col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-dk-mute); font-weight: 500; margin-bottom: 11px; }
.footer__col a { display: block; font-size: 14px; color: var(--t-dk-lo); padding: 4px 0; transition: color .2s; }
.footer__col a:hover { color: var(--t-dk-hi); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; font-size: 13px; color: var(--t-dk-mute); flex-wrap: wrap; gap: 10px; }

/* ============================================================
   iPhone / phone mockup (hero overlay)
   ============================================================ */
.hero__devices { position: relative; width: 100%; }
.iphone {
  position: absolute;
  right: -22px; bottom: 28px;
  width: clamp(80px, 12%, 120px);
  background: #1c1c1e;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
  z-index: 10;
}
.iphone__top {
  height: 18px;
  background: #050508;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 2px;
}
.iphone__pill {
  width: 36px; height: 8px;
  background: #1c1c1e;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.iphone__screen { background: #fff; line-height: 1.2; }
.iphone__home {
  height: 16px;
  background: #050508;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iphone__home::after {
  content: '';
  width: 28px; height: 3px;
  background: rgba(255,255,255,.38);
  border-radius: 999px;
}
/* phone screen content (booking) */
.iscr {
  padding: 6px 6px 7px;
  font-family: var(--sans);
  font-size: 6.5px;
  background: var(--paper);
}
.iscr__header {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 3px 5px;
  border-bottom: 1px solid var(--border-l);
  margin-bottom: 5px;
}
.iscr__logo-dot {
  width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(135deg, var(--iris-bright), var(--iris-deep));
  flex-shrink: 0;
}
.iscr__biz { font-size: 7px; font-weight: 600; color: var(--t-hi); }
.iscr__sub { font-size: 5.5px; color: var(--t-mute); }
.iscr__label { font-size: 5.5px; font-weight: 600; color: var(--t-mute); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.iscr__svc {
  background: var(--iris-tint);
  border: 1px solid var(--iris-soft);
  border-radius: 4px;
  padding: 4px 5px;
  margin-bottom: 5px;
  font-size: 6.5px; font-weight: 500; color: var(--iris-deep);
}
.iscr__slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-bottom: 6px; }
.iscr__slot {
  padding: 4px 0;
  text-align: center;
  border: 1px solid var(--border-l);
  border-radius: 3px;
  font-size: 6px; font-family: var(--mono); color: var(--t-lo);
}
.iscr__slot.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.iscr__slot.off { opacity: .4; }
.iscr__cta {
  background: var(--accent);
  color: #fff; text-align: center;
  padding: 5px; border-radius: 4px;
  font-size: 6.5px; font-weight: 500;
}

/* ============================================================
   Features grid (simplified)
   ============================================================ */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.feat {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 20px; border: 1px solid var(--border-l);
  border-radius: var(--r-md); background: var(--card);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.feat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: #ddd6ec; }
.feat__ic {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--iris-tint); border: 1px solid var(--iris-soft);
  color: var(--accent); display: grid; place-items: center;
}
.feat__ic svg { width: 18px; height: 18px; }
.feat__t { font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; }
.feat__d { font-size: 13.5px; color: var(--t-lo); line-height: 1.5; }

/* ============================================================
   Steps (Como funciona)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; }
.step { padding: 0 32px 0 0; }
.step__num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--iris-tint); border: 1px solid var(--iris-soft);
  color: var(--accent); font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.step__t { font-size: 19px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 9px; }
.step__d { font-size: 15px; color: var(--t-lo); line-height: 1.55; }

/* ============================================================
   Booking / autonomia do cliente (dark section + light widget)
   ============================================================ */
.book { background: var(--ink-900); color: var(--t-dk-hi); position: relative; overflow: hidden; }
.book__aurora { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 86% 26%, rgba(59,91,212,.24), transparent 70%),
              radial-gradient(40% 50% at 6% 90%, rgba(70,100,190,.12), transparent 70%); }
.book__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.book .s-title { color: var(--t-dk-hi); }
.book .s-sub { color: var(--t-dk-lo); }
.book__list { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 15px; }
.book__list li { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; color: var(--t-dk-lo); letter-spacing: -.01em; }
.book__list li b { color: var(--t-dk-hi); font-weight: 600; }
.book__list svg { width: 21px; height: 21px; color: var(--iris-bright); flex-shrink: 0; margin-top: 2px; }

.widget { background: var(--card); border-radius: var(--r-xl); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; color: var(--t-hi); width: 100%; max-width: 430px; margin: 0 auto; }
.widget__head { padding: 20px 22px; border-bottom: 1px solid var(--border-l); display: flex; align-items: center; gap: 13px; }
.widget__logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(140deg, var(--iris-bright), var(--iris-deep)); flex-shrink: 0; box-shadow: 0 4px 12px -3px rgba(59,91,212,.6); }
.widget__biz { font-weight: 600; font-size: 15.5px; letter-spacing: -.02em; }
.widget__biz span { display: block; font-size: 12.5px; color: var(--t-mute); font-weight: 400; margin-top: 1px; }
.widget__step { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--iris-tint); border: 1px solid var(--iris-soft); padding: 4px 9px; border-radius: 999px; }
.widget__body { padding: 18px 22px 22px; }
.widget__label { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--t-mute); margin: 0 0 11px; }
.widget__svc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.widget__opt { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--border-l); border-radius: 11px; font-size: 14.5px; font-weight: 500; }
.widget__opt .price { color: var(--t-lo); font-size: 13px; font-weight: 400; }
.widget__opt.sel { border-color: var(--accent); background: var(--iris-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.widget__opt.sel .price { color: var(--iris-deep); }
.widget__opt .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-l); margin-right: 11px; flex-shrink: 0; position: relative; }
.widget__opt.sel .dot { border-color: var(--accent); }
.widget__opt.sel .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.widget__opt .lt { display: flex; align-items: center; }
.widget__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.widget__slot { padding: 10px 0; text-align: center; border: 1px solid var(--border-l); border-radius: 9px; font-size: 13px; font-family: var(--mono); color: var(--t-lo); }
.widget__slot.sel { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--sh-iris); }
.widget__slot.off { opacity: .4; text-decoration: line-through; }
.widget__confirm { width: 100%; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; border: 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; }
.widget__confirm svg { width: 17px; height: 17px; }

/* ============================================================
   Segmentos — grid universal (ícones)
   ============================================================ */
.segx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.segx__card { background: var(--card); border: 1px solid var(--border-l); border-radius: var(--r-lg); padding: 26px; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
.segx__card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: #ddd6ec; }
.segx__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--iris-tint); color: var(--accent); border: 1px solid var(--iris-soft); margin-bottom: 17px; }
.segx__ic svg { width: 23px; height: 23px; }
.segx__t { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.segx__d { margin-top: 7px; font-size: 14.5px; color: var(--t-lo); line-height: 1.5; }
.segx__more { text-align: center; margin-top: 34px; font-size: 15px; color: var(--t-mute); }
.segx__more b { color: var(--t-hi); font-weight: 600; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal { transform: translateZ(0); }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .hero[data-layout="split"] .hero__inner { grid-template-columns: 1fr; padding: 64px 0 90px; }
  .hero[data-layout="split"] .hero__stage--split .app { transform: none; }
  .hero[data-layout="split"] .hero__h1, .hero[data-layout="split"] .hero__copy { max-width: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-3, .b-2, .b-6 { grid-column: span 2; }
  .spot, .segs, .plans, .trust__stats { grid-template-columns: 1fr 1fr; }
  .feats { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .segx { grid-template-columns: repeat(2, 1fr); }
  .book__grid { grid-template-columns: 1fr; gap: 40px; }
  .widget { margin: 0; }
  .plan--pop { transform: none; }
  .plan--pop:hover { transform: translateY(-3px); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 80px 0; }
  .nav__links, .nav__signin { display: none; }
  .nav__menu { display: inline-flex; }
  .bento, .spot, .segs, .plans, .trust__stats { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .segx { grid-template-columns: 1fr; }
  .app__body { grid-template-columns: 1fr; }
  .app__side { display: none; }
  .cta { padding: 52px 26px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero__actions .btn { flex: 1; }
}