/*
Theme Name: KF Management Theme
Theme URI: https://example.com/
Author: Dein Name
Author URI: https://example.com/
Description: Custom Theme basierend auf der OnlyFans Landingpage.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kf-management
*/

:root{
      --bg:#0b0c10; --panel:#111218; --muted:#1a1b23; --card:#12131a; --text:#e8e8f0; --sub:#b6b7c5; --brand:#8a5cf6; --brand-2:#ff62d1; --ok:#22c55e; --warn:#f59e0b;
      --ring: 0 0 0 3px rgba(138, 92, 246, .35);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;}
    a{color:inherit;text-decoration:none}
    .container{max-width:1120px;margin:0 auto;padding:0 1.2rem}
    /* Header */
    header{position:sticky;top:0;z-index:50;background:rgba(11,12,16,.8);border-bottom:1px solid #191a22;backdrop-filter:saturate(140%) blur(10px)}
    .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
    .brand{display:flex;align-items:center;gap:.75rem}
    .brand-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-weight:800}
    .brand-name{font-weight:700}
    .menu{display:flex;gap:1.25rem}
    .menu a{font-size:.95rem;color:var(--sub)}
    .cta{background:linear-gradient(135deg,var(--brand),var(--brand-2));padding:.65rem 1rem;border-radius:10px;font-weight:700}

    /* Hero */
    .hero{padding:5.5rem 0;background:radial-gradient(1200px 600px at 20% -10%, rgba(138,92,246,.18), transparent 40%), radial-gradient(1200px 600px at 80% -10%, rgba(255,98,209,.15), transparent 40%)}
    .badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border:1px solid #272836;border-radius:999px;color:var(--sub);font-size:.8rem}
    .grid-hero{display:grid;gap:2rem}
    @media(min-width:900px){.grid-hero{grid-template-columns:1.2fr .8fr;align-items:center}}
    .h1{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.1;margin:.6rem 0 1rem;font-weight:900}
    .lead{color:var(--sub);font-size:1.1rem;max-width:58ch}
    .hero-card{background:linear-gradient(180deg,#12131a,#0f1016);border:1px solid #1e202a;border-radius:16px;padding:1.25rem}
    .check{display:flex;gap:.6rem;align-items:center;margin:.4rem 0;color:#cfd0dc}
    .check i{width:18px;height:18px;border-radius:50%;background:conic-gradient(from 180deg at 50% 50%, var(--ok), var(--brand));display:inline-block}

    /* Stats */
    .stats{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:2.2rem 0}
    .stat{background:linear-gradient(180deg,#12131a,#0f1016);border:1px solid #1e202a;border-radius:14px;padding:1.1rem;text-align:center}
    .stat b{font-size:1.7rem;display:block}
    .muted{color:var(--sub)}

    /* Sections */
    section{padding:3.5rem 0}
    .h2{font-size:1.8rem;font-weight:800;margin:0 0 1.2rem}

    /* Services */
    .services{display:grid;gap:1rem}
    @media(min-width:900px){.services{grid-template-columns:repeat(3,1fr)}}
    .card{background:linear-gradient(180deg,#141622,#10121a);border:1px solid #1e2030;border-radius:16px;padding:1.25rem;transition:transform .25s ease,border-color .25s ease}
    .card:hover{transform:translateY(-4px);border-color:#3b3f55}
    .card h3{margin:.2rem 0 .4rem;font-size:1.1rem}
    .pill{display:inline-block;font-size:.75rem;color:#c9cae6;border:1px dashed #343651;border-radius:999px;padding:.2rem .5rem;margin:.25rem .25rem 0 0}

    /* Process */
    .steps{display:grid;gap:1rem}
    @media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
    .step{background:linear-gradient(180deg,#12131a,#0f1016);border:1px solid #26283a;border-radius:14px;padding:1rem}
    .step .num{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;font-weight:800;margin-bottom:.6rem}

    /* CTA band */
    .band{background:linear-gradient(90deg,rgba(138,92,246,.15),rgba(255,98,209,.12));border:1px solid #2e3042;border-radius:16px;padding:1.25rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}

    /* FAQ */
    .faq details{background:#11131b;border:1px solid #272a3e;border-radius:12px;padding:1rem;margin:.75rem 0}
    .faq summary{cursor:pointer;font-weight:700}

    /* Form */
    form{max-width:560px}
    input,textarea{width:100%;padding:.85rem;border-radius:10px;border:1px solid #2a2d42;background:#0f1119;color:#e8e8f0}
    input:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:#3a3f62}
    .btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:10px;padding:.85rem 1rem;font-weight:800;cursor:pointer}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0c10}
    .btn.ghost{background:transparent;border:1px solid #2c2f45;color:#d7d7e7}

    /* Footer */
    footer{background:#0a0a0d;border-top:1px solid #181924;padding:2.2rem 0;color:#9697a8}
    .foot{display:grid;gap:1.2rem}
    @media(min-width:900px){.foot{grid-template-columns:1.2fr .8fr}}
    .foot small{color:#6f7186}

    /* Utilities */
    .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}