:root{
    color-scheme: dark;

    --hue-red: 354;
    --hue-crimson: 348;
    --red:        hsl(var(--hue-red) 66% 60%);
    --crimson:    hsl(var(--hue-crimson) 56% 54%);
    --soft-white: hsl(0 0% 98%);
    --off-white:  hsl(0 0% 92%);

    --bg-0: #0d0f13;
    --bg-1: #12151c;
    --txt:  #f5f7fb;
    --muted:#b7c0d1;

    --glass-1: rgba(255,255,255,.10);
    --glass-2: rgba(255,255,255,.06);
    --border:  rgba(255,255,255,.22);
    --shadow:  0 12px 40px rgba(0,0,0,.35);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --blur: 18px;

    --focus: 0 0 0 2px color-mix(in oklab, var(--red) 65%, transparent),
    0 0 0 6px color-mix(in oklab, white 25%, transparent);

    --neon-1:  color-mix(in oklab, var(--red) 68%, white 8%);
    --neon-2:  color-mix(in oklab, var(--crimson) 52%, white 6%);

    --accent-grad: linear-gradient(90deg, var(--red), var(--off-white));

    --blob-speed: 28s;
    --blob-scale: 1.08;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
    margin:0; color:var(--txt); background:var(--bg-1);
    font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro", Inter, Segoe UI, Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

.lgx-page{ min-height:100vh; position:relative; isolation:isolate; padding:clamp(16px,3vw,32px); }

.lgx-backdrop{ position:fixed; inset:0; z-index:-1; background:var(--bg-1); overflow:hidden; }
.lgx-backdrop::before,
.lgx-backdrop::after{
    content:""; position:absolute; inset:-18%; will-change:transform,opacity,filter; filter:saturate(112%) contrast(104%);
}
.lgx-backdrop::before{
    background:
        radial-gradient(55% 45% at 14% 8%,  color-mix(in oklab, var(--red) 75%, transparent) 0%, transparent 62%),
        radial-gradient(60% 50% at 86% 16%, color-mix(in oklab, var(--crimson) 70%, transparent) 0%, transparent 64%),
        radial-gradient(70% 60% at 50% 112%, color-mix(in oklab, var(--off-white) 45%, transparent) 0%, transparent 66%);
    animation: lgx-float var(--blob-speed) ease-in-out infinite alternate;
    transform: translate3d(0,0,0) scale(var(--blob-scale));
}
.lgx-backdrop::after{
    background-image:
        linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,.012) 2px 4px);
    mix-blend-mode: overlay; opacity:.58; animation: lgx-drift calc(var(--blob-speed)*1.35) linear infinite;
}
@keyframes lgx-float{ 0%{ transform:translate3d(-2%,-2%,0) scale(1.05) } 50%{ transform:translate3d(2%,1%,0) scale(1.09) } 100%{ transform:translate3d(-1%,3%,0) scale(1.05) } }
@keyframes lgx-drift{ to{ transform:translate3d(0,-1%,0) } }

.glass{
    background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
    backdrop-filter: blur(var(--blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(125%);
    border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow);
}
.glass-sm{
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
    backdrop-filter: blur(calc(var(--blur) - 4px)) saturate(120%);
    -webkit-backdrop-filter: blur(calc(var(--blur) - 4px)) saturate(120%);
    border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}

.lgx-hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(16px,2.5vw,32px); padding:clamp(18px,3vw,28px); align-items:center; }
.lgx-hero-left{ display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center; }
.avatar{
    width:96px; height:96px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:40px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--red) 30%, transparent), color-mix(in oklab, white 26%, transparent));
    border:1px solid var(--border); backdrop-filter: blur(10px); box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.hero-text .title{ margin:0 0 6px; font-size:clamp(28px,3.6vw,44px); letter-spacing:.2px; }
.hero-text .accent{ background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subtitle{ margin:0; color:var(--crimson); font-size:clamp(14px,1.6vw,18px); }
.strap{ margin-top:8px; color:#f0f3f9; opacity:.95; }

.lgx-hero-right{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.metric{ padding:16px; text-align:center; border-radius:var(--radius-md); transition:transform .25s ease, box-shadow .25s ease; }
.metric:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.35); }
.metric-num{ font-size:28px; font-weight:800; line-height:1; }
.metric-label{ color:var(--crimson); font-size:13px; margin-top:6px; }

.btn{ -webkit-tap-highlight-color:transparent; display:inline-flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:14px; border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.07));
    color:var(--txt); text-decoration:none; cursor:pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    backdrop-filter: blur(6px);
}
.btn .icon{ width:18px; height:18px; fill:currentColor; opacity:.9 }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.35) }
.btn:active{ transform:translateY(0) }
.btn.primary{
    border-color: color-mix(in oklab, var(--red) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in oklab, var(--red) 38%, transparent), color-mix(in oklab, white 20%, transparent));
}
.btn.ghost{ background:transparent }
.btn.outline{ background:transparent; border-style:dashed; border-color:rgba(255,255,255,.38) }

.section{ margin-top:clamp(22px,3vw,32px); padding:clamp(16px,3vw,28px); }
.section-title{
    margin:0 0 8px; font-size:clamp(20px,2.2vw,28px); line-height:1.18; position:relative; font-weight:800;
    text-shadow:
        0 0 2px color-mix(in oklab, var(--neon-1) 55%, transparent),
        0 0 12px color-mix(in oklab, var(--neon-1) 45%, transparent),
        0 0 22px color-mix(in oklab, var(--neon-2) 40%, transparent),
        0 2px 0 rgba(0,0,0,.35);
    animation: neon-breathe 4.5s ease-in-out infinite;
}
@keyframes neon-breathe{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.12) } }

.skills-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.skill{ padding:12px; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border:1px solid var(--border); transition:transform .25s ease, box-shadow .25s ease; }
.skill:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.28) }
.skill-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.skill-label{ font-weight:600 }
.skill-value{ color:var(--txt); font-size:13px }
.skill-track{ height:12px; background:rgba(255,255,255,.08); border-radius:999px; border:1px solid var(--border); overflow:hidden; margin-top:8px; position:relative }
.skill-bar{ --val:0%; width:var(--val); height:100%; background: var(--accent-grad);
    box-shadow: inset 0 0 12px rgba(255,255,255,.25); border-right:1px solid rgba(255,255,255,.35);
    transition: width .8s cubic-bezier(.2,.8,.2,1); }
.skill-hint{ margin:8px 0 0; color:var(--crimson); font-size:12px }

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding:0; list-style:none }
.tag{ padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:rgba(255,255,255,.07) }

.cards{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ padding:16px; border-radius:var(--radius-lg); transition:transform .25s ease, box-shadow .25s ease }
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.35) }
.card h3{ margin:0 0 8px; font-size:18px }
.list{ margin:0; padding-left:18px; color:var(--txt) }
.list li{ margin:6px 0 }

.timeline{ margin-top:18px; padding:16px; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border:1px solid var(--border); position:relative }
.timeline::before{ content:""; position:absolute; left:18px; top:24px; bottom:24px; width:2px; background:var(--accent-grad); opacity:.85; border-radius:2px }
.step{ position:relative; padding-left:44px; margin:14px 0 }
.step h4{ margin:0 0 4px; font-size:16px }
.step p{ margin:0; color:var(--red) }
.dot{ position:absolute; left:10px; top:18px; width:16px; height:16px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #fff5 28%, #0000 32%), linear-gradient(135deg, var(--red), white);
    border:1px solid var(--border); box-shadow:0 8px 18px rgba(0,0,0,.35); }

.footer{ text-align:center }
.smallprint{ color:var(--txt); font-size:12px; margin-top:12px }
:focus-visible{ outline:0; box-shadow:var(--focus) }
@media (prefers-reduced-motion: reduce){
    .btn,.skill-bar,.card,.skill,.metric,.section-title{ transition:none !important; animation:none !important }
    .lgx-backdrop::before,.lgx-backdrop::after{ animation:none !important }
}

@media (max-width:980px){
    .lgx-hero{ grid-template-columns:1fr }
    .lgx-hero-right{ grid-template-columns:repeat(3,1fr) }
    .skills-grid{ grid-template-columns:1fr }
    .cards{ grid-template-columns:1fr }
}

.neon{
    position:relative; display:inline-block; color:#fff;
    -webkit-text-stroke:.5px rgba(0,0,0,.35); paint-order: stroke fill;
    text-shadow: 0 0 2px rgba(255,255,255,.75), 0 0 6px rgba(255,255,255,.6);
    animation: neon-breathe 3.2s ease-in-out infinite;
}
.neon::before{ content:attr(data-text); position:absolute; inset:0; pointer-events:none; color:transparent; }
.neon--red{
    --n1: var(--neon-1);
    --n2: var(--neon-2);
    background: linear-gradient(90deg, var(--red), white);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.neon.neon--red::before{
    text-shadow:
        0 0 10px var(--n1),
        0 0 22px var(--n1),
        0 0 42px var(--n2),
        0 0 78px var(--n2),
        0 0 110px color-mix(in oklab, var(--red) 65%, white 35%);
}
.neon.sm{ filter: drop-shadow(0 0 6px var(--n1)); }
.neon.lg{ filter: drop-shadow(0 0 10px var(--n1)) drop-shadow(0 0 24px var(--n2)); }