/* ========== Variables & Base ========= */
:root{
  --bg-1:#0C0B09;
  --bg-2:#0F0E0C;
  --text:#ECE8E3;
  --text-2:#B8B1A8;
  --gold-1:#F4D58A;
  --gold-2:#E0B96A;
  --gold-3:#9F7C36;
  --gold-4:#5A4621;
  --glass-border: rgba(255,255,255,.16);
  --radius:14px;
  --container: min(1180px, 90vw);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.35);
  --header-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #1C1A16 0%, var(--bg-2) 40%) , var(--bg-1);
  line-height:1.6;
}

.container{width:var(--container); margin-inline:auto; padding-inline:clamp(16px,5vw,32px)}

a{color:inherit; text-decoration:none}
a:hover{color:var(--text)}
img{max-width:100%; height:auto; display:block}

/* ====== Header ====== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px) saturate(130%);
  background: linear-gradient(180deg, rgba(15,14,12,0.75) 0%, rgba(15,14,12,0.55) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; 
  height:var(--header-h);
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:38px; height:38px}
.brand-name{font-weight:800; letter-spacing:-0.02em}
.nav{display:flex; align-items:center; gap:28px}
.nav a{color:var(--text-2)}
.nav a:hover, .nav a:focus{color:var(--text)}
.btn-telegram{
  padding:.65rem 1rem; border-radius:999px; border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(244,213,138,.12), rgba(159,124,54,.08));
}

/* ====== Hero ====== */
.hero{
  position:relative; isolation:isolate;
  padding: clamp(48px, 7vw, 88px) 0 72px;
  overflow:hidden;
}
/* animated gradient swirl background */
.hero::before{
  content:""; position:absolute; inset:-10% -10% -10% -10%; z-index:-1;
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(244,213,138,.15), transparent 60%),
    radial-gradient(50% 50% at 80% 20%, rgba(224,185,106,.12), transparent 60%),
    conic-gradient(from 180deg at 50% 50%, rgba(244,213,138,.06), rgba(159,124,54,.02), rgba(224,185,106,.07), rgba(90,70,33,.02), rgba(244,213,138,.06));
  transform-origin: 50% 40%;
  animation: swirl 18s ease-in-out infinite alternate;
}
@keyframes swirl { 
  0%{ transform: scale(1) rotate(0deg) } 
  100%{ transform: scale(1.06) rotate(2.5deg) } 
}

.hero-grid{display:grid; grid-template-columns: 1.12fr .88fr; gap:42px; align-items:center}
.badge{display:inline-flex; gap:.5rem; align-items:center; font-weight:600; font-size:.9rem; color:var(--text-2);
  padding:.4rem .7rem; border:1px solid var(--glass-border); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
h1{font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.12; margin:.8rem 0 1rem; letter-spacing:-0.02em; font-weight:800}
.lead{color:var(--text-2); font-size: clamp(1rem, 1.5vw, 1.15rem)}
.cta{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}

.gold-text{
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size: 200% 200%;
  animation: goldshift 9s ease-in-out infinite;
}
@keyframes goldshift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.9rem 1.25rem; border-radius:var(--radius);
  font-weight:800; letter-spacing:-.01em; cursor:pointer; border:0; outline:none;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  color:#1a1206; box-shadow: var(--shadow-soft); transform: translateZ(0);
  transition: transform .2s ease, opacity .2s ease;
  overflow:hidden; /* clip shimmer strictly inside */
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(75deg, transparent 20%, rgba(255,255,255,.55) 40%, transparent 60%);
  transform: translateX(-120%); 
  transition: transform .55s ease, opacity .2s ease;
  opacity:0; mix-blend-mode:screen; filter: blur(1.5px);
}
.btn:hover::after{ transform: translateX(140%); opacity:.85 }
.btn--ghost{
  background: transparent; color:var(--text);
  border:1px solid var(--glass-border); box-shadow:none;
}
.btn--ghost:hover{ background: rgba(255,255,255,.06) }

/* glass panels */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow);
}
.panel{
  padding:clamp(18px, 2.6vw, 26px);
}

/* micro badges row */
.micro{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.micro .pill{font-size:.86rem; color:var(--text-2); padding:.38rem .6rem; border:1px solid var(--glass-border); border-radius:999px}

/* ========== Sections common ========= */
section{padding: clamp(54px, 7vw, 88px) 0}
.section-title{font-size: clamp(1.6rem, 3vw, 2rem); margin:0 0 22px; letter-spacing:-.01em}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px}
.grid-2{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start}

.card{padding:22px}
.card h3{margin:.2rem 0 10px; font-size:1.2rem}
.card ul{margin:0; padding-left:1.1rem; color:var(--text-2)}
.card li{margin:.4rem 0}

/* hover lift */
.lift{ transition: transform .25s ease, box-shadow .25s ease }
.lift:hover{ transform: translateY(-2px) }

/* Pricing */
.card--highlight{ 
  border-color: rgba(244,213,138,.3);
  box-shadow: 0 0 0 1px rgba(244,213,138,.25), var(--shadow);
}
.price-actions{ margin-top:16px }

/* About */
.about .panel ul{margin:0; padding-left:1rem}
.about .panel li{margin:.5rem 0}

/* Contact / form */
.form{
  display:grid; gap:12px;
}
.input, .textarea{
  width:100%; background: rgba(255,255,255,.05); border:1px solid var(--glass-border); color:var(--text);
  border-radius:12px; padding:12px 14px; outline:none;
}
.input:focus, .textarea:focus{ border-color: rgba(244,213,138,.35) }
.small{ color:var(--text-2); font-size:.9rem }

/* Footer */
.footer{ 
  border-top:1px solid rgba(255,255,255,.08);
  opacity:.85; padding:22px 0;
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer img{width:28px; height:28px}

/* Reveal animation */
.reveal{ opacity:1; transform:none; }
.reveal.visible{ opacity:1; transform:none }

/* Focus-visible */
:where(a,button,.btn, .input, .textarea){ outline: none }
:where(a,button,.btn, .input, .textarea):focus-visible{
  box-shadow: 0 0 0 2px rgba(244,213,138,.45), 0 0 0 4px rgba(244,213,138,.15);
}

/* Responsive */
@media (max-width: 930px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .nav{ display:none } /* simple mobile first; could add burger if needed */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::before, .gold-text, .btn::after, .reveal{ opacity:1; transform:none; }
}


/* ===== Upgrades: aurora backgrounds, richer glass, universal hover-glow ===== */
.aurora{
  position:relative; isolation:isolate; overflow:hidden;
}
.aurora::after{
  content:""; position:absolute; inset:-30% -10% -10% -10%; z-index:-1;
  background:
    radial-gradient(40% 60% at 10% 10%, rgba(244,213,138,.14), transparent 70%),
    radial-gradient(40% 60% at 90% 20%, rgba(224,185,106,.12), transparent 70%),
    radial-gradient(30% 40% at 20% 90%, rgba(159,124,54,.10), transparent 70%),
    conic-gradient(from 140deg at 60% 40%, rgba(244,213,138,.08), rgba(159,124,54,.04), rgba(224,185,106,.09), rgba(90,70,33,.03), rgba(244,213,138,.08));
  filter: blur(18px) saturate(120%);
  animation: auroraShift 22s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform: scale(1) rotate(0.5deg) }
  100%{ transform: scale(1.08) rotate(-2deg) }
}

.glass{
  position:relative;
}
.glass::before{
  /* inner highlight for liquid glass */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(180px 140px at 10% 0%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(180px 140px at 90% 100%, rgba(244,213,138,.10), transparent 60%);
  mix-blend-mode:screen; opacity:.9;
}

.hover-glow{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease }
.hover-glow:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(244,213,138,.25), 0 0 42px rgba(244,213,138,.18);
  border-color: rgba(244,213,138,.28);
}

/* Pricing visual: price tags, ribbon for popular */
.price{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight:800; letter-spacing:-.01em; margin:.4rem 0 }
.per{ color: var(--text-2); font-size:.95rem }
.ribbon{
  position:absolute; top:12px; right:-10px; transform: rotate(2deg);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color:#1a1206; font-weight:800; padding:.28rem .6rem; border-radius:8px; box-shadow: var(--shadow-soft);
}

/* Benefit chips */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{padding:.5rem .7rem; border-radius:999px; border:1px solid var(--glass-border); background:rgba(255,255,255,.04); color:var(--text-2)}

/* Mobile menu */
.menu-toggle{ display:none; appearance:none; background:transparent; border:1px solid var(--glass-border); color:var(--text); padding:.45rem .6rem; border-radius:10px }
@media (max-width: 930px){
  .menu-toggle{ display:inline-flex; align-items:center; gap:.5rem }
  .nav{ display:none; position:fixed; inset:auto 0 0 0; top:var(--header-h); padding:16px; background:rgba(15,14,12,.92); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.08); flex-direction:column; gap:16px }
  .nav.open{ display:flex }
}

/* Slightly larger cards text and spacing for premium feel */
.card h3{ font-size:1.22rem }
.card ul{ font-size:1rem }


/* ===== Cases ===== */
.cases-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px }
.case-card{
  position:relative; min-height:320px; overflow:hidden;
  background-size:cover; background-position:center;
}
.case-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,11,9,.1), rgba(12,11,9,.55));
}
.case-body{ position:absolute; inset:auto 0 0 0; padding:18px 20px; z-index:1 }
.metrics{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px }
.metric{ background: rgba(255,255,255,.06); border:1px solid var(--glass-border); border-radius:10px; padding:10px }
.metric .num{ font-size:1.2rem; font-weight:800;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metric .cap{ color:var(--text-2); font-size:.9rem }
.case-tags{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap }
.case-tags .pill{ opacity:.9 }

@media (max-width: 930px){
  .cases-grid{ grid-template-columns: 1fr }
  .metrics{ grid-template-columns: 1fr 1fr }
}

/* ===== FAQ (accordion via <details>) ===== */
.faq details{ margin:10px 0 }
.faq summary{
  list-style:none; cursor:pointer; padding:14px 16px; border-radius:12px;
  border:1px solid var(--glass-border); background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600;
}
.faq summary::after{
  content:"+"; color:var(--text-2); font-weight:800; transition: transform .2s;
}
.faq details[open] summary::after{ content:"—"; transform: rotate(180deg) }
.faq .answer{ padding:12px 16px 2px 16px; color:var(--text-2) }


/* Case logos & screenshot button */
.case-top{ position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:8px }
.case-logo{ width:92px; height:auto; border-radius:10px; border:1px solid var(--glass-border) }
.shot-btn{
  margin-top:10px; display:inline-flex; align-items:center; gap:.5rem; 
  padding:.5rem .7rem; border-radius:10px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.06); color:var(--text);
  transition: transform .2s ease, background .2s ease;
}
.shot-btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.08) }

/* Lightbox */
#lightbox{
  position: fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.65); z-index:100;
  opacity:0; transition: opacity .25s ease;
}
#lightbox.open{ display:flex; opacity:1 }
#lightbox img{ max-width:92vw; max-height:86vh; border-radius:12px; border:1px solid var(--glass-border); box-shadow: var(--shadow) }
#lightbox .close{ position:absolute; top:18px; right:18px; padding:.4rem .6rem; border-radius:8px; border:1px solid var(--glass-border); background:rgba(255,255,255,.08) }


/* No-JS fallback: keep content visible */
.no-js .reveal{ opacity:1; transform:none; }