/* ═══════════════════════════════════════════════════════════════
   KILAT.SHOP CLONE — LICENSE SYSTEM LANDING
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#09090d; --bg2:#111116; --bg3:#18181f; --bg4:#1f1f2a;
  --border:#1e1e28; --border2:#2a2a38;
  --text:#f0f0f5; --text2:#9090a8; --text3:#505068;
  --accent:#00c853; --accent2:#00e676; --accent3:#69f0ae;
  --accent-dim:rgba(0,200,83,.12);
  --green:#00c853; --green-dim:rgba(0,200,83,.12);
  --red:#ff5252; --amber:#ffb300; --blue:#448aff;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --transition:.15s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::selection{background:rgba(0,200,83,.2)}

/* ── ANIMATIONS ── */
.animate-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.animate-on-scroll.d1{transition-delay:.08s}.animate-on-scroll.d2{transition-delay:.16s}
.animate-on-scroll.d3{transition-delay:.24s}.animate-on-scroll.d4{transition-delay:.32s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes slideDown{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,13,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:16px;
}
.logo{
  display:flex;align-items:center;gap:7px;
  font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--text);
  text-decoration:none;
}
.logo:hover{text-decoration:none}
.logo .bolt{color:var(--accent);font-size:22px}
.logo .shop{color:var(--text2);font-weight:600;font-size:16px}
.topbar-center{
  display:flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:99px;
  background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.25);
  font-size:12px;font-weight:700;color:#ffb300;
  animation:pulse 2s ease-in-out infinite;
}
.topbar-center::before{content:'🔥'}
.topbar-links{
  display:flex;align-items:center;gap:2px;
  font-size:14px;font-weight:500;
}
.topbar-links a{padding:7px 12px;border-radius:6px;color:var(--text2);transition:background var(--transition),color var(--transition)}
.topbar-links a:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.topbar-links .active{color:var(--accent)}
.topbar-right{display:flex;align-items:center;gap:8px}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:all var(--transition);
  font-family:var(--font);white-space:nowrap;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-p{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}
.btn-p:hover{background:#00e676}
.btn-g{background:transparent;color:var(--text2);border-color:var(--border2)}
.btn-g:hover{border-color:rgba(255,255,255,.2);color:var(--text);background:rgba(255,255,255,.05)}
.btn-g:hover{text-decoration:none}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:12px 28px;font-size:16px;border-radius:var(--radius)}

/* ═══════════════════════════════════════════════════════════════
   WRAPPERS
   ═══════════════════════════════════════════════════════════════ */
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.divider{height:1px;background:var(--border)}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero{
  padding:88px 0 64px;text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -5%,rgba(0,200,83,.18) 0%,transparent 65%),
    radial-gradient(ellipse 50% 35% at 85% 10%,rgba(0,230,118,.08) 0%,transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 30%,rgba(0,200,83,.3),transparent),
    radial-gradient(1px 1px at 78% 12%,rgba(0,230,118,.3),transparent),
    radial-gradient(1px 1px at 88% 52%,rgba(0,200,83,.25),transparent),
    radial-gradient(1px 1px at 22% 72%,rgba(0,230,118,.25),transparent),
    radial-gradient(1px 1px at 60% 88%,rgba(0,200,83,.2),transparent),
    radial-gradient(1px 1px at 45% 40%,rgba(0,230,118,.2),transparent);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1}
.hero h1{
  font-size:clamp(30px,5vw,52px);line-height:1.12;
  letter-spacing:-2px;font-weight:800;
  margin-bottom:16px;
  animation:fadeUp .6s ease .1s both;
}
.hero h1 .sub{color:var(--text2);font-weight:700;letter-spacing:-1px}
.hero p{
  font-size:17px;color:var(--text2);max-width:520px;
  margin:0 auto 32px;line-height:1.7;
  animation:fadeUp .6s ease .22s both;
}
.hero-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;animation:fadeUp .6s ease .34s both}

/* ═══════════════════════════════════════════════════════════════
   BRAND PILLS
   ═══════════════════════════════════════════════════════════════ */
.brands{padding:36px 0}
.brands-inner{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;
}
.brand-pill{
  display:flex;align-items:center;gap:5px;
  padding:7px 14px;border:1px solid var(--border);border-radius:99px;
  font-size:13px;font-weight:600;color:var(--text2);
  background:var(--bg2);
  transition:border-color var(--transition),color var(--transition);
}
.brand-pill:hover{border-color:var(--accent);color:var(--accent)}
.brand-pill .icon{font-size:15px}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════ */
.section-label{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:99px;
  background:rgba(0,200,83,.08);border:1px solid rgba(0,200,83,.2);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--accent);margin-bottom:14px;
}
.section-head{text-align:center;margin-bottom:48px}
.section-head h2{
  font-size:clamp(22px,3vw,34px);letter-spacing:-1.5px;font-weight:800;
  margin-bottom:10px;
}
.section-head p{color:var(--text2);font-size:16px}

/* ═══════════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════════ */
.features{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:40px}
@media(max-width:900px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.f-grid{grid-template-columns:1fr}}
.f-card{
  background:var(--bg2);padding:28px 22px;text-align:center;
  transition:background var(--transition);
}
.f-card:hover{background:#0d0d14}
.f-card .ficon{
  width:52px;height:52px;border-radius:14px;
  background:var(--accent-dim);border:1px solid rgba(0,200,83,.2);
  display:grid;place-items:center;margin:0 auto 14px;
  font-size:24px;
}
.f-card:hover .ficon{border-color:rgba(0,200,83,.4);background:rgba(0,200,83,.15)}
.f-card h3{font-size:15px;font-weight:700;margin-bottom:8px}
.f-card p{font-size:13px;color:var(--text2);line-height:1.65}

/* ═══════════════════════════════════════════════════════════════
   TRUST BADGES
   ═══════════════════════════════════════════════════════════════ */
.trust-badges{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:40px;
}
.trust-badge{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;border:1px solid var(--border);border-radius:99px;
  font-size:13px;font-weight:600;color:var(--text2);background:var(--bg2);
  transition:border-color var(--transition),color var(--transition);
}
.trust-badge:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 20px;text-align:center;
}
.stat-card .num{font-size:34px;font-weight:800;letter-spacing:-2px;color:var(--accent);margin-bottom:4px}
.stat-card .lbl{font-size:13px;color:var(--text3);font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:40px}
.testi-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;transition:border-color var(--transition),transform .2s;
}
.testi-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.testi-stars{color:#ffb300;font-size:13px;letter-spacing:2px;margin-bottom:10px}
.testi-time{font-size:11px;color:var(--text3);margin-bottom:8px}
.testi-text{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:14px;font-style:italic}
.testi-text::before{content:'"'}
.testi-text::after{content:'"'}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-dim);border:1px solid rgba(0,200,83,.2);
  display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0;
}
.testi-name{font-size:13px;font-weight:700}
.testi-product{font-size:12px;color:var(--text3)}

/* ═══════════════════════════════════════════════════════════════
   RESELLER / CTA
   ═══════════════════════════════════════════════════════════════ */
.reseller{
  background:linear-gradient(135deg,#0a2910 0%,#0d3318 50%,#0a2910 100%);
  border-top:1px solid rgba(0,200,83,.15);border-bottom:1px solid rgba(0,200,83,.15);
  text-align:center;
}
.reseller-inner{max-width:620px;margin:0 auto}
.reseller .section-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:99px;
  background:rgba(0,200,83,.12);border:1px solid rgba(0,200,83,.3);
  font-size:12px;font-weight:700;color:var(--accent2);margin-bottom:18px;
}
.reseller h2{font-size:clamp(22px,3vw,34px);letter-spacing:-1.5px;font-weight:800;margin-bottom:12px}
.reseller p{color:rgba(255,255,255,.65);font-size:16px;line-height:1.7;margin-bottom:24px}
.reseller-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.reseller-tag{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:99px;
  background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.2);
  font-size:13px;font-weight:600;color:var(--accent3);
}

/* ═══════════════════════════════════════════════════════════════
   RECENT ORDERS
   ═══════════════════════════════════════════════════════════════ */
.recent-orders{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.orders-list{display:flex;flex-direction:column;gap:10px;margin-top:40px}
.order-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  font-size:14px;
  animation:slideDown .3s ease;
}
.order-item .icon{font-size:18px}
.order-item .text{flex:1;color:var(--text2)}
.order-item .text strong{color:var(--text)}
.order-item .product{color:var(--accent);font-weight:600}
.order-item .time{font-size:12px;color:var(--text3);white-space:nowrap}
.order-item .verified{color:var(--accent);font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   CODE BLOCK
   ═══════════════════════════════════════════════════════════════ */
.code{background:#080810;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-align:left}
.code-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.code-dots{display:flex;gap:5px}
.code-dots span{width:11px;height:11px;border-radius:50%}
.code-dots span:nth-child(1){background:#ff5f57}
.code-dots span:nth-child(2){background:#febc2e}
.code-dots span:nth-child(3){background:#28c840}
.code-lang{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-left:8px}
.code pre{padding:20px 22px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.75;color:#c9d1d9}
.code .c{color:#555580;font-style:italic}.code .s{color:#a5d6ff}.code .k{color:#ff7b72}.code .f{color:#82aaff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.lead{color:var(--text2);font-size:15px;line-height:1.75}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--border)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{margin-bottom:14px}
.footer-brand p{color:var(--text2);font-size:14px;line-height:1.7;max-width:280px}
.footer-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col li a{font-size:14px;color:var(--text2);transition:color var(--transition)}
.footer-col li a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;padding-top:24px;
  font-size:13px;color:var(--text3);
}
.footer-bottom a{color:var(--text3);transition:color var(--transition)}
.footer-bottom a:hover{color:var(--accent)}

/* ── LOADING BAR ── */
#load-bar{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#00c853,#00e676,#69f0ae);width:0;z-index:9999}
@keyframes load-grow{0%{width:0}60%{width:75%}80%{width:90%}100%{width:100%}}

/* ── MISC ── */
.text-accent{color:var(--accent)}.text-amber{color:#ffb300}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex{display:flex;align-items:center;gap:8px}.flex-wrap{flex-wrap:wrap}
.justify-center{justify-content:center}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
body{animation:pageIn .4s ease}
@media(max-width:768px){
  .topbar-center{display:none}
  .hero{padding:64px 0 48px}
}