/*
Theme Name:   KickThem
Theme URI:    https://example.com/kickthembot
Description:  KickThem landing site — paid Telegram access, managed automatically. Custom theme rendering the design exactly. Elementor-compatible: install Elementor to build additional pages visually.
Author:       simon007
Author URI:   https://example.com
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GPL v2 or later
Text Domain:  kickthembot
*/

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#C9A84C;
  --gold-light:#F0CF82;
  --gold-dark:#8B6914;
  --black:#0A0A0A;
  --charcoal:#111111;
  --card-bg:#161616;
  --card-border:#252018;
  --text:#F5F0E8;
  --muted:#8A7E6E;
  --dim:#4A4235;
  --white:#FFFFFF;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
.display{font-family:'Playfair Display',serif}

/* ─── NAV ─── */
nav.site-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;border-bottom:1px solid #181410;position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.96);backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--gold-light);text-decoration:none}
.logo-icon{width:48px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark{width:48px;height:34px;display:block;overflow:visible}
.logo-icon-sm{width:40px;height:28px}
.logo-icon-sm .logo-mark{width:40px;height:28px}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:400;transition:color .18s}
.nav-links a:hover{color:var(--gold-light)}
.nav-right{display:flex;gap:10px;align-items:center}
.btn-sm-outline{border:1px solid rgba(201,168,76,.35);color:var(--gold-light);padding:8px 18px;border-radius:6px;font-weight:500;font-size:13px;text-decoration:none;background:transparent;cursor:pointer;transition:all .18s}
.btn-sm-outline:hover{border-color:var(--gold);background:rgba(201,168,76,.06)}
.btn-sm-gold{background:var(--gold);color:#000;padding:8px 18px;border-radius:6px;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;transition:background .18s}
.btn-sm-gold:hover{background:var(--gold-light)}

/* ─── HERO ─── */
.hero{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 48px 56px;position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(201,168,76,.055) 0%,transparent 65%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#151008;border:1px solid #3D2E0A;border-radius:20px;padding:6px 16px;font-size:12px;color:var(--gold);margin-bottom:26px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(36px,5.5vw,70px);font-weight:900;line-height:1.08;max-width:840px;margin-bottom:20px;color:var(--white)}
.hero h1 em{color:var(--gold-light);font-style:normal}
.hero-sub{font-size:17px;color:var(--muted);max-width:560px;margin:0 auto 36px;font-weight:300;line-height:1.75}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-lg-gold{background:var(--gold);color:#000;padding:14px 32px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.02em;transition:all .18s;display:inline-block}
.btn-lg-gold:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn-lg-outline{border:1px solid rgba(201,168,76,.4);color:var(--gold-light);padding:14px 32px;border-radius:8px;font-weight:400;font-size:15px;text-decoration:none;background:transparent;transition:all .18s;display:inline-block}
.btn-lg-outline:hover{border-color:var(--gold);background:rgba(201,168,76,.06)}
.hero-visual{margin-top:56px;position:relative;display:flex;justify-content:center}
.stat-pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.stat-pill{background:#131009;border:1px solid #2A2010;border-radius:20px;padding:7px 16px;font-size:12px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.stat-pill strong{color:var(--gold-light);font-weight:600}

/* ─── SECTION BASE ─── */
section{padding:88px 48px}
.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);margin-bottom:12px}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3.8vw,44px);font-weight:700;line-height:1.15;margin-bottom:14px;color:var(--white)}
.section-sub{font-size:16px;color:var(--muted);font-weight:300;line-height:1.75}
.section-head{display:flex;flex-direction:column;margin-bottom:52px}
.centered{text-align:center;align-items:center}
.max900{max-width:900px;margin-left:auto;margin-right:auto}
.max640{max-width:640px;margin-left:auto;margin-right:auto}

/* ─── PAIN ─── */
.pain{background:#0D0C09;border-top:1px solid #1A1710;border-bottom:1px solid #1A1710}
.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pain-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:11px;padding:22px;display:flex;gap:14px;align-items:flex-start}
.pain-icon{width:38px;height:38px;background:#1C0E0E;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px}
.pain-card h4{font-size:14px;font-weight:600;margin-bottom:5px;color:var(--text)}
.pain-card p{font-size:13px;color:var(--muted);line-height:1.6}

/* ─── STORY ─── */
.story-inner{display:flex;gap:56px;align-items:center}
.story-boot{width:210px;height:150px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.story-boot .logo-mark{width:100%;height:100%;filter:drop-shadow(0 18px 32px rgba(0,0,0,.36))}
.story-quote{background:#111009;border-left:2px solid var(--gold);padding:15px 18px;border-radius:0 8px 8px 0;margin-top:20px;font-size:14px;color:var(--text);font-style:italic;line-height:1.75}

/* ─── FEATURES ─── */
.features{background:#0D0C09}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.feat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:11px;padding:24px;transition:border-color .18s}
.feat-card:hover{border-color:rgba(201,168,76,.28)}
.feat-icon{width:40px;height:40px;background:#141009;border:1px solid #2E2812;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.feat-card h4{font-size:14px;font-weight:600;margin-bottom:7px;color:var(--text)}
.feat-card p{font-size:13px;color:var(--muted);line-height:1.6}

/* ─── PRICING ─── */
.pricing-intro{font-size:14px;color:var(--muted);line-height:1.75;margin-bottom:6px}
.toggle-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 10px}
.toggle-label{font-size:13px;color:var(--muted);transition:color .18s}
.toggle-label.active{color:var(--gold-light);font-weight:500}
.toggle{width:42px;height:23px;background:#2A2420;border-radius:12px;position:relative;cursor:pointer;border:1px solid #3A3020;flex-shrink:0}
.toggle-knob{width:17px;height:17px;background:var(--gold);border-radius:50%;position:absolute;top:2px;left:2px;transition:left .2s}
.toggle.yearly .toggle-knob{left:21px}
.save-pill{background:#1A1507;border:1px solid #3D2E0A;border-radius:11px;padding:3px 10px;font-size:11px;color:var(--gold);font-weight:600;opacity:.4;transition:opacity .2s}
.save-pill.on{opacity:1}
.founding-banner{background:#0D0A00;border:1px solid #3D2E0A;border-radius:10px;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.founding-text strong{color:var(--gold-light);font-size:13px;display:block;margin-bottom:2px}
.founding-text span{font-size:12px;color:var(--muted)}
.founding-spots{background:#1A1507;border:1px solid var(--gold-dark);border-radius:6px;padding:4px 12px;font-size:12px;color:var(--gold);font-weight:600;white-space:nowrap;flex-shrink:0}
.price-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pcard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;position:relative;transition:border-color .18s}
.pcard:hover{border-color:#3A3020}
.pcard.featured{border:2px solid var(--gold);background:#110E04}
.pop-badge{background:var(--gold);color:#000;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:4px;display:inline-block;margin-bottom:11px}
.plan-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#FFF;margin-bottom:2px}
.plan-role{font-size:11px;color:var(--muted);font-style:italic;margin-bottom:14px}
.price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:2px}
.price-amt{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;color:var(--gold-light);line-height:1}
.price-per{font-size:12px;color:var(--muted)}
.founding-price{font-size:11px;color:var(--gold);background:#1A1507;border-radius:4px;padding:2px 7px;display:inline-block;margin-bottom:6px}
.founding-price s{color:var(--dim);margin-right:3px}
.annual-note{font-size:11px;color:var(--muted);margin-bottom:13px;min-height:16px}
.pdivider{height:1px;background:#221E18;margin:0 0 13px}
.plimits{display:flex;flex-direction:column;gap:7px;flex:1;margin-bottom:16px;list-style:none}
.plimit{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--muted);line-height:1.4}
.plimit .dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--dim);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
.plimit.on .dot{background:var(--gold);border-color:var(--gold);color:#000;font-size:9px;font-weight:700}
.plimit.on{color:var(--text)}
.plimit.off{opacity:.32}
.plimit.off .dot{background:transparent}
.plan-blurb{font-size:12px;color:var(--muted);margin-bottom:12px;font-style:italic;line-height:1.5}
.pbtn{display:block;text-align:center;padding:10px;border-radius:7px;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;border:none;width:100%;margin-top:auto;transition:all .18s}
.pbtn-gold{background:var(--gold);color:#000}
.pbtn-gold:hover{background:var(--gold-light)}
.pbtn-outline{border:1px solid rgba(201,168,76,.35);color:var(--gold-light);background:transparent}
.pbtn-outline:hover{border-color:var(--gold);background:rgba(201,168,76,.06)}
.pricing-footnote{text-align:center;font-size:13px;color:var(--muted);margin-top:20px}
.pricing-footnote strong{color:var(--gold-light)}

/* ─── WHY ─── */
.why{background:#0D0C09}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.why-card{padding:24px 20px;text-align:center}
.why-num{font-family:'Playfair Display',serif;font-size:44px;font-weight:900;color:var(--gold);opacity:.22;line-height:1;margin-bottom:10px}
.why-card h4{font-size:15px;font-weight:600;margin-bottom:7px;color:var(--text)}
.why-card p{font-size:13px;color:var(--muted);line-height:1.7}

/* ─── CTA ─── */
.cta-section{background:#090800;border-top:1px solid #1E1A0A;text-align:center;padding:96px 48px}
.cta-bar{width:50px;height:2px;background:var(--gold);margin:0 auto 26px;border-radius:2px}
.cta-section .section-title{max-width:600px;margin:0 auto 14px}
.cta-section .section-sub{max-width:460px;margin:0 auto 36px}

/* ─── FOOTER ─── */
footer.site-footer{background:var(--black);border-top:1px solid #141414;padding:28px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-links{display:flex;gap:20px}
.footer-links a{color:var(--muted);font-size:12px;text-decoration:none}
.footer-links a:hover{color:var(--gold-light)}
.footer-copy{font-size:12px;color:var(--muted)}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav.site-nav{padding:16px 24px}
  .nav-links{display:none}
  section{padding:64px 24px}
  .hero{padding:80px 24px 40px}
  .pain-grid{grid-template-columns:1fr}
  .story-inner{flex-direction:column;gap:28px}
  .story-boot{width:160px;height:114px}
  .price-grid{grid-template-columns:1fr 1fr}
  footer.site-footer{padding:20px 24px;flex-direction:column;text-align:center}
}
@media(max-width:540px){
  .price-grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}