/* ==========================================================================
   eepy — Premium Futuristic‑Minimal Landing Styles
   Brand: calm, editorial, privacy-conscious. Aesthetic: Apple-like, soft, confident.
   This stylesheet refines and elevates the UI with soft gradients, glass, and bold editorial type.
   ========================================================================== */

/* Design Tokens (primary) */
:root{
  --bg: #0a0a0c;
  --bg-2: #0f0f12;

  --surface-0: rgba(255,255,255,0.02);
  --surface-1: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.06);
  --surface-3: rgba(255,255,255,0.08);

  --card: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);
  --border-subtle: rgba(255,255,255,0.08);

  --text: #f4f6f8;
  --text-2: rgba(244,246,248,0.75);
  --muted: rgba(244,246,248,0.56);

  --accent: #7b8cff;
  --accent-2: #b08cff;
  --accent-3: #9aa8ff;

  --success: #57d2a3;
  --warning: #ffd166;

  --shadow-sm: 0 6px 18px rgba(0,0,0,0.22);
  --shadow: 0 12px 32px rgba(0,0,0,0.28);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.32);
  --inner-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-tiny: 0 1px 2px rgba(0,0,0,0.18);

  --radius-xs: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-12: 28px;
  --space-14: 32px;
  --space-16: 40px;
  --space-20: 56px;
  --space-24: 72px;

  --font-sans: ui-rounded, ui-sans-serif, system-ui, -apple-system, "SF Pro Rounded", "SF Pro Text", Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body: 14px;
  --fs-lead: 16px;
  --fs-subtitle: 18px;
  --fs-title: clamp(22px, 4vw, 36px);
  --fs-display: clamp(28px, 5vw, 56px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-1: 160ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  --container-max: 1200px; /* harmonize with existing layout */
}

/* Compatibility aliases (to support legacy references in HTML/CSS) */
:root{
  --bg-elev: var(--bg-2);
  --surface: var(--surface-2);
  --border-compat: var(--border);
  --text-compat: var(--text);
  --muted-compat: var(--muted);
  --shadow-soft: var(--shadow);
  --r-1: var(--radius-xs);
  --r-2: var(--radius);
  --r-3: var(--radius-lg);
  --container: var(--container-max);
}

/* Light mode adjustments */
@media (prefers-color-scheme: light){
  :root{
    --bg: #f7f7fb;
    --bg-2: #ffffff;

    --surface-0: rgba(10,10,14,0.02);
    --surface-1: rgba(10,10,14,0.04);
    --surface-2: rgba(10,10,14,0.06);
    --surface-3: rgba(10,10,14,0.08);

    --card: rgba(10,10,14,0.04);
    --border: rgba(10,10,14,0.12);
    --border-subtle: rgba(10,10,14,0.08);

    --text: #0d0e12;
    --text-2: rgba(13,14,18,0.75);
    --muted: rgba(13,14,18,0.6);

    --shadow-sm: 0 8px 20px rgba(0,0,0,0.08);
    --shadow: 0 12px 28px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 48px rgba(0,0,0,0.12);
    --shadow-tiny: 0 1px 2px rgba(0,0,0,0.12);
  }
}

/* Base */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(123,140,255,0.14), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(176,140,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color:var(--text);
  font-family: var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering: optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; z-index:1000;
  padding:8px 12px; border-radius:10px;
  background: var(--surface-2); color: var(--text);
  border:1px solid var(--border);
}

/* Containers */
.container{width:min(var(--container-max), calc(100% - 32px)); margin-inline:auto}

/* Utilities */
.cluster{display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center}
.stack{display:flex; flex-direction:column; gap:1rem}
.grid{display:grid; gap:1.25rem}
.is-hidden{display:none !important}
.muted{color:var(--muted)}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,10,12,0.7), rgba(10,10,12,0.3) 60%, transparent);
  border-bottom:1px solid transparent;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  backdrop-filter:saturate(140%) blur(12px);
}
.site-header.is-elevated{
  box-shadow: var(--shadow);
  border-color: var(--border);
  background:rgba(10, 10, 12, 0);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--space-7) 0;
}
.brand .logotype{
  font-family: var(--font-mono);
  font-size:20px; letter-spacing:0.5px; text-transform:lowercase;
  color:var(--text);
}
.primary-nav{display:flex; align-items:center; gap:10px}
.nav-toggle{
  display:none; border:0; background:transparent; color:var(--text); padding:8px; border-radius:999px;
  transition: background var(--dur-1) var(--ease);
}
.nav-toggle:hover{background:var(--surface-2)}
.tabs{display:flex; gap:8px; align-items:center}
.tab{
  padding:10px 14px; border-radius:999px;
  border:1px solid transparent; color:var(--text-2);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
  font-family: var(--font-mono); font-size:var(--fs-sm);
  background:transparent;
}
.tab:hover{color:var(--text); border-color:var(--border); background:var(--surface-1); transform: translateY(-1px)}
.tab:active{transform: translateY(0)}
.tab.is-active, .tab[aria-current="true"]{color:var(--text); border-color:var(--accent); background:rgba(123,140,255,0.12)}
.tab.primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#0b0b0e; border-color:transparent;
  box-shadow: 0 8px 22px rgba(123,140,255,0.25);
}
.tab.primary:hover{transform: translateY(-1px); box-shadow: 0 10px 26px rgba(123,140,255,0.28)}
.tab.ghost{border-color:var(--border)}
.tab.small{padding:8px 12px}

@media (max-width: 760px){
  .tabs{
    position:absolute; top:100%; right:16px; left:16px;
    flex-direction:column; background:rgba(10,10,12,0.92);
    border:1px solid var(--border-subtle); border-radius:12px; padding:10px; display:none
  }
  .tabs.is-open{display:flex}
  .nav-toggle{display:inline-flex}
}

/* Orb & geometric grid lines */
.orb{
  position:fixed; inset:auto auto 10% 60%;
  width:420px; height:420px; border-radius:50%;
  filter: blur(50px);
  background: radial-gradient(closest-side, rgba(123,140,255,0.25), rgba(176,140,255,0.15), transparent 70%);
  pointer-events:none; opacity:.55; transform:translate3d(0,0,0);
  transition: opacity var(--dur-3) var(--ease);
}
.grid-lines{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 80px);
  opacity: .3;
}

/* Sections */
.section{padding: clamp(56px, 8vw, var(--space-24)) 0}
.eyebrow{
  font-family: var(--font-mono);
  text-transform:lowercase; letter-spacing:.4px; font-size:var(--fs-sm); color:var(--muted);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: clamp(16px, 3vw, 22px)
}
.section-lead{color:var(--text-2); font-size:var(--fs-lead)}
.accent{color:var(--accent)}

/* Display/lead */
.display{
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  line-height:1.05; letter-spacing:.2px; margin:0 0 var(--space-5); text-wrap:balance;
}
.display-sm{
  font-family: var(--font-mono);
  font-size: var(--fs-title);
  line-height:1.15; margin:0 0 var(--space-4);
}
.lead{color:var(--text-2); font-size:var(--fs-lead); margin:0 0 var(--space-6)}

/* Hero */
.hero{padding-top: clamp(72px, 10vw, 96px); position:relative}
.grid-hero{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(18px, 3vw, 28px); align-items:center;
}
.hero-copy .cta-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.meta-points{
  display:grid; gap:6px; margin:var(--space-4) 0 0; padding:0; list-style:none; color:var(--muted); font-size:var(--fs-sm)
}
.hero-visual{display:flex; align-items:center; justify-content:center}
.hero-badges{margin-top: 10px}
.scroll-hint{
  position:absolute; left:50%; transform: translateX(-50%);
  bottom: 18px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2);
  display:flex; align-items:center; gap:8px; opacity:.85;
}
.scroll-hint .chev{display:inline-block; transform: translateY(0); animation: bounce 1400ms var(--ease) infinite}
@keyframes bounce{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(4px) } }

/* Gradient divider */
.gradient-divider{
  height: 1px; margin: 16px 0; opacity: .6;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
}

/* Glass + Mockup */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px) saturate(140%);
}
.mockup{padding:16px; width:min(460px, 100%); transform: translateZ(0); transform-style:preserve-3d; transition: transform var(--dur-3) var(--ease) }
.mockup.tilt:hover{ transform: perspective(900px) rotateX(2deg) rotateY(-2deg) scale(1.01) }
.mockup-header{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.chip{
  font-family: var(--font-mono);
  font-size:var(--fs-sm); color:var(--text);
  background: var(--surface-2);
  border:1px solid var(--border-subtle);
  border-radius:999px; padding:6px 10px;
}
.chip.muted{color:var(--muted)}
.mockup-card{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  padding:12px; border-radius:12px; background: var(--surface-1); border:1px solid var(--border-subtle); margin-bottom:10px;
}
.avatar{
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(180deg, rgba(123,140,255,0.4), rgba(176,140,255,0.3));
  box-shadow: var(--inner-shadow);
}
.lines{display:grid; gap:6px}
.l{height:7px; border-radius:6px; background:rgba(255,255,255,0.18)}
.l1{width:68%}.l2{width:88%}.l3{width:40%}.short{width:28%}.medium{width:60%}
.pill-row{display:flex; gap:6px; margin-top:6px}
.pill{
  font-family: var(--font-mono);
  font-size:var(--fs-sm); padding:6px 10px; border-radius:999px;
  background: rgba(123,140,255,0.16); color:var(--text); border:1px solid rgba(123,140,255,0.32);
}
.controls{display:flex; gap:8px; margin-left:auto}
.controls .c{width:18px; height:18px; border-radius:50%; background:var(--surface-3); border:1px solid var(--border-subtle)}
.mockup-footer{display:flex; gap:8px; justify-content:flex-end}
.mockup-footer .circle{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25)}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); border-radius:999px;
  background: var(--surface-1); color:var(--text);
  padding:10px 16px; font-size:13px; font-family: var(--font-mono);
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  position:relative; overflow:hidden; will-change: transform;
}
.btn:hover{transform: translateY(-1px); background: var(--surface-2)}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#0b0b0e; border-color: transparent;
  box-shadow: 0 10px 26px rgba(123,140,255,0.30);
}
.btn.primary:hover{box-shadow: 0 14px 34px rgba(123,140,255,0.35)}
.btn.ghost{background: transparent}
.btn.text{border-color: transparent; background: transparent; color: var(--text-2)}
.btn.circular{border-radius: 999px}
.btn .btn-inner{display:flex; align-items:center; gap:10px}
.btn .btn-icon{width:16px; height:16px}
.btn.small{ padding:8px 12px; font-size: 12px }

/* Icon circle */
.icon-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background: rgba(123,140,255,0.16); border:1px solid rgba(123,140,255,0.32);
}
.icon-circle svg{width:18px; height:18px; color: var(--text)}

/* Feature grid */
.grid-features{
  --col-gap: 16px;
  display:grid; gap:var(--col-gap);
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}
.card{
  min-width: 0; min-height: 0;
  padding: clamp(14px, 2vw, 18px);
  border-radius: var(--radius);
  border:1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px) saturate(140%);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
  display: flex; flex-direction: column;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.card .card-title{
  margin:8px 0 6px; font-family: var(--font-mono); font-size:16px; letter-spacing:.2px; color: var(--text);
}
.card .card-body{color:var(--text-2); font-size:var(--fs-body); margin:0 0 12px}
.card .card-footer{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto}
.card .chip{background: var(--surface-1)}

@media (min-width: 980px){
  .grid-features > .card:nth-child(1){grid-column: span 4}
  .grid-features > .card:nth-child(2){grid-column: span 4}
  .grid-features > .card:nth-child(3){grid-column: span 4}
  .grid-features > .card:nth-child(4){grid-column: span 6}
  .grid-features > .card:nth-child(5){grid-column: span 3}
  .grid-features > .card:nth-child(6){grid-column: span 3}
}
@media (max-width: 980px){
  .grid-hero{grid-template-columns:1fr; gap:22px}
  .hero{padding-top:72px}
  .grid-features { grid-template-columns: 1fr; gap: var(--space-6) }
}

/* Community */
.grid-community{
  display:grid; gap:16px; grid-template-columns: 1.2fr 0.8fr; align-items:stretch;
}
.community-card{padding: clamp(16px, 2vw, 20px)}
.community-visual{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; padding:10px}
.community-visual .tile{
  height:120px; border-radius:12px; border:1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.community-visual .tile:hover{transform: translateY(-2px); box-shadow: var(--shadow-sm)}
.community-visual .t1{background: linear-gradient(180deg, rgba(123,140,255,0.18), rgba(176,140,255,0.08))}
.community-visual .t2{background: linear-gradient(180deg, rgba(176,140,255,0.18), rgba(123,140,255,0.08))}
.community-visual .t3{background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03))}
.community-visual .t4{background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03))}
.bullets{margin:10px 0 0; padding-left:18px; color:var(--text-2); font-size:var(--fs-body)}
.row-icons{display:flex; gap:6px; margin-top:10px}
.row-icons .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25)}

@media (max-width: 980px){
  .grid-community{grid-template-columns:1fr}
}

/* Privacy grid */
.grid-privacy{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-privacy > article{ min-width: 0 }
@media (max-width: 980px){
  .grid-privacy{ grid-template-columns:1fr }
}

/* Testimonials */
.testimonial-slider { position: relative; }
.testimonial-track {
  display: flex; gap: 14px; overflow: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 6px;
}
.testimonial { scroll-snap-align: center; min-width: 280px; max-width: 560px; }
.testimonial::-webkit-scrollbar, .testimonial-track::-webkit-scrollbar { display: none; }

/* Subscribe / CTA */
.subscribe .subscribe-inner{
  display:grid; gap:16px; grid-template-columns: 1fr 1fr; align-items:center; padding: clamp(18px, 3vw, 22px);
  border-radius: var(--radius-lg);
}
.subscribe-copy .lead{margin-bottom: 0}
.subscribe-form{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center}
.cta-pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{border:1px solid var(--border-subtle); padding:10px 14px; border-radius:999px; background: var(--surface-1); color: var(--text)}
.pill:hover{background: var(--surface-2)}
@media (max-width: 880px){
  .subscribe .subscribe-inner{grid-template-columns:1fr}
}

/* FAQ */
.faq-list{display:grid; gap:12px}
.faq details{
  padding:12px; border-radius: var(--radius); border:1px solid var(--border-subtle);
  background: var(--surface-1);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.faq details[open]{background: var(--surface-2); box-shadow: var(--shadow-sm)}
.faq summary{
  cursor:pointer; list-style:none; font-family: var(--font-mono); font-size:var(--fs-body);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{
  color:var(--text-2); font-size:var(--fs-body); padding-top:10px;
  border-top: 1px solid var(--border-subtle); margin-top:10px;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border-subtle); padding:22px 0; background: var(--surface-0)
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brandline{display:flex; align-items:center; gap:10px}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:var(--muted); font-size:var(--fs-sm); transition: color var(--dur-2) var(--ease)}
.footer-nav a:hover{color:var(--text)}

/* Reveal animation helper */
.reveal{opacity:0; transform: translateY(8px)}
.reveal.is-visible{opacity:1; transform:none; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease)}

/* Microinteraction helpers */
@keyframes subtle-pop { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes glow {
  0% { box-shadow: 0 0 0 0 rgba(123,140,255,0.0) }
  50% { box-shadow: 0 0 0 6px rgba(123,140,255,0.10) }
  100% { box-shadow: 0 0 0 0 rgba(123,140,255,0.0) }
}
.btn.primary:focus-visible{animation: glow 900ms var(--ease-out) 1}

/* Marquee (trending tags / press bar) */
.marquee{
  position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-0);
}
.marquee-track{
  display: flex; gap: 18px; padding: 10px 0;
  will-change: transform;
  animation: marquee 22s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused }
.marquee .chip{ background: var(--surface-1) }
@keyframes marquee{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}

/* Floating circular CTA */
.floating-cta{
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 56px; height: 56px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #0b0b0e; border: 1px solid transparent;
  box-shadow: 0 18px 40px rgba(123,140,255,0.35);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.floating-cta:hover{ transform: translateY(-2px); box-shadow: 0 24px 54px rgba(123,140,255,0.4) }
.floating-cta:active{ transform: translateY(0) }
.floating-cta svg{ width: 18px; height: 18px }

/* Sticky micro-CTA container bar glass (footer bar) */
.micro-cta{
  position:sticky;
  bottom:0;
  inset-inline:0;
  z-index:50;
  pointer-events:none;
}
.micro-cta .bar{
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(140%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Focus */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Fine-tuning / Fixes */
.card > *:first-child{margin-top: 2px}
.card > *:last-child{margin-bottom: 2px}
.section .container > * + *{margin-top: clamp(10px, 2vw, 14px)}
.footer-nav a, .tab{touch-action:manipulation}
.subscribe .subscribe-inner{box-shadow: var(--shadow)}
.mockup{padding: clamp(14px, 2vw, 18px)}