/* Shared shell: header, cross, page transitions, GoDaddy carry-over blocks, footer */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:.34s cubic-bezier(.2,.8,.2,1) both vt-in}
::view-transition-group(hdr){animation:none}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
:root{--hh:60px;--g:#050806;--a:#39ff88;--b:#b6ffd6;--v:#9a6bff;--t:#e8e6e1;--m:#a7adb9;--l:#17251d;--f:"JetBrains Mono",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{background:#050806;scroll-padding-top:calc(var(--hh) + 8px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#050806;color:#fff;font:16px/1.65 Inter,system-ui,sans-serif;overflow-x:hidden;overflow-x:clip}
::selection{background:#9a6bff;color:#fff}
.part{position:relative;clip-path:inset(0)}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--a);color:#050806;padding:8px 14px;border-radius:8px;font:600 .85rem Inter,sans-serif;text-decoration:none}
.skip:focus{top:10px}

/* header */
.hdr{position:sticky;top:0;z-index:100;height:var(--hh);view-transition-name:hdr;background:rgba(5,8,6,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.hdr:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(57,255,136,.55),rgba(154,107,255,.55),transparent)}
.hdr-in{max-width:1240px;height:100%;margin:0 auto;padding:0 clamp(14px,4vw,28px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:700 1.12rem "Space Grotesk",sans-serif;letter-spacing:-.01em}
.brand b{color:var(--a);font-weight:700;text-shadow:0 0 14px rgba(57,255,136,.45)}
.brand svg{width:30px;height:30px;flex:none}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{position:relative;display:block;padding:10px 12px;color:#e8e6e1;text-decoration:none;font:600 .74rem var(--f);letter-spacing:.14em;text-transform:uppercase;border-radius:8px;transition:color .2s cubic-bezier(.2,.8,.2,1),background .2s}
.nav a:after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a),var(--v));transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px rgba(57,255,136,.6)}
.nav a:hover{color:var(--b)}
.nav a:hover:after,.nav a[aria-current=page]:after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--a)}
.nav a:focus-visible,.brand:focus-visible,.mbtn:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.mbtn{display:none;width:44px;height:44px;border:1px solid #1f3328;border-radius:10px;background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.mbtn i,.mbtn i:before,.mbtn i:after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .25s,opacity .2s}
.mbtn i:before,.mbtn i:after{content:"";position:absolute;left:0}
.mbtn i:before{top:-6px}.mbtn i:after{top:6px}
.mbtn[aria-expanded=true] i{background:transparent}
.mbtn[aria-expanded=true] i:before{transform:translateY(6px) rotate(45deg)}
.mbtn[aria-expanded=true] i:after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:600px){
 .mbtn{display:flex}
 .nav{position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;gap:0;padding:8px clamp(14px,4vw,28px) 16px;background:rgba(5,8,6,.96);border-bottom:1px solid #1f3328;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
 .hdr.open .nav{opacity:1;transform:none;visibility:visible}
 .nav a{padding:14px 4px;font-size:.82rem}
 .nav a:after{left:4px;right:auto;width:40px;bottom:8px}
}

/* the cross: one fixed, upright Latin cross pinned mid-screen. Each section draws it in its own
   background layer (behind text, cards and pictures) and clips it to itself, so it reads as one. */
.xpin{position:fixed;left:50%;top:calc(50% + var(--hh)/2);height:max(220px,min(calc((100vh - var(--hh))*.74),135vw,900px));aspect-ratio:2/3;transform:translate(-50%,-50%);pointer-events:none;animation:xpulse 6s ease-in-out infinite}
.xpin svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px #39ff88) drop-shadow(0 0 22px #39ff88cc) drop-shadow(0 0 60px #965affb3)}
@keyframes xpulse{0%,to{opacity:.78}50%{opacity:.95}}
.xwrap{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}

/* carried over GoDaddy blocks (Contact Us form, My Blog) */
#main .gd{position:relative;z-index:2;isolation:isolate;padding:clamp(48px,8vw,88px) 20px;color:#fff}
#main .gd-in{position:relative;z-index:2;max-width:760px;margin:0 auto}
#main .gd .lbl{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 .78rem var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--b)}
#main .gd .lbl:before{content:"";width:18px;height:1px;background:var(--a);box-shadow:0 0 8px var(--a)}
#main .gd h2{margin:0 0 12px;font:700 clamp(1.8rem,4vw,2.6rem)/1.1 "Space Grotesk",sans-serif;letter-spacing:-.02em;color:#fff;text-wrap:balance}
#main .gd p{margin:0 0 12px;color:#fff}
#main .gd a{color:var(--b)}
#main .gd a:hover{color:var(--a)}
#main .cform{margin:26px 0 28px;padding:clamp(20px,4vw,30px);border:1px solid #1f3328;border-radius:16px;background:linear-gradient(180deg,rgba(11,18,14,.92),rgba(8,12,10,.92));box-shadow:0 0 0 1px rgba(154,107,255,.08),0 20px 60px -30px rgba(57,255,136,.35);display:grid;gap:16px}
#main .cform label{display:grid;gap:6px;font:600 .72rem var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--b)}
#main .cform input,#main .cform textarea{width:100%;font:16px/1.5 Inter,system-ui,sans-serif;color:#fff;background:#050806;border:1px solid #24382d;border-radius:10px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
#main .cform textarea{min-height:140px;resize:vertical}
#main .cform input:focus,#main .cform textarea:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(57,255,136,.18)}
#main .cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#main .cform button{justify-self:start;cursor:pointer;border:0;border-radius:10px;padding:12px 26px;background:var(--a);color:#050806;font:700 .82rem var(--f);letter-spacing:.14em;text-transform:uppercase;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s cubic-bezier(.2,.8,.2,1)}
#main .cform button:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(57,255,136,.35)}
#main .cform button:focus-visible{outline:2px solid #fff;outline-offset:3px}
#main .cform .note{margin:0;font-size:.84rem;color:#d7dbe2}
#main .cform .st{min-height:1.4em;margin:0;font:600 .78rem var(--f);color:var(--a)}
@media (max-width:560px){#main .cform .row{grid-template-columns:1fr}#main .cform button{justify-self:stretch}}
#main .gd-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#main .blogempty{margin-top:22px;padding:28px 0;border-top:1px solid rgba(57,255,136,.25);border-bottom:1px solid rgba(154,107,255,.25);font:600 1rem var(--f);letter-spacing:.06em;color:#fff}

/* GoDaddy footer, carried over */
.sfoot{position:relative;isolation:isolate;padding:40px 20px 34px;color:#fff;font-size:.92rem}
.sfoot:before{content:"";position:absolute;left:50%;top:0;width:min(720px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(57,255,136,.45),rgba(154,107,255,.45),transparent)}
.sfoot-in{position:relative;z-index:2;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr auto;gap:24px 40px;align-items:start}
.sfoot p{margin:0 0 8px}
.sfoot a{color:var(--b);text-decoration:none}
.sfoot a:hover{color:var(--a);text-decoration:underline}
.sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sfoot .fnav{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 .72rem var(--f);letter-spacing:.14em;text-transform:uppercase}
.sfoot b{color:var(--b);font-weight:600}
@media (max-width:860px){.sfoot-in{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
 .xpin{animation:none;opacity:.85}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .nav,.nav a,.nav a:after{transition:none}
}
