/* ==========================================================================
   FRONTLINE OPS — public site
   Premium dark. Cyan leads, magenta is saved for the moments that matter.
   Every colour is a variable at the top; change it there and it changes
   everywhere.
   ========================================================================== */


:root{
  /* ---- surfaces -------------------------------------------------------- */
  --bg:            #06080d;
  --bg-raised:     #0a0e17;
  --panel:         #0d1220;
  --panel-2:       #111827;
  --line:          rgba(255,255,255,.075);
  --line-strong:   rgba(255,255,255,.15);

  /* ---- type ------------------------------------------------------------ */
  --text:          #e9eff8;
  --text-2:        #9db0c6;
  --text-3:        #6b7c92;

  /* ---- brand ----------------------------------------------------------- */
  --cyan:          #22d3ee;
  --cyan-hi:       #7dedff;
  --cyan-deep:     #0891b2;
  --magenta:       #ff2d8f;
  --magenta-hi:    #ff7ab8;
  --violet:        #7c5cff;

  --grad:          linear-gradient(115deg, #22d3ee 0%, #5b8bf7 48%, #ff2d8f 100%);
  --grad-soft:     linear-gradient(115deg, rgba(34,211,238,.18), rgba(255,45,143,.18));
  --chrome:        linear-gradient(180deg,#ffffff 0%,#dbe6f5 38%,#8ea3bd 52%,#f2f7ff 78%,#c3d2e6 100%);

  --glow-cyan:     0 0 40px rgba(34,211,238,.35);
  --glow-magenta:  0 0 40px rgba(255,45,143,.35);

  /* ---- metrics --------------------------------------------------------- */
  --wrap:          1180px;
  --radius:        16px;
  --radius-lg:     22px;
  --ease:          cubic-bezier(.22,.68,.36,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:400 17px/1.65 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* Ambient light. Two soft pools of colour fixed behind everything, so the page
   never reads as flat black. */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(760px 520px at 78% -6%,  rgba(34,211,238,.13), transparent 62%),
    radial-gradient(680px 480px at 8% 22%,  rgba(255,45,143,.085), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(91,139,247,.09), transparent 62%);
}
/* Faint circuit grid, echoing the traces in the logo. */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 30%, transparent 78%);
}

/* ==========================================================  primitives  == */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

section{ position:relative; padding:104px 0; }
section.tight{ padding:76px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:700 12px/1 'Saira Condensed',sans-serif;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 18px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan));
}

h1,h2,h3,h4{ margin:0; letter-spacing:-.022em; line-height:1.08; font-weight:800; }
h2{ font-size:clamp(30px,4.4vw,50px); }
h3{ font-size:20px; line-height:1.3; letter-spacing:-.012em; }

.lede{ color:var(--text-2); font-size:clamp(16px,1.9vw,19px); max-width:62ch; margin:20px 0 0; }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head.center .lede{ margin-left:auto; margin-right:auto; }

.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.chrome-text{
  background:var(--chrome); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ------------------------------------------------------------- buttons --- */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:12px; border:1px solid transparent;
  font:700 15.5px/1 'Inter',sans-serif; letter-spacing:-.01em;
  cursor:pointer; position:relative; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease),
             background .22s var(--ease), border-color .22s var(--ease);
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--grad); color:#04070d; font-weight:800;
  box-shadow:0 8px 30px -10px rgba(255,45,143,.55), 0 0 0 1px rgba(255,255,255,.09) inset;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 44px -12px rgba(255,45,143,.75), 0 0 34px -6px rgba(34,211,238,.5),
             0 0 0 1px rgba(255,255,255,.16) inset;
}
.btn-ghost{
  background:rgba(255,255,255,.035); color:var(--text);
  border-color:var(--line-strong); backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  border-color:rgba(34,211,238,.6); color:#fff;
  background:rgba(34,211,238,.09);
  box-shadow:0 0 26px -8px rgba(34,211,238,.55);
  transform:translateY(-2px);
}
.btn-sm{ padding:11px 18px; font-size:14px; border-radius:10px; }
.btn-block{ width:100%; }

/* ------------------------------------------------------------- surfaces -- */
.card{
  position:relative; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  border:1px solid var(--line);
  padding:30px;
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
  overflow:hidden;
}
/* Hairline that lights up along the top edge on hover. */
.card::before{
  content:''; position:absolute; top:0; left:22px; right:22px; height:1px;
  background:var(--grad); opacity:0; transition:opacity .3s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.28);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.9), 0 0 40px -22px rgba(34,211,238,.55);
}
.card:hover::before{ opacity:1; }

/* Divider that echoes the circuit traces around the mark. */
.trace-divider{
  height:1px; width:100%; border:0; margin:0;
  background:linear-gradient(90deg,transparent, rgba(34,211,238,.35) 22%,
             rgba(255,45,143,.35) 78%, transparent);
  position:relative;
}
.trace-divider::before,.trace-divider::after{
  content:''; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%;
}
.trace-divider::before{ left:22%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.trace-divider::after{ right:22%; background:var(--magenta); box-shadow:0 0 10px var(--magenta); }

/* ==============================================================  nav  ==== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(6,8,13,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--line); background:rgba(6,8,13,.9); }
.nav-inner{ display:flex; align-items:center; gap:28px; height:70px; }

.logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.logo img,.logo svg{ height:36px; width:auto; filter:drop-shadow(0 0 12px rgba(34,211,238,.4)); }
.logo-text{ display:flex; flex-direction:column; line-height:.92; }
.logo-text b{
  font:800 17px/1 'Saira Condensed',sans-serif; letter-spacing:.11em;
  text-transform:uppercase;
  background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-text span{
  font:700 9px/1 'Saira Condensed',sans-serif; letter-spacing:.34em;
  text-transform:uppercase; color:var(--cyan); margin-top:3px;
}

.nav-links{ display:flex; gap:26px; margin-left:auto; }
.nav-links a{
  font:600 14.5px/1 'Inter',sans-serif; color:var(--text-2); position:relative;
  padding:6px 0; transition:color .2s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--grad); transition:right .28s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ right:0; }
.nav-cta{ flex-shrink:0; }

.burger{
  display:none; background:none; border:1px solid var(--line-strong);
  border-radius:10px; padding:9px 10px; cursor:pointer; margin-left:auto;
}
.burger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; }
.burger span+span{ margin-top:4px; }

/* ==============================================================  hero  === */
.hero{ padding:76px 0 92px; position:relative; }
.hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
}
.hero h1{
  font-size:clamp(44px,6.6vw,80px); font-weight:900; letter-spacing:-.035em;
  line-height:.98;
}
.hero h1 .line2{ display:block; }
.hero .lede{ font-size:clamp(16.5px,1.85vw,19.5px); max-width:37ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-note{
  margin-top:22px; font-size:13.5px; color:var(--text-3);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.hero-note .dot{ width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); flex-shrink:0; }

/* The logo, sitting IN the page rather than on it.
   The artwork is neon over a dark smoky backing. `screen` drops that backing to
   nothing against a dark ground, so there is no rectangle edge and no sticker;
   the soft mask feathers whatever is left, and the glow below is positioned to
   read as light thrown by the mark itself. */
.hero-art{ position:relative; display:grid; place-items:center; min-height:400px; }

.hero-art .halo{
  position:absolute; inset:-14% -8%; pointer-events:none;
  background:
    radial-gradient(42% 48% at 33% 42%, rgba(34,211,238,.34), transparent 72%),
    radial-gradient(42% 48% at 67% 42%, rgba(255,45,143,.28), transparent 72%),
    radial-gradient(72% 62% at 50% 60%, rgba(91,139,247,.15), transparent 76%);
  filter:blur(30px);
  animation:breathe 8s var(--ease) infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.06); opacity:1; }
}

/* Its circuit traces carry on out of the artwork and into the section. */
.hero-art::after{
  content:''; position:absolute; left:-10%; right:-10%; top:46%; height:1px;
  pointer-events:none; opacity:.75;
  background:linear-gradient(90deg,
    transparent 0%, rgba(34,211,238,.5) 16%, rgba(34,211,238,0) 34%,
    rgba(255,45,143,0) 66%, rgba(255,45,143,.5) 84%, transparent 100%);
}

.hero-art .mark{
  position:relative; width:min(100%,470px);
  -webkit-mask-image:radial-gradient(ellipse 84% 82% at 50% 47%, #000 56%, transparent 94%);
          mask-image:radial-gradient(ellipse 84% 82% at 50% 47%, #000 56%, transparent 94%);
}
@media (prefers-reduced-motion:reduce){
  .hero-art .halo{ animation:none; }
}

/* -------------------------------------------------------- promise strip -- */
.promises{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-top:66px;
}
.promise{ background:var(--bg-raised); padding:22px 24px; }
.promise b{
  display:block; font:800 24px/1.1 'Saira Condensed',sans-serif;
  letter-spacing:.02em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.promise span{ display:block; margin-top:6px; font-size:13.5px; color:var(--text-3); }

/* ==========================================================  problem  ==== */
.problem{ background:linear-gradient(180deg,transparent,rgba(255,45,143,.035),transparent); }
.problem-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.problem-card{ padding:32px; }
.problem-card h3{ margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.problem-card p{ margin:0; color:var(--text-2); font-size:16px; }
.problem-card .x{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,45,143,.11); border:1px solid rgba(255,45,143,.32);
  color:var(--magenta-hi); font-size:15px; font-weight:700;
}

/* =========================================================  services  ==== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service{ display:flex; flex-direction:column; padding:34px 30px; }
.service .kicker{
  font:800 13px/1 'Saira Condensed',sans-serif; letter-spacing:.2em;
  color:var(--text-3); margin-bottom:20px;
}
.service .glyph{
  width:52px;height:52px;border-radius:14px;margin-bottom:20px;
  display:grid;place-items:center;
  background:linear-gradient(150deg, rgba(34,211,238,.16), rgba(255,45,143,.14));
  border:1px solid rgba(34,211,238,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.service .glyph svg{ width:26px;height:26px;stroke:var(--cyan-hi); }
.service:nth-child(2) .glyph{ border-color:rgba(255,45,143,.34); }
.service:nth-child(2) .glyph svg{ stroke:var(--magenta-hi); }
.service h3{ font-size:22px; }
.service .hook{ margin:10px 0 0; color:var(--cyan); font-weight:600; font-size:15.5px; }
.service p.body{ margin:14px 0 0; color:var(--text-2); font-size:15.5px; }
.service ul{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.service li{
  position:relative; padding-left:26px; font-size:15px; color:var(--text-2);
}
.service li::before{
  content:''; position:absolute; left:0; top:8px; width:12px; height:12px;
  border-radius:3px; background:var(--grad-soft);
  border:1px solid rgba(34,211,238,.45);
}
.service li::after{
  content:''; position:absolute; left:4px; top:11px; width:4px; height:4px;
  border-radius:50%; background:var(--cyan); box-shadow:0 0 7px var(--cyan);
}

/* ==========================================================  process  ==== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps::before{
  content:''; position:absolute; top:36px; left:9%; right:9%; height:1px;
  background:linear-gradient(90deg, rgba(34,211,238,.5), rgba(255,45,143,.5));
  opacity:.4;
}
.step{ position:relative; }
.step .n{
  width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
  font:800 27px/1 'Saira Condensed',sans-serif;
  background:var(--panel); border:1px solid var(--line-strong);
  position:relative; z-index:1; margin-bottom:22px;
  box-shadow:0 0 0 8px var(--bg);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.step .n span{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step:hover .n{
  border-color:rgba(34,211,238,.55);
  box-shadow:0 0 0 8px var(--bg), 0 0 30px -6px rgba(34,211,238,.6);
}
.step h3{ font-size:19px; margin-bottom:10px; }
.step p{ margin:0; color:var(--text-2); font-size:15.5px; }

/* =============================================================  demo  ==== */
.demo{ background:linear-gradient(180deg,transparent,rgba(34,211,238,.045),transparent); }
.demo-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.demo-points{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.demo-points li{ display:flex; gap:12px; color:var(--text-2); font-size:15.5px; }
.demo-points svg{ width:19px;height:19px;flex-shrink:0;margin-top:3px;stroke:var(--cyan); }
.demo-disclaimer{
  margin-top:26px; padding:14px 16px; border-radius:12px; font-size:13.5px;
  color:var(--text-3); background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-left:2px solid var(--cyan);
}

/* ---- the chat window ----------------------------------------------------*/
.chat{
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg,var(--panel),#0a0f1b);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -40px #000, 0 0 60px -30px rgba(34,211,238,.4);
  display:flex; flex-direction:column; height:560px;
}
.chat-head{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}
.chat-avatar{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--grad); color:#04070d; font:800 15px/1 'Saira Condensed',sans-serif;
  box-shadow:0 0 20px -4px rgba(34,211,238,.7);
}
.chat-who b{ display:block; font-size:14.5px; font-weight:700; }
.chat-who span{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3);
  margin-top:2px;
}
.chat-who span::before{
  content:''; width:6px;height:6px;border-radius:50%;background:#22e07a;
  box-shadow:0 0 8px #22e07a;
}
.chat-tag{
  margin-left:auto; font:700 10px/1 'Saira Condensed',sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); padding:6px 9px; border-radius:6px;
  background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.3);
}
.chat-log{
  flex:1; overflow-y:auto; padding:22px 18px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent;
}
.chat-log::-webkit-scrollbar{ width:8px; }
.chat-log::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:4px; }
.msg{
  max-width:82%; padding:12px 15px; border-radius:15px; font-size:15px; line-height:1.55;
  white-space:pre-wrap; word-wrap:break-word;
  animation:pop .32s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.msg.bot{
  align-self:flex-start; background:rgba(255,255,255,.055);
  border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--text);
}
.msg.me{
  align-self:flex-end; background:linear-gradient(120deg,rgba(34,211,238,.9),rgba(91,139,247,.9));
  color:#04070d; font-weight:600; border-bottom-right-radius:5px;
}
.msg.booked{ border-color:rgba(255,45,143,.45); box-shadow:0 0 24px -10px rgba(255,45,143,.7); }
.msg strong{ font-weight:700; }
.typing{ display:flex; gap:5px; align-self:flex-start; padding:14px 16px;
  background:rgba(255,255,255,.055); border:1px solid var(--line);
  border-radius:15px; border-bottom-left-radius:5px; }
.typing i{ width:7px;height:7px;border-radius:50%;background:var(--text-3);
  animation:blink 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.28; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.chat-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px; }
.chip{
  padding:8px 13px; border-radius:999px; font-size:13.5px; cursor:pointer;
  background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.3);
  color:var(--cyan-hi); transition:all .2s var(--ease);
}
.chip:hover{ background:rgba(34,211,238,.2); transform:translateY(-1px);
  box-shadow:0 0 18px -6px rgba(34,211,238,.8); }
.chat-form{ display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line);
  background:rgba(0,0,0,.25); }
.chat-form input{
  flex:1; background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
  border-radius:11px; padding:12px 14px; color:var(--text); font-size:15px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-form input:focus{ border-color:rgba(34,211,238,.6);
  box-shadow:0 0 0 3px rgba(34,211,238,.12); }
.chat-send{
  width:46px; border:0; border-radius:11px; background:var(--grad); cursor:pointer;
  display:grid; place-items:center; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-send:hover{ transform:translateY(-1px); box-shadow:0 0 22px -6px rgba(255,45,143,.9); }
.chat-send svg{ width:19px;height:19px;stroke:#04070d; }

/* ==========================================================  pricing  ==== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.tier{ display:flex; flex-direction:column; padding:34px 30px; height:100%; }
.tier.featured{
  border-color:rgba(255,45,143,.42);
  background:linear-gradient(180deg, rgba(255,45,143,.09), rgba(255,255,255,.02));
  box-shadow:0 30px 80px -40px #000, 0 0 50px -26px rgba(255,45,143,.65);
}
.tier.featured::before{ opacity:1; background:linear-gradient(90deg,var(--magenta),var(--cyan)); }
.tier.featured:hover{ border-color:rgba(255,45,143,.6); }
.tier-badge{
  position:absolute; top:16px; right:16px;
  font:700 10px/1 'Saira Condensed',sans-serif; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 11px; border-radius:999px; color:#04070d; background:var(--magenta);
  box-shadow:0 0 22px -6px var(--magenta);
}
.tier h3{ font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  font-family:'Saira Condensed',sans-serif; font-weight:800; color:var(--text-2); }
.tier .price{ display:flex; align-items:baseline; gap:8px; margin:16px 0 4px;
  flex-wrap:wrap; }
/* "Let's talk" instead of "$697": stack it and drop the size so it never wraps
   mid-word against the narrow column. */
.tier .price.long{ flex-direction:column; align-items:flex-start; gap:2px; }
.tier .price.long b{ font-size:clamp(28px,3vw,34px); }
.tier .price b{ font-size:clamp(34px,4vw,44px); font-weight:900; letter-spacing:-.035em; }
.tier .price span{ color:var(--text-3); font-size:15px; }
.tier .setup{ font-size:13.5px; color:var(--cyan); font-weight:600; }
.tier .blurb{ margin:16px 0 0; color:var(--text-2); font-size:15.5px; min-height:48px; }
.tier ul{ list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:12px; flex:1; }
.tier li{ position:relative; padding-left:27px; font-size:15px; color:var(--text-2); }
.tier li svg{ position:absolute; left:0; top:4px; width:16px;height:16px; stroke:var(--cyan); }
.tier.featured li svg{ stroke:var(--magenta-hi); }
.pricing-note{
  margin-top:34px; text-align:center; color:var(--text-3); font-size:14.5px;
  max-width:640px; margin-left:auto; margin-right:auto;
}

/* ============================================================  proof  ==== */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.quote{ padding:32px; display:flex; flex-direction:column; }
.quote .metric{
  font:800 27px/1 'Saira Condensed',sans-serif; letter-spacing:.01em; margin-bottom:18px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.quote blockquote{ margin:0; font-size:16px; color:var(--text); line-height:1.62; flex:1; }
.quote blockquote::before{ content:'“'; color:var(--cyan); font-size:34px; line-height:0;
  vertical-align:-8px; margin-right:3px; }
.quote footer{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:12px; }
.quote .who b{ display:block; font-size:14.5px; }
.quote .who span{ display:block; font-size:13px; color:var(--text-3); margin-top:2px; }
.quote .initial{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
  font:800 15px/1 'Saira Condensed',sans-serif; color:var(--text-2);
}
.quote.is-placeholder{ opacity:.72; }
.quote.is-placeholder::after{
  content:'Placeholder'; position:absolute; top:14px; right:14px;
  font:700 9px/1 'Saira Condensed',sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); padding:5px 8px; border-radius:5px;
  background:rgba(255,255,255,.05); border:1px dashed var(--line-strong);
}

/* ==============================================================  faq  ==== */
.faq-list{ max-width:860px; margin:0 auto; display:grid; gap:12px; }
.qa{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.025); transition:border-color .25s var(--ease);
}
.qa[open]{ border-color:rgba(34,211,238,.32); background:rgba(34,211,238,.04); }
.qa summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 22px; position:relative;
  font-weight:650; font-size:16.5px; user-select:none;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:''; position:absolute; right:22px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.qa[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.qa summary:hover{ color:#fff; }
.qa .a{ padding:0 22px 22px; color:var(--text-2); font-size:15.5px; margin:0; }

/* =========================================================  final CTA  === */
.final{ padding-bottom:96px; }
.final-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.final-list{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:16px; }
.final-list li{ display:flex; gap:13px; color:var(--text-2); font-size:15.5px; }
.final-list svg{ width:20px;height:20px;flex-shrink:0;margin-top:2px;stroke:var(--cyan); }
.contact-strip{ margin-top:34px; display:grid; gap:12px; }
.contact-strip a{ display:flex; align-items:center; gap:12px; color:var(--text-2);
  font-size:15.5px; transition:color .2s var(--ease); }
.contact-strip a:hover{ color:var(--cyan); }
.contact-strip svg{ width:18px;height:18px;stroke:var(--cyan);flex-shrink:0; }

/* ---- the form -----------------------------------------------------------*/
.form-card{
  padding:34px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -50px #000;
  position:relative; overflow:hidden;
}
.form-card::before{
  content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--grad);
}
.form-card h3{ font-size:23px; }
.form-card > p{ margin:8px 0 26px; color:var(--text-3); font-size:14.5px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; font:700 11.5px/1 'Saira Condensed',sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; background:rgba(0,0,0,.34); border:1px solid var(--line-strong);
  border-radius:11px; padding:13px 15px; color:var(--text); font:400 15.5px 'Inter',sans-serif;
  outline:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(34,211,238,.65); box-shadow:0 0 0 3px rgba(34,211,238,.13);
}
.field input::placeholder,.field textarea::placeholder{ color:#4d5c70; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-legal{ margin:16px 0 0; font-size:12.5px; color:var(--text-3); text-align:center; }
.honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{ padding:14px 16px; border-radius:11px; font-size:14.5px; margin-bottom:20px; }
.alert.good{ background:rgba(34,224,122,.1); border:1px solid rgba(34,224,122,.35); color:#8ff0bd; }
.alert.bad{ background:rgba(255,45,143,.1); border:1px solid rgba(255,45,143,.4); color:#ffa8d1; }

/* ===========================================================  footer  ==== */
.footer{ border-top:1px solid var(--line); padding:56px 0 40px; background:rgba(0,0,0,.35); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; }
.footer .logo{ margin-bottom:18px; }
.footer p{ color:var(--text-3); font-size:14.5px; margin:0; max-width:42ch; }
.footer h4{ font:700 11.5px/1 'Saira Condensed',sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-2); margin-bottom:16px; }
.footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.footer ul a{ color:var(--text-3); font-size:14.5px; transition:color .2s var(--ease); }
.footer ul a:hover{ color:var(--cyan); }
.socials{ display:flex; gap:10px; margin-top:20px; }
.socials a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  transition:all .22s var(--ease);
}
.socials a:hover{ border-color:rgba(34,211,238,.55); background:rgba(34,211,238,.1);
  transform:translateY(-2px); }
.socials svg{ width:17px;height:17px;fill:var(--text-2); }
.socials a:hover svg{ fill:var(--cyan); }
.footer-bottom{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--text-3); font-size:13.5px;
}
.footer-bottom .tagline{
  font:700 10.5px/1 'Saira Condensed',sans-serif; letter-spacing:.3em; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ====================================================  floating chat  ==== */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:flex; align-items:center; gap:10px; padding:14px 20px 14px 16px;
  border:0; border-radius:999px; cursor:pointer; background:var(--grad); color:#04070d;
  font:800 14.5px/1 'Inter',sans-serif;
  box-shadow:0 14px 40px -12px rgba(255,45,143,.7), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s;
}
.chat-fab:hover{ transform:translateY(-3px) scale(1.02);
  box-shadow:0 20px 50px -12px rgba(255,45,143,.85), 0 0 34px -6px rgba(34,211,238,.6); }
.chat-fab svg{ width:20px;height:20px;stroke:#04070d; }
.chat-fab.hidden{ opacity:0; pointer-events:none; transform:translateY(14px); }

/* ==========================================  scroll reveal animation  ==== */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================  responsive  == */
@media (max-width:1040px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-art{ order:-1; min-height:280px; }
  .hero-art .mark{ width:min(58%,260px); }
    .hero-art .halo{ width:min(80%,330px); }
  .hero .lede{ max-width:60ch; }
  .demo-grid,.final-grid{ grid-template-columns:1fr; gap:38px; }
  .services-grid,.pricing-grid,.proof-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
  .steps::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  section{ padding:72px 0; }
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; flex-direction:column; position:absolute; top:70px; left:0; right:0;
    background:rgba(6,8,13,.98); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line); padding:18px 24px 24px; gap:2px;
  }
  .nav-links.open a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
  .promises{ grid-template-columns:repeat(2,1fr); }
  .problem-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:26px; }
  .step{ display:grid; grid-template-columns:auto 1fr; gap:0 18px; }
  .step .n{ width:56px;height:56px;font-size:21px;margin-bottom:0;grid-row:span 2; }
  .field-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .chat{ height:500px; }
  .chat-fab{ right:14px; bottom:14px; padding:13px 18px 13px 15px; font-size:14px; }
  .hero{ padding:34px 0 64px; }
  /* On a phone the emblem must not eat the first screen — the headline is what
     sells, so the mark gets a compact band and the words start above the fold. */
  .hero-art{ min-height:186px; }
  .hero-art .mark{ width:min(42%,158px); }
    .hero-art .halo{ width:min(58%,220px); }
}
@media (max-width:480px){
  /* The pill's label is too wide on a small phone and lands on the body copy.
     Shrink it to the icon; the whole thing is still a big tap target. */
  .chat-fab span{ display:none; }
  .chat-fab{ padding:15px; border-radius:50%; }
  .chat-fab svg{ width:22px; height:22px; }
}
@media (max-width:420px){
  .promises{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .hero-actions{ gap:11px; }
}

/* ==========================================================================
   Utility classes for the simple pages (thanks, privacy, terms) and for the
   handful of one-off tweaks. The site runs `style-src 'self'`, so a style=""
   attribute in the HTML is ignored by the browser — everything lives here.
   ========================================================================== */
.page-center{ padding:120px 24px; text-align:center; }
.page-center h1{ font-size:clamp(38px,6vw,64px); }
.page-center .lede{ margin:20px auto 34px; }
.page-center .eyebrow{ justify-content:center; }
.page-center .eyebrow::before{ display:none; }

.page-narrow{ padding:80px 24px; max-width:760px; }
.page-narrow h1{ font-size:clamp(32px,5vw,48px); }
.page-narrow h3{ margin:32px 0 10px; font-size:19px; }
.page-narrow p{ color:var(--text-2); margin:0 0 14px; }
.page-meta{ color:var(--text-3) !important; margin:12px 0 34px !important; }

.booking-btn{ margin-bottom:18px; }

/* the inline success state that replaces the form after a submission */
.form-done{ text-align:center; padding:26px 0; }
.form-done .tick{ font-size:46px; line-height:1; margin-bottom:14px; }
.form-done p{ color:var(--text-2); margin:12px 0 0; }

/* ---------------------------------------------------------- official logo --
   The real logo is artwork on a solid black field. `screen` blending drops
   pure black to nothing, so the artwork sits on the page with no visible box
   around it — no transparent PNG required. */
img.is-raster{ mix-blend-mode:screen; }
.logo img.is-raster{ filter:none; }