/* ===================== TOKENS ===================== */
:root{
  --white:#FFFFFF;
  --yellow:#FFC605;
  --yellow-hover:#FFD12A;
  --yellow-soft:rgba(255,198,5,.12);
  --yellow-glow:rgba(255,198,5,.25);
  --green:#8CBE62;
  --green-soft:rgba(140,190,98,.12);
  --bg:#050505;
  --bg2:#080808;
  --surface:#101010;
  --surface2:#141414;
  --text:#FFFFFF;
  --text2:#A1A1A1;
  --muted:#737373;
  --border:rgba(255,255,255,.07);
  --border-hover:rgba(255,198,5,.25);
  --radius:16px;
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* semantic aliases — one centralized token layer, kept in the
     brand's actual logo colors (white / yellow-gold / a touch of
     green), not the generic orange palette from generic templates */
  --bg-void:var(--bg);
  --bg-surface:var(--surface);
  --text-primary:var(--text);
  --text-muted:var(--text2);
  --brand-yellow:var(--yellow);
  --brand-gold:var(--yellow-hover);
  --brand-green:var(--green);
  --border-subtle:var(--border);
  --radius-card:16px;
  --radius-button:8px;
  --shadow-glow:0 0 60px rgba(255,198,5,.10);
  --font-heading:'Space Grotesk',var(--font-body);
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.section{position:relative;padding:120px 0;}
@media (max-width:768px){.section{padding:72px 0;}}

/* accent word */
.accent{color:var(--yellow);}
.accent-green{color:var(--green);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);
  padding:6px 14px;border:1px solid var(--border);border-radius:100px;
  background:rgba(255,255,255,.02);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px var(--yellow-glow);}

h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:-0.02em;line-height:1.08;}
h2{font-size:44px;}
h3{font-size:22px;}
@media (max-width:768px){h2{font-size:32px;}h3{font-size:19px;}}

.section-head{max-width:640px;margin-bottom:56px;}
.section-head p{color:var(--text2);font-size:17px;margin-top:14px;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:8px;font-weight:600;font-size:15px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(0.98);}
.btn-primary{
  background:var(--yellow);color:var(--bg);
  box-shadow:0 0 0 1px rgba(255,198,5,.5), 0 4px 15px rgba(255,198,5,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{background:var(--yellow-hover);}
.btn-secondary{
  background:rgba(255,255,255,.06);color:var(--white);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:rgba(255,255,255,.10);}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border);padding:10px 18px;font-size:14px;}
.btn-ghost:hover{color:var(--white);border-color:var(--border-hover);}

/* cards */
.card{
  background:linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.45), 0 0 60px rgba(0,0,0,.20);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--border-hover);
  box-shadow:0 0 0 1px rgba(255,198,5,.20), 0 12px 45px rgba(0,0,0,.55), 0 0 70px rgba(255,198,5,.08);
}
.spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,198,5,.10), transparent 70%);}
.card:hover .spotlight{opacity:1;}

/* background system */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}
.bg-noise{position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.blob{position:absolute;border-radius:50%;filter:blur(90px);animation:float 10s ease-in-out infinite;}
.blob-yellow{width:600px;height:600px;top:-200px;left:50%;transform:translateX(-50%);background:rgba(255,198,5,.08);}
.blob-green{width:500px;height:500px;top:900px;right:-150px;background:rgba(140,190,98,.04);animation-delay:-4s;}
.blob-white{width:700px;height:400px;top:520px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.03);animation-delay:-2s;}
@keyframes float{0%,100%{transform:translate(-50%,0) scale(1);}50%{transform:translate(-48%,20px) scale(1.05);}}
@media (prefers-reduced-motion:reduce){.blob{animation:none;}}

/* ===================== NAV ===================== */
:root{--header-h:72px;}
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,5,5,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;flex-wrap:nowrap;gap:12px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-0.01em;flex-shrink:0;}
.logo-mark{width:30px;height:30px;flex-shrink:0;}
.logo-img{height:26px;width:auto;display:block;}
.logo-img-footer{height:24px;}
.nav-center{display:flex;gap:32px;}
.nav-center a{font-size:14.5px;color:var(--text2);transition:color .2s;white-space:nowrap;}
.nav-center a:hover{color:var(--white);}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav-right .btn-ghost{padding:9px 16px;}

/* hamburger — animates into an X */
.hamburger{
  display:none;flex-direction:column;justify-content:space-between;
  width:22px;height:16px;background:none;flex-shrink:0;position:relative;z-index:160;padding:0;
}
.hamburger span{display:block;height:2px;width:100%;background:var(--white);border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease);transform-origin:center;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile nav dropdown — anchored below header, own stacking context, solid bg */
.mobile-menu-backdrop{
  position:fixed;left:0;right:0;bottom:0;top:var(--header-h);
  background:rgba(0,0,0,.55);z-index:140;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease), visibility .25s;
}
.mobile-menu-backdrop.open{opacity:1;visibility:visible;}
.mobile-menu{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:150;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
  background:#020202;border-bottom:1px solid var(--border);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  padding:8px 24px 28px;display:flex;flex-direction:column;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .25s var(--ease), opacity .25s var(--ease), visibility .25s;
}
.mobile-menu.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
.mobile-menu a{padding:16px 4px;border-bottom:1px solid var(--border);font-size:16px;display:block;}
.mobile-menu #navLogoutMobile{padding:16px 4px;border-bottom:1px solid var(--border);font-size:16px;display:block;color:var(--text2);border-top:none;}
.mobile-menu .btns{margin-top:20px;display:flex;flex-direction:column;gap:12px;}
@media (max-width:900px){
  .nav{
    height:68px;
    padding-left:20px;
    padding-right:20px;
    gap:0;
  }
  .nav-center{display:none;}
  .nav-right .btn-ghost{display:none;}
  .nav-right{gap:0;}
  .hamburger{
    display:flex;
    width:44px;
    height:44px;
    padding:0;
    align-items:center;
    justify-content:center;
    gap:5px;
  }
  .hamburger span{
    width:22px;
    height:2px;
    flex:none;
  }
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:480px){
  .logo-img{height:23px;}
}
@media (max-width:380px){
  .nav{padding-left:16px;padding-right:16px;}
  .nav-right .btn-primary{padding:9px 14px;font-size:13.5px;}
  .logo-img{height:22px;}
}
body.menu-open{overflow:hidden;}

/* ===================== HERO ===================== */
.hero{padding:170px 0 60px;text-align:center;}
.hero-badge{margin-bottom:28px;}
.hero h1{
  font-size:88px;line-height:1.08;
  background:linear-gradient(180deg,#FFFFFF, #F2F2F2 60%, #BDBDBD);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  max-width:900px;margin:0 auto;
}
.hero h1 .accent{-webkit-text-fill-color:var(--yellow);color:var(--yellow);}
.hero-sub{max-width:600px;margin:26px auto 0;color:var(--text2);font-size:18px;}
.hero-sub b{color:var(--white);font-weight:600;}
.hero-ctas{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap;}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--muted);}
@media (max-width:768px){
  .hero{padding:124px 0 40px;}
  .hero h1{font-size:44px;letter-spacing:-0.01em;}
  .hero-sub{font-size:16px;margin-top:20px;}
  .hero-ctas{margin-top:30px;gap:12px;}
  .hero-note{margin-top:18px;}
}
@media (max-width:480px){
  .container{padding:0 20px;}
  .hero{padding:114px 0 36px;}
  .hero-badge{margin-bottom:22px;font-size:12px;}
  .hero h1{font-size:36px;}
  .hero-sub{font-size:15px;line-height:1.55;}
  .hero-ctas{flex-direction:column;align-items:stretch;margin-top:26px;}
  .hero-ctas .btn{width:100%;}
}
@media (max-width:360px){
  .hero h1{font-size:32px;}
}

/* dashboard mockup */
.dash-wrap{margin-top:70px;perspective:1400px;}
.dash{
  max-width:1080px;margin:0 auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 100px rgba(255,198,5,.06);
  background:var(--surface);
  display:flex;min-height:460px;
  transform:rotateX(4deg);
}
@media (max-width:900px){.dash{transform:none;}}
.dash-side{width:190px;background:var(--bg2);border-right:1px solid var(--border);padding:20px 14px;flex-shrink:0;}
.dash-side .dside-item{font-size:13.5px;color:var(--text2);padding:10px 12px;border-radius:8px;margin-bottom:2px;}
.dash-side .dside-item.active{background:var(--yellow-soft);color:var(--yellow);font-weight:600;}
.dash-main{flex:1;padding:26px 28px;overflow:hidden;text-align:left;}
.dash-greet{font-size:19px;font-weight:700;margin-bottom:2px;}
.dash-greet-sub{font-size:13.5px;color:var(--text2);margin-bottom:22px;}
.dash-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.dcard{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.dcard .dlabel{font-size:12px;color:var(--text2);margin-bottom:8px;}
.dcard .dval{font-size:20px;font-weight:700;}
.dcard .dchange{font-size:12px;color:var(--green);margin-top:4px;font-weight:600;}
.dgrid2{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;}
.dchart{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;height:160px;position:relative;}
.dchart svg{width:100%;height:100%;}
.dai{background:linear-gradient(135deg, rgba(255,198,5,.10), rgba(255,198,5,.02));border:1px solid rgba(255,198,5,.25);border-radius:12px;padding:16px;}
.dai .dailabel{font-size:12px;color:var(--yellow);font-weight:600;margin-bottom:8px;}
.dai p{font-size:13px;color:var(--text2);line-height:1.5;}
.dai .dbtn{margin-top:12px;display:inline-block;font-size:12.5px;color:var(--bg);background:var(--yellow);padding:7px 14px;border-radius:6px;font-weight:600;}
@media (max-width:900px){.dash-cards{grid-template-columns:repeat(2,1fr);}.dgrid2{grid-template-columns:1fr;}.dash-side{display:none;}}

/* ===================== VALUE PROP 4 CARDS ===================== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr;}}

/* experience hub */
.xp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.xp-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.xp-grid{grid-template-columns:1fr;}}
.xp-card{display:block;padding:26px 24px;}
.xp-icon{font-size:26px;margin-bottom:14px;}
.xp-card h3{font-size:17px;margin-bottom:8px;}
.xp-card p{color:var(--text2);font-size:14px;margin-bottom:18px;}
.xp-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--yellow);}
.xp-arrow{transition:transform .2s var(--ease);}
.xp-card:hover .xp-arrow{transform:translateX(4px);}

/* demo badge */
.demo-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);background:var(--yellow-soft);border:1px solid rgba(255,198,5,.25);padding:5px 10px;border-radius:100px;}

/* form controls */
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;color:var(--text2);margin-bottom:7px;font-weight:500;}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--white);
  padding:12px 14px;border-radius:8px;font-size:14.5px;font-family:inherit;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(255,198,5,.4);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.pill-group{display:flex;flex-wrap:wrap;gap:8px;}
.pill-opt{padding:9px 16px;border-radius:100px;border:1px solid var(--border);font-size:13.5px;color:var(--text2);background:transparent;transition:all .2s;}
.pill-opt.active{background:var(--yellow-soft);border-color:rgba(255,198,5,.35);color:var(--yellow);font-weight:600;}
.pill-opt:hover{border-color:var(--border-hover);color:var(--white);}

/* suggested question chips */
.qchip{padding:11px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:13.5px;text-align:left;transition:all .2s;width:100%;}
.qchip:hover{border-color:var(--border-hover);color:var(--white);}
.qchip.active{border-color:rgba(255,198,5,.4);color:var(--yellow);background:var(--yellow-soft);}

/* score ring */
.score-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.score-ring{position:relative;width:150px;height:150px;flex-shrink:0;}
.score-ring svg{transform:rotate(-90deg);width:100%;height:100%;}
.score-ring .ring-bg{fill:none;stroke:var(--surface2);stroke-width:10;}
.score-ring .ring-fg{fill:none;stroke:var(--yellow);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease);}
.score-ring .ring-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-ring .ring-num{font-size:30px;font-weight:800;}
.score-ring .ring-label{font-size:11px;color:var(--text2);margin-top:2px;}

/* metric bar */
.mbar-row{margin-bottom:14px;}
.mbar-top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px;}
.mbar-top span:last-child{color:var(--white);font-weight:600;}
.mbar-track{height:8px;background:var(--surface2);border-radius:100px;overflow:hidden;}
.mbar-fill{height:100%;background:var(--yellow);border-radius:100px;width:0;transition:width 1s var(--ease);}
.mbar-fill.green{background:var(--green);}

/* dropzone */
.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.015);}
.dropzone:hover{border-color:var(--border-hover);background:rgba(255,198,5,.03);}
.dropzone .dz-icon{font-size:28px;margin-bottom:10px;}
.dropzone p{color:var(--text2);font-size:14px;}
.dropzone .dz-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}

/* insight list */
.insight-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.insight-item:last-child{border-bottom:none;}
.insight-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-top:6px;flex-shrink:0;box-shadow:0 0 8px var(--yellow-glow);}
.insight-item p{font-size:14.5px;color:var(--text2);line-height:1.55;}

/* loading spinner */
.spinner{width:16px;height:16px;border:2px solid rgba(255,198,5,.25);border-top-color:var(--yellow);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-row{display:flex;align-items:center;gap:10px;color:var(--text2);font-size:14px;padding:16px 0;}

/* toggle tabs (demo vs upload) */
.mode-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:4px;gap:4px;margin-bottom:24px;}
.mode-btn{padding:9px 18px;border-radius:7px;font-size:13.5px;color:var(--text2);background:transparent;font-weight:500;}
.mode-btn.active{background:var(--yellow);color:var(--bg);font-weight:600;}

/* growth score quiz */
.quiz-q{margin-bottom:22px;}
.quiz-q .qtitle{font-size:14.5px;font-weight:600;margin-bottom:10px;}

/* result hidden state */
.result-panel{display:none;}
.result-panel.show{display:block;}
.hidden-el{display:none;}

.vcard{padding:28px 24px;}
.vcard .vnum{font-size:13px;color:var(--muted);}
.vcard h3{margin-top:14px;margin-bottom:8px;}
.vcard p{color:var(--text2);font-size:15px;}

/* feature list w icons */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.feat-grid{grid-template-columns:1fr;}}
.feat{padding:24px;}
.feat h3{font-size:17px;margin-bottom:6px;}
.feat p{color:var(--text2);font-size:14.5px;}

/* two-column layout */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){.two-col{grid-template-columns:1fr;gap:36px;}}

/* AI chat mock */
.chatbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.4);}
.chat-msg{margin-bottom:16px;display:flex;}
.chat-msg.user{justify-content:flex-end;}
.bubble{max-width:80%;padding:12px 16px;border-radius:14px;font-size:14.5px;line-height:1.5;}
.bubble.user{background:rgba(255,255,255,.08);border-bottom-right-radius:4px;}
.bubble.ai{background:rgba(255,198,5,.08);border:1px solid rgba(255,198,5,.18);border-bottom-left-radius:4px;color:#f0e6c8;}
.bubble.ai b{color:var(--yellow);}
.typing{display:inline-flex;gap:4px;padding:6px 0;}
.typing span{width:6px;height:6px;background:var(--yellow);border-radius:50%;animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.2;}30%{opacity:1;}}

/* whatsapp mock */
.wa-mock{background:#0b0f0d;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4);}
.wa-head{background:#111713;padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.wa-avatar{width:34px;height:34px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:700;color:#050505;font-size:13px;}
.wa-body{padding:20px;min-height:220px;background:#0d120f;}
.wa-msg{max-width:75%;padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:10px;line-height:1.4;}
.wa-msg.in{background:#1b2620;border-bottom-left-radius:2px;}
.wa-msg.out{background:var(--green-soft);border:1px solid rgba(140,190,98,.3);margin-left:auto;border-bottom-right-radius:2px;color:#dfeed3;}

/* tabs */
.tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.tab{padding:9px 18px;border-radius:100px;font-size:13.5px;border:1px solid var(--border);color:var(--text2);}
.tab.active{background:var(--yellow-soft);border-color:rgba(255,198,5,.3);color:var(--yellow);font-weight:600;}

/* workflow timeline */
.timeline{display:flex;justify-content:space-between;gap:12px;}
.tstep{flex:1;text-align:center;position:relative;padding:0 8px;}
.tstep .tdot{width:14px;height:14px;border-radius:50%;background:var(--surface2);border:2px solid var(--yellow);margin:0 auto 16px;}
.tstep .tline{position:absolute;top:6px;left:50%;width:100%;height:2px;background:var(--border);z-index:-1;}
.tstep:last-child .tline{display:none;}
.tstep h3{font-size:15px;margin-bottom:6px;}
.tstep p{font-size:13px;color:var(--text2);}
@media (max-width:800px){.timeline{flex-direction:column;align-items:flex-start;gap:28px;}.tstep{text-align:left;padding-left:26px;border-left:2px solid var(--border);}.tstep .tdot{position:absolute;left:-8px;top:0;margin:0;}.tstep .tline{display:none;}}

/* use case cards */
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.usecase-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.usecase-grid{grid-template-columns:1fr;}}
.usecase{padding:22px;}
.usecase h3{font-size:16px;margin-bottom:8px;}
.usecase p{font-size:14px;color:var(--text2);}

/* before after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:700px){.ba-grid{grid-template-columns:1fr;}}
.ba-col{padding:28px;}
.ba-col h3{margin-bottom:18px;font-size:16px;color:var(--text2);}
.ba-col.after h3{color:var(--yellow);}
.ba-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--text2);}
.ba-col.after .ba-item{color:var(--white);}
.ba-item:last-child{border-bottom:none;}
.ba-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.ba-col.after .ba-dot{background:var(--yellow);box-shadow:0 0 8px var(--yellow-glow);}

/* pricing */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:40px;}
.bt-label{font-size:14.5px;color:var(--muted);transition:color .2s;}
.bt-label.active{color:var(--white);font-weight:600;}
.bt-label em{font-style:normal;color:var(--green);font-size:12.5px;margin-left:6px;}
.bt-switch{width:48px;height:26px;border-radius:100px;background:var(--surface2);border:1px solid var(--border);position:relative;transition:background .2s;flex-shrink:0;}
.bt-switch.on{background:var(--yellow-soft);border-color:rgba(255,198,5,.4);}
.bt-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:transform .25s var(--ease), background .25s;}
.bt-switch.on .bt-knob{transform:translateX(22px);background:var(--yellow);}
.pnote{text-align:center;font-size:12.5px;color:var(--muted);margin-top:24px;}
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media (max-width:1100px){.pricing-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.pricing-grid{grid-template-columns:1fr;}}
.pcard{padding:26px 20px;position:relative;}
.pcard.featured{border-color:rgba(255,198,5,.35);}
.pcard .ptag{position:absolute;top:-1px;right:20px;background:var(--yellow);color:var(--bg);font-size:11px;font-weight:700;padding:5px 12px;border-radius:0 0 8px 8px;}
.pcard .pemoji{font-size:24px;margin-bottom:10px;}
.pcard h3{font-size:17px;margin-bottom:6px;}
.pcard .pdesc{font-size:13px;color:var(--text2);margin-bottom:16px;min-height:34px;}
.pcard .pprice{font-size:28px;font-weight:800;margin-bottom:4px;}
.pcard .pprice span{font-size:13px;color:var(--text2);font-weight:500;}
.pcard ul{list-style:none;margin:18px 0;}
.pcard li{font-size:13px;color:var(--text2);padding:6px 0;display:flex;gap:8px;}
.pcard li::before{content:"✓";color:var(--green);font-weight:700;}
.pcard .btn{width:100%;margin-top:8px;padding:11px 18px;font-size:14px;}

/* testimonials */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:900px){.test-grid{grid-template-columns:1fr;}}
.tcard{padding:26px;}
.tcard p{font-size:14.5px;color:var(--text2);margin-bottom:20px;line-height:1.6;}
.tperson{display:flex;align-items:center;gap:12px;}
.tavatar{width:38px;height:38px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--yellow);}
.tname{font-size:14px;font-weight:600;}
.trole{font-size:12.5px;color:var(--muted);}

/* faq */
.faq-item{border-bottom:1px solid var(--border);padding:20px 0;}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:15.5px;font-weight:600;}
.faq-icon{width:18px;height:18px;position:relative;flex-shrink:0;}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--text2);border-radius:2px;transition:.25s var(--ease);}
.faq-icon::before{width:100%;height:2px;top:8px;}
.faq-icon::after{width:2px;height:100%;left:8px;}
.faq-item.open .faq-icon::after{transform:scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{padding-top:14px;color:var(--text2);font-size:14.5px;}

/* final cta */
.final-cta{text-align:center;padding:140px 0;position:relative;}
.final-cta h2{font-size:52px;max-width:800px;margin:0 auto;}
.final-cta p{color:var(--text2);font-size:18px;margin-top:18px;}
.final-cta .hero-ctas{margin-top:36px;}

/* footer */
footer{background:#020202;border-top:1px solid var(--border);padding:70px 0 30px;}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:24px;margin-bottom:50px;}
@media (max-width:900px){.foot-top{grid-template-columns:repeat(2,1fr);}}
.foot-brand p{color:var(--text2);font-size:14px;margin-top:14px;max-width:220px;}
.foot-contact{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.foot-contact a{display:block;font-size:13.5px;color:var(--text2);padding:0;transition:color .2s;}
.foot-contact a:hover{color:var(--yellow);}
.foot-address{font-size:13px;color:var(--muted);margin-top:2px;}
.foot-team{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.7;}
.foot-col h4{font-size:13.5px;color:var(--white);margin-bottom:16px;}
.foot-col a{display:block;font-size:13.5px;color:var(--text2);padding:6px 0;transition:color .2s;}
.foot-col a:hover{color:var(--yellow);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap;gap:14px;}
.foot-bottom p{font-size:13px;color:var(--muted);}
.foot-social{display:flex;gap:16px;}
.foot-social a{color:var(--text2);font-size:13px;}
.foot-social a:hover{color:var(--yellow);}

/* fade-up entrance */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.fade-up.in{opacity:1;transform:translateY(0);}

/* language chips */
.lang-chips{display:flex;flex-wrap:wrap;gap:10px;}
.lang-chip{padding:9px 18px;border-radius:100px;border:1px solid var(--border);font-size:14px;color:var(--text2);}
.lang-chip.active{border-color:rgba(255,198,5,.3);color:var(--yellow);background:var(--yellow-soft);}

/* doc extraction */
.doc-mock{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:opacity .3s var(--ease);}
@media (max-width:800px){.doc-mock{grid-template-columns:1fr;}}
.doc-left{background:var(--surface);padding:24px;border-right:1px solid var(--border);}
.doc-left .invoice-line{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);padding:8px 0;border-bottom:1px dashed var(--border);}
.doc-right{background:var(--surface2);padding:24px;}
.extract-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.extract-row span:first-child{color:var(--text2);}
.extract-row span:last-child{font-weight:600;}
.extract-row.pulled span:last-child{color:var(--green);}

/* ===================== FEATURE PAGE TEMPLATE ===================== */
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:20px;}
.breadcrumb a{color:var(--text2);}
.breadcrumb a:hover{color:var(--yellow);}
.feature-header{padding:150px 0 40px;text-align:center;}
.feature-header h1{font-size:52px;max-width:760px;margin:18px auto 0;line-height:1.12;}
.feature-header p{max-width:600px;margin:18px auto 0;color:var(--text2);font-size:17px;}
@media (max-width:768px){.feature-header{padding:120px 0 30px;}.feature-header h1{font-size:32px;}}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:36px 0;}
@media (max-width:900px){.benefits-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.benefits-grid{grid-template-columns:1fr;}}
.benefit-chip{display:flex;align-items:flex-start;gap:10px;padding:16px;}
.benefit-chip .bc-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-top:6px;flex-shrink:0;box-shadow:0 0 8px var(--yellow-glow);}
.benefit-chip p{font-size:14px;color:var(--text2);}
.usecase-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:800px){.usecase-mini{grid-template-columns:1fr;}}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.related-grid{grid-template-columns:1fr;}}
.related-card{padding:18px;display:block;}
.related-card h3{font-size:14.5px;margin-bottom:4px;}
.related-card span{font-size:12.5px;color:var(--yellow);}
.signin-gate{text-align:center;padding:30px 24px;margin-top:8px;}
.signin-gate p{color:var(--text2);font-size:14px;margin-bottom:16px;}

/* ===================== SIGN IN PAGE ===================== */
.signin-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 20px 60px;}
.signin-card{width:100%;max-width:420px;background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--border);border-radius:20px;padding:36px 30px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.signin-logo{height:28px;margin-bottom:22px;}
.signin-card h1{font-size:24px;margin-bottom:6px;}
.signin-card .signin-sub{color:var(--text2);font-size:14px;margin-bottom:26px;}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1a1a1a;font-weight:600;font-size:14.5px;padding:13px;border-radius:8px;transition:background .2s;}
.btn-google:hover{background:#f2f2f2;}
.btn-google:disabled{opacity:.6;cursor:default;}
.auth-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;}
.auth-error{background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.25);color:#ff9d9d;font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:16px;display:none;}
.auth-error.show{display:block;}
.auth-step.hidden-el{display:none;}
.signin-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text2);margin-bottom:20px;}
.signin-back:hover{color:var(--white);}

/* ===================== APP / DASHBOARD SHELL ===================== */
.app-shell{display:flex;min-height:100vh;padding-top:0;}
.app-sidebar{width:250px;flex-shrink:0;background:#080808;border-right:1px solid var(--border);padding:24px 16px;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50;}
.app-sidebar .logo{margin-bottom:30px;padding:0 8px;}
.app-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:8px;font-size:14px;color:var(--text2);margin-bottom:2px;transition:all .2s;}
.app-nav a:hover{background:rgba(255,255,255,.04);color:var(--white);}
.app-nav a.active{background:var(--yellow-soft);color:var(--yellow);font-weight:600;}
.app-main{margin-left:250px;flex:1;padding:32px 40px;min-width:0;}
.app-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:14px;}
.app-user{display:flex;align-items:center;gap:10px;}
.app-user img{width:34px;height:34px;border-radius:50%;background:var(--surface2);object-fit:cover;}
.app-user-fallback{width:34px;height:34px;border-radius:50%;background:var(--yellow-soft);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}
.app-user-name{font-size:13.5px;font-weight:600;}
.app-user-meta{font-size:11.5px;color:var(--muted);}
.app-mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:60px;background:rgba(5,5,5,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:60;align-items:center;justify-content:space-between;padding:0 16px;}
@media (max-width:960px){
  .app-sidebar{transform:translateX(-100%);transition:transform .25s var(--ease);top:60px;}
  .app-sidebar.open{transform:translateX(0);}
  .app-main{margin-left:0;padding:88px 20px 40px;}
  .app-mobile-topbar{display:flex;}
}
.app-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--text2);gap:10px;}

/* nav active state + auth-aware nav user chip */
.nav-center a.active{color:var(--yellow);font-weight:600;}
.mobile-menu a.active{color:var(--yellow);}
.nav-user{display:none;}
.nav-user.show{display:flex !important;}

/* =========================================================================
   MOBILE-ONLY REDESIGN (≤767px)
   Everything below is scoped to mobile breakpoints only. Desktop/tablet
   (≥768px) rules above this block are completely untouched. This section
   intentionally re-declares some selectors from above — later rules of
   equal specificity win the cascade, so these safely override the
   "shrink desktop" tablet rules with a true mobile-first layout.
   ========================================================================= */
@media (max-width:767px){

  /* ---------- base rhythm ---------- */
  .container{padding:0 20px;}
  .section{padding:56px 0;scroll-margin-top:84px;}
  .section-head{margin-bottom:32px;}
  .section-head p{font-size:15.5px;margin-top:10px;}
  /* anchor targets (e.g. #pricing, #faq) must never end up hidden under the fixed header */
  [id]{scroll-margin-top:84px;}

  /* ---------- typography ---------- */
  h2{font-size:28px;line-height:1.15;}
  h3{font-size:19px;}
  body{font-size:16px;}
  .eyebrow{font-size:12px;padding:5px 12px;}

  /* ---------- reduce visual noise ---------- */
  .blob{filter:blur(60px);opacity:.7;}
  .blob-yellow{width:340px;height:340px;}
  .blob-green{width:280px;height:280px;}
  .blob-white{width:320px;height:220px;}
  .bg-grid{opacity:.5;}
  .card{box-shadow:0 0 0 1px rgba(255,255,255,.03), 0 4px 14px rgba(0,0,0,.35);}
  .card:hover{transform:none;} /* no hover lift on touch devices */
  .spotlight{display:none;} /* mouse-tracking glow is meaningless on touch */

  /* ---------- header / nav ---------- */
  header{padding:0;}
  .nav{height:64px;}
  .logo-img{height:22px;}
  .hamburger{width:24px;height:24px;justify-content:center;}
  /* clean mobile header: logo + hamburger only. Sign In / Start Free /
     Dashboard / Logout all live in the menu drawer instead — showing
     Start Free here too would be a 3rd redundant CTA alongside the
     sticky bottom bar. */
  .nav-right{display:none !important;}

  /* ---------- mobile menu polish ---------- */
  .mobile-menu{padding:12px 20px 24px;}
  .mobile-menu a{padding:15px 6px;font-size:16.5px;font-weight:500;min-height:44px;display:flex;align-items:center;}
  .mobile-menu #navLogoutMobile{padding:15px 6px;font-size:16.5px;font-weight:500;min-height:44px;display:flex;align-items:center;width:100%;}
  .mobile-menu .btns{gap:10px;}
  .mobile-menu .btns .btn{min-height:48px;font-size:15.5px;}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 40px;}
  .hero-badge{margin-bottom:18px;}
  .hero h1{font-size:36px;line-height:1.14;letter-spacing:-0.01em;max-width:340px;margin:0 auto;}
  .hero-sub{font-size:16px;margin:16px auto 0;max-width:320px;line-height:1.5;}
  .hero-ctas{flex-direction:column;gap:10px;margin-top:26px;width:100%;max-width:320px;margin-left:auto;margin-right:auto;}
  .hero-ctas .btn{width:100%;min-height:50px;font-size:15.5px;}
  .hero-note{margin-top:16px;font-size:12.5px;}
  .dash-wrap{margin-top:40px;}
  .dash{border-radius:16px;min-height:0;}
  .dash-main{padding:16px 16px;}
  .dash-greet{font-size:16px;}
  .dash-greet-sub{font-size:12.5px;margin-bottom:14px;}
  .dcard{padding:11px 12px;}
  .dcard .dval{font-size:17px;}

  /* ---------- buttons: comfortable touch targets ---------- */
  .btn{min-height:46px;padding:12px 20px;font-size:15px;}
  .btn-ghost{min-height:44px;}
  .qchip, .pill-opt, .tab, .lang-chip{min-height:40px;}

  /* ---------- horizontal-scroll card rails instead of long stacks ---------- */
  .scroll-rail{
    display:flex;gap:14px;overflow-x:auto;padding:4px 20px 14px;margin:0 -20px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .scroll-rail::-webkit-scrollbar{display:none;}
  .scroll-rail > *{scroll-snap-align:start;flex:0 0 82%;max-width:300px;}

  .xp-grid, .feat-grid, .related-grid, .test-grid, .usecase-grid,
  .usecase-mini, .grid-4, .benefits-grid{
    display:flex !important;gap:14px;overflow-x:auto;padding:4px 20px 14px;margin:0 -20px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .xp-grid::-webkit-scrollbar, .feat-grid::-webkit-scrollbar, .related-grid::-webkit-scrollbar,
  .test-grid::-webkit-scrollbar, .usecase-grid::-webkit-scrollbar, .usecase-mini::-webkit-scrollbar,
  .grid-4::-webkit-scrollbar, .benefits-grid::-webkit-scrollbar{display:none;}
  .xp-grid > *, .feat-grid > *, .related-grid > *, .test-grid > *, .usecase-grid > *,
  .usecase-mini > *, .grid-4 > *, .benefits-grid > *{
    scroll-snap-align:start;flex:0 0 85%;max-width:320px;
  }
  /* pricing intentionally stays a vertical stack — comparing plans side-scrolled is bad UX */
  .pricing-grid{display:flex;flex-direction:column;gap:16px;}

  /* rail scroll hint: fade edge so it's obvious more content follows */
  .section{position:relative;}

  /* ---------- feature category cards on /features.html ---------- */
  .related-card, .usecase, .feat, .vcard, .xp-card, .tcard{padding:20px;}
  .xp-card h3, .related-card h3{font-size:15.5px;}
  .xp-icon{font-size:22px;margin-bottom:10px;}

  /* ---------- pricing ---------- */
  .pcard{padding:22px 20px;}
  .pcard .pprice{font-size:26px;}
  .billing-toggle{margin-bottom:24px;}

  /* ---------- feature/product headers ---------- */
  .feature-header{padding:100px 0 28px;}
  .feature-header h1{font-size:30px;}
  .feature-header p{font-size:15.5px;}

  /* ---------- footer: collapsible accordion ---------- */
  footer{padding:44px 0 20px;}
  .foot-top{display:block;}
  .foot-brand{margin-bottom:28px;}
  .foot-col{border-bottom:1px solid var(--border);}
  .foot-col h4{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 2px;margin-bottom:0;cursor:pointer;font-size:14.5px;min-height:44px;
  }
  .foot-col h4::after{content:"+";font-size:18px;color:var(--muted);font-weight:400;transition:transform .2s var(--ease);}
  .foot-col.open h4::after{transform:rotate(45deg);}
  .foot-col .foot-links{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
  .foot-col.open .foot-links{max-height:300px;padding-bottom:12px;}
  .foot-col a{padding:10px 2px;min-height:40px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding-top:20px;}

  /* ---------- sticky bottom mobile CTA ---------- */
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(5,5,5,.92);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    transform:translateY(100%);transition:transform .3s var(--ease);
  }
  .sticky-cta.show{transform:translateY(0);}
  .sticky-cta .btn{width:100%;min-height:48px;font-size:15px;}
  body.has-sticky-cta{padding-bottom:0;}

  /* ---------- signin page ---------- */
  .signin-wrap{padding:96px 16px 40px;min-height:0;}
  .signin-card{padding:28px 22px;border-radius:16px;}
  .signin-card h1{font-size:21px;}
  .btn-google{min-height:48px;}

  /* ---------- app / dashboard shell ---------- */
  .app-main{padding:80px 16px 90px;}
  .app-topbar h1{font-size:21px;}
  .app-user{gap:8px;}
  .app-mobile-topbar{padding:0 16px;}

  /* bottom quick-nav for authenticated app pages */
  .app-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(8,8,8,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .app-bottom-nav a, .app-bottom-nav button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px;min-height:48px;font-size:11px;color:var(--text2);border-radius:10px;
    background:none;border:none;font-family:inherit;cursor:pointer;
  }
  .app-bottom-nav a.active, .app-bottom-nav button.active{color:var(--yellow);}
  .app-bottom-nav .abn-icon{font-size:18px;}
}

@media (min-width:768px){
  .app-bottom-nav{display:none;}
  .sticky-cta{display:none;}
}

/* very small phones */
@media (max-width:380px){
  .hero h1{font-size:32px;max-width:280px;}
  .hero-sub{font-size:15px;max-width:280px;}
  .container{padding:0 16px;}
  .xp-grid > *, .feat-grid > *, .related-grid > *, .test-grid > *, .usecase-grid > *,
  .usecase-mini > *, .grid-4 > *, .benefits-grid > *{flex-basis:84%;}
}

@media (prefers-reduced-motion:reduce){
  .sticky-cta, .foot-col .foot-links, .app-sidebar{transition:none;}
}

/* ===================== TRUST STRIP ===================== */
.trust-strip{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text2);
  padding:20px 24px;margin-top:8px;
}
.trust-strip .ts-dot{color:var(--muted);}

/* ===================== HERO GLOW RING (subtle, CSS-only) ===================== */
.dash-glow-ring{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:640px;height:640px;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, rgba(255,198,5,.10) 0%, rgba(255,198,5,.03) 40%, transparent 70%);
  border-radius:50%;
}
.dash-wrap{position:relative;}
@media (prefers-reduced-motion:no-preference){
  .dash-glow-ring{animation:glow-pulse 6s ease-in-out infinite;}
}
@keyframes glow-pulse{0%,100%{opacity:.7;}50%{opacity:1;}}

/* ===================== FOUR PILLARS (editorial rows, not cards) ===================== */
.pillars-rail{max-width:760px;}
.pillar-row{
  display:grid;grid-template-columns:64px 1fr;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--border);
}
.pillar-row:last-child{border-bottom:none;}
.pillar-num{font-size:14px;color:var(--muted);padding-top:4px;}
.pillar-body h3{font-size:21px;margin-bottom:8px;}
.pillar-body p{color:var(--text2);font-size:15px;max-width:520px;line-height:1.6;}
@media (max-width:600px){
  .pillar-row{grid-template-columns:40px 1fr;gap:14px;padding:20px 0;}
  .pillar-body h3{font-size:18px;}
}

/* ===================== CAPABILITY STRIP (replaces card-soup grids) ===================== */
.cap-strip{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:32px;flex-wrap:wrap;
}
.cap-strip-text{flex:1;min-width:260px;}
.cap-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.cap-tag{
  font-family:var(--font-mono);font-size:11.5px;color:var(--text2);
  border:1px solid var(--border);border-radius:100px;padding:5px 12px;
}
.cap-strip-cta{flex-shrink:0;}
@media (max-width:700px){
  .cap-strip{padding:24px 20px;}
  .cap-strip-cta{width:100%;}
}

/* app sidebar nav groups */
.app-nav-group{margin-bottom:18px;}
.app-nav-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 12px;margin-bottom:6px;
}

/* ===================== ACCESSIBILITY: FOCUS STATES ===================== */
/* Consistent, visible keyboard-focus ring across every interactive element.
   Uses :focus-visible so mouse/touch clicks don't show a ring, only keyboard
   navigation does — matches modern accessibility expectations. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .card:focus-visible,
.qchip:focus-visible, .pill-opt:focus-visible, .tab:focus-visible, .lang-chip:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
  border-radius:6px;
}
/* fallback for browsers without :focus-visible support */
a:focus:not(:focus-visible), button:focus:not(:focus-visible){outline:none;}

/* skip-to-content link for keyboard/screen-reader users */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:1000;
  background:var(--yellow);color:var(--bg);font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:8px;transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;}

/* ========================================================================
   MOBILE SPACING POLISH — 2026
   Dedicated fixes for the mobile landing-page rhythm. Desktop rules remain
   untouched; these overrides are intentionally scoped to small screens.
   ======================================================================== */
@media (max-width:767px){
  header{position:relative;z-index:70;}
  .hero{padding-top:48px;padding-bottom:44px;}
  .hero-badge{margin-bottom:22px;}
  .hero h1{margin-top:0;}
  .hero-sub{margin-top:20px;}
  .hero-ctas{margin-top:30px;gap:12px;}
  .hero-note{margin-top:20px;line-height:1.6;}
  .dash-wrap{margin-top:46px;}

  .trust-strip{margin-top:4px;padding:18px 16px 22px;line-height:1.7;}
  #experience{padding-top:64px;}
  #experience .section-head{margin-bottom:34px;}
  #experience .section-head .eyebrow{margin-bottom:20px;}

  .xp-grid{gap:16px;padding:4px 20px 16px;margin:0 -20px;overscroll-behavior-x:contain;scroll-padding-left:20px;}
  .xp-grid > *{flex:0 0 min(84vw,320px);max-width:none;}
  .demo-cta{display:flex;justify-content:center;margin-top:28px;margin-bottom:72px;}
  .demo-cta .btn{width:100%;max-width:340px;}

  #value{padding-top:0;}
  .value-section .section-head{margin-bottom:0;}
  .value-section .section-head .eyebrow{margin-bottom:20px;}
  .value-section h2{font-size:30px;line-height:1.14;}
  .value-section .pillars-rail{margin-top:40px;}
  .value-section .pillar-row{grid-template-columns:34px 1fr;gap:16px;padding:24px 0;}
  .value-section .pillar-body h3{font-size:19px;margin-bottom:8px;}
  .value-section .pillar-body p{font-size:15px;line-height:1.65;}

  #capabilities{padding-top:72px;padding-bottom:72px;}
  .capability-stack{display:flex;flex-direction:column;gap:28px;}
  .capability-stack .cap-strip{padding:26px 22px;border-radius:18px;align-items:stretch;gap:28px;}
  .capability-stack .cap-strip-text{min-width:0;}
  .capability-stack .cap-strip .eyebrow{margin-bottom:18px;}
  .capability-stack .cap-strip h3{font-size:22px;line-height:1.18;margin-bottom:10px;}
  .capability-stack .cap-strip p{color:var(--text2);font-size:14.5px;max-width:480px;line-height:1.6;}
  .capability-stack .cap-tags{gap:8px;margin-top:20px;}
  .capability-stack .cap-strip-cta{width:100%;min-height:50px;margin-top:0;}

  .sticky-cta{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  .sticky-cta .btn{min-height:50px;}
  body.has-sticky-cta{padding-bottom:0;}
  body.has-sticky-cta.sticky-cta-active{padding-bottom:112px;}
}

@media (max-width:380px){
  .hero{padding-top:44px;}
  .hero-badge{margin-bottom:20px;}
  .hero h1{font-size:32px;max-width:300px;}
  .hero-sub{font-size:15px;max-width:290px;}
  .capability-stack{gap:24px;}
  .capability-stack .cap-strip{padding:24px 20px;}
}

/* Preserve the original desktop section rhythm after grouping the three
   capability cards into one semantic stack; mobile overrides below tighten it. */
.capability-section{padding-top:0;}
.capability-stack{display:flex;flex-direction:column;gap:120px;}
@media (max-width:767px){
  .demo-cta{margin-bottom:28px;}
  .capability-stack{gap:28px;}
}
@media (max-width:380px){
  .capability-stack{gap:24px;}
}

/* sticky CTA only reserves viewport space while actually visible */
@media (max-width:767px){
  body.has-sticky-cta{padding-bottom:0;}
  body.has-sticky-cta.sticky-cta-active{padding-bottom:112px;}
}

/* ========================================================================
   MOBILE GLOBAL RHYTHM PASS — FINAL
   Goal: every major section has deliberate breathing room on real phones.
   This intentionally overrides old inline padding-top:0 declarations.
   ======================================================================== */
@media (max-width:767px){
  /* A consistent major-section rhythm across the entire site. */
  main > section.section{
    padding-top:76px !important;
    padding-bottom:76px !important;
  }

  /* Keep the top of the landing page compact; the hero has its own rhythm. */
  main > section.hero,
  main > section:first-of-type.hero{
    padding-top:48px !important;
  }

  /* Homepage anchors with intentional custom rhythm. */
  #experience{
    padding-top:64px !important;
    padding-bottom:72px !important;
  }
  #value{
    padding-top:72px !important;
    padding-bottom:80px !important;
  }
  #capabilities{
    padding-top:84px !important;
    padding-bottom:84px !important;
  }

  /* Never allow an old inline padding-top:0 to collapse a section. */
  main > section.section[style*="padding-top:0"]{
    padding-top:76px !important;
  }

  /* Stronger separation between consecutive major sections. */
  main > section.section + section.section{
    --mobile-section-separation:76px;
  }

  /* Headings should never visually collide with the content above/below. */
  main > section.section .section-head{
    margin-bottom:38px;
  }
  main > section.section .section-head h2{
    margin:0;
  }
  main > section.section .section-head p{
    margin-top:14px;
    line-height:1.6;
  }

  /* Timeline: keep the final item clearly separated from the next section. */
  .timeline{
    gap:32px;
    margin-top:4px;
    padding-bottom:4px;
  }
  .timeline .tstep:last-child{
    padding-bottom:8px;
  }

  /* Industry/use-case cards: intentional card-to-card and card-to-CTA spacing. */
  .usecase-grid{
    gap:18px;
  }
  .usecase-grid + .fade-up{
    margin-top:32px !important;
  }

  /* Before/after: don't let the next section visually touch the card. */
  .ba-grid{
    gap:22px;
  }

  /* Two-column sections become stacked editorial blocks on mobile. */
  .two-col{
    gap:56px;
    align-items:start;
  }
  .two-col .section-head{
    margin-bottom:32px !important;
  }

  /* Mobile app section: copy and mockup need a clear separation. */
  .two-col > .fade-up + .card{
    margin-top:4px !important;
  }

  /* Capability cards are independent components, never a merged stack. */
  .capability-stack{
    gap:32px !important;
  }
  .capability-stack .cap-strip{
    margin:0 !important;
  }

  /* Demo carousel and its CTA need clear boundaries. */
  #experience .xp-grid{
    margin-bottom:4px;
  }
  #experience .demo-cta{
    margin-top:32px !important;
    margin-bottom:0 !important;
  }

  /* Footer should begin after a clean content-to-footer transition. */
  main + footer,
  footer{
    margin-top:0;
  }

  /* The sticky CTA must not create a permanent blank block. */
  body.has-sticky-cta{
    padding-bottom:0 !important;
  }
  body.has-sticky-cta.sticky-cta-active{
    padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width:380px){
  main > section.section{
    padding-top:68px !important;
    padding-bottom:68px !important;
  }
  #experience{padding-top:56px !important;padding-bottom:64px !important;}
  #value{padding-top:64px !important;padding-bottom:72px !important;}
  #capabilities{padding-top:76px !important;padding-bottom:76px !important;}
  .capability-stack{gap:26px !important;}
  .timeline{gap:28px;}
  .two-col{gap:48px;}
}