/* ================================================================
   LinkVault — Premium Stylesheet
   File: assets/css/style.css

   TABLE OF CONTENTS:
   1.  CSS Variables (Customize colors, fonts, sizes here)
   2.  Reset & Base
   3.  Typography
   4.  Utility Classes
   5.  Layout — Container & Grid
   6.  Background Decorations
   7.  Navbar
   8.  Hero Section
   9.  URL Form Card
   10. Stats Bar
   11. Features Section
   12. How It Works Section
   13. Footer
   14. ── Locked Page ──
   15. Ad Zones
   16. AntiAdblock Overlay
   17. Countdown Ring
   18. Get Link Section
   19. Scroll Reveal Animations
   20. Responsive Breakpoints
   ================================================================ */


/* ════════════════════════════════════════════════
   1. CSS VARIABLES
   ════════════════════════════════════════════════ */
:root {
  /* ── Palette ── */
  --clr-bg:          #080c14;       /* Page background */
  --clr-surface:     #0e1420;       /* Card backgrounds */
  --clr-surface-2:   #141c2c;       /* Slightly lighter surfaces */
  --clr-border:      rgba(255,255,255,0.07);
  --clr-border-glow: rgba(0,224,255,0.25);

  --clr-accent:      #00e0ff;       /* Primary cyan accent */
  --clr-accent-dim:  rgba(0,224,255,0.12);
  --clr-accent-2:    #ff6b35;       /* Orange secondary accent */
  --clr-amber:       #f5a623;       /* Warning / attention color */

  --clr-text:        #e8edf5;       /* Primary text */
  --clr-text-muted:  #6b7a99;       /* Secondary/muted text */
  --clr-text-dim:    #3d4a66;       /* Very dim text */

  /* ── Gradients ── */
  --grad-accent:   linear-gradient(135deg, #00e0ff 0%, #0078ff 100%);
  --grad-hero:     linear-gradient(135deg, #00e0ff 0%, #a855f7 60%, #ff6b35 100%);
  --grad-surface:  linear-gradient(135deg, #0e1420 0%, #111827 100%);

  /* ── Typography ── */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Shadows ── */
  --shadow-card:   0 4px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-accent: 0 0 30px rgba(0,224,255,0.2);
  --shadow-glow:   0 0 80px rgba(0,224,255,0.08);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  180ms;
  --dur-med:   320ms;
  --dur-slow:  500ms;

  /* ── Countdown (configurable) ── */
  --countdown-seconds: 10;         /* Change this to adjust timer duration */
  --ring-circumference: 326.7px;   /* 2 * π * 52 (SVG circle r=52) */
}


/* ════════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

img, svg { display: block; max-width: 100%; }

button { cursor: pointer; font-family: inherit; }

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--clr-accent);
  background: var(--clr-accent-dim);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}


/* ════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

.gradient-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.accent { color: var(--clr-accent); }


/* ════════════════════════════════════════════════
   4. UTILITY CLASSES
   ════════════════════════════════════════════════ */
.hidden { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-med) var(--ease-out),
              background var(--dur-fast);
  user-select: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

/* Primary button */
.btn-primary {
  background: var(--grad-accent);
  color: #020e1a;
  box-shadow: 0 4px 20px rgba(0,224,255,0.25);
}
.btn-primary:hover {
  box-shadow: 0 6px 32px rgba(0,224,255,0.45);
  transform: translateY(-1px);
}

/* Outline button */
.btn-outline {
  background: transparent;
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}
.btn-outline:hover {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  background: var(--clr-accent-dim);
}

/* Accent (copy) button */
.btn-accent {
  background: var(--clr-accent-dim);
  color: var(--clr-accent);
  border: 1px solid var(--clr-border-glow);
}
.btn-accent:hover { background: rgba(0,224,255,0.2); }

/* Sizes */
.btn-sm  { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.btn-large { padding: 1rem 2rem; font-size: 1rem; border-radius: var(--radius-lg); }

/* Pulsing CTA button */
.btn-pulse {
  animation: pulse-ring 2.5s ease-in-out infinite;
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,224,255,0.25); }
  50%       { box-shadow: 0 4px 40px rgba(0,224,255,0.55), 0 0 0 8px rgba(0,224,255,0.1); }
}


/* ════════════════════════════════════════════════
   5. LAYOUT
   ════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--clr-accent-dim);
  border: 1px solid var(--clr-border-glow);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

.section-header h2 { color: var(--clr-text); }


/* ════════════════════════════════════════════════
   6. BACKGROUND DECORATIONS
   ════════════════════════════════════════════════ */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,224,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,224,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0,120,255,0.12) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.bg-glow--amber {
  background: radial-gradient(ellipse, rgba(245,166,35,0.08) 0%, transparent 70%);
}

/* All sections sit above the decorations */
nav, main, header, section, footer,
.locked-main, .ad-zone--sticky, .adblock-overlay {
  position: relative;
  z-index: 1;
}


/* ════════════════════════════════════════════════
   7. NAVBAR
   ════════════════════════════════════════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--clr-border);
  background: rgba(8,12,20,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--clr-text);
  transition: opacity var(--dur-fast);
}
.nav-logo:hover { opacity: 0.8; }

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--grad-accent);
  border-radius: var(--radius-sm);
  color: #020e1a;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-size: 0.88rem;
  font-weight: 600;
}

.nav-links a {
  color: var(--clr-text-muted);
  transition: color var(--dur-fast);
}
.nav-links a:not(.btn):hover { color: var(--clr-text); }


/* ════════════════════════════════════════════════
   8. HERO SECTION
   ════════════════════════════════════════════════ */
.hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--clr-amber);
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.2);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  margin-bottom: var(--space-xl);
  letter-spacing: 0.05em;
}

.hero-title {
  margin-bottom: var(--space-lg);
  color: var(--clr-text);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--clr-text-muted);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  line-height: 1.8;
}

.br-desktop { display: none; }
@media (min-width: 640px) { .br-desktop { display: block; } }


/* ════════════════════════════════════════════════
   9. URL FORM CARD
   ════════════════════════════════════════════════ */
.url-form-wrapper {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

.url-form-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-med);
}
.url-form-card:focus-within {
  border-color: var(--clr-border-glow);
  box-shadow: var(--shadow-card), var(--shadow-accent);
}

.input-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  transition: border-color var(--dur-fast);
}
.input-row:focus-within { border-color: rgba(0,224,255,0.4); }

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm);
  color: var(--clr-text-dim);
  flex-shrink: 0;
}

.url-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--clr-text);
  padding: 0.5rem 0;
  min-width: 0; /* Fix flex overflow */
}

.url-input::placeholder { color: var(--clr-text-dim); }

.btn-text { display: inline; }
.btn-icon { display: flex; }

/* Error message */
.url-error {
  font-size: 0.8rem;
  color: #ff5e57;
  margin-top: var(--space-sm);
  padding-left: var(--space-sm);
  min-height: 1.2em;
}

/* Output — generated locked link */
.output-wrapper {
  margin-top: var(--space-md);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border-glow);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  animation: slide-up var(--dur-slow) var(--ease-out) both;
}

.output-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-accent);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.output-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.output-url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  word-break: break-all;
  flex: 1;
}

.preview-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  margin-top: var(--space-sm);
  transition: color var(--dur-fast);
}
.preview-link:hover { color: var(--clr-accent); }


/* ════════════════════════════════════════════════
   10. STATS BAR
   ════════════════════════════════════════════════ */
.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.stat { text-align: center; }

.stat-number {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clr-accent);
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--clr-border);
}


/* ════════════════════════════════════════════════
   11. FEATURES SECTION
   ════════════════════════════════════════════════ */
.features-section {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--clr-border);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.feature-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: border-color var(--dur-med), transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med);
}

.feature-card:hover {
  border-color: var(--clr-border-glow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  background: var(--clr-accent-dim);
  border: 1px solid var(--clr-border-glow);
  border-radius: var(--radius-md);
  color: var(--clr-accent);
  margin-bottom: var(--space-lg);
}

.feature-card h3 {
  margin-bottom: var(--space-sm);
  color: var(--clr-text);
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
}


/* ════════════════════════════════════════════════
   12. HOW IT WORKS SECTION
   ════════════════════════════════════════════════ */
.how-section {
  padding: var(--space-3xl) 0;
  border-top: 1px solid var(--clr-border);
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 680px;
  margin-inline: auto;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-med);
}
.step:hover { border-color: var(--clr-border-glow); }

.step-number {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--clr-text-dim);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 4px;
}

.step-body h3 { margin-bottom: var(--space-sm); }
.step-body p  { font-size: 0.9rem; color: var(--clr-text-muted); }

.step-connector {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--clr-border-glow), var(--clr-border));
  margin-left: calc(var(--space-xl) + 2.8rem); /* Align with step number center */
}


/* ════════════════════════════════════════════════
   13. FOOTER
   ════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--clr-border);
  padding: var(--space-xl) 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════
   14. LOCKED PAGE
   ════════════════════════════════════════════════ */
.locked-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.locked-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) 0;
  /* Extra bottom padding for the sticky ad bar */
  padding-bottom: calc(var(--space-2xl) + 100px);
}

.locked-main .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.locked-card {
  width: 100%;
  max-width: 460px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
  animation: slide-up 0.6s var(--ease-out) both;
}

.locked-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--clr-text);
  letter-spacing: -0.03em;
}

.locked-logo svg {
  width: 22px; height: 22px;
  color: var(--clr-accent);
}

.locked-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
}

/* Error state */
.error-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.error-icon {
  font-size: 2.5rem;
  color: #ff5e57;
  display: flex;
}
.error-icon svg { width: 48px; height: 48px; }

.error-section h2 { font-size: 1.4rem; }
.error-section p  { color: var(--clr-text-muted); font-size: 0.9rem; }


/* ════════════════════════════════════════════════
   15. AD ZONES
   ════════════════════════════════════════════════ */
.ad-zone {
  overflow: hidden;
}

/* Header banner at top of locked page */
.ad-zone--header {
  width: 100%;
  padding: var(--space-sm) 0;
  background: rgba(8,12,20,0.9);
  border-bottom: 1px solid var(--clr-border);
}

/* Content square ad below the locked card */
.ad-zone--content {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--clr-border);
  overflow: hidden;
}

/* Sticky footer ad */
.ad-zone--sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(8,12,20,0.95);
  border-top: 1px solid var(--clr-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--dur-med) var(--ease-out);
}

.ad-zone--sticky.dismissed {
  transform: translateY(100%);
}

.ad-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  gap: var(--space-xs);
  min-height: 60px;
}

.ad-zone-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--clr-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Demo placeholder box (buyers replace this with real ad code) */
.ad-demo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 90px;
  max-width: 728px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.015),
    rgba(255,255,255,0.015) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--clr-text-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: var(--space-md);
}

.ad-demo-box--slim { min-height: 50px; }

.ad-sticky-close {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  background: none;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text-muted);
  padding: 4px;
  display: flex;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.ad-sticky-close:hover { color: var(--clr-text); border-color: var(--clr-text-muted); }


/* ════════════════════════════════════════════════
   16. ANTI-ADBLOCK OVERLAY
   ════════════════════════════════════════════════ */
.adblock-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8,12,20,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  animation: fade-in var(--dur-med) var(--ease-out);
}

.adblock-modal {
  background: var(--clr-surface);
  border: 1px solid rgba(255,94,87,0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  max-width: 440px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  box-shadow: 0 0 60px rgba(255,94,87,0.15);
}

.adblock-icon {
  width: 60px; height: 60px;
  background: rgba(255,94,87,0.1);
  border: 1px solid rgba(255,94,87,0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff5e57;
}
.adblock-icon svg { width: 28px; height: 28px; }

.adblock-modal h2 { font-size: 1.4rem; }
.adblock-modal p  { color: var(--clr-text-muted); font-size: 0.9rem; line-height: 1.7; }


/* ════════════════════════════════════════════════
   17. COUNTDOWN RING
   ════════════════════════════════════════════════ */
.countdown-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.countdown-ring-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
}

.countdown-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* Outer glow effect behind the ring */
.countdown-ring-wrapper::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,224,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.ring-track {
  fill: none;
  stroke: var(--clr-surface-2);
  stroke-width: 6;
}

.ring-progress {
  fill: none;
  stroke: url(#ringGradient);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-circumference);
  stroke-dashoffset: 0;
  /* Transition is controlled by JS for smooth animation */
  transition: stroke-dashoffset 1s linear;
}

/* The gradient for the SVG ring is defined inline via a defs element */
/* added dynamically by script.js so it works across browsers */

.countdown-number-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.countdown-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.countdown-unit {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.countdown-message {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--clr-text-muted);
  animation: hourglass-spin 3s ease-in-out infinite;
}

@keyframes hourglass-spin {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}


/* ════════════════════════════════════════════════
   18. GET LINK SECTION
   ════════════════════════════════════════════════ */
.get-link-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  animation: slide-up var(--dur-slow) var(--ease-out) both;
}

.success-icon {
  width: 68px; height: 68px;
  background: var(--clr-accent-dim);
  border: 2px solid var(--clr-border-glow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  animation: pop-in 0.5s var(--ease-snap) both;
}
.success-icon svg { width: 32px; height: 32px; }

.get-link-title {
  font-size: 1.5rem;
}

.get-link-subtitle {
  color: var(--clr-text-muted);
  font-size: 0.88rem;
}

.get-link-note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  font-family: var(--font-mono);
}


/* ════════════════════════════════════════════════
   19. SCROLL REVEAL ANIMATIONS
   ════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.45s; }

/* Keyframe definitions */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}


/* ════════════════════════════════════════════════
   20. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════ */

/* ── Small Mobile (≤ 420px) ── */
@media (max-width: 420px) {
  .nav-links { display: none; }
  .btn-text  { display: none; }
  .btn-icon  { display: flex; }
  .stats-bar { gap: var(--space-lg); }
  .stat-divider { display: none; }
}

/* ── Tablet and up (≥ 768px) ── */
@media (min-width: 768px) {
  .locked-main .container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }

  .locked-card { align-self: flex-start; }

  .ad-zone--content {
    max-width: 300px;
    align-self: flex-start;
  }

  .ad-demo-box { min-height: 250px; }
}

/* ── Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ════════════════════════════════════════════════
   [FIX 5-A] NO-JS FALLBACK WARNING
   ─────────────────────────────────────────────────
   Displayed via <noscript> in index.html and
   locked.html when JavaScript is disabled.
   Sits at the very top of the page, above all other
   content, so the visitor sees it immediately.
   ════════════════════════════════════════════════ */
.noscript-warning {
  position: relative;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, rgba(245,166,35,0.15), rgba(230,81,0,0.12));
  border-bottom: 1px solid rgba(245,166,35,0.35);
  color: #f5d87a;
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
}

.noscript-warning strong {
  font-weight: 700;
  color: #f5a623;
  margin-right: 0.4rem;
}


/* ════════════════════════════════════════════════
   [FIX 5-B] AD ZONE MIN-HEIGHT — CLS PREVENTION
   ─────────────────────────────────────────────────
   Before an ad network script loads and injects its
   iframe/creative, the .ad-zone containers have no
   intrinsic height, causing a Cumulative Layout Shift
   (CLS) that hurts Core Web Vitals scores.

   Setting explicit min-height values that match the
   standard ad slot sizes reserves the space up front
   so the page layout does not reflow when ads appear.

   Slot sizes used:
     Header banner  → 728×90  (Leaderboard)
     Content square → 300×250 (Medium Rectangle)
     Sticky footer  → 728×90  (Leaderboard)

   Adjust the pixel values here if you use different
   ad formats (e.g. 320×50 Mobile Banner).
   ════════════════════════════════════════════════ */

/* Header leaderboard banner — 90px content + inner padding */
.ad-zone--header {
  min-height: 110px; /* 90px ad + ~20px label + gap */
}

/* Side / content square (300×250 Medium Rectangle) */
.ad-zone--content {
  min-height: 280px; /* 250px ad + ~30px label + gap */
}

/* Sticky footer leaderboard — fixed at bottom, thinner chrome */
.ad-zone--sticky {
  min-height: 70px;  /* 50px ad + ~20px label */
}