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

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

:root{
  --gold: #f59e0b;
  --gold-light: #fde68a;
  --navy: #0d1a33;
  --bg: #040a1a;
  --green: #10b981;
  --green2: #059669;
}

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: #fff;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

/* ===== Aurora background ===== */
.aurora-wrap{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:9999px; animation: auroraMove 16s ease-in-out infinite; }
.blob1{ top:-15%; left:-10%; width:560px; height:560px; background:radial-gradient(circle, rgba(37,99,235,.45), transparent 70%); filter:blur(90px); }
.blob2{ top:15%; right:-15%; width:500px; height:500px; background:radial-gradient(circle, rgba(245,158,11,.3), transparent 70%); filter:blur(100px); animation-delay:4s; }
.blob3{ bottom:-10%; left:25%; width:560px; height:560px; background:radial-gradient(circle, rgba(34,211,238,.22), transparent 70%); filter:blur(110px); animation-delay:8s; }

@keyframes auroraMove{
  0%,100%{ transform:translate(0,0) scale(1) rotate(0deg); }
  33%{ transform:translate(60px,-50px) scale(1.15) rotate(8deg); }
  66%{ transform:translate(-40px,40px) scale(.9) rotate(-6deg); }
}

/* ===== Utility animations ===== */
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatySlow{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes glowPulse{ 0%,100%{box-shadow:0 0 25px 0 rgba(245,158,11,.35)} 50%{box-shadow:0 0 45px 8px rgba(245,158,11,.55)} }
@keyframes bounce2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes shine{ 0%{transform:translateX(-130%) skewX(-20deg)} 100%{transform:translateX(230%) skewX(-20deg)} }
@keyframes spinSlow{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes rippleAnim{ to{ transform:translate(-50%,-50%) scale(22); opacity:0; } }

.floaty{ animation: floaty 5s ease-in-out infinite; }
.floaty-slow{ animation: floatySlow 7s ease-in-out infinite; }
.glow-pulse{ animation: glowPulse 2.4s ease-in-out infinite; }
.bounce2{ animation: bounce2 1.6s ease-in-out infinite; }
.spin-slow{ animation: spinSlow 12s linear infinite; }
.fade-in{ animation: fadeIn .5s ease; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.shown{ opacity:1; transform:translateY(0); }

/* ===== Glass / gradient text ===== */
.glass{
  background:linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
}
.grad-text{
  background:linear-gradient(95deg,#fde68a,#facc15,#f0abfc,#facc15);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
}

.shine-sweep{ position:relative; overflow:hidden; }
.shine-sweep::after{
  content:""; position:absolute; top:0; left:0; width:35%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  animation:shine 3.2s ease-in-out infinite;
}

/* ===== Ripple ===== */
.ripple-host{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; width:10px; height:10px; border-radius:9999px;
  background:rgba(255,255,255,.55); transform:translate(-50%,-50%) scale(0);
  pointer-events:none; animation: rippleAnim .65s ease-out forwards;
}

/* ===== Layout helpers ===== */
.wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.wrap-md{ max-width:900px; margin:0 auto; padding:0 24px; }
.wrap-sm{ max-width:850px; margin:0 auto; padding:0 24px; }
.section{ padding: 0 0 110px; }
.center{ text-align:center; }
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,1fr); }
.grid-6{ grid-template-columns:repeat(2,1fr); }
@media(min-width:640px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-6{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(2,1fr);} .grid-6{ grid-template-columns:repeat(6,1fr);} }
@media(min-width:1024px){ .grid-3{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(4,1fr);} }

.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; } .gap-5{ gap:20px; } .gap-6{ gap:24px; }
.flex-wrap{ flex-wrap:wrap; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; border:none; cursor:pointer;
  border-radius:16px; padding:16px 32px; font-size:15px; transition:transform .25s cubic-bezier(.2,1,.3,1);
  color:#fff;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:var(--navy); }
.btn-green{ background:linear-gradient(135deg,var(--green),var(--green2)); }
.btn-sm{ padding:10px 18px; border-radius:12px; font-size:13px; }
.btn-xs{ padding:9px 14px; border-radius:10px; font-size:12px; justify-content:center; }
.magnetic{ display:inline-block; transition: transform .25s cubic-bezier(.2,1,.3,1); }

/* ===== Navbar ===== */
nav{ position:fixed; top:0; left:0; right:0; z-index:50; }
.nav-inner{ transition:all .4s ease; }
.nav-inner.scrolled{ margin:10px 16px 0; border-radius:20px; }
.nav-row{ max-width:1200px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; justify-content:space-between; }
.logo-badge{ width:38px; height:38px; border-radius:9999px; background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--navy); box-shadow:0 0 25px rgba(245,158,11,.4); }

/* ===== Tab bar (Telegram-folder style) ===== */
.tabbar-row{ display:flex; justify-content:center; margin-top:10px; }
.tabbar{ display:flex; gap:4px; padding:5px; border-radius:16px; overflow-x:auto; max-width:94vw; }
.tab-btn{
  display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; white-space:nowrap;
  padding:9px 18px; border-radius:12px; border:none; cursor:pointer; background:transparent; color:rgba(255,255,255,.6);
  transition: all .3s ease;
}
.tab-btn.active{ color:var(--navy); background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 6px 18px rgba(245,158,11,.4); }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ===== Cards ===== */
.card{ border-radius:24px; padding:28px; }
.card-tilt{ transform-style:preserve-3d; transition:transform .08s linear; }
.eyebrow{ display:inline-block; padding:8px 18px; border-radius:9999px; font-size:12px; font-weight:700; margin-bottom:20px; }
.section-head h2{ font-weight:800; font-size:clamp(2rem,4vw,3rem); }
.section-head p{ color:rgba(255,255,255,.5); font-size:14px; margin-top:12px; }

.plan-card{ border-radius:24px; padding:24px; height:100%; }
.plan-badge{ display:inline-block; font-size:11px; font-weight:700; padding:5px 10px; border-radius:9999px; margin-bottom:12px; }
.plan-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.plan-lines{ margin:16px 0 22px; display:flex; flex-direction:column; gap:8px; }
.plan-line{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:rgba(255,255,255,.65); }
.dot{ width:6px; height:6px; border-radius:9999px; margin-top:6px; flex-shrink:0; }

/* ===== Typography scale ===== */
h1{ font-weight:800; font-size:clamp(2.4rem,5.5vw,3.9rem); line-height:1.08; }
.text-xs{ font-size:12px; } .text-sm{ font-size:14px; } .text-lg{ font-size:18px; }
.font-bold{ font-weight:700; } .font-extrabold{ font-weight:800; }
.muted{ color:rgba(255,255,255,.5); }
.muted2{ color:rgba(255,255,255,.35); }
.gold-text{ color:#fcd34d; }

/* ===== Category pills ===== */
.pill{ padding:8px 16px; border-radius:12px; border:none; cursor:pointer; font-size:12px; font-weight:700;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.65); transition:all .25s ease; }
.pill.active{ color:var(--navy); background:linear-gradient(135deg,var(--gold-light),var(--gold)); }

/* ===== Calculator ===== */
input[type=range]{ width:100%; accent-color: var(--gold); }
.calc-result{ border-radius:20px; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* ===== Table ===== */
table{ width:100%; border-collapse:collapse; min-width:560px; font-size:14px; }
th{ text-align:left; padding:16px; }
td{ text-align:left; padding:16px; border-top:1px solid rgba(255,255,255,.08); }
.table-wrap{ border-radius:24px; overflow:hidden; overflow-x:auto; }

/* ===== FAQ ===== */
.faq-item{ border-radius:16px; overflow:hidden; margin-bottom:12px; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; text-align:left; padding:18px 20px;
  background:transparent; border:none; color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
.faq-a{ padding:0 20px 20px; color:rgba(255,255,255,.6); font-size:14px; line-height:1.6; display:none; }
.faq-a.open{ display:block; }

/* ===== Footer / floating ===== */
footer{ text-align:center; color:rgba(255,255,255,.35); font-size:12px; padding:30px 24px; border-top:1px solid rgba(255,255,255,.08); }
.fab{
  position:fixed; bottom:24px; right:24px; z-index:50; width:60px; height:60px; border-radius:9999px;
  background:linear-gradient(135deg,var(--green),var(--green2)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(16,185,129,.5); font-size:26px;
}
.fab-call{
  position:fixed; bottom:96px; right:24px; z-index:50; width:52px; height:52px; border-radius:9999px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(245,158,11,.5); font-size:22px; color:var(--navy);
}

.underline-anim{ position:relative; }
.underline-anim::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:#facc15; transition:width .3s ease; }
.underline-anim:hover::after{ width:100%; }

@media(max-width:639px){ .hide-sm{ display:none !important; } }
@media(max-width:767px){ .hide-xs{ display:none !important; } }

::-webkit-scrollbar{ height:6px; width:6px; }
::-webkit-scrollbar-thumb{ background:rgba(245,158,11,.4); border-radius:9999px; }

/* ===== Loader ===== */
#loader{
  position:fixed; inset:0; z-index:200; background:#040a1a; display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease;
}
.loader-badge{ width:70px; height:70px; border-radius:9999px; background:linear-gradient(135deg,#fde68a,#f59e0b);
  display:flex; align-items:center; justify-content:center; font-weight:900; color:#0d1a33; font-size:24px;
  animation: spinSlow 1.4s linear infinite, glowPulse 1.4s ease-in-out infinite; }

/* ===== Scroll progress ===== */
#progressBarWrap{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100; background:rgba(255,255,255,.06); }
#progressBar{ height:100%; width:0%; background:linear-gradient(90deg,#fde68a,#f59e0b); transition:width .1s linear; }

/* ===== Search ===== */
.search-wrap{ position:relative; }
.search-input-box{ display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:9999px; min-width:160px; }
.search-input-box input{ background:transparent; border:none; outline:none; color:#fff; font-family:inherit; font-size:13px; width:100%; }
.search-input-box input::placeholder{ color:rgba(255,255,255,.4); }
.search-results{
  display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; min-width:280px; z-index:60;
  background:#0b1730; border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:8px; max-height:360px; overflow-y:auto;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.search-group-label{ font-size:11px; font-weight:700; color:rgba(255,255,255,.4); padding:8px 10px 4px; text-transform:uppercase; }
.search-result-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; font-size:13px; cursor:pointer; }
.search-result-item:hover{ background:rgba(255,255,255,.06); }
.search-empty{ padding:16px; text-align:center; }

/* ===== Plan detail ===== */
.detail-row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08); }

/* ===== Contact form ===== */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:12px; font-weight:700; color:rgba(255,255,255,.55); margin-bottom:8px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-family:inherit; font-size:14px; outline:none; transition:border-color .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:#f59e0b; }
.form-field textarea{ resize:vertical; min-height:90px; }