/* ═══════════════════════════════════════════
   Logoland Studio — Complete Website Styles
   ═══════════════════════════════════════════ */

:root {
    --bg: #060a14;
    --bg2: #0a1020;
    --bg3: #0f1729;
    --card: rgba(15, 23, 42, 0.7);
    --card-hover: rgba(20, 30, 52, 0.8);
    --border: rgba(255,255,255,0.06);
    --border-h: rgba(255,255,255,0.12);
    --text: #e2e8f0;
    --muted: #8492a6;
    --faint: #4a5568;
    --accent: #4a9eff;
    --accent2: #a855f7;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
    --r: 12px;
    --r-lg: 20px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --max: 1200px;
    --t: .2s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ─── Buttons ─── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-weight:600; border:none; cursor:pointer; transition:var(--t); border-radius:999px; text-decoration:none; white-space:nowrap; }
.btn-sm { padding:8px 18px; font-size:14px; }
.btn-lg { padding:14px 28px; font-size:16px; }
.btn-block { width:100%; justify-content:center; padding:12px 24px; font-size:15px; }
.btn-primary { background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; }
.btn-primary:hover { filter:brightness(1.15); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border-h); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost { background:rgba(255,255,255,0.05); color:var(--text); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); }
.btn-glass { background:rgba(255,255,255,0.06); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(12px); }
.btn-glass:hover { background:rgba(255,255,255,0.1); border-color:var(--border-h); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { filter:brightness(1.15); }
.btn-success { background:var(--green); color:#fff; }

/* ─── Gradient text ─── */
.gradient-text { background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */
.nav { position:fixed; top:0; left:0; right:0; z-index:9999; transition:var(--t); }
.nav.scrolled { background:rgba(6,10,20,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:var(--max); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo img { height:28px; }
.nav-links { display:flex; gap:32px; }
.nav-links a { font-size:14px; font-weight:500; color:var(--muted); transition:var(--t); }
.nav-links a:hover { color:#fff; }
.nav-actions { display:flex; gap:10px; align-items:center; }
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-hamburger span { display:block; width:20px; height:2px; background:var(--text); margin:4px 0; transition:var(--t); border-radius:2px; }

@media(max-width:768px){
    .nav-links, .nav-actions { display:none; }
    .nav-hamburger { display:block; }
    .nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg2); padding:20px 24px; border-bottom:1px solid var(--border); }
    .nav-actions.open { display:flex; position:absolute; top:calc(100% + 200px); left:0; right:0; background:var(--bg2); padding:0 24px 20px; justify-content:center; }
}

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero { position:relative; padding:140px 24px 60px; text-align:center; overflow:hidden; max-width:var(--max); margin:0 auto; z-index:1; }
.hero-glow { position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:800px; height:600px; background:radial-gradient(ellipse, rgba(74,158,255,0.12) 0%, rgba(168,85,247,0.06) 40%, transparent 70%); pointer-events:none; }
.hero-badge { display:inline-block; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--accent); background:rgba(74,158,255,0.1); border:1px solid rgba(74,158,255,0.2); margin-bottom:24px; }
.hero h1 { font-size:clamp(40px,7vw,72px); font-weight:800; line-height:1.05; letter-spacing:-0.03em; margin-bottom:20px; }
.hero-sub { font-size:18px; color:var(--muted); max-width:560px; margin:0 auto 32px; line-height:1.6; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.hero-meta { display:flex; gap:20px; justify-content:center; font-size:13px; color:var(--faint); }
.hero-meta .sep { width:1px; background:var(--border-h); }

/* ─── App Mockup ─── */
.hero-mockup { margin-top:60px; perspective:1200px; position:relative; z-index:1; }
.mockup-window { background:var(--bg2); border-radius:14px; border:1px solid var(--border); overflow:hidden; box-shadow:0 20px 80px rgba(0,0,0,0.5), 0 0 120px rgba(74,158,255,0.06); }
.mockup-window-lg .showcase-img { width:100%; display:block; }
.mockup-titlebar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(15,23,42,0.8); border-bottom:1px solid var(--border); }
.dot { width:12px; height:12px; border-radius:50%; }
.dot-r { background:#ff5f57; }
.dot-y { background:#febc2e; }
.dot-g { background:#28c840; }
.mockup-title { margin-left:8px; display:flex; align-items:center; }
.mockup-body { display:flex; min-height:380px; }

/* ─── Mock Sidebar (matches real app) ─── */
.mock-sidebar { width:180px; min-width:180px; background:rgba(8,12,24,0.6); border-right:1px solid var(--border); padding:12px 0; overflow-y:auto; }
.mock-section-label { font-size:10px; font-weight:700; color:var(--faint); letter-spacing:0.08em; text-transform:uppercase; padding:10px 14px 4px; }
.mock-nav-item { display:flex; align-items:center; gap:8px; padding:5px 14px; font-size:12px; color:var(--muted); cursor:default; border-radius:6px; margin:1px 6px; transition:var(--t); }
.mock-nav-item.active { background:rgba(74,158,255,0.12); color:#fff; }
.mock-nav-item:hover { background:rgba(255,255,255,0.04); }
.mock-icon { font-size:13px; width:18px; text-align:center; }
.mock-icon-img { width:16px; height:16px; opacity:0.5; flex-shrink:0; }
.mock-nav-item.active .mock-icon-img { opacity:0.9; }

/* ─── Mock Content (matches real app) ─── */
.mock-content { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
.mock-hero-bar { display:flex; justify-content:space-between; align-items:flex-start; padding:16px 20px; background:linear-gradient(135deg, rgba(74,158,255,0.15), rgba(168,85,247,0.08)); border-radius:10px; border:1px solid rgba(74,158,255,0.12); margin-bottom:6px; }
.mock-h1 { font-size:18px; font-weight:700; margin-bottom:4px; }
.mock-sub { font-size:11px; color:var(--muted); }
.mock-row { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:8px; border:1px solid var(--border); }
.mock-toggle { width:36px; height:20px; border-radius:10px; background:rgba(255,255,255,0.1); position:relative; flex-shrink:0; }
.mock-toggle::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:var(--t); }
.mock-toggle.on { background:var(--accent); }
.mock-toggle.on::after { left:19px; background:#fff; }
.mock-btn-bar { margin-top:auto; }
.mock-btn-run { width:100%; padding:10px; border:none; border-radius:8px; background:linear-gradient(135deg, var(--green), #06b6d4); color:#fff; font-weight:600; font-size:13px; cursor:default; }
.mock-bottom-row { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); padding-top:8px; border-top:1px solid var(--border); }
.mock-btn-group { display:flex; gap:8px; }
.mock-btn-secondary { padding:6px 14px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:11px; cursor:default; }
.mock-btn-accent { padding:6px 14px; border-radius:999px; border:none; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; font-size:11px; cursor:default; }

/* ═══════════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════════ */
.stats-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:40px 0; }
.stats-bar .container { display:flex; justify-content:center; gap:60px; flex-wrap:wrap; }
.stat { text-align:center; }
.stat strong { display:block; font-size:32px; font-weight:800; background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat span { font-size:13px; color:var(--muted); }

/* ═══════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════ */
.section-head { text-align:center; margin-bottom:56px; }
.section-head .label { display:inline-block; font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:12px; }
.section-head h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-0.02em; margin-bottom:12px; }
.section-head p { font-size:17px; color:var(--muted); max-width:500px; margin:0 auto; }

/* ═══════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════ */
.features { padding:100px 0; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.fcard { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:28px; transition:var(--t); }
.fcard:hover { background:var(--card-hover); border-color:var(--border-h); transform:translateY(-2px); }
.fcard-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); border:1px solid var(--border); margin-bottom:16px; color:var(--c); }
.fcard h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.fcard p { font-size:14px; color:var(--muted); line-height:1.5; }

/* ═══════════════════════════════════════════
   SHOWCASE
   ═══════════════════════════════════════════ */
.showcase { padding:80px 0 100px; }
.showcase-frame { max-width:960px; margin:0 auto; }
.showcase-img { border-radius:0 0 13px 13px; }
.mockup-body-lg { min-height:440px; }

/* ═══════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════ */
.pricing { padding:100px 0; background:var(--bg2); }
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:48px; }
.toggle-label { font-size:14px; color:var(--muted); cursor:pointer; transition:var(--t); }
.toggle-label.active { color:#fff; font-weight:600; }
.toggle-label em { font-style:normal; color:var(--green); font-size:12px; font-weight:600; }
.toggle-switch { width:48px; height:26px; border-radius:13px; background:rgba(255,255,255,0.1); border:1px solid var(--border); cursor:pointer; position:relative; transition:var(--t); }
.toggle-switch.active { background:var(--accent); border-color:var(--accent); }
.toggle-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:var(--t); }
.toggle-switch.active .toggle-knob { left:25px; }

.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; max-width:960px; margin:0 auto; }
.pcard { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:36px; position:relative; transition:var(--t); }
.pcard:hover { border-color:var(--border-h); }
.pcard-pop { border-color:var(--accent); background:rgba(74,158,255,0.04); }
.pcard-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 16px; border-radius:999px; font-size:12px; font-weight:700; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; }
.pcard h3 { font-size:22px; font-weight:700; margin-bottom:4px; }
.pcard-desc { font-size:14px; color:var(--muted); margin-bottom:20px; }
.pcard-price { margin-bottom:24px; }
.price-val { font-size:40px; font-weight:800; letter-spacing:-0.03em; }
.price-unit { font-size:14px; color:var(--muted); }
.pcard ul { list-style:none; margin-bottom:28px; display:flex; flex-direction:column; gap:10px; }
.pcard li { font-size:14px; color:var(--muted); padding-left:24px; position:relative; }
.pcard li::before { content:''; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%; background:rgba(34,197,94,0.15); }
.pcard li::after { content:''; position:absolute; left:4px; top:9px; width:6px; height:3px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg); }

/* ═══════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════ */
.faq { padding:100px 0; }
.faq-list { max-width:700px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:var(--t); }
.faq-item[open] { border-color:var(--border-h); }
.faq-item summary { padding:18px 24px; font-weight:600; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:20px; color:var(--muted); transition:var(--t); }
.faq-item[open] summary::after { transform:rotate(45deg); color:var(--accent); }
.faq-item p { padding:0 24px 18px; font-size:14px; color:var(--muted); line-height:1.7; }

/* ═══════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════ */
.cta { padding:80px 0; }
.cta-box { text-align:center; padding:64px 40px; border-radius:var(--r-lg); background:linear-gradient(135deg, rgba(74,158,255,0.08), rgba(168,85,247,0.06)); border:1px solid rgba(74,158,255,0.15); }
.cta-box h2 { font-size:32px; font-weight:800; margin-bottom:12px; }
.cta-box p { font-size:17px; color:var(--muted); margin-bottom:28px; }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer { padding:64px 0 32px; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-brand p { font-size:14px; color:var(--muted); margin-top:12px; max-width:280px; line-height:1.6; }
.footer-col h4 { font-size:14px; font-weight:700; margin-bottom:16px; color:var(--text); }
.footer-col a { display:block; font-size:13px; color:var(--muted); margin-bottom:10px; transition:var(--t); }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--border); }
.footer-bottom p { font-size:13px; color:var(--faint); }
@media(max-width:768px){
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
    .footer-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════
   DASHBOARD / ADMIN SHARED STYLES
   ═══════════════════════════════════════════ */
.layout { display:flex; min-height:100vh; }
.sidebar { width:230px; min-width:230px; background:var(--bg2); border-right:1px solid var(--border); padding:0; display:flex; flex-direction:column; }
.sidebar-logo { padding:16px 16px 14px; border-bottom:1px solid var(--border); }
.sidebar-logo img { height:20px; }
.sidebar-section { padding:0 8px; margin-bottom:4px; }
.sidebar-section:first-of-type { margin-top:12px; }
.sidebar-label { font-size:9px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:0.1em; padding:8px 10px 3px; }
.sidebar-link { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:12.5px; color:var(--muted); border-radius:6px; transition:var(--t); cursor:pointer; margin:1px 0; text-decoration:none; }
.sidebar-link:hover { background:rgba(255,255,255,0.04); color:var(--text); }
.sidebar-link.active { background:rgba(74,158,255,0.1); color:#fff; }
.sidebar-link svg { width:16px; height:16px; opacity:0.5; flex-shrink:0; }
.sidebar-link.active svg { opacity:0.9; }
.sidebar-spacer { flex:1; }
.sidebar-footer { padding:8px; border-top:1px solid var(--border); margin-top:auto; }

.main { flex:1; overflow-y:auto; background:var(--bg); }
.main-header { padding:24px 32px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.main-header h1 { font-size:22px; font-weight:700; }
.main-body { padding:32px; }

/* ─── Cards ─── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:24px; transition:var(--t); }
.card:hover { border-color:var(--border-h); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.card-title { font-size:15px; font-weight:700; }
.card-value { font-size:32px; font-weight:800; }
.card-meta { font-size:13px; color:var(--muted); margin-top:4px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; margin-bottom:28px; }

/* ─── Tables ─── */
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:var(--r); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { padding:12px 16px; text-align:left; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); }
td { padding:12px 16px; border-bottom:1px solid var(--border); color:var(--muted); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.015); }

/* ─── Badges ─── */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; }
.badge-green { background:rgba(34,197,94,0.15); color:var(--green); }
.badge-red { background:rgba(239,68,68,0.15); color:var(--red); }
.badge-yellow { background:rgba(234,179,8,0.15); color:var(--yellow); }
.badge-blue { background:rgba(74,158,255,0.15); color:var(--accent); }

/* ─── Forms ─── */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text); font-family:var(--font); font-size:14px; transition:var(--t); outline:none; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,158,255,0.1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ─── Tabs ─── */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.tab { padding:10px 20px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:var(--t); background:none; border-top:none; border-left:none; border-right:none; font-family:var(--font); }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ─── Charts placeholder ─── */
.chart-placeholder { height:200px; border-radius:var(--r); background:linear-gradient(135deg, rgba(74,158,255,0.04), rgba(168,85,247,0.03)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:14px; }

/* ─── User avatar ─── */
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.avatar-lg { width:64px; height:64px; font-size:24px; }

/* ─── Auth pages ─── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.auth-box { width:100%; max-width:400px; padding:40px; }
.auth-box .nav-logo { display:flex; justify-content:center; margin-bottom:32px; }
.auth-box h2 { text-align:center; font-size:24px; margin-bottom:8px; }
.auth-box .auth-sub { text-align:center; font-size:14px; color:var(--muted); margin-bottom:32px; }
.auth-divider { display:flex; align-items:center; gap:16px; margin:24px 0; color:var(--faint); font-size:12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-footer { text-align:center; margin-top:24px; font-size:13px; color:var(--muted); }
.auth-footer a { color:var(--accent); font-weight:600; }

/* ─── Empty state ─── */
.empty-state { text-align:center; padding:60px 20px; color:var(--muted); }
.empty-state svg { margin-bottom:16px; opacity:0.3; }
.empty-state h3 { font-size:18px; color:var(--text); margin-bottom:8px; }
.empty-state p { font-size:14px; margin-bottom:24px; }

/* ─── Slide Panel ─── */
.slide-panel { position:fixed; top:0; right:-480px; width:480px; max-width:100vw; height:100vh; background:var(--bg2); border-left:1px solid var(--border); z-index:10001; transition:right .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow:hidden; }
.slide-panel.open { right:0; }
.slide-panel-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
.slide-panel-header h3 { font-size:16px; font-weight:700; }
.slide-panel-body { flex:1; overflow-y:auto; padding:20px 24px; }
.slide-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:10000; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.slide-panel-overlay.open { opacity:1; pointer-events:auto; }

/* ─── Modal ─── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10002; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:28px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-header h3 { font-size:17px; font-weight:700; }

/* ─── User Detail Panel (udp) ─── */
.udp-section { padding:16px 0; border-bottom:1px solid var(--border); }
.udp-section:last-child { border-bottom:none; }
.udp-section-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; }
.udp-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; flex-shrink:0; overflow:hidden; }
.udp-avatar img { width:100%; height:100%; object-fit:cover; }
.udp-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.udp-info-item { display:flex; flex-direction:column; gap:2px; }
.udp-info-label { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.05em; }
.udp-info-value { font-size:13px; color:var(--text); }
.udp-license-card { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.udp-license-key { font-family:monospace; font-size:11px; color:var(--accent); word-break:break-all; }
.udp-device-item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; }
.udp-device-item:last-child { border-bottom:none; }
.udp-payment-item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; }
.udp-payment-item:last-child { border-bottom:none; }
.udp-ticket-item { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:12px; cursor:pointer; }
.udp-ticket-item:last-child { border-bottom:none; }
.udp-ticket-item:hover { color:var(--accent); }

/* ─── Responsive ─── */
@media(max-width:768px){
    .hero h1 { font-size:36px; }
    .mockup-body { flex-direction:column; }
    .mock-sidebar { width:100%; min-width:0; border-right:none; border-bottom:1px solid var(--border); padding:8px; display:flex; overflow-x:auto; gap:4px; }
    .mock-section-label { display:none; }
    .mock-nav-item { white-space:nowrap; font-size:11px; padding:4px 10px; }
    .features-grid { grid-template-columns:1fr; }
    .pricing-grid { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .main-header { padding:16px 20px; }
    .main-body { padding:20px; }
    .card-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .stats-bar .container { gap:30px; }
}