:root{--bg:#fff;--bg2:#f5f5f7;--text:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.08);--blue:#0071e3;--blue2:#0077ed;--card:#fff;--glass:rgba(250,250,252,.78);--shadow:0 20px 50px rgba(0,0,0,.08);--radius:30px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);letter-spacing:-.015em}button,input,textarea{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}.global-nav{position:sticky;top:0;z-index:50;height:48px;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.04)}.nav-inner{max-width:1050px;height:100%;margin:auto;display:flex;align-items:center;gap:28px;padding:0 20px}.brand{font-size:19px;font-weight:700;width:28px}.nav-links{display:flex;justify-content:center;gap:28px;flex:1;font-size:12px}.nav-links a{opacity:.82}.nav-links a:hover{opacity:1}.nav-actions{display:flex;gap:8px}.icon-btn,.menu-btn{border:0;background:transparent;font-size:18px;padding:7px;cursor:pointer}.menu-btn{display:none}.mobile-menu{position:fixed;z-index:49;top:48px;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);padding:24px;box-shadow:0 20px 30px rgba(0,0,0,.08)}.mobile-menu a{display:block;padding:14px 0;font-size:22px;font-weight:600}.section-pad{padding:110px max(24px,calc((100vw - 1180px)/2))}.hero{min-height:calc(100vh - 48px);text-align:center;padding-top:90px;overflow:hidden}.eyebrow{font-size:17px;font-weight:600;margin:0 0 14px}.hero-title,.section-head h2,.statement h2,.ending h2{font-size:clamp(54px,7vw,96px);line-height:.98;letter-spacing:-.055em;margin:0;font-weight:700}.hero-title span,.section-head h2 span,.ending h2 span{color:#86868b}.hero-copy{max-width:760px;margin:28px auto 0;font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--muted);font-weight:500}.hero-actions{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:34px}.btn{border:0;border-radius:980px;padding:12px 22px;font-size:17px;cursor:pointer;transition:.2s transform,.2s background}.btn:hover{transform:scale(1.02)}.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue2)}.btn.secondary{background:#e8e8ed}.btn.linklike{background:none;color:var(--blue);padding-inline:4px}.hero-device{max-width:1000px;margin:70px auto -80px;border-radius:42px;background:#111;color:#f5f5f7;box-shadow:0 40px 100px rgba(0,0,0,.2);padding:14px;border:1px solid #333;transform:perspective(1200px) rotateX(3deg)}.device-top{height:44px;display:flex;align-items:center;gap:7px;padding:0 12px;color:#a1a1a6;font-size:12px}.device-top span{width:10px;height:10px;border-radius:50%;background:#555}.device-top b{margin-left:auto;margin-right:auto;font-weight:500}.device-screen{background:linear-gradient(145deg,#111,#202025);border-radius:30px;padding:70px 50px;text-align:left;min-height:470px}.screen-kicker{font-size:13px;color:#8e8e93}.screen-title{font-size:clamp(44px,6vw,82px);font-weight:700;letter-spacing:-.05em;line-height:1}.screen-title span{color:#8e8e93}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:70px}.mini-grid div{border-top:1px solid #38383d;padding-top:16px}.mini-grid small{display:block;color:#8e8e93;margin-bottom:8px}.statement{text-align:center;background:var(--bg2)}.statement h2{font-size:clamp(44px,5.5vw,78px);max-width:1050px;margin:auto}.statement p{font-size:24px;color:var(--muted)}.section-head{max-width:900px;margin-bottom:55px}.section-head h2{font-size:clamp(44px,5.5vw,76px)}.section-head>p:last-child{font-size:21px;color:var(--muted);max-width:700px;line-height:1.45}.bento{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.card,.tool-card,.notes,.tool-console,.mc-panel{background:var(--card);border-radius:var(--radius);padding:36px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.card.big{grid-row:span 2;min-height:520px;display:flex;flex-direction:column;justify-content:space-between}.card.dark{background:#000;color:#f5f5f7}.card.wide{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between}.card-label{font-size:14px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.card h3,.tool-card h3,.notes h3{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;margin:10px 0}.muted{color:var(--muted);line-height:1.5}.giant-number{font-size:100px;font-weight:700;letter-spacing:-.07em}.giant-number span{font-size:30px;color:var(--muted)}.chip-row{display:flex;gap:10px;flex-wrap:wrap}.chip-row span,.stack-list span{border-radius:999px;background:#1c1c1e;padding:10px 14px;color:#f5f5f7;font-size:13px}.route-visual{display:flex;align-items:center;gap:10px;margin-top:42px;flex-wrap:wrap}.route-visual span{background:#f2f2f7;border-radius:999px;padding:10px 14px}.text-btn{background:none;border:0;color:var(--blue);font-size:17px;padding:0;cursor:pointer}.alt-bg{background:var(--bg2)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:var(--card);border-radius:26px;padding:28px;min-height:220px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line);transition:.25s transform,.25s box-shadow}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.service-icon{font-size:32px}.service-card h3{font-size:27px;letter-spacing:-.035em;margin:18px 0 6px}.service-card p{color:var(--muted);margin:0}.service-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:20px}.status-dot{display:inline-flex;align-items:center;gap:7px;font-size:13px}.status-dot i{width:8px;height:8px;border-radius:50%;background:#999}.status-dot.online i{background:#34c759}.status-dot.offline i{background:#ff3b30}.center{text-align:center;margin-top:30px}.minecraft-section{background:#000;color:#f5f5f7}.minecraft-section .section-head p{color:#a1a1a6}.mc-panel{background:#1c1c1e;box-shadow:none;display:flex;justify-content:space-between;align-items:center}.mc-address small{display:block;color:#8e8e93}.mc-address strong{display:block;font-size:clamp(28px,4vw,54px);margin-top:6px;letter-spacing:-.05em}.mc-actions{display:flex;gap:10px}.minecraft-section .btn.secondary{background:#2c2c2e;color:#fff}.mc-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.tool-card{background:#1c1c1e;box-shadow:none}.tool-card p{color:#a1a1a6;line-height:1.45}.tools-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.tool-console{background:#101012;color:#f5f5f7;min-height:420px}.console-top{display:flex;justify-content:space-between;color:#8e8e93;border-bottom:1px solid #2c2c2e;padding-bottom:15px}.console-output{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.55;max-height:280px;overflow:auto;padding:12px 0}.console-output p{margin:5px 0}.console-input{display:flex;gap:8px;border-top:1px solid #2c2c2e;padding-top:14px}.console-input input{flex:1;background:none;border:0;color:#fff;outline:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.notes{display:flex;flex-direction:column}.notes-head{display:flex;justify-content:space-between;align-items:flex-start}.notes-head h3{margin-top:4px}.notes-head span{font-size:12px;color:#34c759}.notes textarea,.big-textarea{width:100%;flex:1;min-height:260px;border:0;background:#f5f5f7;border-radius:18px;padding:18px;resize:none;outline:none;line-height:1.5}.utility-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.utility{background:#fff;border:0;border-radius:22px;padding:24px;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:.2s transform}.utility:hover{transform:scale(1.015)}.utility span{font-size:26px;display:block;margin-bottom:20px}.utility b,.utility small{display:block}.utility small{color:var(--muted);margin-top:4px}.about-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:start}.about-wrap h2{font-size:clamp(44px,5vw,72px);letter-spacing:-.05em;margin:0}.about-card{font-size:clamp(24px,3vw,38px);line-height:1.28;font-weight:600}.about-text{margin-bottom:25px}.ending{text-align:center;background:#000;color:#f5f5f7}.ending h2{font-size:clamp(50px,7vw,90px)}.ending p{color:#8e8e93;font-size:18px}footer{background:#f5f5f7;color:#6e6e73;font-size:12px;padding:30px 24px}.footer-inner{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}.footer-inner b{color:#1d1d1f}.footer-inner div{display:flex;gap:16px}.footer-inner small{text-align:right}.toast{position:fixed;z-index:100;left:50%;bottom:30px;transform:translate(-50%,20px);background:rgba(28,28,30,.9);backdrop-filter:blur(18px);color:#fff;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.command-palette{position:fixed;z-index:90;inset:0;background:rgba(0,0,0,.25);backdrop-filter:blur(12px);display:none;place-items:start center;padding-top:12vh}.command-palette.is-open{display:grid}.palette-box{width:min(620px,calc(100vw - 30px));background:rgba(250,250,252,.92);border-radius:24px;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.2)}.palette-box input{width:100%;border:0;background:transparent;font-size:22px;padding:14px;outline:none}.palette-box small{display:block;color:var(--muted);padding:10px 14px}.palette-result{padding:12px 14px;border-radius:14px;cursor:pointer}.palette-result:hover,.palette-result.active{background:#e8e8ed}.modal{border:0;background:transparent;padding:0}.modal::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(10px)}.modal-card{width:min(620px,calc(100vw - 30px));background:rgba(250,250,252,.94);backdrop-filter:blur(30px);border-radius:28px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.22)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{font-size:28px;margin:0}.modal-head button{border:0;background:#e8e8ed;border-radius:50%;width:32px;height:32px;cursor:pointer}.modal label{display:block;margin:18px 0;font-size:13px;color:var(--muted)}.modal input{width:100%;margin-top:8px;border:0;background:#fff;border-radius:13px;padding:13px;outline:none;box-shadow:inset 0 0 0 1px var(--line)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.motd-preview{background:#1c1c1e;color:#fff;border-radius:18px;padding:20px}.motd-preview b,.motd-preview span{display:block}.motd-preview span{color:#a1a1a6;margin-top:6px}.stack-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.stack-list span{background:#e8e8ed;color:#1d1d1f}.service-edit-row{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin:12px 0}.service-edit-row input{margin:0}.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.focus-mode .global-nav,.focus-mode footer,.focus-mode #tools,.focus-mode #homelab{display:none}.focus-mode .hero{min-height:100vh}.dark-mode{--bg:#000;--bg2:#1c1c1e;--text:#f5f5f7;--muted:#a1a1a6;--line:rgba(255,255,255,.1);--card:#1c1c1e;--glass:rgba(28,28,30,.74)}.dark-mode .alt-bg,.dark-mode footer{background:#111}.dark-mode .utility,.dark-mode .notes textarea,.dark-mode .big-textarea,.dark-mode .palette-box,.dark-mode .modal-card{background:#1c1c1e;color:#fff}.dark-mode .btn.secondary,.dark-mode .mobile-menu,.dark-mode .stack-list span{background:#2c2c2e;color:#fff}.dark-mode .route-visual span{background:#2c2c2e}.dark-mode .modal input{background:#2c2c2e;color:#fff}.dark-mode footer b{color:#fff}
@media(max-width:900px){.nav-links{display:none}.menu-btn{display:block}.section-pad{padding:80px 22px}.hero{padding-top:70px}.hero-device{margin-top:55px}.device-screen{padding:45px 28px}.mini-grid{grid-template-columns:1fr 1fr;margin-top:45px}.bento,.tools-layout,.about-wrap{grid-template-columns:1fr}.card.big{min-height:420px}.service-grid,.mc-tools-grid{grid-template-columns:1fr 1fr}.utility-row{grid-template-columns:1fr 1fr}.about-wrap{gap:25px}.footer-inner{grid-template-columns:1fr;text-align:center}.footer-inner div{justify-content:center}.footer-inner small{text-align:center}.mc-panel{align-items:flex-start;gap:24px;flex-direction:column}}
@media(max-width:560px){.hero-title{font-size:52px}.hero-copy{font-size:20px}.hero-actions{flex-direction:column}.hero-device{border-radius:28px;padding:8px;margin-inline:-8px}.device-screen{min-height:390px;border-radius:22px;padding:35px 20px}.screen-title{font-size:42px}.mini-grid{grid-template-columns:1fr}.service-grid,.mc-tools-grid,.utility-row{grid-template-columns:1fr}.card.wide{align-items:flex-start;gap:22px;flex-direction:column}.mc-address strong{font-size:28px}.mc-actions{width:100%}.mc-actions .btn{flex:1}.service-edit-row{grid-template-columns:1fr}.statement h2{font-size:43px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}

/* Hotfix: native hidden attribute must win over component display rules. */
[hidden]{display:none!important}
.command-palette[hidden]{display:none!important}
.mobile-menu[hidden]{display:none!important}

/* v3.0.3 — Apple-like motion system */
:root{--ease-apple:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.22,.61,.36,1)}

/* softer, more dimensional scroll reveals */
.reveal{
  opacity:0;
  transform:translate3d(0,42px,0) scale(.985);
  filter:blur(7px);
  transition:
    opacity .95s var(--ease-apple),
    transform 1.05s var(--ease-apple),
    filter .9s var(--ease-apple);
  will-change:transform,opacity,filter;
}
.reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}

/* staged hero entrance */
.hero .eyebrow{transition-delay:.04s}
.hero .hero-title{transition-delay:.10s}
.hero .hero-copy{transition-delay:.18s}
.hero .hero-actions{transition-delay:.26s}
.hero .hero-device{transition-delay:.30s}

/* Apple-style scroll-linked hero treatment */
.hero-title,.hero-copy,.hero-actions{will-change:transform,opacity}
.hero-device{
  --device-y:0px;
  --device-scale:1;
  --device-rx:3deg;
  transform:perspective(1400px) translate3d(0,var(--device-y),0) rotateX(var(--device-rx)) scale(var(--device-scale));
  transform-origin:center top;
  will-change:transform,opacity;
}

/* Cards enter in a gentle cascade */
.bento .reveal:nth-child(2),.mc-tools-grid .reveal:nth-child(2),.tools-layout .reveal:nth-child(2){transition-delay:.08s}
.bento .reveal:nth-child(3),.mc-tools-grid .reveal:nth-child(3){transition-delay:.15s}
.bento .reveal:nth-child(4){transition-delay:.22s}
.utility-row .reveal:nth-child(2){transition-delay:.06s}
.utility-row .reveal:nth-child(3){transition-delay:.12s}
.utility-row .reveal:nth-child(4){transition-delay:.18s}

/* cards feel more like Apple's product tiles */
.card,.service-card,.tool-card,.utility,.notes,.tool-console,.mc-panel{
  transform-origin:center center;
  will-change:transform;
}
.motion-card{transition:transform .55s var(--ease-apple),box-shadow .55s var(--ease-apple)}
.motion-card:hover{transform:translateY(-6px) scale(1.008)}

/* headings reveal with a restrained crop instead of a generic fade */
.section-head,.about-wrap,.statement,.ending{clip-path:inset(0 0 0 0 round 0)}
.section-head.reveal,.statement.reveal,.about-wrap.reveal,.ending.reveal{transform:translate3d(0,52px,0) scale(.99)}
.section-head.reveal.visible,.statement.reveal.visible,.about-wrap.reveal.visible,.ending.reveal.visible{transform:none}

/* sticky-nav polish while scrolling */
.global-nav{transition:background .45s var(--ease-apple),box-shadow .45s var(--ease-apple),border-color .45s var(--ease-apple)}
body.has-scrolled .global-nav{background:rgba(250,250,252,.88);box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 30px rgba(0,0,0,.035)}
.dark-mode.has-scrolled .global-nav{background:rgba(28,28,30,.88)}

/* end card grows subtly into view */
.ending{transform-origin:center center;will-change:transform,opacity}

/* interaction feedback, kept deliberately subtle */
.btn,.text-btn,.icon-btn,.menu-btn{transition:transform .28s var(--ease-apple),opacity .28s var(--ease-apple),background .28s var(--ease-apple)}
.btn:active,.icon-btn:active,.menu-btn:active{transform:scale(.96)}
.text-btn:hover{opacity:.72}

/* motion system fallback */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.visible,.hero-device,.ending,.motion-card,.motion-card:hover{opacity:1!important;filter:none!important;transform:none!important;transition:none!important;animation:none!important}
  .global-nav{transition:none!important}
}
