:root{
  /* DARK THEME (default) */
  --bg:#0b1022;--bg2:#0e1430;--card:rgba(14,23,49,.84);--muted:#99a7c6;--text:#e9f0fb;--accent:#03a3fe;--accent2:#ff7f32;
  --border:#1b2a55;--border-2:#20305f;--soft:#0d1630;--soft-2:#0f1a38;--tile:#0e1936;--tile-2:#1f2f5f;
  --cta1:#f9cc16;--cta2:#f1b000;--ring:rgba(249,204,22,.4);
}
body[data-theme='light']{
  /* LIGHT THEME */
  --bg:#eef2ff;--bg2:#ffffff;--card:rgba(255,255,255,.86);--muted:#475569;--text:#0f172a;--accent:#2563eb;--accent2:#fb923c;
  --border:#d4ddff;--border-2:#e2e8f0;--soft:#f3f6ff;--soft-2:#f8fafc;--tile:#f7f8ff;--tile-2:#e5e7eb;
  --cta1:#f9cc16;--cta2:#f1b000;--ring:rgba(249,204,22,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.6;color:var(--text);
  background:
    radial-gradient(800px 400px at 85% 10%,rgba(3,163,254,.18),transparent),
    radial-gradient(800px 400px at 15% 90%,rgba(255,127,50,.14),transparent),
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,var(--bg),var(--bg2));
  transition: background .25s ease,color .2s ease;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:20px}

/* NAV */
header.nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(10,16,34,.75),rgba(10,16,34,.35));border-bottom:1px solid var(--border)}
body[data-theme='light'] header.nav{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));border-bottom-color:var(--border-2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid var(--border);display:grid;place-items:center;flex:0 0 auto}
body[data-theme='light'] .logo{background:#fff;border-color:var(--border-2)}
.logo .material-icons-outlined{font-size:22px;background:linear-gradient(90deg,var(--cta1),var(--cta2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 0 rgba(0,0,0,0.2)}
.brand h1{font-size:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.toggle{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:8px 12px;font-size:14px;display:inline-flex;align-items:center;gap:6px;color:var(--text);cursor:pointer;flex:0 0 auto}
.toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-color:var(--ring)}
.toggle .material-icons-outlined{color:inherit;line-height:1}
body[data-theme='light'] .toggle{background:var(--soft-2);border-color:var(--border-2)}

/* CTA — responsive, never overflows */
.cta{
  background:linear-gradient(90deg,var(--cta1),var(--cta2));
  border:0;border-radius:14px;
  padding:12px 18px;
  color:#1a1400;font-weight:800;
  box-shadow:0 10px 30px -12px var(--ring);
  transition:transform .2s ease,box-shadow .2s ease;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  line-height:1.2;
  font-size:clamp(14px,1.7vw,16px);
  max-width:100%;           /* avoid overflow */
  white-space:normal;        /* allow wrap on narrow screens */
  overflow-wrap:anywhere;    /* break long params in ?cta=... */
  text-align:center;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px var(--ring)}

/* BANNER */
.banner{background:var(--soft-2);border-bottom:1px solid var(--border-2)}
.banner .container{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}

/* HERO */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:32px 0}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border:1px solid var(--border-2);border-radius:20px;padding:26px}
body[data-theme='light'] .hero-card{background:linear-gradient(180deg,rgba(0,0,0,.03),transparent)}
.headline{font-size:clamp(30px,5.2vw,48px);line-height:1.08;margin:0 0 12px}
.sub{color:var(--muted);font-size:clamp(15px,2.5vw,18px);margin:0 0 18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--soft-2);border:1px solid var(--border);padding:8px 12px;border-radius:999px;color:#cbd6ef;font-size:12px}
body[data-theme='light'] .pill{color:#334155;border-color:var(--border-2)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--border);font-size:12px;color:#c8d3ea}
body[data-theme='light'] .chip{background:#f8fafc;border-color:#e2e8f0;color:#334155}
.chip .material-icons-outlined{font-size:16px}

/* MEDIA — always centered and responsive */
.media{position:relative;display:flex;justify-content:center}
.frame{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  max-width:940px;       /* centers & limits width on large screens */
  margin:0 auto;
  align-items:center;
  justify-items:center;  /* centers items inside grid cells */
}

/* 4:5 = 1080x1350 */
.shot{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border-2);
  background:#0b142d;
  aspect-ratio: 4 / 5;
  width:100%;
  max-width:100%;
  margin:0 auto;         /* center each card */
}
body[data-theme='light'] .shot{background:#f8fafc}

.shot img,
.shot video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center; /* keep subject centered */
  display:block;
}

.label{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(12,23,50,.8);border:1px solid var(--border-2);
  padding:6px 10px;border-radius:999px;font-size:12px
}
body[data-theme='light'] .label{background:rgba(255,255,255,.85)}

/* BENEFITS */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);border:1px solid var(--border);border-radius:16px;padding:16px}
body[data-theme='light'] .card{background:linear-gradient(180deg,rgba(0,0,0,.03),transparent);border-color:var(--border-2)}
.card h3{margin:8px 0 6px;font-size:16px}
.card p{margin:0;color:#b0bdd6;font-size:14px}
body[data-theme='light'] .card p{color:#475569}
.card .material-icons-outlined{font-size:18px;vertical-align:-4px;margin-right:6px}

/* HOW IT WORKS */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:48px 0}
.step{position:relative;padding:18px;border:1px dashed #233256;border-radius:14px;background:#0d1730aa}
body[data-theme='light'] .step{background:#f8fafc;border-color:#e2e8f0}
.step .title{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-weight:700}

/* FEATURE STRIP */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:40px 0}
.strip .tile{display:flex;gap:10px;align-items:flex-start;background:var(--tile);border:1px solid var(--tile-2);border-radius:14px;padding:14px}
body[data-theme='light'] .strip .tile{background:#ffffff;border-color:#e2e8f0}
.strip .tile .material-icons-outlined{font-size:20px}

/* GALLERY */
.gallery{margin:28px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-grid figure{border:1px solid var(--border-2);border-radius:14px;overflow:hidden;background:#0b152f}
body[data-theme='light'] .gallery-grid figure{background:#fff;border-color:#e2e8f0}
.gallery-grid img{display:block;width:100%;aspect-ratio:30/30;object-fit:cover}

/* FAQ */
.faq{margin:48px 0}
details{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:12px}
body[data-theme='light'] details{background:#fff;border-color:#e2e8f0}
summary{cursor:pointer;font-weight:700}
details+details{margin-top:10px}

/* FOOTER */
.footer{margin-top:48px;padding:24px 0;border-top:1px solid var(--border-2);color:#9fb0cf;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
body[data-theme='light'] .footer{color:#475569;border-top-color:#e2e8f0}

/* --- Responsive --- */
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .frame{grid-template-columns:1fr} /* stack the two shots */
  .strip{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
}

/* Mobile: wrap header, make CTAs full width, keep images centered */
@media (max-width: 640px){
  .container{ padding:14px; }

  .nav-inner{ flex-wrap: wrap; gap:8px; }
  .actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  #ctaTop{
    order:1;
    width:100%;
    text-align:center;
    display:inline-flex;
    padding:12px 14px;
    font-size:14px;
  }
  #themeToggle{ order:2; }

  .grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}

  .hero{ padding:16px 0; }
  .frame{
    width:100%;
    max-width:420px;
    margin:0 auto;
  }
  .shot{ max-width:100%; aspect-ratio:4/5; }
  .label{ top:10px; left:10px; }

  /* make any CTA inside cards full-width on mobile */
  .hero .cta, .faq .cta{ width:100%; }
}