:root{
  /* Natural brutalism palette */
  --cream:#f4ecd8;      /* warm background */
  --cream-2:#ece0c6;    /* alt background */
  --paper:#fbf6ea;      /* card surface */
  --ink:#1c1a15;        /* near-black warm */
  --ink-soft:#4a463b;
  --muted:#6b6555;
  --blue:#1b5e7e;       /* natural deep blue */
  --blue-dark:#0f4257;
  --blue-soft:#cfe3ea;
  --clay:#c65a34;       /* terracotta */
  --mustard:#e0a63c;    /* ochre */
  --olive:#7a8450;      /* natural green */
  --line:var(--ink);
  --radius:14px;
  --border:3px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.brand-name,.stat-num,.price-amount,.step-num{font-family:'Space Grotesk',sans-serif;line-height:1.08;letter-spacing:-.02em}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container.narrow{max-width:820px}
.hl{background:var(--mustard);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border:2px solid var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:var(--border) solid var(--ink);padding:6px 14px;margin-bottom:18px;box-shadow:var(--shadow-sm)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-family:'Space Grotesk',sans-serif;border:var(--border) solid var(--ink);padding:13px 24px;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;font-size:.98rem;box-shadow:var(--shadow-sm);border-radius:10px}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn i{font-size:1.05em}
.btn-sm{padding:9px 16px;font-size:.9rem;box-shadow:3px 3px 0 var(--ink)}
.btn-lg{padding:15px 28px;font-size:1.05rem;box-shadow:var(--shadow)}
.btn-block{width:100%}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn-ghost{background:var(--mustard);color:var(--ink)}
.btn-ghost:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn-outline-white{background:var(--clay);color:#fff}
.btn-outline-white:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

/* Scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--clay);z-index:1000;transition:width .1s;border-bottom:2px solid var(--ink)}

/* Ticker */
.ticker{position:fixed;top:0;left:0;right:0;z-index:905;background:var(--clay);color:#fff;border-bottom:var(--border) solid var(--ink);overflow:hidden;height:36px;display:flex;align-items:center}
.ticker-track{display:flex;gap:44px;white-space:nowrap;animation:ticker 32s linear infinite;padding-left:44px;will-change:transform}
.ticker-track span{font-family:'DM Mono',monospace;font-size:.82rem;font-weight:500;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}

/* Nav */
.nav{position:fixed;top:36px;left:0;right:0;z-index:900;padding:14px 0;transition:.25s ease;background:transparent}
.nav.scrolled{background:var(--cream);border-bottom:var(--border) solid var(--ink);padding:10px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px}
.brand-badge{width:48px;height:48px;display:grid;place-items:center;background:#fff;border:var(--border) solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}
.brand-badge img{width:42px;height:42px;object-fit:contain}
.brand-name{font-size:1.4rem;font-weight:700;color:var(--ink)}
.brand-accent{color:var(--blue)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-weight:700;font-size:.95rem;color:var(--ink);transition:.15s}
.nav-links a:not(.btn):hover{color:var(--clay)}
.nav-links a.btn-primary{color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:var(--paper);border:var(--border) solid var(--ink);border-radius:9px;cursor:pointer;padding:9px 8px;box-shadow:var(--shadow-sm)}
.nav-toggle span{width:24px;height:3px;background:var(--ink);border-radius:3px;transition:.3s}

/* Hero */
.hero{position:relative;padding:180px 0 110px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.grid-pattern{position:absolute;inset:0;background-image:linear-gradient(var(--ink) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--ink) 1.5px,transparent 1.5px);background-size:46px 46px;opacity:.07;mask-image:radial-gradient(ellipse 85% 65% at 50% 25%,#000,transparent 78%)}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:var(--border) solid var(--ink);color:var(--ink);font-weight:700;font-size:.85rem;padding:8px 15px;box-shadow:var(--shadow-sm);margin-bottom:24px;border-radius:999px}
.badge .dot{width:10px;height:10px;border-radius:50%;background:var(--olive);border:2px solid var(--ink);animation:pulse 2s infinite}
.hero-text h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:700;margin-bottom:20px}
.slogan{display:inline-flex;align-items:center;gap:9px;font-family:'DM Mono',monospace;font-size:.92rem;font-weight:500;letter-spacing:.02em;color:var(--ink);background:var(--paper);border:var(--border) solid var(--ink);border-radius:10px;padding:8px 16px;box-shadow:var(--shadow-sm);margin-bottom:26px}
.slogan i{color:var(--clay);font-size:1.1em}
.slogan b{color:var(--blue);font-weight:800}
.hero-sub{font-size:1.12rem;color:var(--ink-soft);max-width:560px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap}
.trust-item{display:flex;flex-direction:column;background:var(--paper);border:var(--border) solid var(--ink);padding:10px 18px;border-radius:12px;box-shadow:var(--shadow-sm)}
.trust-item strong{font-size:1.5rem;font-family:'Space Grotesk',sans-serif;color:var(--blue)}
.trust-item span{font-size:.82rem;color:var(--muted);font-weight:600}

.hero-visual{position:relative}

/* Browser frame (brutalist) */
.browser-frame{background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--cream-2);border-bottom:var(--border) solid var(--ink)}
.browser-bar span[class^="dot-"]{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.dot-r{background:var(--clay)}.dot-y{background:var(--mustard)}.dot-g{background:var(--olive)}
.browser-url{margin-left:10px;font-family:'DM Mono',monospace;font-size:.78rem;color:var(--ink-soft);background:var(--paper);border:2px solid var(--ink);border-radius:7px;padding:3px 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-screen{aspect-ratio:2880/1800;overflow:hidden;background:#fff}
.browser-screen.wide{aspect-ratio:1366/700}
.browser-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}

.float-chip{position:absolute;background:var(--paper);border:var(--border) solid var(--ink);border-radius:12px;padding:11px 15px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px}
.float-chip .chip-ic{font-size:1.3rem;width:42px;height:42px;display:grid;place-items:center;background:var(--blue-soft);border:2px solid var(--ink);border-radius:9px;color:var(--blue-dark)}
.float-chip .chip-ic.ok{background:#d7e5c4;color:var(--olive)}
.float-chip strong{display:block;font-size:.9rem;font-family:'Space Grotesk',sans-serif}
.float-chip span{font-size:.76rem;color:var(--muted)}
.fc-1{top:20px;right:-24px;animation:floatY 5s ease-in-out infinite}
.fc-2{bottom:34px;left:-28px;animation:floatY 6s ease-in-out infinite .8s}

/* Phone frame */
.phone-frame{position:relative;width:270px;margin:0 auto;background:var(--ink);border:var(--border) solid var(--ink);border-radius:34px;padding:12px;box-shadow:var(--shadow-lg)}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:20px;background:var(--ink);border-radius:0 0 14px 14px;z-index:2}
.phone-screen{border-radius:22px;overflow:hidden;background:#fff;aspect-ratio:780/1560}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Stats strip */
.stats-strip{background:var(--blue);padding:0;border-top:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stat{padding:40px 20px;border-right:var(--border) solid var(--ink)}
.stat:last-child{border-right:none}
.stat-num{font-size:2.7rem;font-weight:700;color:#fff}
.stat-label{color:var(--blue-soft);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;font-family:'DM Mono',monospace}

/* Sections */
.section{padding:96px 0}
.section-alt{background:var(--cream-2);border-top:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink)}
.section-head{text-align:center;max-width:740px;margin:0 auto 56px}
.section-head h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:700;margin-bottom:16px}
.section-head p{color:var(--ink-soft);font-size:1.06rem}

/* Features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);padding:26px 24px;transition:transform .14s ease,box-shadow .14s ease;box-shadow:var(--shadow-sm)}
.feature-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.feature-icon{font-size:1.7rem;width:60px;height:60px;display:grid;place-items:center;background:var(--mustard);border:var(--border) solid var(--ink);border-radius:12px;margin-bottom:18px;color:var(--ink)}
.feature-card:nth-child(3n+1) .feature-icon{background:var(--blue-soft);color:var(--blue-dark)}
.feature-card:nth-child(3n+2) .feature-icon{background:var(--mustard)}
.feature-card:nth-child(3n) .feature-icon{background:#e3d0c4;color:var(--clay)}
.feature-card h3{font-size:1.2rem;margin-bottom:9px}
.feature-card p{color:var(--muted);font-size:.96rem}

/* Roles */
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.role-card{background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);padding:26px 22px;transition:transform .14s ease,box-shadow .14s ease;box-shadow:var(--shadow-sm)}
.role-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.role-card.featured{background:var(--blue);color:#fff}
.role-card.featured ul li{color:rgba(255,255,255,.94)}
.role-card.featured .role-ic{background:var(--mustard);color:var(--ink)}
.role-card.featured ul li i{color:var(--mustard)}
.role-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.role-ic{font-size:1.5rem;width:52px;height:52px;display:grid;place-items:center;background:var(--mustard);border:var(--border) solid var(--ink);border-radius:12px;color:var(--ink)}
.role-head h3{font-size:1.28rem}
.role-card ul{list-style:none}
.role-card ul li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--muted);font-size:.95rem;font-weight:500}
.role-card ul li::before{content:"\F633";font-family:"bootstrap-icons";position:absolute;left:0;top:1px;color:var(--olive);font-size:.9rem}

/* Showcase */
.showcase{display:flex;flex-direction:column;gap:72px}
.showcase-row{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.showcase-row.reverse .showcase-media{order:2}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;background:var(--clay);color:#fff;border:var(--border) solid var(--ink);padding:5px 13px;border-radius:8px;box-shadow:var(--shadow-sm);margin-bottom:16px}
.showcase-copy h3{font-size:clamp(1.4rem,2.7vw,2rem);margin-bottom:14px}
.showcase-copy p{color:var(--ink-soft);font-size:1.04rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{text-align:left;padding:28px 24px;background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.step-num{width:56px;height:56px;margin-bottom:18px;display:grid;place-items:center;font-weight:700;font-size:1.5rem;color:var(--ink);background:var(--mustard);border:var(--border) solid var(--ink);border-radius:12px}
.step:nth-child(2) .step-num{background:var(--blue-soft);color:var(--blue-dark)}
.step:nth-child(3) .step-num{background:#e3d0c4;color:var(--clay)}
.step h3{font-size:1.22rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.96rem}

/* Pricing */
.pricing-wrap{display:flex;justify-content:center}
.price-card{position:relative;background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);padding:44px 40px;max-width:470px;width:100%;box-shadow:var(--shadow-lg);text-align:center;overflow:hidden}
.price-ribbon{position:absolute;top:22px;right:-46px;background:var(--clay);color:#fff;font-weight:800;font-size:.78rem;padding:7px 54px;transform:rotate(45deg);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);font-family:'Space Grotesk',sans-serif}
.price-head h3{font-size:1.6rem;margin-bottom:6px}
.price-head p{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.price-tag{display:flex;align-items:flex-start;justify-content:center;gap:5px}
.price-currency{font-size:1.5rem;font-weight:700;color:var(--blue);margin-top:12px}
.price-amount{font-size:3.6rem;font-weight:700;color:var(--ink);line-height:1}
.price-per{color:var(--muted);font-weight:700;margin-bottom:26px;font-family:'DM Mono',monospace;font-size:.9rem}
.price-list{list-style:none;text-align:left;margin-bottom:28px;border-top:2px dashed var(--ink);padding-top:24px}
.price-list li{position:relative;padding-left:32px;margin-bottom:12px;font-size:.98rem;font-weight:500}
.price-list li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;left:0;top:0;width:22px;height:22px;background:var(--olive);color:#fff;border:2px solid var(--ink);border-radius:6px;display:grid;place-items:center;font-size:.7rem}
.price-note{color:var(--muted);font-size:.85rem;margin-top:16px;font-family:'DM Mono',monospace}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--paper);border:var(--border) solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .15s}
.faq-item.open{box-shadow:var(--shadow)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;cursor:pointer;padding:19px 20px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.04rem;text-align:left;color:var(--ink)}
.faq-icon{flex:0 0 32px;height:32px;display:grid;place-items:center;background:var(--mustard);color:var(--ink);border:2px solid var(--ink);border-radius:8px;font-size:1rem;transition:.3s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 20px 20px;color:var(--ink-soft)}

/* CTA */
.cta{padding:90px 0;background:var(--blue);position:relative;overflow:hidden;border-top:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink)}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:44px 44px}
.cta-inner{position:relative;text-align:center;color:#fff;max-width:720px;margin:0 auto}
.cta-badge{width:76px;height:76px;margin:0 auto 22px;display:grid;place-items:center;font-size:2.2rem;color:var(--ink);background:var(--mustard);border:var(--border) solid var(--ink);border-radius:16px;box-shadow:var(--shadow);animation:floatY 4s ease-in-out infinite}
.cta h2{font-size:clamp(1.9rem,3.8vw,2.9rem);margin-bottom:14px}
.cta p{font-size:1.08rem;color:rgba(255,255,255,.9);margin-bottom:32px}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Footer */
.footer{background:var(--ink);color:#d8d2c2;padding:60px 0 0}
.footer-inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.footer-brand .brand-name{color:#fff}
.footer-brand .brand-badge{box-shadow:none}
.footer-brand p{margin-top:14px;font-size:.95rem;color:#a49d8b;max-width:320px}
.footer-slogan{font-family:'DM Mono',monospace;font-size:.85rem;color:#c9c0aa !important;margin-top:12px !important;letter-spacing:.02em}
.footer-slogan b{color:var(--mustard);font-weight:800}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:16px;font-family:'Space Grotesk',sans-serif}
.footer-col a{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.94rem;color:#a49d8b;transition:.15s}
.footer-col a:hover{color:var(--mustard)}
.footer-bottom{border-top:2px solid rgba(255,255,255,.12);padding:22px 0;font-size:.88rem;color:#8b8574;text-align:center;font-family:'DM Mono',monospace}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Keyframes */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,132,80,.5)}70%{box-shadow:0 0 0 8px rgba(122,132,80,0)}100%{box-shadow:0 0 0 0 rgba(122,132,80,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Responsive */
/* Video preview */
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.video-card{background:var(--paper);border:var(--border) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border-bottom:var(--border) solid var(--ink)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-meta{padding:24px 26px 28px}
.video-meta .tag{margin-bottom:12px}
.video-meta h3{font-size:1.25rem;margin-bottom:8px}
.video-meta p{color:var(--ink-soft);margin:0}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .hero-text{text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-trust{justify-content:center}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .role-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:var(--border) solid var(--ink)}
  .video-grid{grid-template-columns:1fr;gap:26px}
  .showcase-row{grid-template-columns:1fr;gap:28px}
  .showcase-row.reverse .showcase-media{order:0}
  .steps{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .slogan{font-size:.72rem;padding:7px 12px;gap:7px;max-width:100%;text-align:center;line-height:1.4;flex-wrap:wrap;justify-content:center;letter-spacing:0}
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:80%;max-width:320px;background:var(--cream);border-left:var(--border) solid var(--ink);flex-direction:column;align-items:flex-start;padding:90px 28px;gap:20px;transition:right .3s ease}
  .nav-links.open{right:0}
  .nav-links a{font-size:1.08rem}
  .nav-toggle{display:flex;z-index:950}
  .nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .feature-grid,.role-grid,.stats-grid{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:var(--border) solid var(--ink)}
  .stat:last-child{border-bottom:none}
  .section{padding:64px 0}
  .hero{padding:150px 0 80px}
  .float-chip{display:none}
  .price-card{padding:36px 22px}
  .footer-inner{grid-template-columns:1fr;gap:28px;text-align:center}
  .footer-brand .brand,.footer-col a{justify-content:center}
  .footer-brand p{margin-left:auto;margin-right:auto}
  .cta-buttons .btn{width:100%}
  .btn-lg{width:100%}
}