/* ==========================================================================
   FutureLoopix 2.0
   1 tokens  2 base  3 primitives  4 header  5 loading screen  6 hero
   7 home sections  8 inner pages  9 footer  10 floating buttons  11 responsive
   Colours come from the tokens below; "on-dark" and "on-gold" re-scope them.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --gold:#DDB65D;--gold-2:#F1DCA3;--gold-3:#B8913B;--ink:#0A0D18;
  --ease:cubic-bezier(.22,.7,.2,1);--spring:cubic-bezier(.2,1.25,.3,1);--io:cubic-bezier(.76,0,.24,1);
  --r:22px;--r-sm:14px;
  --fd:"Outfit","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="dark"],.on-dark{
  --bg:#070A13;--bg-2:#0A0F1D;--sf:#10162A;--sf-2:#161D34;--sf-a:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);
  --tx:#A2ABBF;--tx-2:#D7DBE6;--hd:#FFFFFF;--mut:#727B93;
  --acc:#DDB65D;--acc-tx:#E8CB86;--acc-a:rgba(221,182,93,.13);--acc-b:rgba(221,182,93,.42);
  --glass:rgba(13,18,33,.76);--glass-2:rgba(16,22,40,.92);
  --shadow:0 30px 60px rgba(0,0,0,.42);--shadow-s:0 14px 34px rgba(0,0,0,.28);
  --ph:#1A2138;--gt1:#F1DCA3;--gt2:#DDB65D;--gt3:#B8913B;
  --g1:rgba(39,53,122,.55);--g2:rgba(221,182,93,.18);--g3:rgba(28,75,107,.4);--hl:rgba(235,207,142,.14);
  --btn-h:#FFFFFF;--btn-hc:#0A0D18;
}
html[data-theme="light"]{
  --bg:#F8F5EE;--bg-2:#F1ECDF;--sf:#FFFFFF;--sf-2:#F5F0E4;--sf-a:rgba(14,22,48,.04);
  --line:rgba(14,22,48,.1);--line-2:rgba(14,22,48,.2);
  --tx:#4C556A;--tx-2:#273049;--hd:#0D1530;--mut:#8A91A3;
  --acc:#B5852B;--acc-tx:#8E6614;--acc-a:rgba(181,133,43,.11);--acc-b:rgba(181,133,43,.42);
  --glass:rgba(255,255,255,.82);--glass-2:rgba(255,255,255,.95);
  --shadow:0 28px 56px rgba(22,30,62,.13);--shadow-s:0 12px 30px rgba(22,30,62,.08);
  --ph:#E3DCCB;--gt1:#C99A3A;--gt2:#A87A22;--gt3:#7E5A10;
  --g1:rgba(221,182,93,.3);--g2:rgba(120,150,230,.2);--g3:rgba(221,182,93,.16);--hl:rgba(181,133,43,.1);
  --btn-h:#0D1530;--btn-hc:#FFFFFF;
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
.on-dark{color:var(--tx)}
.on-gold{
  --bg:#DDB65D;--sf:rgba(10,13,24,.06);--sf-2:rgba(10,13,24,.1);--sf-a:rgba(10,13,24,.06);
  --line:rgba(10,13,24,.16);--line-2:rgba(10,13,24,.3);
  --tx:#3D3420;--tx-2:#1F1A0E;--hd:#0A0D18;--mut:#6A5C34;
  --acc:#0A0D18;--acc-tx:#0A0D18;--acc-a:rgba(10,13,24,.08);--acc-b:rgba(10,13,24,.3);
  --hl:rgba(255,255,255,.25);--btn-h:#FFFFFF;--btn-hc:#0A0D18;
  color:var(--tx);
}
@property --flx-a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body.flx{margin:0;background:var(--bg);color:var(--tx);font:400 16.5px/1.72 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
.flx img,.flx svg{max-width:100%}
.flx svg{display:block}
:where(.flx) a{color:inherit;text-decoration:none}
:where(.flx) h1,:where(.flx) h2,:where(.flx) h3,:where(.flx) h4{margin:0;font-family:var(--fd);font-weight:500;color:var(--hd);line-height:1.12;letter-spacing:-.02em}
:where(.flx) h2{font-size:clamp(30px,3.7vw,54px)}
:where(.flx) h3{font-size:21px;line-height:1.3;letter-spacing:-.01em}
:where(.flx) h2 em,:where(.flx) h1 em{font-style:normal;font-weight:300;color:var(--mut)}
.on-gold h2 em{color:rgba(10,13,24,.6)}
:where(.flx) p{margin:0}
:where(.flx) button{font:inherit}
.flx :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.flx ::selection{background:var(--gold);color:var(--ink)}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip:focus{clip:auto;clip-path:none;height:auto;width:auto;left:16px;top:16px;z-index:400;padding:12px 18px;background:var(--gold);color:var(--ink);border-radius:8px;font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.flx img.emoji{display:inline!important;width:1em!important;height:1em!important;margin:0 .07em!important;vertical-align:-.1em!important}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:min(1280px,100% - 48px);margin-inline:auto}
.wrap.narrow{width:min(880px,100% - 48px)}
.sec{position:relative;padding:120px 0}
.sec.tight{padding:70px 0}
.sec.alt{background:var(--bg-2)}
.center{text-align:center}
.end{justify-self:end;align-self:end}

/* fixed background glows */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.bgfx i{position:absolute;border-radius:50%;will-change:transform}
.bgfx i:nth-child(1){width:70vw;height:70vw;left:-24vw;top:-22vw;background:radial-gradient(closest-side,var(--g1),transparent);animation:bg1 30s ease-in-out infinite alternate}
.bgfx i:nth-child(2){width:58vw;height:58vw;right:-20vw;top:14vh;background:radial-gradient(closest-side,var(--g2),transparent);animation:bg2 36s ease-in-out infinite alternate}
.bgfx i:nth-child(3){width:64vw;height:64vw;left:16vw;bottom:-34vw;background:radial-gradient(closest-side,var(--g3),transparent)}
.bgfx::after{content:"";position:absolute;inset:0;background:radial-gradient(var(--line) 1px,transparent 1.4px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%)}
@keyframes bg1{to{transform:translate(16vw,12vh) scale(1.15)}}
@keyframes bg2{to{transform:translate(-18vw,-10vh) scale(.88)}}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));transform-origin:0 50%;transform:scaleX(0);z-index:80}

/* theme switch: the new palette opens in a circle from the button */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:themeIn .85s var(--ease) both}
@keyframes themeIn{from{clip-path:circle(0 at var(--vx,100%) var(--vy,0%))}to{clip-path:circle(150vmax at var(--vx,100%) var(--vy,0%))}}

/* ---------- 3. primitives ---------- */
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes flxSpin{to{--flx-a:360deg}}
@keyframes loop{to{transform:translateX(-50%)}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes popIn{from{opacity:0;scale:.6;translate:0 34px}}
@keyframes fadeUp{from{opacity:0;translate:0 28px}}
@keyframes ping{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(1.7);opacity:0}}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;font:600 12.5px/1 var(--fb);letter-spacing:.17em;text-transform:uppercase;color:var(--acc-tx)}
.eyebrow::before{content:"";width:8px;height:8px;rotate:45deg;background:var(--acc);box-shadow:0 0 0 4px var(--acc-a)}
.eyebrow::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,var(--acc),transparent)}
.sec-h{margin-bottom:60px}
.sec-h.center{max-width:720px;margin-inline:auto}
.sec-h.center .eyebrow{justify-content:center}
.sec-h p{margin-top:18px}
.sec-h2{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.sec-h2 p{max-width:460px;margin-bottom:22px}

/* reveal on scroll (only when scripts run; .flx-show is the safety net) */
.flx-js .rv{opacity:0;translate:0 36px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),rotate 1s var(--ease) var(--d,0s),scale .9s var(--ease) var(--d,0s)}
.flx-js .rv.l{translate:-48px 0}
.flx-js .rv.r{translate:48px 0}
.flx-js .rv.flip{rotate:x -34deg;translate:0 46px;transform-origin:50% 0}
.flx-js .rv.in,.flx-show .rv{opacity:1;translate:none;rotate:none;scale:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.flx-js .split .w>b{display:inline-block;font-weight:inherit;translate:0 106%;transition:translate .9s var(--ease);transition-delay:calc(var(--n)*42ms)}
.flx-js .split.in .w>b,.flx-show .split .w>b{translate:none}
.flx-off,.flx-off *,.flx-off *::before,.flx-off *::after{animation-play-state:paused!important}

/* buttons: the fill grows out of the arrow chip, the arrow flies through */
/* buttons: a pill and a round arrow chip that pull apart on hover while a second colour sweeps across */
.btn{--bb:var(--gold);--bc:var(--ink);--hb:var(--btn-h);--hc:var(--btn-hc);--bh:54px;position:relative;display:inline-flex;align-items:center;gap:0;padding:0;border:0;background:none;color:var(--bc);font:600 15px/1 var(--fd);letter-spacing:.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 10px 18px rgba(221,182,93,.2));transition:filter .4s,scale .3s var(--spring)}
.btn .bl{position:relative;z-index:0;flex:1;display:inline-flex;align-items:center;justify-content:center;height:var(--bh);padding:0 28px;border-radius:99px;background:var(--bb);overflow:hidden;transition:color .4s .05s,translate .55s var(--spring)}
.btn .bl::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--hb);translate:-102% 0;transition:translate .6s var(--ease)}
.btn .bi{position:relative;flex:none;width:var(--bh);height:var(--bh);margin-left:-5px;border-radius:50%;background:var(--bb);color:var(--bc);display:grid;place-items:center;overflow:hidden;transition:background .4s .1s,color .4s .1s,translate .55s var(--spring),rotate .6s var(--spring),scale .5s var(--spring)}
.btn .bi .ico{grid-area:1/1;width:19px;height:19px;stroke-width:1.8;transform:rotate(-45deg);transition:transform .5s var(--ease)}
.btn .bi .ico+.ico{transform:rotate(-45deg) translateX(-44px)}
.btn:hover{filter:drop-shadow(0 16px 26px rgba(0,0,0,.25))}
.btn:hover .bl{color:var(--hc)}
.btn:hover .bl::before{translate:0 0}
.btn:hover .bi{background:var(--hb);color:var(--hc);translate:9px 0;rotate:45deg;scale:1.06}
.btn:hover .bi .ico{transform:rotate(-45deg) translateX(44px)}
.btn:hover .bi .ico+.ico{transform:rotate(-45deg) translateX(0)}
.btn:active{scale:.96}
.btn[disabled]{opacity:.65;cursor:not-allowed}
.btn.ghost{--bb:transparent;--bc:var(--hd);--hb:var(--gold);--hc:var(--ink);filter:none}
.btn.ghost .bl,.btn.ghost .bi{box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost .bi{margin-left:4px;color:var(--acc)}
.btn.ghost:hover .bl,.btn.ghost:hover .bi{box-shadow:inset 0 0 0 1px var(--gold)}
.btn.ghost:hover .bi{color:var(--ink)}
.btn.ink{--bb:var(--ink);--bc:#fff;--hb:#fff;--hc:var(--ink);filter:drop-shadow(0 10px 18px rgba(10,13,24,.25))}
.btn.ink .bi{color:var(--gold)}
.btn.ink:hover .bi{color:var(--ink)}
.btn.sm{--bh:44px;font-size:14px}
.btn.sm .bl{padding:0 20px}
.btn.sm .bi .ico{width:16px;height:16px}
.btn.wide{display:flex;width:100%}
.btn.busy{pointer-events:none;opacity:.7}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.rnd{width:52px;height:52px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:var(--sf-a);color:var(--hd);display:grid;place-items:center;cursor:pointer;transition:background .35s,color .35s,border-color .35s,transform .45s var(--spring)}
.rnd:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:scale(1.08)}
.rnd[disabled]{opacity:.4;cursor:default;transform:none}
.more{display:inline-flex;align-items:center;gap:10px;font:600 14.5px/1 var(--fd);color:var(--hd);transition:color .3s,gap .4s var(--ease)}
.more .ico{width:17px;height:17px;color:var(--acc);transform:rotate(-45deg);transition:transform .4s var(--ease)}
.more:hover{color:var(--acc-tx);gap:14px}.more:hover .ico{transform:rotate(0)}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:99px;background:var(--acc-a);border:1px solid var(--acc-b);color:var(--acc-tx);font:600 12.5px/1 var(--fb);white-space:nowrap;transition:background .3s,color .3s}
a.chip:hover,.chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{height:30px;padding:0 13px;border-radius:99px;border:1px solid var(--line-2);font:600 12.5px/30px var(--fb);color:var(--tx-2)}

/* cards, pointer glow, 3D tilt */
.card{position:relative;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s)}
[data-glow]{position:relative}
[data-glow]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),var(--hl),transparent 65%)}
[data-glow]:hover::after{opacity:1}
.flx-3d [data-tilt]{transition:transform .6s var(--ease),border-color .35s,box-shadow .5s;will-change:transform}
.flx-3d [data-depth]{transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}

/* image slot: photo when it loads, illustration otherwise */
.ph{position:relative;overflow:hidden;background:var(--ph);border-radius:var(--r);isolation:isolate}
.ph img,.ph svg.sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .8s}
.ph img{opacity:0}
.ph.has img{opacity:1}
.ph.has svg.sc{opacity:0}
.sc *{animation:none!important}

/* three rings turning in 3D */
.gyro{position:absolute;display:block;width:var(--s,300px);aspect-ratio:1;transform-style:preserve-3d;pointer-events:none;animation:gyro 28s linear infinite}
.gyro i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--acc);opacity:.6}
.gyro i:nth-child(1){transform:rotateX(74deg)}
.gyro i:nth-child(2){transform:rotateY(74deg);border-style:dashed;opacity:.42}
.gyro i:nth-child(3){inset:13%;transform:rotateX(48deg) rotateY(48deg);opacity:.32}
.gyro i::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px var(--acc-a)}
@keyframes gyro{from{transform:translateZ(var(--gz,0px)) rotateX(18deg) rotateY(0deg) rotateZ(0deg)}to{transform:translateZ(var(--gz,0px)) rotateX(18deg) rotateY(360deg) rotateZ(360deg)}}

/* social icons that flip to their brand colour */
.socs{display:flex;flex-wrap:wrap;gap:10px}
.soc{position:relative;display:block;width:46px;height:46px;padding:0;border:0;background:none;color:var(--hd);cursor:pointer;perspective:420px}
.soc-f,.soc-b{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .65s var(--spring)}
.soc-f{background:var(--sf-a);border:1px solid var(--line-2)}
.soc-b{background:var(--c,var(--gold));color:#fff;transform:rotateY(180deg);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.soc:hover .soc-f,.soc.done .soc-f{transform:rotateY(-180deg)}
.soc:hover .soc-b,.soc.done .soc-b{transform:rotateY(0)}

/* prose */
.prose{font-size:17px;line-height:1.8;color:var(--tx)}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3,.prose h4{margin-top:1.7em}
.prose h2{font-size:clamp(25px,2.8vw,34px)}.prose h3{font-size:23px}.prose h4{font-size:19px}
.prose a{color:var(--acc-tx);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--hd)}
.prose strong{color:var(--tx-2)}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.4em}
.prose ul li::marker{color:var(--acc)}
.prose blockquote{margin-inline:0;padding:18px 24px;border-left:3px solid var(--acc);background:var(--sf-a);border-radius:0 14px 14px 0;color:var(--tx-2)}
.prose img,.prose video,.prose iframe{max-width:100%;height:auto;border-radius:14px}
.prose figure{margin-inline:0}
.prose figcaption,.wp-caption-text{font-size:13.5px;color:var(--mut);margin-top:8px}
.prose pre,.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;background:var(--sf-a);border-radius:8px}
.prose code{padding:2px 6px}.prose pre{padding:18px;overflow-x:auto}.prose pre code{background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;text-align:left}
.prose hr{border:0;border-top:1px solid var(--line)}
.alignleft{float:left;margin:6px 24px 16px 0}.alignright{float:right;margin:6px 0 16px 24px}.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}.sticky,.bypostauthor,.gallery-caption{outline:0}

/* ---------- 4. header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:14px;transition:transform .55s var(--ease),padding .4s}
.admin-bar .hd{top:32px}
.hd-in{position:relative;width:min(1400px,100% - 48px);height:92px;margin:0 auto;padding:0 6px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid transparent;border-radius:24px;transition:height .45s var(--ease),padding .45s var(--ease),background .4s,border-color .4s,box-shadow .4s}
.hd.stuck{padding-top:10px}
.hd.stuck .hd-in{height:68px;padding:0 10px 0 20px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line);box-shadow:var(--shadow-s)}
.hd.hide{transform:translateY(-130%)}
.logo{display:block;flex:none;perspective:700px}
.lgi{display:block;width:120px;height:78px;background:url("../images/logo.webp") center/contain no-repeat;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));transition:width .5s var(--ease),height .5s var(--ease),transform .9s var(--spring)}
html[data-theme="light"] .hd .lgi{filter:drop-shadow(0 4px 10px rgba(22,30,62,.18))}
.hd.stuck .lgi{width:74px;height:48px;transform:rotateY(360deg)}
.logo:hover .lgi{transform:rotateY(18deg) scale(1.05)}
.hd.stuck .logo:hover .lgi{transform:rotateY(378deg) scale(1.05)}

.nav{position:relative;padding:5px;border-radius:99px;background:var(--sf-a);border:1px solid var(--line);transition:background .4s,border-color .4s}
.hd.stuck .nav{background:transparent;border-color:transparent}
.menu{position:relative;z-index:1;display:flex;gap:2px;margin:0;padding:0;list-style:none}
.menu>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:11px 17px;border-radius:99px;font:500 14.5px/1 var(--fb);color:var(--tx-2);transition:color .3s}
.menu>li>a:hover,.menu>li.is-current>a,.menu>li:focus-within>a{color:var(--hd)}
.menu>li.is-current>a::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc)}
.menu .cv{width:14px;height:14px;transition:transform .4s var(--ease)}
.menu>li:hover>a .cv,.menu>li:focus-within>a .cv{transform:rotate(180deg)}
.nav-hl{position:absolute;left:0;top:5px;bottom:5px;width:40px;border-radius:99px;background:var(--acc-a);border:1px solid var(--acc-b);opacity:0;pointer-events:none;transition:transform .5s var(--spring),width .5s var(--spring),opacity .3s}

/* services panel */
.mega{position:absolute;left:50%;top:calc(100% + 16px);z-index:5;width:min(1060px,calc(100vw - 48px));padding:26px 26px 20px;background:var(--sf);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform-origin:50% 0;transform:translateX(-50%) perspective(1100px) rotateX(-14deg) translateY(10px);transition:opacity .3s,transform .5s var(--ease),visibility 0s linear .5s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.has-mega:hover>.mega,.has-mega:focus-within>.mega{opacity:1;visibility:visible;transform:translateX(-50%) perspective(1100px) rotateX(0) translateY(0);transition-delay:0s}
.mega-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px 26px}
.mega-col:first-child{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-content:start}
.mega-col:first-child .mega-h{grid-column:1/-1}
.mega-h{display:block;margin:0 0 10px;padding:0 12px 12px;border-bottom:1px solid var(--line);font:600 11.5px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--acc-tx)}
.mega-a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;transition:background .3s,transform .4s var(--ease)}
.mega-a i{flex:none;width:40px;height:40px;border-radius:12px;background:var(--acc-a);color:var(--acc);display:grid;place-items:center;transition:background .3s,color .3s,transform .5s var(--spring)}
.mega-a b{display:block;font:500 14.5px/1.25 var(--fd);color:var(--hd)}
.mega-a small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--mut);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mega-a:hover{background:var(--sf-2);transform:translateX(4px)}
.mega-a:hover i{background:var(--gold);color:var(--ink);transform:rotate(-8deg) scale(1.06)}
.mega-f{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:16px 12px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.has-sub{position:relative}
.sub{position:absolute;left:0;top:calc(100% + 16px);min-width:230px;margin:0;padding:10px;list-style:none;background:var(--sf);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);opacity:0;visibility:hidden;translate:0 10px;transition:opacity .3s,translate .4s var(--ease),visibility 0s linear .4s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;translate:none;transition-delay:0s}
.sub a{display:block;padding:10px 14px;border-radius:10px;font-size:14.5px;color:var(--tx-2)}
.sub a:hover{background:var(--sf-2);color:var(--hd)}

.hd-act{display:flex;align-items:center;gap:12px}
.tgl{position:relative;width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:var(--sf-a);color:var(--hd);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:border-color .3s,background .3s,transform .45s var(--spring)}
.tgl .ico{grid-area:1/1;transition:transform .6s var(--spring),opacity .35s}
.tgl:hover{border-color:var(--acc);transform:rotate(12deg)}
html[data-theme="dark"] .tgl .moon,html[data-theme="light"] .tgl .sun{opacity:0;transform:rotate(-120deg) scale(.3)}
.hd-tel{display:none;align-items:center;gap:11px;color:var(--hd);font:500 15px/1.25 var(--fd);white-space:nowrap}
.hd-tel i{width:44px;height:44px;border-radius:50%;border:1px solid var(--acc-b);background:var(--acc-a);color:var(--acc);display:grid;place-items:center;transition:background .35s,color .35s,transform .5s var(--spring)}
.hd-tel .ico{width:17px;height:17px}
.hd-tel small{display:block;margin-bottom:2px;font:600 10.5px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.hd-tel:hover i{background:var(--gold);color:var(--ink);transform:rotate(-14deg) scale(1.06)}
.burger{display:none;position:relative;width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:var(--sf-a);cursor:pointer;transition:background .3s,border-color .3s}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;background:var(--hd);transition:transform .5s var(--spring),opacity .3s,top .4s var(--ease)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px;right:20px}.burger span:nth-child(3){top:29px}
.menu-open .burger{background:var(--gold);border-color:var(--gold)}
.menu-open .burger span{background:var(--ink)}
.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){top:23px;transform:rotate(-45deg)}

/* mobile menu */
.mob{position:fixed;inset:0;z-index:55;background:var(--bg);visibility:hidden;clip-path:circle(0 at calc(100% - 52px) 60px);transition:clip-path .75s var(--io),visibility 0s linear .75s;overflow-y:auto;overscroll-behavior:contain}
.menu-open .mob{visibility:visible;clip-path:circle(160% at calc(100% - 52px) 60px);transition-delay:0s}
.mob::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60vw 60vw at 0 0,var(--g1),transparent 70%),radial-gradient(50vw 50vw at 100% 100%,var(--g2),transparent 70%)}
.mob-in{position:relative;min-height:100%;padding:130px 24px 40px;display:flex;flex-direction:column;gap:30px;max-width:640px;margin:0 auto}
.mob-nav{display:grid}
.mob-i{display:block;border-bottom:1px solid var(--line);opacity:0;translate:0 26px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.menu-open .mob-i{opacity:1;translate:none;transition-delay:calc(var(--k,0)*55ms + .25s)}
a.mob-i,.mob-i summary{display:flex;align-items:center;gap:16px;padding:17px 2px;font:500 clamp(24px,6vw,32px)/1.2 var(--fd);color:var(--hd);cursor:pointer;list-style:none}
.mob-i summary::-webkit-details-marker{display:none}
.mob-i small{font:500 12.5px/1 var(--fb);color:var(--acc-tx);letter-spacing:.08em}
.mob-i span{flex:1}
.mob-i .ico{color:var(--acc);transition:transform .45s var(--spring)}
a.mob-i .ico{transform:rotate(-45deg)}
details.mob-i[open] summary .ico{transform:rotate(135deg)}
.mob-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;padding:2px 0 18px 30px}
.mob-sub a{padding:8px 0;font-size:15px;color:var(--tx-2)}
.mob-f{display:grid;gap:14px;justify-items:start;margin-top:auto}
.mob-l{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--tx-2)}
.mob-l .ico{color:var(--acc);width:18px;height:18px}

/* ---------- 5. loading screen ---------- */
.flx-loading .hero *,.flx-loading .hero *::before,.flx-loading .hero *::after,.flx-loading .phero *,.flx-loading .phero *::after{animation-play-state:paused!important}

/* ---------- 6. hero ---------- */
.hero{position:relative;padding:184px 0 158px;overflow:hidden;isolation:isolate}
.hero-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(620px circle at var(--sx,74%) var(--sy,44%),var(--hl),transparent 62%)}
.hero-fx i{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.7;overflow:hidden}
.hero-fx i::after{content:"";position:absolute;left:0;top:-160px;width:1px;height:160px;background:linear-gradient(180deg,transparent,var(--acc));animation:beam 8s linear infinite}
.hero-fx i:nth-child(1){left:10%}.hero-fx i:nth-child(2){left:30%}.hero-fx i:nth-child(3){left:50%}.hero-fx i:nth-child(4){left:70%}.hero-fx i:nth-child(5){left:90%}
.hero-fx i:nth-child(2)::after{animation-delay:-3s;animation-duration:10s}.hero-fx i:nth-child(3)::after{animation-delay:-5s}.hero-fx i:nth-child(4)::after{animation-delay:-1.5s;animation-duration:11s}.hero-fx i:nth-child(5)::after{animation-delay:-6s}
@keyframes beam{to{transform:translateY(calc(100vh + 320px))}}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.tagchip{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:7px 17px 7px 8px;border-radius:99px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);font:600 12px/1.2 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);animation:fadeUp .9s var(--ease) both}
.tagchip i{width:26px;height:26px;flex:none;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center}
.tagchip .ico{width:13px;height:13px}
.hero h1{font-size:clamp(40px,5.2vw,84px);line-height:1.04}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.04em;white-space:nowrap}
.hero h1 b{display:block;font-weight:500;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;animation:lnUp 1.1s var(--ease) forwards;animation-delay:calc(var(--i)*.13s + .12s)}
@keyframes lnUp{to{transform:none}}
.hero h1 .gold b{font-weight:300;background:linear-gradient(100deg,var(--gt3) 0%,var(--gt2) 30%,var(--gt1) 50%,var(--gt2) 70%,var(--gt3) 100%) 100% 0/230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lnUp 1.1s var(--ease) forwards,sheen 7s ease-in-out infinite;animation-delay:calc(var(--i)*.13s + .12s),2.6s}
@keyframes sheen{0%,55%{background-position:100% 0}100%{background-position:0 0}}
.lead{max-width:540px;margin-top:26px;font-size:17.5px;animation:fadeUp 1s var(--ease) .55s both}
.hero .cta-row{margin-top:38px;animation:fadeUp 1s var(--ease) .7s both}
.hpts{display:flex;flex-wrap:wrap;gap:10px 24px;margin:36px 0 0;padding:0;list-style:none;animation:fadeUp 1s var(--ease) .85s both}
.hpts li{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--tx-2)}
.hpts .ico{width:17px;height:17px;color:var(--acc)}

/* the 3D stage: everything inside sits at its own depth and the whole group turns with the pointer */
.stage{position:relative;width:100%;max-width:560px;margin-left:auto;aspect-ratio:1/1.04;perspective:1300px}
.stage-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-9deg));transition:transform .7s var(--ease)}
.stage-g{--s:104%;--gz:-140px;left:-2%;top:-2%}
.s-dots{position:absolute;left:-5%;top:3%;width:150px;height:150px;background:radial-gradient(var(--acc) 1.4px,transparent 1.9px) 0 0/16px 16px;opacity:.55;-webkit-mask-image:linear-gradient(135deg,#000,transparent 75%);mask-image:linear-gradient(135deg,#000,transparent 75%);transform:translateZ(-70px)}
.s-main{position:absolute;right:5%;top:5%;width:68%;height:86%;border-radius:240px 240px 26px 26px;animation:popIn 1.2s var(--ease) .25s both}
.s-main .ph{position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow)}
.s-main .ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 50%,rgba(7,10,19,.55)),linear-gradient(135deg,rgba(221,182,93,.2),transparent 42%)}
.s-main .ph img,.s-main .ph svg.sc{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.09) translateY(-1.5%)}}
.s-ring{position:absolute;inset:-5px;border-radius:245px 245px 31px 31px;padding:2px;pointer-events:none;background:conic-gradient(from var(--flx-a),var(--acc-b) 0deg,var(--acc-b) 210deg,var(--gold) 295deg,#FFF6DE 322deg,var(--gold) 345deg,var(--acc-b) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:flxSpin 6s linear infinite}
.s-sub{position:absolute;left:1%;bottom:1%;width:38%;aspect-ratio:1/1.04;border-radius:24px;border:5px solid var(--bg);box-shadow:0 0 0 1px var(--acc-b),var(--shadow);transform:translateZ(90px);animation:popIn 1s var(--spring) .9s both}
.s-sub .ph{position:absolute;inset:0;border-radius:18px}
.s-card{position:absolute;display:flex;gap:12px;padding:14px 16px;border-radius:18px;background:var(--glass-2);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--hd)}
.s-tx b{display:block;font:500 15px/1.25 var(--fd)}
.s-tx small{display:block;font-size:12px;color:var(--mut)}
.s-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--gold);color:var(--ink);display:grid;place-items:center}
.k1{right:-7%;bottom:13%;width:214px;flex-wrap:wrap;align-items:center;transform:translateZ(130px);animation:popIn 1s var(--spring) 1.1s both,bob 7s ease-in-out 2.4s infinite}
.s-line{flex:0 0 100%;height:44px;margin-top:2px;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}
.s-line path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s var(--ease) 1.7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.k2{left:-4%;top:19%;width:170px;flex-direction:column;transform:translateZ(110px);animation:popIn 1s var(--spring) 1.25s both,bob 8s ease-in-out 3s infinite}
.s-bars{display:flex;align-items:flex-end;gap:7px;height:56px;width:100%}
.s-bars u{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--gold-2),var(--gold-3));transform-origin:50% 100%;animation:grow 1s var(--spring) both}
.s-bars u:nth-child(1){height:34%;animation-delay:1.6s}.s-bars u:nth-child(2){height:52%;animation-delay:1.7s}.s-bars u:nth-child(3){height:44%;animation-delay:1.8s}.s-bars u:nth-child(4){height:74%;animation-delay:1.9s}.s-bars u:nth-child(5){height:100%;animation-delay:2s}
@keyframes grow{from{transform:scaleY(0)}}
.s-badge{position:absolute;right:-2%;top:3%;width:112px;height:112px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;box-shadow:0 20px 44px rgba(0,0,0,.35);transform:translateZ(160px);animation:popIn 1s var(--spring) 1.4s both;transition:scale .5s var(--spring)}
.s-badge:hover{scale:1.1}
.s-badge-t{position:absolute;inset:6px;animation:rot 18s linear infinite}
.s-badge-t text{font:600 11px var(--fd);letter-spacing:3.2px;fill:var(--ink)}
.s-badge .ico{width:28px;height:28px;transform:rotate(90deg)}
.tick{position:absolute;left:0;right:0;bottom:0;overflow:hidden;padding:18px 0;border-top:1px solid var(--line);background:var(--sf-a)}
.tick-t{display:flex;align-items:center;width:max-content;animation:loop 50s linear infinite;will-change:transform}
.tick:hover .tick-t{animation-play-state:paused}
.tick span{font:400 17px/1 var(--fd);color:var(--tx-2);white-space:nowrap}
.tick svg{width:18px;height:18px;flex:none;margin:0 26px;color:var(--acc);animation:rot 12s linear infinite}

/* ---------- 7. home sections ---------- */
/* about */
.about-g{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.about-v{position:relative;aspect-ratio:1/1.02}
.about-gy{--s:44%;--gz:-60px;right:2%;top:-4%}
.about-a{position:absolute;left:0;top:0;width:78%;height:82%}
.about-a .ph{position:absolute;inset:0;border-radius:28px 28px 150px 28px;box-shadow:var(--shadow)}
.about-b{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1/1.08;transform:translateZ(70px)}
.about-b .ph{position:absolute;inset:0;border:6px solid var(--bg);border-radius:28px;box-shadow:var(--shadow)}
.about-n{position:absolute;left:5%;bottom:5%;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:20px;background:var(--glass-2);border:1px solid var(--line-2);box-shadow:var(--shadow);transform:translateZ(110px)}
.about-n b{font:300 60px/.9 var(--fd);letter-spacing:-.04em;color:var(--acc)}
.about-n small{font-size:13.5px;line-height:1.4;color:var(--tx-2)}
.about-c p{margin-top:20px}
.about-c h2+p{margin-top:24px}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0 36px;padding:0;list-style:none}
.pills li{position:relative;display:flex;align-items:center;gap:13px;padding:16px 18px;border-radius:16px;background:var(--sf);border:1px solid var(--line);color:var(--hd);font:500 15.5px/1.3 var(--fd);overflow:hidden;transition:translate .45s var(--ease),border-color .35s,color .35s,box-shadow .45s}
.pills li::before{content:"";position:absolute;inset:0;background:var(--gold);translate:0 101%;transition:translate .5s var(--ease)}
.pills li>*{position:relative}
.pills .ico{color:var(--acc);transition:color .35s,transform .5s var(--spring)}
.flx-js .pills li.in:hover,.pills li:hover{translate:0 -5px;border-color:var(--gold);color:var(--ink);box-shadow:0 16px 32px rgba(221,182,93,.2)}
.pills li:hover::before{translate:none}
.pills li:hover .ico{color:var(--ink);transform:rotate(-12deg) scale(1.15)}

/* statistics */
.stats{position:relative;z-index:2}
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);padding:38px 12px;border-radius:28px;background:linear-gradient(135deg,#111A36,#080B16);border:1px solid var(--line);box-shadow:var(--shadow)}
.stats-g::before{content:"";position:absolute;left:8%;right:8%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.stat{padding:6px 30px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font:300 clamp(44px,4.6vw,70px)/1 var(--fd);letter-spacing:-.03em;color:var(--gold)}
.stat>span{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--tx-2)}

/* services */
.sview{overflow:hidden;padding:18px 0 36px}
.strack{display:flex;width:max-content;animation:loop var(--dur,70s) linear infinite;will-change:transform}
.sview:hover .strack,.sview:focus-within .strack{animation-play-state:paused}
.strack .svc{flex:0 0 clamp(300px,25vw,390px);margin-right:22px}
.svc{position:relative;display:flex;flex-direction:column;min-height:412px;padding:30px 28px 22px;border-radius:24px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),border-color .4s,box-shadow .5s}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,var(--gold-2),var(--gold) 45%,var(--gold-3));clip-path:circle(0 at 58px 60px);transition:clip-path .75s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.35),transparent 60%);transition:opacity .4s}
.svc-n{position:absolute;right:26px;top:26px;font:500 13px/1 var(--fd);letter-spacing:.08em;color:var(--mut);transition:color .4s}
.svc-i{width:60px;height:60px;border-radius:18px;background:var(--acc-a);border:1px solid var(--acc-b);color:var(--acc);display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s,transform .6s var(--spring)}
.svc-i .ico{width:26px;height:26px;stroke-width:1.5}
.svc h3{margin-top:28px;min-height:2.6em;transition:color .4s}
.svc p{margin-top:10px;font-size:14.5px;line-height:1.6;transition:color .4s}
.svc ul{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.svc li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx-2);transition:color .4s,translate .45s var(--ease)}
.svc li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--acc);transition:background .4s}
.svc-go{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font:600 14px/1 var(--fd);color:var(--hd);transition:color .4s,border-color .4s}
.svc ul+.svc-go{margin-block-start:24px}
.svc-go .ico{width:18px;height:18px;color:var(--acc);transform:rotate(-45deg);transition:transform .45s var(--ease),color .4s}
.svc:hover{border-color:var(--gold);box-shadow:0 34px 60px rgba(0,0,0,.3)}
.svc:hover::before{clip-path:circle(150% at 58px 60px)}
.svc:hover::after{opacity:1}
.svc:hover h3,.svc:hover .svc-go,.svc:hover li{color:var(--ink)}
.svc:hover p{color:rgba(10,13,24,.78)}
.svc:hover .svc-n{color:rgba(10,13,24,.55)}
.svc:hover li{translate:4px 0}
.svc:hover li:nth-child(2){transition-delay:.04s}.svc:hover li:nth-child(3){transition-delay:.08s}
.svc:hover li::before{background:var(--ink)}
.svc:hover .svc-i{background:var(--ink);border-color:var(--ink);color:var(--gold);transform:rotate(-8deg) scale(1.06)}
.svc:hover .svc-go{border-color:rgba(10,13,24,.2)}
.svc:hover .svc-go .ico{transform:rotate(0);color:var(--ink)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sgroup-h{display:flex;align-items:baseline;gap:18px;margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.sgroup-n{font:300 44px/1 var(--fd);color:var(--acc)}
.sgroup-c{margin-left:auto;font-size:14px;color:var(--mut)}

/* why (gold band) */
.why{background:var(--gold);overflow:hidden}
.why-fx{position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 100% 0,transparent 0 38px,rgba(10,13,24,.07) 38px 39px);-webkit-mask-image:linear-gradient(225deg,#000,transparent 60%);mask-image:linear-gradient(225deg,#000,transparent 60%)}
.why-g{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:30px 26px;margin:42px 0 40px}
.feat i{width:54px;height:54px;margin-bottom:16px;border-radius:50%;border:1px solid rgba(10,13,24,.35);color:var(--ink);display:grid;place-items:center;transition:background .4s,color .4s,transform .55s var(--spring)}
.feat:hover i{background:var(--ink);color:var(--gold);transform:rotate(-12deg) scale(1.1)}
.feat h3{font-size:18px;font-weight:600;margin-bottom:6px}
.feat p{font-size:14.5px;line-height:1.6}
.why-v{position:relative;aspect-ratio:1/.96}
.why-a{position:absolute;left:0;bottom:0;width:44%;height:60%;transform:translateZ(60px)}
.why-b{position:absolute;right:0;top:0;width:62%;height:86%}
.why-a .ph,.why-b .ph{position:absolute;inset:0;border-radius:20px;box-shadow:0 30px 60px rgba(10,13,24,.3)}
.why-a .ph{border:5px solid var(--gold)}
.why-s{position:absolute;left:2%;top:8%;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:#0A0D18;box-shadow:0 26px 50px rgba(10,13,24,.4);font-size:13px;line-height:1.4;transform:translateZ(110px)}
.why-s i{width:46px;height:46px;flex:none;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center}
.why-s b{display:block;font:500 28px/1.1 var(--fd);color:#fff}

/* process */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;list-style:none;perspective:1500px}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:-28px;border-top:1px dashed var(--acc-b)}
.step{position:relative;padding:16px 16px 30px;border-radius:26px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);transform-style:preserve-3d}
.step .ph{aspect-ratio:1/.7;border-radius:16px}
.step-n{position:absolute;left:50%;top:-28px;z-index:2;width:56px;height:56px;margin-left:-28px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font:600 16px/1 var(--fd);box-shadow:0 0 0 7px var(--bg),0 14px 28px rgba(0,0,0,.25);transform:translateZ(50px);transition:scale .5s var(--spring)}
.sec.alt .step-n{box-shadow:0 0 0 7px var(--bg-2),0 14px 28px rgba(0,0,0,.25)}
.step h3{margin:24px 10px 8px;font-size:22px;transition:color .3s}
.step p{margin:0 10px;font-size:15px}
.step:hover{border-color:var(--acc-b);box-shadow:var(--shadow)}
.step:hover .ph img,.step:hover .ph svg.sc{transform:scale(1.07)}
.step:hover h3{color:var(--acc-tx)}
.step:hover .step-n{scale:1.12}

/* work */
.work{overflow:hidden}
.work .wrap{position:relative}
.work-g{display:grid;grid-template-columns:1fr 1.05fr;gap:66px;align-items:center}
.wrow{position:relative;display:grid;grid-template-columns:58px 1fr 54px;align-items:center;gap:10px;width:100%;padding:28px 6px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--tx);text-align:left;cursor:pointer;transition:padding .5s var(--ease)}
.wrow:first-child{border-top:1px solid var(--line)}
.wrow::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-3));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.wrow-n{font:400 19px/1 var(--fd);color:var(--mut);transition:color .4s}
.wrow-t b{display:block;font:500 clamp(23px,2.6vw,36px)/1.2 var(--fd);color:var(--hd);transition:color .4s}
.wrow-t small{display:block;margin-top:5px;font-size:14px;color:var(--mut)}
.wrow-a{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);color:var(--hd);display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s,scale .5s var(--spring)}
.wrow-a .ico{transform:rotate(-45deg);transition:transform .5s var(--ease)}
.wrow:not(.on){opacity:.72}.wrow:not(.on):hover{opacity:1}
.wrow.on{padding-left:20px}
.wrow.on::after{transform:scaleX(1)}
.wrow.on .wrow-n{color:var(--acc)}
.wrow.on .wrow-t b{color:var(--acc-tx)}
.wrow.on .wrow-a{background:var(--gold);border-color:var(--gold);color:var(--ink);scale:1.1}
.wrow.on .wrow-a .ico{transform:rotate(0)}
.wdeck{position:relative;aspect-ratio:1/.98;perspective:1500px}
.wcard{position:absolute;inset:8% 0 0 0;display:flex;flex-direction:column;padding:14px;border-radius:28px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow);transform-origin:50% 100%;opacity:0;pointer-events:none;transform:translateY(60px) rotateX(-22deg);transition:transform .9s var(--ease),opacity .6s var(--ease)}
.wcard .ph{flex:1;min-height:0;border-radius:18px}
.wcard-b{display:grid;gap:16px;justify-items:start;padding:20px 10px 8px}
.wcard-b p{font-size:15px}
.wcard.on{opacity:1;pointer-events:auto;transform:none;z-index:3}
.wcard.n1{opacity:.6;transform:translateY(-7.5%) translateZ(-110px);z-index:2}
.wcard.n2{opacity:.3;transform:translateY(-14%) translateZ(-220px);z-index:1}

/* ribbons */
.ribbons{position:relative;height:210px;margin:10px 0;overflow:hidden;overflow:clip}
.rib{position:absolute;left:-6%;right:-6%;top:50%;padding:20px 0;overflow:hidden}
.rib.r1{z-index:2;background:var(--gold);color:var(--ink);transform:translateY(-50%) rotate(-2.6deg);box-shadow:0 20px 40px rgba(0,0,0,.18)}
.rib.r2{background:var(--sf);border-block:1px solid var(--line);color:var(--hd);transform:translateY(-50%) rotate(2.6deg)}
.rib-t{display:flex;align-items:center;width:max-content;animation:loop 38s linear infinite;will-change:transform}
.rib-t[data-rev]{animation-direction:reverse}
.rib span{font:800 clamp(28px,3.8vw,56px)/1 var(--fd);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.rib span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.4px currentColor;-webkit-text-stroke-color:var(--ink)}
.rib.r2 span:nth-of-type(even){-webkit-text-stroke-color:var(--hd)}
.rib svg{width:44px;height:44px;flex:none;margin:0 34px;animation:rot 12s linear infinite}

/* testimonials */
.testi-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:76px;align-items:center}
.testi-n{display:flex;align-items:center;gap:22px;margin:38px 0 34px}
.testi-n b{font:300 clamp(54px,5.4vw,80px)/1 var(--fd);letter-spacing:-.04em;color:var(--acc);white-space:nowrap}
.testi-n>span{max-width:230px;font-size:14.5px;line-height:1.5;color:var(--tx-2)}
.tnav{display:flex;align-items:center;gap:10px}
.tcount{margin-left:12px;font:400 15px/1 var(--fd);color:var(--mut);letter-spacing:.08em}
.tcount b{font-weight:500;color:var(--hd)}
.tstack{position:relative;min-height:380px;perspective:1400px}
.tcard{margin:0;padding:38px 38px 34px;border-radius:28px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow)}
.tstack .tcard{position:absolute;left:0;right:0;top:44px;min-height:320px;transform-origin:50% 100%;opacity:0;pointer-events:none;transform:translateY(70px) rotateX(-24deg);transition:transform .9s var(--ease),opacity .6s var(--ease)}
.tstack .tcard.on{opacity:1;pointer-events:auto;transform:none;z-index:3}
.tstack .tcard.n1{opacity:.55;transform:translateY(-22px) translateZ(-110px);z-index:2}
.tstack .tcard.n2{opacity:.28;transform:translateY(-44px) translateZ(-220px);z-index:1}
.tcard-q{width:56px;height:56px;margin-bottom:22px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center}
.tcard-q .ico{width:26px;height:26px}
.tag-s{position:absolute;right:30px;top:34px;padding:4px 12px;border-radius:99px;border:1px dashed var(--acc-b);font:700 11px/1.4 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-tx)}
.tcard blockquote{margin:0;font:400 clamp(17px,1.5vw,20px)/1.65 var(--fb);color:var(--hd)}
.tcard figcaption{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.tcard figcaption i{width:46px;height:46px;flex:none;border-radius:50%;background:var(--acc-a);border:1px solid var(--acc-b);color:var(--acc-tx);display:grid;place-items:center;font:600 18px/1 var(--fd);font-style:normal}
.tcard figcaption b{display:block;font:500 16.5px/1.3 var(--fd);color:var(--hd)}
.tcard figcaption small{font-size:13.5px;color:var(--mut)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* client logos */
.logos{padding:10px 0 90px;text-align:center}
.flx .logos h2{margin-bottom:34px;font:600 13px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.logos-g{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.logo-i{display:block;width:190px;height:92px;padding:18px 24px;border-radius:16px;background:var(--sf);border:1px solid var(--line);transition:translate .4s var(--ease),border-color .3s}
.logo-i img{width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .4s,opacity .4s}
.logo-i:hover{translate:0 -5px;border-color:var(--acc)}.logo-i:hover img{filter:none;opacity:1}

/* FAQ */
.faq-g{display:grid;grid-template-columns:.82fr 1.18fr;gap:66px;align-items:start}
.faq-l{position:sticky;top:120px}
.ask{margin-top:38px;padding:30px}
.ask>i{width:52px;height:52px;margin-bottom:18px;border-radius:16px;background:var(--acc-a);border:1px solid var(--acc-b);color:var(--acc);display:grid;place-items:center}
.flx .ask h2,.flx .ask h3{font-size:22px}
.ask p{margin:10px 0 22px;font-size:15px}
.acc{display:grid;gap:12px}
.qa{border-radius:20px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:border-color .4s,box-shadow .4s}
.qa[open],.qa:hover{border-color:var(--acc-b)}
.qa summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 24px;cursor:pointer;list-style:none;font:500 18.5px/1.35 var(--fd);color:var(--hd)}
.qa summary::-webkit-details-marker{display:none}
.qa summary small{font:500 13px/1 var(--fd);color:var(--acc-tx);letter-spacing:.06em}
.qa summary i{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);transition:background .4s,border-color .4s,color .4s,transform .5s var(--spring)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;transition:transform .45s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(180deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa-a{padding:0 24px 24px 62px;font-size:16px}
.qa[open] .qa-a{animation:fadeUp .5s var(--ease)}
.faq-more{margin-top:28px}
.fsearch{display:flex;align-items:center;gap:12px;height:60px;padding:0 22px;border-radius:99px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);color:var(--acc);transition:border-color .3s,box-shadow .3s}
.fsearch:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-a)}
.fsearch input{flex:1;min-width:0;border:0;background:none;color:var(--hd);font:inherit;font-size:16px;outline:0}
.faq-none{margin-top:20px;padding:22px;border-radius:16px;border:1px dashed var(--line-2);text-align:center}

/* articles */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.posts.n2{grid-template-columns:repeat(2,1fr)}
.posts.n1{grid-template-columns:minmax(0,1040px);justify-content:center}
.post{position:relative;display:flex;flex-direction:column;border-radius:26px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;transition:translate .5s var(--ease),border-color .4s,box-shadow .5s}
.post-pic{position:relative;display:block}
.post-pic .ph{aspect-ratio:1/.64;border-radius:0}
.post-pic .chip{position:absolute;left:16px;top:16px;z-index:2;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.post-pic::after{content:"";position:absolute;right:16px;bottom:-22px;z-index:2;width:46px;height:46px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/20px no-repeat;scale:0;rotate:-90deg;transition:scale .5s var(--spring),rotate .5s var(--spring)}
.post-b{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.post-m{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;font-size:13px;color:var(--mut)}
.post-m span{display:inline-flex;align-items:center;gap:7px}
.post-m .ico{width:15px;height:15px;color:var(--acc)}
.post h3{font-size:20.5px}
.post h3 a{background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1.5px no-repeat;transition:background-size .6s var(--ease)}
.post p{margin:10px 0 22px;font-size:14.5px;line-height:1.65}
.post .more{margin-top:auto}
.post:hover{translate:0 -8px;border-color:var(--acc-b);box-shadow:var(--shadow)}
.post:hover .ph img,.post:hover .ph svg.sc{transform:scale(1.07)}
.post:hover h3 a{background-size:100% 1.5px}
.post:hover .post-pic::after{scale:1;rotate:0deg}
.posts.n1 .post{flex-direction:row;align-items:stretch}
.posts.n1 .post-pic{flex:0 0 52%}
.posts.n1 .post-pic .ph{height:100%;aspect-ratio:auto;min-height:320px}
.posts.n1 .post-b{justify-content:center;padding:40px}
.posts.n1 .post h3{font-size:clamp(24px,2.6vw,34px)}
.posts.n1 .post .more{margin-top:8px}
.filter{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-bottom:44px}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats .chip{height:38px;padding:0 18px;font-size:13.5px}
.search{display:flex;gap:8px;width:min(420px,100%)}
.search input[type=search]{flex:1;min-width:0;height:50px;padding:0 20px;border-radius:99px;border:1px solid var(--line);background:var(--sf);color:var(--hd);font:inherit;font-size:15px}
.search input[type=search]:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-a)}
.search button{height:50px;padding:0 24px;border:0;border-radius:99px;background:var(--gold);color:var(--ink);font:600 14.5px var(--fd);cursor:pointer;transition:background .3s,color .3s}
.search button:hover{background:var(--btn-h);color:var(--btn-hc)}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:56px}
.pager .page-numbers{min-width:48px;height:48px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--hd);transition:background .3s,color .3s,border-color .3s}
.pager .page-numbers.current,.pager a.page-numbers:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.empty{padding:50px 30px;text-align:center;display:grid;gap:16px;justify-items:center}

/* contact */
.contact-g{display:grid;grid-template-columns:.92fr 1.08fr;gap:26px;align-items:stretch}
.contact-l{position:relative;overflow:hidden;padding:56px 50px;border-radius:30px;background:linear-gradient(150deg,var(--gold-2),var(--gold) 40%,var(--gold-3));box-shadow:var(--shadow)}
.contact-ring{position:absolute;right:-90px;bottom:-90px;width:270px;height:270px;border-radius:50%;border:1px dashed rgba(10,13,24,.4);animation:rot 50s linear infinite}
.contact-ring::before{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.flx .contact-l h2{font-size:clamp(28px,3vw,42px);max-width:470px}
.contact-l p{position:relative;max-width:410px;margin:20px 0 34px;font-size:15px}
.contact-l .big{position:relative;display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin-top:14px;font:500 clamp(18px,1.7vw,23px)/1.4 var(--fd);color:var(--ink);overflow-wrap:anywhere;transition:translate .4s var(--ease)}
.contact-l .big.sm{font-size:16px}
.contact-l .big .ico{width:40px;height:40px;padding:10px;border-radius:50%;border:1px solid rgba(10,13,24,.35);transition:background .35s,color .35s}
.contact-l a.big:hover{translate:6px 0}
.contact-l a.big:hover .ico{background:var(--ink);color:var(--gold)}
.contact-b{position:relative;margin-top:34px}
.form{padding:44px}
.flx .form h3{font-size:26px;margin-bottom:28px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.f{display:block;margin-bottom:16px}
.f>span{display:block;margin-bottom:8px;font:600 13px/1.3 var(--fb);color:var(--tx-2)}
.f input,.f select,.f textarea{width:100%;height:54px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:var(--sf-2);color:var(--hd);font:inherit;font-size:15.5px;transition:border-color .3s,box-shadow .3s,translate .3s var(--ease),background .3s}
.f textarea{height:auto;min-height:140px;padding:14px 18px;resize:vertical;line-height:1.6}
.f select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.f select option{background:var(--sf);color:var(--hd)}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-a);translate:0 -2px}
.f.bad input,.f.bad textarea,.f.bad select{border-color:#D8574E}
.f em{display:none;margin-top:6px;font-style:normal;font-size:12.5px;color:#D8574E}
.f.bad em{display:block}
.msg{display:none;margin-top:18px;padding:13px 16px;border-radius:12px;font-size:14.5px;font-weight:500}
.msg.ok{display:block;background:rgba(72,176,104,.14);color:#3E9B5B}
.msg.err{display:block;background:rgba(216,87,78,.13);color:#D8574E}
html[data-theme="dark"] .msg.ok{color:#9AD9A9}html[data-theme="dark"] .msg.err{color:#F0A49E}
.spin{display:inline-block;width:14px;height:14px;margin-right:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-2px;animation:rot .7s linear infinite}

/* closing call to action */
.cta{padding:30px 0 0}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:clamp(48px,7vw,104px) clamp(28px,6vw,90px);border-radius:40px;background:linear-gradient(135deg,#121B3A,#070A13 70%);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.cta-in::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 100% 50%,transparent 0 46px,rgba(221,182,93,.09) 46px 47px);-webkit-mask-image:linear-gradient(270deg,#000,transparent 65%);mask-image:linear-gradient(270deg,#000,transparent 65%)}
.flx .cta h2{position:relative;font:800 clamp(36px,6.6vw,108px)/1.02 var(--fd);letter-spacing:-.03em;text-transform:uppercase}
.cta h2 span{display:block}
.cta h2 span:last-child{background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) var(--p,35%),rgba(255,255,255,.2) var(--p,35%));-webkit-background-clip:text;background-clip:text;color:transparent}
.orb{position:relative;z-index:1;flex:none;width:clamp(116px,13vw,186px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold) 50%,var(--gold-3));color:var(--ink);display:grid;place-items:center;box-shadow:0 26px 60px rgba(221,182,93,.3);transition:scale .6s var(--spring)}
.orb-g{--s:160%;left:-30%;top:-30%;animation-duration:14s}
.orb .ico{width:36%;height:36%;transform:rotate(-45deg);transition:transform .5s var(--ease)}
.orb:hover{scale:1.08}.orb:hover .ico{transform:rotate(0)}

/* ---------- 8. inner pages ---------- */
.inner{overflow-x:hidden;overflow-x:clip}
.phero{position:relative;padding:206px 0 64px;isolation:isolate}
.phero-fx{position:absolute;right:-70px;top:70px;z-index:-1;width:520px;height:520px;perspective:900px;opacity:.75;pointer-events:none}
.gyro.lg{--s:100%;inset:0}
.phero .wrap{position:relative;padding-bottom:44px;border-bottom:1px solid var(--line)}
.phero .wrap::after{content:"";position:absolute;left:0;bottom:-1px;width:150px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:0 50%;animation:growX 1.2s var(--ease) .5s both}
@keyframes growX{from{transform:scaleX(0)}}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font-size:13.5px;color:var(--mut);animation:fadeUp .8s var(--ease) both}
.crumb a{color:var(--tx-2);transition:color .3s}.crumb a:hover{color:var(--acc-tx)}
.crumb i{width:5px;height:5px;rotate:45deg;background:var(--acc)}
.phero .eyebrow{display:flex;margin-bottom:16px;animation:fadeUp .8s var(--ease) .08s both}
.phero-t{max-width:980px;font-size:clamp(38px,5.4vw,80px);line-height:1.04;animation:fadeUp 1s var(--ease) .14s both}
.phero-p{max-width:660px;margin-top:22px;font-size:18px;animation:fadeUp 1s var(--ease) .26s both}
.phero-m{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:22px;font-size:14px;color:var(--mut);animation:fadeUp 1s var(--ease) .26s both}
.phero-m span{display:inline-flex;align-items:center;gap:7px}.phero-m .ico{width:16px;height:16px;color:var(--acc)}
.phero.article .phero-t{font-size:clamp(32px,4.2vw,60px);line-height:1.1}

/* about page */
.story-g{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story-v{position:relative}
.story-v .ph{aspect-ratio:1/.9;border-radius:30px 150px 30px 30px;box-shadow:var(--shadow)}
.story-v .about-n{left:auto;right:-14px;bottom:30px}
.story-g p{margin-top:20px}
.story-g .btn{margin-top:32px}
.mv{padding-bottom:60px}
.mv-g{display:grid;grid-template-columns:1fr 1fr;gap:24px;perspective:1500px}
.mvc{padding:44px 42px;transform-style:preserve-3d}
.mvc>i,.val>i,.nextc>i,.ctile>i{width:60px;height:60px;border-radius:18px;background:var(--acc-a);border:1px solid var(--acc-b);color:var(--acc);display:grid;place-items:center;transition:background .4s,color .4s,transform .6s var(--spring)}
.mvc>i{margin-bottom:24px;transform:translateZ(40px)}
.mvc>i .ico{width:26px;height:26px}
.flx .mvc h2{font-size:30px;margin-bottom:14px}
.mvc p{font-size:17px}
.card:hover>i{background:var(--gold);color:var(--ink);transform:translateZ(40px) rotate(-8deg) scale(1.06)}
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;perspective:1500px}
.val{padding:30px 26px 32px;transform-style:preserve-3d;transition:border-color .35s}
.val:hover{border-color:var(--acc-b)}
.val-n{position:absolute;right:22px;top:22px;font:300 34px/1 var(--fd);color:var(--line-2)}
.val>i{margin-bottom:22px}
.flx .val h2,.flx .val h3{font-size:21px;margin-bottom:10px}
.val p{font-size:15px}
.caps-g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px}
.cap{padding:30px 28px}
.flx .cap h3{font-size:14px;font-family:var(--fb);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-tx);padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.cap ul,.side-list ul{margin:0;padding:0;list-style:none}
.cap:first-child ul{columns:2;column-gap:20px}
.cap li,.side-list li{break-inside:avoid}
.cap a,.side-list a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--tx-2);font-size:15px;line-height:1.35;transition:color .3s,translate .4s var(--ease)}
.cap a i,.side-list a i{width:36px;height:36px;flex:none;border-radius:11px;background:var(--acc-a);color:var(--acc);display:grid;place-items:center;transition:background .3s,color .3s}
.cap a i .ico,.side-list a i .ico{width:17px;height:17px}
.cap a .go,.side-list a .go{width:15px;height:15px;margin-left:auto;color:var(--acc);opacity:0;transform:rotate(-45deg);transition:opacity .3s,transform .4s var(--ease)}
.cap a:hover,.side-list a:hover{color:var(--hd);translate:4px 0}
.cap a:hover i,.side-list a:hover i{background:var(--gold);color:var(--ink)}
.cap a:hover .go,.side-list a:hover .go{opacity:1;transform:rotate(0)}

/* service page */
.sdet{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:60px;align-items:start}
.sdet-pic{position:relative;margin-bottom:60px}
.sdet-pic .ph{aspect-ratio:16/8.4;border-radius:28px;box-shadow:var(--shadow)}
.sdet-i{position:absolute;left:30px;bottom:-30px;width:78px;height:78px;border-radius:24px;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));color:var(--ink);display:grid;place-items:center;box-shadow:0 20px 40px rgba(0,0,0,.3),0 0 0 6px var(--bg);transform:translateZ(60px)}
.sdet-i .ico{width:34px;height:34px;stroke-width:1.4}
.flx .sdet-h{margin:58px 0 24px;font-size:clamp(25px,2.8vw,34px)}
.incs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.incs li{display:flex;align-items:center;gap:14px;padding:17px 18px;border-radius:16px;color:var(--tx-2);font-size:15.5px;line-height:1.4;transition:border-color .3s,translate .4s var(--ease)}
.incs li:hover{border-color:var(--acc-b);translate:0 -3px}
.incs li i{width:34px;height:34px;flex:none;border-radius:50%;background:var(--acc-a);color:var(--acc);display:grid;place-items:center}
.incs li i .ico{width:18px;height:18px}
.outs{margin:0;padding:0;list-style:none}
.outs li{display:grid;grid-template-columns:72px 1fr;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font:400 clamp(18px,1.8vw,22px)/1.35 var(--fd);color:var(--hd)}
.outs li:first-child{border-top:1px solid var(--line)}
.outs b{font:300 34px/1 var(--fd);color:var(--acc)}
.sdet-s{position:sticky;top:104px;display:grid;gap:18px}
.side-cta{padding:32px 30px;background:linear-gradient(150deg,var(--gold-2),var(--gold) 45%,var(--gold-3));border-color:transparent}
.flx .side-cta h2{font-size:24px}
.side-cta p{margin:10px 0 22px;font-size:15px}
.side-l{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 15px/1.3 var(--fd);color:var(--ink);transition:translate .35s var(--ease)}
.side-l:hover{translate:5px 0}
.side-cta .btn+.side-l{margin-top:22px}
.side-list{padding:28px 26px 18px}
.flx .side-list h2{font-size:14px;font-family:var(--fb);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc-tx);padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.side-list a{padding:8px 0;font-size:14.5px}
.side-list a i{width:32px;height:32px}

/* article and generic pages */
.feature{margin-bottom:48px}
.feature .ph{aspect-ratio:16/8.6;border-radius:28px;box-shadow:var(--shadow)}
.share{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:54px;padding:22px 0;border-block:1px solid var(--line);font:500 15px var(--fd);color:var(--hd)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.pn-a{display:block;padding:22px 24px;transition:translate .45s var(--ease),border-color .35s}
.pn-a:hover{translate:0 -5px;border-color:var(--acc-b)}
.pn-a small{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 11.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-tx)}
.pn-a small .ico{width:15px;height:15px}
.pn-a b{font:500 17.5px/1.35 var(--fd);color:var(--hd)}
.pn-a.nx{grid-column:2;text-align:right}.pn-a.nx small{justify-content:flex-end}
.narrow>.cta-row{margin-top:44px}
.widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.widget{padding:26px}
.flx .widget .widget-title,.flx .widget h2{font-size:18px;margin-bottom:14px}
.widget ul{margin:0;padding:0;list-style:none}.widget li{padding:6px 0}.widget a:hover{color:var(--acc-tx)}
.comments{margin-top:70px;padding-top:44px;border-top:1px solid var(--line)}
.flx .comments h2,.flx .comments h3{font-size:26px;margin-bottom:24px}
.comments ol{display:grid;gap:18px;margin:0;padding:0;list-style:none}.comments ol ol{margin:18px 0 0 24px}
.comments .comment-body{padding:22px;border-radius:16px;background:var(--sf);border:1px solid var(--line)}
.comments .comment-author{display:flex;align-items:center;gap:12px;color:var(--hd);font-weight:600}.comments .avatar{border-radius:50%}
.comments .comment-metadata{font-size:13px;margin:6px 0 12px}.comments .reply a{color:var(--acc-tx);font-size:14px}
.comments .comment-respond{margin-top:36px}
.comments label{display:block;font-size:14px;margin-bottom:6px;color:var(--tx-2)}
.comments input[type=text],.comments input[type=email],.comments input[type=url],.comments textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--sf);color:var(--hd);font:inherit;font-size:15px}
.comments textarea{min-height:140px}.comments p{margin-bottom:16px}
.comments input[type=submit]{height:52px;padding:0 28px;border:0;border-radius:99px;background:var(--gold);color:var(--ink);font:600 15px var(--fd);cursor:pointer;transition:background .3s,color .3s}
.comments input[type=submit]:hover{background:var(--btn-h);color:var(--btn-hc)}
.inner.full{padding-top:150px}

/* projects page */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1500px}
.pcard{border-radius:26px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden;transition:transform .6s var(--ease),border-color .4s,box-shadow .5s}
.pcard .ph{aspect-ratio:1/.72;border-radius:0}
.pcard-b{display:grid;gap:12px;justify-items:start;padding:24px 26px 28px}
.flx .pcard h2{font-size:23px}
.pcard p{font-size:15px}
.pcard:hover{border-color:var(--acc-b);box-shadow:var(--shadow)}
.pcard:hover .ph img,.pcard:hover .ph svg.sc{transform:scale(1.07)}

/* contact page */
.ctiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;perspective:1500px}
.ctile{display:block;padding:28px 24px;transform-style:preserve-3d;transition:border-color .35s}
.ctile:hover{border-color:var(--acc-b)}
.ctile>i{margin-bottom:20px}
.ctile small{display:block;margin-bottom:6px;font:600 11.5px/1 var(--fb);letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.ctile b{display:block;font:500 17px/1.4 var(--fd);color:var(--hd);overflow-wrap:anywhere}
.nexts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none;perspective:1500px}
.nextc{padding:32px 28px}
.nextc>i{margin-bottom:22px}
.nextc h3{margin-bottom:10px}
.nextc p{font-size:15px}
.map{padding:0 0 100px}
.map-f{height:440px;border-radius:30px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.map-f iframe{width:100%;height:100%;border:0;display:block}
html[data-theme="dark"] .map-f iframe{filter:grayscale(.3) invert(.92) hue-rotate(180deg) contrast(.9)}

/* 404 */
.e404{padding-top:120px}
.e404 .wrap{display:grid;gap:22px;justify-items:center}
.e404-n{display:flex;align-items:center;justify-content:center;gap:.06em;font:700 clamp(130px,26vw,320px)/.9 var(--fd);perspective:900px}
.e404-n span{background:linear-gradient(180deg,var(--hd) 10%,var(--acc) 70%,transparent 105%);-webkit-background-clip:text;background-clip:text;color:transparent}
.e404-g{position:relative;--s:.72em;animation-duration:10s}
.flx .e404 h1{font-size:clamp(28px,3.6vw,46px)}
.e404 p{max-width:520px}
.e404 .cta-row{justify-content:center;margin-top:10px}

/* ---------- 9. footer ---------- */
.ft{position:relative;margin-top:96px;padding:0;border-radius:46px 46px 0 0;background:linear-gradient(180deg,#0D1326,#05070D);overflow:hidden}
.ft::before{content:"";position:absolute;left:6%;right:6%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-2) 50%,var(--gold) 70%,transparent);background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.ft-fx{position:absolute;inset:0;pointer-events:none;perspective:900px;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 100%;-webkit-mask-image:radial-gradient(ellipse at 80% 0,#000,transparent 65%);mask-image:radial-gradient(ellipse at 80% 0,#000,transparent 65%)}
.ft-g{--s:460px;right:-130px;top:-150px;opacity:.6}
.ft .wrap{position:relative}
.ft-top{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;align-items:center;padding:88px 0 56px}
.ft .lgi{width:160px;height:104px}
.ft-brand p{max-width:430px;margin:22px 0 28px;font-size:16px}
.spills{display:flex;flex-wrap:wrap;gap:10px}
.spill{position:relative;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 7px;border-radius:99px;border:1px solid var(--line);background:var(--sf-a);color:#fff;font:500 14px/1 var(--fd);overflow:hidden;isolation:isolate;transition:border-color .35s,translate .45s var(--spring)}
.spill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c);clip-path:circle(0 at 24px 50%);transition:clip-path .6s var(--ease)}
.spill i{width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;transition:background .35s,color .35s,transform .6s var(--spring)}
.spill i .ico{width:17px;height:17px}
.spill .go{width:15px;height:15px;opacity:.5;transform:rotate(-45deg);transition:transform .45s var(--ease),opacity .3s}
.spill:hover{border-color:var(--c);translate:0 -4px}
.spill:hover::before{clip-path:circle(150% at 24px 50%)}
.spill:hover i{background:#fff;color:var(--c);transform:rotate(360deg)}
.spill:hover .go{transform:rotate(0);opacity:1}
.ft-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ft-tile{display:flex;align-items:center;gap:16px;padding:20px;border-radius:22px;background:var(--sf-a);border:1px solid var(--line);color:#fff;transition:translate .5s var(--ease),border-color .4s,background .4s}
.ft-tile.wide{grid-column:1/-1}
.ft-tile>i{width:50px;height:50px;flex:none;border-radius:16px;background:var(--acc-a);color:var(--gold);display:grid;place-items:center;transition:background .35s,color .35s,transform .55s var(--spring)}
.ft-tile small{display:block;margin-bottom:5px;font:600 11px/1 var(--fb);letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.ft-tile b{display:block;font:500 16.5px/1.4 var(--fd);overflow-wrap:anywhere}
.ft-tile em{display:block;margin-top:4px;font-style:normal;font-size:13.5px;color:var(--tx)}
.ft-tile .go{width:18px;height:18px;margin-left:auto;color:var(--mut);transform:rotate(-45deg);transition:color .35s,transform .45s var(--ease)}
a.ft-tile:hover{translate:0 -6px;border-color:var(--acc-b);background:rgba(221,182,93,.07)}
a.ft-tile:hover>i{background:var(--gold);color:var(--ink);transform:rotate(-10deg) scale(1.08)}
a.ft-tile:hover .go{color:var(--gold);transform:rotate(0)}
.ft-cols{display:grid;grid-template-columns:.9fr 1.2fr 1.4fr 1.1fr;gap:52px;padding:52px 0 64px;border-top:1px solid var(--line)}
.flx .ft h4{margin-bottom:20px;font:600 12.5px/1 var(--fb);letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.ft-cols ul{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.ft-cols li a{display:inline-flex;align-items:center;padding:6px 0;font-size:15.5px;line-height:1.4;color:var(--tx-2);transition:color .3s,translate .4s var(--ease)}
.ft-cols li a::before{content:"";flex:none;width:0;height:1.5px;margin-right:0;background:var(--gold);opacity:0;transition:width .4s var(--ease),margin .4s var(--ease),opacity .3s}
.ft-cols li a:hover{color:#fff}
.ft-cols li a:hover::before{width:16px;margin-right:10px;opacity:1}
.ft-start p{margin-bottom:22px;font-size:15px}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 84px 26px;border-top:1px solid var(--line);font-size:13.5px}
.ft-bar nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft-bar nav a{position:relative;color:var(--tx-2)}
.ft-bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.ft-bar nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.seg{display:inline-flex;padding:4px;border-radius:99px;border:1px solid var(--line);background:var(--sf-a)}
.seg button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:99px;background:none;color:var(--tx);font:600 13px/1 var(--fb);cursor:pointer;transition:background .35s,color .35s}
.seg .ico{width:15px;height:15px}
html[data-theme="dark"] .seg [data-theme-set="dark"],html[data-theme="light"] .seg [data-theme-set="light"]{background:var(--gold);color:var(--ink)}

/* ---------- 10. floating buttons ---------- */
.totop{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:50;width:58px;height:58px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:var(--glass-2);color:var(--hd);display:grid;place-items:center;overflow:hidden;cursor:pointer;opacity:0;pointer-events:none;translate:0 24px;scale:.7;transition:opacity .4s var(--ease),translate .6s var(--spring),scale .6s var(--spring),color .4s,border-color .4s,box-shadow .4s}
.totop.show{opacity:1;pointer-events:auto;translate:none;scale:1}
.totop::before{content:"";position:absolute;left:-45%;width:190%;aspect-ratio:1;top:calc(100% - var(--p,0)*1.12%);background:linear-gradient(180deg,var(--gold-2),var(--gold));border-radius:43%;animation:rot 5s linear infinite;transition:top .25s linear}
.totop .ico{position:relative;width:22px;height:22px;transform:rotate(-90deg);transition:transform .45s var(--spring)}
.totop.full{color:var(--ink);border-color:var(--gold);box-shadow:0 12px 30px rgba(221,182,93,.35)}
.totop:hover{translate:0 -5px}.totop:hover .ico{transform:rotate(-90deg) translateX(4px)}

/* social button: icons fan out in an arc and flip in */
.fab{position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:50;width:60px;height:60px}
.fab>button{position:relative;z-index:2;width:60px;height:60px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));color:var(--ink);cursor:pointer;box-shadow:0 14px 34px rgba(221,182,93,.38),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .5s var(--spring),background .35s}
.fab>button::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from var(--flx-a),transparent 0 68%,var(--gold) 92%,transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:flxSpin 3.2s linear infinite}
.fab>button::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:ping 2.8s ease-out infinite;pointer-events:none}
.fab>button .ico{position:absolute;inset:0;margin:auto;width:24px;height:24px;transition:transform .55s var(--spring),opacity .3s}
.fab>button .ico.b{opacity:0;transform:rotate(-90deg) scale(.3)}
.fab ul{position:absolute;left:0;bottom:0;width:calc(var(--r,118px) + 70px);height:calc(var(--r,118px) + 70px);margin:0;padding:0;list-style:none;border-radius:0 100% 0 0;pointer-events:none}
.fab li{position:absolute;left:6px;bottom:6px;width:48px;height:48px;opacity:0;transform:rotate(calc(var(--a)*-1)) translateX(0) rotate(var(--a)) scale(.2) rotateY(180deg);transition:transform .7s var(--spring),opacity .3s var(--ease);transition-delay:calc((var(--n) - var(--i))*35ms)}
.fab li a{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c);color:#fff;border:2px solid rgba(255,255,255,.28);box-shadow:0 12px 26px rgba(0,0,0,.35);transition:scale .45s var(--spring),box-shadow .35s}
.fab li a .ico{width:22px;height:22px;transition:transform .5s var(--spring)}
.fab li a span{position:absolute;left:50%;bottom:calc(100% + 9px);padding:6px 11px;border-radius:99px;background:var(--c);color:#fff;font:600 12px/1 var(--fb);white-space:nowrap;opacity:0;translate:-50% 8px;scale:.8;pointer-events:none;transition:opacity .3s,translate .4s var(--spring),scale .4s var(--spring)}
.fab li a:hover{scale:1.16;box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 28%,transparent),0 14px 30px rgba(0,0,0,.4)}
.fab li a:hover .ico{transform:rotate(-12deg)}
.fab li a:hover span{opacity:1;translate:-50% 0;scale:1}
.fab:hover ul,.fab:focus-within ul,.fab.open ul{pointer-events:auto}
.fab:hover li,.fab:focus-within li,.fab.open li{opacity:1;transform:rotate(calc(var(--a)*-1)) translateX(var(--r,118px)) rotate(var(--a)) scale(1) rotateY(0deg);transition-delay:calc(var(--i)*65ms)}
.fab:hover>button,.fab:focus-within>button,.fab.open>button{background:linear-gradient(135deg,#fff,var(--gold-2));transform:scale(1.06)}
.fab:hover>button::before,.fab.open>button::before{animation-duration:1.4s}
.fab:hover>button::after,.fab.open>button::after{animation:none;opacity:0}
.fab:hover>button .ico.a,.fab:focus-within>button .ico.a,.fab.open>button .ico.a{opacity:0;transform:rotate(90deg) scale(.3)}
.fab:hover>button .ico.b,.fab:focus-within>button .ico.b,.fab.open>button .ico.b{opacity:1;transform:none}

/* ---------- 11. responsive ---------- */
@media (min-width:1400px){.hd-tel{display:inline-flex}}
@media (max-width:1199px){
  .nav,.hd-btn{display:none}
  .burger{display:block}
  .hd-in{width:calc(100% - 40px);height:80px}
  .lgi{width:104px;height:68px}
  .hero-in{gap:36px}
  .about-g,.story-g{gap:56px}
  .work-g{gap:44px}
  .sgrid,.pgrid{grid-template-columns:1fr 1fr}
  .vals{grid-template-columns:1fr 1fr}
  .ctiles{grid-template-columns:1fr 1fr}
  .caps-g{grid-template-columns:1fr 1fr}.cap:first-child{grid-column:1/-1}
  .sdet{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
  .ft-top{grid-template-columns:1fr;gap:40px}
  .ft-cols{grid-template-columns:1fr 1fr 1fr;gap:44px}.ft-start{grid-column:1/-1}
  .tgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:991px){
  .sec{padding:92px 0}.sec.tight{padding:56px 0}
  .hero{padding:150px 0 140px}
  .hero-in{grid-template-columns:1fr;gap:64px}
  .stage{max-width:460px;margin:0 auto}
  .about-g,.story-g,.why-g,.testi-g,.contact-g,.work-g,.faq-g{grid-template-columns:1fr;gap:52px}
  .about-v,.story-v,.why-v{max-width:560px;width:100%;margin:0 auto}
  .sec-h2{grid-template-columns:1fr;gap:20px}.end{justify-self:start}
  .stats-g{grid-template-columns:1fr 1fr;gap:30px 0}.stat:nth-child(3){border-left:0}
  .steps{grid-template-columns:1fr;gap:56px;max-width:560px;margin-inline:auto}.steps::before{display:none}
  .wdeck{max-width:600px;width:100%;margin:0 auto;order:-1}
  .faq-l{position:static}
  .posts,.posts.n2{grid-template-columns:1fr 1fr}
  .posts.n1 .post{flex-direction:column}.posts.n1 .post-pic .ph{min-height:0;aspect-ratio:1/.6}.posts.n1 .post-b{padding:28px}
  .sdet{grid-template-columns:1fr}.sdet-s{position:static;grid-template-columns:1fr 1fr;align-items:start}
  .mv-g,.nexts{grid-template-columns:1fr}
  .cta-in{border-radius:30px}
  .phero{padding-top:170px}.phero-fx{width:360px;height:360px;right:-120px;top:90px;opacity:.5}
  .bgfx i{animation:none}
}
@media (max-width:767px){
  body.flx{font-size:15.5px}
  .wrap,.wrap.narrow{width:calc(100% - 36px)}
  .sec{padding:76px 0}.sec.tight{padding:46px 0}
  .sec-h{margin-bottom:44px}
  .hd{padding-top:8px}.hd-in{width:calc(100% - 24px);height:68px;padding:0 4px}
  .hd.stuck .hd-in{height:62px;padding:0 8px 0 14px}
  .lgi{width:88px;height:57px}.hd.stuck .lgi{width:68px;height:44px}
  .tgl{width:44px;height:44px}
  .hero{padding:118px 0 120px}
  .hero h1{font-size:clamp(33px,9.6vw,46px)}
  .hero h1 .ln{white-space:normal}
  .tagchip{font-size:10.5px;letter-spacing:.1em}
  .lead{font-size:16px}
  .hero .cta-row .btn,.contact-b .btn,.form .btn{width:100%}
  .stage{max-width:340px}
  .s-badge{width:84px;height:84px;right:-3%}
  .s-badge .ico{width:22px;height:22px}
  .k1{width:176px;right:-4%;padding:11px 12px}.k1 .s-line{height:32px}
  .k2{width:138px;left:-3%;padding:11px 12px}.s-bars{height:40px}
  .s-tx b{font-size:13.5px}.s-ic{width:34px;height:34px}
  .tick span{font-size:15px}.tick svg{margin:0 18px}
  .about-n{padding:13px 16px;gap:12px}.about-n b{font-size:44px}
  .pills,.feats,.g2,.incs,.vals,.ctiles,.sgrid,.pgrid,.tgrid,.caps-g,.posts,.posts.n2,.pn,.mob-sub{grid-template-columns:1fr}
  .cap:first-child ul{columns:1}
  .stats-g{padding:26px 6px}.stat{padding:4px 18px}
  .strack .svc{flex-basis:82vw;margin-right:16px}
  .svc{min-height:0}.svc h3{min-height:0}
  .why-s{padding:13px 15px}.why-s b{font-size:22px}
  .work-word{top:40px}
  .wrow{grid-template-columns:42px 1fr 44px;padding:22px 2px}.wrow.on{padding-left:10px}.wrow-a{width:42px;height:42px}
  .wdeck{aspect-ratio:1/1.16}
  .wcard-b .btn{width:100%}
  .ribbons{height:150px}.rib{padding:14px 0}.rib svg{width:30px;height:30px;margin:0 20px}
  .testi-n{flex-wrap:wrap;gap:12px 18px;margin:28px 0}
  .tstack{min-height:430px}.tstack .tcard{min-height:360px}
  .tcard{padding:28px 24px 26px}
  .qa summary{grid-template-columns:1fr auto;padding:18px;font-size:17px;gap:12px}.qa summary small{display:none}
  .qa-a{padding:0 18px 20px}
  .contact-l{padding:40px 26px;border-radius:24px}
  .form{padding:28px 20px}
  .cta-in{flex-direction:column;align-items:flex-start;padding:44px 26px}
  .phero{padding:132px 0 44px}.phero .wrap{padding-bottom:32px}
  .phero-p{font-size:16.5px}
  .sdet-s{grid-template-columns:1fr}
  .sdet-pic{margin-bottom:50px}.sdet-i{width:64px;height:64px;left:20px;bottom:-24px;border-radius:20px}
  .outs li{grid-template-columns:54px 1fr}
  .pn-a.nx{grid-column:auto;text-align:left}.pn-a.nx small{justify-content:flex-start}
  .mvc{padding:32px 26px}
  .filter{flex-direction:column;align-items:stretch}
  .map-f{height:340px;border-radius:22px}.map{padding-bottom:70px}
  .ft{margin-top:70px;border-radius:30px 30px 0 0}
  .ft-top{padding:60px 0 40px}
  .ft .lgi{width:128px;height:84px}
  .ft-tiles{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr 1fr;gap:36px 20px;padding:40px 0 44px}
  .ft-cols>:nth-child(3),.ft-start{grid-column:1/-1}
  .ft-bar{flex-direction:column;align-items:flex-start;padding:20px 0 96px}
  .fab{left:14px}.fab>button{width:54px;height:54px}.fab{width:54px;height:54px}.fab li{left:3px;bottom:3px}
  .totop{right:14px;width:52px;height:52px}
  .admin-bar .hd{top:46px}
  .alignleft,.alignright{float:none;margin:0 0 16px}
}
@media (max-width:600px){.admin-bar .hd.stuck{top:0}}
@media (hover:none){
  .flx-3d .stage-in{animation:sway 11s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotateX(3deg) rotateY(-10deg)}50%{transform:rotateX(-2deg) rotateY(8deg)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pre{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .flx-js .rv,.flx-js .split .w>b{opacity:1;translate:none;rotate:none}
  .hero h1 b{transform:none}
  .stage-in{transform:none}
}
.wp-block-search__inside-wrapper{display:flex;gap:8px}
.wp-block-search__input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--sf-2);color:var(--hd);font:inherit}
.wp-block-search__button{height:46px;margin:0;padding:0 18px;border:0;border-radius:12px;background:var(--gold);color:var(--ink);font:600 14px/1 var(--fd);cursor:pointer}
.e404 .wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:991px){.steps{margin-top:76px}}
@media (max-width:767px){
  .k2{left:1%}.k1{right:1%}.s-badge{right:1%}
  .story-v .about-n{right:8px}
  .e404-n{font-size:clamp(96px,30vw,160px)}
  .e404 .search{flex-wrap:wrap;justify-content:center}
  .orb{width:116px;height:116px}
}
@media (max-width:767px){.ft-bar{padding-bottom:96px}}

/* ---------- 3D wire cube (loading screen, account popup) ---------- */
@keyframes cube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}

/* ---------- account button in the header ---------- */
.acct{position:relative}
.acct-b{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 13px;border-radius:99px;border:1px solid var(--line-2);background:var(--sf-a);color:var(--hd);font:600 14px/1 var(--fd);cursor:pointer;transition:border-color .3s,background .3s,color .3s,translate .4s var(--spring)}
.acct-b .ico{width:18px;height:18px;color:var(--acc);transition:color .3s,transform .5s var(--spring)}
.acct-b:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);translate:0 -2px}
.acct-b:hover .ico{color:var(--ink);transform:scale(1.15)}
.acct.in .acct-b{width:46px;padding:0;justify-content:center;background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:var(--gold);color:var(--ink)}
.acct-m{position:absolute;right:0;top:calc(100% + 14px);z-index:6;min-width:240px;padding:10px;border-radius:18px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;translate:0 10px;transition:opacity .3s,translate .4s var(--ease),visibility 0s .3s}
.acct-m::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.acct:hover .acct-m,.acct:focus-within .acct-m,.acct.open .acct-m{opacity:1;visibility:visible;translate:none;transition-delay:0s}
.acct-n{display:block;padding:8px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--line);font:500 15px/1.3 var(--fd);color:var(--hd)}
.acct-n small{display:block;font:600 11px/1.6 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-tx)}
.acct-n em{display:block;font:400 12.5px/1.4 var(--fb);font-style:normal;color:var(--mut);overflow-wrap:anywhere}
.acct-m a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14.5px;color:var(--tx-2);transition:background .3s,color .3s}
.acct-m a .ico{width:17px;height:17px;color:var(--acc)}
.acct-m a:hover{background:var(--sf-2);color:var(--hd)}

/* ---------- login / sign up popup ---------- */
.auth{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px;perspective:1600px}
.auth[hidden]{display:none}
.auth-bg{position:absolute;inset:0;background:rgba(5,7,14,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s}
.auth-box{position:relative;display:grid;grid-template-columns:.82fr 1fr;width:min(900px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);border-radius:30px;background:var(--sf);border:1px solid var(--line);box-shadow:0 50px 120px rgba(0,0,0,.5);overflow:hidden;opacity:0;transform:rotateX(-18deg) translateY(60px) scale(.94);transform-origin:50% 100%;transition:transform .7s var(--spring),opacity .4s}
.auth.on .auth-bg{opacity:1}
.auth.on .auth-box{opacity:1;transform:none}
.auth-x{position:absolute;right:16px;top:16px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--sf-2);color:var(--hd);display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,rotate .5s var(--spring)}
.auth-x .ico{width:18px;height:18px}
.auth-x:hover{background:var(--gold);color:var(--ink);rotate:90deg}
.auth-side{position:relative;display:flex;align-items:flex-end;padding:34px;background:linear-gradient(150deg,#16224A,#070A13 70%);overflow:hidden;perspective:900px;isolation:isolate}
.auth-side::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at 30% 20%,rgba(221,182,93,.28),transparent 65%)}
.auth-g.gyro,.auth-side .gyro{--s:330px;left:50%;top:38%;margin:-165px 0 0 -165px;opacity:.8}
.auth-cube{top:38%;--c:130px}
.auth-side-t{position:relative}
.auth-side .lgi{width:112px;height:72px}
.auth-side p{margin-top:14px;font-size:14.5px;line-height:1.6;color:#C9CEDB}
.auth-main{padding:44px 40px 36px;overflow-y:auto}
.flx .auth-main h2{font-size:clamp(24px,2.6vw,30px);padding-right:44px}
.auth-p{margin-top:8px;font-size:14.5px;line-height:1.6}
.auth-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:22px 0 20px;padding:5px;border-radius:99px;background:var(--sf-2);border:1px solid var(--line)}
.auth-tabs button{position:relative;z-index:1;height:42px;border:0;border-radius:99px;background:none;color:var(--tx);font:600 14.5px/1 var(--fd);cursor:pointer;transition:color .35s}
.auth-tabs button[aria-selected="true"]{color:var(--ink)}
.auth-tabs-hl{position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);border-radius:99px;background:linear-gradient(135deg,var(--gold-2),var(--gold));box-shadow:0 8px 18px rgba(221,182,93,.3);transition:translate .55s var(--spring)}
.auth[data-tab="register"] .auth-tabs-hl{translate:100% 0}
.auth-g{display:grid;gap:16px;margin-bottom:16px}
#gbtn{display:flex;justify-content:center;min-height:44px}
.gdemo{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:50px;border-radius:99px;border:1px solid var(--line-2);background:var(--sf-2);color:var(--hd);font:600 15px/1 var(--fd);cursor:pointer;transition:border-color .3s,translate .4s var(--spring),box-shadow .3s}
.gdemo svg{width:20px;height:20px}
.gdemo:hover{border-color:var(--acc);translate:0 -2px;box-shadow:var(--shadow-s)}
.auth-or{display:flex;align-items:center;gap:14px;font:600 11.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-f{display:none}
.auth-f.on{display:block;animation:fadeUp .5s var(--ease)}
.auth-f .f input{height:50px}
.f.pw{position:relative}
.f.pw input{padding-right:52px}
.f.pw button{position:absolute;right:6px;top:27px;width:44px;height:44px;border:0;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center;transition:color .3s}
.f.pw button:hover,.f.pw button.on{color:var(--acc)}
.f.pw button .ico{width:19px;height:19px}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px;font-size:13.5px}
.auth-row a{color:var(--acc-tx)}
.auth-row a:hover{text-decoration:underline}
.chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--tx-2)}
.chk input{width:18px;height:18px;accent-color:var(--gold)}
.auth-s{margin-top:14px;font-size:12.5px;color:var(--mut);text-align:center}
.auth-s a{color:var(--acc-tx);text-decoration:underline}
.auth-open{overflow:hidden}
@media (max-width:1199px){.acct-b.out span{display:none}.acct-b.out{width:46px;padding:0;justify-content:center}}
@media (max-width:767px){
  .auth{padding:12px;align-items:end}
  .auth-box{grid-template-columns:1fr;border-radius:26px;max-height:calc(100dvh - 24px)}
  .auth-side{display:none}
  .auth-main{padding:34px 22px 26px}
  .acct-b,.acct.in .acct-b{height:44px}.acct-b.out,.acct.in .acct-b{width:44px}
  .pre-cube{--c:150px}
}
@media (max-width:420px){.hd-act{gap:8px}}
@media (prefers-reduced-motion:reduce){.pre-cube,.auth-cube,.pre-floor i{animation:none}.auth-box{transition:opacity .2s;transform:none}}


/* ---------- big interactive words (WORK and the footer wordmark) ---------- */
.bw{--bs:var(--line-2);display:flex;justify-content:center;white-space:nowrap;user-select:none;perspective:900px}
.bw-l{--k:var(--f,0);position:relative;display:inline-block;color:transparent;-webkit-text-stroke:1px var(--bs);transform-origin:50% 100%;transform:translateY(calc(var(--k)*-.09em)) rotateX(calc(var(--k)*-24deg)) scale(calc(1 + var(--k)*.07));transition:transform .55s var(--spring),-webkit-text-stroke-color .4s;will-change:transform}
.bw-l::before{content:attr(data-ch);position:absolute;left:0;top:0;-webkit-text-stroke:0;background:linear-gradient(180deg,#FFF3CF 0%,var(--gold-2) 28%,var(--gold) 58%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(calc((1 - var(--k))*100%) 0 0 0);transition:clip-path .5s var(--ease)}
.bw-l::after{content:"";position:absolute;left:8%;right:8%;bottom:-.04em;height:.05em;border-radius:99px;background:radial-gradient(closest-side,rgba(221,182,93,.7),transparent);opacity:var(--k);transform:scaleX(calc(.4 + var(--k)*.8));transition:opacity .5s,transform .5s var(--ease)}
.flx-js .bw .bw-l{opacity:0;translate:0 .5em;rotate:x 80deg;transition:transform .55s var(--spring),opacity .7s var(--ease) calc(var(--i)*55ms),translate .9s var(--spring) calc(var(--i)*55ms),rotate .9s var(--spring) calc(var(--i)*55ms)}
.flx-js .bw.in .bw-l,.flx-show .bw .bw-l{opacity:1;translate:none;rotate:none}
.work-word{position:absolute;left:0;right:0;top:44px;font:800 clamp(100px,20vw,320px)/.86 var(--fd);letter-spacing:.02em;opacity:.9}
.work-word .bw-l{-webkit-text-stroke-width:1.5px}
.ft-word{position:relative;padding:10px 0 0;font:800 clamp(48px,11.6vw,220px)/.84 var(--fd);letter-spacing:-.01em;--bs:rgba(255,255,255,.34);-webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.25));mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.25))}
.ft-word>span{display:flex;transform-origin:50% 100%;transform:rotateX(var(--wx,0deg));transition:transform .3s linear}
.ft-word .bw-l{--k:max(var(--f,0),.14)}
@media (max-width:767px){.work-word{top:36px}}

/* ---------- premium popup shell: glowing ring, tilt, blobs, chips ---------- */
.auth-box,.enq-box{--mx:0;--my:0}
.auth.on .auth-box,.auth.on .enq-box{transform:rotateX(calc(var(--my)*-5deg)) rotateY(calc(var(--mx)*7deg))}
.auth-ring{position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--flx-a),transparent 0 55%,var(--gold) 78%,#FFF6DE 86%,var(--gold) 92%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:flxSpin 5s linear infinite}
.auth-blob{position:absolute;z-index:-1;width:260px;height:260px;border-radius:50%;filter:blur(50px);opacity:.55;animation:blob 12s ease-in-out infinite alternate}
.auth-blob.b1{left:-70px;top:-60px;background:#2C4BB5}
.auth-blob.b2{right:-90px;bottom:-70px;background:var(--gold-3);animation-delay:-6s}
@keyframes blob{to{transform:translate(50px,40px) scale(1.25)}}
.auth-side .gyro,.auth-cube{translate:calc(var(--mx)*-16px) calc(var(--my)*-12px);transition:translate .5s var(--ease)}
.auth-box{--mxx:var(--mx)}
.auth-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 10px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 12.5px/1 var(--fd);white-space:nowrap;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bob 6s ease-in-out infinite;transition:transform .5s var(--ease)}
.auth-chip .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--gold);color:var(--ink)}
.auth-chip.c1{left:22px;top:26px;transform:translate(calc(var(--mx)*26px),calc(var(--my)*20px))}
.auth-chip.c2{right:18px;top:33%;animation-delay:-2s;transform:translate(calc(var(--mx)*-34px),calc(var(--my)*-22px))}
.auth-chip.c3{left:30px;top:54%;animation-delay:-4s;transform:translate(calc(var(--mx)*40px),calc(var(--my)*28px))}
.auth-main{perspective:1200px}
.auth-f.on{animation:authFlip .7s var(--spring) both;transform-origin:50% 0}
@keyframes authFlip{from{opacity:0;transform:rotateX(-38deg) translateY(26px)}}
.auth.on .auth-main>h2,.auth.on .auth-p,.auth.on .auth-tabs,.auth.on .auth-g{animation:fadeUp .7s var(--ease) both}
.auth.on .auth-p{animation-delay:.08s}.auth.on .auth-tabs{animation-delay:.16s}.auth.on .auth-g{animation-delay:.22s}
.auth-f.on>*{animation:fadeUp .6s var(--ease) both}
.auth-f.on>*:nth-child(1){animation-delay:.12s}.auth-f.on>*:nth-child(2){animation-delay:.18s}.auth-f.on>*:nth-child(3){animation-delay:.24s}.auth-f.on>*:nth-child(4){animation-delay:.3s}.auth-f.on>*:nth-child(n+5){animation-delay:.36s}
.auth-f .f input:focus{box-shadow:0 0 0 4px var(--acc-a),0 14px 30px rgba(221,182,93,.14)}

/* ---------- enquiry popup ---------- */
.enq-box{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;border-radius:30px;background:var(--sf);border:1px solid var(--line);box-shadow:0 50px 120px rgba(0,0,0,.5);overflow:hidden;opacity:0;transform:rotateY(-55deg) rotateX(12deg) scale(.7);transform-origin:50% 50%;transition:transform .85s var(--spring),opacity .4s}
.auth.on .enq-box{opacity:1}
.enq-top{position:relative;display:flex;align-items:center;gap:20px;padding:30px 70px 28px 30px;background:linear-gradient(150deg,#16224A,#070A13 75%);overflow:hidden;isolation:isolate}
.flx .enq-top h2{font-size:clamp(22px,2.6vw,28px);color:#fff}
.enq-top p{margin-top:6px;font-size:14.5px;line-height:1.55;color:#C9CEDB}
.enq-orb{position:relative;flex:none;width:76px;height:76px;perspective:600px}
.enq-orb i{position:absolute;inset:10px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-3));color:var(--ink);display:grid;place-items:center;box-shadow:0 14px 30px rgba(221,182,93,.4);animation:bob 5s ease-in-out infinite}
.enq-orb i .ico{width:24px;height:24px}
.enq-g{--s:130%;left:-15%;top:-15%;animation-duration:8s}
.enq-f{padding:26px 30px 28px;overflow-y:auto}
.enq-f .f{margin-bottom:14px}
.enq-f .f input,.enq-f .f select{height:50px}
.enq-f .f textarea{min-height:92px}
.auth.on .enq-f>*,.auth.on .enq-f .g2>*{animation:fadeUp .6s var(--ease) both}
.auth.on .enq-f .g2>*:nth-child(1){animation-delay:.2s}.auth.on .enq-f .g2>*:nth-child(2){animation-delay:.26s}.auth.on .enq-f .g2>*:nth-child(3){animation-delay:.32s}.auth.on .enq-f .g2>*:nth-child(4){animation-delay:.38s}
.auth.on .enq-f>*:nth-child(n+2){animation-delay:.44s}
.auth.on .enq-f>.g2{animation:none}
.enq-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.enq-wa{display:inline-flex;align-items:center;gap:8px;font:600 14.5px/1 var(--fd);color:var(--tx-2);transition:color .3s,translate .4s var(--ease)}
.enq-wa .ico{width:20px;height:20px;color:#25D366}
.enq-wa:hover{color:var(--hd);translate:4px 0}
.enq-done .enq-f>*:not(.msg){display:none}
.enq-done .msg{margin:0;padding:22px;font-size:16px;text-align:center}
@media (max-width:767px){
  .enq-top{padding:24px 60px 22px 20px;gap:14px}.enq-orb{width:58px;height:58px}.enq-orb i{inset:6px}
  .enq-f{padding:20px 20px 22px}
  .auth.on .auth-box,.auth.on .enq-box{transform:none}
}
@media (prefers-reduced-motion:reduce){.enq-box{transform:none;transition:opacity .2s}.auth-ring,.auth-blob,.auth-chip{animation:none}.flx-js .bw .bw-l{opacity:1;translate:none;rotate:none}}

.work-word .bw-l::before{opacity:.42}
.work .sec-h{position:relative;z-index:1}

/* the loading-screen logo flies into its place in the header */

.flx-fly .hd .lgi{opacity:0}
.hd .lgi{transition:width .5s var(--ease),height .5s var(--ease),transform .9s var(--spring),opacity .01s}

/* desktop header on scroll: logo and buttons leave, the menu stays; below the hero the menu folds away */
.hd .logo,.hd .hd-act{transition:opacity .45s var(--ease),translate .65s var(--ease),scale .65s var(--ease),filter .45s}
.nav{transition:background .4s,border-color .4s,box-shadow .4s,opacity .45s var(--ease),transform .75s var(--spring),filter .45s;transform-origin:50% 0}
.hd-in{perspective:900px}
.hd.only-nav{pointer-events:none}
.hd.only-nav .nav{pointer-events:auto;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line);box-shadow:var(--shadow-s)}
.hd.only-nav .logo{opacity:0;translate:-40px -20px;scale:.6;filter:blur(6px);pointer-events:none}
.hd.only-nav .hd-act{opacity:0;translate:60px 0;scale:.92;filter:blur(6px);pointer-events:none;visibility:hidden;transition:opacity .45s var(--ease),translate .65s var(--ease),scale .65s var(--ease),filter .45s,visibility 0s .5s}
.hd.gone .nav{opacity:0;transform:translateX(var(--ncx,0px)) translateY(-34px) rotateX(75deg) scale(.82);filter:blur(8px);pointer-events:none;visibility:hidden;transition:background .4s,opacity .45s var(--ease),transform .7s var(--ease),filter .45s,visibility 0s .6s}
@media (prefers-reduced-motion:reduce){.hd.only-nav .logo,.hd.only-nav .hd-act,.hd.gone .nav{filter:none;translate:none;scale:1;transform:none}}
.hd.only-nav .nav{background:color-mix(in srgb,var(--bg) 84%,transparent)}

/* ---------- loading screen: logo inside a gold progress ring, then the logo glides into the header ---------- */

/* menu alone on scroll: centred at the top and more compact */
.hd.only-nav .nav{transform:translateX(var(--ncx,0px));padding:4px}
.hd.only-nav .menu>li>a{padding:9px 13px;font-size:14px}
.menu>li>a{transition:color .3s,padding .45s var(--ease),font-size .45s var(--ease)}

/* ---------- loading screen v3: logo, brand word that fills with gold, progress line; two panels part at the end ---------- */
.pre{position:fixed;inset:0;z-index:300;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.pre-half{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);transition:transform 1s cubic-bezier(.76,0,.24,1) .3s}
.pre-half.a{top:0;box-shadow:inset 0 -1px 0 var(--line)}
.pre-half.b{bottom:0}
.pre-glow{position:absolute;left:50%;top:50%;width:min(96vw,900px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,var(--acc-a),transparent 70%);animation:preGlow 3.4s ease-in-out infinite;transition:opacity .4s}
@keyframes preGlow{50%{scale:1.15;opacity:.65}}
.pre-c{position:relative;display:grid;justify-items:center;gap:clamp(14px,2.4vh,26px);width:100%;padding:0 20px;text-align:center}
.pre-logo{perspective:800px}
.pre .lgi{width:clamp(120px,24vw,210px);height:auto;aspect-ratio:120/78;animation:preIn 1s var(--spring) both,preTilt 5s ease-in-out 1s infinite}
@keyframes preIn{from{opacity:0;scale:.6;translate:0 20px}}
@keyframes preTilt{0%,100%{transform:rotateY(-12deg)}50%{transform:rotateY(12deg)}}

@keyframes preSheen{to{background-position:-200% 0}}
.pre-words{position:relative;width:100%;height:16px;font:600 clamp(10px,2.6vw,12px)/16px var(--fb);letter-spacing:.36em;text-transform:uppercase;color:var(--mut);transition:opacity .4s}
.pre-words span{position:absolute;inset:0;opacity:0;animation:preW 3.2s linear infinite}
.pre-words span:nth-child(2){animation-delay:.8s}.pre-words span:nth-child(3){animation-delay:1.6s}.pre-words span:nth-child(4){animation-delay:2.4s}
@keyframes preW{0%{opacity:0;translate:0 8px}6%,22%{opacity:1;translate:none}28%,100%{opacity:0;translate:0 -8px}}
.pre-foot{position:absolute;left:0;right:0;bottom:calc(clamp(18px,4vh,40px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:0 clamp(20px,5vw,64px);font:600 12px/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);transition:opacity .4s var(--ease),translate .5s var(--ease)}
.pre-bar{position:relative;flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.pre-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-3),var(--gold),var(--gold-2));transform-origin:0 50%;transform:scaleX(var(--pp,0))}
.pre-meta{min-width:4ch;text-align:right;font:500 clamp(15px,2vw,18px)/1 var(--fd);letter-spacing:0;color:var(--hd);font-variant-numeric:tabular-nums}

.flx-out .pre-words,.flx-out .pre-glow{opacity:0}
.flx-out .pre-foot{opacity:0;translate:0 16px}
.flx-ready .pre-half.a{transform:translateY(-101%)}
.flx-ready .pre-half.b{transform:translateY(101%)}
.flx-ready .pre-c{opacity:0;transition:opacity .25s}
.flx-ready .pre{visibility:hidden;transition:visibility 0s linear 1.5s}
.flx-seen .pre-c,.flx-seen .pre-foot,.flx-seen .pre-glow{display:none}
.flx-seen .pre-half{transition:transform .6s cubic-bezier(.76,0,.24,1) .05s}
.flx-seen.flx-ready .pre{transition-delay:.75s}
@media (max-height:480px){.pre .lgi{width:110px}.pre-word{font-size:clamp(22px,7vw,60px)}}

/* ---------- Buy Now / payment page ---------- */
.pay-g{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.qr{position:relative;padding:26px 26px 24px;border-radius:32px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center;isolation:isolate}
.qr .auth-ring{border-radius:32px}
.qr-h{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;font:600 12px/1 var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-tx)}
.qr-h .ico{width:18px;height:18px}
.qr-img{position:relative;width:min(100%,300px);margin:0 auto;padding:12px;border-radius:22px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.25);overflow:hidden}
.qr-img img{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:8px}
.qr-img::before,.qr-img::after{content:"";position:absolute;width:34px;height:34px;border:3px solid var(--gold);pointer-events:none}
.qr-img::before{left:4px;top:4px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.qr-img::after{right:4px;bottom:4px;border-left:0;border-top:0;border-radius:0 0 14px 0}
.qr-scan{position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 18px 4px rgba(221,182,93,.55);animation:qrScan 3s ease-in-out infinite;pointer-events:none}
@keyframes qrScan{0%,100%{translate:0 0}50%{translate:0 min(276px,calc(100vw - 150px))}}
.qr-name{margin-top:20px;font:600 clamp(17px,2vw,20px)/1.3 var(--fd);color:var(--hd)}
.qr-id{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-top:10px;padding:8px 8px 8px 16px;border-radius:99px;background:var(--sf-2);border:1px solid var(--line);font:500 14.5px/1.3 var(--fb);color:var(--tx-2);cursor:pointer;transition:border-color .3s,translate .4s var(--spring)}
.qr-id b{font-weight:600;color:var(--hd);overflow-wrap:anywhere}
.qr-id i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;transition:rotate .5s var(--spring)}
.qr-id i .ico{width:15px;height:15px}
.qr-id:hover{border-color:var(--acc);translate:0 -2px}.qr-id:hover i,.qr-id.done i{rotate:360deg}
.qr-id.done{border-color:#3E9B5B}
.qr-apps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.qr-apps li{padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);font:600 12px/1 var(--fb);color:var(--tx-2)}
.btn.qr-open{display:none;margin-top:18px}
.pay-r h2{margin-bottom:18px}
.pay-r>p{max-width:560px;font-size:17px}
.pay-steps{display:grid;gap:14px;margin:30px 0 32px;padding:0;list-style:none;counter-reset:ps}
.pay-steps li{position:relative;display:grid;grid-template-columns:54px 1fr;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:20px;background:var(--sf);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:translate .45s var(--ease),border-color .3s}
.pay-steps li:hover{translate:8px 0;border-color:var(--acc-b)}
.pay-steps li>i{width:54px;height:54px;border-radius:16px;background:var(--acc-a);color:var(--acc);display:grid;place-items:center;transition:background .35s,color .35s,rotate .5s var(--spring)}
.pay-steps li:hover>i{background:var(--gold);color:var(--ink);rotate:-8deg}
.pay-steps b{display:block;font:500 17px/1.3 var(--fd);color:var(--hd)}
.pay-steps span{display:block;margin-top:3px;font-size:14.5px;line-height:1.5}
.pay-note{margin-top:clamp(40px,6vw,72px);padding:clamp(22px,3vw,34px);border-radius:24px;border:1px solid var(--acc-b);background:var(--acc-a)}
.pay-note h3{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:18px}
.pay-note h3 .ico{width:22px;height:22px;color:var(--acc)}
.pay-note p{font-size:15.5px;line-height:1.7}
@media (max-width:991px){.pay-g{grid-template-columns:1fr}.qr{max-width:440px;margin:0 auto;width:100%}}
@media (max-width:767px){.qr{padding:20px 18px}.btn.qr-open{display:flex}.pay-steps li{grid-template-columns:46px 1fr;padding:14px}.pay-steps li>i{width:46px;height:46px}}
@media (max-width:1199px){.hd-buy{display:none}}
@media (max-width:1559px){.hd .hd-tel{display:none}}
@media (max-width:1359px){.hd .btn.sm .bl{padding:0 15px}.hd .hd-act{gap:8px}.hd .menu>li>a{padding-inline:12px}}
.flx main{overflow-x:hidden;overflow-x:clip}
.pre-fly{position:fixed;z-index:310;margin:0;pointer-events:none;transform-origin:50% 50%;transition:transform 1.15s cubic-bezier(.66,0,.18,1);will-change:transform}

/* loading word: every letter is a small 3D piece that drops in, then turns to solid gold as the page loads */
.pre-word{position:relative;display:flex;justify-content:center;max-width:100%;font:800 clamp(26px,8.6vw,112px)/1 var(--fd);letter-spacing:.02em;white-space:nowrap;perspective:900px;transform-style:preserve-3d;animation:preSway 5.5s ease-in-out infinite}
@keyframes preSway{0%,100%{transform:perspective(900px) rotateX(10deg) rotateY(-12deg)}50%{transform:perspective(900px) rotateX(-4deg) rotateY(12deg)}}
.pre-word b{--k:clamp(0,calc(var(--pp,0)*var(--n)*1.04 - var(--i)),1);position:relative;display:inline-block;font:inherit;color:transparent;-webkit-text-stroke:1px var(--line-2);transform-style:preserve-3d;transform-origin:50% 100%;transform:translateY(calc(var(--k)*-.06em)) translateZ(calc(var(--k)*30px));animation:preDrop .9s var(--spring) calc(var(--i)*55ms) both;transition:opacity .45s var(--ease) calc(var(--i)*25ms),translate .6s var(--ease) calc(var(--i)*25ms),rotate .6s var(--ease) calc(var(--i)*25ms)}
@keyframes preDrop{from{opacity:0;translate:0 -.6em;rotate:x -95deg}}
.pre-word b::after{content:attr(data-ch);position:absolute;left:0;top:0;-webkit-text-stroke:0;color:var(--gold);background:linear-gradient(180deg,#FFF3CF,var(--gold-2) 30%,var(--gold) 60%,var(--gold-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:var(--k);transform-origin:50% 100%;transform:rotateX(calc((1 - var(--k))*92deg));filter:drop-shadow(0 .03em 0 #8A6B28) drop-shadow(0 .06em 0 #6E551F) drop-shadow(0 .16em .18em rgba(0,0,0,.45))}
.pre-word b::before{content:"";position:absolute;left:10%;right:10%;bottom:-.1em;height:.06em;border-radius:99px;background:radial-gradient(closest-side,rgba(221,182,93,.8),transparent);opacity:var(--k)}
.flx-out .pre-word b{opacity:0;translate:0 .5em;rotate:x 80deg}
@media (prefers-reduced-motion:reduce){.pre-word,.pre-word b{animation:none}}