/* AlgoriX "Spatial" design. Ported verbatim from the approved reference page. */
:root{
  color-scheme:dark;
  --bg:#08090c;
  --bg-2:#0e1015;
  --ink:#eef0f4;
  --ink-2:#b8bfca;
  --ink-3:#8e97a5;
  --line:rgb(255 255 255 / .09);
  --line-2:rgb(255 255 255 / .16);
  --glass:rgb(255 255 255 / .05);
  --glass-2:rgb(255 255 255 / .075);
  --glass-3:rgb(255 255 255 / .12);
  --glass-hi:rgb(255 255 255 / .08);
  --pill:rgb(20 22 28 / .68);
  --plate:rgb(22 24 30 / .86);
  --shade:rgb(0 0 0 / .55);
  --shade-2:rgb(0 0 0 / .3);
  --clear:rgb(8 9 12 / 0);
  --fog:#090a0e;
  --reflect:rgb(0 0 0 / .3);
  --floor:rgb(150 170 190 / .10);
  --stage-light:rgb(190 205 225 / .15);
  --win-base:rgb(13 15 20 / .8);
  --plate-base:rgb(18 20 26 / .78);
  --vig:rgb(3 4 6 / .72);
  --live:#8fd8b4;
  --soon:#d8bf8c;
  --focus:#b9eed5;
  --btn-bg:#eef0f4;
  --btn-bg-h:#ffffff;
  --btn-ink:#0b0d10;
  --btn-ink-2:#3d444e;
  --f-teal:#1d4744;
  --f-blue:#1f2d4a;
  --f-plum:#43233e;
  --f-sage:#27362e;
  --t-scan:#2a6a5a;
  --t-vault:#24405f;
  --t-math:#6a2a5f;
  --frame:#18191d;
  --frame-2:#0d0e10;
  --frame-hi:#4b4f57;
  --frame-edge:rgb(255 255 255 / .16);
  --island:#000000;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutL:max(20px,env(safe-area-inset-left,0px));
  --gutR:max(20px,env(safe-area-inset-right,0px));
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){:root{--gutL:max(40px,env(safe-area-inset-left,0px));--gutR:max(40px,env(safe-area-inset-right,0px))}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.skip{position:absolute;left:12px;top:-120px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.wrap{max-width:84rem;margin-inline:auto;padding-left:var(--gutL);padding-right:var(--gutR)}

/* ---------- colour field ---------- */
.field{position:fixed;inset:0;z-index:0;overflow:clip;pointer-events:none;background:var(--bg)}
/* Blobs and the room tint are rastered at a quarter of their size and scaled up, which keeps the
   compositor layers small (a soft radial gradient loses nothing when it is upscaled). */
.blob,.tint{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--c),var(--clear))}
.blob{left:var(--cx);top:var(--cy);width:calc(var(--sz) / 4);height:calc(var(--sz) / 4);margin:calc(var(--sz) / -8) 0 0 calc(var(--sz) / -8);opacity:.75;transform:scale(4);animation:drift var(--dur) ease-in-out infinite alternate}
.b1{--c:var(--f-teal);--sz:80vmax;--cx:12vmax;--cy:6vmax;--dur:48s}
.b2{--c:var(--f-plum);--sz:66vmax;--cx:calc(100% - 3vmax);--cy:21vmax;--dur:61s;animation-direction:alternate-reverse}
.b3{--c:var(--f-blue);--sz:84vmax;--cx:48vmax;--cy:calc(100% + 10vmax);--dur:67s;animation-delay:-30s}
.b4{--c:var(--f-sage);--sz:52vmax;--cx:60vmax;--cy:50vmax;--dur:55s;animation-delay:-12s;animation-direction:alternate-reverse}
.tint{--c:var(--t-scan);left:50%;top:50%;width:24vmax;height:24vmax;margin:-12vmax 0 0 -12vmax;transform:scale(4);opacity:0;transition:opacity 1.6s ease}
.tint.on{opacity:.85}
.vig{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 32%,var(--clear) 45%,var(--vig) 100%)}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(4)}
  50%{transform:translate3d(7vmax,4vmax,0) scale(4.32)}
  100%{transform:translate3d(-5vmax,8vmax,0) scale(3.8)}
}
:root.is-hidden .blob{animation-play-state:paused}
.page{position:relative;z-index:1}

/* ---------- header ornaments ---------- */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;pointer-events:none}
.top-in{max-width:84rem;margin-inline:auto;padding-block:14px;padding-left:var(--gutL);padding-right:var(--gutR);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.top-in > *{pointer-events:auto}
.pill{background:var(--pill);border:1px solid var(--line);border-radius:999px;-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 32px -14px var(--shade)}
.brand{justify-self:start;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;text-decoration:none;font-weight:700;font-size:1.0625rem;letter-spacing:-.02em}
.brand img{display:block;width:auto;height:21px}
.nav{display:flex;gap:2px;padding:4px}
.nav a{display:inline-flex;align-items:center;height:38px;padding:0 17px;border-radius:999px;text-decoration:none;font-size:.9375rem;font-weight:600;color:var(--ink-2);transition:background-color .25s ease,color .25s ease}
.nav a:hover{color:var(--ink);background:var(--glass-2)}
.nav a[aria-current="true"]{color:var(--ink);background:var(--glass-3)}
.lang{justify-self:end;display:flex;gap:2px;padding:4px}
.lang button{height:38px;min-width:46px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:500 .8125rem/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:background-color .25s ease,color .25s ease}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink)}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 .75rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2)}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance}
.h2{margin:0;font-size:clamp(2.1rem,1.25rem + 2.9vw,4rem);line-height:1.02;letter-spacing:-.045em;font-weight:700}
:lang(tr) #approach-title{font-size:clamp(1.875rem,1rem + 2.15vw,2.95rem)}
.sec-lede{margin:0;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.55;max-width:34em;text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.9875rem;letter-spacing:-.01em;transition:background-color .3s ease,transform .3s var(--ease-out),border-color .3s ease}
.btn svg{width:16px;height:16px}
.btn-solid{background:var(--btn-bg);color:var(--btn-ink)}
.btn-solid:hover{background:var(--btn-bg-h);transform:translateY(-1px)}
.btn-glass{background:var(--glass-2);border:1px solid var(--line-2);color:var(--ink);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn-glass:hover{background:var(--glass-3);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero{
  --pw:clamp(124px,min(23vh,36vw),240px);
  --R:min(calc(var(--pw) * 3.4),44vw);
  --face:30deg;
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,80rem) minmax(0,1fr);
  grid-template-areas:". c ." "s s s" ". d .";
  padding-block:calc(env(safe-area-inset-top,0px) + 88px) clamp(40px,7vh,80px);
  padding-left:var(--gutL);padding-right:var(--gutR);
}
.hero-copy{grid-area:c;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 56px;align-items:end;transform:translate3d(0,calc(var(--hp,0) * -70px),0)}
.hero h1{margin:0;font-size:clamp(2.15rem,.9rem + 3.1vw,3.9rem);line-height:.98;letter-spacing:-.05em;font-weight:700}
.hero h1 span{display:block}
.hero h1 .mute{color:var(--ink-3)}
:lang(tr) .hero h1{font-size:clamp(1.95rem,.8rem + 2.8vw,3.5rem)}
.hc-b{padding-bottom:6px}
.lede{margin:0 0 26px;color:var(--ink-2);font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6;text-wrap:pretty}
.ctas{display:flex;flex-wrap:wrap;gap:10px}

.stage{grid-area:s;position:relative;margin-left:calc(var(--gutL) * -1);margin-right:calc(var(--gutR) * -1);margin-top:0;height:calc(var(--pw) * 2.92);perspective:calc(var(--pw) * 8.2);perspective-origin:50% 22%;overflow:clip;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline:none}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--focus);border-radius:24px}
.stage.is-dragging{cursor:grabbing}
/* Rim light: a soft pool centred behind the front device so the eye lands there first. */
.stage::before{content:"";position:absolute;left:50%;top:41%;width:calc(var(--pw) * 3.4);height:calc(var(--pw) * 2.9);transform:translate(-50%,-50%);background:radial-gradient(closest-side,var(--stage-light),var(--clear));pointer-events:none}
.floor{position:absolute;left:50%;bottom:calc(var(--pw) * .18);width:min(100%,calc(var(--R) * 2.9));height:calc(var(--pw) * 1.6);transform:translateX(-50%);background:radial-gradient(closest-side,var(--floor),var(--clear));pointer-events:none}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(0,calc(var(--hp,0) * 50px),calc(var(--hp,0) * -220px))}
.item{--iw:var(--pw);position:absolute;left:50%;bottom:calc(var(--pw) * .66);width:var(--iw);margin:0 0 0 calc(var(--iw) / -2);transform-origin:50% 100%;transform:translate3d(calc(var(--s) * var(--R) * var(--k,1)),0,calc((var(--c) - 1) * var(--R) * var(--k,1))) rotateY(calc(var(--s) * var(--face) * var(--k,1)))}
.item:not(.is-front){cursor:pointer}
.item:not(.is-front):hover .fog{opacity:calc(var(--d,0) * .5)}
.stage.is-dragging .item{cursor:grabbing}
.item img{-webkit-user-drag:none;pointer-events:none}

/* device frames */
.dev{position:relative;padding:3.3%;background:linear-gradient(152deg,var(--frame-hi),var(--frame) 18%,var(--frame-2) 55%,var(--frame) 86%,var(--frame-hi));box-shadow:inset 0 0 0 1px var(--frame-edge),inset 0 0 0 2.5px var(--frame-2),0 34px 60px -30px var(--shade)}
.dev.ios{border-radius:15.5% / 7.25%}
.dev.ios .scr{border-radius:12.6% / 5.8%}
.dev.and{border-radius:11.5% / 5.95%}
.dev.and .scr{border-radius:8.8% / 4.4%}
.scr{position:relative;overflow:hidden;background:var(--bg)}
.scr img{display:block;width:100%;height:auto}
.dev.ios .scr::after{content:"";position:absolute;z-index:1;left:50%;top:1.28%;width:32%;height:4.35%;margin-left:-16%;border-radius:999px;background:var(--island)}
.dev.and .scr::after{content:"";position:absolute;z-index:1;left:50%;top:2%;width:3.9%;aspect-ratio:1;margin-left:-1.95%;border-radius:50%;background:var(--island)}
.dev::before{content:"";position:absolute;left:-1.3%;top:17%;width:1.3%;height:21%;border-radius:2px 0 0 2px;background:linear-gradient(var(--frame-hi) 0 18%,var(--clear) 18% 32%,var(--frame-hi) 32% 63%,var(--clear) 63% 72%,var(--frame-hi) 72%)}
.dev::after{content:"";position:absolute;right:-1.3%;top:26%;width:1.3%;height:11%;border-radius:0 2px 2px 0;background:var(--frame-hi)}
.dev.and::before{display:none}
.dev.and::after{top:20%;height:18%;background:linear-gradient(var(--frame-hi) 0 34%,var(--clear) 34% 46%,var(--frame-hi) 46%)}
.fog{position:absolute;inset:0;border-radius:inherit;background:var(--fog);opacity:calc(var(--d,0) * .85);pointer-events:none;z-index:2}
/* Only the front item and its two neighbours carry a floor reflection (keeps the layer count low). */
.item.is-near .dev{-webkit-box-reflect:below 5px linear-gradient(var(--clear) 64%,var(--reflect))}

/* dock ornament */
.dock{grid-area:d;justify-self:center;align-self:start;position:relative;z-index:3;display:flex;align-items:center;gap:8px;width:min(100%,52rem);margin-top:calc(var(--pw) * -.6);padding:8px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px -24px var(--shade)}
.dk-btn{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:var(--glass);color:var(--ink);cursor:pointer;transition:background-color .25s ease,transform .3s var(--ease-out)}
.dk-btn:hover{background:var(--glass-3)}
.dk-btn:active{transform:scale(.94)}
.dk-btn svg{width:18px;height:18px}
.dk-btn .i-play{display:none}
.dk-btn[data-state="paused"] .i-play{display:block}
.dk-btn[data-state="paused"] .i-pause{display:none}
.dk-live{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:0 6px}
.dk-icons{flex:none;display:grid}
.dk-icon{grid-area:1 / 1;width:40px;height:40px;border-radius:22.5%;box-shadow:0 0 0 1px var(--line);opacity:0;transition:opacity .28s var(--ease-out)}
.dk-icon.is-on{opacity:1}
.dk-text{min-width:0}
.dk-line{margin:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;line-height:1.2}
.dk-name{font-weight:700;letter-spacing:-.015em}
.dk-cat{font:500 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dk-status{margin:4px 0 0;display:flex;align-items:center;gap:8px;font-size:.8125rem;line-height:1.3;color:var(--ink-2)}
.st-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--live)}
.st-dot.is-soon{background:var(--soon)}
.st-dot.is-part{background:linear-gradient(90deg,var(--live) 50%,var(--soon) 50%)}
.dk-screen{margin:0 0 0 auto;padding-left:16px;border-left:1px solid var(--line);font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:15rem}
.dk-count{flex:none;margin:0 8px 0 4px;font:500 .75rem/1 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.dk-count b{color:var(--ink);font-weight:500}

/* ---------- section scaffolding ---------- */
.section{position:relative;scroll-margin-top:84px}
.apps-head{padding-block:clamp(72px,11vw,150px) clamp(8px,2vw,24px)}
.apps-head .h2,.about .h2{max-width:14em}
.apps-head .sec-lede,.ab-lede{margin-top:22px}
.app-index{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.app-index a{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 20px 0 8px;border-radius:999px;text-decoration:none;background:var(--glass);border:1px solid var(--line);transition:background-color .25s ease,border-color .25s ease}
.app-index a:hover{background:var(--glass-2);border-color:var(--line-2)}
.app-index img{width:40px;height:40px;border-radius:22.5%}
.app-index .nm{font-weight:700;letter-spacing:-.015em}
.app-index .ct{font:500 .6875rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- app scenes: one frosted window and one volume of devices sharing the same space ---------- */
.scene{padding-block:clamp(48px,8vw,110px);scroll-margin-top:60px}
.scene-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.window{grid-column:1 / span 6;grid-row:1;position:relative;z-index:2;border-radius:34px;padding:clamp(24px,2.6vw,38px);background:linear-gradient(160deg,var(--glass-3),var(--glass) 40%),var(--win-base);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 110px -60px var(--shade);transform:translate3d(0,var(--wy,0px),0)}
/* window bar, as under a visionOS window */
.window::after,.plate::after{content:"";position:absolute;left:50%;bottom:-20px;width:72px;height:6px;margin-left:-36px;border-radius:3px;background:var(--glass-3)}
.volume{grid-column:5 / span 8;grid-row:1;position:relative;aspect-ratio:1 / .9;perspective:1500px;perspective-origin:50% 45%}
.scene.flip .window{grid-column:7 / span 6}
.scene.flip .volume{grid-column:1 / span 8}
.vol-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* --asm (0..1, set per scene on scroll) assembles the volume: exploded in depth, then settled. */
.fl{position:absolute;margin:0;transform:translate3d(calc((1 - var(--asm,1)) * var(--sx,0%)),0,calc(var(--z,0px) * (1 + (1 - var(--asm,1)) * 1.6))) rotateY(var(--ty,0deg))}
.fl .dev{box-shadow:inset 0 0 0 1px var(--frame-edge),inset 0 0 0 2.5px var(--frame-2),0 50px 90px -40px var(--shade),0 18px 30px -18px var(--shade-2)}
.fl-1{left:6%;top:9%;width:30%;--z:-170px;--ty:14deg;--sx:-14%}
.fl-2{left:71%;top:15%;width:28%;--z:-110px;--ty:-14deg;--sx:14%}
.fl-3{left:37%;top:3%;width:37%;--z:40px}
.scene.flip .fl-1{left:66%;--ty:-14deg;--sx:14%}
.scene.flip .fl-2{left:4%;--ty:14deg;--sx:-14%}
.vol-glow{position:absolute;left:10%;right:10%;top:20%;bottom:10%;border-radius:50%;background:radial-gradient(closest-side,var(--gc),var(--clear));transform:translateZ(-260px);opacity:.8}
#scanme .vol-glow{--gc:var(--t-scan)}
#vaultly .vol-glow{--gc:var(--t-vault)}
#basic-math .vol-glow{--gc:var(--t-math)}

.w-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.app-icon{flex:none;width:72px;height:72px;border-radius:22.5%;box-shadow:0 0 0 1px var(--line),0 16px 34px -14px var(--shade)}
.w-head h3{margin:0;font-size:clamp(2rem,1.5rem + 1.5vw,2.75rem);line-height:1;letter-spacing:-.045em;font-weight:700}
.w-cat{margin:9px 0 0;font:500 .75rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.w-desc{margin:0 0 22px;color:var(--ink-2);font-size:1.0625rem;line-height:1.6;text-wrap:pretty}
code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:var(--glass-2);padding:.08em .36em;border-radius:6px;border:1px solid var(--line)}
/* features: an inset grouped list with run-in heads */
.feats{list-style:none;margin:0 0 22px;padding:0;border-radius:20px;background:var(--glass);border:1px solid var(--line)}
.feats li{padding:13px 18px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.feats li:first-child{border-top:0}
.feats h4{display:inline;margin:0 .45em 0 0;font-size:inherit;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.feats p{display:inline;margin:0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0}
.chips li{font-size:.8125rem;font-weight:500;line-height:1.35;color:var(--ink-2);padding:7px 13px;border-radius:14px;border:1px solid var(--line-2);background:var(--glass)}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.sprite{position:absolute;overflow:hidden}
.store{display:inline-flex;align-items:center;gap:12px;min-width:172px;height:58px;padding:0 22px 0 18px;border-radius:999px;text-decoration:none;line-height:1.15;transition:background-color .25s ease,transform .3s var(--ease-out)}
.s-ico{flex:none;width:26px;height:26px}
.s-txt{display:flex;flex-direction:column}
.store.is-soon .s-ico{opacity:.75}
.store .s-sub{font:500 .6875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.store .s-name{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em}
.store.is-live{background:var(--btn-bg);color:var(--btn-ink)}
.store.is-live .s-sub{color:var(--btn-ink-2)}
.store.is-live:hover{background:var(--btn-bg-h);transform:translateY(-1px)}
.store.is-soon{background:var(--glass);border:1px solid var(--line-2);color:var(--ink-2)}
.store.is-soon .s-sub{color:var(--soon)}
.w-links{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.875rem}
.w-links a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
.w-links a:hover{color:var(--ink);text-decoration-color:var(--ink-3)}

/* ---------- approach ---------- */
.approach{padding-block:clamp(80px,11vw,150px)}
.ap-grid{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:48px 64px;align-items:start}
.ap-copy .sec-lede{margin-bottom:36px}
.ap-points{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ap-points li{padding:20px 0;border-top:1px solid var(--line)}
.ap-key{display:block;margin:0 0 8px;font:500 .75rem/1.2 var(--mono);color:var(--live);letter-spacing:.02em}
.ap-points h3{margin:0 0 4px;font-size:1.1875rem;letter-spacing:-.025em;font-weight:700;line-height:1.3}
.ap-points p{margin:0;color:var(--ink-2);font-size:.9875rem;line-height:1.6}
.kmp{margin:0;position:sticky;top:110px;border-radius:34px;padding:clamp(20px,2.6vw,36px);background:var(--glass);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 110px -60px var(--shade)}
.kmp-view{perspective:1300px;perspective-origin:50% 0%}
.board{--g:46px;--cg:14px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:var(--cg);row-gap:var(--g);position:relative}
.kmp.is-3d .board{transform-style:preserve-3d;transform-origin:50% 0%;transform:rotateX(calc((1 - var(--asm,1)) * 26deg)) translateZ(calc((1 - var(--asm,1)) * -60px))}
.kmp.is-3d .node,.kmp.is-3d .fork{transform:translateZ(calc((1 - var(--asm,1)) * var(--tz,0px) * var(--tzk,1)))}
.tier{grid-column:1;align-self:center;margin:0;padding-right:10px;font:500 .6875rem/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);max-width:7.5rem}
.node{position:relative;border-radius:20px;padding:16px 18px;background:var(--glass-2);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 40px -26px var(--shade)}
.node .nk{margin:0 0 6px;font:500 .75rem/1.2 var(--mono);color:var(--live);letter-spacing:.02em;overflow-wrap:anywhere}
.node .nt{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.25;font-size:1.0625rem}
.node .ns{margin:6px 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.n-shared{grid-column:2 / 4;grid-row:1;--tz:0px;padding:20px 22px;background:linear-gradient(150deg,var(--glass-3),var(--glass-2) 55%)}
.n-shared .nt{font-size:1.25rem}
.r2{grid-row:2;--tz:40px}.r3{grid-row:3;--tz:80px}.r4{grid-row:4;--tz:120px}
.la{grid-column:2}.lb{grid-column:3}
.t1{grid-row:1}.t2{grid-row:2}.t3{grid-row:3}.t4{grid-row:4}
.n-shared::after{content:"";position:absolute;left:50%;bottom:calc(var(--g) / -2 - 1px);height:calc(var(--g) / 2);width:1px;background:var(--line-2)}
.fork{grid-column:2 / 4;grid-row:2;align-self:start;position:relative;height:0;--tz:40px;pointer-events:none}
.fork::before{content:"";position:absolute;top:calc(var(--g) / -2);left:calc((100% - var(--cg)) / 4);right:calc((100% - var(--cg)) / 4);height:1px;background:var(--line-2)}
.fork-lbl{position:absolute;left:50%;top:calc(var(--g) / -2);transform:translate(-50%,-50%);padding:5px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);font:500 .6875rem/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.r2.node::before{content:"";position:absolute;left:50%;top:calc(var(--g) / -2);height:calc(var(--g) / 2);width:1px;background:var(--line-2)}
.r3.node::before,.r4.node::before{content:"";position:absolute;left:50%;top:calc(var(--g) * -1 - 1px);height:var(--g);width:1px;background:linear-gradient(var(--line-2),var(--line-2)) center / 1px 100% no-repeat}
.node.store-n{background:var(--glass)}
.node.store-n .nt{font-size:1.125rem;display:flex;align-items:center;gap:10px}
.n-ico{flex:none;width:20px;height:20px}
.kmp figcaption{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3)}

/* ---------- about: three plates staggered in depth, assembling like the KMP board ---------- */
.about{padding-block:clamp(40px,8vw,110px) clamp(80px,10vw,140px)}
.plates{margin-top:clamp(44px,6vw,80px);perspective:2200px;perspective-origin:50% 0%}
.plate-row{list-style:none;margin:0;padding:0 0 72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;transform-style:preserve-3d;transform-origin:50% 0%;transform:rotateX(calc((1 - var(--asm,1)) * 22deg))}
.plate{--pz:0px;--py:0px;--px:0px;position:relative;margin:0;padding:clamp(24px,2.6vw,36px);border-radius:28px;background:linear-gradient(160deg,var(--glass-3),var(--glass) 45%),var(--plate-base);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 90px -50px var(--shade);transform:translate3d(var(--px),calc(var(--py) * var(--asm,1)),calc(var(--pz) * var(--asm,1) - (1 - var(--asm,1)) * 150px))}
.plate:nth-child(2){--pz:60px;--py:32px;--px:-3%}
.plate:nth-child(3){--pz:120px;--py:64px;--px:-9.5%}
.plate h3{margin:0 0 12px;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.08;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.plate p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.6;text-wrap:pretty}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;padding-block:0 calc(env(safe-area-inset-bottom,0px) + 40px)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:clamp(26px,3vw,40px);border-radius:34px;background:var(--glass);border:1px solid var(--line)}
.f-brand .brand-line{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.125rem;letter-spacing:-.02em;text-decoration:none}
.f-brand .brand-line img{display:block;width:auto;height:26px}
.f-brand p{margin:12px 0 0;color:var(--ink-2);font-size:.9375rem;max-width:22em}
.f-h{margin:0 0 12px;font:500 .6875rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{color:var(--ink-2);text-decoration:none;font-size:.9375rem;transition:color .2s ease}
.foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.f-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding:22px 6px 0;font-size:.8125rem;color:var(--ink-3)}
.f-legal p{margin:0;max-width:52em}

/* Without -webkit-box-reflect (Firefox) the floor carries the grounding on its own. */
@supports not (-webkit-box-reflect: below){
  :root{--floor:rgb(150 170 190 / .16)}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ap-grid{grid-template-columns:minmax(0,1fr)}
  .kmp{position:relative;top:auto}
}
@media (max-width:900px){
  .hero-copy{grid-template-columns:minmax(0,1fr)}
  .scene-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .window,.scene.flip .window{grid-column:1;grid-row:2}
  .volume,.scene.flip .volume{grid-column:1;grid-row:1;width:min(100%,560px);justify-self:center}
  /* the window slides over the foot of the devices, which show frosted through it */
  .scene .window{margin-top:-56px}
  .plates{perspective-origin:50% 0%}
  .plate-row{grid-template-columns:minmax(0,1fr);gap:34px;padding-bottom:20px}
  .plate:nth-child(2){--pz:30px;--py:0px;--px:0px}
  .plate:nth-child(3){--pz:60px;--py:0px;--px:0px}
  .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f-brand{grid-column:1 / -1}
}
@media (max-width:720px){
  .top-in{grid-template-columns:1fr auto}
  .nav{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60}
  .nav a{height:42px;padding:0 15px;font-size:.875rem}
  .brand{height:44px}
  .lang button{height:36px;min-width:42px}
  .hero{grid-template-areas:". a ." "s s s" ". d ." ". b .";grid-template-columns:0 minmax(0,1fr) 0;padding-block:calc(env(safe-area-inset-top,0px) + 92px) 24px}
  .hero-copy{display:contents}
  .hc-a{grid-area:a;transform:translate3d(0,calc(var(--hp,0) * -40px),0)}
  .hc-b{grid-area:b;margin-top:34px;padding-bottom:0}
  .stage{margin-top:6px;perspective-origin:50% 18%}
  .dock{display:grid;grid-template-columns:42px minmax(0,1fr) 42px 42px;grid-template-areas:"info info info info" "prev count pause next";align-items:center;border-radius:26px;gap:8px 6px;padding:10px 8px 8px;margin-top:calc(var(--pw) * -.45)}
  .dock #car-prev{grid-area:prev}
  .dock #car-toggle{grid-area:pause}
  .dock #car-next{grid-area:next}
  .dk-live{grid-area:info;gap:12px;padding:0 4px}
  .dk-count{grid-area:count;justify-self:center;margin:0}
  .dk-screen{display:none}
  .dk-icon{width:34px;height:34px}
  .dk-status{font-size:.75rem}
  .dk-btn{width:42px;height:42px}
  .feats li{padding:12px 15px}
  .volume{aspect-ratio:1 / 1.12}
  .fl-1{left:0;top:6%;width:34%;--z:-120px;--ty:12deg}
  .fl-2{left:66%;top:14%;width:34%;--z:-80px;--ty:-12deg}
  .scene.flip .fl-1{left:66%;--ty:-12deg}
  .scene.flip .fl-2{left:0;--ty:12deg}
  .fl-3{left:26.5%;top:4%;width:47%;--z:30px}
  .board{--g:40px;--cg:10px;--tzk:.45}
  .tier{writing-mode:vertical-rl;transform:rotate(180deg);padding:0;font-size:.625rem;letter-spacing:.1em;max-width:none;justify-self:center}
  .node{padding:13px 13px;border-radius:16px}
  .n-shared{padding:16px}
  .node .nt{font-size:.9875rem}
  .node .ns{font-size:.75rem}
  .node .nk{font-size:.6875rem}
  .foot{padding-block:0 calc(env(safe-area-inset-bottom,0px) + 96px)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  .stores .store{flex:1 1 140px;min-width:0}
}
@media (max-width:380px){
  .nav a{padding:0 12px}
  .brand{padding:0 14px 0 11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob{animation:none}
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  .hero-copy,.hc-a,.ring,.window{transform:none}
}

/* ---------- e-commerce page ---------- */
.ec-hero{padding-block:calc(env(safe-area-inset-top,0px) + 128px) clamp(48px,7vw,96px)}
.ec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px 64px;align-items:center}
.ec-hero h1{margin:0;font-size:clamp(2.05rem,.9rem + 2.3vw,3.2rem);line-height:.98;letter-spacing:-.05em;font-weight:700}
.ec-hero h1 span{display:block}
.ec-hero h1 .mute{color:var(--ink-3)}
:lang(tr) .ec-hero h1{font-size:clamp(1.9rem,.8rem + 2.1vw,2.95rem)}
.ec-hero .lede{margin-top:26px}
.ec-stage{position:relative;perspective:1600px;perspective-origin:30% 40%}
.ec-glow{position:absolute;left:4%;right:4%;top:-12%;bottom:-12%;border-radius:50%;background:radial-gradient(closest-side,var(--t-scan),var(--clear));opacity:.7;pointer-events:none}
.ec-frame{position:relative;margin:0;padding:10px;border-radius:26px;background:linear-gradient(160deg,var(--glass-3),var(--glass) 40%),var(--win-base);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-hi),0 60px 120px -60px var(--shade);transform:rotateY(-14deg) rotateX(4deg);transform-origin:20% 50%}
.ec-frame::after{content:"";position:absolute;left:50%;bottom:-20px;width:72px;height:6px;margin-left:-36px;border-radius:3px;background:var(--glass-3)}
.ec-frame img{display:block;width:100%;height:auto;border-radius:18px}
.ec-feats{padding-block:clamp(56px,8vw,110px) clamp(24px,4vw,48px)}
.ec-head{margin-bottom:22px}
.ec-head .h2{max-width:14em}
.ec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,64px)}
.ec-card{position:relative;border-radius:30px;padding:clamp(22px,2.4vw,34px);background:linear-gradient(160deg,var(--glass-3),var(--glass) 40%),var(--win-base);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-hi),0 50px 110px -60px var(--shade)}
.ec-card .ap-key{margin-bottom:10px}
.ec-card h3{margin:0 0 18px;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.08;letter-spacing:-.04em;font-weight:700}
.ec-card .feats{margin:0}
.ec-chips{margin:28px 0 0}
.ec-cta{padding-block:clamp(16px,3vw,40px) clamp(64px,8vw,110px)}
.ec-cta-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;padding:clamp(24px,3vw,40px);border-radius:34px;background:var(--glass);border:1px solid var(--line)}
.ec-cta-text{flex:1 1 18rem;min-width:0}
.ec-cta-text h2{margin:0;font-size:clamp(1.75rem,1.3rem + 1.2vw,2.5rem);letter-spacing:-.045em;line-height:1.05}
.ec-cta-text p{margin:8px 0 0;color:var(--ink-2)}
.ec-note{margin:16px 6px 0;font-size:.8125rem;color:var(--ink-3);max-width:60em}
@media (max-width:900px){
  .ec-grid,.ec-cards{grid-template-columns:minmax(0,1fr)}
  .ec-frame{transform:rotateY(-8deg) rotateX(3deg)}
}
@media (max-width:720px){
  .ec-hero{padding-block:calc(env(safe-area-inset-top,0px) + 96px) 40px}
  .ec-frame{padding:6px;border-radius:18px}
  .ec-frame img{border-radius:13px}
  .ec-head .app-icon{width:56px;height:56px}
  .nav a{padding:0 10px;font-size:.84rem;white-space:nowrap}
}
@media (max-width:380px){.nav a{padding:0 7px;font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.ec-frame{transform:none}}