/*
Theme Name: Saim Portfolio
Author: Saim Sohail
Description: Blue and green cybersecurity portfolio with animated boot reveal, network canvas and embedded certificate. Custom classic theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: saim-portfolio
*/

/* Single-file, static portfolio for Hostinger web hosting. All design, animations and content live here. */
:root{color-scheme:dark;--bg:#070b10;--bg2:#0a1017;--panel:#0d151d;--panel2:#101c24;--stroke:rgba(170,242,222,.13);--stroke2:rgba(170,242,222,.27);--txt:#ecf5f4;--sub:#a4b7bc;--muted:#738b95;--accent:#8bffcf;--cyan:#73ccff;--lilac:#9b9bff;--max:1200px;--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;--sans:Inter,"Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.09' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.15}a{color:inherit;text-decoration:none}button{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}::selection{background:var(--accent);color:#04100f}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.container{max-width:var(--max);margin:0 auto;padding:0 38px}.mono{font-family:var(--mono)}.accent{color:var(--accent)}.cyan{color:var(--cyan)}.muted{color:var(--muted)}
/* Intro sequence: establishing secure session → connected. The original source code is not embedded here. */
#boot{position:fixed;inset:0;z-index:1000;background:#04090d;display:grid;place-items:center;transition:opacity .65s ease,visibility .65s ease}#boot.done{opacity:0;visibility:hidden;pointer-events:none}.boot-panel{width:min(380px,calc(100vw - 48px));font-family:var(--mono)}.boot-brand{display:flex;align-items:center;gap:13px;color:var(--accent);font-size:12px;letter-spacing:.22em;font-weight:bold}.boot-brand .boot-icon{border:1px solid rgba(139,255,207,.35);border-radius:10px;padding:10px;line-height:1;font-size:21px}.boot-line{margin-top:28px;color:#a9c9c3;font-size:12px;height:21px}.boot-bar{height:2px;background:#1b3436;margin:17px 0 12px;overflow:hidden}.boot-progress{height:100%;width:0;background:var(--accent);box-shadow:0 0 20px var(--accent);transition:width .15s linear}.boot-meta{display:flex;justify-content:space-between;color:#608a86;font-size:10px;letter-spacing:.14em}.boot-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:8px;box-shadow:0 0 12px var(--accent);animation:blink 1.2s infinite}@keyframes blink{50%{opacity:.25}}
/* Header */
.site-header{height:79px;position:fixed;z-index:100;top:0;left:0;right:0;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}.site-header.scrolled,.site-header.menu-open{background:rgba(7,11,16,.88);border-color:var(--stroke);backdrop-filter:blur(18px)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}.mark{display:inline-flex;align-items:center;gap:13px;font-weight:900;letter-spacing:-.08em;font-size:25px}.mark b{color:var(--accent)}.mark-sigil{display:block;width:32px;height:32px;border:1px solid rgba(139,255,207,.42);border-radius:8px;position:relative;transform:rotate(-8deg)}.mark-sigil::after{content:"";position:absolute;inset:8px;border:1px solid var(--accent);border-radius:3px;transform:rotate(19deg)}.nav-links{display:flex;align-items:center;gap:33px}.nav-links a{font-size:12px;font-family:var(--mono);color:#a5b3b6;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:var(--accent)}.nav-right{display:flex;align-items:center;gap:18px}.status{font:10px var(--mono);letter-spacing:.08em;color:#afcbc2;white-space:nowrap}.status:before{content:"";display:inline-block;background:var(--accent);border-radius:50%;width:7px;height:7px;margin-right:9px;box-shadow:0 0 14px rgba(139,255,207,.9);animation:blink 2.3s infinite}.menu-btn{display:none;background:transparent;border:1px solid var(--stroke2);color:var(--txt);width:44px;height:42px;border-radius:9px;cursor:pointer}.menu-btn svg{width:21px;height:21px}
/* Hero */
.hero{min-height:min(930px,100svh);min-height:max(740px,100svh);position:relative;overflow:hidden;display:flex;align-items:center;border-bottom:1px solid var(--stroke);isolation:isolate}.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#070b10 7%,rgba(7,11,16,.88) 29%,rgba(7,11,16,.42) 75%,rgba(7,11,16,.4)),radial-gradient(ellipse 700px 500px at 83% 44%,rgba(24,136,116,.17),transparent 65%);pointer-events:none;z-index:-1}#network{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:.88}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(115,204,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(115,204,255,.025) 1px,transparent 1px);background-size:75px 75px;mask-image:linear-gradient(90deg,transparent 9%,black 55%);pointer-events:none;z-index:-1}.hero-inner{width:100%;padding-top:125px;padding-bottom:110px;position:relative}.hero-copy{max-width:950px;position:relative;z-index:1}.eyebrow{display:flex;gap:13px;align-items:center;color:var(--accent);text-transform:uppercase;font:11px var(--mono);letter-spacing:.18em}.eyebrow:before{content:"";display:block;width:32px;height:1px;background:var(--accent)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(82px,12.5vw,175px);line-height:.84;letter-spacing:-.103em;margin:32px 0 35px;font-weight:850}.hero h1 span{display:block}.hero h1 .outline{-webkit-text-stroke:1px rgba(221,247,243,.75);color:transparent;position:relative}.hero h1 .outline:after{content:"_";-webkit-text-stroke:0;color:var(--accent);font-size:.6em;animation:blink 1.1s infinite}.hero-intro{display:flex;align-items:center;gap:15px;color:#b7c8c8;font-size:clamp(16px,1.8vw,21px);line-height:1.4;min-height:35px}.hero-intro span{color:var(--accent);font-weight:650}.cursor{color:var(--accent);animation:blink 1s steps(1) infinite}.hero-desc{color:var(--sub);line-height:1.9;font-size:15px;max-width:550px;margin:21px 0 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:35px}.btn{min-height:50px;display:inline-flex;justify-content:center;align-items:center;gap:17px;padding:0 22px;border:1px solid var(--stroke2);border-radius:6px;font:12px var(--mono);transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;cursor:pointer}.btn:hover{transform:translateY(-3px);border-color:var(--accent)}.btn.primary{background:var(--accent);color:#07110f;border-color:var(--accent);font-weight:700}.btn.primary:hover{box-shadow:0 10px 30px rgba(139,255,207,.16);background:#b2ffdd}.btn.secondary{background:rgba(17,28,33,.62);color:#d5e4e2}.btn .arrow{font-size:18px;line-height:1}.hero-lower{position:absolute;bottom:34px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:11px var(--mono);letter-spacing:.11em;z-index:2}.hero-lower .scroll-label:after{content:"";width:55px;height:1px;background:var(--stroke2);display:inline-block;margin-left:16px;vertical-align:middle}.hero-coords{display:flex;gap:20px}.hero-coords strong{color:var(--accent);font-weight:400}.hero-terminal{position:absolute;right:3.5%;bottom:16%;width:326px;background:rgba(9,20,27,.66);border:1px solid rgba(139,255,207,.15);border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.045);backdrop-filter:blur(11px);overflow:hidden;transform:rotate(-2deg);animation:float 7s ease-in-out infinite;pointer-events:none}.terminal-top{height:34px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;padding:0 13px}.terminal-top i{display:inline-block;width:6px;height:6px;background:#3c5558;border-radius:50%;margin-right:5px}.terminal-top i:first-child{background:var(--accent)}.terminal-top small{font:9px var(--mono);color:#739694}.terminal-body{padding:17px 16px 18px;font:11px/2 var(--mono);color:#91aeb0}.terminal-body .green{color:var(--accent)}.terminal-body .blue{color:var(--cyan)}.terminal-body .dim{color:#607e81}@keyframes float{50%{transform:translateY(-12px) rotate(-1deg)}}
/* Shared sections */
.section{padding:128px 0;border-bottom:1px solid var(--stroke);position:relative}.section-head{display:flex;justify-content:space-between;align-items:end;gap:34px;margin-bottom:52px}.kicker{font:11px var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:18px}.section h2{font-size:clamp(42px,5.7vw,75px);line-height:1.06;letter-spacing:-.075em;font-weight:790;margin:0}.section-head p{color:var(--sub);line-height:1.8;max-width:340px;font-size:14px;margin:0 0 3px}.section-no{color:#4c6670;font:12px var(--mono)}.reveal{opacity:0;transform:translateY(27px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:none}
/* About */
.about{background:radial-gradient(ellipse 45% 50% at 100% 10%,rgba(38,106,105,.07),transparent)}.about-layout{display:grid;grid-template-columns:290px 1fr;gap:95px}.side-title{display:flex;align-items:center;gap:15px;font:11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);padding-top:8px}.side-title span{font:12px var(--mono);color:var(--muted)}.about-main .lead{font-size:clamp(23px,2.6vw,35px);line-height:1.47;letter-spacing:-.025em;font-weight:460;max-width:820px;margin:0 0 24px}.about-main .body-copy{color:var(--sub);font-size:15px;line-height:1.95;max-width:760px}.metric-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:55px;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}.metric{padding:26px 22px 29px 0;border-right:1px solid var(--stroke)}.metric:not(:first-child){padding-left:27px}.metric:last-child{border:0}.metric strong{display:block;font-size:50px;letter-spacing:-.08em;line-height:1;font-weight:730;color:var(--accent)}.metric span{display:block;max-width:190px;margin-top:12px;color:var(--muted);font:11px/1.6 var(--mono)}
/* Focus */
.focus{background:var(--bg2)}.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--stroke);background:var(--stroke);border-radius:10px;overflow:hidden}.focus-card{min-height:269px;background:#0b1219;padding:33px 32px;position:relative;overflow:hidden;transition:background .3s}.focus-card:hover{background:#101d26}.focus-card::after{content:"";position:absolute;width:100px;height:100px;right:-58px;bottom:-55px;background:var(--accent);opacity:0;filter:blur(64px);transition:opacity .25s}.focus-card:hover::after{opacity:.18}.fc-top{display:flex;align-items:center;justify-content:space-between}.fc-num{font:12px var(--mono);color:#638788}.fc-icon{color:var(--accent);opacity:.83}.fc-icon svg{width:29px;height:29px;stroke-width:1.3}.focus-card h3{font-size:21px;letter-spacing:-.035em;margin:40px 0 14px;font-weight:660}.focus-card p{font:13px/1.85 var(--sans);color:var(--sub);margin:0;max-width:270px}.toolkit{display:grid;grid-template-columns:1fr 2.2fr;gap:60px;margin-top:76px}.toolkit h3,.process h3{font-size:30px;letter-spacing:-.05em;margin:0 0 12px}.toolkit p{max-width:260px;font-size:13px;color:var(--sub);line-height:1.9}.tool-row{display:flex;align-items:start;gap:18px;padding:18px 0;border-bottom:1px solid var(--stroke)}.tool-row:first-child{border-top:1px solid var(--stroke)}.tool-label{color:var(--muted);font:10px var(--mono);letter-spacing:.11em;text-transform:uppercase;min-width:180px;padding-top:8px}.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #284047;background:#111e26;border-radius:5px;padding:8px 12px;font:11px var(--mono);color:#c8dcd9;transition:border-color .2s,color .2s}.pill:hover{border-color:var(--accent);color:var(--accent)}.process{margin-top:89px}.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:29px}.process-step{position:relative;padding:24px 23px 20px;border-left:1px solid #2e5053;background:linear-gradient(90deg,rgba(19,37,42,.4),transparent)}.process-step::before{content:"";position:absolute;width:6px;height:6px;top:0;left:-4px;border:1px solid var(--accent);background:var(--bg2)}.process-step .step-n{color:var(--accent);font:11px var(--mono)}.process-step h4{margin:24px 0 10px;font-size:18px}.process-step p{color:var(--sub);font-size:12px;line-height:1.8;margin:0}
/* Learning */
.learn-layout{display:grid;grid-template-columns:1.24fr 1fr;gap:18px}.certificate-main{border:1px solid rgba(139,255,207,.29);border-radius:10px;padding:38px;background:radial-gradient(ellipse at 100% 0%,rgba(139,255,207,.095),transparent 52%),#0e181f;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:380px}.certificate-main:after{content:"✳";font-size:245px;color:rgba(139,255,207,.045);position:absolute;right:-25px;top:-90px;pointer-events:none}.cert-badge{width:60px;height:60px;display:grid;place-items:center;border:1px solid rgba(139,255,207,.4);border-radius:13px;color:var(--accent);font:25px var(--mono)}.certificate-main .cert-eyebrow{color:var(--accent);font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-top:41px}.certificate-main h3{font-size:32px;letter-spacing:-.055em;margin:12px 0 10px}.certificate-main p{color:var(--sub);font-size:13px;line-height:1.8;max-width:380px}.cert-link{margin-top:auto;color:var(--accent);font:12px var(--mono);display:inline-flex;gap:14px;align-items:center;align-self:start}.cert-link:hover{text-decoration:underline;text-underline-offset:5px}.cert-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.cert-mini{border:1px solid var(--stroke);border-radius:9px;padding:28px;background:#0c141b;min-height:180px;display:flex;flex-direction:column;transition:border .25s,transform .25s}.cert-mini:hover{border-color:var(--stroke2);transform:translateY(-3px)}.cert-mini:nth-child(1){grid-column:span 2}.cert-count{color:var(--accent);font:12px var(--mono)}.cert-mini h3{margin:auto 0 7px;font-size:23px;letter-spacing:-.04em}.cert-mini p{color:var(--sub);font-size:12px;line-height:1.65;margin:0}
/* Work */
.work{background:var(--bg2)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:19px}.project-card{border:1px solid var(--stroke);border-radius:11px;overflow:hidden;background:#0c151d;display:flex;flex-direction:column;transition:border-color .3s,transform .3s;position:relative}.project-card:hover{border-color:rgba(139,255,207,.43);transform:translateY(-5px)}.project-visual{height:220px;position:relative;overflow:hidden;border-bottom:1px solid var(--stroke);background:radial-gradient(ellipse at 70% 35%,rgba(110,255,204,.065),transparent 58%),#09131a;display:flex;align-items:center;justify-content:center}.project-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(118,238,209,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(118,238,209,.052) 1px,transparent 1px);background-size:25px 25px;mask-image:radial-gradient(ellipse at center,black,transparent 80%)}.audit-illustration{width:min(78%,390px);height:145px;border:1px solid rgba(128,243,214,.25);background:rgba(10,24,28,.88);border-radius:8px;transform:perspective(700px) rotateX(8deg) rotateY(-8deg);box-shadow:20px 25px 50px rgba(0,0,0,.32);padding:17px 20px;position:relative}.aud-top{font:10px var(--mono);color:#6faaa4;display:flex;justify-content:space-between;margin-bottom:19px}.aud-row{display:flex;align-items:center;gap:12px;margin:11px 0}.aud-label{width:75px;color:#88a8a3;font:9px var(--mono)}.aud-track{height:5px;flex:1;background:#1c3638;border-radius:5px;overflow:hidden}.aud-track>span{display:block;height:100%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:bar-wave 3s ease-in-out infinite alternate}.aud-row:nth-child(3) .aud-track>span{background:var(--cyan);animation-delay:.3s}.aud-row:nth-child(4) .aud-track>span{background:#dfb27d;animation-delay:.6s}@keyframes bar-wave{to{width:70%}}.scanner-illustration{position:relative;width:300px;height:180px;display:grid;place-items:center}.scanner-illustration::before,.scanner-illustration::after{content:"";position:absolute;width:170px;height:170px;border:1px dashed rgba(139,255,207,.28);border-radius:50%;animation:spin 20s linear infinite}.scanner-illustration::after{width:115px;height:115px;border-style:solid;border-color:rgba(115,204,255,.23);animation-direction:reverse;animation-duration:15s}.scanner-ring{width:72px;height:72px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 40px rgba(139,255,207,.14),inset 0 0 30px rgba(139,255,207,.1);font:25px var(--mono);color:var(--accent)}.scanner-blip{position:absolute;background:var(--accent);height:5px;width:5px;border-radius:50%;box-shadow:0 0 12px var(--accent)}.scanner-blip.one{top:18px;left:78px}.scanner-blip.two{bottom:29px;right:58px}.scanner-sweep{width:95px;height:95px;position:absolute;top:calc(50% - 95px);left:50%;transform-origin:0 100%;background:linear-gradient(26deg,rgba(139,255,207,.22),transparent 70%);clip-path:polygon(0 100%,100% 0,100% 100%);animation:radar 5s linear infinite;opacity:.5}@keyframes radar{to{transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}.project-content{padding:30px 31px 33px;flex:1;display:flex;flex-direction:column}.project-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.project-tag{font:10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}.project-badge{font:10px var(--mono);border:1px solid rgba(115,204,255,.28);color:var(--cyan);padding:6px 9px;border-radius:4px}.project-content h3{font-size:28px;letter-spacing:-.055em;margin:24px 0 11px}.project-content p{color:var(--sub);line-height:1.87;font-size:13px;margin-bottom:29px}.project-link{display:inline-flex;align-items:center;gap:12px;font:12px var(--mono);color:var(--accent);margin-top:auto;align-self:start}.project-link:hover{text-decoration:underline;text-underline-offset:5px}.more-work{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:19px}.mini-project{border:1px solid var(--stroke);border-radius:9px;padding:28px;background:#0d161d;min-height:226px;display:flex;flex-direction:column;transition:transform .25s,border-color .25s}.mini-project:hover{transform:translateY(-4px);border-color:var(--stroke2)}.mini-project .mini-top{display:flex;align-items:center;justify-content:space-between;font:11px var(--mono);color:var(--accent)}.mini-project .mini-top span:last-child{font-size:19px}.mini-project h3{font-size:22px;letter-spacing:-.045em;margin:39px 0 10px}.mini-project p{color:var(--sub);font-size:12px;line-height:1.75;margin:0}
/* Contact */
.contact{padding-bottom:65px;background:radial-gradient(ellipse 55% 70% at 80% 40%,rgba(40,152,127,.09),transparent 70%)}.contact-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:end}.contact h2{font-size:clamp(55px,7.3vw,99px);max-width:700px}.contact-copy{color:var(--sub);font-size:14px;line-height:1.9;max-width:440px;margin:25px 0 0}.email-link{font-size:clamp(18px,2.5vw,27px);letter-spacing:-.035em;display:inline-block;padding:15px 0;border-bottom:1px solid var(--accent);transition:color .2s}.email-link:hover{color:var(--accent)}.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:33px}.social-link{font:11px var(--mono);padding:13px 16px;border:1px solid var(--stroke2);border-radius:6px;transition:border .2s,color .2s}.social-link:hover{border-color:var(--accent);color:var(--accent)}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--stroke);margin-top:120px;padding-top:25px;color:var(--muted);font:11px var(--mono)}.top-btn{height:39px;min-width:39px;border:1px solid var(--stroke2);background:#101d23;border-radius:6px;cursor:pointer;color:var(--accent);transition:background .2s}.top-btn:hover{background:#1b3737}.decor-rule{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.14}
@media (min-width:1500px){.hero-terminal{right:calc((100vw - 1370px)/2)}}
@media (max-width:1050px){.hero-terminal{opacity:.55;right:-60px;bottom:13%}.hero-copy{position:relative;z-index:4}.about-layout{grid-template-columns:190px 1fr;gap:50px}.toolkit{grid-template-columns:1fr;gap:16px}.contact-layout{gap:35px}.status{display:none}}
@media (max-width:760px){.container{padding:0 22px}.site-header{height:68px}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#090f15;border-bottom:1px solid var(--stroke2);padding:14px 23px 25px}.menu-open .nav-links{display:flex}.nav-links a{padding:14px 10px;font-size:13px;border-bottom:1px solid var(--stroke)}.menu-btn{display:grid;place-items:center}.hero{min-height:770px;min-height:100svh}.hero::before{background:linear-gradient(90deg,rgba(7,11,16,.98) 0%,rgba(7,11,16,.82) 65%,rgba(7,11,16,.65))}.hero-inner{padding-top:110px;padding-bottom:125px}.hero h1{font-size:clamp(70px,15.5vw,120px);margin:32px 0}.hero-terminal{display:none}.hero-desc{font-size:14px}.hero-intro{font-size:16px}.hero-lower{left:22px;right:22px;bottom:27px}.hero-coords{display:none}.section{padding:90px 0}.section-head{display:block;margin-bottom:36px}.section-head p{margin-top:20px}.about-layout{grid-template-columns:1fr;gap:30px}.side-title{margin-bottom:6px}.about-main .lead{font-size:23px}.metric strong{font-size:35px}.metric:not(:first-child){padding-left:14px}.metric{padding-right:10px}.metric span{font-size:10px}.focus-grid{grid-template-columns:1fr 1fr}.focus-card{padding:28px 25px;min-height:245px}.focus-card h3{margin-top:36px}.tool-label{min-width:155px}.process-grid{grid-template-columns:1fr 1fr}.learn-layout{grid-template-columns:1fr}.projects{grid-template-columns:1fr}.project-visual{height:200px}.more-work{grid-template-columns:1fr 1fr}.contact-layout{grid-template-columns:1fr}.footer{margin-top:90px}}
@media (max-width:480px){.hero h1{font-size:clamp(64px,16vw,86px)}.hero-intro{font-size:14px;flex-wrap:wrap;gap:6px}.hero-actions .btn{padding:0 14px;font-size:11px;gap:9px;min-height:47px}.focus-grid{grid-template-columns:1fr}.focus-card{min-height:207px}.focus-card h3{margin-top:25px}.tool-row{display:block}.tool-label{display:block;margin-bottom:12px}.process-grid{gap:9px}.process-step{padding:18px 14px}.process-step h4{font-size:16px}.cert-mini-grid{grid-template-columns:1fr}.cert-mini:nth-child(1){grid-column:span 1}.cert-mini{min-height:160px}.certificate-main{padding:26px;min-height:345px}.more-work{grid-template-columns:1fr}.mini-project{min-height:180px}.mini-project h3{margin-top:28px}.metric strong{font-size:31px}.metric span{font-size:9px}.contact h2{font-size:56px}.footer{font-size:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}#boot{display:none}#network{opacity:.3}}

html:not(.js) #boot{display:none}
/* V3 reliability and responsive alignment patch — all styles remain self-contained */
html{scroll-padding-top:80px}
body{min-width:280px}
.container{width:min(100%,var(--max));margin-inline:auto;padding-inline:clamp(20px,3.2vw,42px)}
.site-header{height:74px}
.nav-inner{min-width:0}
.hero{isolation:isolate;min-height:760px;min-height:max(730px,100svh);align-items:center}
/* Place moving dots above the vignette, not underneath an opaque mobile overlay. */
.hero::before{z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,11,16,.89) 0%,rgba(7,11,16,.73) 32%,rgba(7,11,16,.26) 85%),radial-gradient(ellipse 60% 70% at 84% 40%,rgba(27,170,149,.16),transparent 75%);background-size:110% 110%,120% 120%;animation:ambient-shift 13s ease-in-out infinite alternate}
#network{z-index:1;opacity:1;pointer-events:none;mask-image:linear-gradient(90deg,rgba(0,0,0,.17),rgba(0,0,0,.6) 40%,#000 100%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.17),rgba(0,0,0,.6) 40%,#000 100%)}
.hero-grid{z-index:1;opacity:.75;pointer-events:none;animation:grid-shift 22s linear infinite}
.hero-inner{z-index:2;isolation:isolate;padding-top:148px;padding-bottom:142px}
.hero-copy{max-width:860px;position:relative;z-index:3}
.hero h1{font-size:clamp(75px,9.25vw,142px);letter-spacing:-.093em;margin:28px 0 28px;line-height:.88}
.hero h1 .outline{-webkit-text-stroke:1px rgba(220,244,243,.82)}
.hero-intro{flex-wrap:wrap;gap:8px;min-height:2.7em;align-content:start;max-width:min(600px,100%)}
#typewriter{display:inline;min-width:1ch;overflow-wrap:anywhere}
.hero-desc{max-width:510px;margin-top:10px}
.hero-terminal{z-index:2;right:4%;bottom:18%;width:min(300px,26vw);opacity:.78;transform:rotate(-2deg)}
.hero-lower{left:clamp(20px,3.2vw,42px);right:clamp(20px,3.2vw,42px)}
.section{scroll-margin-top:73px}
/* Content never starts invisible: JS enables reveal only after observers exist. */
.reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.motion-ready .reveal:not(.visible){opacity:0;transform:translate3d(0,22px,0)}
.motion-ready .reveal.visible{opacity:1;transform:none}
/* Independent, browser-friendly animation makes motion visible even without canvas. */
@keyframes ambient-shift{0%{background-position:0% 50%,0% 30%}100%{background-position:100% 50%,100% 70%}}
@keyframes grid-shift{from{background-position:0 0}to{background-position:75px 75px}}
@keyframes sheen{0%,100%{transform:translateX(-160%) rotate(20deg)}48%,65%{transform:translateX(330%) rotate(20deg)}}
@keyframes soft-glow{0%,100%{opacity:.32}50%{opacity:.8}}
.hero .eyebrow::after{content:'';width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:soft-glow 2.8s ease-in-out infinite}
.project-visual:after{content:"";pointer-events:none;position:absolute;z-index:0;top:-80%;left:0;width:30%;height:260%;transform:translateX(-160%) rotate(20deg);background:linear-gradient(90deg,transparent,rgba(139,255,207,.035),transparent);animation:sheen 8s linear infinite}
.project-visual > *{z-index:1}
.focus-card{transition:background .3s,box-shadow .3s,border-color .3s}
.focus-card:focus-within,.focus-card:hover{background:#101d26}
/* Keep hover-only ornament but don't depend on hover for mobile animation. */
@media (max-width:1200px){.hero-terminal{width:268px;right:2%;bottom:10%;opacity:.58}}
@media (max-width:1000px){.hero-terminal{width:220px;bottom:9%;opacity:.42}.hero h1{font-size:clamp(70px,10vw,99px)}.hero-copy{max-width:710px}}
@media (max-width:760px){
  .site-header{height:68px}
  .nav-links{top:68px}
  .hero{min-height:700px;min-height:max(690px,100svh);align-items:flex-start}
  .hero::before{background:linear-gradient(110deg,rgba(7,11,16,.67),rgba(7,11,16,.3) 95%),radial-gradient(ellipse 120% 85% at 95% 35%,rgba(29,147,123,.12),transparent 80%)}
  #network{mask-image:linear-gradient(90deg,rgba(0,0,0,.38),#000 90%);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.38),#000 90%)}
  .hero-grid{opacity:.9}
  .hero-inner{padding-top:clamp(155px,19svh,198px);padding-bottom:135px;min-height:inherit}
  .hero-copy{max-width:100%}
  .hero h1{font-size:clamp(59px,15.9vw,109px);margin:24px 0 26px;line-height:.94;letter-spacing:-.088em}
  .hero-terminal{display:none}
  .hero-intro{font-size:clamp(14px,3.7vw,17px);line-height:1.6;min-height:3em}
  .hero-desc{max-width:490px;font-size:14px;line-height:1.8}
  .hero-actions{gap:11px;margin-top:28px}
  .hero-lower{left:clamp(20px,3.2vw,42px);right:clamp(20px,3.2vw,42px);bottom:25px}
  .section{padding-block:82px}
  .section-head{margin-bottom:33px}
  .section h2{font-size:clamp(38px,9vw,62px)}
  .metric-line{gap:0}
  .footer{flex-wrap:wrap;row-gap:18px}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(53px,16.7vw,75px)}
  .hero .eyebrow{font-size:9px;letter-spacing:.12em;gap:9px}
  .hero .eyebrow:before{width:23px}
  .hero-intro{display:block;min-height:4.3em}
  .hero-intro #typewriter{display:inline}
  .hero-actions .btn{font-size:11px;flex:0 1 auto;padding-inline:13px}
  .hero-desc{margin-top:0}
  .about-main .lead{font-size:clamp(22px,6vw,26px)}
  .metric-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric{min-width:0;padding-right:8px}
  .metric:not(:first-child){padding-left:10px}
  .metric span{overflow-wrap:anywhere}
  .toolkit{margin-top:55px}
  .process{margin-top:65px}
  .project-content{padding:24px 23px 28px}
  .project-content h3{font-size:25px}
  .certificate-main h3{font-size:28px}
  .email-link{max-width:100%;overflow-wrap:anywhere}
}
@media(max-width:350px){
  .hero h1{font-size:52px}
  .hero-actions{flex-direction:column;align-items:stretch;max-width:230px}
  .hero-actions .btn{min-height:44px}
  .hero-inner{padding-top:140px}
  .process-grid{grid-template-columns:1fr}
  .footer span:nth-child(2){display:none}
}
/* Follow platform motion settings; do not hide page content when animations are disabled. */
@media(prefers-reduced-motion:reduce){.motion-ready .reveal:not(.visible){opacity:1;transform:none}.hero::before,.hero-grid,.hero .eyebrow::after,.project-visual::after{animation:none!important}#network{opacity:.35}}


/* Fail-visible scroll transitions: unsupported/slow observers never hide sections. */
.motion-ready .reveal:not(.visible){opacity:1;transform:none}
.motion-ready .reveal.visible{animation:scroll-arrive .72s cubic-bezier(.22,1,.36,1) both}
@keyframes scroll-arrive{from{opacity:.5;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
#typewriter{transition:opacity .28s ease,transform .28s ease;display:inline-block}
#typewriter.word-switching{opacity:0;transform:translateY(7px)}
@media(max-width:760px){#network{opacity:.78}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal.visible{animation:none}#typewriter{transition:none}}

/* Refined spacing and motion. Content and original visual identity preserved. */
:root{--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:94px}
.container{padding-inline:clamp(22px,4vw,48px)}
.site-header{background:rgba(7,11,16,.72);backdrop-filter:blur(16px)}
.mark{gap:8px}.mark-sigil{margin-right:5px;flex-shrink:0}
.nav-links{gap:clamp(20px,2.5vw,33px)}
.nav-links a{position:relative;padding-block:12px}
.nav-links a::after{content:"";position:absolute;bottom:3px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a.active::after{transform:scaleX(1)}
.hero{min-height:max(740px,100svh)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:center;gap:48px;padding-top:132px;padding-bottom:116px;min-height:inherit}
.hero-copy{min-width:0;max-width:100%}
.hero h1{font-size:clamp(84px,10.2vw,138px);line-height:.94;letter-spacing:-.075em;margin:28px 0 30px}
.hero-intro{display:block;min-height:3.2em;font-size:clamp(16px,1.7vw,20px);line-height:1.6;margin-bottom:4px}
#typewriter{display:inline;overflow-wrap:normal;transition:opacity .25s ease}
#typewriter.word-switching{transform:none}
.hero-desc{max-width:510px;line-height:1.85;margin-top:0}
.hero-terminal{position:relative;inset:auto;width:100%;opacity:.9;margin-top:110px;align-self:center;animation:terminal-drift 8s ease-in-out infinite;transform:rotate(-2deg)}
@keyframes terminal-drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(-1deg)}}
.hero-lower{left:clamp(22px,4vw,48px);right:clamp(22px,4vw,48px);bottom:30px;font-size:10px}
.section{padding-block:clamp(80px,9vw,120px);scroll-margin-top:0}
.section-head{align-items:end;gap:40px;margin-bottom:42px}
.section-head>div{min-width:0}.section-head p{flex:0 1 330px}
.section h2{line-height:1.1;letter-spacing:-.06em;text-wrap:balance}
.about-layout{grid-template-columns:220px minmax(0,1fr);gap:64px}
.about-main .lead{line-height:1.5}.body-copy{margin-bottom:20px}
.focus-card{padding:30px;min-height:270px}
.focus-card h3{line-height:1.3;margin-top:32px;min-height:1.3em}
.focus-card p{max-width:none}
.toolkit{grid-template-columns:minmax(180px,1fr) minmax(0,2.2fr);gap:48px}
.tool-label{flex:0 0 175px;min-width:0;line-height:1.6}
.tool-row,.pills{min-width:0}
.cert-mini h3{line-height:1.25;padding-top:24px}
.cert-link{line-height:1.7;min-height:44px}
.project-content h3{line-height:1.25}.project-top{flex-wrap:wrap;row-gap:10px}
.project-tag{line-height:1.6}.mini-project h3{line-height:1.3}
.contact-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.email-link{max-width:100%;overflow-wrap:anywhere}.social-link{min-height:44px;display:inline-flex;align-items:center}
.footer{margin-top:80px;line-height:1.7}.top-btn{width:44px;height:44px;flex-shrink:0}
.motion-ready .reveal.visible{animation:scroll-arrive .65s var(--ease) backwards}
/* Animation ends with no persistent transform, allowing card hover to work. */
@media(hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1)}.mini-project:hover,.project-card:hover{box-shadow:0 16px 36px rgba(0,0,0,.18)}}
@media(max-width:1050px){
 .status{display:none}.hero-inner{grid-template-columns:minmax(0,1fr) 240px;gap:30px}
 .hero h1{font-size:clamp(80px,10.5vw,110px)}
 .hero-terminal{width:100%;opacity:.85;inset:auto}
 .about-layout{grid-template-columns:170px minmax(0,1fr);gap:40px}
 .toolkit{grid-template-columns:1fr;gap:18px}
 .focus-card{padding:26px}.focus-card h3{font-size:20px}
}
@media(max-width:820px){
 .hero-inner{grid-template-columns:1fr}.hero-terminal{display:none}
 .hero-copy{max-width:630px}.hero h1{font-size:clamp(78px,13vw,110px)}
 .focus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero-coords{gap:12px;font-size:9px}
}
@media(max-width:760px){
 html{scroll-padding-top:84px}.nav-links{gap:0}.nav-links a{padding:16px 10px}.nav-links a::after{display:none}
 .hero{min-height:max(650px,100svh)}
 .hero-inner{padding-top:clamp(120px,17svh,160px);padding-bottom:105px;align-content:center}
 .hero h1{font-size:clamp(64px,16vw,110px);margin:24px 0 26px}
 .hero-intro{font-size:17px;min-height:3.2em;max-width:520px}
 .hero-desc{font-size:14px}.hero-actions{margin-top:28px;gap:12px}
 .hero-lower{bottom:28px}.hero-coords{display:none}
 .section-head{display:block}.section-head p{max-width:480px}
 .about-layout{grid-template-columns:1fr;gap:28px}
 .focus-card{min-height:250px}.metric-line{margin-top:36px}
 .contact-layout{grid-template-columns:1fr;gap:36px}
 .contact h2{font-size:clamp(56px,12vw,80px)}
 .footer{margin-top:64px;display:grid;grid-template-columns:1fr auto;gap:16px}
 .footer>span:nth-child(2){grid-column:1;grid-row:2;display:block;font-size:9px;letter-spacing:.02em}
 .top-btn{grid-column:2;grid-row:1 / 3}
}
@media(max-width:480px){
 .hero-inner{padding-top:118px;padding-bottom:100px}
 .hero h1{font-size:clamp(56px,17vw,81px)}
 .hero-intro{font-size:15px;min-height:3.2em}
 .hero .eyebrow{font-size:9px;letter-spacing:.09em;gap:8px;line-height:1.7}
 .hero .eyebrow:before{width:18px;flex-shrink:0}
 .hero-actions .btn{min-height:48px;padding-inline:15px}
 .focus-grid{grid-template-columns:1fr}.focus-card{min-height:220px;padding:27px}
 .tool-row{display:block}.tool-label{margin-bottom:12px}
 .metric span{font-size:10px;line-height:1.7}.metric strong{font-size:34px}
 .certificate-main{padding:26px}.cert-mini{padding:26px}
 .audit-illustration{width:88%;padding-inline:12px}.aud-top{font-size:8px;gap:8px}
 .project-content{padding:26px 23px}.project-badge{white-space:nowrap}
 .process-step h4{font-size:16px}.process-step p{font-size:12px}
}
@media(max-width:350px){
 .container{padding-inline:18px}.hero h1{font-size:16.5vw}
 .hero .eyebrow{font-size:8px}.hero-actions{max-width:none;flex-direction:column}
 .hero-lower{left:18px;right:18px}.metric strong{font-size:28px}
 .metric:not(:first-child){padding-left:8px}.metric span{font-size:9px}
}
@media(hover:none){.btn:hover,.project-card:hover,.mini-project:hover,.cert-mini:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
 .hero-terminal{animation:none;transform:none}.motion-ready .reveal.visible{animation:none}
 #typewriter.word-switching{opacity:1}#network{opacity:.45}
}


/* Animation clarity and consistent mobile presentation. */
#network{opacity:1;mask-image:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.7) 43%,#000);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.7) 43%,#000)}
.hero-grid{background-image:linear-gradient(rgba(115,204,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(115,204,255,.045) 1px,transparent 1px)}
.hero-terminal{display:block;opacity:1}
.terminal-body .dim{color:#87a9ac}
.project-visual:after{background:linear-gradient(90deg,transparent,rgba(139,255,207,.11),transparent)}
.scanner-illustration::before{border-color:rgba(139,255,207,.48)}
.scanner-illustration::after{border-color:rgba(115,204,255,.3);border-top-color:var(--cyan);border-right-color:rgba(115,204,255,.6)}
.scanner-sweep{opacity:.85;background:linear-gradient(26deg,rgba(139,255,207,.4),transparent 75%)}
/* Animate transforms instead of recalculating the audit bar layout each frame. */
.aud-track>span{transform-origin:left;animation:audit-pulse 3s ease-in-out infinite alternate}
@keyframes audit-pulse{from{transform:scaleX(.7);opacity:.7}to{transform:scaleX(1);opacity:1}}
@media(max-width:820px){
 .hero-inner{gap:32px;padding-bottom:108px}
 .hero-terminal{display:block;justify-self:end;width:min(290px,100%);margin:0 6px 0 0;opacity:1}
}
@media(max-width:480px){
 #network{opacity:1;mask-image:linear-gradient(90deg,rgba(0,0,0,.46),#000);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.46),#000)}
 .hero-terminal{justify-self:start;width:min(290px,100%);margin:0 0 0 3px}
 .hero-inner{gap:34px}.hero-terminal .terminal-body{padding:13px 16px;font-size:10px;line-height:1.85}
}
@media(prefers-reduced-motion:reduce){.hero-terminal{animation:none;transform:none}#network{opacity:.7}}


/* Blue / green refinement: readable names and stable, separated layout. */
:root{--accent:#61f2a6;--cyan:#51b8ff;--lilac:#51b8ff;--stroke:rgba(81,184,255,.16);--stroke2:rgba(97,242,166,.34);--txt:#eff7ff;--sub:#adbfce}
.mark{gap:13px;letter-spacing:0;line-height:1;flex-shrink:0;white-space:nowrap}
.mark-word{display:inline-block;letter-spacing:-.04em}.mark-word b{margin-left:2px}
.mark-sigil{margin:0;width:30px;height:30px;flex:0 0 30px}
.nav-inner{gap:24px}.nav-right{flex-shrink:0}
.hero-inner{grid-template-columns:minmax(0,1fr) 310px;gap:48px;align-content:center}
.hero h1{font-family:var(--sans);font-size:clamp(76px,8.5vw,120px);font-weight:800;letter-spacing:-.045em;line-height:1.06;margin:24px 0 25px}
.hero h1 .outline{color:var(--cyan);-webkit-text-stroke:0;letter-spacing:-.025em;text-shadow:0 0 36px rgba(81,184,255,.14)}
.hero h1 .outline:after{content:"";display:inline-block;width:.14em;height:.07em;margin-left:.09em;background:var(--accent);vertical-align:baseline;animation:blink 1.1s infinite}
.hero-intro{min-height:3.2em;max-width:510px}.hero-desc{max-width:510px}
.hero-terminal{width:100%;margin:30px 0 0;transform:none;animation:terminal-bob 8s ease-in-out infinite;border-color:rgba(81,184,255,.35);background:rgba(6,19,34,.92)}
@keyframes terminal-bob{50%{transform:translateY(-8px)}}
.terminal-top{background:rgba(81,184,255,.06)}
.terminal-body{min-height:214px;font-size:11px;line-height:2;padding:16px;overflow-wrap:anywhere}
.terminal-body>div{min-height:22px}.terminal-body .dim{color:#a1b6c8}
.terminal-caret{display:inline-block;width:7px;height:12px;vertical-align:-2px;background:var(--accent);animation:blink 1s steps(1) infinite}
.hero::before{background:linear-gradient(100deg,rgba(7,11,16,.85),rgba(7,11,16,.35)),radial-gradient(ellipse at 85% 30%,rgba(30,126,239,.21),transparent 60%),radial-gradient(ellipse at 25% 90%,rgba(35,216,133,.12),transparent 60%)}
.section h2 .accent,.contact h2 .accent{color:var(--cyan)}
.fc-icon,.project-badge,.cert-count{color:var(--cyan)}
.aud-row:nth-child(4) .aud-track>span{background:var(--accent)}
.certificate-main{min-height:0;background:linear-gradient(145deg,rgba(81,184,255,.09),rgba(97,242,166,.055)),#0b1722}
.certificate-main .cert-eyebrow{margin-top:24px;line-height:1.8}.certificate-main:after{color:rgba(81,184,255,.05)}
.credential-details{border-block:1px solid var(--stroke);margin:12px 0 22px;padding:18px 0;position:relative;z-index:1}
.credential-details strong{font-size:20px;color:var(--txt);display:block;margin-bottom:10px}
.credential-details ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--sub);font-size:12px;line-height:1.6}
.credential-details li:before{content:"✓";color:var(--accent);margin-right:10px}
.credential-details small{display:block;font:10px/1.8 var(--mono);color:var(--cyan);margin-top:16px;overflow-wrap:anywhere}
.cert-link{position:relative;z-index:1;flex-wrap:wrap;margin-top:auto}
@media(max-width:1050px){.hero-inner{grid-template-columns:minmax(0,1fr) 280px;gap:30px}.hero h1{font-size:clamp(72px,8.8vw,100px)}}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr;gap:32px;padding-top:124px;padding-bottom:100px;min-height:0}.hero{min-height:100svh}.hero-copy{max-width:630px}.hero h1{font-size:clamp(64px,12vw,100px)}.hero-terminal{justify-self:start;width:min(360px,100%);margin:0;inset:auto}.hero-lower{bottom:25px}.hero-coords{display:none}}
@media(max-width:480px){.hero-inner{padding-top:112px;padding-bottom:92px;gap:28px}.hero h1{font-size:clamp(56px,16vw,76px);line-height:1.08;margin:20px 0 22px}.hero-intro{font-size:15px;min-height:3.2em}.hero-terminal .terminal-body{font-size:11px;line-height:2;padding:15px 16px;min-height:214px}.hero-actions{margin-top:24px}.nav-inner{gap:16px}.certificate-main h3{line-height:1.25;letter-spacing:-.025em}}
@media(prefers-reduced-motion:reduce){.hero-terminal{animation:none}}


/* Large, legible boot screen and a top-hinged cover that opens upward. */
html.is-loading{overflow:hidden}
#boot{padding:24px;perspective:none;transform-origin:50% 0%;backface-visibility:hidden;background:radial-gradient(ellipse at 12% 85%,rgba(97,242,166,.13),transparent 60%),radial-gradient(ellipse at 90% 15%,rgba(81,184,255,.17),transparent 60%),#04090f;transition:none;overflow:hidden}
#boot::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(81,184,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(81,184,255,.045) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse,#000,transparent 80%)}
#boot::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--accent));box-shadow:0 0 28px rgba(81,184,255,.65)}
.boot-panel{width:min(700px,100%);padding:clamp(24px,4vw,48px);border:1px solid rgba(81,184,255,.3);border-radius:18px;background:rgba(5,16,27,.95);box-shadow:0 28px 100px rgba(0,0,0,.35);position:relative}
.boot-brand{gap:16px;font-size:clamp(15px,2.5vw,23px);letter-spacing:.1em;line-height:1.4}
.boot-brand .boot-icon{font-size:clamp(28px,4vw,40px);padding:12px;border-color:var(--cyan);color:var(--cyan);flex-shrink:0}
.boot-heading{margin:32px 0 10px;font-family:var(--sans);font-size:clamp(32px,5.4vw,60px);font-weight:750;letter-spacing:-.04em;line-height:1.1;color:var(--txt)}
.boot-heading span{color:var(--cyan)}
.boot-line{margin-top:24px;height:auto;min-height:3.2em;font-size:clamp(13px,1.8vw,17px);line-height:1.6;color:#b7d4d6;display:flex;align-items:baseline;gap:10px}
.boot-dot{width:8px;height:8px;flex:0 0 8px;margin:0}
.boot-bar{height:6px;margin:12px 0 20px;border-radius:8px;background:#17303f}
.boot-progress{width:100%;transform:scaleX(0);transform-origin:left;transition:transform 90ms linear;background:linear-gradient(90deg,var(--cyan),var(--accent));box-shadow:0 0 18px rgba(97,242,166,.4)}
.boot-meta{gap:16px;align-items:center;font-size:clamp(10px,1.4vw,13px);line-height:1.5;letter-spacing:.07em;color:#8ba9bd}
#boot-percent{font-size:clamp(25px,4vw,38px);font-weight:700;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
#boot.done{opacity:1;visibility:visible;pointer-events:none;will-change:transform;animation:boot-unfold 1050ms cubic-bezier(.65,0,.2,1) both}
@keyframes boot-unfold{0%{transform:perspective(1600px) rotateX(0deg);opacity:1}78%{opacity:1}100%{transform:perspective(1600px) rotateX(-98deg);opacity:0}}
@media(max-width:480px){#boot{padding:18px}.boot-panel{padding:26px 22px}.boot-brand{font-size:14px;gap:12px}.boot-heading{font-size:36px}.boot-meta{letter-spacing:.025em}}
@media(max-height:480px){#boot{padding:14px}.boot-panel{padding:20px 30px;max-width:660px}.boot-heading{font-size:32px;margin-top:18px}.boot-line{margin-top:12px;min-height:1.6em}.boot-bar{margin:10px 0}.boot-brand .boot-icon{padding:8px;font-size:25px}}
/* Move prepainted layers rather than repainting background positions each frame. */
.hero-grid{inset:-75px;animation:grid-drift 22s linear infinite}
@keyframes grid-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(75px,75px,0)}}
.hero::before{inset:-5%;animation:ambient-drift 13s ease-in-out infinite alternate}
@keyframes ambient-drift{from{transform:translate3d(-1%,0,0) scale(1.02)}to{transform:translate3d(1%,2%,0) scale(1.04)}}
html.is-loading main *,html.is-loading main *::before,html.is-loading main *::after,
html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after,
.motion-paused,.motion-paused::before,.motion-paused::after,.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
/* Certificate bytes are embedded; viewing needs no external image host. */
.certificate-main h3{font-size:clamp(25px,2.7vw,34px);line-height:1.2;letter-spacing:-.035em}
.certificate-preview{display:block;position:relative;z-index:1;width:100%;padding:0;border:1px solid rgba(81,184,255,.35);border-radius:8px;overflow:hidden;background:white;cursor:zoom-in;margin:12px 0 18px;transition:transform .25s,border-color .25s}
.certificate-preview img{display:block;width:100%;height:auto;aspect-ratio:1800/1391;object-fit:contain}
.certificate-preview-label{display:flex;justify-content:space-between;padding:12px 14px;background:#102332;color:var(--cyan);font:11px/1.5 var(--mono)}
.certificate-preview:hover{border-color:var(--accent);transform:translateY(-2px)}
.credential-details{margin-top:0}.credential-details strong{font-size:16px}
.cert-actions{display:flex;flex-wrap:wrap;gap:10px 22px;position:relative;z-index:1;margin-top:auto}.cert-actions .cert-link{margin:0;font-size:11px}
.certificate-dialog{width:min(1220px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--stroke2);border-radius:12px;color:var(--txt);background:#09131d;box-shadow:0 30px 100px #0008;overscroll-behavior:contain}
.certificate-dialog::backdrop{background:rgba(2,7,12,.88)}
.certificate-dialog-head{position:sticky;top:0;background:#09131d;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 18px;z-index:1;font:12px/1.5 var(--mono)}
.certificate-close{min-width:44px;min-height:44px;border:1px solid var(--stroke2);border-radius:6px;background:#122331;color:var(--txt);font-size:24px;cursor:pointer}
.certificate-dialog-image{background:white;overflow:auto}.certificate-dialog-image img{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:reduce){#boot{display:none}#boot.done{animation:none}.hero-grid,.hero::before{animation:none}}


/* Keep the viewport width stable when the boot scroll lock is released. */
html{scrollbar-gutter:stable}
/* The terminal moves over a live canvas: use its existing opaque tint rather
   than resampling the changing backdrop for every animation frame. */
.hero-terminal{backdrop-filter:none;-webkit-backdrop-filter:none;contain:layout style}
.site-header{transition:background .3s,border-color .3s}


/* Keep fixed navigation clear of the WordPress admin toolbar. */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:600px){body.admin-bar #wpadminbar{position:fixed}}
.wp-content-shell{padding-top:130px;min-height:80vh}
.wp-content-shell img{max-width:100%;height:auto}
.wp-content-shell a{text-decoration:underline;text-underline-offset:4px}
.wp-content-shell article{margin-bottom:48px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}