/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #050505;
  color: #fff;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5 {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

/* ── CSS Variables ── */
:root {
  --g:    #7cff50;
  --g2:   #5ddb32;
  --gd:   rgba(124,255,80,.14);
  --gx:   rgba(124,255,80,.07);
  --bg:   #050505;
  --card: rgba(10,12,10,.93);
  --bd:   rgba(124,255,80,.13);
  --bd2:  rgba(124,255,80,.28);
  --wh:   #ffffff;
  --gr:   #8a9a8a;
  --gr2:  #4a5a4a;
  --r:    16px;
  --rl:   22px;
  --tr:   all .26s cubic-bezier(.4,0,.2,1);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gd); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g); }
::selection { background: var(--gd); color: var(--wh); }

/* ── Grain overlay ── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  opacity: .027;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Cursor glow ── */
.cursor-glow {
  position: fixed; width: 400px; height: 400px;
  transition: left .06s ease, top .06s ease, opacity .3s ease;
  background: radial-gradient(circle, rgba(124,255,80,.07) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
}

/* =========================================
   ICON SYSTEM
   ========================================= */
.ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 28%;
  background: rgba(124,255,80,.09);
  border: 1.5px solid rgba(124,255,80,.2);
  transition: var(--tr);
  overflow: visible;
}
.ic::before {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,255,80,.24) 0%, transparent 70%);
  filter: blur(9px); opacity: .65;
  transition: opacity .3s; pointer-events: none;
}
.ic img {
  width: 60%; height: 60%;
  object-fit: contain; position: relative; z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  transition: transform .3s;
}
/* Hover in any context */
.ic:hover,
.svc-card:hover .ic,
.ai-feat:hover .ic,
.perk-card:hover .ic,
.stat-card:hover .ic,
.faq-btn:hover .ic,
.trust-badge:hover .ic {
  background: rgba(124,255,80,.18);
  border-color: rgba(124,255,80,.4);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 24px rgba(124,255,80,.28);
}
.ic:hover::before,
.svc-card:hover .ic::before,
.ai-feat:hover .ic::before,
.perk-card:hover .ic::before,
.stat-card:hover .ic::before { opacity: 1; }
.ic:hover img { transform: scale(1.05); }

/* =========================================
   ANIMATED CHECKS
   ========================================= */
.chk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  background: rgba(124,255,80,.12); border: 1.5px solid rgba(124,255,80,.4);
  color: var(--g); font-size: 11px; font-weight: 700;
  animation: chkGlow 2.8s ease-in-out infinite;
  cursor: default; transition: all .25s;
}
.chk:hover {
  animation: none;
  background: rgba(124,255,80,.28);
  border-color: rgba(124,255,80,.8);
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(124,255,80,.45);
}
@keyframes chkGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,255,80,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(124,255,80,0); }
}
.chk-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--gr2); font-size: 12px;
}

/* =========================================
   LAYOUT HELPERS
   ========================================= */
.W { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.SP { padding: 88px 0; }
.SH { margin-bottom: 52px; }
.SH.C { text-align: center; }
.stag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--g); margin-bottom: 12px;
}
.sh2 {
  font-size: clamp(30px, 4vw, 50px);
  margin-bottom: 12px;
}
.sh2.big { font-size: clamp(36px, 5.5vw, 62px); }
.sp { font-size: 16.5px; color: var(--gr); max-width: 480px; line-height: 1.75; font-weight: 300; }
.gn { color: var(--g); text-shadow: 0 0 40px rgba(124,255,80,.5); }

/* =========================================
   BUTTONS
   ========================================= */
.btn-p {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--g); color: #050505;
  padding: 14px 28px; border-radius: 14px;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14.5px;
  border: none; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  animation: btnGlow 2.5s ease-in-out infinite;
  transition: transform .22s, background .22s, box-shadow .22s;
}
.btn-p::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform .55s;
}
.btn-p:hover::after { transform: translateX(100%); }
.btn-p:hover {
  animation: none; background: #8fff5e;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 36px rgba(124,255,80,.55), 0 0 0 4px rgba(124,255,80,.12);
}
.btn-o {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--wh);
  padding: 13px 26px; border-radius: 14px;
  border: 1.5px solid var(--bd2);
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; transition: var(--tr);
}
.btn-o:hover {
  border-color: var(--g); color: var(--g);
  background: rgba(124,255,80,.05); transform: translateY(-2px);
}
.arr { display: inline-block; animation: arrB 1.3s ease-in-out infinite; }
@keyframes arrB { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
@keyframes btnGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,255,80,.5), 0 0 18px rgba(124,255,80,.15); }
  50%      { box-shadow: 0 0 0 10px rgba(124,255,80,0), 0 0 28px rgba(124,255,80,.28); }
}
@keyframes pDot {
  0%   { box-shadow: 0 0 0 0 rgba(124,255,80,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(124,255,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,255,80,0); }
}
@keyframes flt { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(2deg)} }
@keyframes fuA  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes fltA {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-18px) rotate(3deg); }
}

/* =========================================
   NAVBAR
   ========================================= */
.nav {
  position: fixed; top: 0; width: 100%; z-index: 1000; height: 72px;
  display: flex; align-items: center; transition: all .4s;
  max-width: 100vw;
  background: rgba(5,5,5,.9); backdrop-filter: blur(20px);
  overflow: visible !important;
}
.nav.scrolled {
  background: rgba(5,5,5,.92); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bd);
  box-shadow: 0 0 40px rgba(124,255,80,.05);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 44px;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  overflow: visible !important;
}
.nav-logo {
  display: flex; align-items: center; text-decoration: none;
  filter: drop-shadow(0 0 10px rgba(124,255,80,.3));
  transition: filter .3s;
}
.nav-logo:hover { filter: drop-shadow(0 0 22px rgba(124,255,80,.6)); }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  color: var(--gr); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: color .2s; position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px;
  background: var(--g); transition: width .3s; border-radius: 1px;
}
.nav-links a:hover { color: var(--wh); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--g); border: 1.5px solid rgba(124,255,80,.3);
  padding: 7px 14px; border-radius: 100px;
  background: rgba(124,255,80,.08);
  animation: btnGlow 2.2s ease-in-out infinite;
}
.nav-pill-dot { width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: pDot 1.6s ease infinite; }

/* Mobile nav hamburger */
.nav-ham { display: none; background: none; border: 1px solid var(--bd); color: var(--gr); padding: 8px; border-radius: 8px; cursor: pointer; font-size: 18px; }
.nav-mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 99; background: rgba(5,5,5,.97); backdrop-filter: blur(24px); border-bottom: 1px solid var(--bd); padding: 20px 24px; }
.nav-mobile.open { display: block; }
.nav-mobile a { display: block; color: var(--gr); text-decoration: none; font-size: 16px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.nav-mobile a:hover { color: var(--g); }

/* ── NAV CTA ── */
.nav-cta {
  position: relative;
  overflow: hidden;
  background: rgba(2,6,2,0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(124,255,80,.38);
  border-radius: 12px;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 0 18px rgba(124,255,80,.15), inset 0 1px 0 rgba(124,255,80,.1);
  animation: navGlow 2.8s ease-in-out infinite;
}
@keyframes navGlow {
  0%,100% { box-shadow: 0 0 10px rgba(124,255,80,.12), inset 0 1px 0 rgba(124,255,80,.08); }
  50%      { box-shadow: 0 0 26px rgba(124,255,80,.32), 0 0 50px rgba(124,255,80,.1), inset 0 1px 0 rgba(124,255,80,.15); }
}
.nav-cta:hover {
  animation: none;
  background: rgba(2,8,2,0.92);
  border-color: rgba(124,255,80,.7);
  box-shadow: 0 0 34px rgba(124,255,80,.5), 0 0 70px rgba(124,255,80,.18);
  transform: translateY(-2px) scale(1.03);
}
.nav-cta-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 40% 50%, rgba(124,255,80,.12) 0%, transparent 65%);
}
.nav-cta-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 8px;
  position: relative; z-index: 1;
}
.nav-cta-avo { display: flex; align-items: center; flex-shrink: 0; }
.nav-cta-avo .ic {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  background: rgba(124,255,80,.12) !important;
  border-color: rgba(124,255,80,.28) !important;
}
.nav-cta-avo .ic::before { opacity: .7; }
.nav-cta-avo-img {
  width: 30px; height: 30px; object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(124,255,80,.2));
  transition: transform .25s;
}
.nav-cta:hover .nav-cta-avo-img { transform: scale(1.1) rotate(-5deg); }
.nav-cta-label {
  font-family: 'Sora', sans-serif;
  font-weight: 800; font-size: 13.5px; line-height: 1;
  color: #7cff50;
  letter-spacing: .2px;
  text-shadow: 0 0 10px rgba(124,255,80,.6), 0 0 22px rgba(124,255,80,.25);
  transition: text-shadow .25s;
}
.nav-cta:hover .nav-cta-label {
  text-shadow: 0 0 16px rgba(124,255,80,.9), 0 0 35px rgba(124,255,80,.4);
}
.nav-cta-shine {
  position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(124,255,80,.08), transparent);
  transition: left .6s ease; pointer-events: none;
}
.nav-cta:hover .nav-cta-shine { left: 140%; }
.nav-mobile .nav-cta { margin-top: 16px; width: 100%; justify-content: center; }

/* =========================================
   HERO SECTION
   ========================================= */
#particleCanvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero {
  min-height: 100vh; display: flex; align-items: center;
  position: relative; overflow: visible; padding: 120px 0 80px;
  background: radial-gradient(ellipse 120% 80% at 70% 40%, rgba(124,255,80,.06) 0%, transparent 60%), #050505;
}
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,255,80,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,80,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 100%);
  opacity: .5; z-index: 0;
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.orb-1 {
  width: 700px; height: 600px;
  background: radial-gradient(ellipse, rgba(124,255,80,.15) 0%, transparent 65%);
  top: -150px; right: -200px; animation: orbF 9s ease-in-out infinite;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(ellipse, rgba(124,255,80,.08) 0%, transparent 65%);
  bottom: 0; left: -180px; animation: orbF 12s ease-in-out infinite reverse;
}
@keyframes orbF { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.05)} }
.hero-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 44px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
  position: relative; z-index: 2; width: 100%;
}


.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,255,80,.08); border: 1px solid var(--bd2);
  padding: 8px 16px; border-radius: 100px; margin-bottom: 28px;
  font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--g);
}
.hero-title { font-size: clamp(46px, 5.5vw, 78px); margin-bottom: 8px; font-weight: 900; }
.hero-title-gn {
  color: var(--g); display: block;
  text-shadow: 0 0 50px rgba(124,255,80,.5), 0 0 100px rgba(124,255,80,.25);
  animation: neonF 6s infinite;
}
@keyframes neonF {
  0%,88%,100% { text-shadow: 0 0 50px rgba(124,255,80,.5), 0 0 100px rgba(124,255,80,.25); }
  90% { text-shadow: 0 0 8px rgba(124,255,80,.1); }
  92% { text-shadow: 0 0 50px rgba(124,255,80,.5), 0 0 100px rgba(124,255,80,.25); }
  94% { text-shadow: 0 0 8px rgba(124,255,80,.1); }
  96% { text-shadow: 0 0 60px rgba(124,255,80,.6), 0 0 120px rgba(124,255,80,.3); }
}
.hero-pain {
  font-size: 16px; font-family: 'Sora', sans-serif; font-weight: 600;
  color: rgba(255,255,255,.38); border-left: 2px solid rgba(124,255,80,.35);
  padding-left: 14px; margin: 6px 0 20px; max-width: 500px;
}
.hero-sub {
  font-size: 17.5px; color: var(--gr); line-height: 1.75;
  max-width: 500px; margin-bottom: 40px; font-weight: 300;
}
.hero-sub strong { color: var(--wh); font-weight: 500; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 52px; }
 .hero-stats {
  display: flex;
  justify-content: space-between;
  gap: 44px;
  padding-top: 20px;
}

  .hero-stats > div {
    text-align: center;
  }

  .hero-stat-num {
    font-size: 18px !important;
  }

  .hero-stat-lbl {
    font-size: 10px;
    line-height: 1.2;
  }
.hero-stat-num { font-family: 'Sora', sans-serif; font-size: 34px; font-weight: 800; color: var(--g); line-height: 1; text-shadow: 0 0 24px rgba(124,255,80,.35); }
.hero-stat-lbl { font-size: 13px; color: var(--gr); margin-top: 5px; }

/* Hero right characters */
.hero-right { position: relative; display: flex; justify-content: center; align-items: center; }
.char-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; }
.char-glow {
  position: absolute; inset: 10%;
  background: radial-gradient(circle, rgba(124,255,80,.22) 0%, transparent 65%);
  filter: blur(50px); border-radius: 50%; animation: glowP 3s ease-in-out infinite;
}
@keyframes glowP { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.char-panda {
  position: absolute; top: 0; left: 0; width: 78%; z-index: 2;
  animation: flt 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(124,255,80,.3));
}
.char-avo {
  position: absolute; bottom: 0; right: 0; width: 58%; z-index: 3;
  animation: flt 6s ease-in-out infinite 1s;
  filter: drop-shadow(0 20px 40px rgba(77,184,46,.4));
}
/* Metric chips on hero */
.mchip {
  position: absolute;
  background: rgba(10,10,10,.9); border: 1px solid var(--bd2);
  border-radius: 16px; padding: 12px 16px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(16px); box-shadow: 0 8px 28px rgba(0,0,0,.5);
  white-space: nowrap;
}
.mchip-1 { top: 6%; right: -4%; animation: pillF 3.4s ease-in-out infinite; }
.mchip-2 { bottom: 22%; left: -6%; animation: pillF 4.2s ease-in-out infinite .5s; }
.mchip-3 { bottom: 4%; right: 14%; animation: pillF 3.9s ease-in-out infinite 1s; }
@keyframes pillF { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.mchip-val { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: var(--g); line-height: 1; }
.mchip-lbl { font-size: 11px; color: var(--gr); }
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--gr2); font-size: 12px;
}
.scroll-chevron {
  width: 20px; height: 20px;
  border-right: 2px solid var(--gr2); border-bottom: 2px solid var(--gr2);
  transform: rotate(45deg); animation: chevB 1.2s ease-in-out infinite;
}
@keyframes chevB { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }

/* =========================================
   TICKER
   ========================================= */
.ticker-strip {
  background: rgba(6,10,6,.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(124,255,80,.22);
  border-bottom: 1px solid rgba(124,255,80,.22);
  padding: 11px 0; overflow: hidden;
  position: relative; z-index: 5;
}
.ticker-strip::before, .ticker-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.ticker-strip::before { left: 0;  background: linear-gradient(90deg, rgba(6,10,6,.97), transparent); }
.ticker-strip::after  { right: 0; background: linear-gradient(-90deg, rgba(6,10,6,.97), transparent); }
.ticker-track { display: flex; width: max-content; animation: tkRun 30s linear infinite; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 22px;
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--gr); white-space: nowrap; transition: color .2s;
}
.ticker-item:hover { color: var(--g); }
.ticker-item .ic {
  width: 28px !important; height: 28px !important;
  min-width: 28px; border-radius: 8px !important;
  background: rgba(124,255,80,.1); border-color: rgba(124,255,80,.2);
}
.ticker-item .ic::before { display: none; }
.ticker-item .ic:hover { transform: none; box-shadow: none; }
.t-sep { color: rgba(124,255,80,.3); margin: 0 4px; font-size: 10px; }
@keyframes tkRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================
   STATS & LIVE BAR
   ========================================= */
.stats-s { padding: 0 0 72px; }
.stats-g { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.stat-card {
  background: var(--card); border: 1px solid var(--bd); border-radius: 20px;
  padding: 28px 20px; text-align: center; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: var(--tr); backdrop-filter: blur(20px);
}
.stat-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(124,255,80,.06) 0%, transparent 65%);
  pointer-events: none;
}
.stat-card:hover {
  border-color: var(--bd2); transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(124,255,80,.1);
}
.stat-val { font-family: 'Sora', sans-serif; font-size: 44px; font-weight: 900; color: var(--g); line-height: 1; text-shadow: 0 0 28px rgba(124,255,80,.4); }
.stat-lbl { font-size: 13px; color: var(--gr); }

.live-bar {
  background: var(--card); border: 1.5px solid var(--bd2); border-radius: var(--rl);
  padding: 24px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden; backdrop-filter: blur(20px);
  box-shadow: 0 0 60px rgba(124,255,80,.07), inset 0 1px 0 rgba(124,255,80,.1);
}
.live-bar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--g), var(--g2)); border-radius: 0 2px 2px 0;
}
.live-bar-glow {
  position: absolute; left: 0; top: 0; width: 300px; height: 100%;
  background: radial-gradient(ellipse at left, rgba(124,255,80,.08) 0%, transparent 60%);
  pointer-events: none;
}
.live-dot { width: 8px; height: 8px; background: var(--g); border-radius: 50%; flex-shrink: 0; animation: pDot 1.6s ease infinite; box-shadow: 0 0 8px rgba(124,255,80,.6); }
.live-tag { display: flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--g); margin-bottom: 6px; }
.live-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.live-desc { font-size: 13.5px; color: var(--gr); }
.live-r { display: flex; align-items: center; gap: 16px; flex-shrink: 0; position: relative; z-index: 1; }
.live-panda { width: 52px; height: auto; filter: drop-shadow(0 6px 16px rgba(77,184,46,.4)); animation: flt 5s ease-in-out infinite; }
.live-cta {
  background: linear-gradient(135deg, var(--g), var(--g2)); color: #050505;
  padding: 13px 22px; border-radius: 13px; display: flex; flex-direction: column; gap: 2px;
  font-family: 'Sora', sans-serif; border: none; cursor: pointer; text-decoration: none;
  transition: var(--tr); box-shadow: 0 4px 20px rgba(124,255,80,.3);
  animation: btnGlow 2.5s ease-in-out infinite; white-space: nowrap;
}
.live-cta:hover { animation: none; background: linear-gradient(135deg, #8fff5e, var(--g)); box-shadow: 0 8px 32px rgba(124,255,80,.5); transform: translateY(-2px); }
.live-cta-top { font-size: 10px; font-weight: 600; opacity: .7; }
.live-cta-bot { font-size: 13.5px; font-weight: 800; }

/* =========================================
   AI SECTION
   ========================================= */
.sec-mascot { height: 80px; width: auto; display: block; margin-bottom: 14px; filter: drop-shadow(0 8px 20px rgba(124,255,80,.35)); animation: flt 5s ease-in-out infinite; }
.ai-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; align-items: start; margin-top: 50px; }
/* Chat box */
.chat-box { border-radius: var(--rl); overflow: hidden; border: 1.5px solid var(--bd2); background: rgba(6,7,6,.97); box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 60px rgba(124,255,80,.07); }
.chat-hd { padding: 14px 18px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 11px; background: linear-gradient(135deg, rgba(12,16,10,.9), rgba(8,10,8,.9)); }
.chat-ava { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--g), var(--g2)); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 0 18px rgba(124,255,80,.35); }
.chat-nm { font-family: 'Sora', sans-serif; font-size: 13.5px; font-weight: 700; }
.chat-on { font-size: 11px; color: var(--g); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.chat-on::before { content: ''; width: 5px; height: 5px; background: var(--g); border-radius: 50%; animation: pDot 1.6s ease infinite; }
.chat-badge { font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700; color: var(--g); background: rgba(124,255,80,.1); padding: 4px 10px; border-radius: 100px; border: 1px solid var(--bd); margin-left: auto; }
.chat-msgs { padding: 18px; min-height: 320px; max-height: 380px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.chat-msgs::-webkit-scrollbar { width: 3px; }
.chat-msgs::-webkit-scrollbar-thumb { background: rgba(124,255,80,.2); border-radius: 2px; }
.msg { max-width: 86%; opacity: 1; display: flex; flex-direction: column; }
.msg.bot { align-self: flex-start; }
.msg.usr { align-self: flex-end; }
.msg-bub { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.65; }
.msg.bot .msg-bub { background: rgba(124,255,80,.07); border: 1px solid var(--bd); border-bottom-left-radius: 4px; }
.msg.usr .msg-bub { background: var(--g); color: #050505; font-weight: 500; border-bottom-right-radius: 4px; }
.msg-ts { font-size: 10px; color: var(--gr2); margin-top: 3px; padding: 0 3px; }
.msg.usr .msg-ts { text-align: right; }
.msg:nth-child(1){animation-delay:.1s} .msg:nth-child(2){animation-delay:.7s}
.msg:nth-child(3){animation-delay:1.4s} .msg:nth-child(4){animation-delay:2.1s}
.msg:nth-child(5){animation-delay:2.8s}
.typing { display: flex; gap: 4px; align-items: center; padding: 11px 13px; background: rgba(124,255,80,.06); border: 1px solid var(--bd); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.typing span { width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: td 1.2s ease-in-out infinite; }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes td { 0%,60%,100%{transform:translateY(0);opacity:.3} 30%{transform:translateY(-5px);opacity:1} }
/* Offer box */
.offer-box { margin: 0 16px 14px; background: linear-gradient(135deg, rgba(124,255,80,.11), rgba(124,255,80,.04)); border: 1.5px solid rgba(124,255,80,.35); border-radius: 16px; padding: 18px; position: relative; overflow: hidden; }
.offer-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(124,255,80,.1) 0%, transparent 60%); pointer-events: none; }
.offer-badge { display: inline-flex; align-items: center; gap: 5px; font-family: 'Sora', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #050505; background: var(--g); padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; }
.offer-nm { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.offer-pr-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.offer-pr { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 800; color: var(--g); }
.offer-pr sub { font-size: 12px; color: var(--gr); font-weight: 400; }
.offer-old { font-size: 12px; color: var(--gr2); text-decoration: line-through; }
.offer-ul { list-style: none; margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.offer-ul li { font-size: 12.5px; color: var(--gr); display: flex; align-items: center; gap: 6px; }
.offer-ul li::before { content: '✓'; color: var(--g); font-weight: 700; }
.offer-btns { display: flex; gap: 8px; }
.offer-btn-m { flex: 1; padding: 9px 12px; border-radius: 10px; background: var(--g); color: #050505; font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 700; border: none; cursor: pointer; transition: var(--tr); display: flex; align-items: center; justify-content: center; gap: 5px; }
.offer-btn-m:hover { background: #8fff5e; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,255,80,.35); }
.offer-btn-wa { padding: 9px 12px; border-radius: 10px; background: rgba(37,211,102,.12); color: #25d366; border: 1px solid rgba(37,211,102,.3); font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--tr); }
.offer-btn-wa:hover { background: rgba(37,211,102,.22); transform: translateY(-1px); }
/* Chat input */
.chat-ir { padding: 12px 16px; border-top: 1px solid var(--bd); display: flex; gap: 8px; }
.chat-in { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--bd); border-radius: 12px; padding: 11px 15px; color: var(--wh); font-family: 'DM Sans', sans-serif; font-size: 13.5px; outline: none; transition: border-color .2s; }
.chat-in:focus { border-color: var(--g); }
.chat-in::placeholder { color: var(--gr2); }
.chat-send { width: 44px; height: 44px; background: var(--g); border: none; border-radius: 12px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #050505; font-size: 18px; font-weight: 700; transition: var(--tr); }
.chat-send:hover { background: #8fff5e; box-shadow: 0 4px 16px rgba(124,255,80,.4); transform: translateY(-1px); }
/* AI features list */
.ai-feats { display: flex; flex-direction: column; gap: 11px; }
.ai-feat { display: flex; align-items: flex-start; gap: 14px; background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 16px 18px; cursor: pointer; transition: var(--tr); position: relative; overflow: hidden; }
.ai-feat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--g); transform: scaleY(0); transform-origin: bottom; transition: transform .25s; border-radius: 0 2px 2px 0; }
.ai-feat:hover, .ai-feat.active { border-color: var(--bd2); background: rgba(124,255,80,.03); }
.ai-feat:hover::before, .ai-feat.active::before { transform: scaleY(1); }
.feat-nm { font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.feat-ds { font-size: 13px; color: var(--gr); line-height: 1.6; }

/* =========================================
   ROADMAP
   ========================================= */
.roadmap-s { padding: 60px 0 72px; }
.roadmap-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
}
.rm-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rm-node {
  position: relative;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.rm-node-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(124,255,80,.3);
  animation: rmRing 3s ease-in-out infinite;
}
@keyframes rmRing {
  0%,100%{transform:scale(1);opacity:.6;box-shadow:0 0 0 0 rgba(124,255,80,.3)}
  50%{transform:scale(1.08);opacity:1;box-shadow:0 0 0 8px rgba(124,255,80,0)}
}
.rm-node-core {
  width: 56px; height: 56px; border-radius: 18px;
  background: rgba(10,12,10,.95);
  border: 1.5px solid rgba(124,255,80,.28);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 0 20px rgba(124,255,80,.12);
  transition: all .3s;
}
.rm-step:hover .rm-node-core {
  border-color: rgba(124,255,80,.55);
  transform: translateY(-3px);
  box-shadow: 0 0 32px rgba(124,255,80,.28);
}
.rm-card {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 20px; text-align: center;
  width: 100%; transition: all .3s; position: relative; overflow: hidden;
}
.rm-card::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at top, rgba(124,255,80,.07) 0%, transparent 65%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.rm-step:hover .rm-card { border-color:var(--bd2); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.rm-step:hover .rm-card::before { opacity:1; }
.rm-num { font-family:'Sora',sans-serif; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--g); opacity:.6; margin-bottom:6px; }
.rm-title { font-family:'Sora',sans-serif; font-size:15px; font-weight:800; margin-bottom:8px; line-height:1.3; }
.rm-desc { font-size:13px; color:var(--gr); line-height:1.65; margin-bottom:10px; }
.rm-tag { display:inline-flex; font-family:'Sora',sans-serif; font-size:11px; font-weight:600; color:var(--gr); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:4px 12px; border-radius:100px; }
.rm-tag.rm-tag-green { color:var(--g); background:rgba(124,255,80,.08); border-color:rgba(124,255,80,.2); }
.rm-connector {
  margin-top: 35px;
  flex-shrink: 0;
  width: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.rm-line {
  flex: 1; height: 1.5px;
  background: linear-gradient(90deg, rgba(124,255,80,.35), rgba(124,255,80,.1));
  border-radius: 1px;
}
.rm-dots { display:flex; flex-direction:row; gap:4px; align-items:center; }
.rm-dots span {
  width:4px; height:4px; border-radius:50%; background:var(--g); opacity:.4;
  animation: rmDot 1.8s ease-in-out infinite;
}
.rm-dots span:nth-child(1){animation-delay:0s}
.rm-dots span:nth-child(2){animation-delay:.3s}
.rm-dots span:nth-child(3){animation-delay:.6s}
.rm-dot {
  display:inline-block;
  width:4px;height:4px;border-radius:50%;
  background:#7cff50;opacity:.4;
  animation:rmDot 1.8s ease-in-out infinite;
}
@keyframes rmDot{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
.rm-stats { display:flex; align-items:center; justify-content:center; margin-top:48px; background:var(--card); border:1px solid var(--bd); border-radius:18px; overflow:hidden; }
.rm-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 20px; transition:all .3s; }
.rm-stat:hover { background:rgba(124,255,80,.04); }
.rm-stat-val { font-family:'Sora',sans-serif; font-size:38px; font-weight:900; color:var(--g); line-height:1; text-shadow:0 0 24px rgba(124,255,80,.4); }
.rm-stat-lbl { font-size:13px; color:var(--gr); }
.rm-stat-sep { width:1px; height:60px; background:var(--bd); flex-shrink:0; }

/* =========================================
   SERVICES
   ========================================= */
.svc-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 50px; }
.svc-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--rl); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: var(--tr); }
.svc-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(124,255,80,.09) 0%, transparent 55%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.svc-card:hover { transform: translateY(-8px); border-color: rgba(124,255,80,.28); box-shadow: 0 22px 52px rgba(0,0,0,.5), 0 0 44px rgba(124,255,80,.07); }
.svc-card:hover::after { opacity: 1; }
.svc-nm { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 800; transition: color .3s; }
.svc-card:hover .svc-nm { color: var(--g); }
.svc-ds { font-size: 13.5px; color: var(--gr); line-height: 1.7; flex: 1; }
.svc-stat { display: flex; align-items: center; gap: 7px; font-family: 'Sora', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--g); margin-top: auto; }
.svc-dot { width: 6px; height: 6px; background: var(--g); border-radius: 50%; animation: pDot 1.6s ease infinite; flex-shrink: 0; }

/* =========================================
   PRICING
   ========================================= */
.prc-s { position: relative; overflow: hidden; }
.prc-bg { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(ellipse, rgba(124,255,80,.06) 0%, transparent 65%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; filter: blur(60px); }
.ptog-w { display: flex; justify-content: center; margin-bottom: 44px; }
.ptog { padding: 10px 26px; border-radius: 12px; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--gr); border: 1px solid rgba(255,255,255,.07); background: transparent; display: flex; align-items: center; gap: 7px; transition: var(--tr); }
.ptog.active { background: var(--g); color: #050505; border-color: var(--g); }
.ptog + .ptog { margin-left: 6px; }
.ptog-sv { font-size: 10px; font-weight: 700; color: var(--g); background: rgba(124,255,80,.12); border: 1px solid var(--bd); padding: 2px 8px; border-radius: 100px; }
.ptog.active .ptog-sv { background: rgba(0,0,0,.2); border-color: rgba(0,0,0,.1); color: #050505; }
.prc-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
.prc-g li { list-style: none; }
.p-card { background: var(--card); border: 1px solid var(--bd); border-radius: var(--rl); padding: 32px 28px; position: relative; overflow: hidden; transition: var(--tr); }
.p-card:not(.hot):hover { transform: translateY(-5px); border-color: var(--bd2); }
.p-card.hot { border-color: rgba(124,255,80,.45); background: rgba(124,255,80,.03); transform: scale(1.04); box-shadow: 0 0 80px rgba(124,255,80,.16), 0 30px 60px rgba(0,0,0,.6); }
.p-card.hot:hover { transform: scale(1.04) translateY(-5px); }
.hot-anim-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top right, rgba(124,255,80,.1) 0%, transparent 55%); animation: hotBG 4s ease-in-out infinite; }
@keyframes hotBG { 0%,100%{opacity:.6} 50%{opacity:1} }
.hot-lbl { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--g2), var(--g)); color: #050505; font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 20px; border-radius: 0 0 14px 14px; box-shadow: 0 4px 18px rgba(124,255,80,.4); display: flex; align-items: center; gap: 7px; }
.hot-dot { width: 6px; height: 6px; background: #050505; border-radius: 50%; opacity: .6; animation: pDot 1.6s ease infinite; }
.p-panda { width: 100%; max-height: 160px; object-fit: contain; margin: 14px 0 10px; display: block; filter: drop-shadow(0 10px 24px rgba(124,255,80,.25)); transition: transform .3s ease; }
.p-card:hover .p-panda { transform: translateY(-6px) scale(1.04); }
@keyframes pfloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(2deg)} }
.p-tier { font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gr); margin-bottom: 5px; }
.p-nm { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.p-ds { font-size: 13px; color: var(--gr); line-height: 1.6; margin-bottom: 8px; }
.p-soc { font-size: 11.5px; color: var(--gr); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.p-urg { display: flex; align-items: center; gap: 7px; font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--g); margin-bottom: 6px; }
.urg-dot { width: 7px; height: 7px; background: var(--g); border-radius: 50%; flex-shrink: 0; animation: pDot 1.6s ease infinite; }
.p-lim { display: inline-flex; align-items: center; gap: 5px; font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700; color: #ff7c4d; background: rgba(255,124,77,.09); border: 1px solid rgba(255,124,77,.2); padding: 4px 11px; border-radius: 100px; margin-bottom: 14px; }
.p-pr-row { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--bd); }
.p-cur { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; color: var(--gr); padding-bottom: 5px; }
.p-amt { font-family: 'Sora', sans-serif; font-size: 44px; font-weight: 900; line-height: 1; }
.p-per { font-size: 13px; color: var(--gr); padding-bottom: 6px; }
.p-was { font-size: 12px; color: var(--gr2); text-decoration: line-through; padding-bottom: 6px; margin-left: 4px; }
.p-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.p-feats li { font-size: 13px; color: var(--gr); display: flex; align-items: center; gap: 9px; line-height: 1.5; }
.p-feats li.no { opacity: .25; text-decoration: line-through; }
.pb-m { width: 100%; padding: 14px; border-radius: 14px; border: none; cursor: pointer; background: var(--g); color: #050505; font-family: 'Sora', sans-serif; font-size: 14.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; animation: btnGlow 2.5s ease-in-out infinite; transition: var(--tr); }
.pb-m:hover { animation: none; background: #8fff5e; transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 36px rgba(124,255,80,.55); }
.pb-o { width: 100%; padding: 13px; border-radius: 14px; cursor: pointer; background: transparent; color: var(--wh); border: 1.5px solid var(--bd2); font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700; transition: var(--tr); }
.pb-o:hover { border-color: var(--g); color: var(--g); background: rgba(124,255,80,.04); transform: translateY(-2px); }

/* =========================================
   COMPARE TABLE
   ========================================= */
.cmp-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(124,255,80,.12);
  border: 1.5px solid rgba(124,255,80,.4);
  color: #7cff50; font-size: 12px; font-weight: 700;
  cursor: help;
  animation: tickPulse 3s ease-in-out infinite;
  transition: all .2s;
}
.cmp-tick:hover {
  animation: none;
  background: rgba(124,255,80,.25);
  border-color: rgba(124,255,80,.8);
  transform: scale(1.25);
  box-shadow: 0 0 14px rgba(124,255,80,.5);
}
@keyframes tickPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(124,255,80,.4)}
  50%{box-shadow:0 0 0 5px rgba(124,255,80,0)}
}
.cmp-warn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600;
  color: #f59e0b; cursor: help;
  transition: all .2s;
}
.cmp-warn:hover { color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,.4); }
.cmp-txt { font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; cursor: help; }
/* Karşılaştırma Tablosundaki Yeşil Sütun Vurgusunu İptal Et */
table th:nth-child(3), 
table td:nth-child(3) {
  background-color: transparent !important;
}
}
[title] { position: relative; }



/* =========================================
   BAYI & PERKS
   ========================================= */
.bayi-s { background: linear-gradient(180deg, transparent, rgba(124,255,80,.03) 50%, transparent); }
.bayi-g { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; margin-top: 52px; }
.sim-card { background: var(--card); border: 1.5px solid var(--bd2); border-radius: var(--rl); padding: 26px; position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 50px rgba(124,255,80,.06); }
.sim-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(124,255,80,.08) 0%, transparent 60%); pointer-events: none; }
.sim-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sim-title { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.sim-sub { font-size: 13px; color: var(--gr); }
.sim-sl-w { margin-bottom: 16px; }
.sim-sl { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(124,255,80,.12); border-radius: 3px; outline: none; cursor: pointer; }
.sim-sl::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--g); cursor: pointer; box-shadow: 0 0 12px rgba(124,255,80,.5); }
.sim-labs { display: flex; justify-content: space-between; font-size: 11px; color: var(--gr2); margin-top: 5px; font-family: 'Sora', sans-serif; }
.sim-res { display: flex; flex-direction: column; gap: 9px; }
.sim-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.sim-row.tot { background: rgba(124,255,80,.06); border-color: rgba(124,255,80,.2); }
.sim-lb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gr); }
.sim-val { font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; }
.sim-val.muted { color: var(--gr); }
.sim-val.gn { color: var(--g); text-shadow: 0 0 14px rgba(124,255,80,.3); }
.sim-val.big { font-size: 24px; transition: all .3s; }
.tiers-box { background: var(--card); border: 1px solid var(--bd); border-radius: 18px; padding: 20px; margin-top: 14px; }
.tiers-h { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: var(--g); margin-bottom: 12px; letter-spacing: .5px; }
.tier-r { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04); transition: var(--tr); }
.tier-r:last-child { border-bottom: none; }
.tier-r:hover { padding-left: 4px; }
.tier-r.el { background: rgba(124,255,80,.03); border-radius: 10px; padding: 10px 8px; border-bottom: none; margin-top: 4px; }
.tier-l { min-width: 84px; }
.tier-a { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 800; display: block; }
.tier-a.gn { color: var(--g); }
.tier-lb { font-size: 11px; color: var(--gr); }
.tier-bw { flex: 1; }
.tier-b { height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.tier-f { height: 100%; background: linear-gradient(90deg, var(--g2), var(--g)); border-radius: 3px; }
.tier-d { background: rgba(124,255,80,.12); color: var(--g); font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 800; min-width: 58px; text-align: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bd); }
.tier-r.el .tier-d { background: var(--g); color: #050505; box-shadow: 0 4px 14px rgba(124,255,80,.35); }
.perks-g { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.perk-card { background: var(--card); border: 1px solid var(--bd); border-radius: 15px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; position: relative; overflow: hidden; transition: var(--tr); }
.perk-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(124,255,80,.07) 0%, transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.perk-card:hover { border-color: var(--bd2); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.perk-card:hover::before { opacity: 1; }
.perk-nm { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; }
.perk-ds { font-size: 12px; color: var(--gr); line-height: 1.5; }

/* =========================================
   CASES
   ========================================= */
.cases-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 50px; }
.case-c { background: var(--card); border: 1px solid var(--bd); border-radius: var(--rl); overflow: hidden; transition: var(--tr); }
.case-c:hover { border-color: var(--bd2); transform: translateY(-5px); box-shadow: 0 22px 48px rgba(0,0,0,.5), 0 0 38px rgba(124,255,80,.06); }
.case-vis { display: flex; height: 150px; background: linear-gradient(135deg, #0c1a10, #0a1208); }
.case-bef, .case-aft { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px; position: relative; }
.case-bef { background: rgba(255,255,255,.015); border-right: 1px solid var(--bd); }
.case-aft { background: rgba(124,255,80,.04); }
.case-lbl { font-family: 'Sora', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; position: absolute; top: 8px; color: var(--gr2); }
.case-lbl.gn { color: var(--g); }
.case-nb { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 900; color: var(--gr2); }
.case-ab { font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 900; color: var(--g); text-shadow: 0 0 18px rgba(124,255,80,.4); }
.case-m { font-size: 11px; color: var(--gr2); text-align: center; line-height: 1.4; }
.case-arr { display: flex; align-items: center; justify-content: center; width: 24px; flex-shrink: 0; font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 700; color: var(--g); }
.case-bd { padding: 16px 20px; }
.case-sec { font-family: 'Sora', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g); margin-bottom: 6px; }
.case-ttl { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.case-dsc { font-size: 13px; color: var(--gr); line-height: 1.65; margin-bottom: 10px; }
.case-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.c-tag { font-family: 'Sora', sans-serif; font-size: 10.5px; font-weight: 600; color: var(--gr2); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding: 3px 9px; border-radius: 100px; }

/* =========================================
   TESTIMONIALS
   ========================================= */
.logos-w { position: relative; overflow: hidden; margin: 34px 0; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.logos-w::before, .logos-w::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.logos-w::before { left: 0; background: linear-gradient(90deg, #050505, transparent); }
.logos-w::after  { right: 0; background: linear-gradient(-90deg, #050505, transparent); }
.logos-t { display: flex; animation: lSc 26s linear infinite; width: max-content; }
.logo-i { padding: 11px 28px; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: var(--gr2); border-right: 1px solid rgba(255,255,255,.05); white-space: nowrap; transition: color .2s; }
.logo-i:hover { color: var(--g); }
@keyframes lSc { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.testi-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.testi-c { background: var(--card); border: 1px solid var(--bd); border-radius: var(--rl); padding: 26px; position: relative; overflow: hidden; transition: var(--tr); }
.testi-c::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at bottom right, rgba(124,255,80,.06) 0%, transparent 60%); pointer-events: none; }
.testi-c:hover { border-color: var(--bd2); transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,0,0,.4); }
.testi-stars { color: var(--g); font-size: 14px; letter-spacing: 3px; margin-bottom: 11px; position: relative; z-index: 1; }
.testi-q { font-size: 14px; line-height: 1.75; color: #bbb; margin-bottom: 16px; font-style: italic; position: relative; z-index: 1; }
.testi-q::before { content: '"'; color: var(--g); font-size: 21px; line-height: 0; vertical-align: -6px; margin-right: 3px; font-style: normal; }
.testi-au { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.testi-av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bd2); display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(124,255,80,.1); }
.testi-nm { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; }
.testi-rl { font-size: 11px; color: var(--gr); margin-top: 2px; }
.trust-r { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.05); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.trust-badge { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--bd); padding: 9px 16px; border-radius: 100px; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; color: var(--gr); transition: var(--tr); }
.trust-badge:hover { border-color: var(--bd2); color: var(--g); }

/* =========================================
   FAQ & CTA
   ========================================= */
.faq-s { background: linear-gradient(180deg, transparent, rgba(124,255,80,.02) 50%, transparent); }
.faq-list { max-width: 760px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 9px; }
.faq-item { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; overflow: hidden; transition: border-color .3s; }
.faq-item.open { border-color: var(--bd2); }
.faq-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; transition: background .2s; }
.faq-btn:hover { background: rgba(124,255,80,.03); }
.faq-q { flex: 1; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: var(--wh); }
.faq-ic { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; color: var(--g); transition: transform .3s; flex-shrink: 0; width: 24px; text-align: center; }
.faq-item.open .faq-ic { transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-ans-in { padding: 0 20px 18px; font-size: 14px; color: var(--gr); line-height: 1.75; border-top: 1px solid var(--bd); }

.cta-s { position: relative; overflow: hidden; text-align: center; }
.cta-s::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 75% at 50% 50%, rgba(124,255,80,.1) 0%, transparent 65%); pointer-events: none; }
.cta-panda, .cta-avo { position: absolute; opacity: .12; pointer-events: none; }
.cta-panda { left: 2%; top: 50%; transform: translateY(-50%); height: 220px; animation: flt 5s ease-in-out infinite; }
.cta-avo   { right: 2%; top: 50%; transform: translateY(-50%); height: 200px; animation: flt 6s ease-in-out infinite .8s; }
.cta-form { display: flex; gap: 10px; max-width: 490px; margin: 0 auto 12px; justify-content: center; }
.cta-in { flex: 1; background: rgba(255,255,255,.05); border: 1.5px solid var(--bd); border-radius: 14px; padding: 14px 18px; color: var(--wh); font-family: 'DM Sans', sans-serif; font-size: 15px; outline: none; transition: border-color .2s; }
.cta-in:focus { border-color: var(--g); }
.cta-in::placeholder { color: var(--gr2); }
.cta-note { font-size: 12px; color: var(--gr2); }

/* =========================================
   FOOTER & MODAL
   ========================================= */
.footer { border-top: 1px solid rgba(124,255,80,.08); padding: 64px 48px 28px; max-width: 1240px; margin: 0 auto; }
.ft-g { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.ft-brand p { font-size: 13px; color: var(--gr); margin-top: 13px; line-height: 1.75; max-width: 250px; }
.ft-logo { display: inline-flex; filter: drop-shadow(0 0 10px rgba(124,255,80,.3)); transition: filter .3s; }
.ft-logo:hover { filter: drop-shadow(0 0 20px rgba(124,255,80,.6)); }
.ft-col h5 { font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 15px; color: var(--wh); }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ft-col a { color: var(--gr); font-size: 13px; text-decoration: none; transition: color .2s; }
.ft-col a:hover { color: var(--g); }
.ft-btm { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(124,255,80,.07); font-size: 13px; color: var(--gr); }
.ft-soc { display: flex; gap: 9px; }
.soc-btn { width: 36px; height: 36px; border: 1px solid var(--bd); border-radius: 9px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: var(--tr); color: var(--gr); background: var(--card); font-size: 14px; }
.soc-btn:hover { border-color: var(--g); color: var(--g); transform: translateY(-2px); }
.ft-soc .soc-btn:last-child { display: flex; }

.modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(14px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-ov.open { display: flex; }
.modal-b { background: #080808; border: 1px solid rgba(124,255,80,.28); border-radius: 24px; padding: 40px; max-width: 510px; width: 100%; position: relative; box-shadow: 0 60px 120px rgba(0,0,0,.7), 0 0 60px rgba(124,255,80,.08); animation: mIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes mIn { from{opacity:0;transform:scale(.95) translateY(8px)} to{opacity:1;transform:none} }
.modal-x { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--bd); color: var(--gr); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: var(--tr); }
.modal-x:hover { border-color: var(--g); color: var(--g); }
.modal-t { font-family: 'Sora', sans-serif; font-size: 25px; font-weight: 900; margin-bottom: 6px; }
.modal-s { font-size: 14px; color: var(--gr); margin-bottom: 22px; line-height: 1.6; }
.fg { margin-bottom: 12px; }
.fg label { display: block; font-family: 'Sora', sans-serif; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--wh); }
.fg input, .fg select, .fg textarea { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(124,255,80,.12); border-radius: 10px; padding: 11px 14px; color: var(--wh); font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; transition: border-color .2s; resize: none; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--g); }
.fg select option { background: #080808; }
.modal-sub { width: 100%; padding: 14px; border-radius: 14px; border: none; cursor: pointer; margin-top: 5px; background: var(--g); color: #050505; font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800; transition: var(--tr); animation: btnGlow 2.5s ease-in-out infinite; }
.modal-sub:hover { animation: none; background: #8fff5e; box-shadow: 0 10px 36px rgba(124,255,80,.45); }

/* WA Float animation */
@keyframes waFloat {
  0%,100%{transform:translateY(0) scale(1);box-shadow:0 6px 24px rgba(37,211,102,.5)}
  50%{transform:translateY(-5px) scale(1.04);box-shadow:0 12px 32px rgba(37,211,102,.65)}
}
/* OVERLAY */
.modal-ov {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* taşma fix */
  overflow-y: auto;
  padding: 20px;
}

.modal-ov.open {
  display: flex;
}

/* MODAL BOX */
.modal-b {
  background: #080808;
  border-radius: 20px;
  padding: 30px;
  max-width: 500px;
  width: 100%;

  /* 🔥 EN KRİTİK */
  max-height: 90vh;
  overflow-y: auto;

  /* görünüm */
  box-shadow: 0 30px 80px rgba(0,0,0,.7),
              0 0 30px rgba(124,255,80,.08);

  animation: modalIn .3s ease;
}

/* SCROLLBAR (PREMIUM) */
.modal-b::-webkit-scrollbar {
  width: 6px;
}

.modal-b::-webkit-scrollbar-thumb {
  background: rgba(124,255,80,.4);
  border-radius: 10px;
}

.modal-b::-webkit-scrollbar-track {
  background: transparent;
}

/* ANIMATION */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.9) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* MOBİL OPTİMİZASYON */
@media (max-width: 768px) {

  .modal-ov {
    padding: 10px;
  }

  .modal-b {
    padding: 20px;
    max-height: 85vh;
    border-radius: 16px;
  }

}
/* =========================================
   RESPONSIVE & MOBILE FIXES (CONSOLIDATED)
   ========================================= */

@media(max-width: 1100px) {
  .hero-inner, .ai-layout, .bayi-g { grid-template-columns: 1fr; }
  .svc-g { grid-template-columns: 1fr 1fr; }
  .prc-g { grid-template-columns: 1fr; }
  .p-card.hot { transform: none; }
  .p-card.hot:hover { transform: translateY(-5px); }
  .cases-g { grid-template-columns: 1fr; }
  .testi-g { grid-template-columns: 1fr; }
  .ft-g { grid-template-columns: 1fr 1fr; }
  .stats-g { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {

  /* ===== GENEL ===== */
  .W { padding: 0 18px !important; }
  .SP { padding: 64px 0 !important; }
  .sh2 { font-size: clamp(26px,7vw,38px); letter-spacing: -.03em; }
  .sh2.big { font-size: clamp(30px,8vw,44px); }
  .sp { font-size: 15px; }

  /* ===== NAV ===== */
  .nav-inner { padding: 0 18px !important; }
  .nav-links, .nav-pill { display: none !important; }
  .nav-ham { display: block; }

  /* ===== HERO ===== */
  .hero {
    padding-top: 90px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

 .hero-inner {
    display: flex !important;
    flex-direction: column !important;
  }

.hero-right {
    position: relative !important;   /* 💣 absolute iptal */
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;      /* 💣 kayma iptal */
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    margin: 0 auto 10px !important;
  }
  .hero-left {
    order: 1 !important;
  }

  .hero-cta {
    order: 3 !important;
  }

  .hero-stats {
    order: 4 !important;
  }


  /* 🔥 SIRALAMA (KESİN) */
  .hero-left {
    display: contents; /* 💣 SİHİR BURDA */
  }

   .hero-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    max-width: 520px;
  }

  .hero-cta {
    order: 3 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .hero-cta .btn-p,
  .hero-cta .btn-o {
    width: 100% !important;
    justify-content: center !important;
  }

  .hero-stats {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  /* ===== PANDA ===== */
  .char-stage {
    margin: 0 auto !important;
    transform: none !important;
  }

  .char-panda {
    width: 75% !important;
  }

  .char-avo {
    width: 55% !important;
  }

  /* FLOAT CHIP */
  .mchip {
    transform: scale(0.8);
  }

  .mchip-1 { top: 0; right: -6px !important; }
  .mchip-2 { bottom: 28%; left: -6px !important; }
  .mchip-3 { bottom: 0; right: 10% !important; }

  /* TEXT */
  .hero-title { font-size: clamp(32px,8vw,50px) !important; }
  .hero-sub { font-size: 15px !important; }

  /* BUTTON */
  .hero-cta .btn-p,
  .hero-cta .btn-o {
    width: 100% !important;
    justify-content: center !important;
  }

  /* STAT TEXT */
  .hero-stat-num { font-size: 18px !important; }
  .hero-stat-lbl { font-size: 10px !important; }
	
  /* Komponentler */
  .ticker-item { padding: 0 12px; font-size: 11px; gap: 7px; }
  .stats-g { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .stat-val { font-size: 36px; }
  .stat-card { padding: 20px 14px; }
  
  .live-bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 18px; }
  .live-r { width: 100%; justify-content: space-between; }
  .live-cta { flex: 1; text-align: center; align-items: center; }
  
  .svc-g, .perks-g, .bayi-g, .cases-g, .testi-g { grid-template-columns: 1fr !important; }
  .bayi-g { gap: 36px !important; }
  .ptog-w { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .p-amt { font-size: 36px !important; }
  
  /* Roadmap Mobil Düzeltmeleri */
  .roadmap-track, #rm-track { flex-direction: column !important; align-items: stretch !important; }
  .rm-step { flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; width: 100%; }
  .rm-card { text-align: left !important; }
  .rm-connector { margin-top: 0 !important; margin-left: 35px !important; width: auto !important; height: 36px !important; flex-direction: column !important; }
  .rm-line { width: 1.5px !important; height: auto !important; flex: 1 !important; background: linear-gradient(180deg, rgba(124,255,80,.35), rgba(124,255,80,.1)) !important; }
  .rm-dots { flex-direction: column !important; }

  /* Karşılaştırma Tablosu (Compare) - Yana Kaydırma */
  #compare { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #compare table { min-width: 580px; }
  #compare .W > div[style*="border-radius:20px"] { border-radius: 14px; }

  /* Alt Kısımlar */
  .cta-form { flex-direction: column; padding: 0 8px; }
  .cta-panda, .cta-avo { display: none; }
  .footer { padding: 52px 18px 26px; }
  .ft-g { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ft-btm { flex-direction: column !important; gap: 14px !important; text-align: center !important; }
  .chat-msgs { min-height: 260px; max-height: 300px; }
  .modal-b { padding: 26px 18px; }
  .trust-r { gap: 8px; }
  .trust-badge { font-size: 12px; padding: 8px 12px; }
  
  /* Genel Inline Style Ezicileri (Mevcut HTML yapınız için güvenlik önlemi) */
  section[style*="padding:80px 0 72px"] > .W > div[style*="display:flex;flex-direction:row"] { flex-direction: column !important; align-items: stretch !important; }
  div[style*="margin-top:35px"] { flex-direction: column !important; margin-top: 0 !important; margin-left: 36px !important; height: 32px !important; width: auto !important; }
  div[style*="margin-top:35px"] > div[style*="height:1.5px"] { width: 1.5px !important; height: auto !important; flex: 1 !important; background: linear-gradient(180deg, rgba(124,255,80,.4), rgba(124,255,80,.1)) !important; }
  div[style*="flex:1;min-width:0;display:flex;flex-direction:column;align-items:center"] { flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; }
  div[style*="background:rgba(10,12,10,.93);border:1px solid rgba(124,255,80,.13);border-radius:16px;padding:18px;text-align:center"] { text-align: left !important; }
  a[href*="wa.me"][style*="position:fixed"] { right: 14px !important; bottom: 20px !important; }
}

@media(max-width: 600px) {
  .rm-stats { flex-wrap: wrap; }
  .rm-stat { min-width: 50%; }
  .rm-stat-sep { display: none; }
  .rm-stat-val { font-size: 30px; }
}

@media(max-width: 480px) {
  .char-stage { max-width: 240px !important; }
  .mchip { display: none !important; }
  .char-panda { width: 75% !important; }
  .char-avo { width: 55% !important; }
  
  .hero-title { font-size: clamp(36px, 9vw, 56px) !important; }
  .prc-g { grid-template-columns: 1fr !important; }
  .p-card.hot { transform: none !important; }
  
  #compare .W > div[style*="display:flex;gap:10px"] { flex-direction: column !important; align-items: stretch !important; }
  #compare .W > div[style*="display:flex;gap:10px"] > a { text-align: center !important; }
  
  .trust-r { flex-wrap: wrap !important; gap: 8px !important; }
  .modal-b { padding: 24px 16px !important; }
  
  div[style*="font-size:14px;font-weight:800;margin-bottom:7px"] { font-size: 13px !important; }
  div[style*="font-size:12.5px;color:#8a9a8a;line-height:1.6"] { font-size: 12px !important; }
  
  a[href*="wa.me"] { width: 52px !important; height: 52px !important; bottom: 20px !important; right: 20px !important; font-size: 22px !important; }
}

@media(max-width: 420px) {
  .nav-cta-avo-img { width: 26px !important; height: 26px !important; }
}

@media(max-width: 360px) {
  a[onclick*="openModal"] > span[style*="nav-cta-inner"] > span[style*="nav-cta-label"] { display: none !important; }
}


/* Panda Sütunundaki (2. Sütun) Tüm Gizli Yeşilleri Sil ve Doğal Satır Rengini Göster */
table col:nth-child(2),
table th:nth-child(2),
table td:nth-child(2) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Footer Sosyal Medya Butonlarını Kusursuz Eşitle */
.soc-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
/* DESKTOP: panda sağ tarafa geri dönsün */
@media (min-width: 769px) {

  .hero-inner {
    display: grid !important;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }

  .hero-left {
    grid-column: 1;
  }

  .hero-right {
    grid-column: 2;
    justify-content: flex-end;
  }

}
/* default */
.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

/* mobile */
@media (max-width: 768px) {

  .desktop-only {
    display: none !important; /* 💣 bunu öldürüyoruz */
  }

  .mobile-only {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

}

.ic i {
  width: 38px;
  height: 38px;

  stroke: #7cff50;
  stroke-width: 2.2;

  filter: drop-shadow(0 0 6px rgba(124,255,80,0.7));
  transition: all 0.3s ease;
}

.ic {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ic:hover i {
  transform: scale(1.15) rotate(3deg);
  filter: drop-shadow(0 0 12px rgba(124,255,80,1));
}

.ticker-item .ic {
  width: 28px;
  height: 28px;
  min-width: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: rgba(124,255,80,0.06);
  border: 1px solid rgba(124,255,80,0.15);

  backdrop-filter: blur(6px);

  transition: all 0.3s ease;
}

.ticker-item .ic i {
  width: 18px;
  height: 18px;

  stroke: #7cff50;
  stroke-width: 2;

  filter: drop-shadow(0 0 4px rgba(124,255,80,0.7));
}

.ticker-item:hover .ic {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(124,255,80,0.3);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(circle at 60% 40%, rgba(124,255,80,0.06), transparent 70%);
  
  filter: blur(80px);
  opacity: 0.7;
  pointer-events: none;
}

.about-modal {
  position: fixed;
  inset: 0;
  background: rgba(5,10,5,0.75);

  backdrop-filter: blur(30px);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;

  z-index: 9999;
}

.about-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* CONTENT */
.about-content {
  position: relative;
  width: 92%;
  max-width: 950px;

  padding: 60px;

  border-radius: 28px;

  background: linear-gradient(
    145deg,
    rgba(15,20,15,0.95),
    rgba(10,12,10,0.9)
  );

  border: 1px solid rgba(124,255,80,0.15);

  box-shadow:
    0 0 80px rgba(124,255,80,0.12),
    inset 0 0 40px rgba(124,255,80,0.05);

  transform: translateY(60px) scale(0.92);
  transition: all 0.5s cubic-bezier(.16,1,.3,1);
}

.about-modal.active .about-content {
  transform: translateY(0) scale(1);
}

/* glow layer */
.about-glow {
  position: absolute;
  inset: -100px;

  background: radial-gradient(circle at 70% 30%, rgba(124,255,80,0.15), transparent 70%);
  filter: blur(120px);
  opacity: 0.7;
  pointer-events: none;
}

/* CLOSE */
.about-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.5;
  transition: .3s;
}

.about-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* TEXT */
.about-content h1 {
  font-size: 34px;
  font-weight: 800;
}

.about-content h1 span {
  color: #7cff50;
  text-shadow: 0 0 20px rgba(124,255,80,0.5);
}

.about-desc {
  margin: 18px 0 35px;
  color: #8a9a8a;
  line-height: 1.6;
}

/* GRID */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 35px;
}

/* STATS */
.stat-box {
  padding: 18px;
  border-radius: 16px;

  background: rgba(124,255,80,0.05);
  border: 1px solid rgba(124,255,80,0.2);

  margin-bottom: 15px;

  transition: all .3s;
}

.stat-box:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 0 25px rgba(124,255,80,0.2);
}

.stat-box strong {
  font-size: 30px;
  color: #7cff50;
  display: block;
}

.stat-box span {
  font-size: 12px;
  color: #8a9a8a;
}

/* BUTTON */
.about-btn {
  margin-top: 35px;
  padding: 16px 32px;

  border-radius: 30px;
  border: none;

  background: linear-gradient(90deg, #7cff50, #4dff88);
  color: #000;

  font-weight: 700;
  cursor: pointer;

  box-shadow: 0 0 20px rgba(124,255,80,0.4);

  transition: all .3s;
}

.about-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(124,255,80,0.7);
}

/* ANIMATION */
.fadeUp {
  opacity: 0;
  transform: translateY(25px);
}

.about-modal.active .fadeUp {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease;
}

.delay1 { transition-delay: 0.1s }
.delay2 { transition-delay: 0.2s }
.delay3 { transition-delay: 0.3s }
.delay4 { transition-delay: 0.4s }