/* Digital Gear — main stylesheet (home page). Colors and font are overridden from the Customizer. */
html{color-scheme:dark}
:root{
  --canvas:#000000;
  --panel:#16131D;
  --panel-2:#1E1A27;
  --ink:#D7E2EA;
  --ink-2:#9AA4B1;
  --light:#F3F1F6;
  --dark-ink:#0C0B10;
  --magenta:#B600A8;
  --violet:#7621B0;
  --orange:#BE4C00;
  --accent-soft:rgba(182,0,168,.35);
  --grad-cta:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --grad-head:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --font:'Kanit',sans-serif;
  --dg-pink:#F070C8;
  --canvas-rgb:0,0,0;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;background:var(--canvas)}
body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:var(--font);font-weight:300;-webkit-font-smoothing:antialiased;animation:pageIn .35s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--magenta);color:#fff}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--light);color:var(--dark-ink);padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
:focus-visible{outline:2px solid #E04FD6;outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-heading{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* ambient environment layer */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before,.env::after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:.14;animation:drift 70s ease-in-out infinite alternate}
.env::before{background:radial-gradient(circle,var(--violet),transparent 60%);left:-20vmax;top:-10vmax}
.env::after{background:radial-gradient(circle,var(--magenta),transparent 60%);right:-25vmax;bottom:-20vmax;animation-delay:-30s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12vmax,8vmax,0) scale(1.15)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;border:0;cursor:pointer;font:500 clamp(.78rem,1vw,1rem)/1 var(--font);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:1.05em 2.6em;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease),background-color .3s var(--ease),opacity .3s var(--ease)}
.btn-cta{color:#fff;background:var(--grad-cta);box-shadow:0 4px 4px rgba(181,1,167,.25),inset 4px 4px 12px #7721B1;outline:2px solid rgba(255,255,255,.9);outline-offset:-3px}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(182,0,168,.45),inset 4px 4px 12px #7721B1}
.btn-ghost{color:var(--ink);background:transparent;border:2px solid var(--ink)}
.btn-ghost:hover{background:rgba(215,226,234,.1)}
.btn-dark{color:var(--dark-ink);border:2px solid var(--dark-ink);background:transparent}
.btn-dark:hover{background:rgba(var(--canvas-rgb),.08)}
@media (pointer:coarse){.btn{min-height:44px}}

/* nav */
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 16px);z-index:50;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(22,20,30,.38);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",var(--font);white-space:nowrap;animation:navIn .9s var(--ease-out) .2s both;transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
@keyframes navIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nav a{text-decoration:none;color:rgba(245,245,247,.8);font-size:.84rem;font-weight:400;letter-spacing:-.005em;line-height:1;padding:9px 14px;border-radius:999px;transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.cur{background:rgba(255,255,255,.13);color:#fff}
.nav .brand{display:flex;align-items:center;padding:3px 8px 3px 5px}
.nav .brand:hover{background:none}
.nav .brand img{width:26px;height:26px;max-width:none;flex:none}
.nav .cta{margin-left:4px;background:#F5F5F7;color:var(--canvas);font-weight:500}
.nav .cta:hover{background:#fff;color:var(--canvas)}
.nav.solid{background:rgba(16,14,22,.72);box-shadow:0 10px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
@media (max-width:560px){.nav{gap:0;padding:4px}.nav .cta{display:none}.nav a{font-size:.8rem;padding:9px 10px}.nav .brand{padding:2px 4px 2px 3px}.nav .brand img{width:24px;height:24px}}
@media (max-width:370px){.nav a{padding:9px 7px;font-size:.76rem}}

/* ===== HERO ===== */
.hero{position:relative;height:700vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:transparent}
.stage-bg{position:absolute;inset:-4%;background:#07070F url('../draw/stage-bg.jpg') center/cover no-repeat;transform:scale(calc(1.1 - var(--p,0)*.1));filter:brightness(calc(.95 - var(--p,0)*.2)) saturate(1.1);will-change:transform}
.stage-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);transform:translateZ(0)}
.stage-bg.ready video{opacity:1}
/* fine animated grain over the light-stroke video: dithers the dark gradients so they never look blocky */
.stage-bg::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(var(--canvas-rgb),0) calc(100% - 22vh),rgba(var(--canvas-rgb),.55) calc(100% - 9vh),var(--canvas) 100%),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 45%,rgba(0,0,0,.75) 100%)}
/* the MovinkPad Pro 14, in 3D */
.scene{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 45%;pointer-events:none;z-index:2}
.tab3d{position:absolute;left:50%;top:50%;height:min(80vh,840px);aspect-ratio:996/1537;transform-style:preserve-3d;will-change:transform,opacity;opacity:0;transform:translate(-50%,-50%)}
.tab3d .edge{position:absolute;inset:0;border-radius:6.2%/4%;background:linear-gradient(135deg,#E9EBEF,#A5A9B1 40%,#D5D8DD 70%,#8C9098);}
.tab3d .e1{transform:translateZ(-3px)}.tab3d .e2{transform:translateZ(-6px)}.tab3d .e3{transform:translateZ(-9px);box-shadow:0 60px 120px rgba(0,0,0,.65)}
.tab3d .body{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0)}
.screen{position:absolute;left:5.52%;top:3.38%;width:89.26%;height:92.65%;overflow:hidden;background:#08080B;transform:translateZ(.5px)}
.screen canvas,.screen .final{position:absolute;inset:0;width:100%;height:100%}
.screen .paper{position:absolute;inset:0;background:#FBFAF7;opacity:0}
.screen .final{opacity:0}
.screen .boot{position:absolute;inset:0;display:grid;place-items:center;background:#060609;opacity:0}
.screen .boot img{width:72%;height:auto;filter:drop-shadow(0 0 18px rgba(255,255,255,.25))}
.screen .glare{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.06) 54%,transparent 60%);transform:translateX(calc(-60% + var(--g,0)*120%));pointer-events:none}
.screen .gloss{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 40%);pointer-events:none}
.pen{position:absolute;left:0;top:0;z-index:3;width:min(24vw,340px);height:auto;transform-origin:0 50%;opacity:0;will-change:transform,opacity;pointer-events:none;filter:drop-shadow(16px 22px 12px rgba(0,0,0,.45))}
/* intro band (Jack layout) */
.intro{position:absolute;inset:0;display:flex;flex-direction:column;z-index:3}
.intro .spacer{height:clamp(64px,8vw,110px)}
.intro-name{position:relative;z-index:2;overflow:visible;padding:.02em 0 .06em;margin-bottom:-.06em;will-change:transform;transform:translateY(calc(var(--o,0)*-18vh));opacity:calc(1 - var(--o,0)*1.2)}
.intro-name h1{filter:drop-shadow(0 10px 44px rgba(0,0,0,.55));font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;white-space:nowrap;text-align:center;font-size:clamp(4.5rem,21vw,26rem)}
.intro-name h1 .ch{display:inline-block;animation:rise 1s var(--ease-out) both;background:var(--grad-head);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.intro-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 clamp(20px,3vw,40px) clamp(28px,3vw,40px);position:relative;z-index:4;opacity:calc(1 - var(--o,0)*1.6)}
.intro-bottom p{font-weight:300;text-transform:uppercase;letter-spacing:.04em;line-height:1.3;font-size:clamp(.78rem,1.3vw,1.4rem);max-width:23ch;text-shadow:var(--tshadow);background:rgba(var(--canvas-rgb),.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.08);animation:fadeUp .9s var(--ease) .35s both}
.intro-bottom .btn{animation:fadeUp .9s var(--ease) .5s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.portrait-wrap{position:absolute;left:50%;bottom:0;z-index:2;width:clamp(280px,34vw,600px);transform:translateX(-50%) translateY(calc(var(--o,0)*30vh));opacity:calc(1 - var(--o,0)*1.3)}
.portrait-mag{transition:transform .6s ease-in-out;will-change:transform}
.portrait-mag.active{transition:transform .3s ease-out}
.portrait-wrap img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 18%);mask-image:linear-gradient(to top,transparent 0%,#000 18%);filter:drop-shadow(0 20px 60px rgba(118,33,176,.35));animation:fadeUp 1s var(--ease) .6s both}
.portrait-wrap::before{content:"";position:absolute;left:10%;right:10%;bottom:-6%;height:40%;background:radial-gradient(ellipse at 50% 100%,rgba(182,0,168,.35),transparent 70%);filter:blur(20px);z-index:-1}

.dg-mark{position:absolute;left:50%;bottom:clamp(10px,3vh,40px);z-index:1;width:clamp(320px,44vw,720px);transform:translateX(-50%) translateY(calc(var(--o,0)*18vh)) scale(calc(1 - var(--o,0)*.15));opacity:calc(.92 - var(--o,0)*1.2);pointer-events:none}
.dg-mark img{width:100%;height:auto;filter:drop-shadow(0 0 40px rgba(38,214,228,.25)) drop-shadow(0 0 70px rgba(197,0,200,.35));animation:dgIn 1.4s var(--ease-out) .3s both,dgFloat 9s ease-in-out -3s infinite}
@keyframes dgIn{from{opacity:0;transform:scale(.8) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes dgFloat{50%{translate:0 -10px}}
/* caption bands */
.band{position:absolute;z-index:3;opacity:0;text-shadow:var(--tshadow);pointer-events:none}
.band.on{pointer-events:auto}
.band::before{display:none;content:"";position:absolute;inset:-30% -25%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(5,5,10,.76) 0%,rgba(5,5,10,.52) 48%,rgba(5,5,10,0) 78%)}
.band .kick{display:block;color:#E9A7E4;margin-bottom:1.2rem}
.band h2{font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:clamp(1.8rem,3.3vw,3.6rem)}
.band p{margin-top:1.1rem;font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.5;color:var(--ink);max-width:30ch}
.b-left{left:clamp(24px,5vw,90px);top:50%;transform:translateY(-50%);width:min(28vw,440px)}
.b-right{right:clamp(24px,5vw,90px);top:50%;transform:translateY(-50%);width:min(28vw,440px);text-align:right}
.b-right p{margin-left:auto}
.b-settle{left:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);width:min(44vw,640px);text-align:left}
.b-settle h2{font-size:clamp(2.2rem,4.8vw,5.2rem);font-weight:900;line-height:.95}
.b-settle p{margin:1.2rem 0 0;max-width:40ch}
.b-settle .row{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap;margin-top:2rem}
.b-settle::before{inset:-30% -12%;background:radial-gradient(ellipse 58% 58% at 50% 50%,rgba(5,5,10,.72) 0%,rgba(5,5,10,.5) 50%,rgba(5,5,10,0) 78%)}
/* split titles: the gradient lives on each word only (a gradient + shadow filter on the parent painted a grey box on some GPUs) */
.band .hero-heading{text-shadow:none;filter:none;background:none;-webkit-text-fill-color:currentColor;color:#BBCCD7}
.hero-heading .w{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .02em;margin:0 -.02em}
/* word entrances */
.w{display:inline-block}
.drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - .12)*3,1);opacity:var(--kc);transform:scale(calc(.6 + .52*var(--kc) - .12*var(--ks)))}
.settle-in .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*40px))}
.band .sub{--ks:clamp(0,(var(--k,0) - .5)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.band .row{--kb:clamp(0,(var(--k,0) - .7)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* static hero (5 gates) */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;overflow:visible;background:transparent}
  .pen,.chev,.stage-bg video{display:none}
  .stage{display:flex;flex-direction:column}
  .intro{order:0}.b-left{order:1}.b-settle{order:4}.scene{order:3}
  .scene{position:relative;inset:auto;height:auto;padding:10vh 0 4vh;perspective:none}
  .tab3d{position:relative;left:auto;top:auto;margin:0 auto;height:auto;width:min(74vw,420px);opacity:1!important;transform:rotate(-4deg)!important}
  .tab3d .edge{display:none}
  .tab3d .body{position:relative;display:block}
  .screen .paper,.screen .final{opacity:1!important}
  .screen .boot,.screen canvas{display:none}
  .stage-bg{inset:0;transform:none;filter:brightness(.55)}
  .intro{position:relative;height:100svh;min-height:560px}
  .intro-name{transform:none;opacity:1}
  .intro-bottom,.portrait-wrap{opacity:1}
  .dg-mark{transform:translateX(-50%);opacity:.9}
  .portrait-wrap{transform:translateX(-50%)}
  .band{position:relative;opacity:1;left:auto;right:auto;top:auto;transform:none;width:auto;text-align:left;padding:14vh clamp(20px,6vw,60px) 0;--k:1}
  .band::before{display:none}
  .b-settle{text-align:left;padding-bottom:14vh}
  .b-right p{margin-left:0}
  .static-tail{background:none}
}
@media (max-width:720px){
  .dg-mark{width:min(92vw,420px);bottom:auto;top:44%;transform:translate(-50%,-50%)!important}
  .portrait-wrap{width:min(80vw,380px);bottom:auto;top:46%;transform:translate(-50%,-50%)!important}
  .intro-bottom p{padding:10px 14px;border-radius:12px}
  .intro-bottom{flex-direction:column;align-items:flex-start}
  .intro-bottom p{max-width:22ch}
}
@media (max-height:560px){.chev{display:none}}

/* ===== MARQUEE ===== */
.marquee::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(140px,22vh,240px);background:linear-gradient(to bottom,var(--canvas),rgba(var(--canvas-rgb),0));pointer-events:none;z-index:0}
.marquee>*{position:relative;z-index:1}
.marquee{position:relative;padding:clamp(90px,10vw,160px) 0 40px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.marquee .lead{padding:0 clamp(20px,3vw,40px) 36px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.marquee .lead h2{font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1rem,1.6vw,1.5rem)}
.track{display:flex;gap:12px;width:max-content;will-change:transform}
.tile{width:clamp(260px,26vw,420px);height:clamp(170px,17vw,270px);border-radius:16px;overflow:hidden;flex:none;background:radial-gradient(ellipse at 50% 60%,#2A1838 0%,#15111C 70%);position:relative}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.tile.art img{object-fit:contain;padding:6%}
.tile:hover img{transform:scale(1.05)}

/* ===== ABOUT ===== */
.about{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,5vw,64px);padding:100px clamp(20px,3vw,40px);text-align:center}
.about h2,.big-h{font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em;font-size:clamp(3rem,12vw,160px)}
.reveal-text{font-weight:500;font-size:clamp(1rem,2vw,1.35rem);line-height:1.7;max-width:36ch;color:var(--ink)}
/* unrevealed letters: dim and softly blurred (text-shadow blur = cheap on hundreds of spans); they sharpen as you scroll */
.reveal-text .c{color:transparent;text-shadow:0 0 6px rgba(215,226,234,.38);transition:color .55s var(--ease),text-shadow .55s var(--ease)}
.reveal-text .c.on{color:var(--ink);text-shadow:0 0 0 rgba(215,226,234,0)}
.deco{position:absolute;mix-blend-mode:lighten;pointer-events:none;opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease-out)}
.deco img{width:100%;animation:floaty 7s ease-in-out infinite}
.deco.d1{top:4%;left:3%;width:clamp(110px,14vw,210px);transform:translateX(-80px)}
.deco.d2{bottom:8%;left:8%;width:clamp(100px,12vw,180px);transform:translateX(-80px)}
.deco.d3{top:4%;right:3%;width:clamp(110px,14vw,210px);transform:translateX(80px)}
.deco.d4{bottom:8%;right:8%;width:clamp(110px,14vw,220px);transform:translateX(80px)}
.deco.d2 img{animation-delay:-2s}.deco.d3 img{animation-delay:-4s}.deco.d4 img{animation-delay:-5.5s}
.about.in .deco{opacity:1;transform:none}
.about.in .d2{transition-delay:.15s}.about.in .d3{transition-delay:.05s}.about.in .d4{transition-delay:.2s}
@keyframes floaty{50%{transform:translateY(-12px) rotate(3deg)}}
.facts{display:flex;gap:clamp(24px,5vw,72px);flex-wrap:wrap;justify-content:center}
.facts div{text-align:center}
.facts b{display:block;font-weight:700;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1}
.facts span{color:var(--ink-2)}
@media (max-width:720px){.deco{opacity:.5}.deco.d2,.deco.d4{display:none}}

/* ===== SERVICES ===== */
.services{background:var(--light);color:var(--dark-ink);border-radius:clamp(40px,4vw,60px) clamp(40px,4vw,60px) 0 0;padding:clamp(80px,9vw,130px) clamp(20px,3vw,40px) clamp(120px,12vw,180px)}
.services .big-h{text-align:center;margin-bottom:clamp(60px,7vw,110px);color:var(--dark-ink)}
/* section titles: the site's silver gradient warming into the button pink at the bottom */
.about>h2.hero-heading,.big-h.hero-heading,.tryit h3.hero-heading,.quotes .lead h2.hero-heading,.book h2.hero-heading{background:linear-gradient(180deg,#646973 0%,#BBCCD7 48%,#D6A6DA 78%,#E26BD8 104%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.services .big-h{background:linear-gradient(175deg,var(--canvas) 0%,#24092E 45%,#7E1685 88%,var(--magenta) 112%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.svc-list{max-width:1100px;margin:0 auto}
.svc{display:flex;gap:clamp(20px,4vw,60px);align-items:flex-start;padding:clamp(32px,4vw,48px) 0;border-top:1px solid rgba(var(--canvas-rgb),.15);opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.svc:last-child{border-bottom:1px solid rgba(var(--canvas-rgb),.15)}
.svc.in{opacity:1;transform:none}
.svc .num{font-weight:900;line-height:.85;font-size:clamp(3rem,10vw,140px);min-width:1.4em}
.svc h3{font-weight:500;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);letter-spacing:.02em}
.svc p{font-weight:300;line-height:1.6;max-width:60ch;font-size:clamp(.92rem,1.5vw,1.2rem);color:#4A4755;margin-top:.5em}
.svc .tag{display:inline-block;margin-top:1em;color:#6B1A8F}
.svc .num{background:linear-gradient(175deg,var(--canvas) 0%,#24092E 38%,#7E1685 78%,var(--magenta) 110%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ===== WACOM ===== */
.wacom{position:relative;z-index:10;margin-top:clamp(-56px,-4vw,-40px);background:linear-gradient(to bottom,var(--canvas) 0,var(--canvas) calc(100% - 260px),rgba(var(--canvas-rgb),0) 100%);border-radius:clamp(40px,4vw,60px) clamp(40px,4vw,60px) 0 0;padding:clamp(80px,9vw,130px) clamp(20px,3vw,40px) clamp(110px,11vw,170px);overflow:hidden}
.wacom-head{position:relative;text-align:center;padding-bottom:clamp(70px,8vw,120px)}
.wacom-head .mono{color:#E9A7E4}
.wacom-head .big-h{margin-top:18px}
.wacom-head p{max-width:52ch;margin:24px auto 0;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink)}
.stage-ring{position:absolute;left:50%;bottom:0;width:min(1400px,120vw);aspect-ratio:16/9;transform:translateX(-50%);background:url('../wacom-stage.jpg') center 90%/cover no-repeat;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 82%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 82%,#000 40%,transparent 75%);z-index:-1}
.stage-ring::after{content:"";position:absolute;left:50%;top:79%;width:34%;height:9%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 60px 20px rgba(190,76,0,.35),0 0 120px 40px rgba(182,0,168,.25);opacity:.6;animation:pulse 6s ease-in-out -2s infinite}
@keyframes pulse{50%{opacity:1}}
.products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);max-width:1280px;margin:0 auto;position:relative}
.prod{background:var(--light);color:var(--dark-ink);border-radius:clamp(32px,3.2vw,50px);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease-out)}
.prod.in{opacity:1;transform:none}
.prod:nth-child(2).in{transition-delay:.12s}
.prod .pimg{border-radius:clamp(22px,2.4vw,36px);background:#fff;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.prod .pimg img{width:100%;height:100%;object-fit:contain;transition:transform 1s var(--ease-out)}
.prod:hover .pimg img{transform:scale(1.04)}
.prod .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:22px;flex-wrap:wrap}
.prod h3{font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.6rem);line-height:1}
.prod .price{font-weight:500;font-size:clamp(1.1rem,1.6vw,1.5rem);white-space:nowrap}
.prod .for{margin-top:8px;color:#6B1A8F}
/* promo code: a ticket with notches, gradient rim, one-tap copy */
.promo{position:relative;max-width:1280px;margin:clamp(26px,3vw,40px) auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2.6vw,36px);padding:clamp(18px,2.2vw,26px) clamp(22px,3vw,44px);border-radius:26px;
  background:linear-gradient(rgba(14,10,24,.72),rgba(14,10,24,.72)) padding-box,linear-gradient(115deg,var(--dg-pink),var(--magenta) 35%,var(--violet) 70%,var(--orange)) border-box;border:1.5px solid transparent;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 60px rgba(118,33,176,.35),0 0 0 1px rgba(255,255,255,.04) inset;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,transparent 12.5px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,transparent 12.5px,#000 13px) right/51% 100% no-repeat;mask:radial-gradient(circle 13px at 0 50%,transparent 12.5px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,transparent 12.5px,#000 13px) right/51% 100% no-repeat}
.promo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.09) 45%,transparent 60%);background-size:260% 100%;animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,60%{background-position:130% 0}100%{background-position:-30% 0}}
.promo-amt{display:flex;align-items:flex-start;font-weight:900;line-height:.85;letter-spacing:-.03em;font-size:clamp(3rem,5.4vw,4.6rem);background:linear-gradient(180deg,#FFD1F4,var(--dg-pink) 45%,var(--magenta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:clamp(16px,2.4vw,34px);border-right:1.5px dashed rgba(233,167,228,.35)}
.promo-amt small{font-size:.45em;margin:.12em 0 0 .08em}
.promo-amt .minus{margin-right:.14em}
.promo-txt b{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1rem,1.4vw,1.2rem);color:#fff}
.promo-txt p{margin-top:6px;color:#D9D3E6;line-height:1.5;font-size:clamp(.92rem,1.15vw,1.05rem);max-width:none}
.promo-code{display:flex;align-items:center;gap:0;border-radius:16px;border:1.5px dashed rgba(242,166,236,.7);background:rgba(255,255,255,.06);padding:0;cursor:pointer;color:#fff;font:inherit;overflow:hidden;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease-out)}
.promo-code:hover{background:rgba(255,255,255,.1);border-color:#F2A6EC;transform:translateY(-1px)}
.promo-code .code{font-family:var(--mono);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.08em;padding:14px 18px}
.promo-code .copy{align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 18px;background:var(--grad-cta);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;min-width:8.5em;justify-content:center}
.promo-code .copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.promo-code.ok{border-color:#62E3A0}
.promo-code.ok .copy{background:linear-gradient(120deg,#1E9E6A,#3CC98A)}
.prod .deal{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:clamp(.92rem,1.1vw,1rem);color:#34313D}
.prod .deal .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--grad-cta);color:#fff;font-weight:500;font-size:.8rem;letter-spacing:.04em}
.prod .deal b{font-weight:700;color:var(--canvas)}
.prod .deal .code{font-family:var(--mono);font-size:.85em;color:#6B1A8F;border:1px dashed rgba(107,26,143,.5);border-radius:8px;padding:2px 7px;cursor:pointer;background:none}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:14px;background:rgba(16,14,22,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.95rem;box-shadow:0 12px 40px rgba(0,0,0,.4);transition:opacity .35s var(--ease),transform .45s var(--ease-out);max-width:min(420px,calc(100vw - 32px));text-align:center;text-wrap:balance}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){.promo{grid-template-columns:auto 1fr;row-gap:16px;padding:20px 22px}.promo-code{grid-column:1/-1;justify-self:stretch;justify-content:space-between}.promo-amt{font-size:3rem}}
.prod ul{list-style:none;margin:18px 0 24px;display:grid;gap:10px}
.prod li{display:flex;gap:12px;align-items:baseline;line-height:1.45;font-size:clamp(.95rem,1.2vw,1.08rem);color:#34313D}
.prod li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--grad-cta);transform:translateY(-1px)}
.prod .acts{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap}
.prod .btn{padding:.95em 1.8em}
@media (max-width:860px){.products{grid-template-columns:1fr}}

/* cosmic background of the MovinkPad section */
.wacom>*:not(.cosmos){position:relative;z-index:1}
.cosmos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 72%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 72%,transparent 100%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
/* "Wavy" WebGL2 shader background (vanilla port of the WavyBackground component) */
#wavy{position:absolute;inset:0;width:100%;height:100%;display:block}
.cosmos.nogl{background:url('../nebula.jpg') center/cover no-repeat}
.cosmos-dim{position:absolute;inset:0;background:radial-gradient(ellipse 75% 60% at 50% 40%,rgba(6,6,16,.12),rgba(6,6,16,.5) 100%)}
/* try the stroke */
.tryit{max-width:1280px;margin:clamp(60px,7vw,110px) auto 0;display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,60px);align-items:center}
.tryit h3{font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4.4vw,4.6rem);line-height:.95}
.tryit p{margin-top:18px;line-height:1.6;font-size:clamp(1rem,1.3vw,1.15rem);max-width:40ch}
.tryit .mono{color:#E9A7E4;display:block;margin-bottom:14px}
.pad{position:relative;aspect-ratio:16/10;border-radius:18px;background-color:#FBFAF6;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%20.05%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"),radial-gradient(ellipse at 30% 20%,#fff 0%,rgba(255,255,255,0) 60%);border:12px solid #D9DBE0;outline:1px solid #B7BAC2;outline-offset:-1px;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 2px 10px rgba(0,0,0,.08);overflow:hidden;touch-action:none;url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20transform%3D%22rotate%2840%2020%2020%29%22%3E%3Cpath%20d%3D%22M20%2039%20L18.2%2033.5%20L21.8%2033.5%20Z%22%20fill%3D%22%23111%22/%3E%3Cpath%20d%3D%22M17.2%2033.6%20L18.2%2027%20H21.8%20L22.8%2033.6%20Z%22%20fill%3D%22%232B2B2F%22/%3E%3Crect%20x%3D%2217.4%22%20y%3D%223%22%20width%3D%225.2%22%20height%3D%2224.5%22%20rx%3D%222.6%22%20fill%3D%22%23141416%22/%3E%3Crect%20x%3D%2218.2%22%20y%3D%2212%22%20width%3D%223.6%22%20height%3D%225.5%22%20rx%3D%221.2%22%20fill%3D%22%233A3A40%22/%3E%3Crect%20x%3D%2218.3%22%20y%3D%225%22%20width%3D%221%22%20height%3D%2220%22%20rx%3D%22.5%22%20fill%3D%22%23fff%22%20opacity%3D%22.22%22/%3E%3C/g%3E%3C/svg%3E") 11 37, crosshair}
.pad::after{content:"";position:absolute;left:8%;right:8%;bottom:-12px;height:10px;background:#C7C9CF;border-radius:0 0 6px 6px;pointer-events:none}
.pad canvas{position:absolute;inset:0;width:100%;height:100%}
.pad .hint{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:18px;color:#8A8792;pointer-events:none;transition:opacity .6s var(--ease)}
.pad.used .hint{opacity:0}
.pad .gauge{position:absolute;left:16px;bottom:12px;display:flex;align-items:center;gap:12px;pointer-events:none}
.pad .bars{display:flex;align-items:flex-end;gap:3px;height:26px}
.pad .bars i{display:block;width:5px;border-radius:2px;background:#DAD8DF;transition:background-color .12s}
.pad .bars i.on{background:#15131B}
.pad .bars i.on.hot{background:var(--magenta)}
.pad .lvl{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#55525E;font-variant-numeric:tabular-nums;min-width:15ch;line-height:1.25}
.pad .gauge{right:118px}
.pad .lvl b{color:#15131B;font-weight:500}
.pad .lvl em{font-style:normal;color:#9A5AA8;margin-left:6px}
.pad .clear{position:absolute;right:14px;bottom:10px;background:#fff;border:1px solid #C9C7D0;color:#2A2733;border-radius:999px;padding:8px 14px;font:500 .72rem 'Kanit';letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s}
.pad .clear:hover{background:#EFEDF3}
.pad-col{display:flex;flex-direction:column;gap:30px}
.palette{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:999px;background:rgba(var(--canvas-rgb),.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.09);align-self:center}
.palette .lab{color:var(--ink-2);margin-right:6px;line-height:1}
.sw{position:relative;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.22);background:var(--c);cursor:pointer;padding:0;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease)}
.sw:hover{transform:scale(1.12)}
.sw[aria-checked="true"]{box-shadow:0 0 0 3px var(--canvas),0 0 0 5px #F5F5F7;transform:scale(1.08)}
.sw.custom{background:conic-gradient(#D7263D,#E0701E,#F2C230,#1E9E6A,#14A3C7,#1F4FD8,var(--violet),var(--magenta),#D7263D);overflow:hidden}
.sw.custom input{position:absolute;inset:-6px;opacity:0;cursor:pointer;width:calc(100% + 12px);height:calc(100% + 12px);border:0;padding:0}
@media (pointer:coarse){.sw{width:34px;height:34px}}
@media (max-width:560px){.palette{border-radius:22px;gap:6px;padding:10px 12px}.palette .lab{flex-basis:100%;text-align:center;margin:0 0 4px}.sw{width:29px;height:29px}.pad{aspect-ratio:4/3}.pad .bars{gap:2px}.pad .bars i{width:3px}.pad .lvl{min-width:0}.pad .gauge{gap:8px}}
@media (max-width:860px){.tryit{grid-template-columns:1fr}}

/* ===== BLOG teaser ===== */
.bl{padding:clamp(80px,9vw,140px) clamp(16px,3vw,40px) clamp(20px,3vw,40px);max-width:1400px;margin:0 auto}
.bl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.bl-head .mono{color:#E9A7E4;display:block;margin-bottom:12px}
.bl-head .big-h{font-size:clamp(2.8rem,9vw,130px)}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:980px){.bl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bl-grid{grid-template-columns:1fr}}
.bl-card{display:flex;flex-direction:column;text-decoration:none;background:var(--panel);border:1px solid rgba(215,226,234,.1);border-radius:clamp(24px,2.6vw,36px);overflow:hidden;transition:opacity .8s var(--ease),transform .45s var(--ease-out),border-color .4s var(--ease),box-shadow .45s var(--ease)}
.bl-card:hover,.bl-card.in:hover{transform:translateY(-4px);border-color:rgba(224,79,214,.45);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 40px rgba(182,0,168,.15)}
.bl-cover{aspect-ratio:16/9;overflow:hidden;background:#fff}
.bl-cover img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.bl-card:hover .bl-cover img{transform:scale(1.04)}
.bl-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.bl-body .mono{color:#E9A7E4}
.bl-body h3{font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.2;color:#fff}
.bl-body p{color:var(--ink-2);line-height:1.55;font-size:.98rem}
.bl-more{margin-top:auto;color:#fff;font-weight:500;font-size:.92rem}
.bl-more span{display:inline-block;transition:transform .3s var(--ease-out)}
.bl-card:hover .bl-more span{transform:translateX(4px)}

/* ===== PROJECTS ===== */
.projects{padding:clamp(100px,10vw,160px) clamp(16px,3vw,40px) 60px}
.projects .big-h{text-align:center;margin-bottom:clamp(40px,5vw,80px)}
.card-wrap{height:85vh;min-height:620px;position:relative}
.card{position:sticky;top:clamp(80px,9vw,128px);border:2px solid var(--ink);background:var(--canvas);border-radius:clamp(40px,4vw,60px);padding:clamp(16px,2vw,32px);transform-origin:top center;will-change:transform;max-width:1400px;margin:0 auto}
.card .row1{display:flex;align-items:center;gap:clamp(14px,2vw,32px);flex-wrap:wrap;padding:0 8px 18px}
.card .num{font-weight:900;font-size:clamp(3rem,7vw,110px);line-height:.85}
.card .meta{flex:1;min-width:200px}
.card .meta .mono{color:var(--ink-2)}
.card h3{font-weight:500;text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,2.1rem);line-height:1.1;margin-top:6px}
.grid2{display:grid;grid-template-columns:40% 1fr;gap:clamp(10px,1.2vw,16px)}
.grid2 .col{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.grid2 figure{border-radius:clamp(28px,3.2vw,50px);overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#2A1838 0%,#15111C 70%)}
.grid2 img{width:100%;height:100%;object-fit:cover}
.grid2 figure.art img{object-fit:contain;padding:5%}
.grid2 .a{height:clamp(130px,15vw,230px)}.grid2 .b{height:clamp(160px,20vw,330px)}
.grid2 .t{height:calc(clamp(130px,15vw,230px) + clamp(160px,20vw,330px) + clamp(10px,1.2vw,16px))}
@media (max-width:720px){.card-wrap{height:auto;min-height:0;margin-bottom:24px}.card{position:relative;top:auto;transform:none!important}}

/* ===== RENCONTRES (polaroid rail) ===== */
.meet{position:relative;padding:clamp(80px,9vw,140px) 0 clamp(30px,4vw,60px)}
.meet-head{max-width:1400px;margin:0 auto clamp(26px,3vw,44px);padding:0 clamp(20px,3vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.meet-head .mono{color:#E9A7E4;display:block;margin-bottom:12px}
.meet-head .big-h{font-size:clamp(2.4rem,7vw,108px)}
.meet-title .heart3d{display:inline-block;height:1.05em;width:auto;vertical-align:-.12em;margin-left:.06em;filter:drop-shadow(0 0 18px rgba(240,95,214,.55)) drop-shadow(0 0 42px rgba(182,0,168,.35));animation:heartBeat 2.8s ease-in-out infinite;transform-origin:50% 60%}
@keyframes heartBeat{0%,100%{transform:scale(1) rotate(-6deg)}12%{transform:scale(1.12) rotate(-4deg)}24%{transform:scale(.98) rotate(-6deg)}36%{transform:scale(1.07) rotate(-5deg)}50%{transform:scale(1) rotate(-6deg)}}
.meet-nav{display:flex;gap:10px}
.mbtn{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(215,226,234,.35);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out)}
.mbtn:hover{background:rgba(224,79,214,.14);border-color:#E04FD6;transform:translateY(-2px)}
.mbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.meet-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);outline:none}
.meet-rail::-webkit-scrollbar{display:none}
.meet-rail.drag{scroll-snap-type:none}
.meet-rail.drag .pol{pointer-events:none}
.meet-track{display:flex;gap:clamp(22px,3vw,44px);width:max-content;padding:34px max(clamp(20px,3vw,40px),calc((100vw - 1400px)/2 + 40px)) 50px}
.pol{flex:none;width:clamp(230px,24vw,330px);margin:0;padding:12px 12px 0;background:#F6F3F8;border-radius:6px;scroll-snap-align:center;transform:rotate(var(--r,0deg));box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease)}
.pol:nth-child(even){margin-top:26px}
.pol::before{content:"";position:absolute;left:50%;top:-12px;width:78px;height:24px;transform:translateX(-50%) rotate(calc(var(--r,0deg) * -1.4));background:rgba(233,167,228,.55);box-shadow:0 1px 3px rgba(0,0,0,.2);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pol{position:relative}
.pol:hover{transform:rotate(0deg) scale(1.04) translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 40px rgba(182,0,168,.28);z-index:2}
.pol .ph{aspect-ratio:1/1;overflow:hidden;border-radius:2px;background:#1A1622}
.pol img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;transition:transform .8s var(--ease-out)}
.pol:hover img{transform:scale(1.05)}
.pol figcaption{padding:14px 4px 18px;color:#1A1622;text-align:center}
.pol figcaption b{display:block;font-weight:700;font-size:1.02rem;line-height:1.2}
.pol figcaption span{display:block;margin-top:4px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#7A4B88}
@media (max-width:640px){.mbtn{width:44px;height:44px}.pol{width:72vw}.pol:nth-child(even){margin-top:16px}}
@media (prefers-reduced-motion:reduce){.pol,.pol:hover{transition:none}}

/* ===== PARTNERS STRIP ===== */
.partners{position:relative;padding:clamp(50px,6vw,90px) 0 clamp(40px,5vw,70px);overflow:hidden}
.partners .lead{text-align:center;color:var(--ink-2);margin-bottom:clamp(26px,3vw,40px)}
.partners .viewport{position:relative;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.partners .viewport::before,.partners .viewport::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,167,228,.25),transparent)}
.partners .viewport::before{top:0}.partners .viewport::after{bottom:0}
.p-track{display:flex;width:max-content;animation:pscroll 38s linear infinite}
.partners:hover .p-track{animation-play-state:paused}
.p-set{display:flex;align-items:center;gap:clamp(56px,7vw,110px);padding:clamp(22px,2.6vw,34px) clamp(28px,3.5vw,55px);list-style:none;margin:0}
.p-set li{flex:none;display:flex;align-items:center}
.p-set img{height:clamp(46px,5.2vw,74px);width:auto;opacity:.85;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));transition:opacity .35s var(--ease),transform .45s var(--ease-out)}
.p-set img.wac{height:clamp(30px,3.4vw,48px)}
.p-set img.pc{height:clamp(40px,4.4vw,62px)}
.p-set li:hover img{opacity:1;transform:scale(1.06)}
@keyframes pscroll{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.p-track{width:auto;justify-content:center}.p-set{flex-wrap:wrap;justify-content:center;row-gap:30px}.p-set[aria-hidden],.p-set li[aria-hidden]{display:none}.partners .viewport{-webkit-mask-image:none;mask-image:none}}

/* ===== QUOTES ===== */
.quotes{padding:clamp(80px,9vw,140px) clamp(20px,3vw,40px);max-width:1400px;margin:0 auto}
.quotes .lead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,60px)}
.quotes .lead h2{font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,5vw,5rem);line-height:.95}
.stars{color:#E07A2E;letter-spacing:.2em}
/* vertical testimonials marquee (vanilla port of "Vertical Testimonials Marquee") */
.tm-wall{position:relative;height:clamp(520px,68vh,680px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%)}
.tm-l{display:none;height:100%;gap:clamp(14px,1.6vw,22px)}
.tm-static{display:grid;grid-template-columns:repeat(3,1fr);align-content:center}
@media (max-width:900px){.tm-static{grid-template-columns:1fr}}
.tm-wall.built .tm-static{display:none}
.tm-wall:not(.built){height:auto;-webkit-mask-image:none;mask-image:none}
.tm-wall.built .tm-3{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:1023px){.tm-wall.built .tm-3{display:none}.tm-wall.built .tm-2{display:grid;grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.tm-wall.built .tm-2{display:none}.tm-wall.built .tm-1{display:grid;grid-template-columns:1fr}}
.tm-col{height:100%;overflow:hidden}
.tm-track{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);animation:tmUp var(--d,34s) linear infinite;will-change:transform}
.tm-col.rev .tm-track{animation-direction:reverse}
.tm-wall:hover .tm-track{animation-play-state:paused}
.tm-track>.tm:nth-last-child(1){margin-bottom:0}
@keyframes tmUp{to{transform:translate3d(0,calc(-50% - clamp(7px,.8vw,11px)),0)}}
.tm{margin:0;background:var(--panel);border:1px solid rgba(215,226,234,.1);border-radius:24px;padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:14px;transition:border-color .4s var(--ease),transform .4s var(--ease-out)}
.tm:hover{border-color:rgba(224,79,214,.45);transform:translateY(-2px)}
.tm-top{display:flex;align-items:center;gap:12px}
.tm-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff;background:var(--grad-cta);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.tm-ph .tm-av{background:#2A2536;color:var(--ink-2)}
.tm-top figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-top b{font-weight:500;color:#fff}
.tm-top figcaption span{color:var(--ink-2);font-size:.86rem;line-height:1.3}
.tm-ex{margin-left:auto;flex:none;align-self:flex-start;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#E9A7E4;border:1px dashed rgba(233,167,228,.5);border-radius:999px;padding:4px 9px}
.tm-stars{color:#E07A2E;letter-spacing:.18em;font-size:.85rem}
.tm blockquote{font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.6;font-weight:300;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tm-wall{height:auto;-webkit-mask-image:none;mask-image:none}.tm-track{animation:none}.tm-track>.dup{display:none}.tm-l{height:auto}}

/* ===== BOOK ===== */
.book{position:relative;padding:clamp(80px,9vw,140px) clamp(20px,3vw,40px) clamp(60px,6vw,100px);overflow:hidden}
.book-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:start}
.book h2{font-weight:900;text-transform:uppercase;font-size:clamp(2.3rem,5.6vw,5.9rem);line-height:.92;overflow-wrap:normal}
.book .intro-p{margin-top:24px;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;max-width:40ch}
.contact-list{list-style:none;margin-top:36px;display:grid;gap:14px}
.contact-list li{display:flex;gap:16px;align-items:baseline}
.contact-list .mono{color:var(--ink-2);min-width:90px}
.contact-list a{text-decoration:none;border-bottom:1px solid rgba(215,226,234,.3);transition:border-color .3s}
.contact-list a:hover{border-color:#E04FD6}
form{background:var(--panel);border:1px solid rgba(215,226,234,.1);border-radius:clamp(28px,3vw,44px);padding:clamp(24px,3vw,44px);display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font-size:.95rem;color:var(--ink)}
input,select,textarea{font:300 1rem var(--font);color:var(--ink);background:#0F0D15;border:1px solid #4A4656;border-radius:14px;padding:14px 16px;transition:border-color .3s,box-shadow .3s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:#E04FD6;box-shadow:0 0 0 3px rgba(224,79,214,.2)}
textarea{min-height:130px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{display:inline-flex;cursor:pointer;border:1px solid #4A4656;border-radius:999px;padding:10px 16px;font-size:.92rem;transition:background-color .3s,border-color .3s,color .3s}
.chips input:checked+span{color:#fff}
.chips label:has(input:checked){background:var(--grad-cta);border-color:transparent;color:#fff}
.chips label:has(input:focus-visible){outline:2px solid #E04FD6;outline-offset:2px}
.form-note{color:var(--ink-2);font-size:.88rem;line-height:1.5}
.sent{display:none;text-align:center;padding:30px 10px}
form.done .field{display:none}
form.done .sent{display:block}
.sent h3{font-weight:700;text-transform:uppercase;font-size:1.6rem;margin-bottom:10px}
@media (max-width:860px){.book-inner{grid-template-columns:1fr}.f2{grid-template-columns:1fr}}

/* ===== CLIP STUDIO PAINT ===== */
.csp{position:relative;padding:clamp(90px,10vw,150px) clamp(16px,3vw,40px) clamp(40px,5vw,80px)}
.csp-card{position:relative;max-width:1280px;margin:0 auto;border-radius:clamp(36px,4vw,60px);padding:clamp(40px,5.5vw,84px) clamp(24px,5vw,80px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,48px);align-items:center;
  background:radial-gradient(ellipse 70% 60% at 78% 55%,rgba(182,0,168,.28),transparent 70%),linear-gradient(180deg,#0E0719 0%,#2A0B4A 45%,#5A0E97 80%,#7A12B8 100%);
  box-shadow:0 0 0 1px rgba(233,167,228,.14) inset,0 30px 90px rgba(118,33,176,.45),0 0 140px rgba(182,0,168,.18)}
.csp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.csp-copy{position:relative;z-index:2}
.csp-copy .mono{color:#E9A7E4}
.csp-copy h2{margin-top:16px;font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;font-size:clamp(2.1rem,4.6vw,4.4rem);background:linear-gradient(100deg,var(--dg-pink) 0%,#C45BEA 45%,#8B6CFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 30px rgba(182,0,168,.35))}
.csp-copy h3{margin-top:18px;font-weight:700;font-size:clamp(1.2rem,1.9vw,1.7rem);line-height:1.2;color:#fff}
.csp-copy>p{margin-top:16px;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;color:var(--ink);max-width:48ch}
.csp-feats{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.csp-feat{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(12,6,24,.38);border:1px solid rgba(233,167,228,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .4s var(--ease-out),border-color .4s var(--ease)}
.csp-feat:hover{transform:translateY(-3px);border-color:rgba(233,167,228,.4)}
.csp-feat svg{flex:none;width:26px;height:26px;stroke:#F2A6EC;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.csp-feat b{display:block;font-weight:500;color:#fff;font-size:1rem}
.csp-feat span{display:block;color:#C9C3D6;font-size:.88rem;line-height:1.4;margin-top:2px}
.csp-checks{list-style:none;margin-top:24px;display:grid;gap:10px}
.csp-checks li{display:flex;gap:10px;align-items:center;font-size:clamp(.98rem,1.2vw,1.08rem);color:#fff}
.csp-checks li::before{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23B600A8'/%3E%3Cpath d='M5.5 10.4l3 3 6-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.csp-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.csp-copy>p.csp-note{margin-top:16px;color:#B9B2C8;font-size:.8rem;line-height:1.5;max-width:52ch}
.csp-art{position:relative;z-index:1;align-self:stretch;min-height:clamp(380px,40vw,560px)}
.csp-art .lines{position:absolute;left:var(--cx,36%);top:var(--cy,46%);width:170%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.5;-webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 18%,transparent 62%);animation:spin 90s linear infinite}
.csp-art .halo{position:absolute;left:var(--cx,36%);top:var(--cy,46%);width:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(242,166,236,.45),rgba(182,0,168,.18) 45%,transparent 70%);filter:blur(10px);animation:pulse2 6s ease-in-out infinite}
.csp-art .girl{position:absolute;left:50%;bottom:-6%;width:min(118%,520px);max-width:none;transform:translate(-50%,var(--gy,0px));filter:drop-shadow(0 30px 50px rgba(20,0,40,.55))}
.csp-art .girl img{width:100%;height:auto;animation:floatG 7s ease-in-out infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pulse2{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes floatG{50%{transform:translateY(-14px) rotate(-1.5deg)}}
@media (max-width:900px){.csp-card{grid-template-columns:1fr;padding-top:0}.csp-art{order:-1;min-height:0;height:clamp(300px,78vw,440px);margin-top:clamp(-40px,-6vw,-20px)}.csp-art .girl{width:min(72vw,360px);bottom:calc(-1 * clamp(80px,26vw,120px))}.csp-art{--cy:56%;--cx:53%}.csp-copy{text-align:left}}
@media (max-width:560px){.csp-feats{grid-template-columns:1fr}.csp-cta .btn{width:100%;letter-spacing:.12em;line-height:1.35;padding:1em 1.4em;text-align:center}}

/* ===== QUOTE (Van Gogh) ===== */
.vg{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;overflow:hidden;isolation:isolate;margin-top:clamp(20px,4vw,60px)}
.vg-layers{position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 78%,transparent 100%)}
.vg-bg{position:absolute;inset:-6% 0;transform:translate3d(0,var(--vy,0px),0) scale(1.08)}
.vg-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 22%;filter:contrast(1.04) brightness(.96)}
.vg-tint{position:absolute;inset:0;pointer-events:none;
  background:
   linear-gradient(to right,rgba(var(--canvas-rgb),.82) 0%,rgba(var(--canvas-rgb),.45) 42%,rgba(var(--canvas-rgb),.05) 70%),
   linear-gradient(170deg,rgba(40,70,210,.12) 0%,rgba(118,33,176,.2) 50%,rgba(182,0,168,.3) 78%,rgba(190,76,0,.35) 100%)}
.vg-tint::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);background-size:250% 100%;animation:sweep 14s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sweep{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
.vg-in{position:relative;width:100%;max-width:1280px;margin:0 auto;padding:clamp(80px,10vw,140px) clamp(20px,4vw,48px)}
.vg h2{max-width:11ch;font-weight:900;text-transform:uppercase;line-height:.95;font-size:clamp(2.2rem,5vw,4.6rem);letter-spacing:-.01em;color:#fff;text-shadow:0 4px 30px rgba(5,4,10,.5)}
.vg blockquote{position:relative;margin-top:clamp(28px,3vw,44px);max-width:34ch;font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.5;font-weight:300;color:#fff;text-shadow:0 2px 16px rgba(5,4,10,.6)}
.vg .qmark{display:block;width:clamp(40px,4vw,58px);height:auto;margin-bottom:14px}
.vg figcaption{margin-top:24px}
.vg figcaption b{display:block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;color:#fff}
.vg figcaption span{display:block;margin-top:6px;color:#D5CFE0;font-size:.95rem}
@media (max-width:720px){.vg{align-items:flex-end}.vg-bg img{object-position:74% 30%}.vg-tint{background:linear-gradient(to bottom,rgba(var(--canvas-rgb),0) 30%,rgba(var(--canvas-rgb),.3) 48%,rgba(var(--canvas-rgb),.85) 80%,rgba(var(--canvas-rgb),.9) 100%),linear-gradient(170deg,rgba(40,70,210,.12) 0%,rgba(118,33,176,.2) 50%,rgba(182,0,168,.3) 78%,rgba(190,76,0,.35) 100%)}.vg-in{padding-top:40vh}}

/* ===== custom cursor: Pro Pen nib + discreet pink neon glow (mouse / trackpad only) ===== */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate%2845 16 16%29'%3E%3Crect x='12.8' y='1.5' width='6.4' height='19.5' rx='3.2' fill='%231B1A21' stroke='%23F4EEF8' stroke-width='1.1'/%3E%3Crect x='13.6' y='8' width='4.8' height='4' rx='1.2' fill='%233A3942'/%3E%3Cpath d='M13.1 21.2 L18.9 21.2 L16.9 27.4 L15.1 27.4 Z' fill='%232C2B33' stroke='%23F4EEF8' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M15.1 27.4 L16.9 27.4 L16 30.2 Z' fill='%23FF5FDC' stroke='%23F4EEF8' stroke-width='.8' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 6 26,auto}
  a,button,label,summary,[role="radio"],[role="button"],select{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate%2845 16 16%29'%3E%3Crect x='12.8' y='1.5' width='6.4' height='19.5' rx='3.2' fill='%231B1A21' stroke='%23F4EEF8' stroke-width='1.1'/%3E%3Crect x='13.6' y='8' width='4.8' height='4' rx='1.2' fill='%233A3942'/%3E%3Cpath d='M13.1 21.2 L18.9 21.2 L16.9 27.4 L15.1 27.4 Z' fill='%232C2B33' stroke='%23F4EEF8' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M15.1 27.4 L16.9 27.4 L16 30.2 Z' fill='%23FF5FDC' stroke='%23F4EEF8' stroke-width='.8' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 6 26,pointer}
  input,textarea{cursor:text}
}
.cglow,.cdot{position:fixed;left:0;top:0;pointer-events:none;z-index:70;opacity:0;transition:opacity .35s var(--ease)}
.cglow{width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;background:radial-gradient(circle,rgba(240,95,214,.26) 0%,rgba(182,0,168,.11) 32%,rgba(118,33,176,.04) 55%,transparent 70%);mix-blend-mode:screen;will-change:transform}
.cglow i{position:absolute;inset:0;border-radius:50%;transform:scale(var(--s,1));transition:transform .45s var(--ease-out)}
.cdot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFD6F6;box-shadow:0 0 6px 2px rgba(255,95,220,.75),0 0 16px 4px rgba(182,0,168,.45);will-change:transform}
.cur-on .cglow{opacity:1}.cur-on .cdot{opacity:.9}
.cur-hot .cglow{opacity:1;filter:brightness(1.35)}
.cur-pad .cglow,.cur-pad .cdot,.cur-text .cdot{opacity:0!important}

/* ===== FOOTER ===== */
footer{position:relative;overflow:hidden;padding:50px clamp(20px,3vw,40px) 40px}
/* "Wavy background" (vanilla port): blurred neon waves under the DIGITAL GEAR wordmark */
.fstage{position:relative;margin:60px calc(-1 * clamp(20px,3vw,40px)) 26px;padding:0 clamp(20px,3vw,40px)}.fstage .giant{margin:0 auto}.fwaves{position:absolute;z-index:0;left:0;right:0;top:50%;height:clamp(170px,22vw,320px);transform:translateY(-50%);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%),linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%),linear-gradient(to right,transparent 0,#000 22%,#000 78%,transparent 100%);mask-composite:intersect}
.fwaves canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .logo{display:flex;align-items:center;gap:14px}
.foot .logo img{width:clamp(64px,6vw,84px);height:auto;filter:drop-shadow(0 0 22px rgba(182,0,168,.25));transition:transform .5s var(--ease-out)}
.foot .logo:hover img{transform:rotate(-6deg) scale(1.05)}
.foot .logo b{font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.foot nav{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;align-items:baseline}
.foot nav a{position:relative;padding-bottom:6px;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1;font-size:clamp(1.15rem,1.7vw,1.6rem);background:linear-gradient(180deg,#8A8F9A 0%,#C9D5DE 50%,#D6A6DA 80%,#E26BD8 108%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:filter .35s,transform .35s var(--ease-out)}
.foot nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--dg-pink),#8B6CFF);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.foot nav a:hover,.foot nav a:focus-visible{background-image:linear-gradient(100deg,var(--dg-pink) 0%,#C45BEA 50%,#8B6CFF 100%);filter:drop-shadow(0 0 14px rgba(240,112,200,.45));transform:translateY(-2px)}
.foot nav a:hover::after,.foot nav a:focus-visible::after{transform:scaleX(1)}
@media (max-width:640px){.foot nav{gap:14px 22px}}
.legal{position:relative;z-index:1;max-width:1400px;margin:34px auto 0;color:#7F8794;font-size:.82rem;line-height:1.6}
.giant{position:relative;z-index:1;display:block;width:min(92%,1300px);height:auto;margin:60px auto 0;opacity:.95;user-select:none}

/* generic reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv,.svc,.prod,.q,.deco{opacity:1!important;transform:none!important}
  .deco.d2,.deco.d4{transform:none!important}
  .reveal-text .c{color:var(--ink)!important;text-shadow:none!important}
  .card{transform:none!important}
  .track{transform:none!important}
}
/* ---- hero scroll animation on phones & portrait tablets ---- */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px){
  .hero{height:560vh}
  .stage::after{background:linear-gradient(to bottom,rgba(var(--canvas-rgb),0) calc(100% - 38svh),rgba(var(--canvas-rgb),.25) calc(100% - 28svh),rgba(var(--canvas-rgb),.6) calc(100% - 17svh),rgba(var(--canvas-rgb),.9) calc(100% - 7svh),var(--canvas) 100%),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 45%,rgba(0,0,0,.75) 100%)}
  .tab3d{top:38%;height:min(52svh,118vw)}
  .pen{width:min(44vw,300px)}
  .b-left,.b-settle{left:clamp(18px,5vw,40px);right:clamp(18px,5vw,40px);top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 5svh);transform:none;width:auto;text-align:left}
  .band::before{display:block;inset:-35% -30% -40%;background:radial-gradient(ellipse 70% 60% at 50% 60%,rgba(5,5,10,.8) 0%,rgba(5,5,10,.55) 50%,rgba(5,5,10,0) 80%)}
  .band .kick{margin-bottom:.7rem;font-size:.68rem}
  .band h2{font-size:clamp(1.45rem,6.6vw,2.4rem)}
  .b-settle h2{font-size:clamp(1.9rem,9.5vw,3.2rem)}
  .band p{margin-top:.7rem;font-size:.95rem;max-width:34ch}
  .b-settle .row{margin-top:1.1rem;gap:10px}
  .b-settle .row .btn{padding:12px 18px;font-size:.78rem}
}

/* ---- faster first display on phones and touch screens ---- */
@media (max-width:720px),(pointer:coarse){
  body{animation:none}
  .stage-bg::after{animation:none}
  .intro-name h1 .ch{animation-duration:.6s;animation-delay:0s!important}
  .intro-bottom p,.intro-bottom .btn{animation-duration:.5s;animation-delay:.1s}
  .portrait-wrap img{animation-duration:.6s;animation-delay:0s}
  .dg-mark img{animation:dgIn .7s var(--ease-out) both,dgFloat 9s ease-in-out -3s infinite}
  .rv,.svc,.prod{transition-duration:.5s!important}
  .rv{transform:translateY(16px)}
}

/* ---- WordPress ---- */
[hidden]{display:none!important}
.admin-bar .nav{top:calc(env(safe-area-inset-top,0px) + 46px)}
@media (min-width:783px){.admin-bar .nav{top:calc(env(safe-area-inset-top,0px) + 46px)}}
.dg-form-embed{color:var(--ink)}

/* ---- WPForms in the contact section: same look as the built-in form ---- */
.dg-form-embed .wpforms-container{margin:0!important;--wpforms-field-border-radius:14px;--wpforms-field-background-color:#0F0D15;--wpforms-field-border-color:#4A4656;--wpforms-field-border-color-spare:#4A4656;--wpforms-field-text-color:#D7E2EA;--wpforms-label-color:#D7E2EA;--wpforms-label-sublabel-color:#9AA4B1;--wpforms-label-error-color:#F27979;--wpforms-button-border-radius:999px;--wpforms-button-background-color:#B600A8;--wpforms-button-text-color:#fff;--wpforms-field-size-input-height:50px;--wpforms-field-size-font-size:16px;--wpforms-label-size-font-size:15px;--wpforms-container-padding:0;--wpforms-background-color:transparent}
.dg-form-embed .wpforms-form{display:block!important;background:var(--panel)!important;border:1px solid rgba(215,226,234,.1)!important;border-radius:clamp(28px,3vw,44px)!important;padding:clamp(24px,3vw,44px)!important}
.dg-form-embed label{display:block}
.dg-form-embed .wpforms-field{padding:9px 0!important}
.dg-form-embed .wpforms-field-label{font-family:var(--font)!important;font-weight:400!important;font-size:.95rem!important;color:var(--ink)!important;margin:0 0 8px!important}
.dg-form-embed .wpforms-required-label{color:#E04FD6!important}
.dg-form-embed input[type=text],.dg-form-embed input[type=email],.dg-form-embed input[type=tel],.dg-form-embed textarea,.dg-form-embed select{font:300 1rem var(--font)!important;color:var(--ink)!important;background:#0F0D15!important;border:1px solid #4A4656!important;border-radius:14px!important;padding:14px 16px!important;height:auto!important;max-width:100%!important;width:100%!important;box-shadow:none!important}
.dg-form-embed input::placeholder,.dg-form-embed textarea::placeholder{color:#6F6A7C!important}
.dg-form-embed input:focus,.dg-form-embed textarea:focus{border-color:#E04FD6!important;box-shadow:0 0 0 3px rgba(224,79,214,.2)!important;outline:none!important}
.dg-form-embed textarea{min-height:130px!important;resize:vertical}
.dg-form-embed .wpforms-field-radio ul,.dg-form-embed .wpforms-field-checkbox ul{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important;padding:0!important;list-style:none!important}
.dg-form-embed .wpforms-field-radio li,.dg-form-embed .wpforms-field-checkbox li{margin:0!important;padding:0!important;width:auto!important;display:block!important;position:relative}
.dg-form-embed .wpforms-field-radio li input,.dg-form-embed .wpforms-field-checkbox li input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important}
.dg-form-embed .wpforms-field-radio li label,.dg-form-embed .wpforms-field-checkbox li label{display:inline-flex!important;cursor:pointer;border:1px solid #4A4656;border-radius:999px;padding:10px 16px!important;margin:0!important;font:400 .92rem var(--font)!important;color:var(--ink)!important;transition:background-color .3s,border-color .3s,color .3s}
.dg-form-embed .wpforms-field-radio li label::before,.dg-form-embed .wpforms-field-radio li label::after,.dg-form-embed .wpforms-field-checkbox li label::before,.dg-form-embed .wpforms-field-checkbox li label::after{display:none!important}
.dg-form-embed .wpforms-field-radio li input:checked+label,.dg-form-embed .wpforms-field-checkbox li input:checked+label{background:var(--grad-cta);border-color:transparent;color:#fff!important}
.dg-form-embed .wpforms-field-radio li input:focus-visible+label,.dg-form-embed .wpforms-field-checkbox li input:focus-visible+label{outline:2px solid #E04FD6;outline-offset:2px}
.dg-form-embed .wpforms-submit-container{padding-top:14px!important;margin:0!important}
.dg-form-embed button.wpforms-submit{display:inline-flex!important;align-items:center;justify-content:center;height:auto!important;min-height:48px;border:0!important;border-radius:999px!important;padding:1.05em 2.6em!important;font:500 clamp(.78rem,1vw,1rem)/1 var(--font)!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:#fff!important;background:var(--grad-cta)!important;box-shadow:0 4px 4px rgba(181,1,167,.25),inset 4px 4px 12px #7721B1!important;outline:2px solid rgba(255,255,255,.9)!important;outline-offset:-3px!important;cursor:pointer;transition:transform .35s var(--ease-out)}
.dg-form-embed button.wpforms-submit:hover{transform:translateY(-2px)}
.dg-form-embed .wpforms-error,.dg-form-embed label.wpforms-error,.dg-form-embed em.wpforms-error{color:#F27979!important;font-size:.85rem!important}
.dg-form-embed .wpforms-confirmation-container-full,.dg-form-embed div[submit-success]>.wpforms-confirmation-container-full{background:var(--panel)!important;border:1px solid rgba(224,79,214,.45)!important;border-radius:clamp(28px,3vw,44px)!important;color:var(--ink)!important;padding:clamp(24px,3vw,44px)!important;font-size:1.05rem;line-height:1.6}
.dg-form-embed .wpforms-confirmation-container-full strong{color:#fff}
@media (max-width:600px){.dg-form-embed .wpforms-one-half{width:100%!important;margin-left:0!important}}

/* ---- Mobile burger menu ---- */
.burger,.mnav-close{width:44px;height:44px;display:none;align-items:center;justify-content:center;flex:none;margin:0;padding:0!important;background:none!important;background-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--btn-ink,#F5F5F7)!important;transform:none!important;transition:color .2s ease;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.burger svg{width:24px;height:24px;fill:currentColor;display:block;pointer-events:none}
.mnav-close svg{width:22px;height:22px;fill:currentColor;display:block;pointer-events:none}
.burger,.burger:focus,.burger:focus-visible,.burger:active,.mnav-close,.mnav-close:focus,.mnav-close:focus-visible,.mnav-close:active{outline:none!important;border:0!important;border-style:none!important;border-width:0!important;box-shadow:none!important;transform:none!important}
@media (hover:hover){.burger:hover,.mnav-close:hover{color:var(--btn-accent,#F070C8)!important}}
.burger:focus-visible,.mnav-close:focus-visible{color:var(--btn-accent,#F070C8)!important}
.mnav{position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);background:rgba(var(--canvas-rgb,0,0,0),.97);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility 0s linear .32s}
.mnav.open{opacity:1;visibility:visible;transition:opacity .32s var(--ease),visibility 0s}
.mnav::before{content:"";position:fixed;left:-30%;right:-30%;bottom:-25%;height:65%;background:radial-gradient(ellipse at 50% 100%,rgba(182,0,168,.34) 0%,rgba(118,33,176,.16) 42%,transparent 70%);pointer-events:none;z-index:-1}
.mnav-top{display:flex;align-items:center;justify-content:space-between;margin:calc(env(safe-area-inset-top,0px) + 14px) 12px 0;min-height:46px;padding:0 0 0 8px;border:1px solid transparent}
.admin-bar .mnav-top{margin-top:calc(env(safe-area-inset-top,0px) + 60px)}
.mnav-top .mnav-close{display:inline-flex}
.mnav-brand{display:flex;align-items:center;padding:2px 4px 2px 3px}
.mnav-brand img{width:24px;height:24px;max-width:none}
.mnav-links{display:flex;flex-direction:column;padding:clamp(24px,6vh,56px) 24px 0}
.mnav-links a{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;font:800 clamp(1.35rem,6.2vw,1.8rem)/1.05 var(--font);text-transform:uppercase;letter-spacing:-.01em;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);-webkit-tap-highlight-color:transparent}
.mnav.open .mnav-links a{opacity:1;transform:none;transition-delay:calc(.05s + var(--i,0) * .045s)}
.mnav-n{flex:none;font:500 .66rem/1 var(--mono);letter-spacing:.14em;color:var(--dg-pink,#F070C8);transform:translateY(-.7em)}
.mnav-t{background:linear-gradient(180deg,#646973 0%,#BBCCD7 48%,#D6A6DA 78%,#E26BD8 104%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--ink)}
.mnav-links a.cur .mnav-t,.mnav-links a:focus-visible .mnav-t{background-image:linear-gradient(100deg,var(--dg-pink,#F070C8) 0%,#C45BEA 45%,#8B6CFF 100%)}
@media (hover:hover){.mnav-links a:hover .mnav-t{background-image:linear-gradient(100deg,var(--dg-pink,#F070C8) 0%,#C45BEA 45%,#8B6CFF 100%)}}
.mnav-links a:focus-visible{outline:none}
.mnav-cta{display:flex;align-items:center;justify-content:center;min-height:54px;margin:30px 24px 0;padding:0 24px;border-radius:999px;text-decoration:none;text-align:center;font:500 .82rem/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--grad-cta);box-shadow:0 4px 4px rgba(181,1,167,.25),inset 4px 4px 12px #7721B1;outline:2px solid rgba(255,255,255,.9);outline-offset:-3px;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.mnav.open .mnav-cta{opacity:1;transform:none;transition-delay:calc(.05s + var(--i,0) * .045s)}
.mnav-soc{display:flex;flex-wrap:wrap;gap:10px 22px;margin:auto 24px 0;padding-top:34px}
.mnav-soc a{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:8px 0;transition:color .2s ease}
@media (hover:hover){.mnav-soc a:hover{color:var(--dg-pink,#F070C8)}}
.mnav-soc a:focus-visible{color:var(--dg-pink,#F070C8);outline:none}
html.mnav-lock,html.mnav-lock body{overflow:hidden}
@media (max-width:720px){
  .nav.has-burger,.nav.has-burger.solid{left:12px;right:12px;width:auto;max-width:none;margin:0;justify-content:space-between;gap:0;padding:0 0 0 8px;background:none;border-color:transparent;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.has-burger::before{content:"";position:absolute;left:-13px;right:-13px;top:calc(-15px - env(safe-area-inset-top,0px));height:calc(100% + 44px + env(safe-area-inset-top,0px));background:linear-gradient(to bottom,rgba(var(--canvas-rgb,0,0,0),.82) 0%,rgba(var(--canvas-rgb,0,0,0),.55) 55%,rgba(var(--canvas-rgb,0,0,0),0) 100%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:-1}
  .nav.has-burger.scrolled::before{opacity:1}
  .nav.has-burger>a:not(.brand){display:none}
  .nav.has-burger .brand{padding:2px 4px 2px 3px}
  .nav.has-burger .brand img{width:24px;height:24px}
  .nav.has-burger .burger{display:inline-flex}
}
@media (min-width:721px){.mnav{display:none!important}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav-links a,.mnav-cta{transition:opacity .01s linear,visibility 0s!important;transform:none!important}}

/* ---- hero first name: polished chrome, crisp 3D extrusion and soft cast shadow, on EACH letter
   (a filter on the whole word is dropped by Safari on animated letters, and blurs the text on desktop) ---- */
.intro-name h1 .ch{animation-delay:var(--d,0s)}
.intro-name h1 .cm{display:inline-block}
.intro-name:not(.metal) h1 .cm{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.intro-name.metal h1{filter:none}
.intro-name.metal h1 .ch{background:none;-webkit-text-fill-color:currentColor}
.intro-name.metal h1 .cm{
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 41%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.3) 54%,rgba(255,255,255,0) 59%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#ffffff 0%,#eceef1 16%,#cdd1d6 36%,#a3a9b0 48%,#8b9199 53%,#a4aab1 62%,#d3d6da 82%,#eef0f2 100%);
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 41%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.3) 54%,rgba(255,255,255,0) 59%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#fff 0%,var(--m1,#f4f5f7) 14%,color-mix(in srgb,var(--m1,#f4f5f7) 62%,var(--m2,#80868e)) 36%,color-mix(in srgb,var(--m1,#f4f5f7) 22%,var(--m2,#80868e)) 48%,var(--m2,#80868e) 53%,color-mix(in srgb,var(--m1,#f4f5f7) 28%,var(--m2,#80868e)) 62%,color-mix(in srgb,var(--m1,#f4f5f7) 70%,var(--m2,#80868e)) 82%,var(--m1,#f4f5f7) 100%);
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(1px 2px 0 #5d6269) drop-shadow(1px 2px 0 #3f4348) drop-shadow(1px 2px 0 #26292d) drop-shadow(2px 14px 18px rgba(0,0,0,.6))}
.intro-name.metal.shine h1 .cm{animation:dgShine 1.1s cubic-bezier(.45,.05,.35,1) calc(var(--i,0) * .08s) 1 both}
@keyframes dgShine{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}
@media (max-width:720px),(pointer:coarse){
  .intro-name.metal h1 .cm{filter:drop-shadow(1px 1px 0 #4f545a) drop-shadow(1px 1px 0 #2a2d31) drop-shadow(1px 6px 8px rgba(0,0,0,.65))}
}
@media (prefers-reduced-motion:reduce){.intro-name.metal.shine h1 .cm{animation:none}}

/* ---- cookie banner ---- */
.dg-consent{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:auto;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:70;width:min(420px,calc(100vw - 24px));background:rgba(22,19,29,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(215,226,234,.14);border-radius:22px;padding:18px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.55);color:var(--ink);font-family:var(--font);opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.dg-consent.on{opacity:1;transform:none}
.dg-consent b{display:block;color:#fff;font-weight:600;font-size:1rem;margin-bottom:6px}
.dg-consent p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.dg-consent p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dg-consent .row{display:flex;gap:10px;margin-top:14px}
.dg-consent button{flex:1;min-height:42px;border-radius:999px;font:500 .78rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(215,226,234,.4);background:transparent;color:var(--ink)}
.dg-consent button[data-consent="yes"]{border:0;color:#fff;background:var(--grad-cta)}
.dg-consent button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.legal-links{max-width:1200px;margin:10px auto 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem}
.legal-links a{color:#9AA4B1;text-decoration:none}
.legal-links a:hover,.legal-links a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.dg-consent{transition:none}}

/* ---- phones: lighter rendering ---- */
@media (max-width:720px),(pointer:coarse){
  /* live blur behind elements is recalculated on every frame of the animated hero: replaced by denser backgrounds */
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .intro-bottom p{background:rgba(var(--canvas-rgb),.74)}
  .palette{background:rgba(var(--canvas-rgb),.72)}
  .csp-feat{background:rgba(12,6,24,.72)}
  /* sections far down the page are only laid out and painted when they approach the screen */
  .projects,.meet,.partners,.quotes,.book,.vg,.bl,footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
}