/* ===============================================================
   Timeline Studio Landing Page — styles.css
   Warm taupe theme with dark hero
   =============================================================== */

/* ─── RESET & FOUNDATIONS ─── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Warm taupe palette */
  --bg-body:#faf9f5;
  --bg-section:#f7f5f2;
  --bg-card:#fefdfb;
  --brd-card:#e8e5e0;
  --brd-card-hover:#d4d0ca;

  /* Dark palette (hero, footer, nav) */
  --dark-900:#0f172a;
  --dark-800:#1e293b;
  --dark-700:#334155;
  --dark-600:#475569;
  --dark-500:#64748b;
  --dark-400:#94a3b8;
  --dark-300:#cbd5e1;
  --dark-200:#e2e8f0;
  --dark-50:#f8fafc;

  /* Text */
  --tx-primary:#1c1917;
  --tx-secondary:#78716c;
  --tx-muted:#a8a29e;
  --tx-light:#f8fafc;

  /* Accent */
  --blue-500:#3b82f6;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --amber-400:#fbbf24;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --red-500:#ef4444;
  --red-600:#dc2626;

  /* Typography */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--tx-primary);background:var(--bg-body);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}

.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ─── NAVIGATION ─── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s ease}
.nav.scrolled{background:rgba(15,23,42,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center}
.nav-name{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{font-size:14px;font-weight:500;color:var(--dark-400);transition:color .2s}
.nav-link:hover{color:#fff}

/* Mobile nav toggle */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}
.nav-toggle svg{display:block}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:600;transition:all .2s ease}
.btn-primary{background:var(--blue-500);color:#fff}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,130,246,.3)}
.btn-secondary{background:transparent;color:var(--dark-300);border:1.5px solid rgba(203,213,225,.25)}
.btn-secondary:hover{border-color:rgba(203,213,225,.5);color:#fff;background:rgba(255,255,255,.04)}
.btn-dark{background:var(--dark-900);color:#fff}
.btn-dark:hover{background:var(--dark-800);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.btn-warm{background:var(--tx-primary);color:var(--bg-body)}
.btn-warm:hover{background:#292524;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn-outline{background:transparent;color:var(--tx-primary);border:1.5px solid var(--brd-card)}
.btn-outline:hover{border-color:var(--brd-card-hover);background:var(--bg-section)}
.btn-sm{padding:9px 22px;font-size:13px}

/* ─── BADGE ─── */
.badge{display:inline-block;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.badge-blue{background:rgba(59,130,246,.12);color:#60a5fa}
.badge-green{background:rgba(22,163,74,.1);color:var(--green-600)}
.badge-warm{background:rgba(120,113,108,.1);color:var(--tx-secondary)}

/* ─── HERO ─── */
.hero{background:linear-gradient(165deg,#0f172a 0%,#1e293b 40%,#0f172a 100%);position:relative;overflow:hidden;padding:120px 0 80px;text-align:center}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:80%;height:120%;background:radial-gradient(ellipse,rgba(59,130,246,.08) 0%,transparent 70%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-30%;left:-10%;width:60%;height:80%;background:radial-gradient(ellipse,rgba(245,158,11,.06) 0%,transparent 70%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero h1{font-family:var(--font-display);font-size:54px;font-weight:600;line-height:1.12;color:var(--dark-50);letter-spacing:-.02em;margin-bottom:20px;max-width:640px;margin-left:auto;margin-right:auto}
.hero h1 em{font-style:normal;color:var(--amber-400)}
.hero-sub{font-size:18px;line-height:1.65;color:var(--dark-400);margin-bottom:36px;max-width:540px;margin-left:auto;margin-right:auto}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;justify-content:center;align-items:flex-start}
.cta-primary-wrap{display:flex;flex-direction:column;align-items:center}
.live-indicator{font-size:12px;font-weight:600;color:#ef4444;margin-top:6px;letter-spacing:.02em}
.demo-mobile-preview{display:none}

/* ─── LIVE DEMO ─── */
.demo-wrap{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;position:relative}
.demo-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
.demo-toolbar .dot{width:10px;height:10px;border-radius:50%;margin-right:2px}
.demo-toolbar .dot-r{background:#ef4444;opacity:.7}
.demo-toolbar .dot-y{background:#eab308;opacity:.7}
.demo-toolbar .dot-g{background:#22c55e;opacity:.7}
.demo-toolbar-title{font-size:12px;color:var(--dark-500);font-weight:500;margin-left:8px;font-family:var(--font-mono)}
.demo-toolbar-right{margin-left:auto;display:flex;gap:6px;align-items:center}
.demo-pill{font-size:10px;padding:3px 10px;border-radius:4px;font-weight:600;letter-spacing:.03em}
.demo-pill-blue{background:rgba(59,130,246,.15);color:#60a5fa}
.demo-pill-amber{background:rgba(245,158,11,.15);color:#fbbf24}

.tl-demo{overflow-x:auto;overflow-y:hidden;position:relative;background:#fff;cursor:default;-webkit-overflow-scrolling:touch}
.tl-demo::-webkit-scrollbar{height:6px}
.tl-demo::-webkit-scrollbar-track{background:transparent}
.tl-demo::-webkit-scrollbar-thumb{background:var(--dark-300);border-radius:3px}

.demo-caption{font-size:12px;color:var(--dark-600);text-align:center;padding:10px 0 2px}
.demo-caption svg{vertical-align:middle;margin-right:4px}
.demo-launch{text-align:center;padding:10px 0 8px;margin-top:-2px;position:relative;z-index:1}
.demo-launch-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--amber-400);text-decoration:none;padding:8px 18px;border-radius:6px;border:1px solid rgba(251,191,36,.3);background:rgba(251,191,36,.06);transition:all .2s ease;letter-spacing:.01em}
.demo-launch-btn:hover{color:#fcd34d;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12);box-shadow:0 0 12px rgba(251,191,36,.15)}

/* Timeline demo internals */
.tld-canvas{position:relative;min-height:100%}
.tld-hdr{display:flex;position:sticky;top:0;z-index:2}
.tld-hdr-row{display:flex}
.tld-hdr-cell{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;border-right:1px solid rgba(255,255,255,.08);white-space:nowrap;user-select:none}
.tld-hdr-cell.sub{color:var(--dark-400);background:var(--dark-800);font-size:9.5px;font-weight:500}
.tld-corner{position:sticky;left:0;z-index:3;display:flex;flex-direction:column}
.tld-corner-cell{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--dark-500);letter-spacing:.04em;text-transform:uppercase}
.tld-body{position:relative;margin-top:-1px}
.tld-lane{position:relative;border-bottom:1px solid rgba(0,0,0,.06)}
.tld-lane:last-of-type{border-bottom:none}
.tld-lane-label{position:sticky;left:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:11px;font-weight:600;color:#fff;letter-spacing:.01em;white-space:nowrap}
.tld-bar{position:absolute;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:10px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;cursor:default;transition:filter .15s ease,box-shadow .15s ease;z-index:1}
.tld-bar:hover{filter:brightness(1.15);box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:5}
.tld-bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.18);border-radius:4px 0 0 4px;pointer-events:none}
.tld-bar-label{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis}
.tld-ms{position:absolute;z-index:1;cursor:default;transition:transform .15s ease}
.tld-ms:hover{transform:scale(1.3);z-index:5}
.tld-ms-label{position:absolute;top:-2px;left:18px;font-size:10px;font-weight:500;color:var(--dark-700);white-space:nowrap;pointer-events:none;text-align:left}
.tld-ms-label-left{left:auto;right:18px;text-align:right}
.tld-ms-date{display:block;font-size:9px;color:var(--dark-400);font-weight:400;margin-top:1px;text-align:inherit}
.tld-ms-lines-svg{z-index:3}
.tld-dep{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.tld-today{position:absolute;top:0;bottom:0;width:1.5px;background:var(--red-500);opacity:.5;z-index:1}
.tld-today-label{position:absolute;top:-16px;font-size:8px;font-weight:600;color:var(--red-500);white-space:nowrap;transform:translateX(-50%);letter-spacing:.03em}
.tld-gridcol{position:absolute;top:0;bottom:0;border-right:1px solid rgba(0,0,0,.06)}
.tld-bar.tld-crit{animation:tldCritPulse 1.8s ease infinite alternate}
@keyframes tldCritPulse{0%{box-shadow:0 0 0 1px rgba(251,191,36,.25)}100%{box-shadow:0 0 8px 2px rgba(251,191,36,.5)}}
.tld-crit.tld-ms svg{filter:drop-shadow(0 0 4px rgba(251,191,36,.6))}
.tld-tooltip{position:fixed;z-index:999;background:var(--dark-900);color:#fff;font-size:12px;padding:8px 12px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:240px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.tld-tooltip.visible{opacity:1}
.tld-tooltip b{font-weight:600}
.tld-tooltip .tt-row{display:flex;justify-content:space-between;gap:12px}
.tld-tooltip .tt-label{color:var(--dark-400)}

/* ─── SOCIAL PROOF ─── */
.proof{border-bottom:1px solid var(--brd-card);padding:28px 0;text-align:center;background:var(--bg-body)}
.proof-label{font-size:13px;font-weight:500;color:var(--tx-muted);margin-bottom:20px;letter-spacing:.03em}
.proof-logos{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--tx-secondary)}
.proof-logos .sep{opacity:.4}

/* ─── PAIN POINTS ─── */
.pain{padding:64px 0;background:var(--bg-body)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pain-card{padding:28px;border-radius:14px;background:var(--bg-card);border:1px solid var(--brd-card);transition:all .25s ease}
.pain-card:hover{border-color:var(--brd-card-hover);box-shadow:0 4px 20px rgba(0,0,0,.04)}
.pain-card .pain-icon{font-size:28px;margin-bottom:14px}
.pain-card h3{font-size:16px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em;color:var(--tx-primary)}
.pain-card p{font-size:14px;color:var(--tx-secondary);line-height:1.6}
.pain-card .metric{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:13px;color:var(--blue-500);font-weight:500;background:rgba(59,130,246,.06);padding:4px 10px;border-radius:6px}
.pain-header{text-align:center;max-width:540px;margin:0 auto 40px}
.pain-header h2{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px;line-height:1.15;color:var(--tx-primary)}
.pain-header p{font-size:16px;color:var(--tx-secondary);line-height:1.6}

/* ─── SECTIONS (shared) ─── */
.section{padding:80px 0}
.section-alt{background:var(--bg-section)}
.section-center{text-align:center;max-width:600px;margin:0 auto 56px}
.section-center h2{font-family:var(--font-display);font-size:38px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;color:var(--tx-primary)}
.section-center p{font-size:16px;color:var(--tx-secondary);line-height:1.6}

/* ─── WORKFLOW STEPS ─── */
.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:step}
.workflow-step{position:relative;padding:32px 28px;border-radius:14px;background:var(--bg-card);border:1px solid var(--brd-card);transition:all .25s ease}
.workflow-step:hover{border-color:var(--brd-card-hover);box-shadow:0 6px 24px rgba(0,0,0,.05);transform:translateY(-2px)}
.workflow-step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:24px;width:28px;height:28px;border-radius:50%;background:var(--blue-500);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.workflow-step h3{font-size:17px;font-weight:600;margin-bottom:8px;margin-top:6px;letter-spacing:-.01em}
.workflow-step p{font-size:14px;color:var(--tx-secondary);line-height:1.6}

/* Connector arrows between steps */
.workflow-connector{display:none}
@media(min-width:769px){
  .workflow-grid{position:relative}
  .workflow-connector{display:block;position:absolute;top:50%;color:var(--brd-card);font-size:20px;transform:translateY(-50%)}
  .workflow-connector:nth-of-type(1){left:calc(33.33% - 10px)}
  .workflow-connector:nth-of-type(2){left:calc(66.66% - 10px)}
}

/* ─── WORKFLOW STEP VISUALS ─── */
.wf-visual{height:88px;margin-bottom:16px;position:relative;overflow:hidden;border-radius:8px;background:var(--bg-section)}

/* V1: Swimlane headers + bars (mimics actual app) */
.wf-v1{display:flex;flex-direction:column;gap:1px;padding:6px}
.wf-lane{display:flex;height:18px;opacity:0;transform:translateX(-8px);overflow:hidden;border-radius:2px}
.wf-lane-hdr{width:52px;font-size:7px;font-weight:700;text-transform:uppercase;color:var(--tx-secondary);letter-spacing:.03em;display:flex;align-items:center;padding-left:8px;border-left:3px solid;background:rgba(0,0,0,.03);flex-shrink:0}
.wf-l1 .wf-lane-hdr{border-color:#3b82f6}
.wf-l2 .wf-lane-hdr{border-color:#8b5cf6}
.wf-l3 .wf-lane-hdr{border-color:#10b981}
.wf-lane-track{flex:1;position:relative;background:rgba(255,255,255,.5);border-bottom:1px solid rgba(0,0,0,.04)}
.wf-lane-bar{position:absolute;top:3px;bottom:3px;border-radius:3px}
.wf-l1 .wf-lane-bar{background:#3b82f6;width:55%;left:3%}
.wf-l2 .wf-lane-bar{background:#8b5cf6;width:40%;left:20%}
.wf-l3 .wf-lane-bar{background:#10b981;width:45%;left:12%}
.wf-l-sub{height:13px}
.wf-l-sub .wf-lane-hdr{padding-left:14px;font-size:6px;border-left-width:2px;opacity:.7}
.wf-l2s .wf-lane-hdr{border-color:#a78bfa}
.wf-l2s .wf-lane-bar{background:#a78bfa;width:30%;left:25%;opacity:.7}
.in-view .wf-lane{animation:wfLaneIn .4s ease forwards}
.in-view .wf-l1{animation-delay:.1s}
.in-view .wf-l2{animation:wfLaneAdd .5s cubic-bezier(.34,1.56,.64,1) .3s forwards}
.in-view .wf-l2s{animation:wfLaneIn .3s ease .5s forwards}
.in-view .wf-l3{animation-delay:.7s}
@keyframes wfLaneIn{to{opacity:1;transform:translateX(0)}}
@keyframes wfLaneAdd{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}

/* V2: Dependencies + critical path simulation */
.wf-v2{position:relative}
.wf-bar{height:12px;border-radius:3px;transform:scaleX(0);transform-origin:left;opacity:0;position:absolute}
.wf-b1{background:#3b82f6;width:25%;left:5%;top:18px}
.wf-b2{background:#8b5cf6;width:25%;left:32%;top:38px}
.wf-b3{background:#ef4444;width:25%;left:59%;top:58px}
.wf-dep-svg{position:absolute;top:0;left:0;width:100%;height:100%}
.wf-dep-line{stroke-dasharray:40;stroke-dashoffset:40}
.wf-crit-pill{position:absolute;top:4px;right:4px;font-size:7px;font-weight:700;letter-spacing:.02em;color:#b45309;background:rgba(251,191,36,.12);padding:2px 6px;border-radius:3px;opacity:0;z-index:1}
.in-view .wf-b1{animation:wfBarIn .35s ease .1s forwards,wfCritHighlight 1.5s ease 2.2s infinite alternate}
.in-view .wf-b2{animation:wfBarIn .35s ease .3s forwards,wfCritHighlight 1.5s ease 2.2s infinite alternate}
.in-view .wf-b3{animation:wfBarIn .35s ease .5s forwards,wfCritHighlight 1.5s ease 2.2s infinite alternate}
.in-view .wf-dep-line{animation:wfDepDraw .5s ease forwards}
.in-view .wf-dl1{animation-delay:.6s}
.in-view .wf-dl2{animation-delay:.8s}
.in-view .wf-crit-pill{animation:wfPillIn .3s ease 1.5s forwards,wfPillClick .2s ease 2.0s}
@keyframes wfBarIn{to{transform:scaleX(1);opacity:1}}
@keyframes wfDepDraw{to{stroke-dashoffset:0}}
@keyframes wfCritHighlight{0%{box-shadow:0 0 0 1px rgba(251,191,36,.3)}100%{box-shadow:0 0 6px 2px rgba(251,191,36,.5)}}
@keyframes wfPillIn{to{opacity:1}}
@keyframes wfPillClick{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(251,191,36,.4)}50%{transform:scale(.92);box-shadow:0 0 0 3px rgba(251,191,36,.2)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(251,191,36,0)}}

/* V3: Present mode (laser + toolbar) */
.wf-v3{display:flex;align-items:center;justify-content:center;padding:8px 12px}
.wf-screen{width:100%;height:72px;border-radius:6px;background:#1e293b;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.wf-screen-bar{position:absolute;height:10px;border-radius:3px;opacity:0}
.wf-sb1{top:18px;left:12%;width:35%;background:#3b82f6}
.wf-sb2{top:40px;left:20%;width:40%;background:#10b981}
.wf-laser{position:absolute;width:8px;height:8px;border-radius:50%;background:#ef4444;opacity:0;box-shadow:0 0 8px 2px rgba(239,68,68,.5);top:30px;left:20%}
.wf-toolbar{position:absolute;bottom:6px;left:8px;display:flex;gap:3px;opacity:0;background:rgba(255,255,255,.1);padding:3px 6px;border-radius:4px}
.wf-tb-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}
.in-view .wf-screen-bar{animation:wfBarIn .4s ease forwards}
.in-view .wf-sb1{animation-delay:.2s}
.in-view .wf-sb2{animation-delay:.4s}
.in-view .wf-laser{animation:wfLaserMove 3s ease .8s infinite}
.in-view .wf-toolbar{animation:wfToolbarIn .3s ease 1s forwards}
@keyframes wfLaserMove{0%{opacity:0;left:20%;top:30px}5%{opacity:1}25%{left:55%;top:22px}50%{left:70%;top:38px}75%{left:35%;top:26px}95%{opacity:1}100%{opacity:0;left:20%;top:30px}}
@keyframes wfToolbarIn{to{opacity:1}}

/* ─── FEATURES GRID ─── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-card{padding:32px;border-radius:14px;background:var(--bg-card);border:1px solid var(--brd-card);transition:all .25s ease}
.feature-card:hover{border-color:var(--brd-card-hover);box-shadow:0 8px 32px rgba(0,0,0,.05);transform:translateY(-2px)}
.feature-icon{font-size:28px;margin-bottom:16px}
.feature-card h3{font-size:17px;font-weight:600;margin-bottom:8px;letter-spacing:-.01em}
.feature-card p{font-size:14px;color:var(--tx-secondary);line-height:1.6}
.chrome-note{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:100px;background:rgba(66,133,244,.06);font-size:12px;font-weight:500;color:#4285F4}

/* ─── COMPARISON TABLE ─── */
.compare-table{max-width:1000px;margin:0 auto}
.compare-header,.compare-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;padding:14px 0}
.compare-header{border-bottom:2px solid var(--brd-card);font-size:13px;font-weight:600;color:var(--tx-secondary);letter-spacing:.03em}
.compare-header .ts-col{color:var(--blue-500);font-weight:700;font-size:14px}
.compare-row{border-bottom:1px solid var(--brd-card);font-size:14px;align-items:center}
.compare-row .feature-name{font-weight:500;color:#44403c}
.check{color:var(--green-600);font-weight:700}
.cross{color:var(--red-600);font-weight:700}
.muted{color:var(--tx-secondary)}

/* ─── TESTIMONIALS ─── */
.testimonials-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto}
.testimonial{padding:36px;border-radius:14px;background:var(--bg-card);border:1px solid var(--brd-card);position:relative}
.testimonial::before{content:'\201C';position:absolute;top:20px;left:28px;font-family:var(--font-display);font-size:64px;color:var(--brd-card);line-height:1}
.testimonial p{font-size:15px;line-height:1.7;color:#44403c;margin-bottom:24px;padding-top:28px;position:relative;z-index:1}
.testimonial-name{font-size:14px;font-weight:600;color:var(--tx-primary)}
.testimonial-co{font-size:13px;color:var(--tx-muted)}

/* ─── PRICING ─── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto}
.pricing-card{padding:40px 32px;border-radius:14px;border:1px solid var(--brd-card);background:var(--bg-card);transition:all .25s ease;position:relative;display:flex;flex-direction:column}
.pricing-card:hover{border-color:var(--brd-card-hover);box-shadow:0 8px 32px rgba(0,0,0,.05)}
.pricing-featured{border-color:var(--blue-500);box-shadow:0 0 0 1px var(--blue-500),0 8px 32px rgba(59,130,246,.1)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue-500);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;letter-spacing:.04em;white-space:nowrap}
.pricing-tier{font-size:15px;font-weight:600;color:var(--tx-secondary);margin-bottom:8px}
.pricing-price{font-family:var(--font-display);font-size:44px;font-weight:600;color:var(--tx-primary)}
.pricing-price-note{font-size:14px;color:var(--tx-muted);margin-left:4px}
.pricing-desc{font-size:14px;color:var(--tx-secondary);margin:8px 0 28px;line-height:1.5}
.pricing-features{list-style:none;margin-bottom:32px;flex:1}
.pricing-features li{font-size:14px;color:#44403c;padding:6px 0;display:flex;align-items:flex-start;gap:10px}
.pricing-features li::before{content:'\2713';color:var(--green-600);font-size:15px;font-weight:700;flex-shrink:0}
.pricing-card .btn{width:100%;justify-content:center}
.pricing-footnote{font-size:12px;color:var(--tx-muted);margin-top:16px;line-height:1.5;font-style:italic}
.pricing-footnote-global{text-align:center;max-width:600px;margin:16px auto 0;font-size:12px;color:var(--tx-muted);line-height:1.5;font-style:italic}
.pricing-note{text-align:center;max-width:600px;margin:32px auto 0;font-size:14px;color:var(--tx-secondary);line-height:1.6}

/* ─── BETA SIGNUP ─── */
.beta-signup{padding:80px 0;background:var(--bg-section);text-align:center}
.beta-signup h2{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px;color:var(--tx-primary)}
.beta-signup .beta-sub{font-size:16px;color:var(--tx-secondary);margin-bottom:32px;line-height:1.6;max-width:520px;margin-left:auto;margin-right:auto}
.beta-form{display:flex;gap:10px;max-width:480px;margin:0 auto 16px;flex-wrap:wrap;justify-content:center}
.beta-form input{flex:1;min-width:200px;padding:14px 18px;border:1.5px solid var(--brd-card);border-radius:8px;font-family:var(--font-body);font-size:15px;background:var(--bg-card);color:var(--tx-primary);outline:none;transition:border-color .2s}
.beta-form input:focus{border-color:var(--blue-500)}
.beta-form input::placeholder{color:var(--tx-muted)}
.beta-form button{padding:14px 28px;white-space:nowrap}
.beta-note{font-size:13px;color:var(--tx-muted);max-width:480px;margin:0 auto}
.signup-success{font-size:16px;font-weight:600;color:var(--green-600);padding:16px 0}

/* ─── FINAL CTA ─── */
.final-cta{background:linear-gradient(165deg,#0f172a,#1e293b,#0f172a);padding:80px 0;text-align:center}
.final-cta h2{font-family:var(--font-display);font-size:42px;font-weight:600;color:var(--dark-50);letter-spacing:-.02em;margin-bottom:16px;line-height:1.15}
.final-cta p{font-size:17px;color:var(--dark-400);margin-bottom:36px;line-height:1.6}
.final-cta .cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;align-items:flex-start}
.final-cta .cta-note{font-size:13px;color:var(--dark-600);margin-top:20px}

/* ─── FOOTER ─── */
footer{padding:48px 0 32px;background:var(--dark-900);border-top:1px solid rgba(255,255,255,.06)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;margin-bottom:40px}
.footer-brand p{font-size:13px;color:var(--dark-500);max-width:280px;line-height:1.6;margin-top:12px}
.footer-cols{display:flex;gap:56px}
.footer-col-title{font-size:12px;font-weight:600;color:var(--dark-500);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:var(--dark-400);padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--dark-200)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:13px;color:var(--dark-600)}
.footer-social{display:flex;gap:20px}
.footer-social a{font-size:13px;color:var(--dark-500);transition:color .2s}
.footer-social a:hover{color:var(--dark-400)}

/* ─── ANIMATIONS ─── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:fadeInUp .6s ease forwards}
.anim-d1{animation-delay:.1s;opacity:0}
.anim-d2{animation-delay:.2s;opacity:0}
.anim-d3{animation-delay:.3s;opacity:0}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .features-grid,.workflow-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .pricing-card:last-child{grid-column:1 / -1;max-width:460px;margin:0 auto;width:100%}
  .pain-grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  /* Hero */
  .hero{padding:100px 0 40px}
  .hero h1{font-size:34px}
  .hero-sub{font-size:15px;margin-bottom:28px}
  .hero-btns{flex-direction:column;align-items:center;margin-bottom:16px}

  /* Hide interactive demo on mobile — show mini Gantt preview instead */
  .demo-wrap{display:none}
  .demo-mobile-preview{display:block;margin-top:16px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
  .mini-gantt{padding:12px 16px}
  .mini-row{display:flex;align-items:center;margin-bottom:8px}
  .mini-row:last-child{margin-bottom:0}
  .mini-label{font-size:9px;font-weight:600;color:var(--dark-400);width:72px;flex-shrink:0;text-align:right;padding-right:10px}
  .mini-track{flex:1;height:16px;position:relative;background:rgba(255,255,255,.03);border-radius:3px}
  .mini-bar{position:absolute;height:100%;border-radius:3px}
  .mini-bar.crit{box-shadow:0 0 0 1.5px #ef4444}
  .mini-gantt-caption{text-align:center;font-size:12px;color:var(--dark-500);padding:8px 0 10px;border-top:1px solid rgba(255,255,255,.06)}

  /* Mobile: hide Try It Free (desktop-only app), promote Join the Beta */
  .cta-primary-wrap{display:none}
  .hero-btns .btn-secondary,.final-cta .btn-secondary{background:var(--blue-500);color:#fff;border-color:var(--blue-500);padding:14px 32px;font-size:15px}

  /* Compact sections */
  .section{padding:48px 0}
  .section-center{margin-bottom:32px}
  .section-center h2{font-size:28px}
  .section-center p{font-size:14px}
  .pain{padding:36px 0}
  .pain-header{margin-bottom:24px}
  .pain-header h2{font-size:24px}
  .beta-signup{padding:48px 0}
  .beta-signup h2{font-size:28px}
  .final-cta{padding:48px 0}
  .final-cta h2{font-size:28px}
  .proof{padding:16px 0}
  .proof-label{font-size:11px;margin-bottom:12px}
  .proof-logos{font-size:13px}

  /* Compact cards */
  .pain-card{padding:20px}
  .pain-card h3{font-size:15px}
  .pain-card p{font-size:13px;line-height:1.5}
  .feature-card{padding:24px 20px}
  .feature-card h3{font-size:15px}
  .feature-card p{font-size:13px}
  .feature-icon{font-size:24px;margin-bottom:10px}
  .workflow-step{padding:24px 20px}
  .workflow-step h3{font-size:15px}
  .workflow-step p{font-size:13px}
  .wf-visual{display:none}
  .pricing-card{padding:28px 20px}
  .testimonial{padding:24px 20px}
  .testimonial p{font-size:14px;padding-top:20px}

  /* Grids */
  .features-grid,.workflow-grid,.pricing-grid{grid-template-columns:1fr;gap:14px}
  .pricing-card:last-child{max-width:none}
  .testimonials-grid{grid-template-columns:1fr;gap:14px}
  .pain-grid{gap:14px}

  /* Hide comparison table on mobile (too complex for small screens) */
  #compare{display:none}

  /* Nav */
  .nav-inner{position:relative}
  .nav-links .nav-link{display:none}
  .nav-links .btn{padding:7px 14px;font-size:12px;white-space:nowrap}
  .nav-toggle{display:flex}
  .nav-inner.nav-open .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--dark-900);padding:16px 24px;gap:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:100}
  .nav-inner.nav-open .nav-links .nav-link{display:block;color:#fff;padding:8px 0;font-size:15px}

  /* Footer */
  .footer-cols{flex-direction:column;gap:24px}
  .final-cta .cta-btns{flex-direction:column;align-items:center}

  /* Beta form */
  .beta-form{flex-direction:column}
  .beta-form input{min-width:0}
}