/* Fluxx Tech full-page 3D home (preview at /home-3d) */
/* Fluxx Tech cinematic 3D layer — only loaded with ?fx3d=1 (or cookie). Safe to delete. */
html.s3d{--ink:#fff;--mute:#aebbd8;--paper:rgba(255,255,255,.04);--line:rgba(140,190,255,.16);--w:rgba(255,255,255,.05);--fxbg:#030719;scroll-behavior:smooth}
html.s3d body{background:var(--fxbg);color:#e8eefc}
html.s3d body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 600px at 82% 8%,rgba(34,160,220,.22),transparent 60%),radial-gradient(800px 600px at 8% 90%,rgba(37,64,154,.45),transparent 62%),var(--fxbg)}

html.s3d main,html.s3d footer.ft{position:relative;z-index:1}
html.s3d .dk,html.s3d .stats,html.s3d .cta,html.s3d .ft,html.s3d .plan.hot,html.s3d .dash,html.s3d .code,html.s3d .ic{--ink:#060b1f}
html.s3d .ic{background:linear-gradient(135deg,#0c1a44,#08122e);box-shadow:0 0 0 1px rgba(34,160,220,.35),0 10px 30px -10px rgba(34,160,220,.7)}
/* transparent sections so the 3D world shows through; soft scrim keeps text readable */
html.s3d .dk,html.s3d .stats,html.s3d .cta,html.s3d .alt,html.s3d .strip,html.s3d .s3,html.s3d section{background:transparent}
html.s3d main>section,html.s3d main>.dk,html.s3d main>.stats,html.s3d main>.strip,html.s3d main>div{position:relative}
html.s3d main>*::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,7,25,.84),rgba(3,7,25,.66) 55%,rgba(3,7,25,.84))}
html.s3d main>.hero::before,html.s3d main>.ph::before{background:linear-gradient(90deg,rgba(3,7,25,.88),rgba(3,7,25,.5) 48%,rgba(3,7,25,.18) 70%,rgba(3,7,25,.4))}
html.s3d .strip{border-color:var(--line);backdrop-filter:blur(8px)}
html.s3d .strip b{color:#fff}
html.s3d .hd p,html.s3d .ph p,html.s3d .hero p.l{color:#d6dff3}
html.s3d main p,html.s3d main li{text-shadow:0 1px 12px rgba(3,7,25,.9)}
/* nav */
html.s3d .nav{background:rgba(3,7,25,.62);backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
html.s3d .nv nav a:not(.btn){color:#aebbd8}
html.s3d .nv nav a:not(.btn):hover,html.s3d .nv nav a.act{color:#fff;background:rgba(34,160,220,.16)}
html.s3d .btn{border-color:rgba(255,255,255,.35);color:#fff}
html.s3d .btn.g{color:#fff;box-shadow:0 10px 30px -8px rgba(34,160,220,.8),0 0 0 1px rgba(255,255,255,.12) inset}
@media(max-width:900px){html.s3d .nv nav{background:rgba(3,7,25,.96)}}
/* glass cards */
html.s3d .card,html.s3d .plan,html.s3d .uc,html.s3d .pf-card,html.s3d .dcard,html.s3d .bcard,html.s3d .pc,html.s3d .pr div,html.s3d .vals .card,html.s3d .fr ul,html.s3d form,html.s3d .blog-toc,html.s3d .pf-empty{
 background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(124,200,245,.17),transparent 62%),rgba(10,18,44,.78);
 border:1px solid rgba(140,190,255,.2);backdrop-filter:blur(14px);box-shadow:0 30px 60px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;color:#e8eefc}
html.s3d .card h3,html.s3d .plan h3,html.s3d .pf-card h3,html.s3d .bcard h3,html.s3d .pc h3,html.s3d .dcard h3,html.s3d .fr h3,html.s3d .ci h3{color:#fff}
html.s3d .card p,html.s3d .pf-card p,html.s3d .bcard p,html.s3d .pc p,html.s3d .dcard p,html.s3d .pr p{color:#d0daf0}
html.s3d .plan.hot{background:linear-gradient(160deg,rgba(34,160,220,.3),rgba(37,64,154,.35)),rgba(8,16,42,.7);border-color:#22a0dc}
html.s3d input,html.s3d select,html.s3d textarea{background:rgba(255,255,255,.07);border-color:rgba(140,190,255,.25);color:#fff}
html.s3d input:focus,html.s3d select:focus,html.s3d textarea:focus{background:rgba(255,255,255,.12)}
html.s3d select option{color:#111}html.s3d ::placeholder{color:#7f8fb3}
html.s3d details{border-color:var(--line)}
html.s3d .ci p,html.s3d .ci a{color:#aebbd8}
html.s3d .msg.ok{background:rgba(40,160,80,.2);color:#9be9b3}html.s3d .msg.bad{background:rgba(220,60,60,.2);color:#ffb4b4}
html.s3d .pf-chip{background:rgba(255,255,255,.06);color:#dbe6fb;border-color:rgba(140,190,255,.3)}
html.s3d .ft{background:rgba(3,7,25,.7);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
html.s3d .fn::before{background:#08122e;box-shadow:0 0 24px rgba(34,160,220,.7)}
.hero.h3{position:relative;z-index:1;background:transparent;min-height:calc(100svh - 68px);display:flex;align-items:flex-end;padding:40px 0 96px;overflow:visible}
.hero.h3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,7,25,.88) 0,rgba(3,7,25,.5) 38%,rgba(3,7,25,0) 62%),linear-gradient(0deg,rgba(3,7,25,.7),transparent 35%)}
.hero.h3 .w{display:block;width:100%}.hero.h3 .w>div{max-width:640px}
.hero.h3 h1{text-shadow:0 6px 40px rgba(0,0,0,.8)}.hero.h3 p.l{text-shadow:0 2px 20px #000;color:#d3dcf2}
.hero.h3 h1 .wd{display:inline-block;opacity:0;transform:translateY(34px);animation:wd .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*70ms + .5s)}
@keyframes wd{to{opacity:1;transform:none}}
.hero.h3 h1 em .wd,.ph h1 em .wd{background:linear-gradient(90deg,#22a0dc,#7cc8f5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* page-level */
#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;background:#030719}
html.s3d main>*{position:relative;z-index:2}
html.s3d main>.hero.h3{z-index:1;background:transparent}
html.s3d .ft{position:relative;z-index:2;background:#04081a;backdrop-filter:none}
html.s3d main{perspective:none}
html.s3d .rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
html.s3d .rv.in{opacity:1;transform:none}
html.s3d main>*::before{display:block}
html.s3d main>.hero.h3::before{background:linear-gradient(90deg,rgba(3,7,25,.88) 0,rgba(3,7,25,.5) 38%,rgba(3,7,25,0) 62%),linear-gradient(0deg,rgba(3,7,25,.7),transparent 35%)}
html.s3d .fgrid .card{cursor:pointer}
html.s3d .nav{background:rgba(3,7,25,.7)}
html.s3d .brand img{background:#fff;border-radius:6px}
.nogl #gl{display:none}
.nogl .hero.h3{background:radial-gradient(900px 500px at 85% 0,rgba(34,160,220,.22),transparent 60%),#060b1f}

/* real-work section */
html.s3d .wk{padding:90px 0}
.wk-g{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.wk-i{display:block;border-radius:14px;overflow:hidden;background:rgba(12,22,52,.7);border:1px solid rgba(140,190,255,.2);color:#fff;text-decoration:none;transition:transform .35s,border-color .35s}
.wk-i:hover,.wk-i:focus-visible{transform:translateY(-6px);border-color:#22a0dc}
.wk-i img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover}
.wk-i span{display:block;padding:12px 14px}.wk-i b{display:block;font-size:.95rem}.wk-i small{color:#7cc8f5;font-size:.8rem}
@media(max-width:1000px){.wk-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wk-g{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html.s3d *{animation-duration:.01s!important;transition-duration:.01s!important}}

/* wider layout on large screens, less empty side space */
html.s3d .w{max-width:min(1720px,94vw)}
html.s3d .hero.h3 .w>div{max-width:760px}
html.s3d .hd p{max-width:820px}
/* inner-page header: tall enough to show the 3D logo scene */
html.s3d main>.ph{min-height:54vh;display:flex;align-items:center;padding:60px 0}
html.s3d main>.ph .w{width:100%}
html.s3d main>.ph::before{background:linear-gradient(90deg,rgba(3,7,25,.88) 0,rgba(3,7,25,.5) 38%,rgba(3,7,25,0) 62%),linear-gradient(0deg,rgba(3,7,25,.7),transparent 35%)}

/* header + footer logo: remove the white box, blend into the dark theme */
html.s3d .brand img{background:none;border-radius:0;filter:invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.08);mix-blend-mode:screen}
/* phones: keep text readable over the 3D scene */
@media(max-width:860px){
 .hero.h3::before,html.s3d main>.ph::before{background:linear-gradient(180deg,rgba(3,7,25,.9) 0,rgba(3,7,25,.82) 55%,rgba(3,7,25,.6) 100%)}
 html.s3d main>*::before{background:rgba(3,7,25,.8)}
 .hero.h3 p.l{color:#e3eaf8}
}

/* WhatsApp: icon only, in the brand colour */
html.s3d .wa{width:58px;height:58px;padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2379BD,#22a0dc);color:#fff;box-shadow:0 12px 30px -8px rgba(34,160,220,.7),0 0 0 1px rgba(255,255,255,.18) inset;transition:transform .25s,box-shadow .25s}
html.s3d .wa:hover{transform:translateY(-3px) scale(1.05)}
/* skill chips readable on the dark theme */
html.s3d .chips span{background:rgba(12,22,52,.72);border-color:rgba(140,190,255,.3);color:#e8eefc}
@media(max-width:900px){html.s3d .wa{width:52px;height:52px;padding:0}}

/* phones: 3D logo gets the top of the screen, text sits below it on a solid dark panel */
@media(max-width:860px){
 .hero.h3{min-height:auto;align-items:flex-start;padding:min(47vh,400px) 0 56px}
 .hero.h3::before{background:linear-gradient(180deg,rgba(3,7,25,0) 0,rgba(3,7,25,0) 22%,rgba(3,7,25,.88) 40%,rgba(3,7,25,.94) 100%)}
 .hero.h3 .w>div{max-width:none}
 .hero.h3 h1{font-size:clamp(2rem,9vw,2.6rem);line-height:1.08}
 .hero.h3 p.l{font-size:1rem;line-height:1.55}
 html.s3d main>.ph{min-height:auto;padding:min(34vh,260px) 0 40px;align-items:flex-start}
 html.s3d main>.ph::before{background:linear-gradient(180deg,rgba(3,7,25,0) 0,rgba(3,7,25,0) 22%,rgba(3,7,25,.9) 48%,rgba(3,7,25,.94) 100%)}
}
/* phones: remove clutter, keep text readable, tighten cards */
@media(max-width:860px){
 html.s3d .fxg,html.s3d .fxg-show{display:none!important}
 html.s3d .stats{background:rgba(3,7,25,.82)!important}
 html.s3d .stats::before{opacity:.25}
 html.s3d .pc{min-height:0;padding:24px;gap:10px}
 html.s3d .card{padding:22px}
 html.s3d section{padding:64px 0}
 html.s3d .wa{right:14px;bottom:14px}
 html.s3d .cta{padding:64px 0}
 html.s3d .btn{min-height:46px}
}

/* inner-page hero: keep the heading clear of the 3D scene on the right */
@media(min-width:861px){html.s3d main>.ph h1{max-width:640px!important}html.s3d main>.ph p{max-width:560px!important}}

/* ===== v38 text-first: solid reading panels; 3D shows in the hero and in short interlude scenes ===== */
html.s3d main>section:not(.hero):not(.ph),html.s3d main>.stats,html.s3d main>.strip,html.s3d main>.cta{background:#070d24!important;border-top:1px solid rgba(140,190,255,.07)}
html.s3d main>.alt{background:#0a1331!important}
html.s3d main>section:not(.hero):not(.ph)::before,html.s3d main>.stats::before,html.s3d main>.strip::before,html.s3d main>.cta::before{display:none!important}
html.s3d .strip{backdrop-filter:none}
html.s3d main p,html.s3d main li{text-shadow:none}
html.s3d .card,html.s3d .plan,html.s3d .uc,html.s3d .pf-card,html.s3d .dcard,html.s3d .bcard,html.s3d .pc,html.s3d .pr div,html.s3d .vals .card,html.s3d .fr ul,html.s3d form,html.s3d .blog-toc,html.s3d .pf-empty{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(124,200,245,.10),transparent 62%),#0f1a3d;backdrop-filter:none;border-color:rgba(140,190,255,.18)}
html.s3d .wk-i{background:#0f1a3d}
html.s3d main>.hero::before,html.s3d main>.ph::before{display:block}
/* interlude scenes */
.itl{position:relative;height:72vh;min-height:420px;pointer-events:none}
.itl::before,.itl::after{content:"";position:absolute;left:0;right:0;height:80px;z-index:1;pointer-events:none}
.itl::before{top:0;background:linear-gradient(#070d24,rgba(7,13,36,0))}.itl::after{bottom:0;background:linear-gradient(rgba(7,13,36,0),#070d24)}
.itl-c{position:absolute;left:max(24px,calc((100vw - min(1720px,94vw))/2));bottom:14%;z-index:2;max-width:520px;padding:18px 24px;border-radius:18px;background:rgba(6,12,34,.78);border:1px solid rgba(140,190,255,.28);backdrop-filter:blur(10px);color:#fff}
.itl-c b{display:block;font:700 1.55rem/1.2 Sora,sans-serif;letter-spacing:-.02em}
.itl-c span{display:block;color:#c9d6ef;margin-top:6px;font-size:1rem;line-height:1.5}
.nogl .itl,.calm3d .itl{display:none}
.calm3d #gl{display:none}
.calm3d .hero.h3{background:radial-gradient(900px 500px at 85% 0,rgba(34,160,220,.22),transparent 60%),#060b1f}
.calm3d main>.ph{background:radial-gradient(900px 500px at 85% 0,rgba(34,160,220,.18),transparent 60%),#060b1f}
/* dock: calm toggle (and a quote button on phones) */
.dock{position:fixed;right:22px;bottom:92px;z-index:45;display:flex;gap:8px;align-items:center}
.c3d{font:600 .8rem 'DM Sans',system-ui,sans-serif;color:#d6e6ff;background:rgba(6,12,34,.8);border:1px solid rgba(140,190,255,.35);border-radius:999px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(8px)}
.c3d:hover{border-color:#22a0dc;color:#fff}
.scta{display:none}
@media(max-width:860px){
 .itl{height:54vh;min-height:340px}.itl-c{left:16px;right:16px;bottom:9%;max-width:none;padding:14px 18px}.itl-c b{font-size:1.2rem}
 .dock{left:12px;right:84px;bottom:14px;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .25s,transform .25s}
 .dock.on{opacity:1;pointer-events:auto;transform:none}
 .scta{display:flex;flex:1;align-items:center;justify-content:center;min-height:48px;border-radius:999px;background:linear-gradient(135deg,#2379BD,#22a0dc);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 28px -8px rgba(34,160,220,.8)}
 .c3d{min-height:48px}
}
/* story sections */
.pbg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
a.sxc{display:block;text-decoration:none;color:inherit}
.sxc h3{font-size:1.15rem;margin-bottom:8px;color:#fff}
.sxc p{color:#d0daf0}
.sxc .more{display:inline-block;margin-top:12px;font-weight:700;color:#4db8ff}
a.sxc:hover{transform:translateY(-4px);border-color:#22a0dc}
.chk{list-style:none;display:grid;gap:12px;max-width:860px}
.chk li{position:relative;padding:15px 18px 15px 54px;border-radius:14px;background:#0f1a3d;border:1px solid rgba(140,190,255,.16);color:#d6e2f6;line-height:1.55}
.chk li::before{content:"";position:absolute;left:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:#12356b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cd0ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.chk b{color:#fff}.chk a{color:#6cc8ff;font-weight:600}
.sxn{margin-top:24px;color:#c9d6ef}.sxn a,.sx .hd p a{color:#6cc8ff;font-weight:700}
@media(max-width:900px){.pbg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pbg{grid-template-columns:1fr}.chk li{padding:14px 14px 14px 50px}}

/* until the 3D canvas is running, show the same dark gradient the no-3D fallback uses (no blank hero while the scene builds) */
body:not(.glok) .hero.h3{background:radial-gradient(900px 500px at 85% 0,rgba(34,160,220,.22),transparent 60%),#060b1f}