/* viktorszabo.com redesign v1, "Ember Dot" design system. Layered on top of each page's existing inline <style>
   (kept unchanged), so page-specific rules keep working. Self-hosted, no third parties. */
:root{--night:#0d0d0f;--ember:#ff5b2e;--paper:#f7f5f1;--violet:#7a5cff;--ease:cubic-bezier(.22,1,.36,1);
 --card:rgba(255,255,255,.58);--bd:rgba(20,20,20,.1);--hi:rgba(255,255,255,.9);--sh:0 30px 60px -40px rgba(60,30,10,.35);
 --glow1:rgba(255,91,46,.16);--glow2:rgba(122,92,255,.10);--mut:#5c5c63;--acc:#c2410c}
[data-theme=dark]{--card:rgba(255,255,255,.045);--bd:rgba(255,255,255,.1);--hi:rgba(255,255,255,.07);--sh:0 30px 70px -40px rgba(0,0,0,.9);--glow1:rgba(255,91,46,.2);--glow2:rgba(122,92,255,.1);--mut:#9a9aa2;--acc:#ff5b2e}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--card:rgba(255,255,255,.045);--bd:rgba(255,255,255,.1);--hi:rgba(255,255,255,.07);--sh:0 30px 70px -40px rgba(0,0,0,.9);--glow1:rgba(255,91,46,.2);--glow2:rgba(122,92,255,.1);--mut:#9a9aa2;--acc:#ff5b2e}}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{background-image:radial-gradient(55% 55% at 90% -8%,var(--glow1),transparent 70%),radial-gradient(42% 45% at -6% 38%,var(--glow2),transparent 70%);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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")}
::selection{background:var(--ember);color:#fff}
.skip{position:absolute;left:-999px;top:12px;z-index:99;background:#c2410c;color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
h1{font-weight:800;letter-spacing:-.05em;line-height:.98}
h1 em,h2 em{font-style:normal;color:var(--acc)}
h2{font-weight:800;letter-spacing:-.045em;line-height:1.05}
.post h2{letter-spacing:-.035em}
p.lead{font-weight:350;letter-spacing:-.01em}
.tag{color:var(--acc);letter-spacing:.14em;font-weight:600}
/* nav: frosted pill, layered glass, main button = Free tools */
nav{top:14px;padding:9px 9px 9px 18px;border-color:var(--bd);box-shadow:inset 0 1px 0 var(--hi),var(--sh)}
nav:before{-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
.nav-menu>a{padding:7px 12px;margin-left:4px;border-radius:999px;transition:background .3s,color .3s}.nav-menu>a:hover{background:var(--card)}
.nav-menu{order:2;margin-left:auto}.nav-tg{order:4}
a.nav-cta{order:3;display:inline-flex;align-items:center;min-height:40px;margin-left:12px;padding:0 18px;border-radius:999px;background:#c2410c;color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap;box-shadow:0 12px 30px -14px rgba(255,91,46,.8),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .4s var(--ease),background .3s}
a.nav-cta:hover{transform:translateY(-1px);background:var(--ember);color:#fff}
@media(min-width:761px) and (max-width:1000px){.nav-menu>a{padding:7px 8px;margin-left:0;font-size:.88rem}.nav-x{margin-left:6px}a.nav-cta{margin-left:6px;padding:0 14px}nav{padding-left:14px}}
@media(max-width:760px){a.nav-cta{margin-left:auto;margin-right:8px;min-height:38px;padding:0 14px;font-size:.86rem}html:not(.js) .nav-menu{order:5}}
@media(max-width:360px){a.nav-cta{padding:0 11px;font-size:.8rem}}
/* buttons (primary text on #c2410c keeps AA contrast; glow is pure ember) */
a.b{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;font-weight:600;transition:transform .5s var(--ease),background .3s,box-shadow .3s}
a.b:not(.o){background:#c2410c;color:#fff;box-shadow:0 18px 40px -18px rgba(255,91,46,.8),inset 0 1px 0 rgba(255,255,255,.3)}a.b:not(.o):hover{background:var(--ember)}
a.b.o{background:var(--card);border:1px solid var(--bd);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.card a.fb:not(.o),.cta .b,button[type=submit]{background:#c2410c}
button[type=submit]{box-shadow:0 18px 40px -18px rgba(255,91,46,.75),inset 0 1px 0 rgba(255,255,255,.3);min-height:50px;transition:transform .5s var(--ease)}button[type=submit]:hover{transform:translateY(-2px)}
/* glass cards */
.card{position:relative;border-radius:24px;border-color:var(--bd);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 1px 0 var(--hi),var(--sh)}
input,select,textarea{border-radius:14px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--ember);box-shadow:0 0 0 4px rgba(255,91,46,.15);outline:0}
footer{border-top-color:var(--bd);line-height:1.8}footer a{text-decoration:underline;text-decoration-color:var(--bd);text-underline-offset:3px}footer a:hover{color:var(--ember)}
.fbio{display:block;max-width:760px;color:var(--fg);margin-bottom:6px}
/* scroll reveals: site.js adds .rv only to blocks below the first screen */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.rv.in{opacity:1;transform:none}
/* ================= HOME ================= */
.w.home{max-width:1180px}
.hx{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:32px;min-height:min(860px,calc(100svh - 70px));padding:40px 0 56px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 26px;padding:7px 14px 7px 10px;border:1px solid var(--bd);border-radius:999px;background:var(--card)}
.eyebrow b{width:8px;height:8px;border-radius:50%;background:var(--ember);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,46,.6)}70%,100%{box-shadow:0 0 0 10px rgba(255,91,46,0)}}
.hx h1{font-size:clamp(2.5rem,5.2vw,4.8rem);line-height:.96;letter-spacing:-.055em;margin:0 0 26px}
.hx h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.06em}
.hx h1 .ln>span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hx h1 .ln:nth-child(2)>span{animation-delay:.1s}.hx h1 .ln:nth-child(3)>span{animation-delay:.2s}
.hx h1 .lt{font-weight:300;letter-spacing:-.045em}
@keyframes rise{to{transform:none}}
.hx p.lead{margin:0 0 34px;max-width:540px;font-size:clamp(1.04rem,1.3vw,1.18rem)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;animation:fade .9s .4s var(--ease) both}
.ctas a.b{margin:0}.ctas svg{transition:transform .5s var(--ease)}.ctas a.b:hover svg{transform:translateX(4px)}
a.b.sp{overflow:hidden;isolation:isolate}a.b.sp:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s}a.b.sp:hover:before{opacity:1}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stage{position:relative;aspect-ratio:1/1.06;perspective:1400px;max-width:540px;width:100%;justify-self:center}
/* orb concentric with the photo card (card centre = 50% / 51%) at every width */
#ember,.ember-fb{position:absolute;left:50%;top:51%;width:104%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
#ember{opacity:0;transition:opacity 1.6s var(--ease)}#ember.on{opacity:1}
.ember-fb{width:84%;background:radial-gradient(circle at 40% 36%,#ffd2b8 0,#ff8a5c 14%,#ff5b2e 34%,rgba(255,91,46,.35) 52%,rgba(255,91,46,.1) 62%,transparent 70%);filter:blur(4px);opacity:.9;transition:opacity 1.2s}
.js-gl .ember-fb{opacity:0}
.card3d{position:absolute;inset:8% 11% 6% 11%;transform-style:preserve-3d;transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-10deg));transition:transform 1.2s var(--ease);animation:card3d 1.4s .1s var(--ease) backwards}
@keyframes card3d{from{transform:rotateX(16deg) rotateY(-22deg) translateY(36px)}}
.pane{position:absolute;inset:0;border-radius:32px;border:1px solid rgba(255,255,255,.16);overflow:hidden;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 60px 120px -40px rgba(0,0,0,.6),0 40px 90px -50px rgba(255,91,46,.6)}
.pane:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--sx,70%) var(--sy,10%),rgba(255,255,255,.16),transparent 45%);mix-blend-mode:overlay}
.photo{position:absolute;inset:14px;border-radius:22px;overflow:hidden;transform:translateZ(30px)}
.hx .photo img{width:100%;height:100%;object-fit:cover;object-position:42% 30%;display:block;transform:scale(1.04);border:0;border-radius:0;box-shadow:none}
.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(13,13,15,.45)),radial-gradient(70% 60% at 100% 0%,rgba(255,91,46,.16),transparent)}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:18px;font-size:.82rem;line-height:1.3;color:var(--fg);border:1px solid var(--bd);background:var(--card);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 var(--hi),var(--sh)}
.chip small{display:block;color:var(--mut);font-size:.72rem}
.chip .d{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(255,91,46,.16);color:var(--ember);font-weight:800}
.chip .tl{display:flex;gap:6px}.chip .tl span{padding:3px 9px;border-radius:999px;background:var(--card);border:1px solid var(--bd);font-size:.72rem}
.c1{left:-12%;bottom:13%;transform:translateZ(90px)}.c2{right:-7%;top:9%;transform:translateZ(120px)}.c3{right:4%;bottom:-3%;transform:translateZ(60px)}
/* Paper: brighter glass so the stage reads on a light page */
:root[data-theme=light] .pane{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 #fff,0 50px 100px -50px rgba(80,40,10,.45),0 40px 90px -50px rgba(255,91,46,.55)}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .pane{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 #fff,0 50px 100px -50px rgba(80,40,10,.45),0 40px 90px -50px rgba(255,91,46,.55)}}
.sec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px 56px;align-items:start;margin-top:120px}
.sec h2{margin:0;font-size:clamp(1.9rem,4vw,3.2rem)}.sec>div>p:first-child{margin-top:0}.sec>div>p{font-size:1.08rem}
.sec .full{grid-column:1/-1}
.idx{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:14px}
.idx:after{content:"";display:inline-block;width:40px;height:1px;margin-left:12px;vertical-align:middle;background:linear-gradient(90deg,var(--ember),transparent)}
.shelf{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px}
.shelf .card{display:flex;flex-direction:column;gap:6px;padding:26px;line-height:1.55;overflow:hidden;transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease)}
.shelf .card:before{content:"";position:absolute;left:10%;right:10%;bottom:-40px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,91,46,.45),transparent);opacity:0;filter:blur(12px);transition:opacity .6s var(--ease);pointer-events:none}
.shelf .card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);transform:translateX(-100%);transition:transform 1s var(--ease)}
.shelf .card:hover{transform:translateY(-6px);border-color:rgba(255,91,46,.45);box-shadow:inset 0 1px 0 var(--hi),0 40px 70px -40px rgba(255,91,46,.55)}
.shelf .card:hover:before{opacity:1}.shelf .card:hover:after{transform:translateX(100%)}
.shelf .card strong{font-size:1.08rem;letter-spacing:-.02em}
.home form.card{padding:30px;margin-top:0}
@supports (animation-timeline:scroll()){
 .hx-copy{animation:hxout linear both;animation-timeline:scroll(root);animation-range:0 85vh}
 .stage{animation:stout linear both;animation-timeline:scroll(root);animation-range:0 100vh}
 @keyframes hxout{to{opacity:.15;transform:translateY(-50px)}}
 @keyframes stout{to{transform:translateY(70px) scale(.9);opacity:.3}}
}
@media(max-width:900px){
 .hx{grid-template-columns:1fr;min-height:0;padding:36px 0 24px;gap:8px}
 .stage{width:min(440px,88%);margin:28px auto 0}
 .c1{left:-6%}.c2{right:-4%}
 .sec{grid-template-columns:1fr;margin-top:88px}
}
@media(max-width:600px){
 .hx h1{font-size:clamp(2.3rem,11vw,2.9rem);margin-top:0}
 .eyebrow{font-size:.64rem;letter-spacing:.1em}
 .ctas a.b{flex:1 1 100%;justify-content:center}
 .chip{padding:8px 11px;font-size:.74rem}.c3{display:none}
 .shelf{grid-template-columns:1fr}
}
.post code{overflow-wrap:anywhere}
.author img,.about .me img{box-shadow:0 0 0 4px var(--card),0 10px 30px -10px rgba(255,91,46,.5)}
/* reduced motion: no animation, no WebGL (static CSS ember stays) */
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .hx h1 .ln>span{transform:none}.rv,.r{opacity:1!important;transform:none!important}#ember{display:none}.js-gl .ember-fb{opacity:.9}
}