/* v3: readability + light/dark theme */
:root{--mut:#b8c5de;--line:rgba(140,205,255,.22);--gradt:linear-gradient(100deg,#5ff4ff,#ad94ff 55%,#ff74da)}
html[data-theme=dark]{background:#03050b}
/* ---------- base readability (both themes) ---------- */
body{font-weight:400;line-height:1.65}
h1 .hi{font-weight:400}
.lead{color:#dbe3f3;font-weight:400}
.contact p{color:#dbe3f3}
.sec-head p{color:#cdd7ea;font-size:clamp(16px,1.5vw,18px)}
.mod p,.scr-b p,.pk p,.tc-b p,.card-b p,.panel p,.cert p{font-size:15px;line-height:1.6;font-weight:450;color:var(--mut)}
.stat span{font-size:14.5px;font-weight:450}
.tl-item p,.tl-org{font-size:15px}.tl-item li{font-size:15px;color:#d3ddef}
.tl-org{color:#dbe5f7}
.card-b p.note{font-size:12.5px;color:#a9bbd8}
.kick,.mod-n,.pk-n,.panel-k{font-size:12px}
.mod-n{color:#b0bfdc}
.eyebrow{font-size:12.5px;font-weight:600}
.tl-k{font-size:11.5px}.tl-d{font-size:12.5px}
.tags li{font-size:12.5px}
.sk-col li{font-size:13px;color:#dbe5f7}
.scr-bar b{font-size:11.5px;color:#c3cfe6}
.tm-bar b,.tc-bar b{font-size:12.5px;color:#c3cfe6}
.tm-body{font-size:13.5px;color:#e1edff}
.badge,.count{font-size:11.5px;color:#e9f1ff}
.count{color:#5ff4ff}
.hud-top{color:#c3d4f0;font-size:12px}
.h-id{background:rgba(3,6,14,.82);padding:6px 12px;border-radius:10px;border:1px solid rgba(51,240,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:11px}
.h-id span{color:#c9d5ea}
.h-tag{font-size:11.5px;color:#e6f6ff;background:rgba(4,9,20,.88)}
@media (max-width:979px){.h-tag{font-size:10.5px}}
@media (max-width:420px){.h-tag{font-size:10px}}
.nav a{color:#c9d5ea;font-size:12.5px}
.hdr{background:rgba(3,5,11,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hdr.scrolled{background:rgba(3,5,11,.86)}
.fbtn{color:#cdd7ea;font-size:13px}
.chip{font-size:13px}
.scroll-cue{color:#b8c5de;font-size:11px}
.orb b{font-size:clamp(11px,1.6vw,12.5px);font-weight:600}
.menu-list a i{font-size:13px}
.ftr-in{font-size:14px;color:#c3cfe6}
.stat b,.pk-price{background:var(--gradt);-webkit-background-clip:text;background-clip:text}
.vignette{background:radial-gradient(120% 80% at 50% 30%,transparent 45%,rgba(1,2,6,.6) 100%)}
/* text over the particle field: soft halo */
.sec-head p,.eyebrow,.lead,.roles,h1 .hi,h1 .aka,.contact p,.hud-top{text-shadow:0 0 18px rgba(3,5,11,.95),0 1px 3px rgba(3,5,11,.9)}
.sec-head h2{filter:drop-shadow(0 2px 10px rgba(3,5,11,.85))}
@media (max-width:979px){.sec-head,.hero-txt{position:relative}.sec-head:before{content:"";position:absolute;inset:-14px -16px;z-index:-1;border-radius:20px;background:radial-gradient(120% 100% at 30% 50%,rgba(3,5,11,.72),rgba(3,5,11,.35) 70%,transparent);pointer-events:none}}
/* ---------- theme toggle ---------- */
.theme-btn{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:rgba(10,16,32,.7);display:grid;place-items:center;color:var(--ink);transition:background .2s,border-color .2s,box-shadow .2s;margin-left:auto}
.theme-btn:hover{border-color:var(--c1);box-shadow:0 0 18px rgba(51,240,255,.3)}
.theme-btn svg{width:21px;height:21px}
.theme-btn .i-moon{display:none}
html[data-theme=light] .theme-btn .i-sun{display:none}
html[data-theme=light] .theme-btn .i-moon{display:block}
.hdr .theme-btn + .menu-btn{margin-left:8px}
@media (min-width:1100px){.hdr .theme-btn{margin-left:4px;width:42px;height:42px}}
.menu-act{display:flex;gap:8px;align-items:center}
.menu .theme-btn{width:auto;padding:0 14px;display:flex;gap:8px;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0}
.menu .theme-btn svg{width:18px;height:18px}
/* ---------- LIGHT THEME ---------- */
html[data-theme=light]{--bg:#eef3fb;--bg2:#e3eaf6;--ink:#0a1124;--mut:#34425f;--c1:#005c78;--c2:#5a2ee0;--c3:#bd1279;--line:rgba(20,50,110,.18);--grad:linear-gradient(100deg,#007c9e,#5a2ee0 55%,#bd1279);--gradt:var(--grad);background:#eef3fb}
html[data-theme=light] body{background:var(--bg);color:var(--ink)}
html[data-theme=light] .vignette{background:radial-gradient(120% 80% at 50% 30%,transparent 45%,rgba(214,225,243,.7) 100%)}
html[data-theme=light] .scan{opacity:.025;background:repeating-linear-gradient(0deg,#0a1124 0 1px,transparent 1px 3px)}
html[data-theme=light] .sec-head p,html[data-theme=light] .eyebrow,html[data-theme=light] .lead,html[data-theme=light] .roles,html[data-theme=light] h1 .hi,html[data-theme=light] h1 .aka,html[data-theme=light] .contact p,html[data-theme=light] .hud-top{text-shadow:0 0 16px rgba(238,243,251,.95),0 0 3px rgba(238,243,251,.9)}
html[data-theme=light] .sec-head h2{filter:drop-shadow(0 0 10px rgba(238,243,251,.9))}
@media (max-width:979px){html[data-theme=light] .sec-head:before{background:radial-gradient(120% 100% at 30% 50%,rgba(238,243,251,.8),rgba(238,243,251,.4) 70%,transparent)}}
html[data-theme=light] .hdr{background:rgba(238,243,251,.62)}
html[data-theme=light] .hdr.scrolled{background:rgba(244,247,253,.9)}
html[data-theme=light] .logo-mk{border-color:rgba(0,92,120,.5);box-shadow:inset 0 0 12px rgba(0,92,120,.12)}
html[data-theme=light] .nav a{color:#26334f}
html[data-theme=light] .nav a:hover,html[data-theme=light] .nav a.act{color:#000;background:rgba(0,92,120,.1)}
html[data-theme=light] .hdr-cta{border-color:rgba(0,92,120,.55);background:rgba(0,92,120,.08)}
html[data-theme=light] .menu-btn,html[data-theme=light] .theme-btn{background:rgba(255,255,255,.85);border-color:rgba(20,50,110,.2)}
html[data-theme=light] .theme-btn:hover{box-shadow:0 0 16px rgba(0,92,120,.25)}
html[data-theme=light] .menu{background:rgba(240,245,252,.97)}
html[data-theme=light] .menu-grid{background-image:linear-gradient(rgba(0,92,120,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,92,120,.12) 1px,transparent 1px)}
html[data-theme=light] .menu-list a{border-bottom-color:rgba(20,50,110,.12)}
html[data-theme=light] .menu-foot a{background:rgba(255,255,255,.8)}
html[data-theme=light] .boot{background:#eef3fb}
html[data-theme=light] .boot-log{color:#00586f}
html[data-theme=light] .floor i{background-image:linear-gradient(rgba(0,92,120,.3) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(90,46,224,.26) 1.5px,transparent 1.5px)}
html[data-theme=light] .hud-corners i{border-color:rgba(0,92,120,.55)}
html[data-theme=light] .hud-top{color:#34425f}
html[data-theme=light] .avail{color:#05603a;border-color:rgba(5,150,90,.45);background:rgba(5,150,90,.09)}
html[data-theme=light] .glitch{background:linear-gradient(100deg,#0a1838 10%,#0a4d6b 40%,#00809f 60%,#5a2ee0 85%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 16px rgba(238,243,251,.9))}
html[data-theme=light] .glitch.g2{background:linear-gradient(100deg,#00809f,#5a2ee0 45%,#bd1279 90%);-webkit-background-clip:text;background-clip:text}
html[data-theme=light] .lead,html[data-theme=light] .contact p{color:#1c2742}
html[data-theme=light] .sec-head p{color:#26334f}
html[data-theme=light] .btn{background:rgba(255,255,255,.85);border-color:rgba(20,50,110,.25)}
html[data-theme=light] .btn.p{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px rgba(0,92,120,.6)}
html[data-theme=light] .btn.p:before{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%)}
html[data-theme=light] .h-tag{background:rgba(255,255,255,.94);color:#0a2236;border-color:rgba(0,92,120,.4)}
html[data-theme=light] .h-id{background:rgba(255,255,255,.9);border-color:rgba(0,92,120,.35)}
html[data-theme=light] .h-id span{color:#34425f}
html[data-theme=light] .h-photo{border-color:rgba(0,92,120,.6);box-shadow:0 0 0 6px rgba(0,92,120,.08),0 20px 50px -10px rgba(0,92,120,.35)}
html[data-theme=light] .h-ring.r1{border-color:rgba(0,92,120,.4);background:conic-gradient(from 0deg,transparent 0 70%,rgba(0,92,120,.9) 85%,transparent 86%)}
html[data-theme=light] .scroll-cue{color:#34425f}
html[data-theme=light] .marquee{background:rgba(255,255,255,.8)}
html[data-theme=light] .mq-track span:nth-child(4n+1){-webkit-text-stroke-color:rgba(10,17,36,.75)}
html[data-theme=light] h2{background:linear-gradient(180deg,#070b1a,#25355c);-webkit-background-clip:text;background-clip:text}
html[data-theme=light] .chip{background:rgba(255,255,255,.75);border-color:rgba(20,50,110,.22)}
html[data-theme=light] .chip.p{background:linear-gradient(100deg,rgba(0,92,120,.12),rgba(90,46,224,.12));border-color:rgba(0,92,120,.5);color:#00384a}
html[data-theme=light] .mod,html[data-theme=light] .screen,html[data-theme=light] .term-card,html[data-theme=light] .card,html[data-theme=light] .pk,html[data-theme=light] .panel,html[data-theme=light] .stat,html[data-theme=light] .sk-col,html[data-theme=light] .tl-item{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(244,248,255,.86));border-color:rgba(20,50,110,.16);box-shadow:0 14px 34px -18px rgba(20,40,90,.3)}
html[data-theme=light] .mod-n{color:#34425f}
html[data-theme=light] .mod-ic{background:rgba(0,92,120,.08);border-color:rgba(0,92,120,.35);box-shadow:none}
html[data-theme=light] .mod-glow{background:radial-gradient(rgba(90,46,224,.18),transparent 70%)}
html[data-theme=light] .stat:after{background:radial-gradient(rgba(0,92,120,.16),transparent 70%)}
/* terminal stays a dark screen in both themes */
html[data-theme=light] .terminal{--ink:#e9f1ff;--mut:#b8c5de;--c1:#33f0ff;--c2:#8b5cff;--c3:#ff3ec8;--line:rgba(140,205,255,.22);background:linear-gradient(160deg,#0f1a36,#070b18);border-color:rgba(20,50,110,.35);color:#e9f1ff}
html[data-theme=light] .scr-frame{border-color:rgba(20,50,110,.2)}
html[data-theme=light] .scr-bar{background:#e4eaf5}
html[data-theme=light] .scr-bar b{background:rgba(255,255,255,.9);color:#34425f}
html[data-theme=light] .tc-bar{background:#e9eef8}
html[data-theme=light] .tc-bar b{color:#34425f}
html[data-theme=light] .reply{color:#05603a}
html[data-theme=light] .tags li{background:rgba(90,46,224,.08);border-color:rgba(90,46,224,.32);color:#3a1ca3}
html[data-theme=light] .tags li.t{background:rgba(5,150,90,.09);border-color:rgba(5,150,90,.4);color:#05603a}
html[data-theme=light] .fbtn{background:rgba(255,255,255,.85);color:#26334f}
html[data-theme=light] .fbtn[aria-pressed=true]{color:#fff;background:var(--c1);border-color:var(--c1);box-shadow:0 6px 18px -6px rgba(0,92,120,.6)}
html[data-theme=light] .fbtn[aria-pressed=true] sup{color:#fff}
html[data-theme=light] .badge,html[data-theme=light] .count{background:rgba(3,6,14,.82);color:#f1f6ff}
html[data-theme=light] .count{color:#5ff4ff}
html[data-theme=light] .card-b p.note{color:#4a5875}
html[data-theme=light] .tl-line{background:rgba(20,50,110,.15)}
html[data-theme=light] .tl-org{color:#141d33}
html[data-theme=light] .tl-item li{color:#1f2a44}
html[data-theme=light] .ring{border-color:rgba(20,50,110,.22)}
html[data-theme=light] .orb b{background:rgba(255,255,255,.96);color:#0a1a2e;box-shadow:0 4px 14px -6px rgba(20,40,90,.35)}
html[data-theme=light] .ring.r1 .orb b{border-color:rgba(0,92,120,.55)}
html[data-theme=light] .sk-col li{background:rgba(255,255,255,.8);color:#1c2742}
html[data-theme=light] .contact{border-color:rgba(0,92,120,.3);background:radial-gradient(80% 120% at 50% 0%,rgba(0,92,120,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.9),rgba(238,244,253,.9))}
html[data-theme=light] .contact:before{background-image:linear-gradient(rgba(0,92,120,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,92,120,.16) 1px,transparent 1px)}
html[data-theme=light] .contact h2.big{background:linear-gradient(100deg,#070b1a,#005c78 50%,#bd1279);-webkit-background-clip:text;background-clip:text}
html[data-theme=light] .lk{background:rgba(255,255,255,.88);border-color:rgba(20,50,110,.2)}
html[data-theme=light] .lk:hover{background:#fff;border-color:rgba(0,92,120,.6);box-shadow:0 10px 26px -12px rgba(0,92,120,.45)}
html[data-theme=light] .ftr{background:rgba(255,255,255,.75)}
html[data-theme=light] .ftr-in{color:#34425f}
html[data-theme=light] .lb{--ink:#e9f1ff;--mut:#b8c5de;color:#e9f1ff}
html[data-theme=light] .c-ring{border-color:rgba(0,92,120,.6)}
html[data-theme=light] ::selection{background:#005c78;color:#fff}
html[data-theme=light] .core{background:radial-gradient(circle at 35% 30%,#bff8ff,#33f0ff 30%,#8b5cff 70%,#1a0b40);box-shadow:0 0 50px rgba(0,92,120,.35),0 0 120px rgba(90,46,224,.25)}
.h-id{bottom:-10%}
@media (max-width:979px){.h-tag.t4{bottom:14%}.h-id{bottom:-13%}.hero-vis{margin-bottom:22px}}
.sec-head h2,.contact h2.big,.glitch{text-shadow:none}

/* v6: hero name + "Have a project in mind?" back to the v3 look (dark = v2.css rules untouched; light = same layout, deeper stops) */

/* phone fit: demo cards never wider than the screen */
.screens{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.screens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.screens{grid-template-columns:repeat(3,minmax(0,1fr))}}
.screen,.scr-frame,.scr-b{min-width:0;max-width:100%;box-sizing:border-box}
.scr-frame{width:100%}
.scr-bar{min-width:0}
.scr-bar b{min-width:0}
.scr-img img{max-width:100%}