/* Marketing website ("our own site") styles. */
*,*::before,*::after{box-sizing:border-box;}
:root{ --brand:#6d28d9; --brand2:#ec4899; --ink:#0f0b1e; --muted:#6b7280; --line:#eae7f3; --bg:#ffffff; }
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;}
h1,h2,h3{font-family:'Sora','Inter',sans-serif;line-height:1.12;margin:0 0 .4em;}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px;}
.muted{color:var(--muted);}
.center{text-align:center;}
section{padding:70px 0;}

.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .bar{display:flex;align-items:center;justify-content:space-between;padding:15px 0;}
.brand{font-family:'Sora';font-weight:800;font-size:22px;color:var(--ink);display:inline-flex;align-items:center;gap:10px;}
/* The mark is a dark tile with a light glyph: it reads on the pale nav, and on the
   dark footer the tile blends while the glyph stays visible. One asset, both places. */
.brand-mark{display:block;flex:none;border-radius:7px;}
.brand span{color:var(--brand);}
.nav nav{display:flex;align-items:center;gap:26px;}
.nav nav a{color:var(--ink);font-weight:500;}
.nav nav a:hover{color:var(--brand);}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;cursor:pointer;font-weight:600;font-size:15px;padding:12px 22px;border-radius:12px;transition:transform .12s,filter .12s;font-family:inherit;}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);text-decoration:none;}
.btn.lg{padding:15px 30px;font-size:16px;}
.btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand);}
.btn.light{background:#fff;color:var(--brand);}
.btn.wide{width:100%;justify-content:center;}

.hero{background:linear-gradient(130deg,#4c1d95,#6d28d9 45%,#ec4899);color:#fff;padding:88px 0;}
.hero h1{color:#fff;font-size:clamp(34px,6vw,60px);font-weight:800;max-width:12ch;}
.hero p{font-size:clamp(17px,2.4vw,21px);opacity:.94;max-width:56ch;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero .trust{margin-top:34px;display:flex;gap:34px;flex-wrap:wrap;}
.hero .trust .n{font-size:30px;font-weight:800;font-family:'Sora';}
.hero .trust .l{opacity:.85;font-size:14px;}

.eyebrow{color:var(--brand);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;}
.section-head{max-width:640px;margin:0 auto 46px;text-align:center;}
.section-head h2{font-size:clamp(26px,4vw,38px);}
.section-head p{color:var(--muted);font-size:18px;}

.grid{display:grid;gap:24px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.feature{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;}
.feature .ico{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:24px;background:linear-gradient(135deg,#f3e8ff,#fce7f3);margin-bottom:14px;}
.feature h3{font-size:19px;}
.feature p{color:var(--muted);margin:0;}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step{position:relative;padding:26px;background:#faf8ff;border:1px solid var(--line);border-radius:16px;}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;margin-bottom:14px;}

/* Template gallery */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tpl{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s;}
.tpl:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.12);}
.tpl .preview{height:170px;position:relative;display:flex;align-items:flex-end;padding:16px;}
.tpl .preview .chips{display:flex;gap:7px;width:100%;}
.tpl .preview .chip{height:26px;border-radius:7px;}
.tpl .body{padding:18px;}
.tpl .body .row{display:flex;justify-content:space-between;align-items:center;}
.tag{display:inline-block;background:#f3e8ff;color:var(--brand);font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.plan{border:1px solid var(--line);border-radius:18px;padding:30px;background:#fff;display:flex;flex-direction:column;}
.plan.popular{border:2px solid var(--brand);box-shadow:0 20px 50px rgba(109,40,217,.15);position:relative;}
.plan.popular::after{content:'Most popular';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;}
.plan .amt{font-size:44px;font-weight:800;font-family:'Sora';}
.plan .amt small{font-size:16px;color:var(--muted);font-weight:500;}
.plan ul{list-style:none;padding:0;margin:18px 0;flex:1;}
.plan li{padding:8px 0;border-bottom:1px solid var(--line);}
.plan li::before{content:'✓ ';color:#059669;font-weight:800;}

.cta-band{background:linear-gradient(130deg,#4c1d95,#6d28d9,#ec4899);color:#fff;border-radius:24px;padding:52px;text-align:center;}
.cta-band h2{color:#fff;font-size:clamp(26px,4vw,38px);}

footer.site{background:#0f0b1e;color:#cbd5e1;padding:44px 0 22px;margin-top:20px;}
footer.site a{color:#e9d5ff;}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;}
footer.site h4{color:#fff;}
footer.site .bot{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:16px;text-align:center;font-size:13px;opacity:.7;}

/* Giant footer wordmark (editorial signature) */
.wm-wrap{overflow:hidden;}
.site-wordmark{font-family:'Sora',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.045em;
  line-height:.82;text-align:center;user-select:none;font-size:clamp(54px,16vw,240px);
  -webkit-text-stroke:1.5px rgba(255,255,255,.22);color:transparent;margin:18px 0 0;}

/* Rise-from-below entrance (matches the showroom motion system) */
.js .rise{opacity:0;transform:translateY(26px);will-change:transform,opacity;}
.js .rise.in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.js .hero .wrap > *{opacity:0;transform:translateY(28px);animation:siteRise .85s cubic-bezier(.22,1,.36,1) forwards;}
.js .hero .wrap > *:nth-child(1){animation-delay:.08s;}
.js .hero .wrap > *:nth-child(2){animation-delay:.20s;}
.js .hero .wrap > *:nth-child(3){animation-delay:.32s;}
.js .hero .wrap > *:nth-child(4){animation-delay:.44s;}
.js .hero .wrap > *:nth-child(5){animation-delay:.56s;}
@keyframes siteRise{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .js .rise,.js .hero .wrap > *{opacity:1!important;transform:none!important;transition:none;animation:none;}
}

/* Template wireframe thumbnails */
.wf{border-radius:12px;overflow:hidden;height:190px;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.07);}
.wf-nav{height:24px;display:flex;align-items:center;padding:0 9px;border-bottom:1px solid;}
.wf-logo{width:28px;height:9px;border-radius:3px;display:block;}
.wf-links{display:flex;gap:4px;}
.wf-links i{width:11px;height:5px;border-radius:2px;display:block;}
.wf-hero{flex:1;padding:12px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.wf-h1{display:block;width:58%;height:10px;border-radius:3px;}
.wf-h2{display:block;width:38%;height:7px;border-radius:3px;}
.wf-search{display:block;width:82%;height:13px;border-radius:3px;margin-top:9px;}
.wf-shot{position:absolute;right:9px;top:13px;bottom:13px;width:36%;border-radius:6px;}
.wf-cars{padding:9px;}
.wf-grid{display:grid;gap:5px;}
.wf-grid span{height:30px;border-radius:5px;display:block;}
.wf-row{display:flex;align-items:center;gap:6px;height:22px;border:1px solid;border-radius:5px;margin-bottom:5px;padding:0 6px;}
.wf-row b{width:38px;height:15px;border-radius:3px;display:block;}

@media(max-width:900px){.g3,.g4,.steps,.tpl-grid,.price-grid{grid-template-columns:1fr 1fr;}.hero{padding:60px 0;}}
@media(max-width:620px){.g2,.g3,.g4,.steps,.tpl-grid,.price-grid,footer.site .cols{grid-template-columns:1fr;} section{padding:48px 0;} .cta-band{padding:34px 20px;}}


/* ---- Mobile navigation --------------------------------------------------
   Previously `.nav nav a:not(.btn){display:none}` simply HID Templates,
   Features and Pricing below 620px, so a phone visitor could not reach them at
   all. They now collapse into a hamburger panel instead of disappearing.

   The panel is rendered in normal flow under the bar (not an off-canvas drawer):
   an off-canvas rail previously left the dashboard nav unreachable, and this
   avoids that class of failure entirely. Without JS the links stay visible,
   because the collapsed state is only applied when the script marks the nav. */
.nav-burger { display:none; }

@media (max-width: 760px) {
  .nav .bar { position:relative; }

  .nav-burger {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0 9px; margin-left:auto;
    background:none; border:1px solid var(--line); border-radius:10px; cursor:pointer;
  }
  .nav-burger span {
    display:block; height:2px; width:100%; background:var(--ink); border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }
  /* Morph into a cross while open, so the button also reads as "close". */
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* Collapsed only once JS has taken over (html.js-nav), so a no-JS visitor keeps
     a usable, visible menu. */
  .js-nav .nav nav {
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(16,17,20,.10);
    padding:8px 20px 16px;
  }
  .js-nav .nav nav.open { display:flex; }
  .js-nav .nav nav a {
    padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px;
  }
  .js-nav .nav nav a:last-child { border-bottom:none; }
  .js-nav .nav nav a.btn { margin-top:12px; text-align:center; }
}