:root {
    --black: #09090b;
    --black-2: #101014;
    --black-3: #17171d;
    --panel: #141418;
    --panel-2: #1a1a20;
    --yellow: #f5c518;
    --yellow-2: #ffd84a;
    --purple: #7c3aed;
    --purple-2: #9b6cff;
    --white: #ffffff;
    --text: #f4f4f5;
    --muted: #a7a7b0;
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(255,255,255,.14);
}

html { scroll-behavior: smooth; }
body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--black);
    line-height: 1.7;
    padding-top: 78px;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--yellow); color: var(--black); }

.portfolio-navbar {
    min-height: 78px;
    background: rgba(9,9,11,.88);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
    transition: .25s ease;
}
.portfolio-navbar.scrolled {
    background: rgba(9,9,11,.96);
    box-shadow: 0 12px 38px rgba(0,0,0,.34);
}
.navbar-brand { color: var(--white)!important; letter-spacing: -.03em; font-size: 1.25rem; }
.navbar-brand span { color: var(--yellow); }
.custom-logo-wrap img { max-height: 42px; width: auto; }
.nav-link { color: #c7c7cf!important; font-weight: 550; padding-inline: .8rem!important; position: relative; }
.nav-link:hover { color: var(--yellow)!important; }
.nav-link::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem;
    height: 2px; transform: scaleX(0); transform-origin: left;
    background: linear-gradient(90deg,var(--yellow),var(--purple));
    transition: transform .2s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.hero-section {
    position: relative;
    background:
        radial-gradient(circle at 82% 18%, rgba(124,58,237,.24), transparent 26%),
        radial-gradient(circle at 15% 10%, rgba(245,197,24,.13), transparent 22%),
        linear-gradient(180deg,#0a0a0d 0%,#0d0d11 70%,#101014 100%);
    overflow: hidden;
}
.hero-section::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent 85%);
}
.hero-section .container { position: relative; z-index:1; }
.hero-kicker,.section-label {
    display:inline-block; color:var(--yellow); font-size:.75rem; font-weight:850; letter-spacing:.15em;
}
.hero-section h1 { max-width:900px; line-height:1.03; letter-spacing:-.058em; color:var(--white); }
.hero-section h1::first-line { color:inherit; }
.hero-copy,.section-copy { color:var(--muted); max-width:760px; }

.btn-primary {
    --bs-btn-bg:var(--yellow); --bs-btn-border-color:var(--yellow); --bs-btn-color:var(--black);
    --bs-btn-hover-bg:var(--yellow-2); --bs-btn-hover-border-color:var(--yellow-2); --bs-btn-hover-color:var(--black);
    border-radius:11px; font-weight:800; box-shadow:0 10px 30px rgba(245,197,24,.12);
}
.btn-outline-dark {
    color:#e8e8eb; border-color:rgba(155,108,255,.6); background:rgba(124,58,237,.06);
    border-radius:11px; font-weight:700;
}
.btn-outline-dark:hover { color:white; border-color:var(--purple); background:var(--purple); }

.hero-panel {
    position:relative;
    background:linear-gradient(145deg,rgba(124,58,237,.14),transparent 45%),#15151a;
    color:white; border:1px solid rgba(155,108,255,.26); border-radius:24px; padding:28px;
    box-shadow:0 32px 80px rgba(0,0,0,.38); transform:rotate(1deg);
}
.hero-panel-top { display:flex; align-items:center; gap:10px; color:#bcbcc5; font-size:.9rem; margin-bottom:22px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 5px rgba(245,197,24,.12); }
.hero-stat { padding:20px 0; border-top:1px solid var(--line); }
.hero-stat strong,.hero-stat small { display:block; }
.hero-stat strong { font-size:1.1rem; margin-bottom:4px; }
.hero-stat small { color:#9898a2; }

.section-padding { padding:96px 0; }
.bg-white { background:var(--black-2)!important; }
.soft-section {
    background:radial-gradient(circle at 12% 15%,rgba(245,197,24,.06),transparent 20%),#0d0d11;
}
.section-heading { max-width:700px; }
.section-title,.page-title {
    color:var(--white); font-size:clamp(2rem,3vw,3.2rem); line-height:1.1;
    letter-spacing:-.045em; font-weight:780;
}

.profile-card {
    position:relative; border-radius:28px; overflow:hidden; background:#17171c; border:1px solid var(--line);
    box-shadow:0 28px 70px rgba(0,0,0,.25); aspect-ratio:1/1.05;
}
.profile-photo { width:100%; height:100%; object-fit:cover; object-position:center; }
.profile-placeholder {
    display:grid; place-items:center;
    background:
        radial-gradient(circle at 75% 20%,rgba(124,58,237,.24),transparent 30%),
        radial-gradient(circle at 20% 80%,rgba(245,197,24,.13),transparent 28%),
        #111116;
}
.profile-monogram {
    font-size:clamp(5rem,10vw,8rem); font-weight:900; letter-spacing:-.08em;
    background:linear-gradient(135deg,var(--yellow),var(--purple-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.profile-caption {
    position:absolute; left:24px; bottom:20px; color:#c7c7cf; font-size:.9rem; letter-spacing:.04em;
}

.mini-info {
    display:flex; gap:14px; align-items:flex-start; background:#141418; border:1px solid var(--line);
    padding:18px; border-radius:16px; height:100%; transition:.2s ease;
}
.mini-info:hover { border-color:rgba(245,197,24,.25); transform:translateY(-2px); }
.mini-info i { color:var(--yellow); font-size:1.25rem; }
.mini-info strong,.mini-info span { display:block; }
.mini-info strong { color:var(--white); }
.mini-info span { color:var(--muted); font-size:.9rem; }

.expertise-card {
    height:100%; background:linear-gradient(180deg,#15151a 0%,#121216 100%);
    border:1px solid var(--line); border-radius:20px; padding:24px; transition:.25s ease;
}
.expertise-card:hover { transform:translateY(-5px); border-color:rgba(124,58,237,.3); box-shadow:0 22px 55px rgba(0,0,0,.24); }
.icon-box {
    width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:var(--yellow);
    background:linear-gradient(145deg,rgba(245,197,24,.10),rgba(124,58,237,.12));
    border:1px solid rgba(255,255,255,.06); font-size:1.35rem; margin-bottom:20px;
}
.expertise-card h3 { color:var(--white); font-size:1.06rem; font-weight:760; }
.expertise-card p { color:var(--muted); font-size:.93rem; margin-bottom:0; }

.portfolio-filter { overflow-x:auto; padding-bottom:4px; }
.filter-btn {
    border:1px solid var(--line); background:#141418; color:#bebec6; padding:9px 15px;
    border-radius:999px; font-size:.88rem; font-weight:680; white-space:nowrap; transition:.2s ease;
}
.filter-btn:hover { color:var(--white); border-color:rgba(124,58,237,.45); background:rgba(124,58,237,.10); }
.filter-btn.active {
    background:var(--yellow); border-color:var(--yellow); color:var(--black);
    box-shadow:0 8px 22px rgba(245,197,24,.12);
}
.portfolio-item { transition:opacity .25s ease, transform .25s ease; }
.portfolio-item.is-hidden { display:none; }

.project-card,.article-card {
    border:1px solid var(--line); border-radius:22px; overflow:hidden;
    background:linear-gradient(180deg,#15151a 0%,#121216 100%);
    display:flex; flex-direction:column; transition:.25s ease;
}
.project-card:hover,.article-card:hover {
    transform:translateY(-7px); border-color:rgba(155,108,255,.33); box-shadow:0 26px 70px rgba(0,0,0,.28);
}
.project-image-wrap,.article-image-wrap { position:relative; background:#0f0f13; overflow:hidden; border-bottom:1px solid var(--line); }
.project-image,.article-image {
    width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .35s ease,filter .35s ease;
}
.project-card:hover .project-image,.article-card:hover .article-image { transform:scale(1.025); }
.project-image-placeholder,.article-image-placeholder {
    display:grid; place-items:center; font-size:3rem; color:var(--purple-2);
    background:
        radial-gradient(circle at 70% 20%,rgba(124,58,237,.22),transparent 30%),
        radial-gradient(circle at 20% 80%,rgba(245,197,24,.10),transparent 26%),#101014;
}
.project-category {
    position:absolute; top:14px; left:14px; padding:7px 10px; border-radius:999px;
    background:rgba(9,9,11,.88); border:1px solid rgba(245,197,24,.24); color:var(--yellow);
    font-size:.72rem; font-weight:820; backdrop-filter:blur(10px);
}
.project-body,.article-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.project-body h3,.article-body h3 { color:var(--white); font-size:1.22rem; line-height:1.3; font-weight:770; letter-spacing:-.02em; }
.project-body p,.article-body p { color:var(--muted); font-size:.94rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:7px; }
.tag-list span,.tag-list a {
    background:rgba(124,58,237,.10); color:#c9b8ff; border:1px solid rgba(155,108,255,.18);
    padding:5px 9px; border-radius:7px; font-size:.73rem; font-weight:660;
}
.btn-link-custom,.text-link { border:none; padding:0; background:transparent; color:var(--yellow); font-weight:780; }
.btn-link-custom:hover,.text-link:hover { color:var(--purple-2); }
.article-section { background:#0d0d11; }
.article-meta { display:flex; flex-wrap:wrap; gap:10px; color:#8f8f99; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.article-meta span:first-child { color:var(--yellow); }

.technology-section {
    background:radial-gradient(circle at 80% 20%,rgba(124,58,237,.20),transparent 26%),linear-gradient(135deg,#09090b 0%,#111018 100%);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.technology-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.technology-cloud span {
    color:#efeff3; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);
    padding:9px 13px; border-radius:10px; font-size:.9rem; transition:.2s ease;
}
.technology-cloud span:hover { color:var(--black); border-color:var(--yellow); background:var(--yellow); }

.contact-section { background:radial-gradient(circle at 18% 30%,rgba(245,197,24,.06),transparent 18%),#0d0d11; }
.contact-box {
    position:relative; overflow:hidden; border:1px solid rgba(155,108,255,.22);
    background:linear-gradient(145deg,rgba(124,58,237,.10),transparent 40%),#141418;
    border-radius:26px; padding:clamp(30px,5vw,58px); box-shadow:0 26px 65px rgba(0,0,0,.24);
}

.site-footer { background:#08080a; border-top:1px solid var(--line); padding:26px 0; color:#8f8f99; font-size:.9rem; }
.footer-links,.footer-menu { display:flex; gap:18px; }
.footer-links a:hover,.footer-menu a:hover { color:var(--yellow); }

.page-shell { min-height:70vh; background:var(--black); }
.page-hero,.single-hero {
    background:
        radial-gradient(circle at 80% 10%,rgba(124,58,237,.17),transparent 26%),
        linear-gradient(180deg,#0c0c10 0%,#101014 100%);
    border-bottom:1px solid var(--line);
}
.compact-hero { padding:100px 0 70px; }
.single-hero { padding:90px 0 54px; }
.single-title {
    color:white; max-width:980px; font-size:clamp(2.5rem,6vw,5.6rem);
    line-height:1.02; letter-spacing:-.06em; font-weight:840; margin:18px 0;
}
.single-lead { color:#b7b7c0; font-size:1.2rem; max-width:820px; }
.single-byline { display:flex; gap:9px; color:#8f8f99; font-size:.92rem; margin-top:24px; }
.back-link { color:#c0c0c8; font-size:.9rem; }
.back-link:hover { color:var(--yellow); }

.article-container { max-width:900px; }
.single-featured,.project-featured {
    margin:46px 0; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:#111116;
}
.single-featured img,.project-featured img { width:100%; max-height:680px; object-fit:cover; }
.article-content {
    color:#d8d8de; font-size:1.07rem; line-height:1.9; padding:20px 0 70px;
}
.article-content h2,.article-content h3,.article-content h4 {
    color:white; line-height:1.2; letter-spacing:-.03em; margin-top:2.1em; margin-bottom:.8em;
}
.article-content h2 { font-size:2rem; }
.article-content h3 { font-size:1.5rem; }
.article-content a { color:var(--yellow); text-decoration:underline; text-underline-offset:3px; }
.article-content blockquote {
    border-left:4px solid var(--purple); background:#15151b; padding:20px 24px; border-radius:0 14px 14px 0;
    color:#c9c9d0; margin:2rem 0;
}
.article-content img { border-radius:14px; }
.single-tags { border-top:1px solid var(--line); padding:28px 0 70px; }
.single-tags strong { display:block; color:white; }
.project-detail-grid { padding-bottom:80px; }
.project-sidebar {
    position:sticky; top:110px; border:1px solid var(--line); border-radius:18px;
    background:#131318; padding:22px;
}
.sidebar-block + .sidebar-block { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.sidebar-block > span { display:block; color:#83838e; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.sidebar-block > strong { display:block; color:white; margin-top:5px; }
.project-content { padding-top:0; }

.empty-state {
    border:1px dashed rgba(255,255,255,.16); background:#121217; border-radius:18px; padding:36px; color:var(--muted);
}
.empty-state h3 { color:white; }
.pagination-wrap .nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.pagination-wrap .page-numbers {
    display:inline-flex; min-width:40px; height:40px; align-items:center; justify-content:center;
    padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#141418; color:#c7c7cf;
}
.pagination-wrap .page-numbers.current,.pagination-wrap .page-numbers:hover {
    background:var(--yellow); color:var(--black); border-color:var(--yellow);
}
.error-page { min-height:72vh; display:grid; place-items:center; }

@media (max-width:991.98px) {
    body { padding-top:70px; }
    .portfolio-navbar { min-height:70px; }
    .hero-section .min-vh-100 { min-height:auto!important; padding-top:80px!important; padding-bottom:80px!important; }
    .hero-panel { transform:none; }
    .section-padding { padding:76px 0; }
    .navbar-collapse { padding:14px 0 10px; background:rgba(9,9,11,.97); }
    .project-sidebar { position:static; }
}
@media (max-width:575.98px) {
    .hero-section h1 { font-size:2.5rem; }
    .section-title,.page-title { font-size:2rem; }
    .section-padding { padding:62px 0; }
    .project-body,.article-body { padding:20px; }
    .single-title { font-size:2.6rem; }
    .compact-hero { padding:76px 0 52px; }
    .single-hero { padding:72px 0 44px; }
}