:root{
  --blue-1:#dff8ff;
  --blue-2:#79c8ef;
  --blue-3:#1678b5;
  --blue-4:#0a416b;
  --ink:#123e5d;
  --muted:#58778b;
  --glass:rgba(238,250,255,.58);
  --glass-strong:rgba(246,253,255,.78);
  --line:rgba(255,255,255,.9);
  --shadow:0 22px 55px rgba(8,65,103,.28);
  --accent:#2aa9e0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink);
  background:
    radial-gradient(circle at 10% 5%,#f7ffff 0,transparent 25%),
    radial-gradient(circle at 90% 12%,#bdeeff 0,transparent 27%),
    linear-gradient(135deg,#75d5f5 0%,#4da8dc 43%,#165f9a 100%);
  transition:background .35s,color .35s;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-5;
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.22) 48%,transparent 54%);
  background-size:720px 720px;animation:sheen 20s linear infinite;
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-4;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);
  background-size:4px 4px;opacity:.06;
}
.aurora{position:fixed;border-radius:50%;filter:blur(55px);opacity:.35;z-index:-3;pointer-events:none}
.aurora-one{width:320px;height:320px;top:10%;left:-80px;background:#dffaff;animation:drift 14s ease-in-out infinite}
.aurora-two{width:380px;height:380px;right:-120px;bottom:5%;background:#73d4ff;animation:drift 18s ease-in-out infinite reverse}
.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.shell{width:min(1140px,92%);margin-inline:auto}
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.73),rgba(194,235,252,.30));
  border:1px solid var(--line);
  box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.95);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.topbar{
  position:sticky;top:14px;z-index:50;min-height:62px;margin-top:14px;
  padding:8px 10px 8px 12px;border-radius:16px;
  display:flex;align-items:center;justify-content:space-between;
  animation:slideDown .7s ease both;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-icon{
  width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:#fff;
  font-size:21px;background:linear-gradient(#75d9ff,#1876b4);
  border:1px solid #fff;box-shadow:inset 0 1px #fff,0 4px 12px rgba(12,79,120,.4)
}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-size:14px}.brand-text small{font-size:8px;letter-spacing:1.4px;color:#58809a;margin-top:4px;font-weight:800}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:#214f6d;text-decoration:none;font-size:12px;font-weight:800;padding:9px 11px;border-radius:8px;
  border:1px solid transparent;transition:.2s
}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px #fff}
.nav .discord-link{font-size:16px;color:#5865f2}
.mobile-menu{display:none;border:1px solid #fff;background:rgba(255,255,255,.5);border-radius:8px;padding:9px 11px;color:#21516f}
.hero{min-height:calc(100vh - 90px);display:grid;grid-template-columns:1.08fr .92fr;gap:50px;align-items:center;padding:75px 0 65px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:20px;
  background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.9);
  font-size:10px;font-weight:800;letter-spacing:.7px;box-shadow:inset 0 1px #fff
}
.status-dot{width:7px;height:7px;border-radius:50%;background:#35e37c;box-shadow:0 0 10px #35e37c;animation:pulse 1.8s ease-in-out infinite}
.eyebrow{margin:18px 0 12px;color:#eaffff;font-size:10px;font-weight:900;letter-spacing:1.5px;text-shadow:0 2px 5px #1c6289}
.hero h1{margin:0;color:#fff;font-size:clamp(52px,7.4vw,88px);line-height:.92;letter-spacing:-4.5px;text-shadow:0 5px 18px rgba(10,66,101,.45)}
.hero h1 span{color:#dffaff;animation:glowText 3.5s ease-in-out infinite}
.hero-description{max-width:650px;margin:24px 0 0;color:#f2fcff;font-size:16px;line-height:1.75;text-shadow:0 2px 5px rgba(17,72,103,.4)}
.hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.vista-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#174a69;
  padding:11px 14px;border-radius:9px;background:linear-gradient(#ffffffd9,#d5f2ff99);
  border:1px solid #fff;box-shadow:0 6px 15px rgba(18,80,115,.25),inset 0 1px #fff;
  font-size:12px;font-weight:900;transition:.22s
}
.vista-btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,80,115,.28),inset 0 1px #fff}
.vista-btn.primary{background:linear-gradient(#7fe0ff,#2185bf);color:#fff;text-shadow:0 1px 2px #145173}
.quick-stats{display:flex;gap:30px;margin-top:34px}
.quick-stats div{display:flex;flex-direction:column}.quick-stats strong{font-size:22px;color:#fff;text-shadow:0 2px 5px #17577d}.quick-stats span{font-size:9px;color:#dff7ff;letter-spacing:.5px;font-weight:700;margin-top:3px}
.photo-stage{position:relative;min-height:520px;display:grid;place-items:center}
.photo-glow{position:absolute;width:340px;height:340px;border-radius:50%;background:#b8efff;filter:blur(70px);opacity:.5;animation:breathe 4s ease-in-out infinite}
.photo-frame{position:relative;width:min(390px,88%);padding:9px;border-radius:18px;transform:rotate(1.2deg);box-shadow:0 30px 65px rgba(6,48,78,.4),inset 0 1px #fff;animation:float 6s ease-in-out infinite}
.photo-toolbar{height:36px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;border-radius:10px 10px 4px 4px;background:linear-gradient(#75b9dc,#39799f);border:1px solid #c7f2ff;color:#fff;text-shadow:0 1px 2px #174d6b;font-size:10px;font-weight:800}
.toolbar-title{display:flex;align-items:center;gap:7px}.toolbar-controls{display:flex;gap:4px}.toolbar-controls i{width:9px;height:9px;border-radius:50%;display:block;background:#dff7ff;border:1px solid #fff}.toolbar-controls .close-dot{background:#ff7180}
.photo-wrap{
  margin-top:7px;overflow:hidden;border-radius:5px 5px 12px 12px;
  background:#17212b;line-height:0;aspect-ratio:3/4;
  border:1px solid rgba(255,255,255,.8)
}
.photo-wrap img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:saturate(.96) contrast(1.03);transition:transform .7s ease
}
.photo-frame:hover .photo-wrap img{transform:scale(1.025)}
.floating-chip{
  position:absolute;padding:9px 11px;border-radius:9px;background:rgba(238,252,255,.78);
  border:1px solid #fff;box-shadow:0 10px 22px rgba(16,76,107,.25),inset 0 1px #fff;
  color:#1d5877;font-size:9px;font-weight:900;letter-spacing:.7px;backdrop-filter:blur(12px)
}
.chip-one{left:2%;top:25%;animation:float 5s 1s ease-in-out infinite}.chip-two{right:0;bottom:19%;animation:float 5s 2s ease-in-out infinite}
.window{margin-bottom:28px;border-radius:17px;overflow:hidden;scroll-margin-top:95px}
.titlebar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:linear-gradient(#dff8ffcc,#83c7e699);border-bottom:1px solid #fff}
.title-left{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:900;color:#194d6b;text-shadow:0 1px #fff}
.window-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(#76d5ff,#1a7db8);color:#fff;border:1px solid #fff;box-shadow:inset 0 1px #fff}
.window-buttons{display:flex;gap:4px}.window-buttons span{width:27px;height:23px;display:grid;place-items:center;border-radius:5px;background:#ffffff70;border:1px solid #fff;color:#285975;font-size:10px;box-shadow:inset 0 1px #fff}.window-buttons .close{background:#d95d69d9;color:#fff}
.window-body{padding:34px;background:linear-gradient(145deg,rgba(246,253,255,.92),rgba(203,237,251,.72))}
.section-heading{text-align:center;max-width:720px;margin:0 auto 28px}.section-kicker{font-size:9px;font-weight:900;letter-spacing:2px;color:#2a91c2}.section-heading h2{margin:6px 0 8px;color:#164c6b;font-size:30px;letter-spacing:-1px}.section-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.about-grid,.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.info-card,.project-card{
  position:relative;padding:21px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(215,243,255,.55));
  border:1px solid #fff;box-shadow:0 8px 20px rgba(38,101,132,.13),inset 0 1px #fff;overflow:hidden;transition:.25s
}
.info-card:hover,.project-card:hover{transform:translateY(-6px);box-shadow:0 15px 28px rgba(38,101,132,.2),inset 0 1px #fff}
.info-card:after,.project-card:after{content:"";position:absolute;left:-80%;top:0;width:55%;height:2px;background:#fff;transform:skewX(-25deg);transition:.45s}.info-card:hover:after,.project-card:hover:after{left:130%}
.card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(#70d4ff,#1c7fba);color:#fff;border:1px solid #fff;box-shadow:0 5px 10px rgba(29,105,145,.25),inset 0 1px #fff;margin-bottom:13px}
.info-card h3,.project-card h3{margin:0 0 7px;color:#1b4f6c;font-size:16px}.info-card p,.project-card p{margin:0;color:#5a7688;font-size:12px;line-height:1.65}
.skills-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:22px}
.skill-list{display:grid;gap:15px}.skill-row>div:first-child{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:#3d6479}.skill-row b{color:#2788b7}.meter{height:9px;margin-top:6px;border-radius:20px;background:#a9d2e4;border:1px solid #fff;overflow:hidden;box-shadow:inset 0 1px rgba(64,120,148,.15)}.meter i{display:block;height:100%;width:var(--level);border-radius:20px;background:linear-gradient(90deg,#218bc0,#72dcff);box-shadow:0 0 10px rgba(61,191,239,.35);transform-origin:left;animation:load 1.4s ease both}
.skill-cloud{align-content:center;display:flex;flex-wrap:wrap;gap:7px;padding:17px;border-radius:14px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px #fff}.skill-cloud span{padding:7px 9px;border-radius:7px;background:rgba(255,255,255,.7);border:1px solid #fff;color:#38677f;font-size:9px;font-weight:800;box-shadow:0 3px 8px rgba(32,100,133,.1)}
.project-card{min-height:235px;display:flex;flex-direction:column}.project-number{position:absolute;right:17px;top:18px;font-size:10px;font-weight:900;color:#73a2b8}.project-tag{margin-top:auto;align-self:flex-start;padding:6px 8px;border-radius:6px;background:#e7f8ff;border:1px solid #fff;color:#3381a4;font-size:8px;font-weight:900;letter-spacing:.7px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-card{display:flex;align-items:center;gap:13px;text-decoration:none;padding:17px;border-radius:12px;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:0 7px 18px rgba(38,101,132,.12),inset 0 1px #fff;color:var(--ink);transition:.22s}.contact-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.86)}.contact-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:11px;color:#fff;font-size:20px;border:1px solid #fff;box-shadow:inset 0 1px #fff}.contact-icon.instagram{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)}.contact-icon.discord{background:linear-gradient(#7385ff,#4d5dd5)}.contact-card>span:nth-child(2){display:flex;flex-direction:column}.contact-card strong{font-size:13px}.contact-card small{margin-top:4px;color:#688294;font-size:10px}.contact-arrow{margin-left:auto;color:#5590ac;font-size:11px}
.footer{margin-bottom:55px;padding:17px 20px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;color:#39667d;font-size:10px;line-height:1.6}.footer div{display:flex;gap:7px;flex-wrap:wrap}.footer a{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;text-decoration:none;color:#216b94;background:rgba(255,255,255,.58);border:1px solid #fff;box-shadow:inset 0 1px #fff}
.theme-toggle{position:fixed;right:18px;bottom:18px;z-index:60;border:1px solid #fff;border-radius:10px;padding:10px 13px;background:linear-gradient(#ffffffdd,#d5f1ff);color:#174d6b;box-shadow:0 7px 18px rgba(9,62,96,.3),inset 0 1px #fff;font-size:10px;font-weight:900;cursor:pointer;transition:.2s}.theme-toggle:hover{transform:translateY(-3px)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
@keyframes sheen{from{background-position:-720px -300px}to{background-position:calc(100vw + 720px) 900px}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(1.2deg)}50%{transform:translateY(-10px) rotate(1.2deg)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}
@keyframes breathe{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.1);opacity:.55}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes glowText{0%,100%{text-shadow:0 4px 16px rgba(10,70,103,.45),0 0 8px rgba(255,255,255,.2)}50%{text-shadow:0 4px 18px rgba(10,70,103,.5),0 0 28px rgba(225,250,255,.65)}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}

body.dark{
  --ink:#dceefa;--muted:#a5bfd0;--line:rgba(174,220,241,.6);
  background:radial-gradient(circle at 20% 10%,#203d55,transparent 28%),linear-gradient(135deg,#152c40,#07131f 55%,#02080d)
}
body.dark .glass{background:linear-gradient(145deg,rgba(47,82,108,.72),rgba(6,18,30,.68));box-shadow:0 22px 55px rgba(0,0,0,.48),inset 0 1px rgba(204,239,255,.3)}
body.dark .brand-text small,body.dark .nav a,body.dark .section-heading p,body.dark .info-card p,body.dark .project-card p,body.dark .skill-row>div:first-child,body.dark .contact-card small{color:#a8c3d4}
body.dark .nav a:hover,body.dark .nav a.active{background:rgba(255,255,255,.09);border-color:#7298ad}
body.dark .section-heading h2,body.dark .title-left,body.dark .info-card h3,body.dark .project-card h3{color:#e4f7ff;text-shadow:0 1px #000}
body.dark .window-body{background:linear-gradient(145deg,rgba(17,38,54,.9),rgba(7,18,29,.94))}
body.dark .titlebar{background:linear-gradient(#426b85cc,#1d3b50cc);border-color:#79a8be}
body.dark .info-card,body.dark .project-card{background:linear-gradient(180deg,rgba(55,91,113,.56),rgba(8,25,39,.6));border-color:#6f96aa}
body.dark .skill-cloud,body.dark .contact-card{background:rgba(25,48,64,.62);border-color:#6f96aa}
body.dark .skill-cloud span{background:rgba(69,106,126,.4);color:#c4e0ef;border-color:#789eb2}
body.dark .photo-frame{background:rgba(23,45,61,.8)}
body.dark .photo-toolbar{background:linear-gradient(#547d96,#294a5f)}
body.dark .vista-btn{background:linear-gradient(#34576d,#1b3447);color:#dff6ff;border-color:#7298ad}
body.dark .vista-btn.primary{background:linear-gradient(#4da8d3,#19658f)}
body.dark .theme-toggle{background:linear-gradient(#29485d,#142a3a);color:#e1f5ff;border-color:#6e99af}
body.dark .footer{color:#a9c4d5}
body.dark .footer a{background:rgba(42,70,87,.7);color:#bde7fb;border-color:#6f96aa}
body.dark .status-pill{background:rgba(30,63,82,.55);border-color:#769bae;color:#d9f4ff}
body.dark .hero-description{color:#cfe5f1}
body.dark .skill-row b{color:#7ed7fb}
body.dark .meter{background:#294d62;border-color:#6d94a8}
body.dark .project-tag{background:#1e455c;color:#a9dcf3;border-color:#6d94a8}


/* ===== Enhanced Aero animations ===== */
#particleCanvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;
}
.scroll-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,#dffaff,#4ed0ff,#1678b5);
  box-shadow:0 0 12px rgba(111,225,255,.85);
}
body:before{
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.22) 48%,transparent 54%),
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.06) 50%,transparent 50.2%);
  background-size:720px 720px,120px 120px;
  animation:sheen 20s linear infinite, gridDrift 12s linear infinite;
}
.hero-entrance{animation:heroReveal 1.05s cubic-bezier(.2,.8,.2,1) both}
.hero-entrance .eyebrow{animation:slideSoft .8s .15s both}
.hero-entrance h1{animation:heroTitle 1s .08s cubic-bezier(.15,.85,.25,1) both}
.hero-entrance .hero-description{animation:slideSoft .8s .28s both}
.hero-entrance .hero-actions{animation:slideSoft .8s .4s both}
.hero-entrance .quick-stats{animation:slideSoft .8s .52s both}

.hero h1 span{position:relative;display:inline-block}
.hero h1 span:after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:linear-gradient(90deg,transparent,#e8fbff,transparent);
  transform:scaleX(.2);opacity:.7;animation:underlinePulse 3s ease-in-out infinite;
}

.photo-stage:before,.photo-stage:after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.42);
  border-radius:50%;pointer-events:none;animation:orbit 16s linear infinite;
}
.photo-stage:before{width:460px;height:460px}
.photo-stage:after{width:510px;height:510px;border-style:dashed;opacity:.3;animation-duration:24s;animation-direction:reverse}

.photo-frame{animation:float 6s ease-in-out infinite, frameIn 1.1s .2s both}
.photo-frame:before{
  content:"";position:absolute;inset:-1px;border-radius:19px;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.72) 48%,transparent 62%);
  background-size:220% 100%;mix-blend-mode:screen;opacity:.45;
  animation:glassSweep 5.5s ease-in-out infinite;
}
.floating-chip{transition:transform .25s ease,box-shadow .25s ease}
.floating-chip:hover{transform:translateY(-7px) scale(1.04);box-shadow:0 16px 28px rgba(16,76,107,.35),inset 0 1px #fff}

.tilt-card{
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-card .card-icon,.tilt-card h3,.tilt-card p,.tilt-card .project-tag{
  transform:translateZ(12px);
}
.info-card,.project-card,.contact-card{
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
}
.info-card:hover,.project-card:hover,.contact-card:hover{
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease;
}
.window{
  position:relative;
}
.window:before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:17px;
  background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  background-size:250% 100%;animation:windowSweep 9s ease-in-out infinite;opacity:.5;
}
.titlebar{position:relative;overflow:hidden}
.titlebar:after{
  content:"";position:absolute;top:0;bottom:0;width:90px;left:-110px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:titleSweep 6s ease-in-out infinite;
}
.system-readout{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:8px;letter-spacing:.8px;color:#4c7890;font-weight:900
}
.system-readout i{font-size:6px;color:#34dc7a;text-shadow:0 0 7px #34dc7a}
.system-readout b{font-variant-numeric:tabular-nums;color:#6a91a4}

@keyframes heroReveal{from{opacity:0;transform:translateY(28px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroTitle{from{opacity:0;transform:translateY(22px);letter-spacing:-7px}to{opacity:1;transform:none;letter-spacing:-4.5px}}
@keyframes slideSoft{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes underlinePulse{0%,100%{transform:scaleX(.2);opacity:.25}50%{transform:scaleX(1);opacity:.85}}
@keyframes orbit{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.03)}to{transform:rotate(360deg) scale(1)}}
@keyframes frameIn{from{opacity:0;transform:rotate(7deg) scale(.82)}to{opacity:1;transform:rotate(1.2deg) scale(1)}}
@keyframes glassSweep{0%,65%{background-position:220% 0}82%,100%{background-position:-40% 0}}
@keyframes windowSweep{0%,60%{background-position:220% 0}78%,100%{background-position:-30% 0}}
@keyframes titleSweep{0%,55%{left:-110px}78%,100%{left:120%}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:720px 720px,120px 120px}}

@media(max-width:650px){
  .photo-stage:before,.photo-stage:after{width:320px;height:320px}
  .system-readout{width:100%;justify-content:center;margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  #particleCanvas{display:none}
  .photo-stage:before,.photo-stage:after,.photo-frame:before,.titlebar:after,.window:before{animation:none!important}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:20px;padding-top:55px}.hero-copy{order:1}.photo-stage{order:2;min-height:440px}.photo-frame{width:min(360px,82%)}.about-grid,.project-grid{grid-template-columns:1fr 1fr}.skills-layout{grid-template-columns:1fr}.skill-cloud{min-height:130px}
}
@media(max-width:650px){
  .topbar{top:8px;margin-top:8px}.brand-text{display:none}.nav{display:none}.nav.open{display:flex;position:absolute;top:68px;left:0;right:0;padding:9px;border-radius:13px;flex-wrap:wrap;justify-content:center;background:rgba(240,251,255,.92);border:1px solid #fff;box-shadow:0 15px 35px rgba(5,57,89,.3);backdrop-filter:blur(16px)}body.dark .nav.open{background:rgba(15,33,47,.96)}.mobile-menu{display:block}.hero{padding-top:45px}.hero h1{font-size:clamp(48px,14vw,72px);letter-spacing:-3px}.hero-description{font-size:14px}.quick-stats{gap:20px}.quick-stats strong{font-size:18px}.quick-stats span{font-size:8px}.photo-stage{min-height:390px}.photo-frame{width:min(330px,88%)}.floating-chip{display:none}.about-grid,.project-grid,.contact-grid{grid-template-columns:1fr}.window-body{padding:25px 17px}.section-heading h2{font-size:24px}.project-card{min-height:205px}.footer{flex-direction:column;gap:12px;text-align:center}.footer div{justify-content:center}.theme-toggle{right:10px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* White-hat security branding */
.brand-icon.shield-brand{
  background:linear-gradient(145deg,#8ee7ff 0%,#2aa9df 48%,#11649b 100%);
  position:relative;
  overflow:hidden;
}
.brand-icon.shield-brand:before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.45);
  pointer-events:none;
}
.brand-icon.shield-brand i{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 2px rgba(8,57,85,.45));
}
body.dark .brand-icon.shield-brand{
  background:linear-gradient(145deg,#67ccec 0%,#197aa8 52%,#0c3f61 100%);
}