/* ============================================
   WRENNON — Shared Design System
   ============================================ */

:root{
  --bg:#FAF7F2;
  --bg-raised:#F2EBE1;
  --bg-raised-2:#EAE0D1;
  --text:#2A1B10;
  --text-dim:#7C6952;
  --accent:#9C4A1F;
  --accent-dim:rgba(156,74,31,0.10);
  --accent-vivid:#C2571F;
  --gold:#C68C53;
  --gold-dim:rgba(198,140,83,0.18);
  --redline:#C2571F;
  --redline-dim:rgba(194,87,31,0.14);
  --espresso:#3B2415;
  --espresso-2:#2A1810;
  --cream:#F3E6D2;
  --ok:#6B7A3F;
  --line:#E3D2B0;
  --glass-bg:rgba(250,247,242,0.6);
  --glass-bg-strong:rgba(250,247,242,0.78);
  --glass-border:rgba(227,210,176,0.65);
  --shadow-soft:0 10px 28px -16px rgba(42,24,16,0.16);
  --shadow-lift:0 26px 52px -20px rgba(42,24,16,0.26);
  --gradient-brand:linear-gradient(135deg, var(--accent) 0%, var(--accent-vivid) 55%, var(--gold) 130%);
  --mono: 'JetBrains Mono', monospace;
  --serif: 'Big Shoulders Display', sans-serif;
  --sans: 'IBM Plex Sans', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap, .wrap-narrow{padding:0 20px;}}

body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(680px circle at 12% 8%, rgba(198,140,83,0.14), transparent 60%),
    radial-gradient(620px circle at 88% 28%, rgba(156,74,31,0.10), transparent 60%),
    radial-gradient(560px circle at 30% 92%, rgba(194,87,31,0.08), transparent 60%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background-image: radial-gradient(rgba(110,97,85,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 70%, transparent);
  pointer-events:none;
  z-index:0;
}

.cursor-glow{display:none;}

::selection{background:var(--accent); color:#F5F6F8;}

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

/* ---------- NAV ---------- */
nav{
  position:sticky; top:16px; z-index:50;
  display:flex; justify-content:center;
  padding:0 20px;
  pointer-events:none;
}
nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px; width:100%; max-width:1120px;
  padding:0 14px 0 22px;
  border-radius:999px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 16px -8px rgba(42,24,16,0.08);
  transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, border-color .35s ease;
  pointer-events:auto;
}
nav.is-scrolled .wrap{
  background:var(--glass-bg-strong);
  border-color:var(--glass-border);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:var(--shadow-lift);
}
.logo{font-family:var(--serif);font-style:normal;font-weight:700;font-size:31px;letter-spacing:0.01em;text-transform:uppercase;display:flex;align-items:center;gap:10px;color:var(--espresso);}
.logo-mark{flex-shrink:0;}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--text-dim);}
.nav-links a{transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--text);}
@media(max-width:860px){.nav-links{display:none;}}
.nav-item{position:relative;}
.nav-mega-trigger{
  display:flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--text-dim);
  transition:color .2s;
}
.nav-mega-trigger:hover, .nav-mega-trigger.active{color:var(--text);}
.nav-chev{transition:transform .25s ease;}
.nav-item.mega-open .nav-chev{transform:rotate(180deg);}
.nav-mega{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(6px);
  width:300px; padding:10px; border-radius:18px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--shadow-lift);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.nav-item.mega-open .nav-mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.nav-mega-link{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px;
  transition:background .18s ease;
}
.nav-mega-link:hover{background:var(--accent-dim);}
.nav-mega-link strong{display:block; font-size:13.5px; font-weight:600; color:var(--text); font-style:normal;}
.nav-mega-link em{display:block; font-size:11.5px; color:var(--text-dim); font-style:normal; margin-top:2px; line-height:1.4;}
.nav-mega-ico{color:var(--gold); font-size:7px; margin-top:6px; flex-shrink:0;}
@media(max-width:860px){.nav-item.has-mega{display:none;}}

.nav-cta{
  font-size:13px; font-family:var(--mono);
  border:1px solid var(--line); padding:9px 18px; border-radius:9px;
  transition:border-color .2s, color .2s;
  white-space:nowrap;
}
.nav-cta:hover{border-color:var(--accent); color:var(--accent);}
@media(max-width:860px){.nav-cta{display:none;}}
.nav-right{display:flex; align-items:center; gap:20px;}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:20px; height:1.5px; background:var(--text);}
@media(max-width:860px){.nav-toggle{display:flex;}}

.mobile-menu{
  display:none; flex-direction:column; gap:0;
  position:absolute; top:calc(100% + 10px); left:20px; width:calc(100% - 40px); z-index:49;
  background:rgba(250,246,239,0.92);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 24px 56px -16px rgba(42,24,16,0.3);
  overflow:hidden;
  pointer-events:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:16px 20px; border-top:1px solid var(--line); font-size:15px; color:var(--text-dim);}
.mobile-menu a:first-child{border-top:none;}
.mobile-menu a:hover{color:var(--text);}

.mobile-menu-backdrop{
  display:none; position:fixed; inset:0; z-index:45;
  background:rgba(21,16,12,0.10);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.mobile-menu-backdrop.open{display:block;}

@media(min-width:861px){
  .mobile-menu, .mobile-menu-backdrop{display:none !important;}
}

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-header{padding:90px 0 64px; position:relative; z-index:1; text-align:center; overflow:hidden;}
.hero-bg-decor{
  position:absolute; z-index:-1;
  top:-40px; right:-220px;
  width:900px; max-width:none;
  opacity:0.08;
  transform:rotate(-3deg);
  pointer-events:none;
}
@media (max-width:900px){
  .hero-bg-decor{display:none;}
}

/* ---------- HOME HERO: two-column layout with chat mockup ---------- */
.home-hero { overflow: visible; }
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:44px; align-items:center;
}
.hero-grid > *{min-width:0;}
.home-hero .hero-text{text-align:center;}
@media (min-width:960px){
  .home-hero{text-align:left; padding:110px 0 40px; overflow: visible;}
  .hero-grid{grid-template-columns:1fr 440px; gap:36px; align-items:center;}
  .home-hero .hero-text{text-align:left;}
  .home-hero .page-title, .home-hero .page-sub{margin-left:0; margin-right:0;}
  .home-hero .hero-actions{justify-content:flex-start;}
}

.hero-illustration{position:relative; width:100%; max-width:400px; margin:56px auto 64px; opacity:0; animation:mockupFadeIn .6s ease .15s both;}
@keyframes mockupFadeIn{from{opacity:0;}to{opacity:1;}}

.chat-card{
  width:100%; max-width:360px;
  background:var(--glass-bg-strong); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border); border-radius:20px;
  box-shadow:var(--shadow-lift);
  overflow:hidden; text-align:left; position:relative; z-index:2;
}
.chat-card-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--bg-raised);}
.chat-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-name{font-size:13px; font-weight:600; color:var(--text);}
.chat-status{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); margin-top:2px;}
.status-dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex-shrink:0; animation:statusPulse 2s ease infinite;}
@keyframes statusPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.chat-body{padding:16px; display:flex; flex-direction:column; gap:10px; height:340px; overflow:hidden; transition:opacity .3s ease;}
.chat-body.fade-out{opacity:0;}
.bubble{max-width:84%; font-size:12.5px; line-height:1.5; padding:9px 12px; border-radius:14px;}
.bubble-user{align-self:flex-end; background:var(--bg-raised); border-bottom-right-radius:4px;}
.bubble-agent{align-self:flex-start; background:var(--accent-dim); border:1px solid var(--line); border-bottom-left-radius:4px;}
.mono-chip{font-family:var(--mono); background:var(--bg-raised-2); border:1px solid var(--line); border-radius:3px; padding:1px 5px; font-size:11px; color:var(--accent);}
.bubble-enter{animation:bubbleIn .32s ease both;}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px) scale(.98);}to{opacity:1; transform:translateY(0) scale(1);}}
.bubble-typing{align-self:flex-start; background:var(--accent-dim); border:1px solid var(--line); border-bottom-left-radius:4px; padding:11px 14px; display:flex; align-items:center; gap:4px;}
.bubble-typing span{width:5px; height:5px; border-radius:50%; background:var(--text-dim); animation:typingBounce 1.1s ease infinite;}
.bubble-typing span:nth-child(2){animation-delay:.15s;}
.bubble-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0); opacity:.5;}30%{transform:translateY(-3px); opacity:1;}}
.chat-input{display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--line); font-size:12px; color:var(--text-dim); background:var(--bg-raised);}
.chat-input-icons{display:flex; align-items:center; gap:7px; flex-shrink:0;}
.chat-icon-btn{display:flex; color:var(--text-dim); opacity:0.75;}
.chat-icon-btn svg{width:15px; height:15px;}
.chat-input-placeholder{flex:1; min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap;}
.chat-input-placeholder.is-typing{color:var(--text);}
.chat-input-placeholder .type-cursor{display:inline-block; width:1px; height:12px; background:var(--accent); vertical-align:middle; margin-left:1px; animation:blink 1s step-end infinite;}
.chat-input-placeholder.is-recording{color:var(--redline); display:flex; align-items:center; gap:6px;}
.rec-dot{width:7px; height:7px; border-radius:50%; background:var(--redline); animation:recPulse 1s ease-in-out infinite; flex-shrink:0;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.chat-send{color:var(--accent); font-size:14px; flex-shrink:0;}

.bubble-voice{display:flex; align-items:center; gap:8px;}
.voice-play{width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--cream); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px;}
.bubble-user .voice-play{background:var(--espresso);}
.voice-wave{display:flex; align-items:center; gap:2px; height:16px;}
.voice-wave span{width:2px; border-radius:1px; background:currentColor; opacity:0.55;}
.voice-duration{font-family:var(--mono); font-size:10.5px; color:var(--text-dim); flex-shrink:0;}

.bubble-photo{padding:6px; max-width:62%;}
.bubble-photo img{display:block; width:100%; border-radius:10px;}
.bubble-photo-caption{padding:6px 5px 2px; font-size:12.5px; line-height:1.4;}
@media (prefers-reduced-motion: reduce){
  .bubble-enter{animation:none;}
}

.hero-bird{
  position:absolute; top:-38px; right:6px; width:100px; height:100px; z-index:3;
  filter:drop-shadow(0 16px 18px rgba(42,24,16,0.22));
  animation:birdFloat 5s ease-in-out infinite;
}
@keyframes birdFloat{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-10px) rotate(2deg);}}

.float-chip{
  position:absolute; background:var(--bg); border:1px solid var(--line); border-radius:20px;
  padding:8px 14px; font-family:var(--mono); font-size:12px; color:var(--text);
  box-shadow:0 14px 26px -12px rgba(42,24,16,0.18); z-index:2; white-space:nowrap;
}
.chip-1{left:-26px; top:112px; animation:chip1Float 6s ease-in-out infinite;}
.chip-2{right:-42px; top:272px; animation:chip2Float 7s ease-in-out infinite 1s;}
.chip-3{left:14px; bottom:-48px; animation:chip3Float 6.5s ease-in-out infinite .5s;}
@keyframes chip1Float{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-8px) rotate(-6deg);}}
@keyframes chip2Float{0%,100%{transform:translateY(0) rotate(4deg);}50%{transform:translateY(-8px) rotate(4deg);}}
@keyframes chip3Float{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-8px) rotate(-3deg);}}

@media (max-width:480px){
  .hero-bird{width:76px; height:76px; top:-26px; right:0;}
  .float-chip{font-size:11px; padding:6px 11px;}
  .chip-1{left:-10px;}
  .chip-2{right:-10px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-illustration{animation:none; opacity:1;}
  .hero-bird, .chip-1, .chip-2, .chip-3, .status-dot{animation:none;}
}
.eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:0.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:1px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:6px 12px 6px 10px; margin-bottom:24px;
}
.eyebrow::before{content:"❯"; color:var(--gold); margin-right:8px; background:none; width:auto; height:auto; box-shadow:none; animation:none;}
.eyebrow::after{content:"▌"; color:var(--accent); margin-left:8px; animation:blink 1.1s steps(1) infinite;}

.page-title{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(36px, 5.5vw, 68px);
  line-height:0.96; letter-spacing:-0.005em;
  max-width:820px; margin:0 auto;
}
.page-title em, .page-sub em, .section-title em, .section-sub em, .eyebrow em, .section-eyebrow em, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {color:var(--redline); font-style:normal; font-weight:700;}
.line2{display:inline-block; white-space:nowrap; max-width:100%;}
.page-sub{
  margin:20px auto 0; max-width:560px;
  font-size:17px; color:var(--text-dim); line-height:1.65;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--espresso); color:var(--cream); font-weight:600; font-size:14px;
  padding:14px 26px; border-radius:9px; transition:transform .15s, box-shadow .15s, background .15s;
  display:inline-block; border:none; cursor:pointer; font-family:var(--sans);
}
.btn-primary:hover{transform:translateY(-1px); background:var(--espresso-2); box-shadow:0 10px 24px rgba(42,24,16,0.28);}

.btn-cta-bold{
  background:var(--gradient-brand); color:var(--cream); font-weight:700; font-size:14.5px;
  padding:14px 28px; border-radius:10px; transition:transform .15s, box-shadow .15s, filter .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; cursor:pointer; font-family:var(--sans);
  box-shadow:0 10px 26px -8px rgba(156,74,31,0.5);
}
.btn-cta-bold:hover{transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 18px 36px -8px rgba(156,74,31,0.6);}

.nav-cta.btn-cta-bold{
  padding:9px 18px; font-size:13.5px;
}
.btn-ghost{
  border:1px solid var(--line); font-size:14px; padding:14px 26px; border-radius:9px;
  color:var(--text); transition:border-color .2s; display:inline-block;
}
.btn-ghost:hover{border-color:var(--text-dim);}
.hero-actions, .cta-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- SECTION GENERIC ---------- */
section{position:relative; z-index:1;}
.section{padding:128px 0;}
.section-tight{padding:72px 0;}
@media(max-width:640px){.section{padding:76px 0;}}

/* Normalize gaps between adjacent sections */
.section + .section,
.section-tight + .section,
.section + .section-tight,
.section-tight + .section-tight {
  padding-top: 0;
}
.section-head{max-width:600px; margin:0 auto 64px; text-align:center;}
.section-eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:0.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:1px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:5px 10px 5px 8px; margin-bottom:16px;
}
.section-eyebrow::before{content:"❯"; color:var(--gold); margin-right:7px;}
.section-eyebrow::after{content:"▌"; color:var(--accent); margin-left:6px; animation:blink 1.1s steps(1) infinite;}
.section-title{font-family:var(--serif); font-weight:800; letter-spacing:-0.003em; font-size:clamp(26px, 3.2vw, 40px); line-height:1.03;}
.section-sub{margin-top:16px; color:var(--text-dim); font-size:16px; max-width:520px; margin-left:auto; margin-right:auto;}

hr.divider{border:none; border-top:1px solid var(--line); margin:0;}

/* ---------- TERMINAL (light window-chrome, dark editor pane inside) ---------- */
.terminal-section{background:var(--bg-raised);}
.terminal{
  --t-bg:var(--espresso-2); --t-text:var(--cream); --t-dim:#A6906F;
  background:var(--glass-bg-strong); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:18px;
  overflow:hidden; position:relative; margin-left:auto; margin-right:auto; text-align:left;
  box-shadow:var(--shadow-lift);
  max-width:680px;
}
.terminal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--glass-border); background:transparent;
}
.terminal-bar-id{display:flex; align-items:center; gap:9px; min-width:0;}
.terminal-mark{display:flex; flex-shrink:0; filter:drop-shadow(0 2px 3px rgba(42,24,16,0.18));}
.terminal-label{
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.terminal-label .t-prompt{color:var(--gold); margin-right:6px;}
.terminal-status{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text-dim);
}
.terminal-status .status-dot{width:6px; height:6px;}
.terminal-body{
  padding:22px 24px; font-family:var(--mono); font-size:13.5px; line-height:1.85;
  height:216px; overflow:hidden; transition:opacity .3s ease;
  color:var(--t-text); background:var(--t-bg);
}
@media(max-width:480px){
  .terminal-status span:last-child{display:none;}
  .terminal-body{font-size:12px; padding:18px 16px; height:210px;}
}
.terminal-body.fade-out{opacity:0;}
.t-line{color:var(--t-dim);}
.t-prompt-line{display:flex; align-items:baseline; gap:6px;}
.t-host{color:var(--gold); opacity:0.95; flex-shrink:0; font-weight:600;}
.t-typed{color:var(--t-text); white-space:pre-wrap; word-break:break-word;}
.t-accent{color:var(--gold);}
.t-ok{color:var(--ok);}
.cursor{display:inline-block;width:7px;height:15px;background:var(--gold);vertical-align:middle;animation:blink 1s step-end infinite;margin-left:2px;}
@keyframes blink{50%{opacity:0;}}

/* ---------- PROBLEM ROWS ---------- */
.problem-row{
  display:grid; grid-template-columns:80px 1fr; gap:24px;
  padding:32px 0; border-top:1px solid var(--line);
}
.problem-row:last-child{border-bottom:1px solid var(--line);}
.problem-tag{font-family:var(--mono); font-size:13px; color:var(--text-dim);}
.problem-text{font-size:17px;}
.problem-text strong{color:var(--text); font-weight:500;}

/* ---------- FEATURE GRID ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){.feature-grid{grid-template-columns:1fr;}}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.feature-grid.cols-2{grid-template-columns:1fr;}}
.feature-card{
  position:relative;
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:18px; padding:32px;
  box-shadow:var(--shadow-soft);
}
.feature-icon{
  width:44px;height:44px; border:1px solid var(--line); border-radius:12px; background:var(--bg-raised);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:22px;
}
.feature-card h3{font-size:17px; font-weight:600; margin-bottom:10px;}
.feature-card p{font-size:14.5px; color:var(--text-dim);}

.capability-group-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 32px 0;
  overflow: hidden;
  white-space: nowrap;
}
.capability-group-title::before {
  content: "[ ";
  color: var(--text-dim);
}
.capability-group-title::after {
  content: " ]";
  color: var(--text-dim);
}
.capability-group-title:not(:first-of-type){margin-top: 56px;}
.live-badge, .soon-badge{
  position:absolute; top:20px; right:20px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px;
}
.live-badge{color:var(--ok); background:rgba(107,122,63,0.12); border:1px solid rgba(107,122,63,0.3);}
.soon-badge{color:var(--gold); background:var(--gold-dim); border:1px solid rgba(198,140,83,0.4);}

/* ---------- PROCESS ---------- */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media(max-width:860px){.process{grid-template-columns:1fr; gap:48px;}}
.process-tag{font-family:var(--serif); font-style:normal; font-weight:700; font-size:48px; color:var(--text-dim); opacity:0.35; line-height:1; margin-bottom:18px; display:block;}
.process-step h3{font-size:18px; font-weight:600; margin-bottom:10px;}
.process-step p{font-size:14.5px; color:var(--text-dim);}

/* ---------- USE CASE LIST ---------- */
.usecase-list{display:flex; flex-direction:column;}
.usecase{
  display:grid; grid-template-columns:200px 1fr;
  gap:32px; padding:28px 0; border-top:1px solid var(--line);
  align-items:baseline;
}
.usecase:last-child{border-bottom:1px solid var(--line);}
@media(max-width:640px){.usecase{grid-template-columns:1fr; gap:8px;}}
.usecase-name{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  display:inline-flex; align-items:center;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:5px 10px 5px 8px;
}
.usecase-name::before{content:"❯"; color:var(--gold); margin-right:7px;}
.usecase-desc{font-size:16px; color:var(--text-dim);}
.usecase-desc strong{color:var(--text); font-weight:500;}

/* ---------- CARDS (use-cases / blog / careers) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:760px){.card-grid{grid-template-columns:1fr;}}
.info-card{
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:18px; padding:32px;
  box-shadow:var(--shadow-soft);
  transition:border-color .2s, background .2s, box-shadow .25s ease;
}
.info-card.linkable:hover{border-color:var(--accent); background:var(--glass-bg-strong); box-shadow:var(--shadow-lift);}
.info-card .tag{
  font-family:var(--mono); font-size:11px; color:var(--accent);
  letter-spacing:0.02em; text-transform:uppercase;
  display:inline-flex; align-items:center;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:5px 10px 5px 8px; margin-bottom:16px;
}
.info-card .tag::before{content:"❯"; color:var(--gold); margin-right:7px;}
.info-card h3{font-size:19px; font-weight:600; margin-bottom:10px;}
.info-card p{font-size:14.5px; color:var(--text-dim);}
.info-card .meta{margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--text-dim);}
.info-card .card-icon{position:absolute; top:32px; right:32px; width:84px; height:84px; opacity:0.8;}
.info-card .card-icon svg{width:100%; height:100%; display:block;}


/* ---------- PRICING ---------- */
.pricing-toggle-wrap{
  display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 56px;
}
.toggle-label{font-size:16px; font-weight:600; color:var(--text-dim); transition:color 0.3s; cursor:pointer;}
.toggle-label.active{color:var(--text);}
.discount-badge{
  display:inline-block; font-size:11px; font-family:var(--mono); color:var(--accent);
  background:var(--accent-dim); border:1px solid var(--line); border-radius:12px; padding:2px 8px; margin-left:6px; vertical-align:middle;
}
.toggle-switch{position:relative; display:inline-block; width:52px; height:28px;}
.toggle-switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; inset:0; background-color:var(--line); transition:0.4s; border-radius:34px;}
.slider:before{position:absolute; content:""; height:20px; width:20px; left:4px; bottom:4px; background-color:var(--text); transition:0.4s; border-radius:50%;}
input:checked + .slider{background-color:var(--accent);}
input:checked + .slider:before{background-color:#FFF; transform:translateX(24px);}

.pricing-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:20px;
}
@media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:640px){.pricing-grid{grid-template-columns:1fr;}}

.pricing-card{
  border:1px solid var(--glass-border); border-radius:20px; padding:36px 28px;
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
}
.pricing-card.popular{border-color:var(--accent); background:var(--glass-bg-strong); box-shadow:var(--shadow-lift); position:relative;}
.popular-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:var(--cream); font-family:var(--mono); font-size:11px; font-weight:600;
  padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:0.05em;
  white-space:nowrap;
}
.pricing-card .price-amount{
  font-family:var(--serif); font-size:42px; font-style:normal; font-weight:700; color:var(--text); margin:18px 0 2px;
  display:flex; align-items:baseline; gap:4px;
}
.price-period{font-family:var(--sans); font-size:16px; font-weight:500; color:var(--text-dim);}
.price-cursor{
  font-family:var(--mono); font-size:22px; line-height:1; color:var(--accent);
  margin-left:2px; opacity:1; animation:none; /* static until this card is hovered */
}

.pricing-card .section-eyebrow::after {
  opacity: 0;
  animation: none;
}
.pricing-card:hover .section-eyebrow::after {
  opacity: 1;
  animation: blink 1.1s steps(1) infinite;
}

.plan-chats{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px;}
.pricing-card p.billing-period{color:var(--text-dim); font-size:13.5px; margin-bottom:24px; min-height:20px;}

.pricing-list{list-style:none; margin-top:24px; margin-bottom:32px; display:flex; flex-direction:column; gap:14px; flex-grow:1;}
.pricing-list li{font-size:14.5px; color:var(--text-dim); padding-left:24px; position:relative;}
.pricing-list li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-family:var(--mono);}
.pricing-list li.overage{color:var(--text); font-weight:500;}
.pricing-list li.overage::before{content:"❯"; color:var(--accent);}

.enterprise-card{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
  background:var(--bg); border-color:var(--line); padding:44px; margin-top:20px;
}
@media(max-width:860px){.enterprise-card{grid-template-columns:1fr; text-align:center; padding:32px;}}
.enterprise-card .pricing-list{margin:0; flex-grow:0;}
.enterprise-card .btn-primary{margin-top:24px;}
.enterprise-info{display:flex; flex-direction:column;}
.enterprise-info h3{font-family:var(--serif); font-size:30px; font-weight:700; color:var(--text); margin-bottom:12px;}
.enterprise-info p{color:var(--text-dim); font-size:15px; margin-bottom:24px;}

/* ---------- TEAM / VALUES ---------- */
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:860px){.values-grid{grid-template-columns:1fr;}}
.value-item .process-tag{font-size:36px; opacity:0.5;}

/* ---------- FORM ---------- */
.form-grid{display:flex; flex-direction:column; gap:22px; max-width:560px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:560px){.form-row{grid-template-columns:1fr;}}
.field label{
  display:block; font-family:var(--mono); font-size:12px; color:var(--text-dim);
  letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-raised); border:1px solid var(--line);
  border-radius:9px; padding:13px 14px; color:var(--text); font-family:var(--sans);
  font-size:14.5px; transition:border-color .2s;
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent);
}
.field input::placeholder, .field textarea::placeholder{color:#A79B8C;}
.form-note{font-size:13px; color:var(--text-dim); margin-top:4px;}
.form-success{
  display:none; border:1px solid var(--ok); background:rgba(63,122,87,0.08);
  border-radius:12px; padding:24px; font-size:14.5px; color:var(--ok); font-family:var(--mono);
}
.form-success.show{display:block;}

/* ---------- CONTACT INFO ROWS ---------- */
.contact-info{display:flex; flex-direction:column; gap:24px;}
.contact-info-item .tag{
  font-family:var(--mono); font-size:11px; color:var(--accent);
  letter-spacing:0.02em; text-transform:uppercase;
  display:inline-flex; align-items:center;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:5px 10px 5px 8px; margin-bottom:6px;
}
.contact-info-item .tag::before{content:"❯"; color:var(--gold); margin-right:7px;}
.contact-info-item p{font-size:15px; color:var(--text-dim);}

/* ---------- CTA BLOCK ---------- */
.cta-section{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:72px 48px; text-align:center; margin:0 auto;
  background-image: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(168,90,50,0.15), transparent 70%);
}
@media(max-width:640px){.cta-section{padding:48px 24px;}}
.cta-section h2{font-family:var(--serif); font-weight:700; letter-spacing:0.002em; font-size:clamp(26px,3.4vw,38px); margin-bottom:18px;}
.cta-section p{color:var(--text-dim); max-width:440px; margin:0 auto 36px;}
.cta-actions{justify-content:center;}

/* ---------- LOGOS STRIP / PLATFORM ROW ---------- */
.logos-section{padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; z-index:1; overflow:hidden;}
.logos-label{
  font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:22px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%;
}
.logos-label::before{content:"❯"; color:var(--gold);}
.logos-label::after{content:"▌"; color:var(--accent); animation:blink 1.1s steps(1) infinite;}
.platform-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;}
.platform-item{
  font-family:var(--mono); font-size:13px; color:var(--text-dim);
  border:1px solid var(--line); border-radius:20px; padding:8px 18px;
  transition:border-color .2s, color .2s;
}
.platform-item:hover{border-color:var(--accent); color:var(--text);}

/* ---------- MARQUEE (trust / industry strips) ---------- */
.marquee-viewport{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.marquee-viewport + .marquee-viewport{margin-top:14px;}
.marquee-track{display:flex; gap:12px; width:max-content; animation:marqueeScroll 32s linear infinite;}
.marquee-track.reverse{animation-direction:reverse; animation-duration:38s;}
.marquee-viewport:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-pill{
  font-family:var(--mono); font-size:13px; color:var(--text-dim); white-space:nowrap;
  border:1px solid var(--glass-border); border-radius:20px; padding:8px 18px;
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  background:var(--glass-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .2s, color .2s, background .2s, transform .2s ease;
}
.marquee-pill:hover{border-color:var(--accent); color:var(--text); background:var(--glass-bg-strong); transform:translateY(-2px);}
.marquee-pill .dot{width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.industry-row{margin-top:14px;}
.industry-row .marquee-pill{border-style:dashed;}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .marquee-viewport{overflow-x:auto;}
}

/* ---------- VIDEO SHOWCASE ---------- */
.video-frame{
  position:relative; max-width:920px; margin:0 auto; border-radius:24px; overflow:hidden;
  border:1px solid var(--glass-border); background:var(--glass-bg-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  aspect-ratio:16/9; box-shadow:var(--shadow-lift);
}
.product-video{width:100%; height:100%; object-fit:cover; display:block; background:var(--espresso);}
.video-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg, var(--bg-raised) 0%, var(--bg-raised-2) 100%);
  overflow:hidden;
}
.video-fallback-glow{
  position:absolute; inset:-20%; z-index:0;
  background:
    radial-gradient(380px circle at 25% 30%, var(--gold-dim), transparent 65%),
    radial-gradient(340px circle at 75% 70%, var(--accent-dim), transparent 65%);
  animation: ambientDrift 14s ease-in-out infinite;
  filter:blur(30px);
}
.video-fallback-play{
  position:relative; z-index:1;
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:var(--cream); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(156,74,31,0.5);
  transition:transform .2s ease;
}
.video-fallback-play:hover{transform:scale(1.08);}
.video-fallback-text{position:relative; z-index:1; font-size:14px; color:var(--text-dim); font-family:var(--mono);}
.video-fallback .btn-ghost{position:relative; z-index:1;}
@media (prefers-reduced-motion: reduce){.video-fallback-glow{animation:none;}}

/* ---------- STAT BENTO ---------- */
.stat-bento{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media(max-width:760px){.stat-bento{grid-template-columns:1fr;}}
.stat-card{
  position:relative; overflow:hidden;
  border:1px solid var(--glass-border); border-radius:20px; padding:32px 26px;
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
}
.stat-card::before{
  content:''; position:absolute; top:-40%; right:-30%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.stat-card:nth-child(2)::before{background:radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);}
.stat-number{
  font-family:var(--serif); font-weight:800; font-size:clamp(40px,5vw,56px); line-height:1;
  letter-spacing:-0.01em; position:relative; z-index:1;
  background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{font-size:14px; color:var(--text-dim); margin-top:10px; max-width:220px; position:relative; z-index:1;}

/* ---------- FEATURE BENTO (gradient glow cards) ---------- */
.feature-grid.bento{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
@media(max-width:900px){.feature-grid.bento{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:560px){.feature-grid.bento{grid-template-columns:1fr;}}
.feature-grid.bento .feature-card{position:relative; overflow:hidden;}
.feature-grid.bento .feature-card.span-2{grid-column:span 2;}
@media(max-width:560px){.feature-grid.bento .feature-card.span-2{grid-column:span 1;}}
.feature-grid.bento .feature-card::after{
  content:''; position:absolute; bottom:-50%; left:-20%; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-dim) 0%, transparent 72%);
  filter:blur(6px); opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.feature-grid.bento .feature-card:hover::after{opacity:1;}

/* ---------- INTEGRATIONS SHOWCASE GRID ---------- */
.integrations-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
@media(max-width:860px){.integrations-grid{grid-template-columns:repeat(2, 1fr);}}
.integration-card{
  border:1px solid var(--glass-border); border-radius:18px; padding:22px 18px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--glass-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
  transition:border-color .2s, background .2s, transform .22s ease, box-shadow .25s ease;
}
.integration-card:hover{
  transform:translateY(-4px); border-color:var(--accent);
  background:var(--glass-bg-strong); box-shadow:var(--shadow-lift);
}
.integration-mark{
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(168, 90, 50, 0.14); color:var(--accent);
  flex-shrink:0; box-sizing:border-box;
  transition:transform .3s ease, background-color .2s ease;
}
.integration-mark svg{
  width:24px !important; height:24px !important;
  max-width:24px !important; max-height:24px !important;
  display:block !important; margin:0 auto !important;
  transition:transform .3s ease;
}
.integration-card:hover .integration-mark{transform:rotate(-6deg) scale(1.08); background:rgba(168, 90, 50, 0.22);}
.integration-name{font-size:14.5px; font-weight:600; color:var(--text);}
.integration-desc{font-size:12.5px; color:var(--text-dim); line-height:1.5;}
.integrations-more{grid-column:1/-1; text-align:center; margin-top:24px; font-family:var(--mono); font-size:14px; color:var(--text-dim);}
.integrations-more a{color:var(--accent); font-weight:600; border-bottom:1px solid rgba(229, 137, 85, 0.4); padding-bottom:2px; transition:border-color 0.2s, color 0.2s;}
.integrations-more a:hover{border-color:var(--accent); color:#fff;}

/* ---------- BLOG POST ---------- */
.post-body{max-width:640px; margin:0 auto;}
.post-body p{font-size:17px; color:var(--text-dim); margin-bottom:22px; line-height:1.75;}
.post-body h2{font-family:var(--serif); font-weight:700; letter-spacing:0.005em; font-size:26px; margin:48px 0 16px; color:var(--text);}
.post-body strong{color:var(--text); font-weight:600;}
.post-meta{display:flex; gap:16px; font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:8px;}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(135deg, var(--espresso-2) 0%, #120a07 100%); border-top:1px solid rgba(250, 247, 242, 0.1); padding:56px 0 32px; position:relative; z-index:1;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px;}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr; gap:32px 24px;}}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px 5px 10px;
  margin-bottom: 20px;
  position: relative;
  transition: all 0.25s ease;
}

.footer-col h4 em {
  font-style: normal;
  color: inherit;
}

.footer-col h4::before {
  content: "❯";
  color: var(--gold);
  margin-right: 7px;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
}

.footer-col h4::after {
  content: "▌";
  color: var(--accent);
  margin-left: 6px;
  animation: none; /* Static by default */
  opacity: 0.85;
}

.footer-col:hover h4::after,
.footer-col h4:hover::after {
  animation: blink 1.1s steps(1) infinite; /* Blinks on mouse hover */
  opacity: 1;
}

.footer-col:hover h4 {
  border-color: rgba(243, 230, 210, 0.22);
}
.footer-col a{display:block; font-size:14px; color:#bba998; margin-bottom:12px; transition:color .2s;}
.footer-col a:hover{color:var(--cream);}
.footer-desc{font-size:14px; color:var(--text-dim); max-width:260px; margin-top:14px;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-top:32px; border-top:1px solid var(--line);
}
.foot-copy{font-size:13px; color:var(--text-dim); font-family:var(--mono);}
.foot-legal{display:flex; gap:24px; font-size:13px; color:var(--text-dim);}
.foot-legal a:hover{color:var(--text);}
.social-icons{display:flex; gap:18px; align-items:center;}
.social-icons a{
  color:var(--cream) !important; opacity:0.85; display:flex; align-items:center; justify-content:center;
  width:auto !important; height:auto !important; border-radius:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; padding:0 !important;
  transition:opacity 0.2s ease, transform 0.2s ease !important;
}
.social-icons a:hover{opacity:1; color:var(--cream) !important; background:transparent !important; border:none !important; transform:scale(1.18) !important;}
.social-icons svg{width:22px !important; height:22px !important; display:block;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.21,.6,.35,1), transform .5s cubic-bezier(.21,.6,.35,1);
}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal:nth-child(1){transition-delay:0ms;}
.reveal:nth-child(2){transition-delay:90ms;}
.reveal:nth-child(3){transition-delay:180ms;}
.reveal:nth-child(4){transition-delay:270ms;}
.reveal:nth-child(5){transition-delay:360ms;}
.reveal:nth-child(6){transition-delay:450ms;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- CARD HOVER LIFT ---------- */
.feature-card, .info-card.linkable{transition:border-color .2s, background .2s, transform .22s ease, box-shadow .25s ease;}
.feature-card:hover, .feature-card:focus-visible{transform:translateY(-4px); background:var(--glass-bg-strong); border-color:var(--accent); box-shadow:var(--shadow-lift);}
.feature-card{outline:none;}
.info-card.linkable:hover{transform:translateY(-4px);}
.pricing-card{transition:border-color .2s, transform .25s ease, box-shadow .25s ease;}
.pricing-card:hover{border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-lift);}
.usecase{transition:padding-left .25s ease;}
.usecase:hover{padding-left:8px;}

/* ---------- FEATURE ICON MICRO-INTERACTIONS ---------- */
.feature-icon{transition:border-color .2s, color .2s;}
.feature-card:hover .feature-icon, .feature-card:focus-visible .feature-icon{border-color:var(--accent); color:var(--gold);}
@keyframes iconSlideRight{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}
@keyframes iconRotateGear{0%{transform:rotate(0deg);}100%{transform:rotate(180deg);}}
@keyframes iconSlideSwap{0%,100%{transform:translateX(-3px);}50%{transform:translateX(3px);}}
@keyframes iconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
@keyframes iconShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px);}75%{transform:translateX(2px);}}
@keyframes iconSpinOnce{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.feature-card:hover .icon-catalog, .feature-card:focus-visible .icon-catalog{animation:iconSlideRight .45s ease;}
.feature-card:hover .icon-order, .feature-card:focus-visible .icon-order{animation:iconRotateGear .45s ease;}
.feature-card:hover .icon-checkout, .feature-card:focus-visible .icon-checkout{animation:iconSlideSwap .5s ease;}
.feature-card:hover .icon-brand, .feature-card:focus-visible .icon-brand{animation:iconPulse .45s ease;}
.feature-card:hover .icon-visibility, .feature-card:focus-visible .icon-visibility{animation:iconShake .4s ease;}
.feature-card:hover .icon-improves, .feature-card:focus-visible .icon-improves{animation:iconSpinOnce .45s ease;}

/* ---------- ROTATING HEADLINE WORD ---------- */
.rotating-word{display:inline-block; overflow:visible; vertical-align:top; height:1.08em; line-height:1.08em;}
.rw-inner{display:inline-block; transform:translateY(0); opacity:1; transition:transform .8s ease, opacity .8s ease;}
.rw-inner.roll-out{transform:translateY(15px); opacity:0;}
.rw-inner.roll-in-start{transform:translateY(-15px); opacity:0; transition:none;}

/* ---------- HERO AMBIENT GLOW (home hero only) ---------- */
.hero-canvas{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  pointer-events:none; opacity:0.55;
}
@media (max-width:768px){.hero-canvas{display:none;}}
.hero-ambient{
  position:absolute; z-index:-2; inset:-15% -10%;
  pointer-events:none; filter:blur(60px);
  background:
    radial-gradient(460px circle at 22% 20%, rgba(198,140,83,0.35), transparent 65%),
    radial-gradient(420px circle at 78% 60%, rgba(156,74,31,0.22), transparent 65%);
  animation: ambientDrift 16s ease-in-out infinite;
}
@keyframes ambientDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(3%,-4%) scale(1.06);}
  66%{transform:translate(-4%,3%) scale(0.96);}
}

@media (prefers-reduced-motion: reduce){
  .feature-icon, .icon-catalog, .icon-order, .icon-checkout, .icon-brand, .icon-visibility, .icon-improves{animation:none !important;}
  .hero-ambient{animation:none;}
  .rw-inner{transition:none;}
}
@media (max-width:768px){
  .hero-ambient{display:none;}
}

/* ---------- TERMINAL SCAN SWEEP (info-card / feature-card hover) ---------- */
.info-card, .feature-card{position:relative; overflow:hidden;}
.info-card::after, .feature-card::after{
  content:""; position:absolute; top:0; left:-45%; width:35%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(176,141,87,0.08), rgba(168,90,50,0.06), transparent);
  opacity:0; pointer-events:none; transform:translateX(0);
}
.info-card.linkable:hover::after, .info-card.linkable:focus-visible::after,
.feature-card:hover::after, .feature-card:focus-visible::after{
  animation:terminalSweep .85s ease;
}
@keyframes terminalSweep{
  0%{opacity:0; transform:translateX(0);}
  12%{opacity:1;}
  88%{opacity:1;}
  100%{opacity:0; transform:translateX(340%);}
}

/* ---------- TERMINAL CHIPS: blinking cursor + glow on interaction ---------- */
.tag, .usecase-name{transition:border-color .2s, color .2s;}
.tag::after, .usecase-name::after{
  content:"▌"; color:var(--accent); margin-left:6px; opacity:0;
  transition:opacity .2s ease; display:inline-block;
}
.info-card:hover .tag::after, .info-card:focus-visible .tag::after,
.contact-info-item:hover .tag::after,
.usecase:hover .usecase-name::after{
  opacity:1; animation:blink 1s step-end infinite;
}
.info-card.linkable:hover .tag, .info-card.linkable:focus-visible .tag{
  border-color:var(--accent); color:var(--gold);
}
.usecase:hover .usecase-name{border-color:var(--accent); color:var(--gold);}

/* ---------- PROCESS STEP NUMBERS: terminal-style hover glow ---------- */
.process-tag{transition:color .25s ease, transform .25s ease;}
.value-item:hover .process-tag, .process-step:hover .process-tag{
  color:var(--accent); transform:scale(1.08);
}

@media (prefers-reduced-motion: reduce){
  .info-card::after, .feature-card::after{animation:none !important; display:none;}
  .tag::after, .usecase-name::after{animation:none !important;}
  .status-dot{animation:none;}
  .hero-mockup{animation:none; opacity:1;}
}

/* ---------- LIVE CHAT WIDGET (demo) ---------- */
.chat-widget{position:fixed; bottom:22px; right:22px; z-index:200; font-family:var(--sans);}
.chat-widget-launcher{
  position:relative; width:56px; height:56px; border-radius:50%; background:var(--espresso); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 32px -10px rgba(42,24,16,0.45);
  transition:transform .18s ease;
}
.chat-widget-launcher:hover{transform:scale(1.06);}
.chat-widget-launcher-pulse{
  position:absolute; inset:0; border-radius:50%; background:var(--espresso); opacity:.45;
  animation:launcherPulse 2.6s ease-out infinite; pointer-events:none;
}
@keyframes launcherPulse{0%{transform:scale(1); opacity:.4;}100%{transform:scale(1.7); opacity:0;}}
.chat-widget-panel{
  position:absolute; bottom:70px; right:0; width:320px; max-width:calc(100vw - 44px);
  background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 34px 64px -16px rgba(42,24,16,0.32);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.chat-widget-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.chat-widget-head{display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--espresso); color:var(--cream);}
.chat-widget-head .chat-avatar{background:var(--cream);}
.chat-widget-head .chat-name{color:var(--cream); font-size:13px; font-weight:600;}
.chat-widget-head .chat-status{color:#C9AF8C; font-size:10.5px; display:flex; align-items:center; gap:6px; margin-top:2px;}
.chat-widget-close{margin-left:auto; background:none; border:none; color:var(--cream); font-size:15px; cursor:pointer; opacity:.75; flex-shrink:0;}
.chat-widget-close:hover{opacity:1;}
.chat-widget-body{padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto;}
.chat-widget-body .bubble{max-width:88%;}
.chat-widget-input{display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:10px 14px;}
.chat-widget-input input{flex:1; min-width:0; border:none; background:none; outline:none; font-size:13px; color:var(--text); font-family:var(--sans);}
.chat-widget-input input::placeholder{color:var(--text-dim);}
.chat-widget-input button{background:none; border:none; color:var(--accent); font-size:16px; cursor:pointer; flex-shrink:0;}
@media (max-width:480px){
  .chat-widget{bottom:14px; right:14px;}
  .chat-widget-panel{right:-6px;}
}
@media (prefers-reduced-motion: reduce){
  .chat-widget-launcher-pulse{display:none;}
}

/* ---------- ROI CALCULATOR ---------- */
.calculator-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
@media(max-width: 860px) { .calculator-grid { grid-template-columns: 1fr; gap: 48px; } }
.calc-inputs { display: flex; flex-direction: column; gap: 28px; }
.calc-results { position: sticky; top: 100px; }
.results-card { background: linear-gradient(150deg, #FFFFFF 0%, var(--bg-raised) 100%); border: 1px solid var(--line); border-radius: 18px; padding: 56px; box-shadow: 0 32px 64px -20px rgba(42,24,16,0.12); position: relative; overflow: hidden; }
.results-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 70%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%239C4A1F' stop-opacity='0.12'/%3E%3Cstop offset='100%25' stop-color='%239C4A1F' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='5' y='80' width='8' height='20' fill='url(%23g)' rx='2'/%3E%3Crect x='18' y='65' width='8' height='35' fill='url(%23g)' rx='2'/%3E%3Crect x='31' y='55' width='8' height='45' fill='url(%23g)' rx='2'/%3E%3Crect x='44' y='50' width='8' height='50' fill='url(%23g)' rx='2'/%3E%3Crect x='57' y='35' width='8' height='65' fill='url(%23g)' rx='2'/%3E%3Crect x='70' y='20' width='8' height='80' fill='url(%23g)' rx='2'/%3E%3Crect x='83' y='5' width='8' height='95' fill='url(%23g)' rx='2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.results-card > * { position: relative; z-index: 1; }
.results-title { font-family: var(--serif); font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.results-subtitle { font-size: 14.5px; color: var(--text-dim); margin-bottom: 32px; line-height: 1.5; }
.main-result { font-family: var(--serif); font-size: clamp(36px, 9vw, 56px); font-weight: 700; color: var(--text); margin-bottom: 32px; line-height: 1; }
.secondary-results { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; }
.result-item { display: flex; justify-content: space-between; align-items: center; }
.result-label { font-size: 14.5px; color: var(--text-dim); }
.result-value { font-family: var(--mono); font-weight: 500; color: var(--text); }
.range-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.range-val-badge { background: var(--espresso); color: var(--cream); padding: 4px 10px; border-radius: 20px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.calc-range { width: 100%; appearance: none; background: transparent; margin: 12px 0; }
.calc-range::-webkit-slider-runnable-track { width: 100%; height: 6px; background: var(--line); border-radius: 4px; }
.calc-range::-webkit-slider-thumb { appearance: none; height: 24px; width: 24px; border-radius: 50%; background: var(--accent); margin-top: -9px; cursor: pointer; box-shadow: 0 2px 6px rgba(156,74,31,0.4); }
.calc-range:focus::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-input { width: 100%; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px; color: var(--text); font-family: var(--mono); font-size: 14.5px; transition: border-color .2s; margin-top: 8px; }
.calc-input:focus { outline: none; border-color: var(--accent); }
.input-with-prefix { position: relative; display: flex; align-items: center; }
.input-with-prefix .prefix { position: absolute; left: 14px; color: var(--text-dim); font-family: var(--mono); top: 50%; transform: translateY(-50%); margin-top: 4px; }
.input-with-prefix .calc-input { padding-left: 28px; }
.input-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }

/* ---------- ROI MODAL & REFINED GRID ---------- */
.secondary-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 16px; margin-bottom: 32px; }
.result-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.result-box .result-label { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.result-box .result-value { font-family: var(--serif); font-weight: 700; font-size: 32px; color: var(--text); }
.methodology-trigger-wrap { font-size: 14.5px; color: var(--text-dim); margin-top: 24px; }
.methodology-btn { background: none; border: none; color: var(--text-dim); font-weight: 600; text-decoration: none; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; transition: color 0.2s; }
.methodology-btn:hover { color: var(--text); }
.disclaimer { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(10, 13, 18, 0.7); backdrop-filter: blur(4px); z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 20px; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; padding-right: 15px; /* prevent layout shift from scrollbar */ }
.modal-content { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; position: relative; transform: translateY(20px); transition: transform 0.25s ease; box-shadow: 0 40px 80px -20px rgba(10, 13, 18, 0.4); overflow: hidden; }
.modal-backdrop.open .modal-content { transform: translateY(0); }
.modal-close { position: absolute; top: 16px; right: 16px; background: var(--bg-raised); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: background 0.2s; z-index: 10; }
.modal-close:hover { background: var(--line); }
.modal-header { padding: 40px 40px 16px 40px; flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--bg); z-index: 5; }
.modal-header h3 { font-family: var(--serif); font-size: 28px; margin: 0; }
.modal-body { padding: 24px 40px 40px 40px; overflow-y: auto; flex-grow: 1; }
.methodology-list { list-style: none; margin: 16px 0; }
.methodology-list li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }
.methodology-list li::before { content: '\2022'; position: absolute; left: 0; color: var(--text); }
.methodology-list li strong { color: var(--text); }
.formula { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--bg-raised); padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line); }
@media(max-width:640px) { .secondary-results-grid { grid-template-columns: 1fr; gap: 16px; } .modal-header { padding: 24px 24px 16px 24px; } .modal-body { padding: 16px 24px 24px 24px; } }

/* form-group / range-group weren't in the original ROI markup's stylesheet —
   added so labels sit with proper spacing above each input */
.form-group{display:flex; flex-direction:column;}
.form-group label{font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px;}
.range-group{display:flex; flex-direction:column;}
select.calc-input{cursor:pointer;}

/* ============================================
   HELP CENTER
   ============================================ */
.help-hero{padding:96px 0 48px; text-align:center;}
.help-search-wrap{max-width:640px; margin:36px auto 0; position:relative;}
.help-search-wrap svg{position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none;}
.help-search{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px 18px 52px; font-size:16px; color:var(--text); font-family:var(--sans);
  box-shadow:0 12px 32px -16px rgba(42,24,16,0.18); transition:border-color .2s, box-shadow .2s;
}
.help-search:focus{outline:none; border-color:var(--accent); box-shadow:0 12px 32px -12px rgba(156,74,31,0.28);}
.help-search::placeholder{color:#A79B8C;}
.help-search-meta{margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim);}
.help-search-meta strong{color:var(--accent);}

.help-cat-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:28px 0 0; margin-bottom:8px;
}
.help-cat-pill{
  font-family:var(--mono); font-size:12.5px; color:var(--text-dim);
  border:1px solid var(--line); background:var(--bg); border-radius:20px;
  padding:9px 16px; transition:border-color .2s, color .2s, background .2s;
  white-space:nowrap;
}
.help-cat-pill:hover, .help-cat-pill:focus-visible{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}

.help-popular-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media(max-width:860px){.help-popular-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.help-popular-grid{grid-template-columns:1fr;}}
.help-popular-card{
  display:block; border:1px solid var(--line); border-radius:14px; padding:22px;
  background:var(--bg); transition:border-color .2s, background .2s, transform .2s ease;
}
.help-popular-card:hover, .help-popular-card:focus-visible{border-color:var(--text-dim); background:var(--bg-raised); transform:translateY(-3px);}
.help-popular-card .cat{font-family:var(--mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; display:block;}
.help-popular-card h4{font-size:15px; font-weight:600; line-height:1.4;}

.help-category-section{padding:56px 0; border-top:1px solid var(--line);}
.help-category-head{display:flex; align-items:center; gap:16px; margin-bottom:28px;}
.help-category-icon{
  width:48px; height:48px; flex-shrink:0; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-raised); display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.help-category-head h2{font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.6vw,28px); line-height:1.1;}
.help-category-head .count{font-family:var(--mono); font-size:12.5px; color:var(--text-dim); margin-top:4px; display:block;}

.help-article-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.help-article{border-bottom:1px solid var(--line);}
.help-article-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 4px; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--text);
}
.help-article-q:hover{color:var(--accent);}
.help-article-q svg{flex-shrink:0; color:var(--text-dim); transition:transform .25s ease;}
.help-article.open .help-article-q svg{transform:rotate(180deg); color:var(--accent);}
.help-article-a{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.help-article.open .help-article-a{max-height:600px;}
.help-article-a-inner{padding:0 4px 22px; font-size:14.5px; color:var(--text-dim); line-height:1.75; max-width:720px;}
.help-article-a-inner p + p{margin-top:12px;}
.help-article-a-inner code{font-family:var(--mono); font-size:12.5px; background:var(--bg-raised); border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--accent);}
.help-article-a-inner ul{margin:10px 0 0 20px;}
.help-article-a-inner li{margin-bottom:6px;}

.help-no-results{display:none; text-align:center; padding:64px 0; color:var(--text-dim);}
.help-no-results.show{display:block;}
.help-no-results svg{margin:0 auto 20px; color:var(--line);}
.help-no-results h3{font-family:var(--serif); font-size:22px; color:var(--text); margin-bottom:8px;}

.help-hidden{display:none !important;}

.help-still-need{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:20px;
  padding:56px 40px; text-align:center;
  background-image: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(168,90,50,0.12), transparent 70%);
}
@media(max-width:640px){.help-still-need{padding:40px 24px;}}
.help-still-need h2{font-family:var(--serif); font-weight:700; font-size:clamp(24px,3vw,32px); margin-bottom:12px;}
.help-still-need p{color:var(--text-dim); max-width:460px; margin:0 auto 28px;}
.help-still-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.help-contact-methods{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:720px; margin:32px auto 0;}
@media(max-width:760px){.help-contact-methods{grid-template-columns:1fr;}}
.help-contact-method{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:left;
}
.help-contact-method .label{font-family:var(--mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block;}
.help-contact-method .value{font-size:14.5px; font-weight:600; color:var(--text);}
.help-contact-method .sub{font-size:12.5px; color:var(--text-dim); margin-top:3px;}

@media(max-width:640px){
  .help-hero{padding:64px 0 32px;}
  .help-search{padding:15px 18px 15px 46px; font-size:15px;}
  .help-search-wrap svg{left:16px;}
  .help-category-icon{width:40px; height:40px;}
  .help-article-q{font-size:14.5px; padding:16px 2px;}
}


/* ---------- RECOVERED CSS FROM PREVIOUS SESSIONS ---------- */

.terminal-section + .section { padding-top: 64px; }
@media(min-width: 768px) { .terminal-section + .section { padding-top: 96px; } }

/* FOOTER CTA SECTION & HEADER */
.footer-cta-section {
  padding-top: 16px;
  margin-bottom: 56px;
}

.footer-cta-header {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 40px auto;
  position: relative;
}

.footer-cta-header h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.footer-cta-header h2 em {
  font-style: normal;
  color: var(--gold);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.footer-cta-header p {
  color: rgba(243, 230, 210, 0.82);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  margin: 0 auto;
  font-weight: 400;
  max-width: 840px;
  letter-spacing: -0.01em;
}

/* FOOTER BENTO GRID */
.footer-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.footer-cta-header p {
  color: rgba(243, 230, 210, 0.82);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
  margin: 0 auto;
  font-weight: 400;
  max-width: 840px;
  letter-spacing: -0.01em;
}

/* FOOTER BENTO GRID */
.footer-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 56px;
}
@media (max-width: 860px) {
  .footer-bento-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bento-item {
  background: linear-gradient(145deg, rgba(78, 49, 33, 0.95) 0%, rgba(56, 35, 23, 0.98) 100%);
  border: 1px solid rgba(243, 230, 210, 0.22);
  border-top: 1px solid rgba(243, 230, 210, 0.40);
  border-radius: 20px;
  padding: 38px 40px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
  text-align: left;
}

@media (max-width: 600px) {
  .bento-item {
    padding: 28px 22px;
    border-radius: 18px;
    min-height: auto;
  }
}

.bento-item::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(243, 230, 210, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0.5;
}

.bento-item:hover {
  transform: translateY(-5px);
  background: linear-gradient(145deg, rgba(94, 60, 40, 0.98) 0%, rgba(68, 42, 28, 0.98) 100%);
  border-color: rgba(243, 230, 210, 0.32);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.bento-item:hover::before {
  opacity: 1;
  transform: scale(1.15);
}

.bento-logo-area {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
  z-index: 2;
  position: relative;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bento-logo-area::-webkit-scrollbar {
  display: none;
}

.bento-logo-area .ai-icon, 
.bento-logo-area .shopify-icon,
.bento-logo-area svg,
.bento-logo-area img {
  height: 28px !important;
  width: auto !important;
  max-width: 44px !important;
  max-height: 28px !important;
  min-width: unset !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block !important;
  flex-shrink: 0;
  object-fit: contain !important;
}

.bento-logo-area svg:hover,
.bento-logo-area img:hover,
.bento-logo-area .ai-icon:hover,
.bento-logo-area .shopify-icon:hover {
  opacity: 1;
  transform: scale(1.18);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  .bento-logo-area .ai-icon, 
  .bento-logo-area .shopify-icon,
  .bento-logo-area svg,
  .bento-logo-area img {
    height: 24px !important;
    max-height: 24px !important;
  }
}

.bento-item h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 14px;
  color: var(--cream);
  z-index: 2;
  position: relative;
  letter-spacing: -0.015em;
}

.bento-item h3 em {
  font-style: normal;
  color: var(--gold);
}

.bento-item p {
  color: rgba(243, 230, 210, 0.82);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  z-index: 2;
  position: relative;
}

/* ---------- DARK FOOTER (RESTORED) ---------- */
footer {
  background: var(--espresso-2);
  color: var(--cream);
  border-top: none;
}
footer .logo {
  color: var(--cream);
}
.footer-col a {
  color: rgba(243, 230, 210, 0.7) !important;
}
.footer-col a:hover {
  color: var(--cream) !important;
}
.footer-desc {
  color: rgba(243, 230, 210, 0.7) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(243, 230, 210, 0.1) !important;
  color: rgba(243, 230, 210, 0.5) !important;
}
.social-icons a {
  color: rgba(243, 230, 210, 0.6) !important;
}
.social-icons a:hover {
  color: var(--cream) !important;
  background: rgba(243, 230, 210, 0.1) !important;
}
.foot-legal a {
  color: rgba(243, 230, 210, 0.5) !important;
}
.foot-legal a:hover {
  color: rgba(243, 230, 210, 0.9) !important;
}
footer .section-eyebrow {
  border-color: rgba(243, 230, 210, 0.2) !important;
  color: var(--cream) !important;
  background: rgba(243, 230, 210, 0.05) !important;
  font-size: 10px !important;
}

.section.problem-section { padding-top: 128px; }
@media(max-width: 760px) { .section.problem-section { padding-top: 76px; } }

/* Integrations Grid Show More */
.hidden-integration {
  display: none !important;
}

.integrations-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}