/* style.css — revised: funky + minimal, fixes for banding, open-post targeting & button polish */

/* ====== Variables & base ====== */
:root{
  --bg-dark: #081129;          /* deep midnight */
  --bg-soft: #0f2030;          /* mid background */
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --muted: #9fb0c8;
  --accent-1: #6ad3ff;         /* ice cyan */
  --accent-2: #9b5cff;         /* electric purple */
  --accent-3: #ff7a88;         /* coral */
  --glow: 0 18px 50px rgba(107,64,255,0.12);
  --radius: 16px;
  --max-width: 1080px;
  --shadow-soft: 0 10px 30px rgba(3,10,18,0.6);
  --glass-border: 1px solid rgba(255,255,255,0.04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* simplified background to avoid banding */
  background:
    radial-gradient(600px 360px at 8% 8%, rgba(155,92,255,0.06), transparent 8%),
    radial-gradient(520px 320px at 92% 86%, rgba(106,211,255,0.04), transparent 10%),
    linear-gradient(180deg, #071022 0%, #081428 60%);
  color: #e6f0fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* container */
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* ===== header ===== */
.site-header{
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-icon{
  width:40px;height:40px;border-radius:9px;display:inline-block;object-fit:cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 2px 8px rgba(155,92,255,0.06);
  transform: translateZ(0);
  background: linear-gradient(135deg,var(--accent-2),var(--accent-1));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;
}
.brand-text{font-weight:800;font-size:18px;letter-spacing:0.2px;color: #f3fbff}

/* nav */
.main-nav{display:flex;gap:14px;align-items:center}
.nav-link{
  color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:600;
  transition: all .18s cubic-bezier(.2,.9,.2,1);
}
.nav-link:hover{ color: #fff; transform: translateY(-2px); background: rgba(255,255,255,0.02) }
.nav-link.active{ color: #fff; box-shadow: inset 0 -3px 0 linear-gradient(90deg,var(--accent-1),var(--accent-2)); }

/* menu toggle for small screens */
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer}

/* ===== main hero & layout ===== */
.main-content{flex:1 1 auto;padding:46px 0 64px}
.hero-card{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border-radius:var(--radius);
  padding:26px;
  box-shadow: var(--glow), var(--shadow-soft);
  border: var(--glass-border);
  overflow:visible;
}

/* left column */
.hero-left h1{margin:0 0 10px;font-size:34px;line-height:1.02;color:#ffffff}
.lead{margin:0 0 18px;color:rgba(230,240,251,0.9)}
.input-row{display:flex;gap:14px;align-items:center}
.input{
  flex:1;padding:12px 16px;border-radius:12px;border:none;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #dff1ff; outline:none; font-size:15px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.input::placeholder{color:rgba(230,240,251,0.45)}
.input:focus{box-shadow: 0 8px 30px rgba(106,211,255,0.06); transform: translateY(-1px);}

/* buttons */
.btn{padding:10px 16px;border-radius:12px;border:0;cursor:pointer;font-weight:800;letter-spacing:0.3px}
.btn-primary{
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2));
  color: #061426;
  box-shadow: 0 8px 28px rgba(107,64,255,0.12);
  transform: translateZ(0);
}
.btn-secondary{
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.02);
}

/* helper row */
.helper-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);gap:12px}
.examples .example{background:none;border:0;color:var(--accent-1);cursor:pointer;padding:6px;border-radius:8px;font-weight:700}
.examples .example:hover{transform:translateY(-3px)}

/* right column */
.hero-right{padding-left:6px}
.features{list-style:none;padding:0;margin:0}
.features li{padding:10px 0;color:#e9f7ff;font-weight:700;display:flex;gap:10px;align-items:center}

/* little accent dot */
.features li::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(180deg,var(--accent-1),var(--accent-2));display:inline-block}

/* ===== result preview card ===== */
.result{margin-top:28px}
.preview-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: var(--glass-border); border-radius:12px; padding:14px; box-shadow: 0 12px 36px rgba(4,10,20,0.5);
}
.preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.preview-meta{display:flex;align-items:center;gap:12px}
.meta-title{font-weight:800;color:#ffffff}
.meta-sub{color:var(--muted);font-size:13px}
.media-wrap{margin-top:12px;text-align:center}
.media-video, .media-thumb{max-width:100%;max-height:560px;border-radius:12px;object-fit:contain;background:#000}

/* controls */
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.controls .btn{box-shadow:none}

/* skeleton */
.skeleton{height:14px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05), rgba(255,255,255,0.02));border-radius:6px;opacity:0.9}

/* ===== footer (full-bleed) ===== */
.site-footer{
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  width:100vw;
  box-sizing:border-box;
  background: linear-gradient(180deg, rgba(6,18,36,0.8), rgba(6,18,36,0.6));
  border-top:1px solid rgba(255,255,255,0.03);
  padding:18px 0;
  z-index:20;
}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.copy{color:rgba(230,240,251,0.9);font-weight:700}
.footer-links a{color:var(--accent-1);text-decoration:none;font-weight:700;margin:0 6px}
.footer-links a:hover{text-decoration:underline}

/* ===== responsive ===== */
@media (max-width:980px){
  .hero-card{grid-template-columns:1fr;padding:18px}
  .hero-right{order:2;padding-left:0}
  .helper-row{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .main-nav{display:none}
  .nav-toggle[aria-expanded="true"] + .main-nav{display:flex;flex-direction:column;position:absolute;top:64px;right:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px;border-radius:10px;box-shadow: var(--glow) }
  .brand-text{font-size:16px}
  .brand-icon{width:34px;height:34px}
  .hero-left h1{font-size:22px}
  .footer-inner{flex-direction:column;gap:8px;text-align:center}
}

/* subtle hover lift for cards */
.hero-card:hover, .preview-card:hover{transform: translateY(-4px); transition: transform .28s cubic-bezier(.2,.9,.2,1)}

/* focus ring accessibility */
.input:focus, .btn:focus { outline: 3px solid rgba(154,92,255,0.14); outline-offset:2px; }

/* ===== optional micro-animations ===== */
@keyframes floaty {
  0% { transform: translateY(0px) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0px) }
}
.brand-icon{ animation: floaty 6s ease-in-out infinite }



/* --- Button + Open Post hover polish --- */
/* ===== Interactive Download + Open Post buttons (drop-in replace) ===== */

/* ensure base for ripple/after pseudo elements */
.btn, .controls a.open-post {
  position: relative;
  overflow: hidden; /* needed for ripple/shimmer */
  will-change: transform, box-shadow;
}

/* ---------- Download (primary) button: visible text + animated gradient + ripple ---------- */
.btn-primary {
  background: linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 100%);
  background-size: 200% 100%; /* for subtle hover slide */
  color: #061426; /* dark on normal */
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 16px;
  border: 0;
  box-shadow: 0 8px 28px rgba(11,111,240,0.12);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, color .12s ease, filter .12s ease;
}

/* subtle slide of gradient and white text on hover for contrast */
.btn-primary:hover {
  color: #fff; /* white on hover for guaranteed contrast */
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11,111,240,0.18);
  filter: saturate(1.08) brightness(1.04);
  background-position: 100% 0; /* slide gradient */
}

/* keyboard focus */
.btn-primary:focus {
  outline: none;
  box-shadow: 0 14px 36px rgba(107,64,255,0.14), 0 0 0 5px rgba(106,211,255,0.06);
  color: #fff;
}

/* ripple effect (css-only) using ::after */
.btn-primary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s ease;
  pointer-events: none;
}

/* on active (click), expand ripple */
.btn-primary:active::after {
  transform: translate(-50%,-50%) scale(40);
  opacity: 1;
  transition: transform .35s cubic-bezier(.0,.9,.2,1), opacity .35s ease;
}

/* keep accessible reduced-motion behavior */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { transition: none; }
  .btn-primary, .btn-primary:hover { transition: none; transform: none; }
}

/* ---------- secondary button (preview) keep subtle but consistent ---------- */
.btn-secondary {
  background: rgba(255,255,255,0.02);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 10px 14px;
  border-radius: 12px;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
  transform: translateY(-3px);
}

/* ---------- Open Post — styled pill with animated underline & icon ---------- */
/* explicit class expected: class="open-post" on the anchor */
.controls a.open-post,
.controls a.open-post:link,
.controls a.open-post:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: var(--accent-1);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, color .12s ease, background .12s ease;
}

/* add small icon element with gentle entrance (uses pseudo-element) */
.controls a.open-post::before {
  content: "↗";
  display:inline-block;
  font-size:13px;
  color: var(--accent-2);
  transform: translateY(0);
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0.95;
}

/* underline bar (grows from center) */
.controls a.open-post::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 72%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
  box-shadow: 0 8px 18px rgba(107,64,255,0.09);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
  opacity: 0.98;
}

/* hover / focus: lift + reveal underline + icon shift */
.controls a.open-post:hover,
.controls a.open-post:focus {
  color: #fff;
  transform: translateY(-3px);
  background: linear-gradient(90deg, rgba(106,211,255,0.06), rgba(155,92,255,0.06));
  box-shadow: 0 18px 36px rgba(107,64,255,0.08);
}
.controls a.open-post:hover::after,
.controls a.open-post:focus::after {
  transform: translateX(-50%) scaleX(1);
}
.controls a.open-post:hover::before,
.controls a.open-post:focus::before {
  transform: translateY(-3px) rotate(-7deg);
  color: #fff;
}

/* active press */
.controls a.open-post:active { transform: translateY(-1px) scale(.997); }

/* mobile tweak */
@media (max-width:520px) {
  .controls a.open-post { padding: 7px 10px; font-size: 14px; }
  .controls a.open-post::after { bottom: -8px; width: 86%; }
  .btn-primary { padding: 9px 12px; }
}

/* ensure anchors that open external posts get the class in script.js when generating HTML:
   <a class="open-post" href="..." target="_blank" rel="noopener">Open Post</a>
*/


/* === Improved Readability / Font Scaling === */

/* Base text scaling */
body {
  font-size: 17px; /* previously ~15px */
  line-height: 1.55;
  letter-spacing: 0.1px;
}

/* Headings */
h1, h2, h3, .hero-left h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 800;
}

/* Subtext and helper lines */
.lead, .meta-sub, .helper-row, .examples, .features li, .footer-inner, .meta-stats {
  font-size: 16px;
}

/* Inputs and buttons */
.input {
  font-size: 17px;
  padding: 14px 18px;
}

.btn {
  font-size: 16px;
  padding: 11px 18px;
}

/* Navigation links */
.nav-link {
  font-size: 16px;
}

/* Preview text */
.meta-title {
  font-size: 18px;
}
.meta-sub {
  font-size: 15px;
}

/* Features list (right column on hero) */
.features li {
  font-size: 16.5px;
}

/* Footer */
.copy, .footer-links a {
  font-size: 15.5px;
}

/* Adjust for small screens */
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .btn {
    font-size: 15px;
  }
  .meta-title {
    font-size: 17px;
  }
  .hero-left h1 {
    font-size: 24px;
  }
}



/* === Larger meta text + stats styling === */

/* increase username/title size in preview head */
.preview-head .meta-title {
  font-size: 20px;      /* larger username */
  font-weight: 900;
  color: #ffffff;
}

/* description / caption */
.preview-head .meta-sub {
  font-size: 15.5px;
  color: rgba(230,240,251,0.9);
  margin-top: 6px;
  max-width: 85%;
  word-break: break-word;
}

/* stats row to the right */
.meta-stats {
  font-size: 16px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* individual stat pills */
.meta-stats .stat-item {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.02);
  color: var(--muted);
  font-weight:700;
}

/* separator between inline stats */
.meta-stats .stat-sep {
  color: rgba(255,255,255,0.06);
  margin: 0 6px;
}

/* ensure long captions wrap inside card */
.preview-card .meta-sub {
  word-wrap: break-word;
  white-space: normal;
}

/* mobile tweaks */
@media (max-width:980px) {
  .preview-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .meta-stats { justify-content: flex-start; flex-wrap:wrap; gap:8px; }
  .meta-stats .stat-item { font-size:15px; padding:6px 8px; }
}




/* Stats color accents (views/likes/comments) */
.meta-stats .stat-item { font-weight:700; font-size:15.5px; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.02); color:var(--muted); display:inline-flex; align-items:center; gap:8px; }

.meta-stats .stat-views { color: var(--accent-1); border-color: rgba(106,211,255,0.06); background: linear-gradient(90deg, rgba(106,211,255,0.02), rgba(255,255,255,0.01)); }
.meta-stats .stat-likes { color: #ff6b94; border-color: rgba(255,107,148,0.06); background: linear-gradient(90deg, rgba(255,107,148,0.02), rgba(255,255,255,0.01)); }
.meta-stats .stat-comments { color: #d7b3ff; border-color: rgba(155,92,255,0.06); background: linear-gradient(90deg, rgba(155,92,255,0.02), rgba(255,255,255,0.01)); }

.meta-stats .stat-sep { color: rgba(255,255,255,0.06); margin: 0 8px; }

/* adjust spacing on mobile */
@media (max-width:980px) {
  .meta-stats { gap: 8px; flex-wrap:wrap; font-size:15px; }
  .meta-stats .stat-item { padding:6px 8px; font-size:14.5px; }
}





/* ===== Overflow & footer safe area fixes (REPLACE previous overflow fix) ===== */

/* keep horizontal overflow hidden globally */
html, body {
  overflow-x: hidden;
}

/* Do NOT force .container or cards to 100vw — allow your centered container to keep side gutters */
/* Only ensure header/footer full-bleed visuals are allowed to escape the centered container using the full-bleed trick you already have. */

/* make sure full-bleed header/footer layout stays safe from OS taskbar / UI overlays */
.site-footer {
  position: relative;            /* keep in document flow */
  z-index: 20;
  /* add a small safe bottom padding so footer never gets hidden by OS taskbars */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

/* Add comfortable bottom padding to the main content to prevent footer overlap */
.main-content {
  padding-bottom: 48px; /* ensures space before footer — adjust up if footer is taller */
}

/* Keep centered container width intact (no change) */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Prevent media from overflowing but remain centered with margins preserved */
.media-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;     /* prevents internal overflow without affecting page layout */
}
.media-wrap video,
.media-video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;   /* optional: rounded player */
  box-shadow: 0 12px 36px rgba(4,10,20,0.45); /* optional: subtle card shadow */
}

/* If your body previously used min-height:100vh make sure the footer still flows naturally */
body {
  min-height: 100%;
  /* keep flex layout so footer sits after content */
  display:flex;
  flex-direction:column;
}

/* Ensure the main-content grows and footer stays at bottom when content is short */
.main-content {
  flex: 1 0 auto;
}

/* final safety: avoid accidental horizontal scroll from very long words/content */
* { word-wrap: break-word; }

/* small-screen tweak if footer is still tight */
@media (max-height:700px) {
  .main-content { padding-bottom: 80px; } /* give extra breathing room on short screens */
}


/* ===== Spacing between main boxes (input + result card) ===== */
.hero-card {
  margin-bottom: 40px;   /* space after the top input box */
}

.result .preview-card {
  margin-top: 30px;      /* space before result box */
}



/* ===== Header: fixed height, vertical centering, avoid overlap ===== */

/* define header height for consistent spacing */
:root { --header-height: 64px; }

/* make header a consistent bar */
.site-header {
  height: var(--header-height);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0 0; /* inner padding handled by .site-header-inner */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* keep header content vertically centered and constrained */
.site-header-inner {
  height: var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 0 20px; /* small horizontal padding */
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  box-sizing:border-box;
}

/* brand area: vertically center, slightly smaller icon if needed */
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-icon { width:40px; height:40px; border-radius:10px; }
.brand-text { font-size:18px; margin-top:0; margin-bottom:0; }

/* nav: ensure links align vertically in header */
.main-nav { display:flex; align-items:center; gap:18px; height:100%; }
.nav-link { line-height:1; padding:8px 10px; vertical-align:middle; }

/* make sure small-screen toggle does not push header taller */
.nav-toggle { margin:0; height:auto; line-height:normal; }

/* prevent header overlap with page content: add top spacing to main content equal to header height */
.main-content {
  padding-top: calc(var(--header-height) + 20px); /* keep a little extra breathing room */
  /* keep existing padding-bottom */
}

/* if you already used a hero-card with big top margin, this won't double up too much */
.hero-card { margin-top: 0; }

/* responsive: reduce header height on small screens so it doesn't feel bulky */
@media (max-width:720px) {
  :root { --header-height: 56px; }
  .brand-text { font-size:16px; }
  .site-header-inner { padding: 0 14px; }
  .main-nav { gap:10px; }
  .main-content { padding-top: calc(var(--header-height) + 18px); }
}




/* ===== DownZORA header brand — clean alignment & spacing ===== */

.brand {
  display: flex;
  align-items: center;        /* vertical center icon + text */
  gap: 12px;                  /* space between icon and text */
  text-decoration: none;
  color: #eaf6ff;
}

/* icon */
.brand-icon {
  width: 36px;                /* fixed size for consistent header */
  height: 36px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); /* subtle depth */
  transition: transform .18s ease, filter .18s ease;
}

/* textual logo */
.brand-text {
  font-weight: 800;
  font-size: 20px;            /* tuned for header height */
  line-height: 1;
  letter-spacing: 0.6px;
  color: #e9f9ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45); /* subtle lift */
  display: inline-block;
  transform-origin: left center;
  transition: transform .18s ease;
  padding-top: 2px;           /* small nudge so baseline sits visually centered */
}

/* hover polish: slight scale and glow */
.brand:hover .brand-icon { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 10px 30px rgba(106,211,255,0.08)); }
.brand:hover .brand-text { transform: translateY(-2px); }

/* ensure header inner has breathing room so brand doesn't sit on border line */
.site-header-inner {
  padding-top: 10px;   /* smaller vertical padding; adjust if needed */
  padding-bottom: 10px;
}

/* reduce header border visibility so it doesn't cut through text */
.site-header {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* smaller screens: scale things down slightly */
@media (max-width:720px) {
  .brand-icon { width: 30px; height: 30px; }
  .brand-text { font-size: 16px; padding-top: 1px; }
  .site-header-inner { padding-top: 8px; padding-bottom: 8px; }
}




/* --- DownZORA header polish --- */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #eaf6ff;
}

.brand-icon {
  width: 42px; /* a bit larger for balance */
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(106, 211, 255, 0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-text {
  font-weight: 900;
  font-size: 26px; /* increased for visibility */
  letter-spacing: 1.2px; /* more space between letters */
  color: #e9f9ff;
  text-shadow: 0 0 10px rgba(106,211,255,0.25), 0 1px 2px rgba(0,0,0,0.4);
  transform-origin: left center;
  transition: all 0.25s ease;
}

/* Hover effect — subtle movement + glow */
.brand:hover .brand-icon {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(106, 211, 255, 0.25);
}
.brand:hover .brand-text {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(155,92,255,0.4), 0 2px 6px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}

/* Responsive adjustment for smaller devices */
@media (max-width: 720px) {
  .brand-icon {
    width: 34px;
    height: 34px;
  }
  .brand-text {
    font-size: 20px;
    letter-spacing: 1px;
  }
}


/* ===== Instruction Card ===== */
.instruction-card {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: #e8f2ff;
  backdrop-filter: blur(8px);
}

.instruction-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-1);
}

.instruction-card ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
  color: #f3f7ff;
}

.instruction-card li {
  margin-bottom: 4px;
  font-weight: 600;
}




/* Photos Section */

/* Photos carousel thumbnails */
.thumbs-row { -webkit-overflow-scrolling: touch; }
.thumb-btn { background: transparent; border: 0; padding: 4px; cursor: pointer; border-radius: 8px; display:flex;align-items:center; }
.thumb-img { width:72px; height:72px; object-fit:cover; border-radius:8px; display:block; box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.thumb-v { width:72px; height:72px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)); color:#fff; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,0.4); }



/* ===== Instruction Card ===== */
.instruction-card {
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: #e8f2ff;
  backdrop-filter: blur(8px);
}

.instruction-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-1);
}

.instruction-card ol {
  margin: 0;
  padding-left: 22px;
  line-height: 1.6;
  color: #f3f7ff;
}

.instruction-card li {
  margin-bottom: 4px;
  font-weight: 600;
}


/* safe error/result container */
.result {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow: auto;
  padding: 18px;
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.02);
}


/* add to your main.css */
.hero-card { grid-template-columns: 1fr 320px; }
.preview-card { max-width: 920px; margin: 22px auto; }
#ytResult { max-height:520px; overflow:auto; white-space:pre-wrap; }



/* --- Fix YouTube page layout --- */

.youtube-page .hero-card {
  width: 100%;
  max-width: 1200px;       /* LARGE card */
  margin: 20px auto;
  padding: 30px;
  border-radius: 20px;
  display: block !important;   /* BREAKS the 2-column grid */
}

.youtube-page #ytResult {
  margin-top: 25px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  padding: 25px;
  max-width: 100%;
  min-height: 300px;
  max-height: none;
  overflow: visible;
}

.youtube-page .preview-card {
  max-width: 100%;
  margin: 0 auto;
}


/* --- YouTube select / option readability fix --- */
/* Set the select to always use dark text so it remains visible against dark backgrounds */
.youtube-page select,
.youtube-page select option {
  color: #061426 !important;        /* dark text */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
}

/* When focused/open, ensure the select text stays dark (most browsers respect this) */
.youtube-page select:focus,
.youtube-page select:active {
  color: #061426 !important;
  outline: 3px solid rgba(154,92,255,0.14);
}

/* If the browser draws white text for options (rare), this improves contrast for the selected value */
.youtube-page .controls .select-wrapper {
  display: inline-block;
  border-radius: 10px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}

/* Progress UI */
.youtube-page #dlProgressWrap {
  margin-top: 18px;
  max-width: 720px;
}
.youtube-page #dlProgress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.youtube-page #dlProgressBar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #6ad3ff, #9b5cff);
  transition: width 120ms linear;
}
.youtube-page #dlProgressText {
  margin-top: 8px;
  color: var(--muted);
  font-weight:700;
}





/* ==== DownZORA Global Header (matches your screenshot) ==== */
/* main.css — consolidated & final for DownZORA
   - Single source of truth for header, hero, cards, footer
   - Clean landing/no-scroll behavior via body.landing-no-scroll
   - Responsive and safe for mobile/short viewports
*/

/* =========================
   Variables & Base
   ========================= */
:root{
  --bg-dark: #071022;
  --bg-soft: #081428;
  --card: rgba(255,255,255,0.04);
  --glass-border: 1px solid rgba(255,255,255,0.03);
  --muted: #9fb0c8;
  --accent-1: #6ad3ff;
  --accent-2: #9b5cff;
  --radius: 16px;
  --max-width: 1200px;
  --header-h: 64px;
  --footer-h: 56px;
  --shadow-soft: 0 10px 30px rgba(3,10,18,0.6);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset & basics */
*,
*::before,
*::after { box-sizing: border-box; word-wrap: break-word; }
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  min-height: 100vh;
  color: #e6f0fb;
  line-height: 1.45;
  background:
    radial-gradient(600px 360px at 8% 8%, rgba(155,92,255,0.06), transparent 8%),
    radial-gradient(520px 320px at 92% 86%, rgba(106,211,255,0.04), transparent 10%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-soft) 60%);
  display: flex;
  flex-direction: column;
  font-size: 17px;
}

/* Container */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* =========================
   Header
   ========================= */
.site-header {
  height: var(--header-h);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 100;
  position: relative; /* in-flow by default */
}

.site-header-inner {
  width:100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing: border-box;
}

/* Brand */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color: inherit; }
.brand-icon {
  width:42px; height:42px; border-radius:12px; display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--accent-2),var(--accent-1));
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  font-weight:700; color:#fff;
}
.brand-text {
  font-weight:900; font-size:26px; letter-spacing:1.2px; color:#e9f9ff; text-shadow:0 1px 0 rgba(0,0,0,0.45);
}

/* Nav */
.main-nav { display:flex; gap:18px; align-items:center; }
.nav-link {
  color: var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; font-weight:600;
  transition: all .18s cubic-bezier(.2,.9,.2,1);
}
.nav-link:hover { color:#fff; transform: translateY(-2px); background: rgba(255,255,255,0.02); }
.nav-link.active { color:#fff; }

/* =========================
   Main / Hero
   ========================= */
main, .main-content { flex: 1 0 auto; display: block; position: relative; }

/* Default: normal flow, content pushes footer. */
.main-content { padding: 28px 0 48px; box-sizing: border-box; }

/* Hero card (center box) */
.hero-card {
  max-width: 1100px;
  margin: 28px auto 36px;
  padding: 48px 44px;
  border-radius: 18px;
  border: var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  box-shadow: 0 30px 80px rgba(6,12,28,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(120%);
  box-sizing: border-box;
  display: block;
  overflow: visible;
}

/* Title & subtitle inside hero */
.hero-card > h1, .hero-title { font-size: clamp(26px, 4vw, 40px); margin: 0 0 10px; text-align:center; color:#f8fbff; line-height:1.04; }
.hero-card .lead { text-align:center; margin:0 0 22px; color: var(--muted); font-size:16px; }

/* Cards layout: 3-column grid -> responsive collapse */
.hero-card .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 20px;
  align-items: start;
  padding-top: 8px;
}

/* Tool card */
.tool-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
  border: 1px solid rgba(255,255,255,0.02);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
  text-decoration:none;
  color:inherit;
  min-height:140px;
  overflow: hidden;
}
.tool-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(6,12,28,0.55); }

/* Card head row (icon + title) */
.tool-card .card-head{ display:flex; gap:14px; align-items:center; width:100%; }
.tool-card .tool-icon {
  width:56px; height:56px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; color:#042033;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 8px 22px rgba(11,111,240,0.06);
  flex-shrink:0;
}
.tool-card .tool-title { margin:0; font-size:18px; font-weight:900; color:#fbfeff; }
.tool-card .tool-desc { margin:6px 0 0 0; color:var(--muted); font-size:14px; line-height:1.55; }

/* reduce hero shadow depth if desired */
.hero-card { box-shadow: 0 24px 60px rgba(6,12,28,0.55), inset 0 1px 0 rgba(255,255,255,0.02); }

/* =========================
   Preview, controls & other small bits
   ========================= */
.preview-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:14px; border: var(--glass-border); box-shadow: 0 12px 36px rgba(4,10,20,0.5); }
.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05), rgba(255,255,255,0.02));}

/* Buttons */
.btn { border:0; cursor:pointer;border-radius:12px; font-weight:800; letter-spacing:0.3px; }
.btn-primary {
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); color: #061426; box-shadow:0 8px 28px rgba(107,64,255,0.12);
  padding: 10px 16px;
}
.btn-primary:hover { color:#fff; transform: translateY(-4px); box-shadow:0 18px 40px rgba(11,111,240,0.18); background-position:100% 0; }
.btn-secondary { background: rgba(255,255,255,0.02); color:var(--muted); padding:10px 14px; border:1px solid rgba(255,255,255,0.02); }

/* =========================
   Footer
   ========================= */
.site-footer {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(6,18,36,0.88), rgba(6,18,36,0.70));
  border-top: 1px solid rgba(255,255,255,0.02);
  padding: 10px 0;
  z-index: 20;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.copy { color: rgba(230,240,251,0.9); font-weight:700; font-size:14px; }
.footer-links { display:flex; gap:14px; align-items:center; }
.footer-links a { color: var(--accent-1); font-weight:800; text-decoration:none; padding:4px 6px; font-size:14px; }

/* Footer mobile stack */
@media (max-width:720px) {
  .footer-inner { flex-direction:column; text-align:center; gap:8px; padding:8px 16px; }
  .copy, .footer-links a { font-size:13px; }
}

/* =========================
   Landing page: no-scroll behavior
   - Add class landing-no-scroll on body to activate
   ========================= */
body.landing-no-scroll {
  /* keep document flow but header/footer will be fixed visually */
  display: block;
  min-height: 100vh;
  overflow: hidden; /* page-level scrolling disabled */
}

/* Fix header & footer visually for landing pages */
body.landing-no-scroll .site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100;
}
body.landing-no-scroll .site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); padding: 8px 0; z-index: 100;
}

/* Main area becomes the exact available rectangle between header & footer */
body.landing-no-scroll main,
body.landing-no-scroll .main-content {
  position: absolute;
  top: var(--header-h);
  bottom: var(--footer-h);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;      /* vertical center of hero box */
  justify-content: center;  /* horizontal center of hero box */
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;         /* page-level no scroll; hero internal scroll allowed */
}

/* Hero card size & centering inside landing main area */
body.landing-no-scroll .hero-card {
  width: min(1100px, 94%);
  height: auto; /* size to content */
  max-height: calc(100% - 40px);
  margin: 0 auto;
  padding: 48px 44px;
  overflow: auto;
  display: block;
  box-sizing: border-box;
}

/* make heading compact & cards balanced */
body.landing-no-scroll .hero-card > h1,
body.landing-no-scroll .hero-title { margin-top: 0; margin-bottom: 10px; text-align:center; }

/* Cards row in landing mode */
body.landing-no-scroll .hero-card .cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

/* Slightly more compact cards / icons to fit short viewports */
body.landing-no-scroll .tool-card { padding: 16px; min-height: 120px; }
body.landing-no-scroll .tool-card .tool-icon { width:48px; height:48px; font-size:18px; }
body.landing-no-scroll .tool-card .tool-title { font-size:16px; }
body.landing-no-scroll .tool-card .tool-desc { font-size:13px; line-height:1.45; }

/* If viewport height is tight, shrink hero padding to keep it centered */
@media (max-height:820px) {
  body.landing-no-scroll .hero-card { padding: 28px 28px; max-height: calc(100% - 28px); }
  body.landing-no-scroll .hero-card .cards { gap: 14px; }
  body.landing-no-scroll .tool-card { min-height: 110px; padding: 14px; }
}

/* Collapse grid responsively */
@media (max-width:1100px) {
  .hero-card .cards { grid-template-columns: repeat(2, 1fr); }
  body.landing-no-scroll .hero-card .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:760px) {
  .hero-card .cards, body.landing-no-scroll .hero-card .cards { grid-template-columns: 1fr; gap: 12px; }
  .tool-card { min-height: auto; padding: 14px; }
  .tool-card .tool-icon { width:48px; height:48px; }
  .brand-text { font-size: 20px; }
}

/* =========================
   Final safety & small polishes
   ========================= */
/* Prevent accidental extra page-level scroll when landing-no-scroll is inactive */
main, .main-content { flex: 1 0 auto; min-height: 0; }

/* Reduce heavy shadows on small devices */
@media (max-width:720px) {
  .hero-card { box-shadow: 0 18px 40px rgba(6,12,28,0.45), inset 0 1px 0 rgba(255,255,255,0.02); }
}

/* tiny visual polish */
.brand:hover .brand-icon { transform: scale(1.06); box-shadow: 0 10px 30px rgba(106,211,255,0.12); }


/* ===== Footer: make copy visible at left and links on the right ===== */
/* Put this at the very end of main.css to override any prior rules */

.site-footer { 
  z-index: 120; /* ensure footer sits above lower elements */
  padding: 10px 0 !important;
  box-sizing: border-box;
}

/* ===== STRONG OVERRIDE: Make footer copy visible + links right ===== */
/* Paste at the very end of main.css */

.site-footer {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  padding: 10px 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(6,18,36,0.86), rgba(6,18,36,0.70)) !important;
  border-top: 1px solid rgba(255,255,255,0.02) !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Make sure footer-inner is a proper flex container and centered */
.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* copy left, links right */
  gap: 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 6px 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Force the copy (left) to be visible and not clipped */
.footer-inner .copy {
  order: 1 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  color: rgba(230,240,251,0.96) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding-left: 6px !important;
  white-space: nowrap !important;
  z-index: 10000 !important;
}

/* Keep the links pinned to the right */
.footer-inner .footer-links {
  order: 2 !important;
  margin-left: auto !important;
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* If any earlier rule set transform/translate, cancel it */
.footer-inner, .footer-inner * {
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
}

/* If overflow hidden on a parent is clipping, allow visible for footer */
footer, .site-footer, .footer-inner { overflow: visible !important; }

/* Mobile stacking while keeping copy on top */
@media (max-width: 720px) {
  .footer-inner { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  .footer-inner .copy { order: 1 !important; }
  .footer-inner .footer-links { order: 2 !important; }
}



/* ===== Emergency footer/header positioning fixes — paste at END of main.css ===== */

/* 1) Header must be on top and fixed in normal flow */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;            /* keep consistent header height */
  min-height: 64px !important;
  z-index: 11000 !important;           /* higher than footer */
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* still allow inner header to center content */
.site-header-inner {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  max-width: var(--max-width,1200px) !important;
  margin: 0 auto !important;
}

/* 2) Footer must be pinned to the bottom (not top). Lower z-index than header */
/* Use fixed bottom so it stays visible and does not move to top */
.site-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 56px !important;            /* footer height used thru CSS for layout offsets */
  min-height: 56px !important;
  padding: 8px 0 !important;
  z-index: 10000 !important;           /* less than header so header stays visually on top */
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;                /* cancel any earlier top:0 rules */
}

/* force footer inner layout: copy left, links right */
.footer-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 6px 20px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* show the copy element and ensure it's left aligned */
.footer-inner .copy {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(230,240,251,0.96) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

/* keep links to the right */
.footer-inner .footer-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  order: 2 !important;
  margin-left: auto !important;
}

/* 3) Main content must be offset so header/footer don't overlap it */
main, .main-content {
  position: relative !important;
  box-sizing: border-box !important;
  /* reserve space for header + footer to avoid overlap */
  padding-top: calc(64px + 28px) !important;   /* header + breathing room */
  padding-bottom: calc(56px + 18px) !important;/* footer + breathing room */
  margin: 0 auto !important;
  flex: 1 0 auto !important;
  overflow: visible !important;
}

/* 4) If landing-no-scroll is used: ensure hero centers between header/footer */
body.landing-no-scroll main,
body.landing-no-scroll .main-content {
  top: 64px !important;
  bottom: 56px !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  overflow: hidden !important; /* internal scroll allowed inside hero if necessary */
  box-sizing: border-box !important;
}

/* 5) Prevent any transforms/negative margins from moving footer upward */
.site-footer, .site-footer * {
  transform: none !important;
  translate: none !important;
  margin-top: 0 !important;
}

/* 6) small screens: keep footer content stacked but header still on top */
@media (max-width: 720px) {
  .site-header { height: 56px !important; min-height: 56px !important; }
  .site-header-inner { height: 56px !important; }
  .site-footer { height: 52px !important; min-height: 52px !important; padding: 6px 0 !important; }
  main, .main-content { padding-top: calc(56px + 18px) !important; padding-bottom: calc(52px + 12px) !important; }
  .footer-inner { flex-direction: column !important; gap: 8px !important; text-align:center !important; }
}

.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.site-header-inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* Ensure hero doesn't hide/clip newly added siblings and avoid internal scroll */
.hero-card { overflow: visible !important; }

/* Safe container for extra content so it doesn't trigger hero scroll */
.extra-features { margin: 60px auto; padding: 0 20px; box-sizing: border-box; }

/* Feature card styling (keeps consistent look) */
.extra-features .feature-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  color: inherit;
}


/* ===== EMERGENCY OVERRIDES: fixes leftover left-column / internal scrollbar ===== */
/* Paste at the very end of main.css so it overrides earlier rules. */

/* Make the page's main/layout behave normally again */
html, body {
  overflow-x: hidden !important;  /* avoid horizontal overflow */
}

/* Ensure the landing "no-scroll" mode uses a normal centered layout */
body.landing-no-scroll, body {
  display: block !important;
  min-height: 100vh !important;
}

/* Protect main area: do not absolutely position it (prevents weird clipping) */
body.landing-no-scroll main,
body.landing-no-scroll .main-content,
main, .main-content {
  position: relative !important;
  top: 30px !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  padding: 28px 20px !important;
  display: block !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Force hero-card to be a centered block sized to its content */
.hero-card {
  display: block !important;
  width: min(1100px, 96%) !important;
  margin: 36px auto !important;
  padding: 48px 44px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
}

/* Remove any leftover transforms or absolute positioning from hero-left/hero-right */
.hero-left, .hero-right {
  position: relative !important;
  transform: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* If you are using the inline row (display:flex;flex-wrap:wrap) overwrite it so it sits inside hero */
.hero-card > [style*="display:flex"], .hero-card .cards, .cards, .tool-row, .tool-card {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  justify-items: stretch !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Card size safety: keep cards compact so hero doesn't grow too tall */
.tool-card, .card {
  min-height: 120px !important;
  padding: 18px !important;
  overflow: hidden !important;
}

/* Ensure any weird vertical scrollbar element is hidden - this targets common accidental elements */
.hero-card > div::-webkit-scrollbar,
.hero-card ::-webkit-scrollbar,
.extra-features ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

/* Hide accidental absolutely-positioned debugging element (common when pasting HTML) */
.hero-card > .debug, .hero-card .left-rail, .left-rail, .debug-rail {
  display: none !important;
}

/* Footer: ensure below hero, not overlapping header */
.site-footer { position: relative !important; margin-top: 48px !important; }

/* Responsive: collapse to single column on small screens */
@media (max-width: 980px) {
  .hero-card .cards, .hero-card > [style*="display:flex"], .cards { grid-template-columns: 1fr !important; }
  .tool-card { min-height: auto !important; }
}


/* ---------- Tool cards: vertical layout + equal heights ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;      /* important — grid cells stretch to same height */
  align-content: start;
}

/* ensure responsiveness */
@media (max-width:1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:720px) {
  .cards { grid-template-columns: 1fr; }
}

/* card content: column layout so icon -> title -> desc stack vertically */
.tool-card {
  display: flex !important;
  flex-direction: column !important;   /* vertical stacking */
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 20px !important;
  min-height: 160px;                   /* uniform minimum height */
  height: 100%;                         /* fill grid cell so all cards equal height */
  box-sizing: border-box;
  overflow: hidden;
}

/* make icon on its own row */
.tool-card .tool-icon {
  margin: 0 0 12px 0;   /* icon sits above title */
  align-self: flex-start;
}

/* title then description spacing */
.tool-card .tool-title { margin: 0 0 8px 0; font-weight:900; font-size:20px; }
.tool-card .tool-desc  { margin: 0; color: var(--muted); line-height:1.5; font-size: 17px;}

/* When using older inline wrappers, this prevents row-direction from taking over */
.cards, .tool-card { flex-direction: column !important; }

/* Optional: equalize visual weight if shadows differ */
.tool-card { box-shadow: 0 12px 36px rgba(4,10,20,0.45); border-radius:12px; border:1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); }


/* ===== Feature cards: equal height + vertical layout ===== */

/* ensure grid cells stretch to same height */
.features-grid {
  display: grid; /* you already have inline grid in HTML; this enforces it from CSS */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items: stretch;     /* <--- important: stretch grid cells so rows match */
}

/* make each feature card a column flex container and fill its grid cell */
.feature-card {
  display: flex;
  flex-direction: column;   /* icon -> title -> desc stacked vertically */
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;             /* fill its grid cell so all cards equal height */
  min-height: 200px;        /* tweak if you want taller cards; helps visual balance */
  padding: 22px;
  box-sizing: border-box;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 18px 44px rgba(6,12,28,0.55);
  overflow: hidden;
}

/* icon row — keep it separate and slightly above title */
.feature-card > div:first-child { /* assumes the emoji/icon is the first child */
  font-size: 30px;
  margin-bottom: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* title and description spacing */
.feature-card h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 900;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

/* if you want the cards to vertically space out icon/title/desc (title near top, CTA near bottom) */
/* uncomment the following and add a CTA element inside .feature-card if needed */
/*
.feature-card {
  justify-content: space-between;
}
*/

/* RESPONSIVE: ensure comfortable spacing on small screens */
@media (max-width: 1100px) {
  .feature-card { min-height: 180px; padding: 18px; }
}
@media (max-width: 720px) {
  .features-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 160px; padding: 14px; }
}



/* ================= Header — Mobile & Desktop responsive styles ================= */

/* ===== DownZORA: robust mobile menu overlay (final override) ===== */

/* ensure header fixed and above overlay */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  z-index: 12000 !important;
}

/* Hide desktop nav on mobile, show hamburger */
@media (max-width: 859px) {
  .main-nav { display: none !important; }
  .dz-hamburger { display: inline-flex !important; }
  .brand-text { font-size: 18px !important; }
}

/* Full-screen overlay backdrop */
#dz-mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;    /* content appears below header */
  justify-content: center;
  padding-top: var(--header-h); /* leave space for header */
  background: rgba(0,0,0,0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 11999;
}

/* when opened: show overlay */
#dz-mobile-menu[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* inner sheet: slide-from-top, full width on small screens */
#dz-mobile-menu .dz-mobile-inner {
  width: 100vw;            /* important: fill viewport width */
  max-width: 100vw;       /* override any earlier max-width rules */
  height: auto;
  max-height: calc(100vh - var(--header-h) - 8px);
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #061428, #081b2b);
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* inner nav should scroll instead of whole page */
  border-radius: 8px;
}

/* visible state: settle */
#dz-mobile-menu[aria-hidden="false"] .dz-mobile-inner {
  transform: translateY(0) !important;
}

/* header row inside menu: brand + close button */
.dz-mobile-inner .dz-mobile-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* close button */
.dz-mobile-close {
  background: transparent;
  border: 0;
  color: #dff1ff;
  font-size: 22px;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
}
.dz-mobile-close:focus { outline:3px solid rgba(106,211,255,0.12); }

/* mobile nav list — comfortable tap size, scrollable if long */
.dz-mobile-inner .mobile-nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.dz-mobile-inner .mobile-nav .nav-link {
  display: block;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #f4fbff;
  border: 1px solid rgba(255,255,255,0.02);
}
/* small footer inside menu */
.dz-mobile-inner .dz-mobile-footer {
  padding: 12px 6px;
  color: var(--muted);
  text-align:center;
  font-size:13px;
  border-top: 1px solid rgba(255,255,255,0.02);
}

/* ensure cloned nav is only visible inside overlay (avoid accidental copies) */
.mobile-nav { visibility: visible !important; }
.main-nav .mobile-nav { display:none !important; }

/* Safety: if something earlier forced overflow hidden, allow overlay to show */
html, body { -webkit-font-smoothing:antialiased; }

/* small-screen niceties */
@media (max-width:420px) {
  .dz-mobile-inner .mobile-nav .nav-link { font-size: 16px !important; padding:12px 10px !important; }
  .dz-mobile-inner .dz-mobile-head { padding:8px 10px; }
}


/* hide hamburger on desktop */
@media (min-width: 860px) {
  .dz-hamburger {
    display: none !important;
  }
}


/* header / mobile menu safety */
.dz-hamburger { display: none; background: transparent; border: 0; cursor: pointer; }
.dz-hamburger .dz-hamburger-box { display:inline-block; padding:8px; }
.dz-hamburger .dz-hamburger-inner { width:20px; height:2px; background: #fff; display:block; border-radius:2px; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }