/* ═══════════════════════════════════════════════════════════════
   OJO DIGITAL MEDIA LAB — GLOBAL CSS v3.0
   Sistema de diseño basado en CotiGo Flow V5.0
   Tipografías: Michroma (display/nav) + Orbitron (números/tech) + VT323 (retro)
   Acento: cyan #00b4d8 (marca OjoDigital)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Orbitron:wght@300;400;500;600;700;800;900&family=VT323&display=swap');

/* ── VARIABLES ── */
:root {
  --font-display: 'Michroma', sans-serif;
  --font-num:     'Orbitron', sans-serif;
  --font-body:    'Orbitron', sans-serif;
  --font-retro:   'VT323', monospace;
  --ease:         cubic-bezier(.16,1,.3,1);
  --ease-fast:    cubic-bezier(.4,0,.2,1);

  /* DARK (default) */
  --bg:      #080f1e;
  --bg2:     #0d1a2f;
  --card:    #0f1e35;
  --card2:   #142440;
  --bdr:     rgba(255,255,255,0.07);
  --bdr2:    rgba(0,180,216,0.35);
  --txt:     #e2e8f0;
  --sub:     #94a3b8;
  --mut:     #475569;
  --navy:    #0d1f3a;
  --blue:    #00b4d8;
  --blue2:   #0096c7;
  --teal:    #48cae4;
  --amber:   #f59e0b;
  --rose:    #f43f5e;
  --sage:    #22c55e;
  --purple:  #8b5cf6;
  --glow:    rgba(0,180,216,0.18);
  --glow2:   rgba(0,180,216,0.08);
  --strip-bg:     rgba(255,255,255,0.04);
  --strip-txt:    #e2e8f0;
  --strip-weight: 800;
  --strip-size:   15px;
  --strip-letter: 1.5px;
}
[data-theme="light"] {
  --bg:      #f0f8ff;
  --bg2:     #e0f4fb;
  --card:    #ffffff;
  --card2:   #f0faff;
  --bdr:     rgba(0,0,0,0.08);
  --bdr2:    rgba(0,150,199,0.25);
  --txt:     #0c1a2e;
  --sub:     #334155;
  --mut:     #64748b;
  --blue:    #0096c7;
  --blue2:   #0077a8;
  --teal:    #0096b7;
  --amber:   #d97706;
  --rose:    #e11d48;
  --sage:    #15803d;
  --purple:  #7c3aed;
  --glow:    rgba(0,150,199,0.12);
  --glow2:   rgba(0,150,199,0.05);
  --strip-bg:     rgba(0,0,0,0.04);
  --strip-txt:    #0c1a2e;
  --strip-weight: 900;
  --strip-size:   15px;
  --strip-letter: 1.5px;
}
[data-theme="retro"] {
  --bg:      #000800;
  --bg2:     #000400;
  --card:    #001200;
  --card2:   #001800;
  --bdr:     rgba(0,255,65,0.14);
  --bdr2:    rgba(0,255,65,0.45);
  --txt:     #00ff41;
  --sub:     #00cc33;
  --mut:     #00882b;
  --blue:    #00ff41;
  --blue2:   #00cc33;
  --teal:    #00ff41;
  --amber:   #00ff41;
  --rose:    #00cc33;
  --sage:    #00ff41;
  --purple:  #00cc33;
  --glow:    rgba(0,255,65,0.12);
  --glow2:   rgba(0,255,65,0.05);
  --font-body:    'VT323', monospace;
  --font-display: 'VT323', monospace;
  --font-num:     'VT323', monospace;
  --strip-bg:     rgba(0,255,65,0.08);
  --strip-txt:    #00ff41;
  --strip-weight: 700;
  --strip-size:   18px;
  --strip-letter: 3px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}
[data-theme="retro"] body {
  text-shadow: 0 0 8px rgba(0,255,65,0.4);
  letter-spacing: .5px;
}
[data-theme="retro"] body::after {
  content:'';
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
}
[data-theme="retro"] { cursor:crosshair; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue2);border-radius:3px; }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section { padding:100px 0; }
.section-sm { padding:60px 0; }

/* ── TYPOGRAPHY ── */
.font-display { font-family:var(--font-display); }
.font-num     { font-family:var(--font-num); }

/* ── TOPBAR ── */
#topbar {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-height,88px);
  background:rgba(8,15,30,0.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bdr);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
[data-theme="light"] #topbar  { background:rgba(240,248,255,0.92); }
[data-theme="retro"] #topbar  { background:#000200;border-color:var(--bdr2);backdrop-filter:none; }
#topbar .container { display:flex;align-items:center;justify-content:space-between;height:100%; }
.tb-logo { display:flex;align-items:center;gap:12px;text-decoration:none; }
.tb-logo img { height:var(--logo-nav-h,104px);width:var(--logo-nav-w,auto);max-width:280px;object-fit:contain; }
.tb-logo-text {
  font-family:var(--font-display);
  font-size:14px;letter-spacing:1px;
  color:var(--txt);
}
.tb-logo-text span { color:var(--blue); }
.tb-nav { display:flex;align-items:center;gap:4px;list-style:none; }
.tb-nav a {
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:.3px;
  color:var(--sub);text-decoration:none;
  padding:6px 12px;border-radius:7px;
  transition:color .2s,background .2s;
}
.tb-nav a:hover { color:var(--txt);background:var(--bdr); }
/* Dropdown */
.tb-nav .nav-group { position:relative; }
.nav-dropdown {
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:12px;padding:8px;min-width:220px;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:all .2s var(--ease);box-shadow:0 16px 48px rgba(0,0,0,0.4);
  z-index:300;
}
.nav-dropdown.open { opacity:1;pointer-events:all;transform:translateY(0); }
[data-theme="retro"] .nav-dropdown { border-radius:0; }
.nav-dropdown a {
  display:block;padding:8px 12px;border-radius:7px;
  font-size:12px;color:var(--sub);text-decoration:none;
  transition:all .15s;
}
.nav-dropdown a:hover { background:var(--bdr);color:var(--txt); }
[data-theme="retro"] .nav-dropdown a { border-radius:0; }

.tb-actions { display:flex;align-items:center;gap:8px; }
.theme-btns { display:flex;gap:4px; }
.theme-btn {
  width:32px;height:32px;border-radius:8px;
  border:1px solid var(--bdr);background:transparent;
  cursor:pointer;font-size:14px;
  color:var(--sub);transition:all .2s;
}
.theme-btn:hover,.theme-btn.active { background:var(--card);color:var(--txt);border-color:var(--blue2); }

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:10px;
  background:var(--blue2);color:#fff;
  font-family:var(--font-body);font-size:14px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .25s var(--ease);
  box-shadow:0 4px 20px rgba(0,150,199,0.3);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,150,199,0.45); }
[data-theme="retro"] .btn-primary {
  background:transparent;color:var(--sage);
  border:2px solid var(--sage);border-radius:0;
  box-shadow:none;letter-spacing:2px;font-family:var(--font-retro);
}
[data-theme="retro"] .btn-primary:hover { background:rgba(0,255,65,0.1);transform:none;box-shadow:0 0 16px rgba(0,255,65,0.3); }

.btn-secondary {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:10px;
  background:transparent;color:var(--txt);
  font-family:var(--font-body);font-size:14px;font-weight:600;
  text-decoration:none;border:1px solid var(--bdr2);
  cursor:pointer;transition:all .25s var(--ease);
}
.btn-secondary:hover { background:var(--card);border-color:var(--blue); }
[data-theme="retro"] .btn-secondary { border-radius:0;border-color:var(--mut);letter-spacing:2px;font-family:var(--font-retro); }

.btn-cta {
  padding:8px 20px;border-radius:8px;
  background:var(--blue2);color:#fff;
  font-family:var(--font-body);font-size:12px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .2s;white-space:nowrap;letter-spacing:.3px;
}
.btn-cta:hover { background:var(--blue);transform:translateY(-1px); }

/* ── SECTION HEADERS ── */
.section-header { text-align:center;margin-bottom:64px; }
.section-eyebrow {
  display:inline-block;
  font-family:var(--font-display);
  font-size:11px;font-weight:400;letter-spacing:3px;text-transform:uppercase;
  color:var(--blue);margin-bottom:16px;
}
[data-theme="retro"] .section-eyebrow { color:var(--sage); }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(26px,3.5vw,44px);
  letter-spacing:-0.5px;line-height:1.15;
  margin-bottom:16px;
}
[data-theme="retro"] .section-title { letter-spacing:3px; }
.section-desc { font-size:16px;color:var(--sub);max-width:560px;margin:0 auto;line-height:1.7; }

/* ── FEAT CARDS ── */
.feat-card {
  background:var(--card);
  border:1px solid var(--bdr);
  border-radius:16px;padding:32px;
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.feat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue2),transparent);
  opacity:0;transition:opacity .3s;
}
.feat-card:hover { transform:translateY(-4px);border-color:var(--bdr2);box-shadow:0 16px 48px rgba(0,0,0,0.3); }
.feat-card:hover::before { opacity:1; }
[data-theme="retro"] .feat-card { border-radius:0;border-color:var(--bdr2); }
[data-theme="retro"] .feat-card:hover { transform:none;box-shadow:0 0 20px rgba(0,255,65,0.1); }
.feat-icon {
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue2),var(--teal));
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:20px;flex-shrink:0;
}
[data-theme="retro"] .feat-icon { border-radius:0;background:transparent;border:1px solid var(--sage); }
.feat-title {
  font-family:var(--font-display);
  font-size:16px;letter-spacing:.5px;
  margin-bottom:10px;
}
.feat-desc { font-size:13px;color:var(--sub);line-height:1.7; }

/* ── CHIPS ── */
.chip {
  display:inline-block;padding:3px 10px;border-radius:100px;
  background:rgba(0,150,199,0.12);border:1px solid rgba(0,150,199,0.3);
  font-size:11px;font-weight:600;color:var(--blue);margin:2px;
  font-family:var(--font-body);letter-spacing:.3px;
}
[data-theme="retro"] .chip { border-radius:0;background:rgba(0,255,65,0.08);border-color:var(--mut);color:var(--sage); }
[data-theme="light"] .chip { background:rgba(0,120,170,0.08);color:var(--blue2); }

/* ── MARQUEE / LOGOS STRIP ── */
#logos-strip {
  padding:48px 0;
  border-top:1px solid var(--bdr);
  border-bottom:1px solid var(--bdr);
  overflow:hidden;
  background:var(--strip-bg);
}
[data-theme="light"] #logos-strip { background:rgba(0,150,199,0.04); }
[data-theme="retro"] #logos-strip { background:rgba(0,255,65,0.03);border-color:var(--bdr2); }
.logos-label {
  text-align:center;
  font-family:var(--font-display);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--mut);margin-bottom:28px;
}
.logos-track {
  display:flex;gap:64px;align-items:center;
  animation:scroll-logos 28s linear infinite;
  width:max-content;
}
.logos-track:hover { animation-play-state:paused; }
@keyframes scroll-logos { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-chip {
  font-family:var(--font-display);
  font-size:var(--strip-size);
  font-weight:var(--strip-weight);
  color:var(--strip-txt);
  white-space:nowrap;
  display:flex;align-items:center;gap:10px;
  letter-spacing:var(--strip-letter);
  opacity:1;
}
[data-theme=""] .logo-chip, body:not([data-theme]) .logo-chip { color:#b8d4e8; }
[data-theme="dark"] .logo-chip { color:#b8d4e8;font-weight:800; }
[data-theme="light"] .logo-chip { color:#0a3a5a;font-weight:900; }
[data-theme="retro"] .logo-chip { color:#00ff41;text-shadow:0 0 8px rgba(0,255,65,0.5); }
.logo-chip::before { content:'◆';font-size:9px;color:var(--blue);opacity:.8; }
[data-theme="retro"] .logo-chip::before { color:var(--sage); }

/* ── STAT / HERO STATS ── */
.stat-num {
  font-family:var(--font-num);
  font-size:34px;font-weight:700;line-height:1;
}
.stat-num span { color:var(--blue); }
.stat-label { font-size:12px;color:var(--sub);margin-top:4px;letter-spacing:.3px; }

/* ── CTA BOX ── */
.cta-box {
  text-align:center;position:relative;z-index:1;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:24px;padding:72px 48px;
}
[data-theme="retro"] .cta-box { border-radius:0;border-color:var(--sage); }
.cta-title {
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,48px);
  letter-spacing:-0.5px;margin-bottom:16px;line-height:1.15;
}
.cta-desc { font-size:16px;color:var(--sub);max-width:480px;margin:0 auto 36px;line-height:1.7; }
.cta-btns { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; }

/* ── HOW IT WORKS / PROCESS ── */
.how-grid {
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:32px;position:relative;
}
.how-grid::before {
  content:'';position:absolute;
  top:28px;left:calc(12.5% + 14px);right:calc(12.5% + 14px);height:1px;
  background:linear-gradient(90deg,var(--blue2),var(--teal),var(--blue2));opacity:.4;
}
.step-card { text-align:center;position:relative;z-index:1; }
.step-num {
  width:56px;height:56px;border-radius:50%;
  background:var(--card);border:2px solid var(--blue2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-num);font-size:20px;font-weight:700;
  color:var(--blue);margin:0 auto 20px;
  box-shadow:0 0 24px var(--glow);
}
[data-theme="retro"] .step-num { border-radius:0;border-color:var(--sage);color:var(--sage);box-shadow:0 0 16px rgba(0,255,65,0.2); }
.step-title { font-family:var(--font-display);font-size:14px;letter-spacing:.5px;margin-bottom:8px; }
.step-desc { font-size:13px;color:var(--sub);line-height:1.65; }

/* ── INCLUDE GRID (service pages) ── */
.includes-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.include-card {
  background:var(--card);border:1px solid var(--bdr);
  border-radius:14px;padding:28px;
  transition:all .3s var(--ease);
}
.include-card:hover { border-color:var(--bdr2);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.25); }
[data-theme="retro"] .include-card { border-radius:0; }
.include-card__num {
  font-family:var(--font-num);font-size:28px;font-weight:700;
  color:var(--blue);opacity:.5;margin-bottom:12px;line-height:1;
}
.include-card h3 { font-family:var(--font-display);font-size:14px;letter-spacing:.5px;margin-bottom:10px; }
.include-card p { font-size:13px;color:var(--sub);line-height:1.65; }

/* ── FAQ ── */
.faq { max-width:760px;margin:0 auto; }
.faq__item {
  border-bottom:1px solid var(--bdr);
  padding:0;
}
.faq__item summary {
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;
  font-family:var(--font-display);font-size:14px;letter-spacing:.3px;
  list-style:none;
  transition:color .2s;
}
.faq__item summary:hover { color:var(--blue); }
.faq__item summary::-webkit-details-marker { display:none; }
.faq__icon { font-size:18px;color:var(--mut);transition:transform .3s; }
.faq__item[open] .faq__icon { transform:rotate(45deg);color:var(--blue); }
.faq__item p { padding:0 0 20px;font-size:14px;color:var(--sub);line-height:1.7; }

/* ── SERVICE DETAIL HERO (service pages) ── */
.service-hero {
  min-height:50vh;display:flex;align-items:center;
  padding-top:var(--nav-height,88px);position:relative;overflow:hidden;
}
.service-hero .container { position:relative;z-index:1;padding:60px 24px; }
.service-icon-card {
  display:flex;align-items:flex-start;gap:24px;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:16px;padding:28px 32px;
  margin-top:32px;max-width:500px;
}
[data-theme="retro"] .service-icon-card { border-radius:0; }
.service-icon-card__ic { font-size:36px;flex-shrink:0;line-height:1; }
.service-icon-card__meta h3 { font-family:var(--font-display);font-size:16px;letter-spacing:.5px;margin-bottom:10px; }
.service-icon-card__meta ul { list-style:none;font-size:12px;color:var(--sub); }
.service-icon-card__meta li { margin-bottom:6px; }

/* ── RICH CONTENT ── */
.rich-content { max-width:760px;margin:0 auto; }
.rich-content__head { margin-bottom:32px; }
.rich-content__body p { font-size:15px;color:var(--sub);line-height:1.8;margin-bottom:16px; }

/* ── WHY SECTION ── */
.why-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:32px; }
.why-item { text-align:center; }
.why-num {
  font-family:var(--font-num);font-size:44px;font-weight:700;
  color:var(--blue);opacity:.3;line-height:1;margin-bottom:12px;
}
.why-title { font-family:var(--font-display);font-size:15px;letter-spacing:.5px;margin-bottom:10px; }
.why-desc { font-size:13px;color:var(--sub);line-height:1.65; }

/* ── HERO BACKGROUND ── */
.hero-bg {
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(0,180,216,0.18) 0%,transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 60%,rgba(72,202,228,0.06) 0%,transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
}
[data-theme="retro"] .hero-bg { background:radial-gradient(ellipse 60% 40% at 50% 20%,rgba(0,255,65,0.05) 0%,transparent 60%); }
[data-theme="light"] .hero-bg { background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(0,150,199,0.1) 0%,transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); }
.hero-grid-overlay {
  position:absolute;inset:0;z-index:0;opacity:.025;
  background-image:linear-gradient(var(--txt) 1px,transparent 1px),linear-gradient(90deg,var(--txt) 1px,transparent 1px);
  background-size:56px 56px;
}

/* ── FOOTER ── */
footer { background:var(--bg2);border-top:1px solid var(--bdr);padding:60px 0 32px; }
.footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px; }
.footer-brand { }
.footer-brand img { height:var(--logo-footer-h,64px);width:var(--logo-footer-w,auto);max-width:220px;margin-bottom:16px;object-fit:contain; }
.footer-brand p { font-size:13px;color:var(--sub);line-height:1.7;max-width:260px; }
.footer-col h4 {
  font-family:var(--font-display);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--txt);margin-bottom:16px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a { font-size:13px;color:var(--sub);text-decoration:none;transition:color .2s; }
.footer-col a:hover { color:var(--txt); }
.footer-bottom {
  border-top:1px solid var(--bdr);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--mut);flex-wrap:wrap;gap:12px;
}
.footer-bottom a { color:var(--mut);text-decoration:none; }
.footer-bottom a:hover { color:var(--sub); }

/* ── BOTTOM BAR ── */
#bottom-bar {
  background:linear-gradient(90deg,#040c1a 2%,#0d2040 12%,#0d2040 88%,#040c1a 98%);
  border-top:1px solid rgba(0,180,216,0.3);
  height:36px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:10px;letter-spacing:1.5px;
  color:rgba(255,255,255,0.4);gap:12px;flex-shrink:0;
}
[data-theme="retro"] #bottom-bar { background:#000200;border-top-color:var(--bdr2);color:var(--mut);letter-spacing:2px; }
[data-theme="light"] #bottom-bar { background:linear-gradient(90deg,#0a3050 2%,#0077a8 50%,#0a3050 98%);color:rgba(255,255,255,0.7); }
.bb-sep { color:rgba(255,255,255,0.2); }

/* ── ANIMATIONS ── */
.fade-in { opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease); }
.fade-in.visible { opacity:1;transform:translateY(0); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── RETRO BLINK ── */
[data-theme="retro"] .hero-title::after { content:'█';animation:blink 1s step-end infinite;color:var(--sage); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── CONTACT FORM ── */
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start; }
.form-group { margin-bottom:20px; }
.form-group label {
  display:block;font-family:var(--font-display);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--sub);margin-bottom:8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;padding:12px 16px;
  background:var(--card);border:1px solid var(--bdr);
  border-radius:10px;font-family:var(--font-body);font-size:13px;
  color:var(--txt);outline:none;transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--blue2); }
[data-theme="retro"] .form-group input,
[data-theme="retro"] .form-group select,
[data-theme="retro"] .form-group textarea {
  border-radius:0;background:#000a00;border-color:var(--mut);
  color:var(--sage);
}
.form-group textarea { min-height:140px;resize:vertical; }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding:12px 0;margin-top:var(--nav-height,88px);
  border-bottom:1px solid var(--bdr);
  font-size:12px;color:var(--mut);
}
.breadcrumb a { color:var(--mut);text-decoration:none; }
.breadcrumb a:hover { color:var(--sub); }
.breadcrumb .sep { margin:0 8px;opacity:.5; }

/* ── TABLE ── */
.cf-table { width:100%;border-collapse:collapse;font-size:12px; }
.cf-table th {
  background:rgba(0,150,199,0.1);padding:8px 12px;text-align:left;
  font-family:var(--font-display);font-size:10px;letter-spacing:1px;
  color:var(--sub);border-bottom:1px solid var(--bdr);font-weight:400;
}
.cf-table td { padding:7px 12px;border-bottom:1px solid var(--bdr);font-size:12px; }
.cf-table tr:nth-child(even) { background:rgba(255,255,255,0.02); }

/* ── TOAST ── */
.toast {
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:var(--card);border:1px solid var(--bdr2);
  border-radius:10px;padding:12px 20px;
  font-size:13px;font-family:var(--font-body);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.toast.show { opacity:1;animation:toastIn .3s var(--ease); }
.toast.ok  { border-color:var(--sage);color:var(--sage); }
.toast.err { border-color:var(--rose);color:var(--rose); }

/* ── BLOG ── */
.blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.blog-card {
  background:var(--card);border:1px solid var(--bdr);
  border-radius:16px;overflow:hidden;
  transition:all .3s var(--ease);
}
.blog-card:hover { transform:translateY(-4px);border-color:var(--bdr2);box-shadow:0 16px 48px rgba(0,0,0,0.3); }
[data-theme="retro"] .blog-card { border-radius:0; }
.blog-card__cover {
  height:180px;background:var(--card2);
  display:flex;align-items:center;justify-content:center;
  font-size:40px;border-bottom:1px solid var(--bdr);
}
.blog-card__body { padding:24px; }
.blog-card__cat {
  font-family:var(--font-display);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px;display:block;
}
.blog-card__title {
  font-family:var(--font-display);font-size:15px;letter-spacing:.3px;
  margin-bottom:10px;line-height:1.4;
}
.blog-card__excerpt { font-size:13px;color:var(--sub);line-height:1.65; }
.blog-card__footer {
  padding:12px 24px;border-top:1px solid var(--bdr);
  font-size:11px;color:var(--mut);font-family:var(--font-display);
  display:flex;justify-content:space-between;
}

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .how-grid { grid-template-columns:repeat(2,1fr); }
  .how-grid::before { display:none; }
  .includes-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .tb-nav { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr 1fr; }
  .how-grid::before { display:none; }
  .section { padding:64px 0; }
  .includes-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .how-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .cta-box { padding:40px 24px; }
}