:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #0d1117;
    --bg-tertiary: #161b22;
    --bg-card: #1a1f2e;
    --neon-green: #00ff41;
    --neon-blue: #00d4ff;
    --neon-purple: #bd00ff;
    --neon-pink: #ff006e;
    --neon-orange: #ff6b00;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-dim: #484f58;
    --border-color: #30363d;
    --code-keyword: #ff7b72;
    --code-string: #a5d6ff;
    --code-variable: #79c0ff;
    --code-function: #d2a8ff;
    --code-comment: #8b949e;
    --code-property: #7ee787;
    --code-number: #f8c555;
    --code-tag: #7ee787;
    --glow-green: 0 0 10px #00ff41, 0 0 20px #00ff41, 0 0 40px #00ff41;
    --glow-blue: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 40px #00d4ff;
    --glow-purple: 0 0 10px #bd00ff, 0 0 20px #bd00ff, 0 0 40px #bd00ff;
    --bp-desktop: 1200px;
    --bp-laptop: 992px;
    --bp-tablet: 768px;
    --bp-mobile: 420px;
    --text-section-title: clamp(1.75rem, 5vw, 3rem);
    --text-terminal: clamp(0.78rem, 2.8vw, 0.9rem);
    --text-btn: clamp(0.85rem, 2.5vw, 1rem);
    --sidebar-w: 260px;
    --sidebar-w-icon: 76px;
    --mobile-header-h: 56px;
    --section-py: 72px;
    --section-py-mobile: 40px;
    --section-header-gap: 40px;
    --section-header-gap-mobile: 28px
}

* { margin: 0; padding: 0; box-sizing: border-box }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--neon-green) var(--bg-primary);
    overflow-x: clip
}
html::-webkit-scrollbar { width: 6px }
html::-webkit-scrollbar-track { background: var(--bg-primary) }
html::-webkit-scrollbar-thumb { background: var(--neon-green); border-radius: 3px }

body {
    font-family: Tajawal, "Fira Code", "JetBrains Mono", sans-serif;
    font-weight: 700;
    background:
        radial-gradient(circle at 15% 10%, rgba(0,212,255,.14), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(189,0,255,.12), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(0,255,65,.09), transparent 34%),
        var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    letter-spacing: .01em;
    cursor: auto
}

button, input, textarea { font-family: Tajawal, sans-serif; font-weight: 700 }

iconify-icon { display: inline-flex; vertical-align: middle }

.interactive-icon { transition: transform .35s ease, color .35s ease, filter .35s ease }
.interactive-icon:hover,
.sidebar-link:hover iconify-icon,
.social-link:hover iconify-icon,
.stat-card:hover .interactive-icon {
    transform: translateY(-3px) scale(1.12) rotate(-4deg);
    filter: drop-shadow(0 0 12px currentColor)
}

#matrix-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: .15; pointer-events: none }
#particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none }

.custom-cursor {
    width: 12px; height: 12px; border: 2px solid var(--neon-green); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 10000;
    transition: transform .1s ease, border-color .3s ease; mix-blend-mode: difference; display: none
}
.cursor-follower {
    width: 30px; height: 30px; background: #00ff411a; border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    transition: transform .3s ease, width .3s ease, height .3s ease; display: none
}

/* ========== SIDEBAR / SHELL ========== */
.sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 1090;
    background: rgba(4,10,20,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s ease; pointer-events: none
}
.mobile-topbar {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1101;
    height: var(--mobile-header-h); padding: 0 14px 0 10px; align-items: center; gap: 10px;
    background: linear-gradient(135deg, rgba(10,10,10,.97), rgba(13,17,23,.94));
    border-bottom: 1px solid var(--border-color);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 10px 40px rgba(0,0,0,.32)
}
.mobile-topbar-brand {
    display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    color: var(--text-primary); text-decoration: none; font-size: 1.05rem; font-weight: 800
}
.mobile-topbar-brand .logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mobile-topbar-status {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 6px 10px;
    border-radius: 999px; border: 1px solid rgba(0,212,255,.3); background: rgba(0,212,255,.08);
    font-size: .7rem; color: var(--neon-blue); text-decoration: none
}
.mobile-topbar-status iconify-icon { font-size: 1.05rem }
.sidebar-toggle {
    display: none; flex-shrink: 0; width: 40px; height: 40px; align-items: center; justify-content: center;
    border: 1px solid rgba(0,255,65,.35); border-radius: 10px; background: rgba(0,255,65,.06);
    color: var(--neon-green); cursor: pointer; transition: border-color .25s ease, background .25s ease
}
.sidebar-toggle:hover { border-color: var(--neon-green); background: rgba(0,255,65,.1) }
.sidebar-toggle iconify-icon { font-size: 1.35rem }
.toggle-icon-close { display: none }
body.sidebar-open .toggle-icon-open { display: none }
body.sidebar-open .toggle-icon-close { display: inline-flex }

.sidebar {
    position: fixed; top: 0; left: 0; z-index: 1100; display: flex; flex-direction: column;
    width: var(--sidebar-w); height: 100vh; height: 100dvh; padding: 22px 16px 18px;
    background: linear-gradient(180deg, rgba(10,10,10,.97), rgba(13,17,23,.95));
    border-right: 1px solid var(--border-color);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 12px 0 40px rgba(0,0,0,.28);
    transition: transform .32s ease, width .28s ease; overflow: hidden; overscroll-behavior: contain
}
.sidebar-header { margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(48,54,61,.8) }
.sidebar-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); text-decoration: none; font-size: 1.25rem; font-weight: 800 }
.logo-icon {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--neon-green); background: linear-gradient(135deg, rgba(0,255,65,.18), rgba(0,212,255,.12));
    border: 1px solid rgba(0,255,65,.35); border-radius: 14px; box-shadow: 0 0 24px rgba(0,255,65,.14)
}
.logo-icon iconify-icon, .social-link iconify-icon { font-size: 1.45rem }
.sidebar-nav { flex: 1; overflow-y: auto }
.sidebar-links { list-style: none; display: flex; flex-direction: column; gap: 6px }
.sidebar-link {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    color: var(--text-secondary); text-decoration: none; font-size: .85rem; font-weight: 700;
    text-transform: lowercase; transition: color .25s ease, background .25s ease, box-shadow .25s ease; position: relative
}
.sidebar-link iconify-icon { font-size: 1.35rem; flex-shrink: 0 }
.sidebar-link:hover, .sidebar-link.active {
    color: var(--neon-green); background: rgba(0,255,65,.08); box-shadow: inset 0 0 0 1px rgba(0,255,65,.18)
}
.sidebar-link--cta { color: var(--neon-blue) }
.sidebar-link--cta:hover { color: var(--neon-blue); background: rgba(0,212,255,.1); box-shadow: inset 0 0 0 1px rgba(0,212,255,.28) }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(48,54,61,.8); display: flex; flex-direction: column; gap: 16px }
.sidebar-status { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); text-decoration: none }
.status-icon { color: var(--neon-orange); font-size: 1.1rem }
.status-dot { width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%; animation: pulse 2s infinite; box-shadow: var(--glow-green) }
.status-text { font-size: .75rem; color: var(--neon-green) }
.sidebar-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.sidebar-social .social-link {
    width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(48,54,61,.9); color: var(--text-secondary);
    text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease
}
.sidebar-social .social-link:hover { color: var(--neon-green); border-color: rgba(0,255,65,.35); background: rgba(0,255,65,.06) }

.main-content {
    margin-left: var(--sidebar-w); position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh;
    width: auto; max-width: 100%; overflow-x: clip; transition: margin-left .28s ease
}
body.sidebar-open { overflow: hidden }
body.sidebar-open .sidebar-overlay { display: block; opacity: 1; pointer-events: auto }

@keyframes pulse { 0%,to { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(.8) } }

/* Tablet: icon-only sidebar */
body.vp-tablet .sidebar { width: var(--sidebar-w-icon); padding: 18px 10px 14px }
body.vp-tablet .sidebar-logo .logo-text,
body.vp-tablet .sidebar-link span,
body.vp-tablet .sidebar-status .status-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0
}
body.vp-tablet .sidebar-logo { justify-content: center; width: 100% }
body.vp-tablet .sidebar-link { justify-content: center; padding: 12px 8px }
body.vp-tablet .sidebar-link[data-tooltip]:hover::after {
    content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 6px 10px; border-radius: 8px; background: rgba(13,17,23,.98); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: .72rem; white-space: nowrap; z-index: 1200; pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.35)
}
body.vp-tablet .sidebar-footer { align-items: center }
body.vp-tablet .sidebar-status { justify-content: center }
body.vp-tablet .sidebar-social { justify-content: center }
body.vp-tablet .main-content { margin-left: var(--sidebar-w-icon) }

/* Mobile: drawer */
body.vp-mobile .mobile-topbar, body.vp-compact .mobile-topbar { display: flex }
body.vp-mobile .sidebar-toggle, body.vp-compact .sidebar-toggle { display: inline-flex }
body.vp-mobile .sidebar, body.vp-compact .sidebar {
    top: var(--mobile-header-h); width: min(280px,86vw);
    height: calc(100vh - var(--mobile-header-h)); height: calc(100dvh - var(--mobile-header-h));
    transform: translateX(-105%); box-shadow: 18px 0 60px rgba(0,0,0,.45)
}
body.vp-mobile .sidebar-overlay, body.vp-compact .sidebar-overlay { top: var(--mobile-header-h) }
body.vp-mobile.sidebar-open .sidebar, body.vp-compact.sidebar-open .sidebar { transform: translateX(0) }
body.vp-mobile .main-content, body.vp-compact .main-content { margin-left: 0; padding-top: var(--mobile-header-h); width: 100%; max-width: 100% }

/* ========== SECTIONS ========== */
.section { padding: var(--section-py) clamp(18px,5vw,72px); position: relative; z-index: 2 }
.section-header { margin-bottom: var(--section-header-gap); text-align: center }
.section-header--left { text-align: left }
.section-header .comment {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px;
    color: var(--code-comment); border: 1px solid rgba(0,212,255,.18); border-radius: 999px;
    background: rgba(0,212,255,.06); font-size: .85rem; margin-bottom: 14px
}
.section-header h1, .section-header h2 { font-size: var(--text-section-title); font-weight: 900; letter-spacing: .02em; color: var(--text-primary) }
.section-lead { margin-top: 14px; color: var(--text-secondary); font-weight: 500; max-width: 640px; margin-left: auto; margin-right: auto }

/* ===== Разделение секций (чередование фона + разделитель) ===== */
.main-content > .section { position: relative }
.main-content > .section:not(.hero-section)::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(100%, 1180px); height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.28), rgba(255,255,255,.14), rgba(0,212,255,.28), transparent);
    opacity: .7
}
.main-content > .section:nth-of-type(2n):not(.hero-section) { background: rgba(255,255,255,.032) }
.main-content > .section:nth-of-type(2n+1):not(.hero-section) { background: rgba(0,0,0,.24) }
.main-content > .section:not(.hero-section) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 20px 40px -30px rgba(0,0,0,.6)
}

.glitch { position: relative; animation: glitch-skew 4s infinite linear alternate-reverse }
.glitch:before, .glitch:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.glitch:before { color: var(--neon-blue); animation: glitch-effect 3s infinite linear alternate-reverse; clip-path: polygon(0 0,100% 0,100% 35%,0 35%); transform: translate(-2px,-2px); opacity: .7 }
.glitch:after { color: var(--neon-pink); animation: glitch-effect 2s infinite linear alternate-reverse; clip-path: polygon(0 65%,100% 65%,100% 100%,0 100%); transform: translate(2px,2px); opacity: .7 }
@keyframes glitch-effect { 0%{transform:translate(0)} 20%{transform:translate(-3px,3px)} 40%{transform:translate(-3px,-3px)} 60%{transform:translate(3px,3px)} 80%{transform:translate(3px,-3px)} to{transform:translate(0)} }
@keyframes glitch-skew { 0%{transform:skew(0)} 20%{transform:skew(0)} 21%{transform:skew(1deg)} 22%{transform:skew(0)} to{transform:skew(0)} }

/* ========== BUTTONS ========== */
.btn-primary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 22px; border-radius: 10px; font-size: var(--text-btn); font-weight: 800;
    text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease
}
.btn-primary { color: #041006; background: linear-gradient(135deg, var(--neon-green), #00d47a); border: 1px solid var(--neon-green); box-shadow: 0 10px 30px rgba(0,255,65,.18) }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,255,65,.35) }
.btn-primary iconify-icon { font-size: 1.2rem }
.btn-ghost { color: var(--text-primary); background: rgba(255,255,255,.03); border: 1px solid var(--border-color) }
.btn-ghost:hover { border-color: var(--neon-blue); color: var(--neon-blue); transform: translateY(-2px) }
.btn-sm { padding: 10px 16px; font-size: .82rem }
.btn-lg { padding: 16px 30px; font-size: 1.05rem }

/* ========== HERO ========== */
.hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding-top: 48px; padding-bottom: 48px }
.hero-content { display: flex; align-items: center; gap: clamp(28px,5vw,60px); max-width: 1200px; width: 100%; min-width: 0 }
.terminal-window { flex: 1; min-width: 0; background: var(--bg-secondary); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 70px rgba(0,0,0,.4), 0 0 30px #00ff410d }
.terminal-header { display: flex; align-items: center; padding: 12px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color) }
.terminal-dots { display: flex; gap: 8px; margin-right: 16px }
.dot { width: 12px; height: 12px; border-radius: 50% }
.dot.red { background: #ff5f57 } .dot.yellow { background: #febc2e } .dot.green { background: #28c840 }
.terminal-title { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text-dim) }
.terminal-body { padding: 26px }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 8px 12px; color: var(--neon-blue); border: 1px solid rgba(0,212,255,.24); border-radius: 999px; background: rgba(0,212,255,.07); font-size: .8rem }
.code-line { margin-bottom: 10px; font-size: var(--text-terminal); line-height: 1.8; font-family: "Fira Code", monospace }
.code-line .prompt { color: var(--neon-green); margin-right: 10px; text-shadow: 0 0 5px var(--neon-green) }
.code-line .command { color: var(--neon-blue) }
.code-line.output { color: var(--text-primary); padding-left: 20px }
.cursor { color: var(--neon-green); animation: blink 1s infinite; text-shadow: var(--glow-green) }
@keyframes blink { 0%,to{opacity:1} 50%{opacity:0} }
.hero-h1 { margin: 22px 0 12px; font-size: clamp(1.5rem,3.4vw,2.3rem); font-weight: 900; line-height: 1.2; color: #fff }
.hero-lead { color: var(--text-secondary); font-weight: 500; font-size: .98rem; line-height: 1.6; margin-bottom: 22px }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap }

.hero-visual-stack { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 0 0 340px; width: 340px; max-width: 100% }
.hero-visual-card {
    position: relative; width: 100%; aspect-ratio: 1/1; padding: 18px; display: flex; align-items: center; justify-content: center;
    isolation: isolate; border-radius: 22px; border: 1px solid rgba(0,212,255,.24);
    background:
        radial-gradient(circle at 30% 20%, rgba(0,212,255,.24), transparent 34%),
        radial-gradient(circle at 80% 80%, rgba(189,0,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary);
    box-shadow: 0 30px 100px rgba(0,0,0,.42), 0 0 70px rgba(0,212,255,.08); overflow: hidden
}
.hero-visual-card:before {
    content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,255,65,.08) 1px, transparent 1px), linear-gradient(0deg, rgba(0,212,255,.07) 1px, transparent 1px);
    background-size: 42px 42px; mask-image: radial-gradient(circle at center, #000 0%, transparent 72%); animation: visualGridDrift 14s linear infinite
}
.hero-visual-core { position: relative; z-index: 1; color: var(--neon-green); font-size: clamp(5rem,16vw,8rem); filter: drop-shadow(0 0 30px rgba(0,255,65,.5)); animation: floaty 6s ease-in-out infinite }
.code-rain { position: absolute; inset: -20% -8%; z-index: -2; display: flex; flex-direction: column; gap: 18px; transform: rotate(-12deg); opacity: .82 }
.code-rain span {
    width: max-content; padding: 8px 14px; color: rgba(126,231,135,.78); font-family: "Fira Code", monospace;
    font-size: clamp(.72rem,1vw,.9rem); font-weight: 700; letter-spacing: .03em;
    border: 1px solid rgba(0,255,65,.12); border-radius: 999px; background: rgba(0,255,65,.045);
    box-shadow: 0 0 24px rgba(0,255,65,.08); animation: codeFloat 9s linear infinite
}
.code-rain span:nth-child(2n) { align-self: flex-end; color: rgba(0,212,255,.82); border-color: rgba(0,212,255,.16); background: rgba(0,212,255,.05); animation-duration: 11s }
.code-rain span:nth-child(3n) { margin-left: 18%; color: rgba(210,168,255,.82); border-color: rgba(189,0,255,.16); background: rgba(189,0,255,.055); animation-duration: 13s }
.hero-visual-badge {
    position: absolute; z-index: 4; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 12px; color: var(--text-primary); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    background: rgba(10,14,22,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 40px rgba(0,0,0,.32)
}
.hero-visual-badge iconify-icon { color: var(--neon-blue); font-size: 1.25rem }
.scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--neon-green); text-decoration: none }
.scroll-text { font-size: .7rem; color: var(--text-dim) }
.scroll-icon { font-size: 1.65rem; color: var(--neon-green); animation: bounce 2s infinite }
@keyframes bounce { 0%,to{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes floaty { 0%,to{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes codeFloat { 0%{transform:translate3d(-8%,20px,0);opacity:0} 18%,82%{opacity:1} 100%{transform:translate3d(18%,-70px,0);opacity:0} }
@keyframes visualGridDrift { 0%{background-position:0 0,0 0} 100%{background-position:84px 42px,42px 84px} }

/* ========== ABOUT ========== */
.about-container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; max-width: 1200px; margin: 0 auto }
.code-editor { background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 70px rgba(0,0,0,.35) }
.editor-header { padding: 10px 16px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color) }
.editor-tabs { display: flex; gap: 2px }
.editor-tabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; font-size: .75rem; color: var(--text-dim); border-radius: 6px 6px 0 0 }
.editor-tabs .tab.active { color: var(--text-primary); background: var(--bg-secondary); border-top: 2px solid var(--neon-green) }
.about-text { padding: 26px; font-size: .95rem; line-height: 1.7; color: var(--text-secondary); font-weight: 500 }
.about-text p { margin-bottom: 14px }
.legal-note { display: flex; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid rgba(0,255,65,.24); border-radius: 12px; background: rgba(0,255,65,.05); color: var(--text-primary); font-size: .88rem; font-weight: 500 }
.legal-note iconify-icon { color: var(--neon-green); font-size: 1.5rem; flex-shrink: 0 }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.stat-card {
    min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 24px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary);
    box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; position: relative; overflow: hidden
}
.stat-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--neon-green), var(--neon-blue), var(--neon-purple)); opacity: 0; transition: opacity .3s ease }
.stat-card:hover { transform: translateY(-5px); border-color: var(--neon-green); box-shadow: 0 10px 30px #00ff411a }
.stat-card:hover:before { opacity: 1 }
.stat-number { font-size: 2.1rem; font-weight: 900; color: var(--neon-green); text-shadow: 0 0 10px rgba(0,255,65,.5) }
.stat-label { font-size: .78rem; color: var(--text-secondary); margin-top: 8px; font-weight: 500 }

/* ========== SERVICES ========== */
.services-section { max-width: 1240px; margin: 0 auto }
.service-group { margin-bottom: 44px }
.group-head { text-align: center; margin-bottom: 26px }
.group-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,255,65,.28); background: rgba(0,255,65,.07); color: var(--neon-green); font-size: 1rem; font-weight: 800 }
.group-badge iconify-icon { font-size: 1.3rem }
.group-sub { margin-top: 10px; color: var(--text-secondary); font-weight: 500; font-size: .9rem }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.service-card {
    display: flex; flex-direction: column; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary);
    box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; position: relative; overflow: hidden
}
.service-card:hover { transform: translateY(-8px); border-color: var(--neon-blue); box-shadow: 0 26px 80px rgba(0,212,255,.16) }
.service-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.service-icon { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--neon-blue); background: rgba(0,212,255,.09); border: 1px solid rgba(0,212,255,.22) }
.service-icon iconify-icon { font-size: 1.7rem }
.service-icon--lg { width: 76px; height: 76px; border-radius: 22px }
.service-icon--lg iconify-icon { font-size: 2.4rem }
.service-price { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0,255,65,.3); background: rgba(0,255,65,.08); color: var(--neon-green); font-size: .85rem; font-weight: 800; white-space: nowrap }
.service-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 8px }
.service-tagline { color: var(--text-secondary); font-weight: 500; font-size: .88rem; line-height: 1.5; margin-bottom: 16px }
.service-meta { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; flex: 1 }
.service-meta li { font-size: .85rem; color: var(--text-primary); font-weight: 500; line-height: 1.5 }
.meta-key { display: block; font-family: "Fira Code", monospace; font-size: .72rem; color: var(--code-comment); margin-bottom: 3px }
.service-card-foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.price-note { font-size: .72rem; color: var(--text-dim); font-weight: 500 }
.service-card-foot .btn-primary { width: 100% }
.service-more { font-size: .78rem; color: var(--neon-blue); text-decoration: none; align-self: center }
.service-more:hover { text-shadow: 0 0 10px var(--neon-blue) }

/* ========== AUDIENCE ========== */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto }
.audience-card { padding: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary); box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .3s ease, border-color .3s ease }
.audience-card:hover { transform: translateY(-6px); border-color: var(--neon-purple); box-shadow: 0 20px 60px rgba(189,0,255,.15) }
.audience-icon { display: inline-flex; color: var(--neon-purple); font-size: 2.6rem; margin-bottom: 14px }
.audience-card h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 10px }
.audience-card p { color: var(--text-secondary); font-weight: 500; line-height: 1.6 }

/* ========== CASES ========== */
.cases-section { max-width: 1200px; margin: 0 auto }
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px }
.case-card { padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), var(--bg-secondary); box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .35s ease, border-color .35s ease }
.case-card:hover { transform: translateY(-6px); border-color: var(--neon-green); box-shadow: 0 20px 60px rgba(0,255,65,.12) }
.case-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px }
.project-dots { display: flex; gap: 6px } .project-dots .dot { width: 10px; height: 10px }
.case-metric { padding: 4px 12px; border-radius: 999px; background: rgba(0,255,65,.1); color: var(--neon-green); border: 1px solid rgba(0,255,65,.3); font-size: .72rem; font-weight: 800 }
.case-title { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 4px }
.case-sub { color: var(--neon-blue); font-size: .8rem; font-weight: 700; margin-bottom: 10px }
.case-desc { color: var(--text-secondary); font-weight: 500; font-size: .88rem; line-height: 1.55; margin-bottom: 16px }
.case-tags { display: flex; gap: 8px; flex-wrap: wrap }
.tag-item { padding: 3px 10px; font-size: .68rem; background: #00ff411a; color: var(--neon-green); border: 1px solid rgba(0,255,65,.3); border-radius: 6px; font-weight: 700 }

/* ========== WORKS / PORTFOLIO ========== */
.works-section { max-width: 1240px; margin: 0 auto }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.work-card { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--bg-secondary); box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease }
.work-card:hover { transform: translateY(-8px); border-color: var(--neon-blue); box-shadow: 0 26px 80px rgba(0,212,255,.16) }
.work-preview { position: relative; height: 240px; overflow: hidden; border-bottom: 1px solid var(--border-color); background: #0b1020 }
.work-frame { position: absolute; top: 0; left: 0; width: 333.33%; height: 800px; border: 0; transform: scale(.3); transform-origin: top left; pointer-events: none; background: #fff }
.work-open-overlay { position: absolute; inset: 0; z-index: 2; cursor: pointer }
.work-card:hover .work-preview::after { opacity: 1 }
.work-preview::after { content: "Открыть →"; position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(6,10,20,.55); color: #fff; font-weight: 800; opacity: 0; transition: opacity .3s ease; pointer-events: none }
.work-badge { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 5px 12px; border-radius: 999px; background: rgba(10,14,22,.82); border: 1px solid rgba(0,212,255,.35); color: var(--neon-blue); font-size: .72rem; font-weight: 800; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
.work-noframe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 3rem }
.work-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
.work-title { font-size: 1.08rem; font-weight: 800; color: #fff }
.work-sub { color: var(--text-secondary); font-size: .86rem; font-weight: 500; line-height: 1.45 }
.work-tags { display: flex; gap: 8px; flex-wrap: wrap }
.work-open { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--neon-blue); font-weight: 700; font-size: .84rem; text-decoration: none }
.work-open:hover { text-shadow: 0 0 10px var(--neon-blue) }
@media (max-width: 1024px) { .works-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 680px) { .works-grid { grid-template-columns: 1fr } }
body.vp-mobile .works-grid, body.vp-compact .works-grid { grid-template-columns: 1fr }

/* ========== FAQ ========== */
.faq-section { max-width: 820px; margin: 0 auto }
.faq-list { display: flex; flex-direction: column; gap: 12px }
.faq-item { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--bg-secondary); overflow: hidden; transition: border-color .3s ease }
.faq-item[open] { border-color: rgba(0,212,255,.35) }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; font-size: .98rem; font-weight: 800; color: var(--text-primary); list-style: none }
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary:hover { color: var(--neon-blue) }
.faq-chevron { font-size: 1.2rem; color: var(--neon-blue); transition: transform .3s ease; flex-shrink: 0 }
.faq-item[open] .faq-chevron { transform: rotate(180deg) }
.faq-answer { padding: 0 20px 20px; color: var(--text-secondary); font-weight: 500; line-height: 1.65; font-size: .9rem }
.faq-answer p { margin-bottom: 10px }

/* ========== CTA ========== */
.cta-section { display: flex; justify-content: center }
.cta-panel {
    max-width: 720px; width: 100%; text-align: center; padding: 48px 32px; border-radius: 22px;
    border: 1px solid rgba(0,212,255,.28);
    background: radial-gradient(circle at 50% 0%, rgba(0,212,255,.16), transparent 60%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--bg-secondary);
    box-shadow: 0 30px 90px rgba(0,0,0,.4)
}
.cta-panel--inline { margin-top: 40px }
.cta-icon { display: inline-flex; color: var(--neon-blue); font-size: 3rem; margin-bottom: 14px; filter: drop-shadow(0 0 20px rgba(0,212,255,.5)) }
.cta-panel h2 { font-size: clamp(1.4rem,3vw,2rem); font-weight: 900; color: #fff; margin-bottom: 12px }
.cta-panel p { color: var(--text-secondary); font-weight: 500; line-height: 1.6; margin-bottom: 24px; max-width: 520px; margin-left: auto; margin-right: auto }
.cta-note { display: block; margin-top: 14px; color: var(--text-dim); font-size: .8rem; font-family: "Fira Code", monospace }

/* ========== INNER PAGES ========== */
.inner-section { min-height: calc(100vh - 120px); padding-top: 56px }
.inner-wrap { max-width: 1000px; margin: 0 auto }
.inner-wrap--narrow { max-width: 760px }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font-size: .85rem; margin-bottom: 24px; font-weight: 700 }
.back-link:hover { color: var(--neon-blue) }
.inner-hero { text-align: center; margin-bottom: 40px }
.inner-hero .service-icon { margin: 0 auto 18px }
.inner-hero h1 { font-size: clamp(1.8rem,5vw,2.8rem); font-weight: 900; color: #fff; margin-bottom: 12px }
.inner-lead { color: var(--text-secondary); font-weight: 500; font-size: 1.05rem; max-width: 620px; margin: 0 auto 18px }
.service-price--lg { display: inline-flex; align-items: center; gap: 10px; font-size: 1.1rem; padding: 10px 18px }
.inner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px }
.inner-block { padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), var(--bg-secondary) }
.inner-block-key { display: inline-flex; align-items: center; gap: 8px; color: var(--neon-blue); font-weight: 800; font-size: .82rem; margin-bottom: 12px }
.inner-block p { color: var(--text-secondary); font-weight: 500; line-height: 1.6; font-size: .9rem }

/* ========== TARIFFS ========== */
.tariffs-head { text-align: center; margin: 20px 0 26px }
.tariffs-head h2 { font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 900; color: #fff }
.tariffs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 8px }
.tariff-card {
    position: relative; display: flex; flex-direction: column; padding: 26px 22px; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--bg-secondary);
    box-shadow: 0 22px 70px rgba(0,0,0,.35); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
}
.tariff-card:hover { transform: translateY(-6px); border-color: rgba(0,212,255,.4) }
.tariff-card--popular { border-color: rgba(0,255,65,.5); box-shadow: 0 26px 80px rgba(0,255,65,.14) }
.tariff-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--neon-green), #00d47a); color: #04140a; font-size: .72rem; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,255,65,.3) }
.tariff-title { font-size: 1.15rem; font-weight: 800; color: #fff; margin-bottom: 4px }
.tariff-sub { color: var(--text-secondary); font-size: .82rem; font-weight: 500; margin-bottom: 14px; min-height: 34px }
.tariff-price { font-size: 1.6rem; font-weight: 900; color: var(--neon-green); text-shadow: 0 0 12px rgba(0,255,65,.35); margin-bottom: 18px }
.tariff-price span { display: inline; font-size: .8rem; font-weight: 600; color: var(--text-dim); text-shadow: none; margin-left: 6px }
.tariff-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; flex: 1 }
.tariff-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; color: var(--text-primary); font-weight: 500; line-height: 1.45 }
.tariff-feats iconify-icon { color: var(--neon-green); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px }
.tariff-card .btn-primary { width: 100% }
@media (max-width: 900px) { .tariffs-grid { grid-template-columns: 1fr } }

.prose { color: var(--text-secondary); font-weight: 500; line-height: 1.75; font-size: .96rem }
.prose h2 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 26px 0 12px }
.prose h3 { color: var(--text-primary); font-size: 1.05rem; font-weight: 800; margin: 20px 0 10px }
.prose p { margin-bottom: 14px }
.prose ul, .prose ol { margin: 0 0 14px 20px }
.prose li { margin-bottom: 6px }
.prose a { color: var(--neon-blue) }
.prose strong { color: var(--text-primary) }

.error-wrap { max-width: 640px; margin: 0 auto }

/* ========== FOOTER ========== */
.footer { padding: 30px clamp(18px,5vw,60px); border-top: 1px solid var(--border-color); position: relative; z-index: 2 }
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; max-width: 1240px; margin: 0 auto }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: .8rem; font-weight: 700 }
.footer-links a:hover { color: var(--neon-green) }
.footer-code { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--text-dim) }
.footer-year { font-size: .75rem; color: var(--text-secondary) }
.neon-text { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green) }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease }
.reveal.visible { opacity: 1; transform: translateY(0) }

body:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px); pointer-events: none; z-index: 9998 }
::selection { background: #00ff414d; color: #fff }

/* ========== VIEWPORT SYSTEM ========== */
body.vp-desktop .services-grid { grid-template-columns: repeat(3, 1fr) }
body.vp-desktop #matrix-canvas { opacity: .15 }
body.vp-laptop .services-grid { grid-template-columns: repeat(2, 1fr) }
body.vp-laptop #matrix-canvas { opacity: .12 }
body.vp-tablet .services-grid { grid-template-columns: repeat(2, 1fr) }
body.vp-tablet #matrix-canvas { opacity: .08 }
body.vp-tablet .hero-content { flex-direction: column }
body.vp-tablet .terminal-window, body.vp-tablet .hero-visual-stack { width: 100%; max-width: 100% }
body.vp-tablet .hero-visual-stack { flex: none; max-width: 420px; margin: 0 auto }

@media (max-width: 1024px) {
    .about-container { grid-template-columns: 1fr }
    .services-grid { grid-template-columns: repeat(2, 1fr) }
    .cases-grid { grid-template-columns: 1fr }
    .inner-grid { grid-template-columns: 1fr }
}
@media (max-width: 900px) { .hero-content { flex-direction: column } .hero-visual-stack { width: 100%; max-width: 380px } }
@media (max-width: 768px) {
    .services-grid { grid-template-columns: 1fr }
    .audience-grid { grid-template-columns: 1fr }
    .about-stats { grid-template-columns: 1fr 1fr }
    .footer-content { flex-direction: column; text-align: center }
    .custom-cursor, .cursor-follower { display: none }
}

body.vp-mobile .hero-content, body.vp-compact .hero-content { flex-direction: column; gap: 24px; width: 100%; max-width: 100% }
body.vp-mobile .terminal-window, body.vp-compact .terminal-window { width: 100%; max-width: 100% }
body.vp-mobile .terminal-title, body.vp-compact .terminal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
body.vp-mobile .hero-visual-stack, body.vp-compact .hero-visual-stack { flex: none; width: 100%; max-width: min(300px,100%); margin: 0 auto }
body.vp-mobile .hero-section, body.vp-compact .hero-section { min-height: calc(100dvh - var(--mobile-header-h)); padding: 20px 16px 32px; justify-content: flex-start }
body.vp-mobile .section, body.vp-compact .section { padding: var(--section-py-mobile) 16px 32px; max-width: 100% }
body.vp-mobile .services-grid, body.vp-compact .services-grid,
body.vp-mobile .audience-grid, body.vp-compact .audience-grid,
body.vp-mobile .cases-grid, body.vp-compact .cases-grid,
body.vp-mobile .inner-grid, body.vp-compact .inner-grid { grid-template-columns: 1fr }
body.vp-mobile .about-stats, body.vp-compact .about-stats { grid-template-columns: 1fr 1fr }
body.vp-compact .about-stats { grid-template-columns: 1fr }
body.vp-mobile #matrix-canvas, body.vp-compact #matrix-canvas { opacity: .05 }
body.vp-mobile .custom-cursor, body.vp-mobile .cursor-follower,
body.vp-compact .custom-cursor, body.vp-compact .cursor-follower { display: none }
body.vp-mobile .section-header h1, body.vp-mobile .section-header h2 { font-size: clamp(1.8rem,10vw,2.4rem) }

/* ========== FX MODES ========== */
.fx-lite .glitch, .fx-lite .glitch::before, .fx-lite .glitch::after,
.fx-minimal .glitch, .fx-minimal .glitch::before, .fx-minimal .glitch::after { animation: none }
.fx-lite .sidebar { -webkit-backdrop-filter: none; backdrop-filter: none }
.fx-lite #matrix-canvas { opacity: .08 }
.fx-minimal #matrix-canvas, .fx-minimal #particles-canvas { display: none }
body.fx-lite::after, body.fx-minimal::after { display: none }
.fx-minimal .code-rain span, .fx-minimal .hero-visual-core, .fx-minimal .scroll-icon, .fx-minimal .status-dot { animation: none }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important }
}