@font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-Bold.woff2')format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('fonts/ChakraPetch-SemiBold.woff2')format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-var.woff2')format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Michroma';src:url('fonts/Michroma-Regular.woff2')format('woff2');font-weight:400;font-display:swap}
/* Chakra Petch and Michroma have no Cyrillic, so Russian headings silently fell back
   to whatever font the operating system chose, which differs per platform: the same
   headline measured 214px on Windows and 230px on Linux. Map the Cyrillic range onto
   IBM Plex Sans, which we already ship and which does cover it, so every platform
   renders the same shipped font at the same width. */
@font-face{font-family:'Chakra Petch';src:url('fonts/IBMPlexSans-var.woff2')format('woff2');font-weight:600 700;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F;font-display:swap}
@font-face{font-family:'Michroma';src:url('fonts/IBMPlexSans-var.woff2')format('woff2');font-weight:400;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F;font-display:swap}
:root{
  color-scheme:dark; /* tell auto-darkening browsers (Samsung Internet, Chrome auto-dark) the page is already dark so they don't re-invert it */
  --black:#0E080A; --panel:#1A1013; --panel-2:#221519; --maroon:#76232F;
  --line:rgba(240,234,228,.08); --red:#C8102E; --hot:#C8102E;
  --bone:#F0EAE4; --dim:#A89DA0;
  --display:'Chakra Petch',sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --brand:'Michroma',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
body{background:radial-gradient(1200px 640px at 50% -8%,rgba(118,35,47,.42),transparent 62%),var(--black);color:var(--bone);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}
::selection{background:var(--red);color:var(--bone)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px}
.k{font-family:var(--brand);letter-spacing:.3em;text-transform:uppercase}
.icon{width:1em;height:1em;fill:none;stroke:var(--hot);stroke-width:1.7;vertical-align:-.15em}
.icon-wa{stroke:#25D366}
.wa-float{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));inset-inline-end:calc(22px + env(safe-area-inset-right));z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 22px rgba(37,211,102,.45)}
.wa-float svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.7}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* ---------------- nav ---------------- */
nav{position:sticky;top:0;z-index:50;background:rgba(10,7,8,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;padding:16px 24px;max-width:1180px;margin:0 auto}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px}
.logo b{font-family:var(--brand);font-weight:400;font-size:.82rem;letter-spacing:.26em;display:block}
.logo i{font-family:var(--brand);font-style:normal;font-size:.5rem;letter-spacing:.44em;color:var(--red);display:block;margin-top:3px}
.nav-links{display:flex;gap:22px;margin-inline-start:auto;list-style:none}
.nav-links a{font-size:.74rem;font-weight:600;letter-spacing:.12em;color:var(--dim);transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.on{color:var(--hot)}
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:.08em;padding:13px 26px;border-radius:10px;transition:transform .25s cubic-bezier(.16,1,.3,1),background-color .2s,color .2s,border-color .2s,filter .2s}
.btn-line{border:1px solid var(--red);color:var(--hot)}
.btn-line:hover{background:var(--red);color:var(--bone)}
.btn-red{background:var(--red);color:var(--bone)}
.btn-red:hover{filter:brightness(1.12)}
.nav-cta{margin-inline-start:14px;white-space:nowrap}
.lang{position:relative;margin-inline-start:14px;flex-shrink:0;direction:ltr}
.lang-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.06em;padding:8px 11px;background:transparent;color:var(--bone);border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:all .2s}
.lang-toggle:hover{border-color:var(--red);color:var(--hot)}
.lang-cur{display:inline-flex;align-items:center;gap:6px}
.lang .caret{width:9px;height:6px;color:var(--dim);transition:transform .2s}
.lang.open .caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;display:none;flex-direction:column;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.45);z-index:60}
.lang.open .lang-menu{display:flex}
.lang-menu button{display:inline-flex;align-items:center;gap:7px;width:100%;font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.06em;padding:9px 16px 9px 11px;background:transparent;color:var(--dim);border:0;cursor:pointer;white-space:nowrap;transition:all .2s}
.lang-menu button:hover{background:var(--panel);color:var(--hot)}
.lang-menu button[hidden]{display:none}
.lang .flag{width:18px;height:12px;border-radius:2px;flex-shrink:0;display:block;box-shadow:0 0 0 .5px rgba(255,255,255,.25)}
[dir="rtl"] .lang-menu{right:auto;left:0}
@media(max-width:900px){.nav-links{display:none}.nav-in{gap:12px}.nav-cta{display:none}.lang{margin-inline-start:auto}}

/* ---------------- hero ---------------- */
.hero{position:relative;margin-top:26px;overflow:hidden;min-height:560px;display:flex;align-items:center;background:var(--black)}
.hero-bg{position:absolute;inset:0;background:image-set(url('assets/hero.webp') type('image/webp'),url('assets/hero.jpg') type('image/jpeg')) center right/cover no-repeat}
/* experiment: WebGL ember backdrop layered over the hero photo, under the scrim */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.5}
/* holographic wireframe projection (canvas 2D — works on every browser, no WebGL) */
.holo{position:absolute;z-index:3;right:39%;top:11%;width:120px;height:120px;background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center}
.holo-canvas{width:100%;height:100%;display:block}
.holo:focus-visible{outline:1px solid rgba(255,255,255,.7);outline-offset:12px;border-radius:16px}
/* mobile: hero stacks (image band on top) — float the hologram in that band */
/* stacked layout: center the hologram in the dark negative space to the left of the girl */
@media(max-width:900px){.holo{width:clamp(104px,26vw,180px);height:clamp(104px,26vw,180px);top:88px;left:23%;right:auto;transform:translate(-50%,-50%)}}
/* RTL (Hebrew): the hero image is mirrored, so flip the hologram to the other side */
[dir="rtl"] .holo{right:auto;left:39%}
@media(max-width:900px){[dir="rtl"] .holo{left:77%;right:auto}}
/* interactive particle crown in the contact CTA */
.crown-particles{display:block;width:100%;max-width:340px;aspect-ratio:1;margin-top:20px}
@media(max-width:900px){.crown-particles{max-width:250px;margin:14px auto 0}}
/* founder-experience logos (white monochrome, uniform cells + names) */
.xp-item{display:flex;flex-direction:column;align-items:center;gap:11px;width:88px;text-align:center}
.xp-logo-box{height:36px;display:flex;align-items:center;justify-content:center}
.xp-logo{max-height:34px;max-width:76px;width:auto;object-fit:contain;opacity:.72;transition:opacity .2s,transform .2s}
.xp-item:hover .xp-logo{opacity:1;transform:translateY(-2px)}
.xp-name{font-size:.6rem;letter-spacing:.03em;color:var(--dim);line-height:1.25}
@media(max-width:480px){.xp-item{width:74px}.xp-logo-box{height:30px}.xp-logo{max-height:28px;max-width:62px}}
/* technologies, split into Development / Design columns (white monochrome, compact) */
.about-tech{margin-top:50px}
.tech-head{margin-bottom:28px}
.tech-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 40px;align-items:flex-start;margin-top:14px}
.tech-col{display:flex;flex-direction:column;gap:16px;justify-content:flex-start}
@media(max-width:600px){.tech-cols{flex-direction:column;gap:26px}.tech-col{flex:1 1 auto}.tech-row{justify-content:flex-start}}
.tech-sub{font-size:.58rem;letter-spacing:.14em;color:var(--dim);opacity:.75;text-transform:uppercase}
.tech-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
@media(min-width:601px){.tech-row{justify-content:space-between}}
.tech-ico{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.55;transition:opacity .2s,transform .2s}
.tech-ico:hover{opacity:.95;transform:translateY(-2px)}
@media(max-width:480px){.tech-ico{height:18px}.tech-row{gap:14px}}
/* FAQ */
.faq{margin-top:26px;padding:40px 40px}
.faq-list{max-width:840px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:rgba(200,16,46,.4)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:14px;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.35rem;line-height:1;color:var(--dim);transition:transform .2s,color .2s}
.faq-item[open] summary::after{content:"−";color:var(--red)}
.faq-item summary:hover{color:#fff}
.faq-item p{padding:0 18px 16px;margin:0;color:var(--dim);font-size:.92rem;line-height:1.65}
/* quick win: 44px touch targets for the mobile language control (it's the only nav control on mobile) */
@media(max-width:900px){.lang-toggle{min-height:44px;padding:11px 13px}.lang-menu button{min-height:44px;padding:12px 16px}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,8,10,.97) 0%,rgba(14,8,10,.9) 30%,rgba(14,8,10,.45) 50%,rgba(14,8,10,0) 68%)}
.hero-txt{position:relative;z-index:2;padding:64px 48px;max-width:600px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,8.5vw,3.6rem);line-height:1.06;letter-spacing:.02em}
/* Russian sets the headline as single unbreakable words ("ИНТЕРАКТИВНОЕ"), which
   clip on a 320px screen at the shared size. Only the size drops; wording holds.
   The longest word then measures ~177px in a 214px box, leaving room for the
   slightly different metrics of a fallback face during the font swap. */
html[lang="ru"] .hero h1{font-size:clamp(1.28rem,6.4vw,3.6rem)}
.hero h1 em{font-style:normal;color:var(--hot)}
.hero .plat{margin:22px 0 18px;font-family:var(--body);font-weight:400;font-size:.74rem;letter-spacing:.28em;color:var(--bone)}
.hero .plat s{text-decoration:none;color:var(--hot);padding:0 .4em}
.hero .plat em{font-style:normal;color:var(--dim);letter-spacing:.2em;white-space:nowrap}
.hero p{color:var(--dim);max-width:38ch}
.hero-cta{margin-top:36px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.arrow-link{font-size:.78rem;font-weight:600;letter-spacing:.16em;color:var(--bone)}
.arrow-link:hover{color:var(--hot)}
@media(max-width:900px){
  .hero{display:block;min-height:0}
  .hero-bg{position:relative;inset:auto;height:280px;background-position:66% center}
  .hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,var(--black))}
  .hero-scrim{display:none}
  .hero-txt{padding:28px 28px 44px;max-width:none}
  .hero .plat{letter-spacing:.14em}
  .hero .plat em{white-space:normal;letter-spacing:.06em}
}

/* ---------------- platform cards ---------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.pcard{padding:34px 30px;transition:border-color .25s,transform .25s}
.pcard:hover{border-color:rgba(200,16,46,.55);transform:translateY(-3px)}
.pcard .icon{font-size:2.2rem;display:block;margin-bottom:18px}
.pcard h3{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.08em}
.pcard p{color:var(--dim);font-size:.88rem;margin:10px 0 18px}
.pcard a{font-size:.72rem;font-weight:600;letter-spacing:.18em;color:var(--hot)}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}

/* ---------------- what we do ---------------- */
.wwd{margin-top:26px;padding:40px 40px}
.sec-k{text-align:center;font-family:var(--brand);font-size:.82rem;font-weight:400;margin:0;letter-spacing:.4em;color:var(--bone);position:relative}
.sec-k::before,.sec-k::after{content:"";display:inline-block;width:56px;height:1px;background:var(--red);vertical-align:middle;margin:0 18px}
@media(max-width:600px){.sec-k{font-size:.7rem;letter-spacing:.16em;white-space:nowrap}.sec-k::before,.sec-k::after{width:20px;margin:0 9px}}
.wwd-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:44px;text-align:center}
.wwd-grid .icon{font-size:1.9rem;margin-bottom:14px}
.wwd-grid h4{font-size:.72rem;font-weight:700;letter-spacing:.16em;margin-bottom:10px}
.wwd-grid p{font-size:.8rem;color:var(--dim)}
@media(max-width:900px){.wwd-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------- work ---------------- */
#work{margin-top:26px}
.work-sub{text-align:center;color:var(--dim);font-size:.9rem;max-width:56ch;margin:14px auto 26px}
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.wsoon{width:100%;aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);display:grid;place-content:center;justify-items:center;gap:14px;transition:border-color .25s}
.wcard:hover .wsoon{border-color:rgba(200,16,46,.55)}
.wsoon .icon{font-size:2.5rem}
.wsoon b{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.2em;color:var(--dim)}
.wcard h5{font-size:.92rem;font-weight:600;margin-top:14px}
.wcard span{font-size:.72rem;color:var(--dim);display:block}
button.wcard{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.wthumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);object-fit:cover;object-position:center top;display:block;transition:border-color .25s}
.wcard:hover .wthumb{border-color:rgba(200,16,46,.55)}
.wcard[aria-expanded="true"] .wthumb{border-color:var(--red)}
/* impactful category cards */
.wthumb-wrap{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);transition:border-color .25s,box-shadow .25s}
.wcard .wthumb-wrap .wthumb{border:0;border-radius:0;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.wthumb-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,7,8,.62),rgba(10,7,8,0) 44%);pointer-events:none}
.wcard:hover .wthumb-wrap .wthumb{transform:scale(1.07)}
.wcard:hover .wthumb-wrap{border-color:rgba(200,16,46,.6);box-shadow:0 14px 34px rgba(200,16,46,.16)}
.wcard[aria-expanded="true"] .wthumb-wrap{border-color:var(--red)}
.wcard .wcat{position:absolute;z-index:2;top:12px;inset-inline-start:12px;font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.09em;padding:6px 13px;border-radius:999px;background:rgba(200,16,46,.92);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.wcard .wproj{display:block;margin-top:15px;font-size:.98rem;font-weight:600;color:var(--bone);line-height:1.3}
.wcard .wgo{display:block;margin-top:7px;font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--dim);transition:color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
.wcard:hover .wgo{color:var(--hot);transform:translateX(5px)}
[dir="rtl"] .wcard:hover .wgo{transform:translateX(-5px)}
/* work v2 — lioness category cards */
#work{position:relative}
.work2-hd{position:relative;margin-bottom:40px;min-height:170px}
.w2-hero{position:absolute;top:-18px;inset-inline-end:0;width:340px;max-width:36%;pointer-events:none;opacity:.95;transform:scaleX(-1)}
.w2-kick{font-family:var(--brand);font-weight:700;font-size:.72rem;letter-spacing:.2em;color:var(--red);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.w2-kick::before{content:"";width:34px;height:1px;background:var(--red)}
.w2-title{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.07;color:#fff;margin:0;max-width:16ch}
.w2-title em{color:var(--red);font-style:normal}
.w2-sub{color:var(--dim);font-size:1rem;margin-top:16px;max-width:44ch}
.w2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lcell{display:flex;flex-direction:column;gap:12px}
.lcap{display:flex;align-items:baseline;gap:9px;min-height:3rem}
.wd-kicker{display:block;font-family:var(--brand);font-weight:700;font-size:.62rem;letter-spacing:.22em;color:var(--red);text-transform:uppercase;margin-bottom:9px}
.lcap .l-title{font-family:var(--display);font-weight:700;font-size:1.16rem;color:#fff}
.lcap .l-en{color:var(--red);font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.1em;white-space:nowrap}
.l-ex{font-size:.75rem;color:var(--dim)}
.l-ex b{color:var(--bone);font-weight:600}
button.lcard{position:relative;display:block;width:100%;padding:0 0 42px;border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;background:var(--lcard-bg,#1A1013);cursor:pointer;color:inherit;font:inherit;transition:border-color .25s,transform .3s}
.lcard:hover{border-color:rgba(200,16,46,.55);transform:translateY(-3px)}
.lcard[aria-expanded="true"]{border-color:var(--red)}
.lart{display:block;width:100%;height:auto}
.wd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wd-chips i{font-style:normal;font-size:.68rem;font-weight:600;color:#f0c2ca;border:1px solid rgba(200,16,46,.5);border-radius:999px;padding:5px 12px;background:rgba(200,16,46,.1)}
.wd-metric{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:9px 15px;border:1px solid rgba(200,16,46,.45);border-radius:10px;background:rgba(200,16,46,.1);color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}
.wd-metric::before{content:"◆";color:var(--red);font-size:.72em}
.wd-media{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;margin-top:16px}
.wd-media .wd-model-wrap{margin-top:0}
.wd-shot{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block}
@media(max-width:760px){.wd-media{grid-template-columns:1fr}}
.l-cta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem}
.l-arr{width:30px;height:30px;border:1px solid rgba(200,16,46,.55);border-radius:7px;display:grid;place-items:center;color:var(--red);transition:background .2s;flex:none}
.lcard:hover .l-arr{background:rgba(200,16,46,.2)}
@media(max-width:900px){.w2-grid{grid-template-columns:repeat(2,1fr)}.w2-hero{width:230px;opacity:.55}}
@media(max-width:560px){.w2-grid{grid-template-columns:repeat(2,1fr);gap:12px}.lcell{gap:8px}.lcap{gap:5px;min-height:2.5rem}.lcap .l-title{font-size:.86rem}.lcap .l-en{font-size:.56rem;letter-spacing:.06em}button.lcard{padding-bottom:34px}.l-cta{font-size:.68rem;padding:8px 10px}.l-arr{width:22px;height:22px}}
.wdetail{margin-top:24px;padding:28px 30px;border-radius:14px;border:1px solid var(--line);background:var(--panel);position:relative}
.wdetail[hidden]{display:none}
.wdetail-close{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:1.15rem;line-height:1;display:grid;place-content:center;transition:color .2s,border-color .2s}
.wdetail-close:hover{color:var(--hot);border-color:rgba(200,16,46,.55)}
.wdetail h4{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;padding-inline-end:44px}
.wd-sub{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--bone);opacity:.72;margin-top:10px}
.wd-model-wrap{position:relative;margin-top:16px}
.wd-model{width:100%;height:clamp(260px,42vh,380px);background:transparent;border:1px solid var(--line);border-radius:14px;--poster-color:transparent;display:block}
.wd-model-badge{position:absolute;top:12px;inset-inline-start:12px;font-family:var(--brand);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);background:rgba(14,8,10,.62);padding:5px 10px;border-radius:6px;border:1px solid var(--line);pointer-events:none}
.wd-zoom-ctl{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(14,8,10,.55);border:1px solid var(--line);border-radius:999px;padding:6px 13px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wd-zoom{width:132px;accent-color:var(--hot);cursor:pointer}
.wd-zoom-ic{color:var(--dim);font-size:.95rem;width:10px;text-align:center;user-select:none}
.wd-model-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .35s}
.wd-model-wrap.loaded .wd-model-loading{opacity:0}
.wd-spinner{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(240,234,228,.16);border-top-color:var(--hot);animation:wd-spin .8s linear infinite}
@keyframes wd-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wd-spinner{animation:none}}
.wd-model-hint{font-size:.72rem;color:var(--dim);text-align:center;margin-top:8px;letter-spacing:.03em}
.wd-body{margin-top:16px;display:grid;gap:12px;max-width:78ch}
.wd-body p{color:var(--dim);font-size:.9rem}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.wdetail{padding:24px 20px}.wd-sub{font-size:.78rem}}

/* ---------------- cta ---------------- */
.contact{margin-top:26px;padding:40px 48px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-intro h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:.04em;line-height:1.2}
.contact-intro h2 em{font-style:normal;color:var(--hot)}
.contact-intro p{color:var(--dim);font-size:.95rem;margin-top:16px;max-width:40ch}
.contact-form{display:flex;flex-direction:column;gap:14px;position:relative}
.contact-form .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;pointer-events:none}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:.92rem;color:var(--bone);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .2s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{resize:vertical;min-height:96px}
.field select{cursor:pointer}
.contact-form .btn-red{margin-top:6px;align-self:flex-start;cursor:pointer;border:0}
.form-msg{font-size:.88rem;margin-top:2px}
.form-ok{color:#5ec27a}
.form-err{color:var(--hot)}
@media(max-width:900px){.contact{padding:44px 28px}.contact-grid{grid-template-columns:1fr;gap:32px}.field input,.field select,.field textarea{font-size:16px}}

/* ---------------- about ---------------- */
.about{margin-top:26px;padding:40px 40px}
.about-in{display:grid;grid-template-columns:185px 1fr;gap:44px;margin-top:40px;align-items:stretch}
.about-lead{display:flex;flex-direction:column}
.about-lead h3{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:.02em;line-height:1.18}
.about-lead p{color:var(--dim);margin-top:16px;font-size:.95rem}
.founder-card{display:flex;flex-direction:column}
.founder-portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:16px;border:1px solid var(--line);background:var(--panel-2);margin-bottom:16px}
/* Founder card easter-egg: click to flip between the photo and the voxel "Software Architect" card */
.founder-flip{position:relative;display:block;width:100%;margin:0 0 16px;padding:0;border:0;background:none;cursor:pointer;border-radius:16px;perspective:1200px;-webkit-tap-highlight-color:transparent}
.founder-flip .flip-inner{position:relative;display:block;width:100%;aspect-ratio:4/5;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.founder-flip.flipped .flip-inner{transform:rotateY(180deg)}
.founder-flip .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;overflow:hidden}
.founder-flip .flip-face .founder-portrait{margin:0;width:100%;height:100%;aspect-ratio:auto}
.founder-flip .flip-back{transform:rotateY(180deg)}
.founder-flip .flip-back .founder-portrait{object-position:center}
.founder-flip .flip-hint{position:absolute;bottom:10px;inset-inline-end:10px;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(10,8,10,.55);border:1px solid var(--line);color:#fff;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none}
.founder-flip:hover .flip-hint,.founder-flip:focus-visible .flip-hint{opacity:.85}
.founder-flip:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .founder-flip .flip-inner{transition:none;transform:none!important}
  .founder-flip .flip-face{backface-visibility:visible;-webkit-backface-visibility:visible}
  .founder-flip .flip-back{transform:none;opacity:0;transition:opacity .35s}
  .founder-flip.flipped .flip-back{opacity:1}
}
.founder-name{font-family:var(--display);font-weight:600;font-size:1.1rem;letter-spacing:.02em}
.founder-role{font-size:.82rem;color:var(--dim);margin-top:2px}
.founder-edu{font-size:.74rem;color:var(--dim);opacity:.85;line-height:1.4;margin-top:4px}
.founder-li{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.82rem;font-weight:600;letter-spacing:.04em;line-height:1;color:var(--hot);width:fit-content}
.founder-li svg{width:15px;height:15px;flex-shrink:0;fill:currentColor}
.founder-li:hover{color:var(--bone)}
.about-xp{margin-top:auto;padding-top:22px;margin-bottom:16px}
.about-xp-k{display:block;font-family:var(--brand);font-size:.66rem;letter-spacing:.28em;color:var(--dim);text-transform:uppercase;margin-bottom:18px}
.logo-row{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.logo-tile{display:grid;place-items:center;text-align:center;padding:24px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:.04em;color:var(--bone);opacity:.82;transition:border-color .2s,opacity .2s}
.logo-tile:hover{border-color:rgba(200,16,46,.5);opacity:1}
.logo-tile img{max-height:40px;max-width:82%;object-fit:contain}
@media(max-width:480px){.logo-row{grid-template-columns:1fr}}
@media(max-width:900px){.about{padding:44px 28px}.about-in{grid-template-columns:1fr;gap:28px;margin-top:32px}.founder-card{max-width:280px}}

/* ---------------- footer ---------------- */
footer{margin-top:60px;border-top:1px solid var(--line);padding:36px 0 26px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:22px 40px;flex-wrap:wrap}
.foot-right{display:flex;align-items:center;gap:22px 30px;flex-wrap:wrap}
.foot .contact{margin:0;padding:0;display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;font-size:.86rem;color:var(--dim)}
.foot .contact span{display:inline-flex;align-items:center;white-space:nowrap}
.foot .contact a{color:var(--dim);transition:color .2s}
.foot .contact a:hover{color:var(--hot)}
.foot .contact .icon{margin-inline-end:.5em;flex:none}
.socials{display:flex;gap:16px}
.socials a{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--dim);font-size:.8rem;transition:all .2s}
.socials a:hover{border-color:var(--red);color:var(--hot)}
.copy{text-align:center;font-size:.72rem;color:var(--dim);margin-top:26px}
.wd-credit{display:inline-block;margin-top:3px;font-size:.68em;opacity:.55}
.wd-credit a{color:inherit;text-decoration:underline}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.js .rv.in{opacity:1;transform:none}

/* ---------------- RTL ---------------- */
[dir="rtl"] .hero-bg{transform:scaleX(-1)}
/* The ember field is masked to the empty half so the subject never lights up.
   RTL mirrors the photo, moving her to the left, so the mask has to mirror with
   it or the embers land on her instead of the open space. */
[dir="rtl"] .hero-gl{transform:scaleX(-1)}
[dir="rtl"] .hero-scrim{background:linear-gradient(270deg,rgba(14,8,10,.97) 0%,rgba(14,8,10,.9) 30%,rgba(14,8,10,.45) 50%,rgba(14,8,10,0) 68%)}
[dir="rtl"] .sec-k{letter-spacing:.12em}
[dir="rtl"] .about-xp-k{letter-spacing:.06em;font-size:.8rem}

/* ---------------- custom cursor (dot + trailing ring) ---------------- */
@media (hover:hover) and (pointer:fine){
  html.cursor-on, html.cursor-on *{cursor:none !important}
  html.cursor-on input, html.cursor-on textarea, html.cursor-on select{cursor:auto !important}
  .cursor-ring,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;border-radius:50%;opacity:0;transition:opacity .3s ease}
  html.cursor-ready .cursor-ring, html.cursor-ready .cursor-dot{opacity:1}
  html.cursor-hidden .cursor-ring, html.cursor-hidden .cursor-dot{opacity:0}
  .cursor-dot{width:6px;height:6px;background:var(--bone)}
  .cursor-ring{width:34px;height:34px;border:1.5px solid rgba(240,234,228,.55);
    transition:width .28s ease,height .28s ease,border-color .28s ease,background-color .28s ease,opacity .3s ease}
  .cursor-ring.is-hover{width:58px;height:58px;border-color:var(--bone);background:rgba(240,234,228,.10)}
  .cursor-ring.is-click{width:26px;height:26px;background:rgba(240,234,228,.18)}

  /* micro-interactions: smooth hover lift (no bounce, no cursor-tracking) */
  .js .wcard{transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .6s ease; will-change:transform}
  .btn:hover{transform:scale(1.05)}
}