/* ═══════════════════════════════════════════
   Fruzai. — Storyforge Website
   Dark theme, Procreate-inspired, scroll reveal
   ═══════════════════════════════════════════ */

/* ── Arimo Font ── */
@font-face { font-family:'Arimo'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Arimo-400.woff2') format('woff2'); }
@font-face { font-family:'Arimo'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/Arimo-500.woff2') format('woff2'); }
@font-face { font-family:'Arimo'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Arimo-600.woff2') format('woff2'); }
@font-face { font-family:'Arimo'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Arimo-700.woff2') format('woff2'); }
@font-face { font-family:'Arimo'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/Arimo-400-italic.woff2') format('woff2'); }
@font-face { font-family:'Arimo'; font-style:italic; font-weight:700; font-display:swap; src:url('../fonts/Arimo-700-italic.woff2') format('woff2'); }

:root {
    --bg-body:       #08080B;
    --bg-card:       #111116;
    --bg-card-hover: #18181F;
    --bg-input:      #0E0E13;
    --bg-nav:        rgba(8, 8, 11, 0.88);
    --bg-footer:     #060608;
    --accent:        #3078C8;
    --accent-hover:  #4090E0;
    --accent-dark:   #205898;
    --accent-glow:   rgba(48, 120, 200, 0.12);
    --purple:        #9B59B6;
    --text-primary:  #E8E8EC;
    --text-secondary:#8A8A98;
    --text-muted:    #50505C;
    --border:        #1A1A20;
    --border-strong: #282832;
    --success:       #2ECC71;
    --warning:       #F39C12;
    --danger:        #E74C3C;
    --radius:        8px;
    --radius-lg:     14px;
    --shadow:        0 4px 32px rgba(0,0,0,0.5);
    --max-w:         1200px;
    --font:          'Arimo', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font);background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;transition:color .2s;}
a:hover{color:var(--accent-hover);}
img{max-width:100%;height:auto;}

/* ── Scroll Reveal ──
   Elements start visible by default.
   JS adds 'sr-init' to body once ready, enabling opacity:0.
   Then JS adds 'is-visible' to trigger the animation. */
body.sr-init .sr{opacity:0;transform:translateY(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
body.sr-init .sr-left{opacity:0;transform:translateX(-50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
body.sr-init .sr-right{opacity:0;transform:translateX(50px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
body.sr-init .sr-scale{opacity:0;transform:scale(.92);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
body.sr-init .is-visible{opacity:1!important;transform:none!important;}

/* ── Container ── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;}
.container-lg{max-width:1200px;margin:0 auto;padding:0 24px;}

/* ── Wide screens (1600px+) ── */
@media(min-width:1600px){
    :root{--max-w:1320px;}
    .container-lg{max-width:1400px;}
}
/* ── 4K / HiDPI Scaling (150% at 2560px+) ── */
@media(min-width:2560px){
    html{font-size:150%;}
    :root{--max-w:1650px;}
    .container-lg{max-width:1800px;}
}

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.navbar{
    background:var(--bg-nav);
    border-bottom:1px solid var(--border);
    padding:0 24px;
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transition:border-color .3s;
}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:64px;}
.navbar-brand{display:flex;align-items:center;gap:10px;}
.navbar-brand img{height:24px;width:auto;}
.navbar-links{display:flex;gap:28px;align-items:center;}
.navbar-links a{color:var(--text-secondary);font-size:14px;font-weight:500;transition:color .2s;position:relative;}
.navbar-links a:hover,.navbar-links a.active{color:var(--text-primary);}
.navbar-links a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--accent);border-radius:1px;}

/* ── Hamburger Toggle ── */
.navbar-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;z-index:102;}
.navbar-toggle span{display:block;width:22px;height:2px;background:var(--text-secondary);border-radius:1px;transition:transform .3s,opacity .3s;}
.navbar-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar-toggle.open span:nth-child(2){opacity:0;}
.navbar-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── Nav Dropdown ── */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{display:flex;align-items:center;gap:4px;cursor:pointer;}
.nav-dropdown-toggle .chevron{width:12px;height:12px;transition:transform .25s;flex-shrink:0;}
.nav-dropdown.open .nav-dropdown-toggle .chevron{transform:rotate(180deg);}
.nav-dropdown-menu{
    display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
    min-width:230px;background:var(--bg-card);border:1px solid var(--border-strong);
    border-radius:var(--radius-lg);padding:8px;box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:110;
}
.nav-dropdown-menu::before{
    content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
    width:12px;height:12px;background:var(--bg-card);border-left:1px solid var(--border-strong);border-top:1px solid var(--border-strong);
}
.nav-dropdown.open .nav-dropdown-menu{display:block;}
.nav-product{
    display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);
    transition:background .2s;text-decoration:none;
}
.nav-product:hover{background:var(--bg-card-hover);}
.nav-product-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.nav-product-info{display:flex;flex-direction:column;}
.nav-product-name{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.2;}
.nav-product-desc{font-size:11px;color:var(--text-muted);line-height:1.3;margin-top:2px;}
.nav-product-soon{opacity:.55;pointer-events:none;cursor:default;}
.nav-soon-badge{
    display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    padding:1px 6px;border-radius:8px;background:rgba(243,156,18,.15);color:var(--warning);
    vertical-align:middle;margin-left:6px;line-height:1.4;
}

/* ── Mobile Nav ── */
@media(max-width:768px){
    .navbar-toggle{display:flex;}
    .navbar-links{
        display:none;position:absolute;top:100%;left:0;right:0;
        flex-direction:column;gap:0;padding:8px 24px 16px;
        background:var(--bg-nav);border-bottom:1px solid var(--border);
        backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    }
    .navbar-links.open{display:flex;}
    .navbar-links a,.navbar-links .nav-dropdown-toggle{
        padding:12px 0;font-size:15px;border-bottom:1px solid var(--border);width:100%;
    }
    .navbar-links a:last-child{border-bottom:none;}
    .navbar-links .btn.btn-primary.btn-sm{
        margin-top:8px;padding:12px 24px;font-size:15px;border-radius:var(--radius);
        justify-content:center;border-bottom:none;
    }
    .nav-dropdown{width:100%;}
    .nav-dropdown-toggle{justify-content:space-between;}
    .nav-dropdown-menu{
        position:static;transform:none;min-width:auto;
        border:none;box-shadow:none;padding:0 0 0 12px;background:transparent;
        border-left:2px solid var(--border-strong);margin:4px 0 4px 4px;
    }
    .nav-dropdown-menu::before{display:none;}
    .nav-product{padding:10px 12px;}
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);text-decoration:none;font-family:var(--font);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 30px rgba(48,120,200,.35);}
.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent);transform:translateY(-1px);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#C0392B;color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#27AE60;color:#fff;}
.btn-sm{padding:6px 14px;font-size:12px;}
.btn-lg{padding:14px 36px;font-size:16px;border-radius:10px;}
.btn-block{width:100%;}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--text-muted);}

/* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */
.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--text-secondary);}
.form-control{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:14px;font-family:var(--font);transition:border-color .25s,box-shadow .25s;}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.form-control::placeholder{color:var(--text-muted);}
select.form-control{appearance:none;cursor:pointer;}
textarea.form-control{resize:vertical;min-height:80px;}
.form-control.input-error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15);}

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:border-color .3s,box-shadow .3s;}
.card:hover{border-color:rgba(255,255,255,.06);}
.card-header{font-size:18px;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);}

/* ═══════════════════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════════════════ */
.flash{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:14px;font-weight:500;animation:flash-in .4s cubic-bezier(.16,1,.3,1);}
@keyframes flash-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.flash-error{background:rgba(231,76,60,.12);color:#E74C3C;border:1px solid rgba(231,76,60,.25);}
.flash-success{background:rgba(46,204,113,.12);color:#2ECC71;border:1px solid rgba(46,204,113,.25);}
.flash-info{background:rgba(48,120,200,.12);color:var(--accent);border:1px solid rgba(48,120,200,.25);}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:140px 24px 80px;position:relative;overflow:hidden;
}
/* Animated gradient background */
.hero-bg-anim{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(135deg,
        rgba(48,120,200,.12) 0%,rgba(155,89,182,.08) 25%,
        rgba(48,120,200,.06) 50%,rgba(46,204,113,.04) 75%,
        rgba(48,120,200,.1) 100%);
    background-size:400% 400%;
    animation:gradientShift 12s ease infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
/* Dot grid */
.hero::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
}
.hero-content{position:relative;z-index:1;max-width:700px;margin:0 auto;}
.hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(48,120,200,.08);border:1px solid rgba(48,120,200,.2);border-radius:20px;
    padding:6px 16px;font-size:12px;font-weight:600;color:var(--accent);
    margin-bottom:28px;animation:hero-up 1s cubic-bezier(.16,1,.3,1) both;
}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero h1{
    font-size:56px;font-weight:800;line-height:1.06;margin-bottom:22px;
    letter-spacing:-.03em;color:var(--text-primary);
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .15s both;
}
.hero h1 .gradient-text{
    background:linear-gradient(135deg, var(--accent), #60A0E8, var(--purple));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
    font-size:20px;color:var(--text-secondary);margin:0 auto 12px;line-height:1.6;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .25s both;
}
.hero-typed{color:var(--accent);font-weight:700;border-right:2px solid var(--accent);padding-right:2px;animation:blink-caret .8s step-end infinite;}
@keyframes blink-caret{50%{border-color:transparent;}}
.hero-desc{
    font-size:15px;color:var(--text-muted);max-width:520px;margin:0 auto 36px;line-height:1.7;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .35s both;
}
.hero-buttons{
    display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .45s both;
}
.hero-buttons .btn-ghost{gap:8px;}
.hero-buttons .btn-ghost svg{width:16px;height:16px;}
@keyframes hero-up{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* Hero Product Cards */
.hero-multi{min-height:auto;padding-bottom:100px;}
.hero-multi .hero-content{max-width:600px;margin-bottom:0;}
.hero-products{
    position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;
    max-width:960px;margin:48px auto 0;padding:0 24px;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .5s both;
}
.hero-product-card{
    padding:36px 32px 32px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
    border-radius:20px;text-align:left;
    transition:border-color .3s,background .3s,transform .3s;
    display:flex;flex-direction:column;
}
.hero-product-card:hover{
    border-color:rgba(48,120,200,.3);background:rgba(48,120,200,.05);
    transform:translateY(-6px);
}
.hero-product-header{
    display:flex;align-items:center;gap:16px;margin-bottom:20px;
}
.hero-product-icon{
    width:64px;height:64px;border-radius:14px;flex-shrink:0;
    box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.hero-product-card h2{
    font-size:24px;font-weight:700;margin:0;color:var(--text-primary);line-height:1.2;
}
.hero-product-tagline{
    font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.02em;
}
.hero-product-desc{
    font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:18px;
}
.hero-product-list{
    list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
}
.hero-product-list li{
    font-size:13px;color:var(--text-muted);padding-left:18px;position:relative;
}
.hero-product-list li::before{
    content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:12px;
}
.hero-product-btns{
    display:flex;gap:10px;margin-top:auto;
}

/* ═══════════════════════════════════════════
   APP SCREENSHOT / MOCKUP
   ═══════════════════════════════════════════ */
.mockup-wrapper{
    position:relative;z-index:1;width:100%;max-width:900px;margin:56px auto 0;
    animation:hero-up 1.2s cubic-bezier(.16,1,.3,1) .6s both;
    box-shadow: 0 30px 110px rgb(49 42 173 / 50%), 0 0 120px rgb(0 121 255 / 5%);
    border-radius: 60px;
    aspect-ratio: 11 / 6;
}
.app-screenshot{
    width:100%;height:auto;display:block;border-radius:12px;transform: scale(1.1);
}
/* Glow behind screenshot */
.mockup-wrapper::before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:120%;height:120%;
    background:radial-gradient(ellipse, rgba(48,120,200,.08) 0%, transparent 60%);
    pointer-events:none;z-index:-1;
}
.mockup-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#07070C;border-bottom:1px solid rgba(255,255,255,.04);}
.mockup-dot{width:10px;height:10px;border-radius:50%;}
.dot-r{background:#FF5F57;}.dot-y{background:#FEBC2E;}.dot-g{background:#28C840;}
.mockup-bar-title{margin-left:10px;font-size:11px;color:rgba(255,255,255,.25);font-weight:500;letter-spacing:.5px;}
.mockup-body{display:grid;grid-template-columns:60px 1fr 130px;min-height:280px;}
.mockup-sidebar{background:#09090F;border-right:1px solid rgba(255,255,255,.03);padding:8px;display:flex;flex-direction:column;gap:6px;}
.mockup-thumb{aspect-ratio:16/9;border-radius:3px;background:#14141E;border:1.5px solid transparent;transition:border-color .3s;}
.mockup-thumb.active{border-color:var(--accent);background:linear-gradient(135deg,#141428,#161630);}
.mockup-canvas{display:flex;align-items:center;justify-content:center;padding:20px;background:#0A0A12;}
.mockup-drawing{
    width:100%;height:100%;border-radius:4px;position:relative;overflow:hidden;
    background:linear-gradient(160deg,#0E0E1A,#10101E);
}
.mockup-drawing::before{
    content:'';position:absolute;top:15%;left:10%;width:55%;height:45%;
    border-radius:50% 40% 60% 35%;
    background:linear-gradient(135deg,rgba(48,120,200,.18),rgba(155,89,182,.12));
    filter:blur(6px);
}
.mockup-drawing::after{
    content:'';position:absolute;bottom:10%;right:8%;width:35%;height:30%;
    border-radius:35% 55% 40% 50%;
    background:linear-gradient(225deg,rgba(46,204,113,.12),rgba(48,120,200,.08));
    filter:blur(5px);
}
.mockup-panel{background:#09090F;border-left:1px solid rgba(255,255,255,.03);padding:10px;}
.mockup-color-wheel{
    width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:10px;
    background:conic-gradient(from 0deg,#E74C3C,#F39C12,#2ECC71,#3498DB,#9B59B6,#E74C3C);
    opacity:.5;
}
.mockup-layers{display:flex;flex-direction:column;gap:4px;}
.mockup-layer{height:20px;border-radius:3px;background:#14141E;border:1px solid transparent;}
.mockup-layer.active{border-color:rgba(48,120,200,.3);background:rgba(48,120,200,.06);}
.mockup-timeline{display:flex;align-items:center;gap:5px;padding:9px 14px;background:#07070C;border-top:1px solid rgba(255,255,255,.04);}
.mockup-frame{width:28px;height:18px;border-radius:3px;background:#14141E;border:1px solid transparent;flex-shrink:0;}
.mockup-frame.active{border-color:var(--accent);background:rgba(48,120,200,.1);}
.mockup-play{width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-right:6px;flex-shrink:0;}
.mockup-play::after{content:'';width:0;height:0;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px;}

/* ═══════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════ */
.trust-bar{padding:48px 0;border-bottom:1px solid var(--border);overflow:hidden;}
.trust-label{text-align:center;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:28px;}
.trust-carousel{
    position:relative;
    mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
}
.trust-track{display:flex;gap:48px;align-items:center;animation:trust-scroll 120s linear infinite;width:max-content;}
.trust-track:hover{animation-play-state:paused;}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;opacity:.35;transition:opacity .3s;}
.trust-item:hover{opacity:.7;}
.trust-item svg{width:48px;height:48px;color:var(--text-muted);}
.trust-item span{font-size:12px;color:var(--text-muted);font-weight:600;letter-spacing:.5px;}
@keyframes trust-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ═══════════════════════════════════════════
   HIGHLIGHTS BAR
   ═══════════════════════════════════════════ */
.highlights{padding:72px 0;border-bottom:1px solid var(--border);}
.highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center;}
.highlight-num{font-size:44px;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent),#60A0E8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.highlight-label{font-size:14px;color:var(--text-secondary);margin-top:6px;}

/* ═══════════════════════════════════════════
   SHOWCASE (alternating image + text rows)
   ═══════════════════════════════════════════ */
.showcase{padding:100px 0;}
.showcase-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:100px;}
.showcase-row:last-child{margin-bottom:0;}
.showcase-row.reverse .showcase-visual{order:-1;}
.showcase-text .label{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;}
.showcase-text h3{font-size:30px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px;line-height:1.2;}
.showcase-text p{font-size:15px;color:var(--text-secondary);line-height:1.75;margin-bottom:16px;}
.showcase-list{list-style:none;}
.showcase-list li{padding:5px 0;font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:10px;}
.showcase-list .ico{color:var(--accent);font-weight:bold;font-size:16px;}
.showcase-link{
    display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
    color:var(--accent);margin-top:16px;transition:gap .25s cubic-bezier(.16,1,.3,1);
}
.showcase-link:hover{gap:10px;color:var(--accent-hover);}
.showcase-link svg{width:14px;height:14px;flex-shrink:0;}

/* Visual boxes */
.showcase-visual{
    border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;
    aspect-ratio:4/3;position:relative;background:linear-gradient(160deg,#0C0C18,#10101E);
}
/* Brush strokes visual */
.vis-brush{display:flex;align-items:center;justify-content:center;}
.vis-brush-inner{position:relative;width:100%;height:100%;}
.bstroke{position:absolute;border-radius:100px;filter:blur(.5px);}
.bstroke-1{top:10%;left:5%;width:80%;height:14px;background:linear-gradient(90deg,var(--accent),rgba(48,120,200,.15));transform:rotate(-4deg);}
.bstroke-2{top:32%;left:12%;width:65%;height:10px;background:linear-gradient(90deg,#9B59B6,rgba(155,89,182,.12));transform:rotate(3deg);}
.bstroke-3{top:50%;left:8%;width:72%;height:18px;background:linear-gradient(90deg,#2ECC71,rgba(46,204,113,.1));transform:rotate(-2deg);}
.bstroke-4{top:70%;left:18%;width:50%;height:8px;background:linear-gradient(90deg,#F39C12,rgba(243,156,18,.1));transform:rotate(5deg);}
.bdot{position:absolute;border-radius:50%;}
.bdot-1{top:18%;right:12%;width:32px;height:32px;background:radial-gradient(circle,rgba(48,120,200,.35),transparent);filter:blur(2px);}
.bdot-2{bottom:18%;right:25%;width:22px;height:22px;background:radial-gradient(circle,rgba(155,89,182,.3),transparent);filter:blur(2px);}
.bdot-3{top:45%;right:5%;width:16px;height:16px;background:radial-gradient(circle,rgba(46,204,113,.3),transparent);filter:blur(1px);}

/* Storyboard grid visual */
.vis-boards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:28px;}
.mboard{aspect-ratio:16/9;border-radius:5px;background:#14141E;border:1.5px solid rgba(255,255,255,.04);overflow:hidden;padding:3px;transition:border-color .4s,transform .4s;}
.mboard.hi{border-color:var(--accent);transform:scale(1.04);}
.mboard-inner{width:100%;height:100%;border-radius:3px;}
.mboard:nth-child(1) .mboard-inner{background:linear-gradient(135deg,rgba(48,120,200,.2),rgba(155,89,182,.1));}
.mboard:nth-child(2) .mboard-inner{background:linear-gradient(225deg,rgba(46,204,113,.15),rgba(48,120,200,.1));}
.mboard:nth-child(3) .mboard-inner{background:linear-gradient(135deg,rgba(243,156,18,.12),rgba(231,76,60,.08));}
.mboard:nth-child(4) .mboard-inner{background:linear-gradient(315deg,rgba(155,89,182,.12),rgba(48,120,200,.08));}
.mboard:nth-child(5) .mboard-inner{background:linear-gradient(45deg,rgba(48,120,200,.12),rgba(46,204,113,.08));}
.mboard:nth-child(6) .mboard-inner{background:linear-gradient(180deg,rgba(231,76,60,.08),rgba(243,156,18,.12));}

/* Export visual */
.vis-export{display:flex;align-items:center;justify-content:center;padding:24px;gap:16px;}
.export-doc{
    width:45%;background:#FAFAFA;border-radius:5px;padding:14px;
    display:flex;flex-direction:column;gap:10px;
    box-shadow:0 8px 40px rgba(0,0,0,.4);transform:rotate(-2deg);
}
.export-doc:nth-child(2){transform:rotate(1deg) translateY(10px);opacity:.7;width:40%;}
.export-item{display:flex;gap:8px;align-items:center;}
.export-img{width:40px;height:28px;border-radius:2px;flex-shrink:0;}
.export-item:nth-child(1) .export-img{background:linear-gradient(135deg,#3078C8,#5090D8);}
.export-item:nth-child(2) .export-img{background:linear-gradient(135deg,#9B59B6,#B070C8);}
.export-item:nth-child(3) .export-img{background:linear-gradient(135deg,#2ECC71,#50D090);}
.export-lines{flex:1;display:flex;flex-direction:column;gap:4px;}
.export-lines div{height:5px;border-radius:3px;background:#E0E0E0;}
.export-lines div:last-child{width:55%;}

/* Screenshot in browser-chrome mockup */
.screenshot-mockup{
    border-radius:10px;overflow:hidden;
    background:#0A0A12;border:1px solid rgba(255,255,255,.06);
    box-shadow:0 16px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);
}
.screenshot-mockup-bar{
    display:flex;align-items:center;gap:6px;padding:10px 14px;
    background:#0E0E16;border-bottom:1px solid rgba(255,255,255,.04);
}
.screenshot-mockup-dot{width:8px;height:8px;border-radius:50%;}
.screenshot-mockup-dot.r{background:#FF5F57;}
.screenshot-mockup-dot.y{background:#FEBC2E;}
.screenshot-mockup-dot.g{background:#28C840;}
.screenshot-mockup-bar-title{
    margin-left:8px;font-size:10px;color:rgba(255,255,255,.2);
    font-weight:500;letter-spacing:.3px;
}
.screenshot-mockup img{display:block;width:100%;height:auto;}

/* Showcase mockup overrides — fill the visual box */
.showcase-visual.has-screenshot{
    background:none;border:none;overflow:visible;aspect-ratio:auto;
}
.showcase-visual.has-screenshot .screenshot-mockup{width:100%;}

/* Full-width screenshot in feature pages */
.feat-screenshot{max-width:960px;margin:48px auto;}
.feat-screenshot .screenshot-mockup{width:100%;}

/* ═══════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════ */
.section-header{text-align:center;margin-bottom:56px;}
.section-header h2{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
.section-header p{font-size:16px;color:var(--text-secondary);max-width:480px;margin:0 auto;}

/* ═══════════════════════════════════════════
   FEATURES GRID (compact cards)
   ═══════════════════════════════════════════ */
.features{padding:100px 0;position:relative;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:32px 28px;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;
}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(48,120,200,.3);box-shadow:0 0 60px rgba(48,120,200,.06);}
.feature-icon{
    width:48px;height:48px;border-radius:12px;background:var(--accent-glow);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:22px;
    transition:background .3s;
}
.feature-card:hover .feature-icon{background:rgba(48,120,200,.2);}
.feature-icon svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.feature-card h3{font-size:16px;font-weight:700;margin-bottom:8px;}
.feature-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;}

/* ═══════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════ */
.pricing{padding:100px 0 120px;}
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:740px;margin:0 auto;}
.pricing-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:40px 36px;text-align:center;position:relative;
    transition:border-color .3s,transform .3s,box-shadow .3s;
}
.pricing-card:hover{transform:translateY(-4px);}
.pricing-card.featured{border-color:var(--accent);box-shadow:0 0 80px rgba(48,120,200,.08),0 4px 40px rgba(0,0,0,.3);}
.pricing-logo{display:block;height:96px;width:auto;margin:0 auto 16px;opacity:.85;}
.pricing-app-icon{
    display:block;width:64px;height:64px;border-radius:16px;margin:0 auto 16px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.pricing-badge{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;
    padding:5px 20px;border-radius:20px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:1.2px;
}
.pricing-card h3{font-size:22px;font-weight:700;margin-bottom:6px;}
.pricing-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:20px;}
.pricing-price{font-size:48px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px;}
.pricing-price .dollar{font-size:24px;vertical-align:super;font-weight:700;margin-right:2px;}
.pricing-price .period{font-size:14px;font-weight:400;color:var(--text-muted);letter-spacing:0;}
.pricing-features{list-style:none;text-align:left;margin:28px 0;}
.pricing-features li{padding:8px 0;font-size:14px;color:var(--text-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.pricing-features li:last-child{border-bottom:none;}
.check{color:var(--success);font-weight:bold;}
.cross{color:var(--text-muted);}

/* ═══════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════ */
.cta-section{padding:100px 0;text-align:center;position:relative;}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(48,120,200,.06),transparent 70%);pointer-events:none;}
.cta-section h2{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;position:relative;}
.cta-section p{font-size:16px;color:var(--text-secondary);margin-bottom:36px;position:relative;}
.cta-section .btn{position:relative;}

/* ═══════════════════════════════════════════
   AUTH FORMS
   ═══════════════════════════════════════════ */
.auth-wrapper{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 64px);padding:40px 24px;}
.auth-card{width:100%;max-width:420px;animation:hero-up .6s cubic-bezier(.16,1,.3,1) both;}
.auth-card h1{font-size:24px;font-weight:700;margin-bottom:8px;}
.auth-card p{color:var(--text-secondary);font-size:14px;margin-bottom:24px;}
.auth-footer{text-align:center;margin-top:16px;font-size:13px;color:var(--text-muted);}

/* ═══════════════════════════════════════════
   DASHBOARD / PAGE HEADER
   ═══════════════════════════════════════════ */
.page-header{padding:100px 0 28px;border-bottom:1px solid var(--border);margin-bottom:32px;}
.page-header h1{font-size:26px;font-weight:700;}
.page-header p{color:var(--text-secondary);font-size:14px;margin-top:4px;}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:32px;}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;display:flex;align-items:center;gap:16px;transition:border-color .3s,transform .3s;}
.stat-card:hover{border-color:rgba(255,255,255,.06);transform:translateY(-2px);}
.stat-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.stat-icon.blue{background:rgba(48,120,200,.12);}.stat-icon.green{background:rgba(46,204,113,.12);}.stat-icon.amber{background:rgba(243,156,18,.12);}
.stat-value{font-size:28px;font-weight:700;}.stat-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}

/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
.table-wrapper{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);}
td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:hover td{background:var(--bg-card-hover);}

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.badge-active{background:rgba(46,204,113,.12);color:var(--success);}
.badge-inactive{background:rgba(153,153,153,.12);color:var(--text-muted);}
.badge-pending{background:rgba(243,156,18,.12);color:var(--warning);}
.badge-approved{background:rgba(46,204,113,.12);color:var(--success);}
.badge-rejected{background:rgba(231,76,60,.12);color:var(--danger);}
.badge-expired{background:rgba(231,76,60,.12);color:var(--danger);}
.badge-revoked{background:rgba(231,76,60,.12);color:var(--danger);}
.badge-blocked{background:rgba(231,76,60,.2);color:#FF6B6B;}
/* Tier badge types (1-10) — selectable from admin panel */
.badge-type-1{background:rgba(48,120,200,.12);color:#3078C8;}   /* Blue */
.badge-type-2{background:rgba(46,204,113,.12);color:#2ECC71;}   /* Green */
.badge-type-3{background:rgba(52,199,199,.12);color:#34C7C7;}   /* Teal */
.badge-type-4{background:rgba(155,89,182,.12);color:#B97CE0;}   /* Purple */
.badge-type-5{background:rgba(231,76,60,.12);color:#E74C3C;}    /* Red */
.badge-type-6{background:rgba(241,130,141,.12);color:#F1828D;}   /* Pink */
.badge-type-7{background:rgba(230,160,50,.12);color:#E6A832;}   /* Gold */
.badge-type-8{background:rgba(243,156,18,.12);color:#F39C12;}   /* Orange */
.badge-type-9{background:rgba(149,165,166,.12);color:#95A5A6;}  /* Silver */
.badge-type-10{background:rgba(220,220,220,.12);color:#DCDCDC;} /* Platinum */

/* ═══════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════ */
.faq{padding:100px 0;}
.faq-list{max-width:720px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:first-child{border-top:1px solid var(--border);}
.faq-question{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 0;background:none;border:none;color:var(--text-primary);
    font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;
    text-align:left;transition:color .2s;
}
.faq-question:hover{color:var(--accent);}
.faq-chevron{flex-shrink:0;color:var(--text-muted);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1);}
.faq-item.open .faq-answer{max-height:200px;padding:0 0 20px;}
.faq-answer p{font-size:14px;color:var(--text-secondary);line-height:1.7;}

/* ═══════════════════════════════════════════
   FOOTER (Mega)
   ═══════════════════════════════════════════ */
.footer{margin-top:auto;background:var(--bg-footer);border-top:1px solid var(--border);padding:64px 24px 32px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-logo{height:22px;opacity:.6;margin-bottom:14px;}
.footer-tagline{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:20px;max-width:240px;}
.footer-social{display:flex;gap:10px;}
.footer-social-link{
    width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-muted);transition:all .2s;
}
.footer-social-link:hover{color:var(--text-primary);border-color:var(--text-muted);background:rgba(255,255,255,.03);}
.footer-heading{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}
.footer-list{list-style:none;}
.footer-list li{margin-bottom:10px;}
.footer-list a{font-size:13px;color:var(--text-muted);transition:color .2s;}
.footer-list a:hover{color:var(--text-primary);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);}
.footer-copy{font-size:12px;color:var(--text-muted);}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:12px;color:var(--text-muted);transition:color .2s;}
.footer-bottom-links a:hover{color:var(--text-primary);}
/* Simple footer variant for admin/inner pages */
.footer-simple{margin-top:auto;background:var(--bg-footer);border-top:1px solid var(--border);padding:28px;text-align:center;font-size:13px;color:var(--text-muted);}

/* ═══════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════ */
.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mt-3{margin-top:24px;}
.mb-2{margin-bottom:16px;}.mb-3{margin-bottom:24px;}
.text-center{text-align:center;}.text-muted{color:var(--text-muted);}.text-sm{font-size:13px;}
.flex{display:flex;}.flex-between{display:flex;justify-content:space-between;align-items:center;}
.gap-2{gap:8px;}.gap-3{gap:16px;}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:900px){
    .showcase-row{grid-template-columns:1fr;gap:40px;}
    .showcase-row.reverse .showcase-visual{order:0;}
    .features-grid{grid-template-columns:1fr 1fr;}
    .mockup-body{grid-template-columns:50px 1fr 100px;min-height:220px;}
}
@media(max-width:768px){
    .hero h1{font-size:36px;}
    .hero-sub{font-size:17px;}
    .hero{padding:120px 16px 60px;min-height:auto;}
    .hero-products{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;}
    .section-header h2,.cta-section h2{font-size:28px;}
    .pricing-grid{grid-template-columns:1fr;max-width:400px;}
    .features-grid{grid-template-columns:1fr;}
    .highlights-grid{grid-template-columns:1fr;gap:20px;}
    .highlight-num{font-size:36px;}
    .trust-bar{padding:32px 0;}
    .trust-track{gap:32px;}
    .faq{padding:72px 0;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .footer-col-brand{grid-column:span 2;}
    .footer-bottom{flex-direction:column;gap:12px;text-align:center;}
}
@media(max-width:480px){
    .hero h1{font-size:30px;}
    .hero-sub{font-size:15px;}
    .hero-desc{font-size:13px;}
    .navbar-brand img{height:20px;}
    .mockup-wrapper{margin-top:32px;}
    .mockup-body{grid-template-columns:1fr;min-height:180px;}
    .mockup-sidebar,.mockup-panel{display:none;}
    .showcase-text h3{font-size:24px;}
    .pricing-price{font-size:40px;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-col-brand{grid-column:span 1;}
}

/* ── Product Teaser Section ── */
.product-teaser{padding:80px 0;background:var(--bg);}
.product-teaser-card{
    display:flex;gap:48px;align-items:center;
    padding:48px;border-radius:16px;
    background:var(--bg-card);border:1px solid var(--border);
    position:relative;overflow:hidden;
}
.product-teaser-card::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 500px 300px at 0% 50%, rgba(155,89,182,.06), transparent);
}
.product-teaser-visual{
    flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:1;
}
.product-teaser-icon{
    width:120px;height:120px;border-radius:28px;
    box-shadow:0 12px 40px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.1);
}
.product-teaser-badge{
    padding:5px 16px;border-radius:16px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.8px;
    background:rgba(155,89,182,.12);color:#b06ce6;
}
.product-teaser-body{position:relative;z-index:1;}
.product-teaser-body h2{font-size:32px;font-weight:800;margin-bottom:4px;}
.product-teaser-tagline{
    font-size:15px;color:var(--accent);font-weight:600;margin-bottom:14px;
}
.product-teaser-body > p{
    font-size:15px;color:var(--text-secondary);line-height:1.7;max-width:560px;
}
.product-teaser-highlights{
    display:flex;gap:24px;margin-top:20px;
}
.product-teaser-hl{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:12px;color:var(--text-muted);
}
.product-teaser-num{
    font-size:24px;font-weight:800;color:var(--text);
}
.product-teaser-features{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
.product-teaser-features span{
    padding:5px 12px;border-radius:8px;font-size:12px;font-weight:600;
    background:rgba(155,89,182,.08);color:var(--text-secondary);
    border:1px solid rgba(155,89,182,.12);
}
@media(max-width:768px){
    .product-teaser-card{flex-direction:column;text-align:center;padding:32px 24px;}
    .product-teaser-body > p{max-width:100%;}
    .product-teaser-highlights{justify-content:center;}
    .product-teaser-features{justify-content:center;}
}

/* ═══════════════════════════════════════════════════════
   FEATURES PAGE (storyforge.php)
   ═══════════════════════════════════════════════════════ */

/* ── Features Hero ── */
.feat-hero{
    padding:160px 24px 80px;text-align:center;position:relative;overflow:hidden;
}
.feat-hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(ellipse 800px 500px at 30% 20%, rgba(48,120,200,.1), transparent),
        radial-gradient(ellipse 600px 400px at 70% 50%, rgba(155,89,182,.06), transparent);
}
.feat-hero-content{position:relative;z-index:1;max-width:780px;margin:0 auto;}
.feat-hero h1{
    font-size:48px;font-weight:800;line-height:1.1;margin-bottom:20px;
    letter-spacing:-.03em;animation:hero-up 1s cubic-bezier(.16,1,.3,1) .15s both;
}
.feat-hero p{
    font-size:17px;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .3s both;
}

/* ── Feature Hero App Icon ── */
.feat-hero-icon{
    display: block;
    width:120px;height:120px;border-radius:20px;margin:0 auto 24px;
    animation:hero-up 1s cubic-bezier(.16,1,.3,1) .05s both;
    box-shadow:0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1);
}

/* ── Feature Nav (sticky anchor bar) ── */
.feat-nav-wrap{
    position:sticky;top:64px;z-index:90;
    background:var(--bg-nav);border-bottom:1px solid var(--border);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.feat-nav{
    display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.feat-nav::-webkit-scrollbar{display:none;}
.feat-nav a{
    flex-shrink:0;padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;
    color:var(--text-muted);transition:all .25s;white-space:nowrap;
}
.feat-nav a:hover{color:var(--text-primary);background:rgba(255,255,255,.04);}
.feat-nav a.active{color:var(--accent);background:var(--accent-glow);}

/* ── Feature Sections ── */
.feat-section{padding:100px 0;}
.feat-section-alt{background:rgba(255,255,255,.01);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.feat-section-header{text-align:center;margin-bottom:56px;}
.feat-section-header h2{font-size:36px;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
.feat-section-header p{font-size:15px;color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7;}
.feat-label{
    display:inline-block;font-size:12px;font-weight:700;color:var(--accent);
    text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;
}

/* ── Tool Grid (14 tools) ── */
.feat-tool-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-bottom:64px;}
.feat-tool-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
    padding:20px 18px;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.feat-tool-card:hover{transform:translateY(-4px);border-color:rgba(48,120,200,.3);}
.feat-tool-key{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;
    background:var(--accent-glow);color:var(--accent);
    font-size:14px;font-weight:800;font-family:'Courier New',monospace;
    margin-bottom:10px;
}
.feat-tool-card h4{font-size:15px;font-weight:700;margin-bottom:4px;}
.feat-tool-card p{font-size:12px;color:var(--text-secondary);line-height:1.5;}

/* ── Feature Card Grid (6 cards) ── */
.feat-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;}
.feat-card-grid-4{grid-template-columns:repeat(4,1fr);}
.feat-feature-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:30px 24px;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s;
}
.feat-feature-card:hover{transform:translateY(-5px);border-color:rgba(48,120,200,.25);box-shadow:0 0 50px rgba(48,120,200,.05);}
.feat-icon{
    width:44px;height:44px;border-radius:11px;background:var(--accent-glow);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:20px;
    transition:background .3s;
}
.feat-feature-card:hover .feat-icon{background:rgba(48,120,200,.18);}
.feat-feature-card h4{font-size:16px;font-weight:700;margin-bottom:6px;}
.feat-feature-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;}

/* ── Detail Row (two column text) ── */
.feat-detail-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:48px;}
.feat-detail-row h3{font-size:22px;font-weight:700;margin-bottom:12px;}
.feat-detail-row p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:14px;}

/* ── Check List ── */
.feat-check-list{list-style:none;padding:0;}
.feat-check-list li{
    padding:6px 0;font-size:13px;color:var(--text-secondary);line-height:1.5;
    position:relative;padding-left:22px;
}
.feat-check-list li::before{
    content:'\2713';position:absolute;left:0;color:var(--accent);font-weight:bold;font-size:14px;
}

/* ── Spec Grid (numbers) ── */
.feat-spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0;}
.feat-spec{text-align:center;padding:14px 8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.feat-spec-num{display:block;font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--accent),#60A0E8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.feat-spec-label{font-size:11px;color:var(--text-muted);margin-top:2px;display:block;}

/* ── Blend Modes Grid ── */
.feat-blend-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.feat-blend-grid span{
    padding:10px 8px;text-align:center;font-size:12px;font-weight:600;
    background:rgba(255,255,255,.02);border-radius:6px;color:var(--text-secondary);
    border:1px solid rgba(255,255,255,.03);
}
.feat-detail-caption{text-align:center;font-size:12px;color:var(--text-muted);margin-top:10px;}

/* ── Highlight Box ── */
.feat-highlight{
    position:relative;padding:36px 40px;
    background:linear-gradient(135deg,rgba(48,120,200,.06),rgba(155,89,182,.04));
    border:1px solid rgba(48,120,200,.15);border-radius:var(--radius-lg);
    margin-bottom:48px;
}
.feat-highlight-wide{text-align:center;padding:48px 60px;}
.feat-highlight-badge{
    display:inline-block;padding:4px 12px;border-radius:20px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
    background:var(--accent);color:#fff;margin-bottom:14px;
}
.feat-highlight h3{font-size:22px;font-weight:700;margin-bottom:10px;}
.feat-highlight p{font-size:14px;color:var(--text-secondary);line-height:1.7;max-width:700px;}
.feat-highlight-wide p{margin:0 auto;}

/* ── Hierarchy Diagram ── */
.feat-hierarchy{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    margin-bottom:56px;padding:36px 20px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.feat-h-level{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.feat-h-box{
    padding:10px 22px;border-radius:var(--radius);font-size:13px;font-weight:700;
    border:1px solid var(--border);
}
.feat-h-project{background:rgba(48,120,200,.12);color:var(--accent);border-color:rgba(48,120,200,.25);}
.feat-h-scene{background:rgba(155,89,182,.1);color:#B97CE0;border-color:rgba(155,89,182,.2);}
.feat-h-board{background:rgba(46,204,113,.1);color:var(--success);border-color:rgba(46,204,113,.2);}
.feat-h-panel{background:rgba(243,156,18,.1);color:var(--warning);border-color:rgba(243,156,18,.2);}
.feat-h-layer{background:rgba(231,76,60,.08);color:var(--danger);border-color:rgba(231,76,60,.15);}
.feat-h-arrow{font-size:18px;color:var(--text-muted);line-height:1;}

/* ── Export Cards ── */
.feat-export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;}
.feat-export-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:32px 24px;text-align:center;
    transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s;
}
.feat-export-card:hover{transform:translateY(-4px);border-color:rgba(48,120,200,.25);}
.feat-export-icon{font-size:36px;margin-bottom:14px;display:block;}
.feat-export-card h4{font-size:16px;font-weight:700;margin-bottom:8px;}
.feat-export-card p{font-size:13px;color:var(--text-secondary);line-height:1.6;}

/* ── Numbers Grid ── */
.feat-numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.feat-number-item{
    text-align:center;padding:28px 16px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    transition:transform .3s,border-color .3s;
}
.feat-number-item:hover{transform:translateY(-3px);border-color:rgba(48,120,200,.2);}
.feat-number-value{
    font-size:40px;font-weight:800;letter-spacing:-.02em;
    background:linear-gradient(135deg,var(--accent),#60A0E8);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.feat-number-label{font-size:13px;color:var(--text-secondary);margin-top:6px;}

/* ── Features Page Responsive ── */
@media(max-width:900px){
    .feat-tool-grid{grid-template-columns:repeat(4,1fr);}
    .feat-card-grid,.feat-card-grid-4{grid-template-columns:1fr 1fr;}
    .feat-detail-row{grid-template-columns:1fr;gap:32px;}
    .feat-export-grid{grid-template-columns:1fr 1fr;}
    .feat-spec-grid{grid-template-columns:repeat(2,1fr);}
    .feat-numbers-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .feat-hero h1{font-size:34px;}
    .feat-section-header h2{font-size:28px;}
    .feat-section{padding:72px 0;}
    .feat-card-grid,.feat-card-grid-4,.feat-export-grid{grid-template-columns:1fr;}
    .feat-tool-grid{grid-template-columns:repeat(3,1fr);}
    .feat-numbers-grid{grid-template-columns:repeat(2,1fr);}
    .feat-highlight-wide{padding:32px 24px;}
}
@media(max-width:480px){
    .feat-hero h1{font-size:28px;}
    .feat-hero{padding:120px 16px 60px;}
    .feat-tool-grid{grid-template-columns:1fr 1fr;gap:10px;}
    .feat-numbers-grid{grid-template-columns:1fr 1fr;}
}

/* ═══════════════════════════════════════════════════════
   ADMIN PANEL — Sidebar layout, professional dashboard
   ═══════════════════════════════════════════════════════ */

/* ── Admin Layout Shell ── */
.admin-layout{display:flex;min-height:100vh;}

/* ── Sidebar ── */
.admin-sidebar{
    width:240px;position:fixed;top:0;left:0;bottom:0;
    background:var(--bg-card);border-right:1px solid var(--border);
    display:flex;flex-direction:column;z-index:200;
    transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.sidebar-header{
    padding:20px 20px 16px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:10px;
}
.sidebar-header img{height:22px;width:auto;}
.sidebar-header .admin-badge{
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
    color:var(--accent);background:var(--accent-glow);
    padding:3px 8px;border-radius:4px;
}
.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto;}
.sidebar-nav a{
    display:flex;align-items:center;gap:12px;padding:10px 20px;
    color:var(--text-secondary);font-size:14px;font-weight:500;
    transition:all .2s;border-left:3px solid transparent;text-decoration:none;
}
.sidebar-nav a:hover{
    color:var(--text-primary);background:rgba(255,255,255,.03);
}
.sidebar-nav a.active{
    color:var(--accent);background:var(--accent-glow);
    border-left-color:var(--accent);font-weight:600;
}
.sidebar-nav a .nav-icon{
    width:20px;height:20px;display:flex;align-items:center;justify-content:center;
    font-size:16px;flex-shrink:0;opacity:.7;
}
.sidebar-nav a.active .nav-icon{opacity:1;}
.sidebar-nav .nav-section{
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;
    color:var(--text-muted);padding:20px 20px 8px;
}
.sidebar-nav .nav-divider{
    height:1px;background:var(--border);margin:8px 16px;
}
.sidebar-footer{
    padding:16px 20px;border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:8px;
}
.sidebar-user{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:var(--radius);background:rgba(255,255,255,.02);
}
.sidebar-user-avatar{
    width:32px;height:32px;border-radius:8px;
    background:linear-gradient(135deg,var(--accent),var(--purple));
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:#fff;flex-shrink:0;
}
.sidebar-user-info{overflow:hidden;}
.sidebar-user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-role{font-size:11px;color:var(--text-muted);}

/* ── Admin Main Content ── */
.admin-main{flex:1;margin-left:240px;display:flex;flex-direction:column;min-height:100vh;}

/* ── Admin Topbar ── */
.admin-topbar{
    padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--border);background:var(--bg-nav);
    position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.admin-topbar-left{display:flex;align-items:center;gap:16px;}
.admin-topbar-left h1{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.admin-topbar-left .breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);}
.admin-topbar-left .breadcrumb a{color:var(--text-muted);}
.admin-topbar-left .breadcrumb a:hover{color:var(--text-primary);}
.admin-topbar-left .breadcrumb .sep{opacity:.4;}
.admin-topbar-right{display:flex;align-items:center;gap:12px;}
.admin-topbar-right .btn-icon{
    width:36px;height:36px;border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border);color:var(--text-secondary);
    cursor:pointer;transition:all .2s;font-size:16px;
}
.admin-topbar-right .btn-icon:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--text-muted);}

/* Mobile sidebar toggle */
.sidebar-toggle{display:none;width:36px;height:36px;border-radius:var(--radius);background:transparent;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:18px;align-items:center;justify-content:center;}

/* ── Admin Content Area ── */
.admin-content{flex:1;padding:28px 32px 40px;}
.admin-content .page-header{padding:0 0 20px;border-bottom:1px solid var(--border);margin-bottom:24px;}

/* ── Admin Stats Row ── */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.admin-stat{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:20px;display:flex;align-items:center;gap:14px;
    transition:border-color .3s,transform .3s;
}
.admin-stat:hover{border-color:rgba(255,255,255,.06);transform:translateY(-2px);}
.admin-stat-icon{
    width:44px;height:44px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.admin-stat-icon.blue{background:rgba(48,120,200,.12);color:var(--accent);}
.admin-stat-icon.green{background:rgba(46,204,113,.12);color:var(--success);}
.admin-stat-icon.amber{background:rgba(243,156,18,.12);color:var(--warning);}
.admin-stat-icon.purple{background:rgba(155,89,182,.12);color:var(--purple);}
.admin-stat-icon.red{background:rgba(231,76,60,.12);color:var(--danger);}
.admin-stat-value{font-size:26px;font-weight:700;line-height:1;}
.admin-stat-label{font-size:12px;color:var(--text-muted);margin-top:4px;}

/* ── Admin Cards ── */
.admin-card{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    overflow:hidden;transition:border-color .3s;
}
.admin-card:hover{border-color:rgba(255,255,255,.04);}
.admin-card-header{
    padding:16px 20px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.admin-card-header h3{font-size:15px;font-weight:700;}
.admin-card-body{padding:20px;}
.admin-card-body.no-pad{padding:0;}

/* ── Admin Tables ── */
.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-table thead{background:rgba(255,255,255,.02);}
.admin-table th{
    text-align:left;padding:10px 16px;font-size:11px;font-weight:600;
    color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;
    border-bottom:1px solid var(--border);white-space:nowrap;
}
.admin-table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr:hover td{background:rgba(255,255,255,.02);}
.admin-table .col-actions{text-align:right;white-space:nowrap;}
.admin-table .col-id{width:50px;color:var(--text-muted);}
.admin-table .user-cell{display:flex;align-items:center;gap:10px;}
.admin-table .user-avatar{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--purple));
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;color:#fff;
}
.admin-table .user-info{line-height:1.3;}
.admin-table .user-name{font-weight:600;font-size:13px;}
.admin-table .user-email{font-size:12px;color:var(--text-muted);}

/* ── License Key Display ── */
.license-key{
    display:inline-flex;align-items:center;gap:6px;
    font-family:'Courier New',monospace;font-size:12px;font-weight:600;
    color:var(--accent);background:var(--accent-glow);
    padding:4px 10px;border-radius:6px;letter-spacing:.5px;
}
.license-key .copy-btn{
    width:22px;height:22px;border:none;background:transparent;
    color:var(--text-muted);cursor:pointer;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;font-size:13px;
}
.license-key .copy-btn:hover{color:var(--accent);background:rgba(48,120,200,.15);}
.license-key .copy-btn.copied{color:var(--success);}

/* ── Status Indicator ── */
.status-indicator{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.status-indicator::before{
    content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.status-indicator.st-active{color:var(--success);}
.status-indicator.st-active::before{background:var(--success);box-shadow:0 0 8px rgba(46,204,113,.4);}
.status-indicator.st-inactive{color:var(--text-muted);}
.status-indicator.st-inactive::before{background:var(--text-muted);}
.status-indicator.st-expired{color:var(--warning);}
.status-indicator.st-expired::before{background:var(--warning);box-shadow:0 0 8px rgba(243,156,18,.4);}
.status-indicator.st-revoked{color:var(--danger);}
.status-indicator.st-revoked::before{background:var(--danger);}
.status-indicator.st-blocked{color:#FF6B6B;}
.status-indicator.st-blocked::before{background:#FF6B6B;box-shadow:0 0 8px rgba(255,107,107,.4);}
.status-indicator.st-pending{color:var(--warning);}
.status-indicator.st-pending::before{background:var(--warning);box-shadow:0 0 8px rgba(243,156,18,.4);}
.status-indicator.st-approved{color:var(--success);}
.status-indicator.st-approved::before{background:var(--success);}
.status-indicator.st-rejected{color:var(--danger);}
.status-indicator.st-rejected::before{background:var(--danger);}

/* ── Admin Filter Tabs ── */
.admin-filters{display:flex;align-items:center;gap:4px;padding:0 20px 0;margin-bottom:-1px;position:relative;z-index:1;}
.admin-filter{
    padding:10px 16px;font-size:12px;font-weight:600;
    color:var(--text-muted);text-decoration:none;border-bottom:2px solid transparent;
    transition:all .2s;
}
.admin-filter:hover{color:var(--text-secondary);}
.admin-filter.active{color:var(--accent);border-bottom-color:var(--accent);}
.admin-filter .filter-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:rgba(255,255,255,.06);font-size:10px;margin-left:4px;
}
.admin-filter.active .filter-count{background:var(--accent-glow);color:var(--accent);}

/* ── Search Bar ── */
.admin-search{
    display:flex;align-items:center;gap:8px;
    background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);
    padding:0 12px;transition:border-color .2s,box-shadow .2s;
}
.admin-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.admin-search .search-icon{color:var(--text-muted);font-size:14px;flex-shrink:0;}
.admin-search input{
    flex:1;border:none;background:transparent;color:var(--text-primary);
    font-size:13px;font-family:var(--font);padding:8px 0;outline:none;
}
.admin-search input::placeholder{color:var(--text-muted);}

/* ── Admin Grid Layouts ── */
.admin-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.admin-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}

/* ── Admin Action Buttons ── */
.admin-actions{display:flex;align-items:center;gap:4px;justify-content:flex-end;}
.admin-actions form{display:inline-flex;gap:4px;}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:6px;}
.btn-outline-success{background:transparent;color:var(--success);border:1px solid rgba(46,204,113,.3);}
.btn-outline-success:hover{background:rgba(46,204,113,.1);color:var(--success);}
.btn-outline-danger{background:transparent;color:var(--danger);border:1px solid rgba(231,76,60,.3);}
.btn-outline-danger:hover{background:rgba(231,76,60,.1);color:var(--danger);}
.btn-outline-warning{background:transparent;color:var(--warning);border:1px solid rgba(243,156,18,.3);}
.btn-outline-warning:hover{background:rgba(243,156,18,.1);color:var(--warning);}
.btn-outline-primary{background:transparent;color:var(--accent);border:1px solid rgba(48,120,200,.3);}
.btn-outline-primary:hover{background:rgba(48,120,200,.1);color:var(--accent);}

/* ── Admin Modal ── */
.admin-modal-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,0.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    z-index:1000;align-items:center;justify-content:center;
}
.admin-modal-overlay.open{display:flex;}
.admin-modal{
    background:var(--bg-card);border:1px solid var(--border-strong);
    border-radius:var(--radius-lg);width:100%;max-width:480px;
    box-shadow:0 24px 80px rgba(0,0,0,.5);animation:modal-in .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-in{from{opacity:0;transform:translateY(20px) scale(.96);}to{opacity:1;transform:none;}}
.admin-modal-header{
    padding:20px 24px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
}
.admin-modal-header h3{font-size:16px;font-weight:700;}
.admin-modal-close{
    width:28px;height:28px;border-radius:6px;border:none;
    background:transparent;color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:18px;
    transition:all .2s;
}
.admin-modal-close:hover{background:rgba(255,255,255,.06);color:var(--text-primary);}
.admin-modal-body{padding:24px;}
.admin-modal-footer{
    padding:16px 24px;border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
}

/* ── Admin Form Row ── */
.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ── Empty State ── */
.admin-empty{text-align:center;padding:48px 20px;color:var(--text-muted);}
.admin-empty-icon{font-size:40px;margin-bottom:12px;opacity:.5;}
.admin-empty-text{font-size:14px;}

/* ── Expiry Tag ── */
.expiry-tag{font-size:11px;display:inline-block;margin-top:2px;}
.expiry-tag.lifetime{color:var(--text-muted);}
.expiry-tag.ok{color:var(--text-secondary);}
.expiry-tag.soon{color:var(--warning);}
.expiry-tag.past{color:var(--danger);}

/* ── Machine ID ── */
.machine-id{
    font-family:'Courier New',monospace;font-size:11px;color:var(--text-muted);
    background:rgba(255,255,255,.03);padding:2px 6px;border-radius:4px;
}

/* ── Admin Footer ── */
.admin-footer{
    padding:16px 32px;border-top:1px solid var(--border);
    font-size:12px;color:var(--text-muted);text-align:center;
}

/* ── Comparison Table ── */
.compare-section{padding:60px 0 80px;}
.compare-table{width:100%;border-collapse:collapse;font-size:14px;}
.compare-table thead th{padding:16px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--border-strong);}
.compare-table thead th:first-child{text-align:left;color:var(--text-secondary);}
.compare-table thead th.th-essential{color:var(--text-secondary);}
.compare-table thead th.th-advanced{color:var(--accent);}
.compare-table tbody td{padding:13px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary);text-align:center;}
.compare-table tbody td:first-child{text-align:left;color:var(--text-primary);font-weight:500;}
.compare-table tbody tr:hover{background:rgba(255,255,255,.015);}
.compare-table .cmp-check{color:#2ecc71;font-weight:700;font-size:16px;}
.compare-table .cmp-cross{color:#50505C;font-size:16px;}
.compare-table .cmp-limit{color:var(--text-muted);font-size:13px;}
.compare-table .cmp-unlimited{color:#2ecc71;font-size:13px;font-weight:600;}
.compare-table .cmp-group{background:rgba(255,255,255,.02);}
.compare-table .cmp-group td{font-weight:700;color:var(--text-primary);font-size:13px;text-transform:uppercase;letter-spacing:.4px;padding-top:18px;}
@media(max-width:768px){
    .compare-table{font-size:13px;}
    .compare-table thead th,.compare-table tbody td{padding:10px 8px;}
}

/* ── Included Grid (replaces compare table) ── */
.included-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px 32px;
}
.included-item{
    display:flex;align-items:flex-start;gap:12px;
    padding:14px 0;font-size:14px;color:var(--text-secondary);line-height:1.5;
}
.included-check{
    color:#2ecc71;font-weight:700;font-size:18px;flex-shrink:0;margin-top:1px;
}
@media(max-width:768px){.included-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.included-grid{grid-template-columns:1fr;}}

/* ── Feature Badge (Advanced) ── */
.feat-badge-adv{
    display:inline-block;padding:2px 8px;border-radius:10px;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
    background:rgba(48,120,200,.12);color:var(--accent);
    margin-left:8px;vertical-align:middle;
}

/* ── Admin Responsive ── */
@media(max-width:1024px){
    .admin-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .admin-sidebar{transform:translateX(-100%);}
    .admin-sidebar.open{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,.5);}
    .admin-main{margin-left:0;}
    .admin-content{padding:20px 16px;}
    .admin-topbar{padding:0 16px;}
    .sidebar-toggle{display:flex;}
    .admin-stats{grid-template-columns:1fr;}
    .admin-form-row{grid-template-columns:1fr;}
    .admin-grid-2,.admin-grid-3{grid-template-columns:1fr;}
    /* Overlay when sidebar open */
    .sidebar-overlay{
        display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;
    }
    .sidebar-overlay.open{display:block;}
}