/* =================================================================
   Dorbel — Marketing site styles
   Inherits the app's design system: ink navy + mint on warm white,
   Coliner display / Nunito body, rounded soft-shadow aesthetic.
   ================================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-Light.ttf")     format("truetype"); font-weight:300; font-display:swap; }
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-Regular.ttf")   format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-Medium.ttf")    format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-SemiBold.ttf")  format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-Bold.ttf")      format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Coliner"; src:url("../fonts/Coliner-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Nunito"; src:url("../fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations"); font-weight:200 1000; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito"; src:url("../fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight:200 1000; font-style:italic; font-display:swap; }

:root{
  --ink:#050546; --ink-80:rgba(5,5,70,.8); --ink-50:rgba(5,5,70,.5);
  --ink-10:rgba(5,5,70,.1); --ink-05:rgba(5,5,70,.05);
  --mint:#7BD3C0; --mint-soft:#E4F5F0; --mint-deep:#3FA992;
  --white:#FFFEFE;
  --grey-100:#F7F5FA; --grey-150:#F2F2F6; --grey-200:#EFEDF3; --grey-300:#E3DEEA;
  --grey-400:#B7B3BE; --grey-500:#9292A0; --grey-600:#514B5D; --grey-700:#261E35;
  --alert:#F95A44; --alert-text:#E23A22; --warn:#FCB93E;

  --font-display:"Coliner","Nunito",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;

  --r-md:16px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:9999px;
  --sh-sm:0 2px 8px rgba(5,5,70,.06);
  --sh-md:0 8px 24px rgba(5,5,70,.08);
  --sh-lg:0 16px 40px rgba(5,5,70,.12);
  --sh-xl:0 30px 80px rgba(5,5,70,.18);
  --ring-mint:0 0 0 4px rgba(123,211,192,.35);

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1180px; --pad:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}

/* ---------- Type ---------- */
.display{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1.02; color:var(--ink);}
h1.hero-title{font-size:clamp(40px,6.6vw,82px); margin:0; overflow-wrap:break-word; text-wrap:balance;}
h2.section-title{font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.06; font-size:clamp(30px,4.4vw,52px); margin:0; color:var(--ink);}
h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; margin:0;}
p{margin:0;}
.lede{font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:var(--ink-80); font-weight:500;}
.eyebrow{
  font-family:var(--font-body); font-weight:800; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mint-deep);
}
.eyebrow.on-ink{color:var(--mint);}
.muted{color:var(--grey-600);}

/* mint underline accent on emphasised words */
em.mark{font-style:normal; position:relative; white-space:nowrap;}
em.mark::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.34em;
  background:var(--mint); z-index:-1; border-radius:3px; opacity:.85;
}
.ink-bg em.mark{color:var(--white);}
/* hero headline mark is long & multi-word: allow wrapping, draw the mint
   highlight as a per-line background instead of a single nowrap underline */
.hero-title em.mark{white-space:normal; background:linear-gradient(rgba(123,211,192,.85),rgba(123,211,192,.85)) no-repeat; background-size:100% .30em; background-position:0 86%; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.hero-title em.mark::after{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-body); font-weight:800; font-size:16px; letter-spacing:.01em;
  padding:15px 26px; border-radius:var(--r-full); border:2px solid transparent;
  transition:transform var(--ease) 120ms, box-shadow var(--ease) 200ms, background var(--ease) 200ms;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn-primary:hover{box-shadow:var(--sh-lg); transform:translateY(-2px);}
.btn-primary .disc{background:var(--mint);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink-10);}
.btn-ghost:hover{border-color:var(--ink); background:var(--ink-05);}
.btn-on-ink{background:var(--white); color:var(--ink); border-color:var(--white);}
.btn-on-ink:hover{box-shadow:0 16px 40px rgba(0,0,0,.35); transform:translateY(-2px);}
.btn-mint{background:var(--mint); color:var(--ink); border-color:var(--mint);}
.btn-mint:hover{box-shadow:var(--ring-mint); transform:translateY(-2px);}
.btn .disc{
  width:24px; height:24px; border-radius:var(--r-full); display:grid; place-items:center; flex:0 0 auto;
}
.btn .disc svg{width:14px; height:14px;}

/* price chip */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 9px;
  background:var(--mint-soft); color:var(--ink); border-radius:var(--r-full);
  font-weight:800; font-size:14px;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--mint-deep);}
.chip-ink{background:rgba(255,255,255,.1); color:var(--white);}
.chip-ink .dot{background:var(--mint);}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(255,254,254,.82);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.nav.scrolled{border-color:var(--grey-200); box-shadow:var(--sh-sm);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px;}
.nav-logo{display:flex; align-items:center; gap:10px;}
.nav-logo img{height:30px; width:auto;}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-links a{
  padding:9px 14px; border-radius:var(--r-full); font-weight:700; font-size:15px; color:var(--ink-80);
  transition:background .18s,color .18s;
}
.nav-links a:hover{background:var(--ink-05); color:var(--ink);}
.nav-links a.current{background:var(--ink-05); color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-burger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.nav-burger svg{width:26px;height:26px;}

/* ---------- Sections ---------- */
section{position:relative;}
.sec{padding:clamp(72px,9vw,128px) 0;}
.sec-tight{padding:clamp(56px,7vw,96px) 0;}
.soft{background:var(--grey-100);}
.ink-bg{background:var(--ink); color:var(--white);}
.ink-bg h2.section-title,.ink-bg h3,.ink-bg .display{color:var(--white);}
.ink-bg .lede{color:rgba(255,255,255,.74);}
.ink-bg .muted{color:rgba(255,255,255,.6);}
.sec-head{max-width:760px;}
.sec-head .eyebrow{display:block; margin-bottom:18px;}
.sec-head .lede{margin-top:18px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,6vw,84px) 0 clamp(64px,7vw,104px); position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-grid > *{min-width:0;}
.hero-eyebrow-row{display:flex; align-items:center; gap:12px; margin-bottom:24px; flex-wrap:wrap;}
.hero-title .em-ink{color:var(--ink-50);}
.hero-sub{margin-top:26px; max-width:520px;}
.hero-actions{display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-trust{display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap; color:var(--grey-600); font-weight:600; font-size:14px;}
.hero-trust .t{display:flex; align-items:center; gap:7px;}
.hero-trust svg{width:17px; height:17px; color:var(--mint-deep);}

/* hero stage with phone + plaque */
.hero-stage{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px;}
.hero-blob{
  position:absolute; width:115%; aspect-ratio:1; border-radius:48% 52% 58% 42%;
  background:radial-gradient(circle at 38% 34%, var(--mint-soft), rgba(228,245,240,0) 68%);
  z-index:0; animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(4deg)}}

/* ---------- Phone frame ---------- */
.phone{
  --w:300px; width:var(--w); aspect-ratio:300/620; position:relative;
  background:#0b0b2e; border-radius:42px; padding:11px;
  box-shadow:var(--sh-xl), 0 0 0 2px rgba(5,5,70,.06);
}
.phone::before{ /* notch */
  content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:106px; height:26px; background:#0b0b2e; border-radius:14px; z-index:5;
}
.phone-screen{
  position:absolute; inset:11px; border-radius:32px; overflow:hidden; background:var(--white);
  display:flex; flex-direction:column;
}
.phone-sm{--w:248px;}
.phone-lg{--w:330px;}

/* generic app screen chrome */
.app-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:34px 16px 12px; border-bottom:1px solid var(--grey-200);
}
.app-top .t{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em; color:var(--ink);}
.app-mark{width:26px;height:26px;flex:0 0 auto;}
.app-x{width:22px;height:22px;color:var(--grey-500);}
.app-body{flex:1; padding:16px; display:flex; flex-direction:column; min-height:0;}

/* unit list screen */
.greet{background:var(--grey-100); border-radius:var(--r-md); padding:16px; text-align:center; margin-bottom:16px;}
.greet h4{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2; margin:0 0 6px; color:var(--ink);}
.greet p{font-size:13px; color:var(--ink-80); font-weight:600;}
.unit-row{
  display:flex; align-items:center; gap:14px; padding:13px 16px; margin-bottom:11px;
  border:2px solid var(--ink); border-radius:var(--r-xl); font-family:var(--font-display);
  font-weight:700; color:var(--ink); font-size:16px;
}
.unit-ico{width:40px;height:40px;border-radius:50%;background:var(--mint);display:grid;place-items:center;flex:0 0 auto;}
.unit-ico svg{width:22px;height:22px;color:var(--ink);}

/* chat screen */
.chat-logo-wash{position:absolute; inset:0; display:grid; place-items:center; opacity:.06; pointer-events:none;}
.chat-logo-wash svg{width:62%;}
.chat-body{flex:1; position:relative; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px;}
.chat-day{text-align:center; font-size:12px; color:var(--grey-500); font-weight:700; margin-bottom:4px;}
.bubble{max-width:82%; padding:11px 15px; border-radius:var(--r-lg); font-size:14px; font-weight:500; line-height:1.4;}
.bubble.them{align-self:flex-start; background:var(--grey-100); color:var(--ink); border-bottom-left-radius:5px;}
.bubble.me{align-self:flex-end; background:var(--ink); color:var(--white); border-bottom-right-radius:5px;}
.bubble .meta{display:block; font-size:10px; opacity:.55; margin-top:4px; font-weight:700;}
.chat-input{display:flex; align-items:center; gap:8px; padding:10px 12px 12px;}
.chat-input .field{flex:1; background:var(--grey-300); border-radius:var(--r-full); padding:11px 16px; color:var(--grey-600); font-size:13px; font-weight:600;}
.chat-input .send{width:38px;height:38px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:0 0 auto;}
.chat-input .send svg{width:18px;height:18px;color:var(--white);}

/* incoming ring card (resident notification) */
.ring-screen{align-items:center; justify-content:center; text-align:center; gap:18px; padding:24px;}
.ring-disc{position:relative; width:104px; height:104px; display:grid; place-items:center; margin:6px auto 2px;}
.ring-disc .core{width:60px;height:60px;border-radius:50%;background:var(--ink);display:grid;place-items:center;position:relative;z-index:2;}
.ring-disc .core svg{width:30px;height:30px;color:var(--mint);}
.ring-disc .pulse{position:absolute; inset:0; border-radius:50%; border:2px solid var(--mint); animation:pulse 2s var(--ease-out) infinite;}
.ring-disc .pulse:nth-child(2){animation-delay:.6s;}
.ring-disc .pulse:nth-child(3){animation-delay:1.2s;}
@keyframes pulse{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}

/* ---------- QR plaque ---------- */
.plaque{
  background:var(--white); border-radius:var(--r-xl); padding:20px 20px 18px; width:236px;
  box-shadow:var(--sh-lg); border:1px solid var(--grey-200); text-align:center;
}
.plaque-top{display:flex; align-items:center; justify-content:center; gap:7px; margin-bottom:14px;}
.plaque-top svg{height:22px;}
.plaque h4{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); margin:0 0 12px;}
.qr{width:148px; height:148px; margin:0 auto; display:block;}
.plaque-code{font-family:"Roboto Mono",monospace; font-weight:700; letter-spacing:.18em; font-size:15px; color:var(--ink); margin-top:12px;}
.plaque-note{font-size:11.5px; color:var(--grey-500); font-weight:600; margin-top:4px;}

/* float helpers in hero */
.hero-phone{position:relative; z-index:2;}
.hero-plaque{position:absolute; z-index:3; right:-6px; bottom:24px; animation:floaty2 7s ease-in-out infinite;}
.hero-ringcard{
  position:absolute; z-index:4; left:-26px; top:36px; width:230px; background:var(--white);
  border-radius:var(--r-xl); box-shadow:var(--sh-lg); border:1px solid var(--grey-200);
  padding:14px 16px; display:flex; align-items:center; gap:12px; animation:floaty3 6s ease-in-out infinite;
}
.hero-ringcard .mini{width:42px;height:42px;border-radius:50%;background:var(--mint-soft);display:grid;place-items:center;flex:0 0 auto;}
.hero-ringcard .mini svg{width:22px;height:22px;color:var(--mint-deep);}
.hero-ringcard .txt b{display:block; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); line-height:1.2;}
.hero-ringcard .txt span{font-size:12px; color:var(--grey-500); font-weight:600;}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty3{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}

/* ---------- Problem cards ---------- */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px;}
.pcard{
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-2xl);
  padding:30px; box-shadow:var(--sh-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.pcard .pico{width:54px;height:54px;border-radius:16px;background:var(--grey-100);display:grid;place-items:center;margin-bottom:20px;}
.pcard .pico svg{width:28px;height:28px;color:var(--ink);}
.pcard h3{font-size:21px; margin-bottom:10px;}
.pcard p{font-size:15.5px; color:var(--grey-600); line-height:1.6;}

/* ---------- How it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px;}
.step{position:relative;}
.step-num{
  width:46px;height:46px;border-radius:50%;border:2px solid var(--ink); color:var(--ink);
  display:grid;place-items:center; font-family:var(--font-display); font-weight:800; font-size:19px; margin-bottom:20px;
}
.step h3{font-size:22px; margin-bottom:9px;}
.step p{font-size:15.5px; color:var(--grey-600);}
.step-media{
  margin-top:22px; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3;
  background:var(--grey-150); box-shadow:var(--sh-sm); border:1px solid var(--grey-200);
}
.step-media video,.step-media img{width:100%;height:100%;object-fit:cover;}
/* scan -> notify scene (step 2) */
.scan-scene{width:100%;height:100%;position:relative;display:grid;place-items:center;background:linear-gradient(160deg,var(--mint-soft),var(--grey-150));overflow:hidden;}
.scan-qr{position:relative;width:128px;height:128px;background:#fff;border-radius:18px;box-shadow:var(--sh-md);display:grid;place-items:center;padding:14px;}
.scan-qr .qr{width:100px;height:100px;}
.scan-bracket{position:absolute;width:26px;height:26px;border:3px solid var(--mint-deep);}
.scan-bracket.tl{top:-9px;left:-9px;border-right:none;border-bottom:none;border-radius:8px 0 0 0;}
.scan-bracket.tr{top:-9px;right:-9px;border-left:none;border-bottom:none;border-radius:0 8px 0 0;}
.scan-bracket.bl{bottom:-9px;left:-9px;border-right:none;border-top:none;border-radius:0 0 0 8px;}
.scan-bracket.br{bottom:-9px;right:-9px;border-left:none;border-top:none;border-radius:0 0 8px 0;}
.scan-line{position:absolute;left:6%;right:6%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--mint-deep),transparent);box-shadow:0 0 14px rgba(63,169,146,.7);animation:scanmove 2.6s var(--ease) infinite;}
@keyframes scanmove{0%,100%{top:12%;opacity:.4}50%{top:84%;opacity:1}}
.scan-toast{position:absolute;top:18px;left:18px;right:18px;background:#fff;border-radius:14px;box-shadow:var(--sh-md);padding:11px 14px;display:flex;align-items:center;gap:11px;animation:toastin 2.6s var(--ease) infinite;}
.scan-toast .ti{width:34px;height:34px;border-radius:50%;background:var(--mint-soft);display:grid;place-items:center;flex:0 0 auto;}
.scan-toast .ti svg{width:18px;height:18px;color:var(--mint-deep);}
.scan-toast b{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);display:block;line-height:1.2;}
.scan-toast span{font-size:11px;color:var(--grey-500);font-weight:600;}
@keyframes toastin{0%{transform:translateY(-14px);opacity:0}14%,82%{transform:none;opacity:1}100%{transform:translateY(-14px);opacity:0}}

/* ---------- Showcase gallery ---------- */
.showcase{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; margin-top:54px; align-items:center;}
.show-feature{
  grid-column:span 7; background:var(--grey-100); border-radius:var(--r-2xl); padding:44px;
  display:flex; flex-direction:column; gap:18px; min-height:420px; justify-content:center;
  border:1px solid var(--grey-200); position:relative; overflow:hidden;
}
.show-feature .phone{margin-top:10px;}
.show-side{grid-column:span 5; display:flex; flex-direction:column; gap:24px;}
.show-card{
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-2xl); padding:30px;
  box-shadow:var(--sh-sm);
}
.show-card h3{font-size:20px; margin-bottom:8px;}
.show-card p{font-size:15px; color:var(--grey-600);}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px;}
.shot{display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;}
.shot .cap{font-weight:700; font-size:15px; color:var(--ink);}
.shot .cap span{display:block; font-weight:600; font-size:13px; color:var(--grey-500); margin-top:2px;}

/* ---------- Privacy diagram ---------- */
.flowgrid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px;}
.flowcard{border-radius:var(--r-2xl); padding:34px; border:1px solid rgba(255,255,255,.12);}
.flowcard.bad{background:rgba(255,255,255,.04);}
.flowcard.good{background:linear-gradient(180deg, rgba(123,211,192,.16), rgba(123,211,192,.06)); border-color:rgba(123,211,192,.4);}
.flowcard h3{font-size:19px; margin-bottom:22px; color:var(--white);}
.flowcard h3 small{display:block; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px;}
.flowcard.bad h3 small{color:rgba(255,255,255,.5);}
.flowcard.good h3 small{color:var(--mint);}
.flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.node{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r-full);
  font-weight:700; font-size:13.5px; white-space:nowrap;
}
.node.dim{background:rgba(255,255,255,.08); color:rgba(255,255,255,.82);}
.node.cloud{background:rgba(249,90,68,.18); color:#ffb3a6; border:1px solid rgba(249,90,68,.4);}
.node.mint{background:var(--mint); color:var(--ink);}
.node svg{width:16px;height:16px;}
.flow .arr{color:rgba(255,255,255,.35); font-weight:800;}
.flowcard.good .arr{color:var(--mint);}
.flow-note{margin-top:22px; font-size:14.5px; line-height:1.6;}
.flowcard.bad .flow-note{color:rgba(255,255,255,.6);}
.flowcard.good .flow-note{color:rgba(255,255,255,.85);}
.privacy-line{
  margin-top:40px; text-align:center; font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px,2.2vw,26px); line-height:1.4; color:#fff; max-width:840px; margin-left:auto; margin-right:auto;
}
.privacy-line span{color:var(--mint);}
.pchips{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;}
.pchip{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:10px 16px; border-radius:var(--r-full); font-weight:700; font-size:14px; color:rgba(255,255,255,.9);}
.pchip svg{width:16px;height:16px;color:var(--mint);}

/* ---------- Use-case (real life) ---------- */
.uses{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:52px;}
.ucard{
  position:relative; border-radius:var(--r-2xl); overflow:hidden; min-height:340px; display:flex;
  box-shadow:var(--sh-md); isolation:isolate;
}
.ucard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;}
.ucard::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,5,70,.05) 0%, rgba(5,5,70,.35) 48%, rgba(5,5,70,.86) 100%);}
.ucard .ubody{margin-top:auto; padding:30px; color:var(--white);}
.ucard .utag{font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mint); margin-bottom:8px;}
.ucard .ubody h3{color:var(--white); font-size:25px; margin-bottom:8px;}
.ucard .ubody p{color:rgba(255,255,255,.82); font-size:15px; line-height:1.55; max-width:90%;}
.ucard.tall{min-height:420px;}
.ulink{display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--mint); font-weight:800; font-size:15px; transition:gap .2s var(--ease);}
.ulink:hover{gap:11px;}

/* ---------- Emergency story ---------- */
.story{position:relative; border-radius:0; overflow:hidden;}
.story-media{position:absolute; inset:0; z-index:-2;}
.story-media img{width:100%;height:100%;object-fit:cover;}
.story::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(5,5,70,.92) 0%, rgba(5,5,70,.78) 45%, rgba(5,5,70,.4) 100%);}
.story-inner{padding:clamp(72px,9vw,120px) 0;}
.story-card{max-width:620px;}
.story-quote{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.2vw,38px); line-height:1.24; color:var(--white); letter-spacing:-.02em;}
.story-quote .q{color:var(--mint);}
.story-attr{margin-top:24px; color:rgba(255,255,255,.72); font-size:16px; font-weight:600; line-height:1.5;}
.story-attr b{color:#fff; font-weight:800;}

/* ---------- Comparison ---------- */
.compare-wrap{margin-top:48px; overflow:hidden; border-radius:var(--r-2xl); border:1px solid var(--grey-200); box-shadow:var(--sh-sm);}
table.compare{width:100%; border-collapse:collapse; background:var(--white);}
table.compare th,table.compare td{padding:18px 22px; text-align:left; font-size:15.5px; border-bottom:1px solid var(--grey-200);}
table.compare thead th{font-family:var(--font-body); font-weight:700; color:var(--grey-600); font-size:14px;}
table.compare thead th.dorbel{color:var(--ink);}
.col-dorbel{background:var(--mint-soft);}
table.compare tbody td:first-child{font-weight:700; color:var(--ink-80);}
table.compare tbody tr:last-child td{border-bottom:none;}
.dorbel-head{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink);}
.dorbel-head svg{height:20px;}
.yes{color:var(--mint-deep); font-weight:800; display:inline-flex; align-items:center; gap:7px;}
.no{color:var(--grey-500); display:inline-flex; align-items:center; gap:7px;}
.yes svg,.no svg{width:17px;height:17px;}

/* ---------- Pricing ---------- */
.toggle{display:inline-flex; align-items:center; gap:6px; background:var(--grey-150); border-radius:var(--r-full); padding:5px; margin-top:30px;}
.toggle button{
  border:none; cursor:pointer; font-family:var(--font-body); font-weight:800; font-size:15px;
  padding:10px 22px; border-radius:var(--r-full); background:transparent; color:var(--grey-600); transition:.2s;
}
.toggle button.on{background:var(--white); color:var(--ink); box-shadow:var(--sh-sm);}
.toggle .save{font-size:12px; color:var(--mint-deep); font-weight:800;}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; align-items:stretch;}
.plan{
  background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-2xl); padding:34px;
  display:flex; flex-direction:column; box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.plan.featured{border:2px solid var(--ink); box-shadow:var(--sh-md); position:relative;}
.plan .ptag{font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint-deep); margin-bottom:6px;}
.plan h3{font-family:var(--font-display); font-size:25px; margin-bottom:6px;}
.plan .pdesc{font-size:14.5px; color:var(--grey-600); min-height:44px; margin-bottom:18px;}
.plan .price{display:flex; align-items:baseline; gap:4px; margin-bottom:4px;}
.plan .price .amt{font-family:var(--font-display); font-weight:800; font-size:46px; letter-spacing:-.03em; color:var(--ink);}
.plan .price .per{font-weight:700; color:var(--grey-500); font-size:16px;}
.plan .pyear{font-size:13.5px; color:var(--mint-deep); font-weight:800; min-height:20px; margin-bottom:22px;}
.plan ul{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:13px;}
.plan li{display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink-80); font-weight:600;}
.plan li svg{width:19px;height:19px;color:var(--mint-deep);flex:0 0 auto;margin-top:1px;}
.plan .btn{width:100%; justify-content:center; margin-top:auto;}
.badge-pop{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--mint); color:var(--ink); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 16px; border-radius:var(--r-full); white-space:nowrap;}
.founder-note{margin-top:34px; text-align:center; font-size:15px; color:var(--grey-600); font-weight:600;}
.founder-note b{color:var(--ink);}

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin:48px auto 0; display:flex; flex-direction:column; gap:14px;}
.qa{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-xl); overflow:hidden; transition:box-shadow .2s,border-color .2s;}
.qa[open]{box-shadow:var(--sh-sm); border-color:var(--grey-300);}
.qa summary{
  list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .plus{width:24px;height:24px;flex:0 0 auto; position:relative; transition:transform .25s var(--ease);}
.qa[open] summary .plus{transform:rotate(45deg);}
.qa summary .plus::before,.qa summary .plus::after{content:""; position:absolute; background:var(--ink); border-radius:2px;}
.qa summary .plus::before{left:50%; top:3px; width:2px; height:18px; transform:translateX(-50%);}
.qa summary .plus::after{top:50%; left:3px; height:2px; width:18px; transform:translateY(-50%);}
.qa .qa-body{padding:0 26px 24px; color:var(--grey-600); font-size:15.5px; line-height:1.65; max-width:680px;}

/* ---------- CTA ---------- */
.cta-final{text-align:center; overflow:hidden;}
.cta-final h2{font-size:clamp(34px,5vw,62px);}
.cta-final .lede{margin:20px auto 0; max-width:560px;}
.cta-actions{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
.cta-blob{position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(123,211,192,.22), transparent 70%); pointer-events:none;}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:rgba(255,255,255,.7); padding:72px 0 36px;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.footer h5{color:#fff; font-family:var(--font-body); font-weight:800; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 18px;}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.footer a{color:rgba(255,255,255,.7); font-size:15px; font-weight:600; transition:color .18s;}
.footer a:hover{color:var(--mint);}
.footer-brand svg{height:34px; margin-bottom:18px;}
.footer-brand p{color:rgba(255,255,255,.6); font-size:15px; max-width:280px; line-height:1.6;}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; color:rgba(255,255,255,.5); flex-wrap:wrap;}
.footer-bottom a{color:rgba(255,255,255,.5); transition:color .18s;}
.footer-bottom a:hover{color:var(--mint);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero-blob,.hero-plaque,.hero-ringcard,.ring-disc .pulse{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Mobile menu ---------- */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--white); z-index:80;
  transform:translateX(100%); transition:transform .32s var(--ease-out); box-shadow:var(--sh-xl);
  padding:26px 24px; display:flex; flex-direction:column; gap:6px;
}
.mobile-menu.open{transform:none;}
.mobile-menu a{padding:14px 12px; border-radius:var(--r-md); font-weight:700; font-size:18px; color:var(--ink);}
.mobile-menu a:hover{background:var(--grey-100);}
.mobile-menu .btn{margin-top:14px; justify-content:center;}
.mm-close{align-self:flex-end; background:none; border:none; cursor:pointer; padding:8px; margin-bottom:10px;}
.mm-close svg{width:26px;height:26px;}
.scrim{position:fixed; inset:0; background:rgba(5,5,70,.4); z-index:70; opacity:0; visibility:hidden; transition:.3s;}
.scrim.open{opacity:1; visibility:visible;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:30px;}
  .hero-stage{min-height:auto; margin-top:10px;}
  .showcase{grid-template-columns:1fr;}
  .show-feature,.show-side{grid-column:auto;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .nav-cta .btn-desktop{display:none;}
  .nav-burger{display:block;}
}
@media (max-width:760px){
  body{font-size:16px;}
  .cards-3,.steps,.plans,.flowgrid,.uses{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  table.compare th,table.compare td{padding:14px 14px; font-size:14px;}
  .hero-ringcard{left:0; width:200px;}
  .hero-plaque{right:0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .gallery{grid-template-columns:1fr;}
  .hero-ringcard{display:none;}
  table.compare .hide-sm{display:none;}
}

/* ================= PERSONA PAGES ================= */

/* ---- Section jump dock (home page) — compact floating pill bar, anchored to footer ---- */
.subnav{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:55; background:rgba(255,254,254,.92);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border:1px solid var(--grey-200); border-radius:var(--r-full);
  box-shadow:var(--sh-lg); padding:6px; max-width:92vw;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.subnav.tucked{opacity:0; transform:translateX(-50%) translateY(26px); pointer-events:none;}
.subnav-inner{display:flex; align-items:center; gap:10px;}
.subnav-label{
  flex:0 0 auto; padding-left:10px; font-weight:800; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey-500);
}
.subnav-links{
  display:flex; align-items:center; gap:4px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
}
.subnav-links::-webkit-scrollbar{display:none;}
.subnav-links a{
  flex:0 0 auto; padding:8px 14px; border-radius:var(--r-full); font-weight:700; font-size:13.5px;
  color:var(--ink-80); white-space:nowrap; transition:background .18s, color .18s;
}
.subnav-links a:hover{background:var(--ink-05); color:var(--ink);}
.subnav-links a.active{background:var(--ink); color:var(--white);}

/* mobile menu section grouping */
.mm-label{font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-500); padding:4px 12px 2px;}
.mm-divider{height:1px; background:var(--grey-200); margin:12px 8px;}

/* keep anchored sections clear of the sticky top nav */
section[id]{scroll-margin-top:96px;}
@media (max-width:980px){ section[id]{scroll-margin-top:88px;} }
@media (max-width:560px){
  .subnav{bottom:14px; padding:5px;}
  .subnav-label{display:none;}
  .subnav-links a{padding:7px 12px; font-size:13px;}
}

/* photo-backed hero */
.phero{position:relative; color:#fff; overflow:hidden; padding:clamp(88px,12vw,148px) 0 clamp(60px,8vw,104px);}
.phero-bg{position:absolute; inset:0; z-index:-2;}
.phero-bg img{width:100%; height:100%; object-fit:cover;}
.phero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(102deg, rgba(5,5,70,.94) 0%, rgba(5,5,70,.84) 44%, rgba(5,5,70,.46) 100%);}
.phero .inner{max-width:640px;}
.lp-tag{display:inline-flex; align-items:center; gap:8px; background:rgba(123,211,192,.16); color:var(--mint);
  border:1px solid rgba(123,211,192,.4); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 15px; border-radius:var(--r-full); margin-bottom:22px;}
.phero h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(36px,5.4vw,64px); color:#fff; margin:0; text-wrap:balance;}
.phero h1 em{font-style:normal; color:var(--mint);}
.phero .psub{margin-top:22px; font-size:clamp(17px,1.6vw,20px); line-height:1.6; color:rgba(255,255,255,.82); font-weight:500; max-width:548px;}

.pain-list{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; max-width:548px;}
.pain-list li{display:flex; align-items:flex-start; gap:13px; font-size:16px; color:rgba(255,255,255,.88); font-weight:500; line-height:1.45;}
.pain-list li .x{width:24px; height:24px; border-radius:50%; background:rgba(249,90,68,.22); display:grid; place-items:center; flex:0 0 auto; margin-top:1px;}
.pain-list li .x svg{width:13px; height:13px; color:#ff9b8c;}

.fix-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px;}
.fix-list li{display:flex; align-items:flex-start; gap:13px; font-size:17px; color:var(--ink-80); font-weight:600; line-height:1.45;}
.fix-list li .c{width:26px; height:26px; border-radius:50%; background:var(--mint-soft); display:grid; place-items:center; flex:0 0 auto; margin-top:1px;}
.fix-list li .c svg{width:15px; height:15px; color:var(--mint-deep);}

/* split layout (benefits / scenario) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,64px); align-items:center;}
.split > *{min-width:0;}
.scene-img{border-radius:var(--r-2xl); overflow:hidden; box-shadow:var(--sh-md); aspect-ratio:4/3;}
.scene-img img{width:100%; height:100%; object-fit:cover;}
.split .eyebrow{display:block; margin-bottom:16px;}
.split h2{margin-bottom:18px;}
.split .lede{margin-bottom:26px;}

/* asset-tagging cards (business) */
.tags-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px;}
.tagcard{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--r-xl); padding:24px 20px; box-shadow:var(--sh-sm); text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.tagcard:hover{transform:translateY(-4px); box-shadow:var(--sh-md);}
.tagcard .ti{width:50px; height:50px; border-radius:15px; background:var(--ink); display:grid; place-items:center; margin:0 auto 15px;}
.tagcard .ti svg{width:25px; height:25px; color:var(--mint);}
.tagcard h4{font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 5px;}
.tagcard p{font-size:13.5px; color:var(--grey-600); line-height:1.5;}

/* segment pricing strip */
.pricestrip{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
  background:var(--grey-100); border:1px solid var(--grey-200); border-radius:var(--r-2xl); padding:clamp(28px,4vw,48px);}
.pricestrip .pmeta{max-width:440px;}
.pricestrip .pbig{display:flex; align-items:baseline; gap:6px;}
.pricestrip .pbig .amt{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,58px); letter-spacing:-.03em; color:var(--ink);}
.pricestrip .pbig .per{font-weight:700; color:var(--grey-500); font-size:18px;}
.pricestrip .pnote{font-size:14.5px; color:var(--mint-deep); font-weight:800; margin-top:4px;}

@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:34px;}
  .split.rev .scene-img{order:-1;}
  .tags-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .tags-grid{grid-template-columns:1fr;}
  .pricestrip{flex-direction:column; align-items:flex-start;}
}