/* ZipSite Studio — Visual system
   Palette (light): page #e6e5e1, text #111, accentA #6f7cff, accentB #7c3aed
   Mobile-first; WCAG AA; minimal JS partner
*/
:root{
  --ink:#0f1115;
  --paper:#e6e5e1;
  --text:#111111;
  --muted:#5e5f68;
  --accentA:#6f7cff;
  --accentB:#7c3aed;
  --glass:rgba(255,255,255,0.78);
  --card:#ffffff;
  --ring:rgba(124,58,237,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:#3b3cc4; text-decoration:none}
a:hover{text-decoration:underline}
a,button{-webkit-tap-highlight-color:transparent}
.container{width:min(1120px,92%); margin-inline:auto}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;z-index:10000;background:#fff;color:#111;padding:8px 10px;border-radius:6px}
.hidden{display:none}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1001; /* High z-index to stay on top of menu */
  background:var(--glass);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(17,17,17,.08);
}
.header-inner{display:flex;align-items:center;gap:20px; padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;color:#111}
.logo-img{
  width:64px; height:64px; object-fit:contain;
  background:#fff; border-radius:50%; padding:6px;
}
.brand-text{color:#111;font-weight:600}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav a{color:#111; text-decoration:none}
.nav a:hover{text-decoration:none}
.nav a[aria-current="page"]{font-weight:700}

/* Burger */
.nav-toggle{margin-left:auto;background:transparent;border:0;cursor:pointer}
.burger, .burger:before, .burger:after{
  content:"";display:block;width:22px;height:2px;background:#111;border-radius:2px;transition:transform .2s ease, background .2s ease;
}
.burger:before,.burger:after{position:relative}
.burger:before{top:-6px; position:relative}
.burger:after{top:4px; position:relative}
body.nav-open .burger{background:transparent}
body.nav-open .burger:before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger:after{transform:translateY(-4px) rotate(-45deg)}
body.nav-open{overflow:hidden}

/* Mobile nav -- DROPDOWN PANEL FIX */
@media (max-width: 768px){
  .nav{
    position: absolute; /* CHANGE: Position relative to the header, not the viewport */
    top: 100%;          /* CHANGE: Place it directly below the header */
    left: 0;
    right: 0;
    background: var(--paper); /* Use a CSS variable for dark mode compatibility */
    
    /* CHANGE: New animation style for a dropdown */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform .2s ease-out, opacity .2s ease-out;

    padding: 16px 24px 24px; /* CHANGE: Adjusted padding for a dropdown */
    z-index: 1000;
    
    /* CHANGE: Add a shadow and border for better visual separation */
    border-bottom: 1px solid rgba(17,17,17,.08);
    box-shadow: 0 8px 16px rgba(17,17,17,.05);
  }

  /* This is a dark mode fix for the new dropdown background and border */
  @media (prefers-color-scheme: dark) {
    .nav {
      background: var(--card);
      border-color: #272b36;
    }
  }

  .nav ul{
    flex-direction: column; 
    gap: 16px; /* A slightly smaller gap is better for this layout */
  }

  body.nav-open .nav{
    /* CHANGE: Show the menu by adjusting new properties */
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
}

@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }
}

/* Hero */
.hero{position:relative; overflow:hidden; padding:72px 0}
.hero .hero-inner{display:grid;grid-template-columns:1.1fr .9fr; gap:28px; align-items:start}
.hero .hero-copy h1{font-size:44px; line-height:1.1; margin:0 0 10px; color:#111}
.hero .sub{color:var(--muted); margin:0 0 18px}
.grad-text{background:linear-gradient(90deg,var(--accentA),var(--accentB)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.benefits{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:18px 0 0}
.benefits li{background:#fff;border:1px solid #e6e6ee;border-radius:999px;padding:8px 12px;color:#333;box-shadow:0 1px 2px rgba(17,17,17,.03)}

.howstack{display:grid; gap:12px; align-self:start}
.how.item{display:grid;grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; background:#fff; border:1px solid #e6e6ee; border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(17,17,17,.05)}
.how-icon{display:grid; place-items:center; width:40px; height:40px; background:#f3f2f0; border:1px solid #e1e0dc; border-radius:12px}
.how-copy h3{margin:0 0 4px; color:#111}
.how-copy p{margin:0; color:#52525b}

@media (max-width: 900px){
  .hero .hero-inner{grid-template-columns:1fr}
}

.strip{padding:16px 0 0; position:relative}
.strip-link{display:block}
.strip-mask{position:relative; overflow:hidden; border-radius:18px; border:1px solid #e6e6ee; background:#fff}
.strip-track{display:flex; gap:12px; padding:12px; width:max-content; animation:scrollx 36s linear infinite}
.strip-track img{display:block; width:480px; height:270px; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(17,17,17,.08)}
.strip-mask:before,.strip-mask:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, #fff, transparent 20%, transparent 80%, #fff);
  mix-blend-mode:normal;
}
@keyframes scrollx{ to{ transform: translateX(-50%) } }
@media (max-width:900px){ .strip-track img{ width:320px; height:180px } }
@media (prefers-reduced-motion: reduce){
  .strip-track{ animation:none }
}

.section{padding:48px 0}
.section-head{margin-bottom:18px}
.section-head h2{color:#111}
.section-head .sub{color:var(--muted)}
.card{background:#fff;color:#111;border:1px solid #e6e6ee;border-radius:16px;padding:18px; box-shadow:0 1px 3px rgba(17,17,17,.05)}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.work-grid{grid-template-columns:1fr}}
.work-card{position:relative; border-radius:16px; overflow:hidden; transform-style:preserve-3d; transition:transform .15s ease, box-shadow .15s ease; background:#0e0e15}
.work-card img{display:block; width:100%; height:auto}
.work-card .overlay{position:absolute; inset:auto 0 0 0; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.work-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.2)}

.bundle-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:900px){.bundle-grid{grid-template-columns:1fr}}
.bundle{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid #e6e6ee; border-radius:24px; padding:32px 20px 20px;
  box-shadow:0 10px 24px rgba(17,17,17,.06); position:relative; transition:transform .15s ease, box-shadow .15s ease
}
.bundle:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(17,17,17,.08); text-decoration:none}
.bundle h3{margin:0 0 6px}
.bundle .bundle-sub{margin:0 0 12px; color:#5f6069}
.price{font-size:40px; font-weight:800; margin:8px 0 12px}
.price.small{font-size:28px}
.price .per{font-weight:600; font-size:16px; color:#666}
.checklist{list-style:none; padding:0; margin:14px 0 0}
.checklist li{display:flex; gap:10px; align-items:flex-start; padding:6px 0; color:#333}
.checklist li::before{content:"✓"; font-weight:900; display:inline-block; width:18px}

.popular{border-color:transparent; box-shadow:0 18px 50px rgba(124,58,237,.25)}
.popular::before{
  content:""; position:absolute; inset:-2px; border-radius:26px;
  background:linear-gradient(135deg,var(--accentA),var(--accentB));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  padding:2px; pointer-events:none;
}
.badge{
  position:absolute; top:12px; right:12px; font-size:.8rem; font-weight:700;
  background:rgba(124,58,237,.12); color:#5b36e6; border:1px solid rgba(124,58,237,.35);
  padding:4px 8px; border-radius:999px
}

.addon{display:block; text-decoration:none; color:inherit; margin-top:16px}
.addon-inner{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:#f7f7fb; border:1px solid #e6e6ee; border-radius:20px; padding:16px 20px
}
.addon-title{margin:0}
.chip{display:inline-grid; place-items:center; font-size:.75rem; font-weight:700; padding:4px 8px; border-radius:999px; background:#e9e7ff; color:#5235ea; border:1px solid #c7c2ff}
.addon-cta{text-align:right}
.addon-button{display:inline-grid}

@media (max-width: 640px){
  .addon-inner{flex-direction:column; align-items:stretch}
  .addon-cta{ text-align:left }
  .addon-button{ width:100%; text-align:center }
}

.cta-band{background:linear-gradient(135deg,var(--accentA),var(--accentB)); color:#fff}
.cta-band-inner{padding:32px 0; text-align:center}
.cta-band h2{margin:0 0 6px}

label{display:grid;gap:6px;font-weight:600;margin:8px 0; color:#111}
input,textarea{background:#fff;border:1px solid #d9dae3;border-radius:10px;padding:10px 12px;font:inherit;color:#111}
input:focus,textarea:focus{outline:2px solid var(--ring); outline-offset:2px}

.agreement-card{background:#fff;color:#111;border:1px solid #e6e6ee;border-radius:16px;padding:18px;margin-bottom:18px}
.agree-label{display:flex;gap:12px;align-items:flex-start}
.fine{color:#667085;font-size:.9rem}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0}
@media (max-width:900px){.value-grid{grid-template-columns:1fr 1fr}}
.guard{position:relative}
.guard.disabled{pointer-events:none;opacity:.65}
.guard-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.9));color:#111;border-radius:16px}
.guard:not(.disabled) .guard-overlay{display:none}

.no-overflow{overflow-x:hidden}
.tally-full{
  min-height:calc(100vh - 64px);
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.tally-intro,.tally-foot{
  background:transparent;
  color:#111;
  padding:10px 6%;
  border-bottom:1px solid rgba(17,17,17,.08)
}
.tally-foot{
  border-top:1px solid rgba(17,17,17,.08);
  border-bottom:0
}
.tally-intro a,.tally-foot a{ color:#3b3cc4; text-decoration:underline }
.tally-shell{ background:#fff; color:#111 }
.tally-shell iframe{ display:block; width:100%; height:100% }
.tally-full > iframe[data-tally-src]{ display:block; width:100%; height:100% }

.site-footer{padding:30px 0;border-top:1px solid rgba(17,17,17,.08); color:#111}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
.footer-links{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.footer-links a{color:#111}
.foot-note{margin:0;color:#333; max-width:100%}
.foot-note a{overflow-wrap:anywhere; display:inline-block}

@media (max-width:640px){
  .footer-inner{flex-direction:column; align-items:flex-start}
  .foot-note{width:100%}
}

.btn{display:inline-grid;place-items:center;padding:10px 14px;border-radius:12px;border:1px solid transparent;font-weight:700; text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accentA),var(--accentB)); color:#fff}
.btn.ghost{background:transparent;border-color:rgba(17,17,17,.25); color:#111}
.btn[disabled]{opacity:.6; pointer-events:none}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
.mobile-cta{display:none !important}

.page-hero{padding:48px 0 8px}
.page-hero h1{margin:0 0 6px; font-size:40px}
.page-hero .sub{margin:0; color:var(--muted)}
@media (max-width:600px){
  .page-hero h1{font-size:32px}
}
.icon-badge{
  display:inline-grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:linear-gradient(135deg,#f2f2ff,#f8f7ff);
  border:1px solid #e7e7f7; margin-bottom:10px;
}
.icon-badge svg{width:22px;height:22px}
.about-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} }
.about-grid .card p, .about-grid .card li{color:#4b4d57}
.contact-hero{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; padding:32px 0}
@media (max-width:900px){ .contact-hero{grid-template-columns:1fr} }
.contact-copy .contact-points{list-style:none;padding:0;margin:12px 0 0}
.contact-copy .contact-points li{padding:6px 0}
.contact-form{padding:20px; border-radius:18px}
.contact-form .btn{margin-top:6px}
.link-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.link-chips a{display:inline-grid;place-items:center;padding:6px 10px;border-radius:999px;border:1px solid #e6e6ee;color:#333;background:#fff}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1115;
    --text:#f1f3f8;
    --muted:#a5abc0;
    --glass:rgba(15,17,21,.84);
    --card:#151922;
  }
  body{ background:var(--paper); color:var(--text) }
  a{ color:#aeb9ff }
  a:hover{ color:#c7d0ff }
  .site-header{ background:var(--glass); border-bottom:1px solid rgba(255,255,255,.08) }
  .logo, .brand-text, .nav a{ color:#fff }
  .burger, .burger:before, .burger:after{ background:#fff }
  .btn.ghost{border-color:rgba(255,255,255,.28); color:#fff}
  /* The nav background is now handled in the mobile @media query */
  .nav a{ color:#fff }
  .footer-links a, .foot-note{ color:#e8eaf0 }
  .card, .how.item, .bundle, .addon-inner, .contact-form, .agreement-card {
    background:var(--card); color:var(--text); border-color:#272b36
  }
  .benefits li{ background:#171a22; border-color:#272b36; color:#d7d9e4 }
  .bundle h3, .how-copy h3, .addon-title {
    color: var(--text);
  }
  .bundle .bundle-sub, .checklist li, .how-copy p, .fine {
    color: var(--muted);
  }
  .strip-mask{ background:#141821; border-color:#272b36 }
  .strip-mask:before,.strip-mask:after{ background:linear-gradient(90deg,#141821,transparent 20%,transparent 80%,#141821) }
  .section-head h2, .hero .hero-copy h1, label, .page-hero h1{ color:var(--text) }
  .badge{ background:rgba(124,58,237,.18); color:#e8e5ff; border-color:rgba(124,58,237,.45) }
  .tally-intro, .tally-foot{ color:var(--text) }
  .tally-intro a, .tally-foot a{ color:#c3cbff; text-decoration:underline }
  .tally-intro{ border-bottom:1px solid rgba(255,255,255,.12) }
  .tally-foot{ border-top:1px solid rgba(255,255,255,.12) }
  .icon-badge{ background:linear-gradient(135deg,#1d2130,#20253a); border-color:#2e3449 }
}