/* ==========================================================================
   Miradoes — Editorial Design System v2
   Mobile-first · 8px spacing grid · Full-bleed sections + 1200px content
   Stripe / Linear aesthetic · Confident editorial typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color · dark default (system overrides via media query below) */
  --bg-0: #0c0d10;        /* page bg */
  --bg-1: #14161b;        /* card bg */
  --bg-2: #1d2027;        /* elevated */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  --ink: #f3ede0;         /* primary text */
  --ink-2: #b5ad9c;       /* secondary */
  --mute: #7a7466;        /* muted */

  --warm: #ff8a3a;        /* primary accent */
  --warm-2: #e85a4f;      /* secondary accent */
  --warm-3: #b85cd6;      /* tertiary accent */
  --warm-grad: linear-gradient(135deg, #ff8a3a 0%, #e85a4f 50%, #b85cd6 100%);

  --green: #5fd29b;
  --red: #ff6b6b;

  /* Typography */
  --display: "Fraunces", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, monospace;

  /* Typography scale — mobile-first */
  --t-eyebrow: 0.6875rem;   /* 11px */
  --t-body-sm: 0.8125rem;   /* 13px */
  --t-body: 0.9375rem;      /* 15px */
  --t-body-lg: 1.0625rem;   /* 17px */
  --t-h4: 1.125rem;         /* 18px */
  --t-h3: 1.5rem;           /* 24px */
  --t-h2: 2rem;             /* 32px */
  --t-h1: 2.5rem;           /* 40px */
  --t-display: 3rem;        /* 48px */
  --t-hero: 3.5rem;         /* 56px mobile hero */

  /* Spacing — 8px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Container */
  --container-max: 1200px;
  --container-pad: var(--s-5); /* 24px on mobile */

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-glow-warm: 0 0 40px rgba(255,138,58,0.15);

  /* Timing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
  --t-slow: 500ms;
}

/* Dark mode only — light theme removed. */
html { color-scheme: dark; }

/* Typography scale — tablet 768px+ */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--s-6); /* 32px */
    --t-h1: 3rem;          /* 48px */
    --t-h2: 2.25rem;       /* 36px */
    --t-display: 4rem;     /* 64px */
    --t-hero: 5rem;        /* 80px */
  }
}

/* Typography scale — desktop 1024px+ */
@media (min-width: 1024px) {
  :root {
    --container-pad: var(--s-7); /* 48px */
    --t-display: 5rem;     /* 80px */
    --t-hero: 6rem;        /* 96px */
  }
}

/* Above 1280px — content stays max 1200px centered, no further scaling */
@media (min-width: 1280px) {
  :root {
    --t-hero: 6rem;        /* CAP at 96px to prevent labăr */
  }
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--warm); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--warm-2); }
button { font: inherit; cursor: pointer; }
hr { border: none; border-top: 1px solid var(--line); margin: var(--s-8) 0; }
code, pre { font-family: var(--mono); font-size: 0.875em; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Selection */
::selection { background: var(--warm); color: #fff; }

/* --------------------------------------------------------------------------
   Container system
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Full-bleed sections — for hero, gradient backgrounds, etc */
.bleed {
  width: 100%;
  padding-inline: var(--container-pad);
}
.bleed > .container {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5 { margin: 0 0 var(--s-3); line-height: 1.1; }
p { margin: 0 0 var(--s-3); }

.display { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.muted { color: var(--mute); }
.text-ink-2 { color: var(--ink-2); }
.text-warm { color: var(--warm); }

/* --------------------------------------------------------------------------
   Nav — top bar
   -------------------------------------------------------------------------- */
nav.top {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-med) var(--ease);
}
nav.top .row {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-3) var(--container-pad);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 64px;
}
nav.top .brand {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  flex-shrink: 0;
}
nav.top .brand:hover { color: var(--warm); }
nav.top .brand small {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  font-style: normal;
}
nav.top .nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
  flex-wrap: wrap;
}
nav.top .nl {
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  padding: var(--s-2) 0;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
nav.top .nl:hover { color: var(--ink); }
nav.top .nl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--warm);
  transition: width var(--t-med) var(--ease);
}
nav.top .nl:hover::after { width: 100%; }
nav.top .nl.active { color: var(--ink); }
nav.top .nl.active::after { width: 100%; }

/* Mobile nav: hamburger reveal */
nav.top .hamburger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  color: var(--ink);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  nav.top .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-0);
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--container-pad);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  nav.top.open .nav-links { display: flex; }
  nav.top .hamburger { display: inline-flex; margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  min-height: 44px; /* tap target */
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-warm {
  background: var(--warm);
  color: #fff;
  box-shadow: 0 0 0 0 transparent;
}
.btn-warm:hover {
  background: var(--warm-2);
  color: #fff;
  box-shadow: var(--shadow-glow-warm);
}

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-line:hover {
  background: var(--bg-1);
  border-color: var(--ink-2);
  color: var(--ink);
}

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--bg-1); }

.btn.sm { padding: var(--s-2) var(--s-4); font-size: var(--t-body-sm); min-height: 36px; }
.btn.lg { padding: var(--s-4) var(--s-6); font-size: var(--t-body-lg); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card.hover:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.card.warm-glow {
  border-color: var(--warm);
  box-shadow: var(--shadow-glow-warm);
  background: linear-gradient(180deg, rgba(255,138,58,0.04), transparent 80%), var(--bg-1);
}
@media (min-width: 768px) {
  .card { padding: var(--s-6); }
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.badge.warm { background: rgba(255,138,58,0.12); border-color: rgba(255,138,58,0.3); color: var(--warm); }
.badge.green { background: rgba(95,210,155,0.12); border-color: rgba(95,210,155,0.3); color: var(--green); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--s-4); }
.form-group label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-2);
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-body-lg);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(255,138,58,0.18);
}

/* --------------------------------------------------------------------------
   Banner / alerts
   -------------------------------------------------------------------------- */
.banner {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-1);
  margin-bottom: var(--s-4);
  font-size: var(--t-body);
}
.banner.success { border-color: rgba(95,210,155,0.4); background: rgba(95,210,155,0.06); color: var(--green); }
.banner.error { border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.06); color: var(--red); }
.banner.purchase { border-color: var(--warm); background: rgba(255,138,58,0.06); color: var(--warm); }

/* --------------------------------------------------------------------------
   Tabs (account dashboard)
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
}
.tabs a {
  font-family: var(--sans);
  font-size: var(--t-body);
  padding: var(--s-3) var(--s-4);
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--t-fast) var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--warm); border-bottom-color: var(--warm); }

/* --------------------------------------------------------------------------
   Scroll-reveal animations
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   Hero connector animation (homepage)
   -------------------------------------------------------------------------- */
.bridge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin: var(--s-6) 0;
}
.bridge .orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--bg-1), var(--bg-2));
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.bridge .orb::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: var(--warm-grad);
  opacity: 0.2;
  filter: blur(12px);
  animation: pulse 3s var(--ease) infinite;
}
.bridge .orb.ai::before { animation-delay: 0s; }
.bridge .orb.wp::before { animation-delay: 1.5s; }
@keyframes pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
.bridge .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 200px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--warm) 50%, transparent);
  background-size: 200% 100%;
  animation: flow 4s linear infinite;
}
@keyframes flow {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.bridge .particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 200px);
  height: 2px;
  pointer-events: none;
}
.bridge .particles span {
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 8px var(--warm);
  animation: travel 3s linear infinite;
}
.bridge .particles span:nth-child(1) { animation-delay: 0s; }
.bridge .particles span:nth-child(2) { animation-delay: 1s; }
.bridge .particles span:nth-child(3) { animation-delay: 2s; }
@keyframes travel {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.site {
  border-top: 1px solid var(--line);
  padding: var(--s-8) 0 var(--s-6);
  margin-top: var(--s-9);
  background: var(--bg-0);
}
footer.site .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
@media (max-width: 768px) {
  footer.site .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }
}
@media (max-width: 480px) {
  footer.site .foot-grid {
    grid-template-columns: 1fr;
  }
}
footer.site h6 {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 var(--s-3);
}
footer.site ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
footer.site a { color: var(--ink-2); font-size: var(--t-body); }
footer.site a:hover { color: var(--ink); }
footer.site .legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-body-sm);
  color: var(--mute);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Theme + lang switcher widgets (in nav)
   -------------------------------------------------------------------------- */
.tw, .lw {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 2px;
  gap: 0;
}
.tw button, .lw a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  border-radius: var(--r-full);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  text-decoration: none;
}
.tw button:hover, .lw a:hover { color: var(--ink); }
.tw button.active, .lw a.active { background: var(--warm); color: #fff; }

/* --------------------------------------------------------------------------
   Legacy compat — keep these from v1 so existing mu-plugins keep rendering
   -------------------------------------------------------------------------- */
nav.top .arrow { display: inline-block; margin-left: 4px; transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.sec-num { display: inline-flex; gap: var(--s-2); align-items: baseline; }
.sec-num .n { font-family: var(--mono); color: var(--mute); }
.sec-num .lbl { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }

/* --------------------------------------------------------------------------
   Cookie banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: var(--s-4);
  left: var(--s-4);
  right: var(--s-4);
  max-width: 460px;
  margin: 0 auto;
  z-index: 200;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cookie-banner p { margin: 0; font-size: var(--t-body-sm); color: var(--ink-2); }
.cookie-banner .actions { display: flex; gap: var(--s-2); }