/* VİZOVA — Homepage Styles v3 — Animated Premium Hero */

/* ── HERO ── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  padding:80px 24px 60px;
  overflow:clip;
}

.hero__content { position:relative; z-index:2; text-align:center; max-width:680px; }

/* ── Animated Background ── */
.hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(226,229,234,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,229,234,0.3) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
  animation:gridFade 2s ease-out forwards;
}
@keyframes gridFade { from{opacity:0} to{opacity:1} }

/* Floating gradient orbs */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(80px); opacity:0;
  animation:orbAppear 1.5s ease-out forwards;
}
.hero-orb--1 {
  width:400px; height:400px; top:-100px; right:-80px;
  background:radial-gradient(circle, rgba(184,150,58,0.08) 0%, transparent 70%);
  animation-delay:0.3s;
}
.hero-orb--2 {
  width:350px; height:350px; bottom:-50px; left:-100px;
  background:radial-gradient(circle, rgba(26,26,46,0.04) 0%, transparent 70%);
  animation-delay:0.6s;
}
.hero-orb--3 {
  width:250px; height:250px; top:30%; left:60%;
  background:radial-gradient(circle, rgba(5,150,105,0.04) 0%, transparent 70%);
  animation-delay:0.9s;
}
@keyframes orbAppear {
  from { opacity:0; transform:scale(0.6); }
  to   { opacity:1; transform:scale(1); }
}

/* Orb floating motion */
.hero-orb--1 { animation:orbAppear 1.5s ease-out 0.3s forwards, orbFloat1 8s ease-in-out 1.8s infinite; }
.hero-orb--2 { animation:orbAppear 1.5s ease-out 0.6s forwards, orbFloat2 10s ease-in-out 2.1s infinite; }
.hero-orb--3 { animation:orbAppear 1.5s ease-out 0.9s forwards, orbFloat3 12s ease-in-out 2.4s infinite; }

@keyframes orbFloat1 {
  0%,100% { transform:translate(0,0); }
  33% { transform:translate(20px,-15px); }
  66% { transform:translate(-10px,10px); }
}
@keyframes orbFloat2 {
  0%,100% { transform:translate(0,0); }
  33% { transform:translate(-15px,20px); }
  66% { transform:translate(12px,-8px); }
}
@keyframes orbFloat3 {
  0%,100% { transform:translate(0,0); }
  50% { transform:translate(-18px,-12px); }
}

/* ── Pulse Rings — Expanding from center ── */
.hero-ring {
  position:absolute;
  top:50%; left:50%;
  border-radius:50%;
  border:1px solid rgba(184,150,58,0.15);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}
.hero-ring--1 {
  width:300px; height:300px;
  animation:ringPulse 4s ease-out 1s infinite;
}
.hero-ring--2 {
  width:500px; height:500px;
  animation:ringPulse 4s ease-out 2.3s infinite;
}
.hero-ring--3 {
  width:700px; height:700px;
  animation:ringPulse 4s ease-out 3.6s infinite;
}
@keyframes ringPulse {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:0.6; border-color:rgba(184,150,58,0.25); }
  70%  { opacity:0.15; }
  100% { transform:translate(-50%,-50%) scale(1); opacity:0; border-color:rgba(184,150,58,0.02); }
}

/* ── Floating Particles ── */
.hero-particle {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  animation-fill-mode:both;
}
.hero-particle--1 {
  width:5px; height:5px; background:var(--gold); top:20%; left:15%;
  animation:particleDrift1 7s ease-in-out 0.5s infinite;
}
.hero-particle--2 {
  width:3px; height:3px; background:rgba(184,150,58,0.6); top:70%; left:80%;
  animation:particleDrift2 9s ease-in-out 1s infinite;
}
.hero-particle--3 {
  width:4px; height:4px; background:rgba(184,150,58,0.7); top:35%; left:85%;
  animation:particleDrift3 8s ease-in-out 1.5s infinite;
}
.hero-particle--4 {
  width:3px; height:3px; background:rgba(184,150,58,0.5); top:80%; left:25%;
  animation:particleDrift1 10s ease-in-out 2s infinite;
}
.hero-particle--5 {
  width:6px; height:6px; background:rgba(184,150,58,0.3); top:15%; left:60%;
  animation:particleDrift2 6s ease-in-out 0.8s infinite;
}
.hero-particle--6 {
  width:2px; height:2px; background:var(--gold); top:55%; left:10%;
  animation:particleDrift3 11s ease-in-out 3s infinite;
}
.hero-particle--7 {
  width:4px; height:4px; background:rgba(184,150,58,0.4); top:45%; left:90%;
  animation:particleDrift1 8.5s ease-in-out 1.2s infinite;
}
.hero-particle--8 {
  width:3px; height:3px; background:rgba(184,150,58,0.6); top:85%; left:55%;
  animation:particleDrift2 7.5s ease-in-out 2.5s infinite;
}

@keyframes particleDrift1 {
  0%   { opacity:0; transform:translate(0, 0); }
  15%  { opacity:0.8; }
  50%  { transform:translate(30px, -40px); opacity:0.5; }
  85%  { opacity:0.8; }
  100% { opacity:0; transform:translate(-20px, 25px); }
}
@keyframes particleDrift2 {
  0%   { opacity:0; transform:translate(0, 0); }
  15%  { opacity:0.7; }
  50%  { transform:translate(-35px, 20px); opacity:0.4; }
  85%  { opacity:0.7; }
  100% { opacity:0; transform:translate(15px, -30px); }
}
@keyframes particleDrift3 {
  0%   { opacity:0; transform:translate(0, 0) scale(1); }
  20%  { opacity:0.6; transform:scale(1.3); }
  50%  { transform:translate(25px, 35px) scale(0.8); opacity:0.4; }
  80%  { opacity:0.6; transform:scale(1.2); }
  100% { opacity:0; transform:translate(-15px, -20px) scale(1); }
}

/* ── Rotating Hexagon ── */
.hero-hex {
  position:absolute;
  top:50%; left:50%;
  width:400px; height:400px;
  transform:translate(-50%, -50%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  animation:hexAppear 1.5s ease-out 1.5s forwards, hexRotate 20s linear 3s infinite;
}
.hero-hex::before {
  content:'';
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  border:1px solid rgba(184,150,58,0.08);
  border-radius:16px;
  transform:rotate(30deg);
}
.hero-hex::after {
  content:'';
  position:absolute;
  top:10%; left:10%; width:80%; height:80%;
  border:1px solid rgba(184,150,58,0.05);
  border-radius:12px;
  transform:rotate(60deg);
}
@keyframes hexAppear {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes hexRotate {
  from { transform:translate(-50%, -50%) rotate(0deg); }
  to   { transform:translate(-50%, -50%) rotate(360deg); }
}

/* ── Scan Line ── */
.hero-scanline {
  position:absolute;
  left:0; top:-2px;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(184,150,58,0.2) 20%, rgba(184,150,58,0.4) 50%, rgba(184,150,58,0.2) 80%, transparent);
  pointer-events:none;
  z-index:0;
  opacity:0;
  animation:scanDrop 5s ease-in-out 2s infinite;
}
@keyframes scanDrop {
  0%   { top:-2px; opacity:0; }
  5%   { opacity:0.8; }
  45%  { opacity:0.8; }
  50%  { opacity:0; top:100%; }
  100% { opacity:0; top:100%; }
}

/* ── Staggered entrance animations ── */
.hero-anim {
  opacity:0; transform:translateY(24px);
  animation:heroEntrance 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-anim--1 { animation-delay:0.1s; }
.hero-anim--2 { animation-delay:0.25s; }
.hero-anim--3 { animation-delay:0.45s; }
.hero-anim--4 { animation-delay:0.65s; }
.hero-anim--5 { animation-delay:0.85s; }
.hero-anim--6 { animation-delay:1.1s; }
@keyframes heroEntrance {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Hero Logo ── */
.hero__logo {
  font-family:var(--font-display);
  font-weight:800;
  font-size:48px;
  color:var(--navy);
  letter-spacing:10px;
  margin-bottom:12px;
  position:relative;
  z-index:3;
}
.hero__logo-z {
  color:var(--gold);
  position:relative;
}

/* ── Badge — Animated Streak Edition ── */
.hero__badge {
  display:inline-flex; align-items:center; gap:8px;
  border-radius:100px;
  padding:7px 22px 7px 14px;
  margin-bottom:32px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border:1px solid rgba(184,150,58,0.25);
  box-shadow:0 2px 16px rgba(13,24,40,0.15), 0 0 0 1px rgba(184,150,58,0.08);
}

/* Animated light streak across badge */
.hero__badge::before {
  content:'';
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(184,150,58,0.15), rgba(255,255,255,0.1), transparent);
  animation:badgeStreak 3s ease-in-out 1.2s infinite;
  pointer-events:none;
}
@keyframes badgeStreak {
  0%   { left:-100%; }
  40%  { left:200%; }
  100% { left:200%; }
}

/* Second faster streak */
.hero__badge::after {
  content:'';
  position:absolute; top:0; left:-100%; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation:badgeStreak2 3s ease-in-out 1.8s infinite;
  pointer-events:none;
}
@keyframes badgeStreak2 {
  0%   { left:-100%; }
  50%  { left:250%; }
  100% { left:250%; }
}

.hero__badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
  position:relative;
  z-index:1;
  box-shadow:0 0 6px rgba(184,150,58,0.6);
  animation:dotGlow 2s ease-in-out infinite;
}
@keyframes dotGlow {
  0%,100% { box-shadow:0 0 4px rgba(184,150,58,0.4); transform:scale(1); }
  50%     { box-shadow:0 0 12px rgba(184,150,58,0.8), 0 0 20px rgba(184,150,58,0.2); transform:scale(1.2); }
}

.hero__badge-text {
  font-size:11px; font-weight:600;
  color:rgba(255,255,255,0.9);
  letter-spacing:1.8px; text-transform:uppercase;
  position:relative; z-index:1;
}

/* ── Big VİZOVA Logo Text ── */
.hero-watermark {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -55%);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(100px, 16vw, 220px);
  letter-spacing:16px;
  white-space:nowrap;
  pointer-events:none;
  z-index:1;
  user-select:none;
  background:linear-gradient(180deg, rgba(13,24,40,0.07) 0%, rgba(13,24,40,0.03) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:watermarkFade 1.2s ease-out 0.2s both;
}
@keyframes watermarkFade {
  from { opacity:0; transform:translate(-50%, -55%) scale(0.92); }
  to   { opacity:1; transform:translate(-50%, -55%) scale(1); }
}

/* ── Diagonal Streaks — Full Hero ── */
.hero-diagonal {
  position:absolute;
  pointer-events:none;
  z-index:1;
  border-radius:4px;
  will-change:transform;
  left:0; top:0;
  width:100%; height:100%;
  overflow:visible;
}
.hero-diagonal::after {
  content:'';
  position:absolute;
  border-radius:4px;
  transform:rotate(-35deg);
  will-change:transform;
}

.hero-diagonal--1::after {
  width:600px; height:4px;
  top:30%; left:0;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,60,0.1) 10%, rgba(212,175,60,0.9) 40%, rgba(235,200,70,0.7) 60%, transparent 100%);
  animation:diagFly 3s cubic-bezier(0.4,0,0.2,1) 1.2s infinite;
}
.hero-diagonal--2::after {
  width:550px; height:3px;
  top:55%; left:0;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,60,0.8) 35%, rgba(235,200,70,0.5) 55%, transparent 100%);
  animation:diagFly 2.6s cubic-bezier(0.4,0,0.2,1) 1.7s infinite;
}
.hero-diagonal--3::after {
  width:500px; height:3px;
  top:15%; left:0;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,60,0.6) 40%, rgba(200,170,55,0.4) 60%, transparent 100%);
  animation:diagFly 3.5s cubic-bezier(0.4,0,0.2,1) 2.2s infinite;
}
.hero-diagonal--4::after {
  width:450px; height:2.5px;
  top:70%; left:0;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,60,0.7) 45%, rgba(235,200,70,0.4) 65%, transparent 100%);
  animation:diagFly 3.2s cubic-bezier(0.4,0,0.2,1) 2.8s infinite;
}
.hero-diagonal--5::after {
  width:400px; height:2px;
  top:42%; left:0;
  background:linear-gradient(90deg, transparent 0%, rgba(212,175,60,0.5) 50%, transparent 100%);
  animation:diagFly 2.4s cubic-bezier(0.4,0,0.2,1) 1.5s infinite;
}

@keyframes diagFly {
  0%   { transform:rotate(-35deg) translateX(-700px); opacity:0; }
  8%   { opacity:1; }
  60%  { opacity:1; }
  82%  { opacity:0; }
  100% { transform:rotate(-35deg) translateX(calc(100vw + 200px)); opacity:0; }
}

/* Badge wrap */
.hero__badge-wrap {
  position:relative;
  display:inline-block;
  padding:8px 0;
  z-index:3;
}

/* ── Title ── */
.hero__title {
  font-family:var(--font-display); font-weight:700;
  font-size:54px; line-height:1.12;
  color:var(--navy); margin-bottom:24px;
  letter-spacing:-0.5px;
}
.hero__title .gold {
  color:var(--gold);
  background:linear-gradient(135deg, #C9A64A 0%, var(--gold-light) 40%, #C9A64A 80%, var(--gold) 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:goldShimmer 4s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%,100% { background-position:0% center; }
  50% { background-position:200% center; }
}

/* ── Subtitle ── */
.hero__subtitle {
  font-family:var(--font-body);
  font-size:16px; font-weight:400;
  color:var(--gray-text);
  max-width:520px; margin:0 auto 36px; line-height:1.75;
}

/* ── Buttons ── */
.hero__buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.btn--glow {
  position:relative;
  box-shadow:0 0 0 0 rgba(184,150,58,0);
  animation:ctaGlow 3s ease-in-out 1.5s infinite;
}
@keyframes ctaGlow {
  0%,100% { box-shadow:0 2px 12px rgba(26,26,46,0.1); }
  50% { box-shadow:0 4px 24px rgba(184,150,58,0.2), 0 0 0 4px rgba(184,150,58,0.05); }
}

/* ── Micro Stats ── */
.hero__stats {
  display:inline-flex; align-items:center; gap:0;
  margin-top:48px;
  background:var(--white);
  border:1px solid var(--gray-light);
  border-radius:var(--radius-lg);
  padding:20px 32px;
  box-shadow:0 4px 20px rgba(0,0,0,0.04);
}
.hero-stat {
  display:flex; flex-direction:column; align-items:center;
  padding:0 24px;
}
.hero-stat__num {
  font-family:var(--font-body); font-weight:700;
  font-size:28px; color:var(--navy); line-height:1;
  letter-spacing:-0.5px;
}
.hero-stat__unit {
  font-family:var(--font-body); font-weight:600;
  font-size:14px; color:var(--gold); margin-left:2px;
}
.hero-stat__label {
  font-size:11px; color:var(--gray-text); font-weight:500;
  margin-top:6px; white-space:nowrap; letter-spacing:0.2px;
}
.hero-stat__divider {
  width:1px; height:36px; background:var(--gray-light); flex-shrink:0;
}

/* ── Scroll indicator ── */
.hero__scroll {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--gray-light);
  animation:scrollBounce 2s ease-in-out 2s infinite;
}
@keyframes scrollBounce {
  0%,100% { transform:translateX(-50%) translateY(0); opacity:0.4; }
  50% { transform:translateX(-50%) translateY(6px); opacity:0.8; }
}

/* ── METRICS ── */
.metrics { padding:80px 0; }

.metrics__grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; margin-top:48px;
}

.metric-card {
  background:var(--white); border:1px solid var(--gray-light);
  border-radius:var(--radius-md); padding:32px 28px;
  box-shadow:var(--shadow-card);
  transition:all var(--transition-fast);
  position:relative;
}
.metric-card::before {
  content:''; position:absolute; left:0; top:20px; bottom:20px;
  width:3px; border-radius:2px;
}
.metric-card--gold::before { background:var(--gold); }
.metric-card--navy::before { background:var(--navy); }
.metric-card--green::before { background:var(--green); }
.metric-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }

.metric-card__number {
  font-family:var(--font-display); font-weight:800;
  font-size:48px; line-height:1; margin-bottom:4px;
}
.metric-card__unit { font-weight:600; font-size:14px; color:var(--navy); margin-bottom:8px; }
.metric-card__desc { font-size:13px; color:var(--gray-text); line-height:1.5; }
.metric-card__pill {
  display:inline-block; background:var(--gold-bg); border:1px solid rgba(184,150,58,0.15);
  color:var(--gold); font-size:10px; font-weight:600;
  padding:3px 10px; border-radius:100px; margin-top:10px;
}

/* ── SOLUTION ── */
.solution { padding:80px 0; }

.solution__headline {
  font-family:var(--font-display); font-weight:700;
  font-size:36px; line-height:1.25; text-align:center; margin-bottom:48px;
}

.solution__arch {
  background:var(--off-white); border:1px solid var(--gray-light);
  border-radius:var(--radius-lg); padding:32px;
  max-width:800px; margin:0 auto;
}

.arch-layer {
  border-radius:var(--radius-sm); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.arch-layer--white { background:var(--white); border:1px solid var(--gray-light); }
.arch-layer--offwhite { background:var(--white); border:1px solid var(--gray-light); }
.arch-layer--gold { background:var(--gold-bg); border:1px solid rgba(184,150,58,0.2); }
.arch-layer--dark { background:var(--white); border:1px solid var(--gray-light); }

.arch-layer__left { display:flex; align-items:center; gap:10px; flex:1; min-width:180px; }
.arch-layer__icon { width:20px; height:20px; flex-shrink:0; }
.arch-layer__title { font-weight:600; font-size:14px; color:var(--navy); }
.arch-layer__subtitle { font-size:11px; color:var(--gray-text); margin-top:1px; }

.arch-layer__right { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }

.arch-chip {
  display:inline-block; padding:3px 9px; border-radius:100px;
  font-size:11px; font-weight:500;
  border:1px solid var(--gray-light); background:var(--off-white); color:var(--navy);
  white-space:nowrap;
}
.arch-chip--dark { background:var(--navy); color:var(--gold); border:none; font-style:italic; font-size:12px; }
.arch-chip--step { background:var(--navy); color:var(--white); border:none; font-size:9px; padding:2px 7px; }
.arch-chip--connector { background:transparent; border:none; color:var(--gray-text); padding:0 1px; font-size:9px; }
.arch-chip--system { background:var(--off-white); border:1px solid var(--gray-border); color:var(--navy); font-size:11px; }

.arch-result {
  background:rgba(5,150,105,0.06); border:1px solid rgba(5,150,105,0.15);
  color:var(--green); padding:10px 14px; border-radius:var(--radius-sm);
  font-size:13px; margin-top:10px; width:100%;
}

.arch-arrow { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; }
.arch-arrow__dot { width:3px; height:3px; border-radius:50%; background:var(--gray-border); }

.solution__stats { display:flex; gap:40px; justify-content:center; margin-top:40px; }
.solution__stat-number { font-family:var(--font-display); font-weight:800; font-size:36px; color:var(--gold); }
.solution__stat-label { font-size:13px; color:var(--gray-text); margin-top:2px; }

/* ── DEMO PREVIEW ── */
.demo-preview { padding:80px 0; }
.demo-preview__headline {
  font-family:var(--font-display); font-weight:700;
  font-size:36px; color:var(--navy); text-align:center;
  margin-bottom:48px; line-height:1.25;
}

.browser-mockup {
  max-width:720px; margin:0 auto 32px;
  border:1px solid var(--gray-light); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.browser-chrome {
  background:var(--off-white); padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--gray-light);
}
.traffic-lights { display:flex; gap:5px; }
.traffic-light { width:9px; height:9px; border-radius:50%; }
.traffic-light--red { background:#FF5F57; }
.traffic-light--yellow { background:#FEBC2E; }
.traffic-light--green { background:#28C840; }
.browser-url {
  flex:1; background:var(--white); border-radius:5px;
  padding:5px 10px; font-size:11px; color:var(--gray-text);
}
.browser-body {
  background:var(--white); padding:24px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px; min-height:220px;
}
.browser-body__left {
  background:var(--off-white); border:1px solid var(--gray-light);
  border-radius:var(--radius-sm); padding:14px;
}
.browser-body__left-text { font-family:monospace; font-size:13px; color:var(--navy); line-height:1.5; }
.browser-body__right { display:flex; flex-direction:column; gap:6px; }
.mock-step {
  background:var(--off-white); border:1px solid var(--gray-light);
  border-radius:var(--radius-sm); padding:8px 12px;
  display:flex; align-items:center; gap:7px; font-size:11px; color:var(--gray-text);
}
.mock-step__check {
  width:14px; height:14px; border-radius:50%;
  background:var(--green); display:flex; align-items:center; justify-content:center;
  color:white; font-size:8px; flex-shrink:0;
}

/* ── FEATURES ── */
.features { padding:80px 0; }
.features__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:48px; }

.feature-card {
  background:var(--white); border:1px solid var(--gray-light);
  border-radius:var(--radius-md); padding:28px;
  box-shadow:var(--shadow-card); transition:all var(--transition-fast);
}
.feature-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.feature-card__icon { width:36px; height:36px; margin-bottom:16px; }
.feature-card__title { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--navy); margin-bottom:10px; }
.feature-card__body { font-size:14px; color:var(--gray-text); line-height:1.6; margin-bottom:14px; }
.feature-card__tags { display:flex; gap:6px; flex-wrap:wrap; }
.feature-tag { background:var(--off-white); padding:3px 10px; border-radius:100px; font-size:10px; font-weight:500; color:var(--gray-text); border:1px solid var(--gray-light); }

/* ── COMPETITIVE ── */
.competitive { padding:80px 0; }
.competitive__subtitle { font-size:15px; color:var(--gray-text); text-align:center; max-width:520px; margin:-32px auto 48px; line-height:1.6; }

.comp-table { max-width:720px; margin:0 auto; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--gray-light); }
.comp-row { display:grid; grid-template-columns:1.8fr repeat(4,1fr); border-bottom:1px solid var(--gray-light); }
.comp-row:last-child { border-bottom:none; }
.comp-cell { padding:12px 14px; font-size:13px; display:flex; align-items:center; justify-content:center; text-align:center; }
.comp-cell:first-child { justify-content:flex-start; font-weight:500; color:var(--navy); }
.comp-row--header { background:var(--off-white); }
.comp-row--header .comp-cell { font-weight:600; font-size:12px; color:var(--gray-text); }
.comp-cell--vizova { background:var(--gold-bg); border-left:2px solid var(--gold); }
.comp-row--header .comp-cell--vizova { background:var(--gold); color:var(--white); font-weight:700; border-left:none; }
.comp-icon { font-size:14px; }
.comp-icon--yes { color:var(--green); }
.comp-icon--no { color:var(--gray-light); }
.comp-icon--partial { color:#F59E0B; }

/* ── CTA ── */
.cta-section { padding:80px 0; text-align:center; }
.cta-section__headline { font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--navy); margin-bottom:12px; }
.cta-section__sub { font-size:16px; color:var(--gray-text); margin-bottom:32px; }

/* ── Responsive ── */
@media (max-width:768px) {
  .hero { min-height:auto; padding:100px 16px 60px; }
  .hero__title { font-size:38px; }
  .hero__logo { font-size:36px; letter-spacing:8px; }
  .hero__subtitle { font-size:15px; }
  .hero-watermark { font-size:clamp(60px, 14vw, 100px); letter-spacing:8px; }
  .hero-orb--1 { width:250px; height:250px; }
  .hero-orb--2 { width:200px; height:200px; }
  .hero-orb--3 { display:none; }
  .hero-diagonal--1 { width:350px; height:3px; }
  .hero-diagonal--2 { width:300px; height:2.5px; }
  .hero-diagonal--3 { width:280px; height:2px; }
  .hero-diagonal--4 { width:250px; height:2px; }
  .hero-diagonal--5 { width:200px; height:1.5px; }
  .hero__stats { padding:12px 16px; flex-wrap:wrap; gap:12px; justify-content:center; }
  .hero-stat { padding:0 14px; }
  .hero-stat__num { font-size:20px; }
  .hero-stat__divider { height:24px; }
  .metrics__grid { grid-template-columns:1fr; }
  .metric-card__number { font-size:40px; }
  .solution__headline { font-size:28px; }
  .solution__arch { padding:16px; }
  .arch-layer { flex-direction:column; align-items:flex-start; padding:12px 14px; }
  .arch-layer__right { margin-top:6px; }
  .solution__stats { flex-direction:column; gap:20px; align-items:center; }
  .demo-preview__headline { font-size:28px; }
  .browser-body { grid-template-columns:1fr; }
  .features__grid { grid-template-columns:1fr; }
  .comp-table { overflow-x:auto; }
  .comp-row { min-width:520px; }
  .cta-section__headline { font-size:32px; }
}
@media (max-width:480px) {
  .hero__title { font-size:32px; }
  .hero__logo { font-size:28px; letter-spacing:6px; }
  .hero-watermark { font-size:50px; letter-spacing:6px; }
  .hero-diagonal--1 { width:250px; height:2.5px; }
  .hero-diagonal--2 { width:220px; height:2px; }
  .hero-diagonal--3 { width:200px; }
  .hero-diagonal--4 { width:180px; }
  .hero-diagonal--5 { width:150px; }
  .hero__buttons { flex-direction:column; align-items:center; }
  .hero__buttons .btn { width:100%; }
  .hero__stats { flex-direction:column; gap:0; border-radius:var(--radius-sm); }
  .hero-stat { padding:8px 0; }
  .hero-stat__divider { width:60px; height:1px; }
  .section-headline { font-size:24px; }
  .metric-card { padding:24px 20px; }
  .metric-card__number { font-size:36px; }
}