/* ═══════════════════════════════════════════════
   FLOWCARD — Design System
   Colors: #050510 bg · #004AAC blue · #5D17EB purple
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #050510;
  --bg-2:      #080818;
  --bg-card:   rgba(0,74,172,0.06);
  --blue:      #004AAC;
  --blue-mid:  #1246B8;
  --blue-light:#3B6EFF;
  --blue-2:    #003080;
  --purple:    #5D17EB;
  --blue-glow: rgba(0,74,172,0.22);
  --text:      #ffffff;
  --text-2:    #a8bcd8;
  --text-3:    #5a6f99;
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(0,74,172,0.25);
  --radius:    20px;
  --radius-sm: 12px;
}

/* ─── LIGHT MODE VARIABLES ─── */
[data-theme="light"] {
  --bg:        #f4f7ff;
  --bg-2:      #eaeffa;
  --bg-card:   rgba(0,74,172,0.05);
  --blue-glow: rgba(0,74,172,0.12);
  --text:      #0d1224;
  --text-2:    #4a5a80;
  --text-3:    #8899bb;
  --border:    rgba(0,0,0,0.08);
  --border-2:  rgba(0,74,172,0.2);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ─── TYPOGRAPHY ─── */
.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--blue-light);
  margin-bottom: 14px;
}

.title-xl {
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 900;
  letter-spacing: -3.5px;
  line-height: 0.98;
}

.title-l {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
}

.title-m {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
}

.title-s {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.body-l { font-size: 18px; color: var(--text-2); line-height: 1.65; }
.body-m { font-size: 16px; color: var(--text-2); line-height: 1.65; }
.body-s { font-size: 14px; color: var(--text-2); line-height: 1.65; }

.gradient-text {
  background: linear-gradient(135deg, #cce4ff 0%, #ffffff 45%, #ddd0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #a0c8ff 0%, #60a5ff 40%, #3B8EFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  text-decoration: none;
  border: none;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #1246B8, #004AAC 50%, #5D17EB);
  color: white;
  box-shadow: 0 0 40px rgba(0,74,172,0.45), 0 8px 24px rgba(0,74,172,0.3);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 70px rgba(0,74,172,0.65), 0 16px 40px rgba(0,74,172,0.45);
}

.btn-white {
  background: white;
  color: var(--bg);
}
.btn-white:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: white;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
}

.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* ─── THEME TOGGLE ─── */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(0,74,172,0.35);
  transform: scale(1.08);
}
.theme-toggle svg {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
/* Dark mode: show sun (pour passer au clair) */
.theme-toggle .icon-sun  { opacity: 1;  transform: rotate(0deg)   scale(1); }
.theme-toggle .icon-moon { opacity: 0;  transform: rotate(-90deg) scale(0.6); }
/* Light mode: show moon (pour passer au sombre) */
[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0;  transform: rotate(90deg) scale(0.6); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 1;  transform: rotate(0deg)  scale(1); }
[data-theme="light"] .theme-toggle {
  background: rgba(0,74,172,0.08);
  border-color: rgba(0,74,172,0.2);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,74,172,0.15);
}

/* Light mode — gradient text overrides */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #0044cc 0%, #004AAC 45%, #5D17EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .gradient-text-blue {
  background: linear-gradient(135deg, #1246B8 0%, #004AAC 40%, #003080 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Light mode — nav & card adjustments */
[data-theme="light"] .nav {
  background: rgba(244,247,255,0.82);
  border-bottom-color: rgba(0,74,172,0.12);
}
[data-theme="light"] .nav.scrolled {
  background: rgba(244,247,255,0.97);
}
[data-theme="light"] .nav-logo {
  background: linear-gradient(135deg, #004AAC 0%, #1246B8 50%, #5D17EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .card {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 2px 12px rgba(0,74,172,0.06);
}
[data-theme="light"] .card:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,74,172,0.2);
  box-shadow: 0 8px 32px rgba(0,74,172,0.1);
}
[data-theme="light"] .btn-ghost {
  color: var(--text-2);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .btn-ghost:hover {
  color: var(--text);
  background: rgba(0,74,172,0.06);
  border-color: rgba(0,74,172,0.25);
}
[data-theme="light"] .badge {
  background: rgba(0,74,172,0.08);
  border-color: rgba(0,74,172,0.2);
}
[data-theme="light"] .hero-geo-dots {
  background-image: radial-gradient(rgba(0,74,172,0.18) 1px, transparent 1px);
}
[data-theme="light"] .geo-ellipse {
  border-color: rgba(0,74,172,0.12);
}
[data-theme="light"] .founder-bar {
  background: linear-gradient(90deg, rgba(0,74,172,0.07) 0%, rgba(93,23,235,0.05) 100%);
  border-bottom-color: rgba(0,74,172,0.1);
}
[data-theme="light"] .footer {
  background: var(--bg-2);
  border-top-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .divider {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-links a {
  color: var(--text-2);
}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: var(--text);
  background: rgba(0,74,172,0.07);
}

/* ─── NAVIGATION ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: rgba(5,5,16,0.55);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border);
  transition: all 0.4s;
}

.nav.scrolled {
  background: rgba(5,5,16,0.94);
  border-bottom-color: rgba(0,74,172,0.2);
}

.nav-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.8px;
  text-decoration: none;
  background: linear-gradient(135deg, #fff 0%, #6690ff 60%, #004AAC 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 100px;
  transition: all 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: white;
  background: rgba(255,255,255,0.06);
}

.nav-right { display: flex; align-items: center; gap: 10px; }

/* Hamburger mobile */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.nav-burger span {
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile menu dropdown */
.nav-mobile {
  display: none;
  position: fixed;
  top: 68px;
  left: 0; right: 0;
  background: rgba(5,5,16,0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border);
  padding: 20px;
  z-index: 195;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
  transition: all 0.2s;
}
.nav-mobile a:hover { color: white; background: rgba(255,255,255,0.06); }
.nav-mobile .btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ─── BADGE ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,74,172,0.12);
  border: 1px solid rgba(0,74,172,0.28);
  padding: 7px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #6690ff;
  margin-bottom: 32px;
}
.badge-dot {
  width: 6px; height: 6px;
  background: #6690ff;
  border-radius: 50%;
  animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity:1; transform:scale(1); box-shadow: 0 0 0 0 rgba(0,74,172,0.5); }
  50% { opacity:0.7; transform:scale(1.2); box-shadow: 0 0 0 5px rgba(0,74,172,0); }
}

/* ─── SECTIONS ─── */
.section {
  padding: 130px 52px;
}
.section-sm { padding: 80px 52px; }

.container {
  max-width: 1240px;
  margin: 0 auto;
}

.section-header { margin-bottom: 72px; }
.section-header .title-l { margin-bottom: 16px; }

/* ─── CARDS ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.card:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-2);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,74,172,0.2);
}

/* ─── FEATURE GRID ─── */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ─── DIVIDER ─── */
.divider {
  height: 1px;
  background: var(--border);
}

/* ─── REVEAL ANIMATION ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ─── GLOW EFFECTS ─── */
.glow-blue {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,102,255,0.22) 0%, transparent 65%);
  pointer-events: none;
}

/* ─── FOUNDER BAR ─── */
.founder-bar {
  position: fixed;
  top: 68px;
  left: 0; right: 0;
  z-index: 190;
  background: linear-gradient(90deg, rgba(0,74,172,0.12) 0%, rgba(93,23,235,0.08) 100%);
  border-bottom: 1px solid rgba(0,74,172,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: var(--text-2);
  transition: all 0.4s;
}
.founder-bar .founder-bar-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(0,74,172,0.45);
  flex-shrink: 0;
}
.founder-bar .founder-bar-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.founder-bar strong { color: white; font-weight: 700; }
.founder-bar a {
  color: #6690ff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.founder-bar a:hover { color: white; }
.founder-bar-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
  background: none;
  border: none;
}
.founder-bar-close:hover { color: white; background: rgba(255,255,255,0.06); }
.founder-bar.hidden { display: none; }
@media (max-width: 768px) {
  .founder-bar { padding: 8px 20px; font-size: 12px; }
  .founder-bar-text { display: none; }
}

/* ─── HERO GEOMETRIC BACKGROUND ─── */
.hero-geo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-geo-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(0,74,172,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(93,23,235,0.08) 0%, transparent 55%);
}

.hero-geo-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image:
    linear-gradient(to bottom, transparent, #fff 120px calc(100% - 120px), transparent),
    linear-gradient(to right,  transparent, #fff 120px calc(100% - 120px), transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #fff 120px calc(100% - 120px), transparent),
    linear-gradient(to right,  transparent, #fff 120px calc(100% - 120px), transparent);
  -webkit-mask-composite: source-in;
  animation: geo-dots-in 2s ease-out 0.2s both;
}
@keyframes geo-dots-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Ripple ring overlay on dots */
.hero-geo-dots::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 45%, rgba(0,74,172,0.12) 0%, transparent 55%);
  animation: geo-ripple-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes geo-ripple-pulse {
  0%,100% { opacity: 0.4; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

/* Floating ellipses */
.geo-ellipse {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Ellipse 1 — top right, blue */
.geo-e1 {
  width: 580px; height: 130px;
  top: -8%; right: -10%;
  background: linear-gradient(to right, rgba(0,74,172,0.14), transparent);
  animation: enter-e1 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s both,
             float-e1 14s ease-in-out 1.4s infinite;
}
@keyframes enter-e1 {
  from { opacity:0; transform: rotate(-15deg) translateY(-50px); }
  to   { opacity:1; transform: rotate(-15deg) translateY(0); }
}
@keyframes float-e1 {
  0%,100% { transform: rotate(-15deg) translateY(0); }
  50%     { transform: rotate(-15deg) translateY(18px); }
}

/* Ellipse 2 — bottom left, purple */
.geo-e2 {
  width: 460px; height: 110px;
  bottom: -6%; left: -6%;
  background: linear-gradient(to right, rgba(93,23,235,0.13), transparent);
  animation: enter-e2 1.2s cubic-bezier(0.16,1,0.3,1) 0.5s both,
             float-e2 11s ease-in-out 1.7s infinite;
}
@keyframes enter-e2 {
  from { opacity:0; transform: rotate(-15deg) translateY(50px); }
  to   { opacity:1; transform: rotate(-15deg) translateY(0); }
}
@keyframes float-e2 {
  0%,100% { transform: rotate(-15deg) translateY(0); }
  50%     { transform: rotate(-15deg) translateY(14px); }
}

/* Ellipse 3 — mid left, blue-light */
.geo-e3 {
  width: 270px; height: 70px;
  top: 42%; left: -7%;
  background: linear-gradient(to right, rgba(59,110,255,0.1), transparent);
  animation: enter-e3 1.2s cubic-bezier(0.16,1,0.3,1) 0.7s both,
             float-e3 16s ease-in-out 1.9s infinite;
}
@keyframes enter-e3 {
  from { opacity:0; transform: rotate(-30deg) translateX(-30px); }
  to   { opacity:1; transform: rotate(-30deg) translateX(0); }
}
@keyframes float-e3 {
  0%,100% { transform: rotate(-30deg) translateY(0); }
  50%     { transform: rotate(-30deg) translateY(10px); }
}

/* Ellipse 4 — upper right, dark blue */
.geo-e4 {
  width: 370px; height: 88px;
  top: 22%; right: -6%;
  background: linear-gradient(to right, rgba(0,48,128,0.12), transparent);
  animation: enter-e4 1.2s cubic-bezier(0.16,1,0.3,1) 0.9s both,
             float-e4 13s ease-in-out 2.1s infinite;
}
@keyframes enter-e4 {
  from { opacity:0; transform: rotate(15deg) translateX(30px); }
  to   { opacity:1; transform: rotate(15deg) translateX(0); }
}
@keyframes float-e4 {
  0%,100% { transform: rotate(15deg) translateY(0); }
  50%     { transform: rotate(15deg) translateY(12px); }
}

/* Ellipse 5 — lower right, purple */
.geo-e5 {
  width: 310px; height: 78px;
  bottom: 22%; right: -7%;
  background: linear-gradient(to right, rgba(93,23,235,0.1), transparent);
  animation: enter-e5 1.2s cubic-bezier(0.16,1,0.3,1) 1.1s both,
             float-e5 10s ease-in-out 2.3s infinite;
}
@keyframes enter-e5 {
  from { opacity:0; transform: rotate(-15deg) translateY(30px); }
  to   { opacity:1; transform: rotate(-15deg) translateY(0); }
}
@keyframes float-e5 {
  0%,100% { transform: rotate(-15deg) translateY(0); }
  50%     { transform: rotate(-15deg) translateY(10px); }
}

/* ─── FOOTER ─── */
.footer {
  padding: 80px 52px 48px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 72px;
  max-width: 1240px;
  margin: 0 auto 56px;
}
.footer-brand-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 240px;
  margin-top: 14px;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-3);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size: 14px; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: white; }
.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom p { font-size: 13px; color: var(--text-3); }

/* ─── CHECK LIST ─── */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}
.check-list li::before {
  content: '';
  width: 20px; height: 20px;
  background: rgba(0,74,172,0.14);
  border: 1px solid rgba(0,74,172,0.35);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004AAC' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ─── STAT CARD ─── */
.stat-big h3 {
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-big p { font-size: 14px; color: var(--text-2); margin-top: 4px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .nav { padding: 0 28px; }
  .section { padding: 90px 28px; }
  .section-sm { padding: 60px 28px; }
  .footer { padding: 60px 28px 40px; }
  .footer-grid { gap: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-right .btn-ghost { display: none; }
  .nav-burger { display: flex; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .title-xl { letter-spacing: -2px; }
  .title-l { letter-spacing: -1.5px; }
}

@media (max-width: 500px) {
  .section { padding: 72px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}