/* Shiny CTAs + screenshot placeholders (cleaned) */
:root{
  --bg:#0b0f11;--panel:#131a1f;--text:#e6f0f2;--muted:#9bb6bf;
  --accent:#22c55e;--accent-2:#facc15;--border:#23323b
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;line-height:1.6}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:16px}
.container.narrow{max-width:800px}

/* ===== Header (app-consistent) ===== */
.site-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(90deg,#0b0f11,#131a1f);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:2px solid var(--accent-2);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:14px;border:1px solid var(--border)}
.title{
  margin:0;font-size:28px;font-weight:800;letter-spacing:.12em;
  color:var(--accent-2);text-shadow:1px 1px 2px rgba(0,0,0,.8)
}
.tagline{margin:0;color:var(--muted);font-size:14px}
.nav a{margin-left:16px;color:var(--text);opacity:.95;position:relative;padding-bottom:4px}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
  transition:width .2s ease
}
.nav a:hover::after{width:100%}

/* ===== Hero ===== */
.hero{border-top:1px solid var(--border);background:linear-gradient(180deg, rgba(250,204,21,.10), transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero-copy h2{font-size:28px;margin:0 0 8px}
.hero-copy p{margin-top:0;color:var(--muted)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.btn{display:inline-block;padding:12px 16px;border-radius:14px;border:1px solid var(--border);font-weight:700;transition:.15s transform ease,.15s box-shadow ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn-primary{background:var(--accent);color:#0b0f11;border-color:transparent}
.btn-accent{background:var(--accent-2);color:#0b0f11;border-color:transparent}
.btn-ghost{background:transparent;color:var(--text)}

.hero-media img{
  max-width:360px;width:100%;height:auto;margin:0 auto;
  border-radius:16px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.35)
}

/* ===== Sections ===== */
.features,.screens,.faq{padding:28px 0;border-top:1px solid var(--border)}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:12px 0 0}
.feature-grid li{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:16px}

/* ===== Screenshots ===== */
.screens .shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;justify-items:center}
.screens figure{margin:0;text-align:center}
.screens figure img{
  max-width:360px;width:100%;height:auto;display:block;margin:0 auto;
  border-radius:12px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.screens figure figcaption{
  width:min(360px,100%);margin:6px auto 0;line-height:1.4;color:var(--muted);font-size:.95rem
}
.note{color:var(--muted);margin-top:8px}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:16px 0;margin-top:24px}
.footer-inner{display:flex;align-items:center;justify-content:space-between}

/* ===== Responsive ===== */
@media (max-width:500px){
  .hero-inner{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .screens .shot-grid{grid-template-columns:1fr}
  /* ===== Mobile header tightening (<=500px) ===== */
@media (max-width:500px){
  .site-header{
    border-bottom:1px solid var(--border);          /* thinner line */
  }
  .header-inner{
    gap:8px;                                        /* tighter spacing */
    padding:8px 12px;                               /* shorter header */
  }
  .logo{ width:36px; height:36px; border-radius:10px; }

  .title{
    font-size:18px;                                  /* smaller title */
    letter-spacing:.08em;
    line-height:1.1;
  }
  .tagline{ display:none; }                          /* hide on mobile */

  /* Keep nav in a single slim row with horizontal scroll if needed */
  .nav{
    display:flex;
    flex-wrap:nowrap;                                /* no wrapping */
    gap:12px;
    overflow-x:auto;                                 /* allow side-scroll */
    -webkit-overflow-scrolling: touch;
    max-width:100%;
    scrollbar-width:none;                            /* hide scrollbar (Firefox) */
  }
  .nav::-webkit-scrollbar{ display:none; }           /* hide scrollbar (WebKit) */
  .nav a{
    margin-left:0;                                   /* use gap instead */
    font-size:14px;
    padding-bottom:2px;
    opacity:.95;
  }

  /* Optional: reduce hero spacing a bit on small screens */
  .hero-inner{ gap:16px; }
  .hero-copy h2{ font-size:22px; }
}
/* ===== Mobile header layout: title/tagline on top, full-width menu below ===== */
@media (max-width:500px){
  /* Keep the bold yellow divider on mobile */
  .site-header{ border-bottom:2px solid var(--accent-2); }

  /* Stack header sections vertically */
  .header-inner{
    display:block;           /* brand block first, nav block second */
    padding:10px 12px 6px 12px;
  }

  /* Title/tagline: no wrap, sized to fit */
  .brand{ display:block; }
  .title{
    font-size:20px;
    letter-spacing:.08em;
    line-height:1.1;
    white-space:nowrap;      /* prevent wrapping */
    margin-bottom:2px;
  }
  .tagline{
    display:block;           /* keep tagline visible on mobile */
    font-size:13px;
    margin:0 0 10px 0;       /* little space before the menu */
  }

  /* Menu: full-width row under the title/tagline */
  .nav{
    display:flex;
    width:100%;
    justify-content:space-between;  /* spread across the screen */
    gap:6px;                        /* small gaps between items */
  }
  .nav a{
    flex:1 1 auto;                  /* distribute evenly */
    text-align:center;
    font-size:13px;
    padding:8px 4px;
    margin-left:0;                  /* we’re using gap now */
  }

  /* Tighter hero spacing below header on mobile */
  .hero-inner{ gap:16px; }
  .hero-copy h2{ font-size:22px; }
}
@media (max-width:500px){
  .title{
    font-size:24px;       /* was 18px */
    letter-spacing:.1em;
    line-height:1.1;
  }
}
@media (max-width:500px){
  .header-inner{
    display:block;
    padding:10px 12px 0px 12px;   /* less bottom padding */
  }
}