/* ═══════════════════════════════════════════
   ZER AUDIT — Design System v2
   ═══════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  --bg:       #070d1c;
  --bg-2:     #0b1628;
  --bg-3:     #0f1e33;
  --border:   rgba(255,255,255,0.07);
  --border-m: rgba(255,255,255,0.11);
  --orange:   #f97316;
  --orange-m: rgba(249,115,22,0.12);
  --blue:     #3b82f6;
  --blue-m:   rgba(59,130,246,0.12);
  --green:    #22c55e;
  --yellow:   #eab308;
  --red:      #ef4444;
  --t1:       #f1f5f9;
  --t2:       #8b9ab5;
  --t3:       #3d5066;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); font-family: 'Inter', sans-serif; color: var(--t1); }
html, body { overflow-x: hidden; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.35); border-radius: 3px; }

/* ─── Gradient Text ─── */
.text-gradient {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-brand {
  background: linear-gradient(120deg, #3b82f6 0%, #818cf8 40%, #f97316 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── Hero ─── */
.hero-bg {
  background:
    radial-gradient(ellipse at 15% 55%, rgba(249,115,22,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(59,130,246,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(37,99,235,0.05) 0%, transparent 55%),
    var(--bg);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.11; pointer-events: none;
}

/* ─── Navbar ─── */
.navbar-blur {
  background: rgba(7,13,28,0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.navbar-blur.scrolled {
  background: rgba(7,13,28,0.96);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  border-bottom-color: rgba(255,255,255,0.05);
}

/* ─── Section Tag ─── */
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--orange-m); border: 1px solid rgba(249,115,22,0.22); color: var(--orange);
}
.section-tag.blue { background: var(--blue-m); border-color: rgba(59,130,246,0.22); color: var(--blue); }
.section-tag.slate { background: rgba(100,116,139,0.1); border-color: rgba(100,116,139,0.2); color: #94a3b8; }

/* ─── Section Line ─── */
.section-line { width: 48px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), #fb923c); }
.section-line.blue { background: linear-gradient(90deg, var(--blue), #60a5fa); }

/* ─── Icon Wrappers ─── */
.icon-sm  { width:32px; height:32px; border-radius:9px;  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-md  { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-lg  { width:58px; height:58px; border-radius:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.3s; }
/* Legacy alias */
.icon-wrap { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-wrap-sm { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-wrap-lg { width:60px; height:60px; border-radius:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ─── Generic Card ─── */
.card {
  background: rgba(10,20,40,0.82); border: 1px solid var(--border);
  border-radius: 20px; transition: all 0.3s ease;
}
.card:hover { border-color: var(--border-m); transform: translateY(-3px); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }

/* ─── Bento Grid Cards ─── */
.bento {
  background: rgba(10,20,40,0.85); border: 1px solid var(--border);
  border-radius: 22px; padding: 28px;
  transition: all 0.3s ease; position: relative; overflow: hidden;
}
.bento::after {
  content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(135deg, rgba(249,115,22,0.04) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.3s;
}
.bento:hover { border-color: rgba(249,115,22,0.2); transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(249,115,22,0.07); }
.bento:hover::after { opacity: 1; }
.bento:hover .bento-icon { background: rgba(249,115,22,0.18) !important; }

.bento.blue::after { background: linear-gradient(135deg, rgba(59,130,246,0.04) 0%, transparent 55%); }
.bento.blue:hover { border-color: rgba(59,130,246,0.2); box-shadow: 0 24px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.07); }
.bento.blue:hover .bento-icon { background: rgba(59,130,246,0.18) !important; }

.bento.red:hover { border-color: rgba(239,68,68,0.2); box-shadow: 0 24px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(239,68,68,0.07); }
.bento.red:hover .bento-icon { background: rgba(239,68,68,0.18) !important; }

.bento-icon {
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background 0.3s; margin-bottom: 20px;
}
.bento-icon.o { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.18); }
.bento-icon.b { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.18); }
.bento-icon.r { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.18); }
.bento-icon.g { background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.18); }
.bento-icon.s { background: rgba(100,116,139,0.1); border: 1px solid rgba(100,116,139,0.18); }
.bento-icon.y { background: rgba(234,179,8,0.1);   border: 1px solid rgba(234,179,8,0.18); }

.bento-visual {
  background: rgba(7,13,26,0.85); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; flex-shrink: 0;
}
.bento-bullet { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:#7890a5; line-height:1.55; }
.bento-bullet-dot { width:5px; height:5px; background:var(--orange); border-radius:50%; flex-shrink:0; margin-top:6px; }
.bento-bullet-dot.b { background: var(--blue); }
.bento-bullet-dot.r { background: var(--red); }
.bento-bullet-dot.g { background: var(--green); }

/* ─── Platform Cards ─── */
.platform-card {
  background: rgba(10,20,40,0.88); border: 1px solid var(--border);
  border-radius: 24px; overflow: hidden; transition: all 0.35s ease;
  display: flex; flex-direction: column;
}
.platform-card:hover { transform: translateY(-5px); }
.platform-card.ios:hover    { border-color: rgba(249,115,22,0.28); box-shadow: 0 28px 64px rgba(0,0,0,0.5), 0 0 80px rgba(249,115,22,0.06); }
.platform-card.android:hover{ border-color: rgba(59,130,246,0.28); box-shadow: 0 28px 64px rgba(0,0,0,0.5), 0 0 80px rgba(59,130,246,0.06); }
.platform-card.web:hover    { border-color: rgba(100,116,139,0.28); box-shadow: 0 28px 64px rgba(0,0,0,0.5); }

.platform-top-bar { height: 3px; }
.platform-top-bar.o { background: linear-gradient(90deg, var(--orange), #fb923c); }
.platform-top-bar.b { background: linear-gradient(90deg, var(--blue), #60a5fa); }
.platform-top-bar.s { background: linear-gradient(90deg, #64748b, #94a3b8); }

.platform-header { padding: 24px 26px; border-bottom: 1px solid var(--border); }
.platform-body { padding: 22px 26px; flex: 1; }
.platform-footer { padding: 18px 26px; border-top: 1px solid var(--border); }

.pf-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13.5px; color: var(--t2);
}
.pf-item:last-child { border-bottom: none; }
.pf-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ─── Workflow Steps ─── */
.wf-step {
  background: rgba(10,20,40,0.85); border: 1px solid var(--border);
  border-radius: 22px; padding: 28px; transition: all 0.3s ease;
  display: flex; flex-direction: column; gap: 16px;
}
.wf-step:hover { border-color: rgba(249,115,22,0.22); transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.wf-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25);
  border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--orange);
}

/* ─── Architecture ─── */
.arch-card {
  background: rgba(10,20,40,0.85); border: 1px solid var(--border);
  border-radius: 22px; overflow: hidden; transition: all 0.3s ease;
}
.arch-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.arch-bar { height: 3px; }
.arch-bar.o { background: linear-gradient(90deg, var(--orange), #fb923c); }
.arch-bar.b { background: linear-gradient(90deg, var(--blue), #60a5fa); }
.arch-bar.s { background: linear-gradient(90deg, #64748b, #94a3b8); }
.arch-tech {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13.5px;
}
.arch-tech:last-child { border-bottom: none; }

/* ─── Reference ─── */
.reference-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.09) 0%, rgba(10,20,40,0.96) 60%);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 24px; padding: 48px;
}
.ref-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 22px; border-radius: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
}

/* ─── Comparison ─── */
.compare-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  align-items: center; padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.compare-row:hover { background: rgba(255,255,255,0.015); }
.compare-row:last-child { border-bottom: none; }
.chk-yes { width:30px; height:30px; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.22); border-radius:9px; display:flex; align-items:center; justify-content:center; margin:0 auto; color:var(--green); }
.chk-no  { width:30px; height:30px; background:rgba(100,116,139,0.08); border:1px solid rgba(100,116,139,0.14); border-radius:9px; display:flex; align-items:center; justify-content:center; margin:0 auto; color:#475569; }

/* ─── FAQ ─── */
.faq-item { border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color 0.3s; background:rgba(10,20,40,0.6); }
.faq-item.open { border-color: rgba(249,115,22,0.24); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; text-align:left; background:transparent; border:none; color:var(--t1); font-size:15px; font-weight:600; font-family:'Inter',sans-serif; transition:color 0.2s; }
.faq-question:hover { color: var(--orange); }
.faq-icon { color: var(--t3); flex-shrink:0; transition: transform 0.3s, color 0.2s; }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--orange); }
.faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s ease; }
.faq-answer-inner { padding:0 24px 20px; color: var(--t2); font-size:14px; line-height:1.8; border-top:1px solid rgba(255,255,255,0.05); padding-top:16px; }
.faq-item.open .faq-answer { max-height:320px; }

/* ─── Hero Floating Notification Cards ─── */
.hero-notif {
  position:absolute; background:rgba(9,17,32,0.95); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:8px 13px; display:flex; align-items:center; gap:9px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  z-index:30; pointer-events:none; white-space:nowrap;
}
.notif-icon-wrap { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-title { font-size:11px; font-weight:600; color:#f1f5f9; line-height:1.3; }
.notif-sub   { font-size:10px; color:var(--t3); margin-top:1px; }
@media (max-width:1023px) { .hero-notif { display:none !important; } }

/* Mobile notification card */
.notif-mobile { background:rgba(10,20,40,0.88); border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:9px; }

/* Phone mockup */
.phone-mockup { width:120px; height:220px; border:2px solid rgba(59,130,246,0.35); border-radius:20px; background:rgba(10,20,40,0.92); display:flex; flex-direction:column; align-items:center; padding:10px; gap:6px; }
.phone-notch { width:38px; height:6px; background:rgba(255,255,255,0.12); border-radius:3px; margin-top:4px; }
.phone-row { width:100%; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; }
.phone-row.o { background:rgba(249,115,22,0.22); }
.phone-row.b { background:rgba(59,130,246,0.18); }
.phone-row.s { width:65%; }

/* Dashboard window */
.dash-win { background:rgba(9,17,32,0.97); border:1px solid rgba(255,255,255,0.09); border-radius:14px; overflow:hidden; }
.dash-title-bar { background:rgba(7,13,24,0.85); border-bottom:1px solid rgba(255,255,255,0.06); padding:9px 14px; display:flex; align-items:center; gap:7px; }
.dash-dot { width:8px; height:8px; border-radius:50%; }

/* Stats bar */
.stat-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; flex:1; padding:22px 14px; }
.stat-div { width:1px; background:var(--border); align-self:stretch; }

/* Flow diagram */
.flow-node { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.flow-icon { width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; }
.flow-arrow { display:flex; align-items:center; color: rgba(249,115,22,0.35); }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* Animations */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-anim   { animation: floatY 6s ease-in-out infinite; }
.float-anim-2 { animation: floatY 6s ease-in-out infinite; animation-delay:1.2s; }

@keyframes drift-1 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(10px,-16px)} 50%{transform:translate(-5px,-24px)} 75%{transform:translate(14px,-10px)} }
.drift-1 { animation: drift-1 11s ease-in-out infinite; }
@keyframes drift-2 { 0%,100%{transform:translate(0,0)} 30%{transform:translate(-11px,11px)} 60%{transform:translate(9px,18px)} 85%{transform:translate(-6px,7px)} }
.drift-2 { animation: drift-2 14s ease-in-out infinite; animation-delay:1.6s; }
@keyframes drift-3 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(15px,-9px)} 55%{transform:translate(5px,-21px)} 80%{transform:translate(13px,-5px)} }
.drift-3 { animation: drift-3 9s ease-in-out infinite; animation-delay:3.1s; }
@keyframes drift-4 { 0%,100%{transform:translate(0,0)} 35%{transform:translate(-10px,15px)} 70%{transform:translate(12px,9px)} }
.drift-4 { animation: drift-4 16s ease-in-out infinite; animation-delay:0.7s; }
@keyframes drift-5 { 0%,100%{transform:translate(0,0)} 25%{transform:translate(13px,13px)} 55%{transform:translate(-10px,21px)} 80%{transform:translate(8px,10px)} }
.drift-5 { animation: drift-5 12s ease-in-out infinite; animation-delay:2.2s; }
@keyframes drift-6 { 0%,100%{transform:translate(0,0)} 30%{transform:translate(-15px,-10px)} 65%{transform:translate(10px,-18px)} }
.drift-6 { animation: drift-6 10s ease-in-out infinite; animation-delay:4.0s; }
@keyframes drift-7 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(12px,17px)} 66%{transform:translate(-8px,9px)} }
.drift-7 { animation: drift-7 15s ease-in-out infinite; animation-delay:2.8s; }
@keyframes drift-8 { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-14px,-12px)} 50%{transform:translate(14px,-18px)} 80%{transform:translate(-6px,-8px)} }
.drift-8 { animation: drift-8 13s ease-in-out infinite; animation-delay:1.1s; }

/* ─── Glass Cards ─── */
.glass-card {
  background: rgba(10,20,40,0.85); border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}
.glass-card:hover { border-color: rgba(255,255,255,0.13); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.glass-card-static { background: rgba(10,20,40,0.7); border: 1px solid rgba(255,255,255,0.07); }

/* ─── Tag Pill ─── */
.tag-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}

/* ─── Feature Card ─── */
.feature-card {
  background: rgba(10,20,40,0.85); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px; padding: 28px; transition: all 0.3s ease;
}
.feature-card:hover { border-color: rgba(249,115,22,0.22); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,0.4); }

/* ─── Step Card ─── */
.step-card {
  background: rgba(10,20,40,0.85); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px; padding: 28px; transition: all 0.3s ease;
}
.step-card:hover { border-color: rgba(249,115,22,0.22); transform: translateY(-3px); box-shadow: 0 20px 45px rgba(0,0,0,0.4); }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25);
  border-radius: 8px; font-size: 11px; font-weight: 800; color: var(--orange);
}

/* ─── Tech Row ─── */
.tech-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ─── Accent Bar ─── */
.accent-bar { height: 3px; background: linear-gradient(90deg, var(--orange), #fb923c, transparent); border-radius: 2px; }
.accent-bar-blue { height: 3px; background: linear-gradient(90deg, var(--blue), #60a5fa, transparent); border-radius: 2px; }

/* ─── CTA Gradient ─── */
.cta-gradient {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(249,115,22,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 50%, rgba(37,99,235,0.06) 0%, transparent 55%),
    var(--bg-2);
}

/* ─── Quote Mark ─── */
.quote-mark {
  display: block; font-size: 5rem; line-height: 1;
  color: rgba(59,130,246,0.2); font-family: Georgia, serif; margin-bottom: -1.5rem;
}

/* ─── Reference Stat ─── */
.reference-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 16px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px;
}

/* ─── Comparison Check (aliases) ─── */
.check-yes { width:30px; height:30px; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.22); border-radius:9px; display:flex; align-items:center; justify-content:center; margin:0 auto; color:var(--green); }
.check-no  { width:30px; height:30px; background:rgba(100,116,139,0.08); border:1px solid rgba(100,116,139,0.14); border-radius:9px; display:flex; align-items:center; justify-content:center; margin:0 auto; color:#475569; }

/* ─── Stats Bar ─── */
.stat-divider { width:1px; background: rgba(255,255,255,0.07); align-self: stretch; flex-shrink: 0; }

/* ─── Section Title Line ─── */
.section-title-line { width:48px; height:3px; border-radius:2px; background: linear-gradient(90deg, var(--orange), #fb923c); }

/* ─── Phone Screen Rows (HTML alias) ─── */
.phone-screen-row { width:100%; height:8px; background:rgba(255,255,255,0.06); border-radius:4px; }
.phone-screen-row.orange { background:rgba(249,115,22,0.22); }
.phone-screen-row.blue   { background:rgba(59,130,246,0.18); }
.phone-screen-row.short  { width:65%; }

/* ─── Dashboard Header (HTML alias) ─── */
.dash-header { background:rgba(7,13,24,0.85); border-bottom:1px solid rgba(255,255,255,0.06); padding:9px 14px; display:flex; align-items:center; gap:7px; }

/* ─── Feature Bullets ─── */
.feature-bullet { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--t2); line-height:1.55; }
.feature-bullet-dot { width:5px; height:5px; background:var(--orange); border-radius:50%; flex-shrink:0; }

/* ─── Platform Section Tabs ─── */
.platform-tab { color: var(--t2); background: transparent; border: none; cursor: pointer; font-family: 'Inter', sans-serif; }
.platform-tab.active-tab { background: rgba(249,115,22,0.12); color: var(--orange); }
.platform-tab.active-tab-blue { background: rgba(59,130,246,0.12); color: var(--blue); }
.platform-tab.active-tab-slate { background: rgba(100,116,139,0.15); color: #94a3b8; }
.platform-content { display: none; }
.platform-content.active { display: block; }

/* ─── Platform Feature Row ─── */
.pf-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pf-row:last-child { border-bottom: none; }
.pf-row-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ─── Screen Badge ─── */
.screen-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: var(--t2);
}

/* ─── Responsive ─── */
@media (max-width:399px) {
  .bento { padding:16px !important; }
  .wf-step { padding:18px; }
  .faq-question { padding:14px 16px; font-size:13px; }
  .faq-answer-inner { padding:14px 16px 16px; padding-top:14px; }
}
@media (max-width:639px) {
  section { padding-top:3.5rem; padding-bottom:3.5rem; }
  section.border-y { padding-top:0; padding-bottom:0; }
  .bento { padding:18px; }
  .platform-header { padding:18px 20px; }
  .platform-body { padding:16px 20px; }
  .platform-footer { padding:14px 20px; }
  .reference-card { padding:28px 20px; }
  .arch-card { border-radius:16px; }
}
@media (min-width:640px) and (max-width:1023px) {
  section { padding-top:4.5rem; padding-bottom:4.5rem; }
  section.border-y { padding-top:0; padding-bottom:0; }
  .bento { padding:22px; }
  .reference-card { padding:36px 28px; }
}

/* ═══════════════════════════════════════════
   LIGHT THEME OVERRIDE v1
   Aydınlık (beyaz) tema. En sonda yüklenir,
   önceki koyu temayı ezer. Cihaz mockup'ları
   .dark-scope ile koyu kalır.
   ═══════════════════════════════════════════ */

:root {
  --bg:       #f6f8fc;   /* sayfa arka planı */
  --bg-2:     #eef2f9;
  --bg-3:     #e7edf6;
  --border:   rgba(15,23,42,0.08);
  --border-m: rgba(15,23,42,0.14);
  --t1:       #0f172a;   /* başlıklar */
  --t2:       #475569;   /* gövde metni */
  --t3:       #94a3b8;   /* soluk metin */
}

body { background: var(--bg); color: var(--t1); }
::-webkit-scrollbar-track { background: var(--bg); }

/* ─── Tailwind utility ezme (açık bağlam) ─── */
.text-white      { color:#0f172a !important; }
.text-slate-300  { color:#334155 !important; }
.text-slate-400  { color:#475569 !important; }
.text-slate-500  { color:#64748b !important; }
.text-slate-600  { color:#94a3b8 !important; }
.text-slate-700  { color:#aab4c4 !important; }
.text-blue-400   { color:#2563eb !important; }

/* Renkli buton üzerindeki yazı beyaz kalsın */
.bg-orange.text-white,
a.bg-orange, button.bg-orange,
#cf-submit-btn { color:#ffffff !important; }

/* Beyaz/şeffaf overlay arka planlar -> hafif koyu overlay */
.bg-white\/3   { background-color: rgba(15,23,42,0.03) !important; }
.bg-white\/4   { background-color: rgba(15,23,42,0.04) !important; }
.bg-white\/5   { background-color: rgba(15,23,42,0.05) !important; }
.bg-white\/10  { background-color: rgba(15,23,42,0.06) !important; }
.bg-navy-900\/80 { background-color: #ffffff !important; }
.bg-navy-900\/95 { background-color: rgba(255,255,255,0.95) !important; }

/* Beyaz kenarlıklar -> koyu ince kenarlık */
.border-white\/4  { border-color: rgba(15,23,42,0.07) !important; }
.border-white\/5  { border-color: rgba(15,23,42,0.08) !important; }
.border-white\/6  { border-color: rgba(15,23,42,0.08) !important; }
.border-white\/10 { border-color: rgba(15,23,42,0.10) !important; }

/* ─── Kartlar ─── */
.card, .bento, .platform-card, .wf-step, .arch-card,
.glass-card, .feature-card, .step-card, .faq-item {
  background: #ffffff !important;
  border-color: rgba(15,23,42,0.08) !important;
}
.glass-card-static {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(15,23,42,0.07) !important;
}
.card:hover, .bento:hover, .glass-card:hover, .feature-card:hover,
.step-card:hover, .wf-step:hover, .platform-card:hover, .arch-card:hover {
  box-shadow: 0 18px 44px rgba(15,23,42,0.10) !important;
}
.bento-visual { background: rgba(15,23,42,0.03) !important; border-color: rgba(15,23,42,0.08) !important; }
.screen-badge { background: rgba(15,23,42,0.04) !important; border-color: rgba(15,23,42,0.08) !important; }

/* İç ayraç kenarlıkları */
.tech-row, .pf-row, .pf-item, .arch-tech, .compare-row {
  border-bottom-color: rgba(15,23,42,0.07) !important;
}
.stat-divider, .stat-div { background: rgba(15,23,42,0.08) !important; }

/* ─── Navbar ─── */
.navbar-blur {
  background: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(15,23,42,0.08) !important;
}
.navbar-blur.scrolled {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,0.08) !important;
  border-bottom-color: rgba(15,23,42,0.06) !important;
}

/* ─── Hero yüzen bildirim kartları ─── */
.hero-notif {
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(15,23,42,0.08) !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12), 0 1px 0 rgba(255,255,255,0.6) inset !important;
}
.notif-title { color:#0f172a !important; }
.notif-sub   { color:#64748b !important; }
.notif-mobile { background:#ffffff !important; border-color: rgba(15,23,42,0.08) !important; }

/* ─── FAQ ─── */
.faq-question { color: var(--t1) !important; }
.faq-answer-inner { border-top-color: rgba(15,23,42,0.08) !important; color: var(--t2) !important; }

/* ─── Form alanları ─── */
input::placeholder, textarea::placeholder { color:#94a3b8 !important; }

/* ═══ .dark-scope: cihaz mockup'ları koyu kalır ═══ */
.dark-scope .text-white     { color:#f1f5f9 !important; }
.dark-scope .text-slate-300 { color:#cbd5e1 !important; }
.dark-scope .text-slate-400 { color:#94a3b8 !important; }
.dark-scope .text-slate-500 { color:#64748b !important; }
.dark-scope .text-slate-600 { color:#475569 !important; }
.dark-scope .text-blue-400  { color:#60a5fa !important; }
.dark-scope .bg-white\/3  { background-color: rgba(255,255,255,0.03) !important; }
.dark-scope .bg-white\/4  { background-color: rgba(255,255,255,0.04) !important; }
.dark-scope .bg-white\/5  { background-color: rgba(255,255,255,0.05) !important; }
.dark-scope .bg-white\/10 { background-color: rgba(255,255,255,0.10) !important; }
.dark-scope .border-white\/4  { border-color: rgba(255,255,255,0.06) !important; }
.dark-scope .border-white\/5  { border-color: rgba(255,255,255,0.07) !important; }
.dark-scope .border-white\/6  { border-color: rgba(255,255,255,0.07) !important; }
.dark-scope .border-white\/10 { border-color: rgba(255,255,255,0.10) !important; }

/* ═══════════════════════════════════════════
   RESPONSIVE — Tüm ekranlara tam uyum
   Mobil & tablet: Tailwind breakpoint'leri ile yönetilir.
   Geniş ekran / TV: rem tabanlı ölçekleme ile içerik
   ekranı orantılı olarak doldurur (rem'e bağlı tüm
   boşluk, tipografi ve max-genişlikler birlikte büyür).
   ═══════════════════════════════════════════ */

/* Hiçbir ekranda yatay taşma olmasın */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* Çok küçük telefonlar (≤360px) */
@media (max-width: 360px) {
  html { font-size: 15px; }
}

/* Büyük masaüstü monitörler */
@media (min-width: 1536px) { html { font-size: 17px; } }

/* Full HD TV / büyük ekran (1080p) */
@media (min-width: 1920px) { html { font-size: 19px; } }

/* 2K / QHD ekran */
@media (min-width: 2560px) { html { font-size: 24px; } }

/* 4K / UHD TV */
@media (min-width: 3840px) { html { font-size: 32px; } }