/* ===== FONTS ===== */
@font-face{font-family:"Canela";src:url("fonts/Canela-Regular.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Canela";src:url("fonts/Canela-RegularItalic.woff2") format("woff2");font-display:swap;font-style:italic;font-weight:400}
@font-face{font-family:"Canela";src:url("fonts/Canela-Light.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:300}
@font-face{font-family:"Canela";src:url("fonts/Canela-Medium.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Canela Text";src:url("fonts/CanelaText-Regular.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Canela Text";src:url("fonts/CanelaText-Medium.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Open Runde";src:url("fonts/OpenRunde-Regular.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Open Runde";src:url("fonts/OpenRunde-Medium.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Open Runde";src:url("fonts/OpenRunde-Semibold.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:600}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --dark:#1a1615;--dark2:#453f3d;--brown:#00152c;--muted:#757170;
  --border:#e4e2e2;--blue:#00152c;--cream:#eddfd0;--beige:#f1ebe5;
  --beige-card:#f0eae5;--off-white:#f4f1ee;--bg:#f9f8f8;--white:#fff;
  --green:#0ea158;
  --font-h:"Canela",Georgia,serif;
  --font-b:"Open Runde",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-m:"Fragment Mono",monospace;
  --max:1200px;--inner:1072px;--gap:120px;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-b);color:var(--dark);background:var(--bg);line-height:1.5;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#fafafa 0%,#f9f8f8 36%,#f4f1ee 45%,#f4f1ee 51%,#e2ecf6 73%,#a7cbf2 125%)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--inner);margin:0 auto;padding:0 24px}

/* ===== TYPOGRAPHY ===== */
.display-heading{font-family:var(--font-h);font-size:clamp(36px,5vw,52px);font-weight:400;line-height:1.12;letter-spacing:-0.03em;color:var(--dark);text-align:center;margin-bottom:56px}
.heading-2{font-family:var(--font-h);font-size:44px;font-weight:400;line-height:1.2;letter-spacing:-0.03em;color:var(--dark);margin-bottom:20px}
.heading-3{font-family:var(--font-h);font-size:32px;font-weight:400;line-height:1.2;letter-spacing:-0.03em;color:var(--dark)}
.heading-6{font-family:var(--font-h);font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-0.03em;color:var(--dark);margin-bottom:8px}
.body-text{font-family:var(--font-b);font-size:18px;font-weight:400;line-height:1.55;color:var(--dark2);margin-bottom:12px}
.body-small{font-family:var(--font-b);font-size:16px;font-weight:400;line-height:1.55;color:var(--dark2)}
.body-small strong{color:var(--dark)}
.body-muted{font-family:var(--font-b);font-size:18px;line-height:1.55;color:var(--muted);margin-bottom:4px}
.body-muted-sm{font-family:var(--font-b);font-size:16px;line-height:1.55;color:var(--muted)}
.eyebrow-upper{display:block;font-family:var(--font-b);font-size:15px;font-weight:600;text-transform:uppercase;color:var(--brown);margin-bottom:20px}
.mono-label{display:block;font-family:var(--font-m);font-size:13px;color:var(--muted);margin-bottom:12px}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-b);font-size:15px;font-weight:500;padding:12px 28px;border-radius:100px;border:none;cursor:pointer;transition:transform .25s,box-shadow .25s;will-change:transform}
.btn-dark{background:var(--blue);color:var(--white)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,21,44,.25)}
.btn-white{background:var(--white);color:var(--dark)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.btn-secondary{background:var(--off-white);color:var(--dark);border:1px solid var(--border)}
.btn-secondary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.btn-full{width:100%}

/* ===== NAV (simple: logo left, CTA right) ===== */
.navbar{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:100;width:100%;padding:20px 0;transition:width .5s cubic-bezier(.4,.0,.2,1),top .5s cubic-bezier(.4,.0,.2,1),padding .5s cubic-bezier(.4,.0,.2,1),background .5s cubic-bezier(.4,.0,.2,1),backdrop-filter .4s,border-radius .5s cubic-bezier(.4,.0,.2,1),box-shadow .5s cubic-bezier(.4,.0,.2,1),border .5s cubic-bezier(.4,.0,.2,1);background:transparent;border-radius:0;box-shadow:none;border:1px solid transparent}
.nav-bar{max-width:var(--inner);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;transition:padding .5s cubic-bezier(.4,.0,.2,1)}
.nav-logo-img{height:88px;width:auto;transition:height .4s cubic-bezier(.4,.0,.2,1)}
.nav-cta{font-family:var(--font-b);font-size:14px;font-weight:500;color:var(--white);background:var(--blue);padding:12px 28px;border-radius:100px;transition:transform .2s,box-shadow .2s,padding .4s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* Scrolled: liquid glass pill — shrinks from center */
.navbar.scrolled{
  width:min(580px, 92vw);
  top:12px;
  padding:6px 6px;
  border-radius:100px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:
    0 8px 32px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.55);
}
.navbar.scrolled .nav-bar{padding:0 16px}
.navbar.scrolled .nav-logo-img{height:38px}
.navbar.scrolled .nav-cta{padding:10px 22px;font-size:13px}

/* ===== HERO ===== */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:180px 0 0;overflow:clip;min-height:100vh}

/* Background image covering full hero */
.hero-bg-img{position:absolute;inset:0;z-index:0;background:url('assets/hero-bg-full.jpg') center center / cover no-repeat}

/* Subtle grain overlay */
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.18;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:128px 128px;
}

/* Decorative clouds - parallax */
.hero-deco{position:absolute;z-index:2;pointer-events:none;will-change:transform}
.hero-deco img{width:100%;height:auto;opacity:1}
.hero-deco-left{left:-100px;top:3%;width:680px}
.hero-deco-right{right:-100px;top:3%;width:680px}

.hero-content{position:relative;z-index:3;text-align:center;max-width:var(--inner);width:100%;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:20px}

/* Wide hero title */
.hero-title{
  font-family:var(--font-h);
  font-size:clamp(52px,8.5vw,100px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-0.03em;
  color:var(--dark);
  max-width:900px;
}
.hero-title em{font-style:italic;display:inline-block;transition:opacity .4s,transform .4s}
.hero-sub{font-family:var(--font-b);font-size:18px;line-height:1.6;color:var(--dark2);max-width:540px;margin-top:4px}
.hero-sub strong{font-weight:600;color:var(--dark)}

/* Hero video — flush with bottom, 3D perspective tilt like reference */
.hero-media{
  position:relative;z-index:3;
  width:100%;max-width:var(--inner);
  margin-top:48px;padding:0 24px;
  padding-bottom:0;
  perspective:800px;
}
.hero-video{
  width:100%;
  aspect-ratio:1.53;
  border-radius:20px 20px 0 0;
  border:none;
  box-shadow:0 4px 50px rgba(0, 21, 44,.06);
  object-fit:cover;background:#111;
  transform-origin:center bottom;
  transition:transform .1s linear;
  will-change:transform;
  display:block;
}

/* ===== LOGO TICKER ===== */
.ticker-section{padding:80px 0 40px;text-align:center}
.ticker-section--bottom{padding:40px 0 56px}
.ticker-caption{font-family:var(--font-b);font-size:16px;color:var(--muted);margin-bottom:32px}
.ticker-mask{overflow:hidden;max-width:680px;margin:0 auto;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 10%,#000 90%,transparent 100%)}
.ticker-track{display:flex;gap:64px;animation:marquee 30s linear infinite;width:fit-content;align-items:center}
.ticker-img{height:28px;width:auto;opacity:.5;filter:grayscale(100%);flex-shrink:0}
.ticker-logo{height:40px;width:auto;opacity:1;filter:grayscale(100%) brightness(0);flex-shrink:0;transition:opacity .3s}
.ticker-logo:hover{opacity:.7}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(calc(-50% - 32px))}}

/* ===== STRATEGY BANNER (Pretty doesn't sell) ===== */
.strategy-banner{padding:var(--gap) 0 80px}
.strategy-banner-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:40px}
.strategy-banner .eyebrow-upper{text-align:center}
.strategy-banner .display-heading em{font-style:italic}
.strategy-banner-image{width:100%;max-width:820px;border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/3}
.strat-slider{position:relative;width:200%;height:100%;display:flex;transition:transform .7s cubic-bezier(.4,.0,.2,1)}
.strat-slider--right{transform:translateX(-50%)}
.strat-slide{width:50%;height:100%;object-fit:cover;flex-shrink:0}

/* Toggle overlay — sits at bottom center of image */
.strategy-toggle-overlay{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2}
.strategy-toggle-pill{display:flex;gap:4px;background:rgba(0,0,0,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:100px;padding:5px}
.strat-btn{font-family:var(--font-b);font-size:15px;font-weight:500;color:rgba(255,255,255,.8);background:transparent;border:1.5px solid transparent;padding:10px 28px;border-radius:100px;cursor:pointer;transition:all .3s ease}
.strat-btn.active{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.strat-btn:not(.active):hover{color:#fff}

/* ===== SPLIT SECTIONS (What's Inside / Who This Is For) ===== */
.section-split{padding:80px 0}
.split-layout{display:flex;gap:72px;align-items:center}
.split-layout--reverse{flex-direction:row-reverse}
.split-media{flex:1 1 0;min-width:0}
.split-text{flex:1 1 0;min-width:0}
.split-text .heading-2{margin-bottom:20px}
.split-text .btn{margin-top:20px}
.media-frame{border-radius:20px;overflow:hidden;border:2px solid rgba(0,21,44,.12);box-shadow:0 4px 50px rgba(0,21,44,.06)}
.media-frame--layered{position:relative;aspect-ratio:3/4}
.media-frame--layered .media-bg{width:100%;height:120%;object-fit:cover;position:absolute;top:-10%;left:0;will-change:transform}
.media-frame--layered .media-diagram{position:absolute;inset:5.5%;z-index:1;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:6% 5%;box-shadow:0 8px 40px rgba(0,0,0,.18)}
[data-zoom].zoomed .media-bg{transform:scale(1.05)}
.media-img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform 1.6s cubic-bezier(.25,.46,.45,.94)}
[data-zoom].zoomed .media-img{transform:scale(1.05)}

/* Icon tags — pill style with checkmark icons like reference */
.icon-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.icon-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:13px;font-weight:500;color:var(--dark2);background:var(--off-white);border:1px solid var(--border);padding:8px 18px;border-radius:100px}
.tag-icon{width:14px;height:14px;flex-shrink:0}

/* ===== WHAT CHANGES ===== */
.changes-section{padding:var(--gap) 0}
.changes-section .eyebrow-upper{text-align:center}

/* 2-col top row */
.changes-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.changes-row-2>.change-card{min-width:0}
/* 3-col bottom row */
.changes-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}

.change-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:28px 24px;overflow:hidden}
.change-card--lg{padding:32px 28px}
.change-card .heading-6{margin-bottom:16px}

/* ===== DASHBOARD MOCKUP (You stop guessing) ===== */
.dash-mockup{margin-bottom:20px}
.dash-pill{display:flex;align-items:center;gap:10px;background:var(--off-white);border:1px solid var(--border);border-radius:100px;padding:10px 16px;margin-bottom:12px}
.dash-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dash-dot--check svg{width:14px;height:14px}
.dash-dot--ghost{width:32px;height:32px;border-radius:50%;border:1.5px dashed var(--border);background:transparent}
.dash-dot--add{width:32px;height:32px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);color:var(--muted)}
.dash-dot--add svg{width:11px;height:11px}
.dash-row-bottom{display:flex;align-items:center;gap:12px}
.dash-toggle-pill{display:flex;align-items:center;gap:10px;background:var(--off-white);border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-family:var(--font-b);font-size:13px;color:var(--dark2);flex:1}
.dash-toggle{width:36px;height:20px;background:var(--green);border-radius:10px;position:relative;flex-shrink:0;cursor:pointer;transition:background .3s ease}
.dash-toggle-knob{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;right:2px;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:right .3s ease,left .3s ease}
.dash-mockup.off .dash-toggle{background:var(--border)}
.dash-mockup.off .dash-toggle-knob{right:auto;left:2px}
.dash-mockup.off .dash-pill .dash-dot:not(.dash-dot--ghost):not(.dash-dot--add){filter:grayscale(1) opacity(.5);transition:filter .4s ease,opacity .4s ease}
.dash-pill .dash-dot{transition:filter .4s ease,opacity .4s ease}
.dash-icons{display:flex;gap:6px;background:var(--off-white);border:1px solid var(--border);border-radius:100px;padding:8px 12px;color:var(--muted)}

/* ===== SCROLLING PLATFORM LOGOS (Decisions get faster) ===== */
.logo-scroll-wrap{margin-bottom:20px;overflow:hidden;border-radius:12px}
.logo-scroll-row{overflow:hidden;padding:4px 0}
.logo-scroll-track{display:flex;gap:10px;width:max-content}
.logo-scroll-row[data-scroll-logos="left"] .logo-scroll-track{transform:translateX(-20%)}
.logo-scroll-row[data-scroll-logos="right"] .logo-scroll-track{transform:translateX(-30%)}
.platform-tile{width:48px;height:48px;background:var(--off-white);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ===== WIREFRAME CARD ILLUSTRATIONS ===== */
.card-wireframe{margin-bottom:16px;color:var(--muted)}
.card-wireframe svg{display:block;width:44px;height:44px}
.wire-draw,.wire-fade{opacity:0}
[data-animate].visible .wire-draw{animation:wireFadeIn .6s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards}
[data-animate].visible .wire-fade{animation:wireFadeIn .6s ease var(--d,0s) forwards}
@keyframes wireFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ===== FEATURED TESTIMONIAL ===== */
.featured-testimonial{padding:var(--gap) 0 60px;text-align:center}
.big-quote{font-family:var(--font-h);font-size:clamp(32px,5vw,52px);font-weight:400;font-style:italic;line-height:1.2;letter-spacing:-0.03em;color:var(--dark);max-width:720px;margin:0 auto 32px}
.quote-author{display:flex;align-items:center;gap:14px;justify-content:center}
.quote-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.quote-name{display:block;font-family:var(--font-b);font-size:15px;font-weight:600;color:var(--dark)}
.quote-role{font-family:var(--font-b);font-size:13px;color:var(--muted)}

/* ===== TESTIMONIAL CAROUSEL ===== */
.carousel-section{padding:0 0 var(--gap)}
.carousel-mask{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);padding:0 24px}
.carousel-track{display:flex;gap:24px;cursor:grab;user-select:none}
.carousel-track:active{cursor:grabbing}
.tcard{flex-shrink:0;width:320px;background:var(--bg);border:1px solid var(--border);border-radius:24px;overflow:hidden;backdrop-filter:blur(6px)}
.tcard-photo{width:100%;aspect-ratio:1/1.1;overflow:hidden}
.tcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.46,.45,.94)}
.tcard:hover .tcard-photo img{transform:scale(1.04)}
.tcard-body{padding:24px}
.tcard-quote{font-family:var(--font-b);font-size:15px;line-height:1.6;color:var(--dark2);margin-bottom:16px}
.tcard-name{display:block;font-family:var(--font-b);font-size:15px;font-weight:600;color:var(--dark)}
.tcard-role{font-family:var(--font-b);font-size:13px;color:var(--muted)}

/* ===== PRICING (3-column) ===== */
.pricing-section{padding:var(--gap) 0}
.pricing-section .eyebrow-upper{text-align:center}

.pricing-toggle-row{display:flex;justify-content:center;margin-bottom:40px}
.toggle-wrap{display:flex;gap:4px;background:var(--off-white);border-radius:100px;padding:4px;width:fit-content}
.tog{font-family:var(--font-b);font-size:14px;font-weight:500;color:var(--muted);background:transparent;border:none;padding:8px 20px;border-radius:100px;cursor:pointer;transition:.25s}
.tog.active{background:var(--white);color:var(--dark);box-shadow:0 2px 8px rgba(0,0,0,.06)}

.pricing-3col{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:24px;align-items:start}

.pricing-col{padding:32px 24px}
.pricing-col--left{background:transparent}
.pricing-col--left .heading-3{margin-bottom:4px}
.pricing-col--left .body-muted-sm{margin-bottom:20px}

.pricing-col--center{background:var(--beige-card);border-radius:24px;display:flex;flex-direction:column;gap:16px}

.pricing-col--right{background:transparent}

.save-tag{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--green);background:rgba(14,161,88,.1);padding:4px 12px;border-radius:100px;width:fit-content;transition:opacity .3s}
.save-tag.hidden{opacity:0}
.pc-plan{font-family:var(--font-h);font-size:24px;color:var(--dark);letter-spacing:-.02em}
.pc-price{display:flex;align-items:baseline;gap:4px}
.pc-amount{font-family:var(--font-h);font-size:52px;color:var(--dark);letter-spacing:-.03em;line-height:1;transition:.3s}
.pc-per{font-family:var(--font-b);font-size:18px;color:var(--muted)}
.pc-note{font-family:var(--font-b);font-size:14px;color:var(--muted)}
.pc-features{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.pc-feat{display:flex;align-items:center;gap:12px;font-family:var(--font-b);font-size:15px;color:var(--dark2)}

.dash-list{list-style:none;margin-bottom:12px}
.dash-list li{font-family:var(--font-b);font-size:16px;color:var(--dark2);padding:5px 0 5px 20px;position:relative}
.dash-list li::before{content:"—";position:absolute;left:0;color:var(--muted)}

.bestfor-list{list-style:none}
.bestfor-list li{font-family:var(--font-b);font-size:15px;color:var(--dark2);padding:6px 0;padding-left:20px;position:relative}
.bestfor-list li::before{content:"✓";position:absolute;left:0;color:var(--dark)}

/* ===== STATS ===== */
.stats-section{padding:var(--gap) 0;text-align:center}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.stat-num{display:block;font-family:var(--font-h);font-size:clamp(40px,5vw,58px);font-weight:400;letter-spacing:-.03em;color:var(--dark);line-height:1;margin-bottom:8px}
.stat-lbl{font-family:var(--font-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ===== ABOUT ===== */
.about-section{padding:var(--gap) 0}
.about-card{background:var(--beige);border-radius:24px;padding:56px 48px;display:flex;gap:56px;align-items:flex-start}
.about-photo-col{flex:0 0 300px}
.about-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:20px;transition:transform 1.6s cubic-bezier(.25,.46,.45,.94)}
[data-zoom].zoomed{transform:scale(1.02)}
.about-text-col{flex:1}
.about-text-col .eyebrow-upper{margin-bottom:16px}
.about-text-col .heading-2{margin-bottom:28px}

/* ===== FAQ ===== */
.faq-section{padding:var(--gap) 0}
.faq-section .eyebrow-upper{text-align:center}
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 0;background:none;border:none;cursor:pointer;font-family:var(--font-b);font-size:18px;font-weight:500;color:var(--dark);text-align:left}
.faq-chevron{flex-shrink:0;color:var(--muted);transition:transform .3s}
.faq-item.active .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
.faq-item.active .faq-a{max-height:200px;padding-bottom:24px}
.faq-a p{font-family:var(--font-b);font-size:16px;line-height:1.6;color:var(--dark2)}

/* ===== BOTTOM CTA ===== */
.bottom-cta{padding:0 0 var(--gap)}
.bottom-cta-inner{text-align:center;max-width:640px;margin:0 auto}
.bottom-cta .display-heading{margin-bottom:20px}
.bottom-cta .body-text{margin-bottom:4px}
.bottom-cta .btn{margin-top:28px}

/* ===== PAGE CLOUDS (bottom parallax, like reference) ===== */
.page-clouds{position:relative;width:100%;height:0;pointer-events:none;z-index:0}
.page-cloud{position:absolute;bottom:0;opacity:1;will-change:transform}
.page-cloud-l{left:-80px;width:800px;bottom:-240px}
.page-cloud-r{right:-80px;width:800px;bottom:-220px}

/* ===== FOOTER ===== */
.footer{position:relative;padding:48px 0 30px;z-index:1}
.footer-row{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between}
.footer-col{flex:1}
.footer-col--left{text-align:left}
.footer-col--center{display:flex;flex-direction:column;align-items:center;gap:16px}
.footer-col--right{text-align:right}
.footer-logo-img{height:56px;width:auto;opacity:.7}
.footer-social{display:flex;gap:16px}
.footer-social a{color:var(--muted);opacity:.5;transition:opacity .2s}
.footer-social a:hover{opacity:1}
.footer-link--prominent{font-family:var(--font-b);font-size:15px;font-weight:500;color:var(--dark2);opacity:.7;transition:opacity .2s}
.footer-link--prominent:hover{opacity:1}
.footer-sub-links{display:flex;gap:16px;margin-top:6px}
.footer-link--sub{font-family:var(--font-b);font-size:12px;color:var(--dark2);opacity:.5;transition:opacity .2s}
.footer-link--sub:hover{opacity:.8}
.footer-loc{font-family:var(--font-m);font-size:12px;color:var(--muted)}

/* ===== ANIMATED DIAGRAMS ===== */
.diagram-animated svg{overflow:visible}

/* Cycle diagram (Test → Analyze → Optimize) */
.dc-arc{stroke-dasharray:250;stroke-dashoffset:250;opacity:0}
.dc-head,.dc-label,.dc-center-text{opacity:0}

.diagram-animated.visible .dc-arc-1{animation:dcDraw .8s .3s cubic-bezier(.4,0,.2,1) forwards}
.diagram-animated.visible .dc-label-1{animation:dcFade .5s .5s ease forwards}
.diagram-animated.visible .dc-head-1{animation:dcFade .3s .9s ease forwards}
.diagram-animated.visible .dc-arc-2{animation:dcDraw .8s .9s cubic-bezier(.4,0,.2,1) forwards}
.diagram-animated.visible .dc-label-2{animation:dcFade .5s 1.1s ease forwards}
.diagram-animated.visible .dc-head-2{animation:dcFade .3s 1.5s ease forwards}
.diagram-animated.visible .dc-arc-3{animation:dcDraw .8s 1.5s cubic-bezier(.4,0,.2,1) forwards}
.diagram-animated.visible .dc-label-3{animation:dcFade .5s 1.7s ease forwards}
.diagram-animated.visible .dc-head-3{animation:dcFade .3s 2.1s ease forwards}
.diagram-animated.visible .dc-center-text{animation:dcFade .5s 2.3s ease forwards}
.diagram-animated.visible .dc-center-text{animation:dcFade .5s 2.5s ease forwards}

@keyframes dcDraw{0%{opacity:1;stroke-dashoffset:250}100%{opacity:1;stroke-dashoffset:0}}
@keyframes dcFade{0%{opacity:0}100%{opacity:1}}
@keyframes dcScale{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}

/* Growth chart diagram */
.dg-line{stroke-dasharray:600;stroke-dashoffset:600;opacity:0}
.dg-dot,.dg-val,.dg-label{opacity:0}
.dg-area{opacity:0}
.diagram-animated.visible .dg-area{animation:dgReveal 1s 1.4s ease forwards}

.diagram-animated.visible .dg-line{animation:dgDraw 2.4s .3s cubic-bezier(.25,.1,.25,1) forwards}
.diagram-animated.visible .dg-dot-1{animation:dgReveal .6s .4s ease forwards}
.diagram-animated.visible .dg-val-1{animation:dgReveal .6s .6s ease forwards}
.diagram-animated.visible .dg-dot-2{animation:dgReveal .6s .7s ease forwards}
.diagram-animated.visible .dg-val-2{animation:dgReveal .6s .9s ease forwards}
.diagram-animated.visible .dg-dot-3{animation:dgReveal .6s 1.0s ease forwards}
.diagram-animated.visible .dg-val-3{animation:dgReveal .6s 1.2s ease forwards}
.diagram-animated.visible .dg-dot-4{animation:dgReveal .6s 1.3s ease forwards}
.diagram-animated.visible .dg-val-4{animation:dgReveal .6s 1.5s ease forwards}
.diagram-animated.visible .dg-dot-5{animation:dgReveal .6s 1.6s ease forwards}
.diagram-animated.visible .dg-val-5{animation:dgReveal .6s 1.8s ease forwards}
.diagram-animated.visible .dg-dot-6{animation:dgReveal .6s 1.9s ease forwards}
.diagram-animated.visible .dg-val-6{animation:dgReveal .6s 2.1s ease forwards}

@keyframes dgDraw{0%{opacity:1;stroke-dashoffset:600}100%{opacity:1;stroke-dashoffset:0}}
@keyframes dgReveal{0%{opacity:0}100%{opacity:1}}

/* ===== SCROLL ANIMATIONS ===== */
[data-animate]{opacity:0;transform:translateY(40px);transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1)}
[data-animate="fade"]{transform:none}
[data-animate="scale-up"]{transform:scale(.94);transform-origin:center bottom}
[data-animate].visible{opacity:1!important;transform:translateY(0) scale(1)!important}
[data-delay="50"]{transition-delay:.12s}
[data-delay="100"]{transition-delay:.2s}
[data-delay="200"]{transition-delay:.35s}
[data-delay="300"]{transition-delay:.5s}
/* Stagger children inside animated containers */
[data-animate].visible .stagger-child{opacity:1;transform:translateY(0)}
.stagger-child{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.stagger-child:nth-child(1){transition-delay:.08s}
.stagger-child:nth-child(2){transition-delay:.16s}
.stagger-child:nth-child(3){transition-delay:.24s}
.stagger-child:nth-child(4){transition-delay:.32s}
.stagger-child:nth-child(5){transition-delay:.40s}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  :root{--gap:96px}
  .hero-title{font-size:64px}
  .nav-logo-img{height:72px}
  .hero-deco-left{left:-200px;width:520px}.hero-deco-right{right:-200px;width:520px}
  .split-layout,.split-layout--reverse{flex-direction:column;gap:40px}
  .split-media{flex:none;width:100%;max-width:500px}
  .pricing-3col{grid-template-columns:1fr;gap:32px}
  .pricing-col--center{max-width:420px;margin:0 auto;width:100%}
  .about-card{flex-direction:column;gap:36px;padding:40px 32px}
  .about-photo-col{flex:none;width:100%;max-width:280px}
  .changes-row-3{grid-template-columns:1fr 1fr}
}

@media(max-width:810px){
  .hero{padding:128px 0 0;min-height:auto}
  .hero-title{font-size:48px}
  .nav-logo-img{height:64px}
  .hero-content{padding:0 16px}
  .hero-sub br{display:none}
  .heading-2{font-size:32px}
  .stats-row{grid-template-columns:1fr;gap:32px}
  .footer-row{flex-direction:column;gap:24px;text-align:center}
  .footer-col--left,.footer-col--right{text-align:center}
  .hero-deco{display:none}
  .tcard{width:270px}
  .changes-row-2{grid-template-columns:1fr}
  .changes-row-3{grid-template-columns:1fr}
  .page-cloud{display:none}
}

@media(max-width:480px){
  .hero-title{font-size:clamp(44px,12vw,52px)}
  .nav-logo-img{height:56px}
  .hero{padding:100px 0 0;min-height:auto}
  .container{padding:0 16px}
  .hero-content{gap:14px}
  .hero-sub{font-size:15px;max-width:360px}
  .hero-media{padding:0 12px;margin-top:24px}
  .pricing-col{padding:24px 16px}
  .about-card{padding:28px 20px}
  .display-heading{font-size:clamp(28px,7vw,40px)}
  .heading-2{font-size:28px}
  .ticker-section{padding:48px 0 24px}
  .ticker-logo{height:28px}
  .about-photo-col{max-width:240px}
  .carousel-mask{padding:0 12px}
  .tcard{width:260px}
  .strategy-banner-image{border-radius:14px}
  .strat-btn{font-size:13px;padding:8px 20px}
  .faq-q{font-size:16px}
}