/* Snatik Labs: one stylesheet for every page. No fonts to load, no scripts. */
:root{
  --fg:#111;--soft:#555;--mute:#a3a3a3;--line:rgba(0,0,0,.09);--bg:#fafafa;--panel:#f1f1f1;
  --accent:#0891b2;
  --gut:clamp(20px,6vw,96px);
  --col:min(78rem,100% - 2*var(--gut));
  --ease:cubic-bezier(.2,.7,0,1);
  --cgap:clamp(24px,3vw,48px);
}
@media (prefers-color-scheme:dark){
  :root{--fg:#ededed;--soft:#a1a1a1;--mute:#5c5c5c;--line:rgba(255,255,255,.1);--bg:#0b0b0b;--panel:#151515;--accent:#22d3ee}
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{width:var(--col);margin-inline:auto;flex:1;display:flex;flex-direction:column}
main{flex:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:clamp(20px,3vw,32px);font-size:15px}
.brand{display:inline-flex;align-items:center;gap:.55em;font-weight:500;letter-spacing:-.01em}
.brand img{width:22px;height:22px}
@media (prefers-color-scheme:dark){.brand img{filter:invert(1)}}
.nav{display:flex;gap:clamp(16px,2.4vw,32px);color:var(--soft)}
.nav a{position:relative;transition:color .3s}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor}

/* Home hero */
.hero{display:flex;flex-direction:column;justify-content:center;padding-block:2rem 4rem;font-size:clamp(1.9rem,5.2vw,4.6rem)}
.hero h1{max-width:17em;font:inherit;font-weight:200;line-height:1.18;letter-spacing:-.025em;animation:in 2.4s var(--ease) both}
.hero hr{max-width:17em;border:0;height:1px;margin-top:.45em;background:linear-gradient(90deg,var(--line),transparent 70%);transform-origin:left;animation:grow 1.6s .6s var(--ease) both}
.hero p{margin-top:1.1rem;max-width:34rem;font-size:max(1rem,.3em);letter-spacing:.01em;color:var(--mute);animation:in 2.4s .9s var(--ease) both}
.grad{font-weight:500;letter-spacing:-.035em;padding-right:.04em;background:linear-gradient(90deg,#14b8a6,#0ea5e9,#6366f1,#0ea5e9,#14b8a6) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 12s linear infinite}
.w{white-space:nowrap;cursor:default}
.hero em{white-space:nowrap;font-style:normal;font-weight:400}
.ic{display:inline-block;width:.56em;height:.56em;margin:0 .16em 0 .02em;vertical-align:calc((1ex - .56em)/2);overflow:visible;fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.sw:hover .ic{stroke:#0ea5e9;transform:scale(1.15)}
.ap:hover .ic{stroke:#14b8a6;transform:translateY(-.08em) rotate(-8deg)}
.gm:hover .ic{stroke:#6366f1;transform:rotate(12deg) scale(1.15)}

/* Inner pages */
.page{padding-block:clamp(48px,8vw,112px) clamp(64px,9vw,128px)}
.page h1{font-size:clamp(2.8rem,8vw,7rem);font-weight:200;line-height:1;letter-spacing:-.04em;margin-top:1.1rem;animation:in .7s var(--ease) both}
.page .lead{max-width:36rem;margin-top:1.4rem;font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:200;line-height:1.35;color:var(--soft);animation:in .7s .08s var(--ease) both}
.page>.meta{animation:in .7s var(--ease) both}
.sec{margin-top:clamp(80px,12vw,168px)}
.label{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(32px,5vw,64px);font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.meta{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.plat{white-space:nowrap}
.plat svg{display:inline-block;width:1.2em;height:1.2em;margin-right:.4em;vertical-align:-.22em;fill:currentColor}
.meta .plat svg{width:1.3em;height:1.3em;vertical-align:-.28em}
.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.7em;border-radius:50%;background:var(--accent);vertical-align:.15em}
.big{font-size:clamp(2.2rem,5vw,4.4rem);font-weight:200;line-height:1.08;letter-spacing:-.03em}
.body{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--soft);max-width:32rem}
.body+.body{margin-top:1rem}
.more{display:inline-flex;align-items:center;gap:.4em;border-bottom:1px solid var(--line);padding-bottom:2px;font-weight:400;transition:border-color .3s}
.more::after{content:"\2192";transition:transform .5s var(--ease)}
.more:hover{border-color:var(--fg)}
.more:hover::after{transform:translateX(4px)}

/* Product list */
.work{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.work+.work{margin-top:clamp(72px,10vw,140px)}
.work:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.work:nth-of-type(even) .vis{order:2}
.work h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:200;line-height:1.05;letter-spacing:-.03em;margin-top:.8rem}
.work .body{margin-top:1rem}
.work .links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:1.5rem;font-size:16px}
.named{display:flex;align-items:center;gap:.4em}
.appicon{flex:none;width:44px;height:44px;border-radius:22%;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(0,0,0,.3)}
.appicon.lg{width:clamp(48px,6vw,80px);height:clamp(48px,6vw,80px)}
.vis{display:block;border-radius:18px;overflow:hidden;background:var(--panel);aspect-ratio:3/2}
.vis img{width:100%;height:100%;object-fit:cover}

/* Gallery */
.gallery{max-width:60rem;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:clamp(12px,2vw,24px)}
.vis.tall{aspect-ratio:4/5}
.gallery figcaption{margin-top:.8rem;font-size:15px;color:var(--soft)}
.gallery figcaption b{display:block;font-weight:400;color:var(--fg)}

/* About */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem clamp(32px,6vw,96px);align-items:start}
.make{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--cgap)}
.facts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.make svg{width:28px;height:28px;fill:none;stroke:var(--fg);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.make h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:200;letter-spacing:-.02em;margin:1.4rem 0 .5rem}
.make p{color:var(--soft);max-width:22rem}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem var(--cgap);padding-top:1.5rem;border-top:1px solid var(--line)}
.facts dt{margin-bottom:.35rem}
.facts dd{font-size:17px}

/* Contact */
.mail{display:inline-block;margin-top:clamp(28px,4vw,48px);font-size:clamp(1.9rem,6vw,5rem);font-weight:200;letter-spacing:-.035em;line-height:1.1;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease);animation:in .7s .16s var(--ease) both}
.mail:hover{background-size:100% 1px}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem clamp(24px,4vw,64px);padding-top:1.5rem;border-top:1px solid var(--line)}
.reasons h3{font-size:17px;font-weight:400;margin:.6rem 0 .3rem}
.reasons p{color:var(--soft)}

/* Product detail */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem;animation:in .7s .12s var(--ease) both}
.store{display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);font-size:17px;font-weight:400;line-height:1.15;cursor:default;user-select:none}
a.store{cursor:pointer;background:var(--bg);transition:border-color .3s}
a.store:hover{border-color:var(--fg)}
.store svg{width:24px;height:24px;fill:currentColor;opacity:.85}
.store small{display:block;font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hero-vis{max-width:60rem;margin-top:clamp(40px,6vw,72px);animation:in .7s .16s var(--ease) both}
.page .facts{margin-top:clamp(40px,6vw,72px)}
.points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem var(--cgap);margin-top:clamp(56px,8vw,112px)}
.tag{display:inline-block;margin-left:.5em;padding:1px 7px;border:1px solid var(--line);border-radius:999px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);vertical-align:.2em}
.points h2{font-size:19px;font-weight:400;letter-spacing:-.01em;margin-bottom:.4rem}
.points p{color:var(--soft)}
.note{max-width:44rem;margin-top:clamp(56px,8vw,96px);padding:1.1rem 1.4rem;border:1px solid var(--line);border-radius:14px;font-size:16px;color:var(--soft)}
.note b{font-weight:500;color:var(--fg)}
.made{margin-top:clamp(72px,10vw,140px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:baseline}
.made .big{font-size:clamp(1.6rem,3.4vw,2.8rem)}

/* Legal */
.prose{max-width:42rem}
.prose h1{font-size:clamp(2.4rem,6vw,4.8rem)}
.prose h2{font-size:20px;font-weight:400;margin:2.4rem 0 .5rem}
.prose p,.prose li{color:var(--soft);font-size:17px}
.prose p+p{margin-top:.8rem}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--fg)}

/* Footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;padding-block:1.75rem clamp(1.5rem,3vw,2.5rem);font-size:13px;letter-spacing:.02em;color:var(--mute)}
.foot nav{display:flex;gap:1.5rem}
.foot a:hover{color:var(--fg)}

/* Motion */
@keyframes in{from{opacity:0;transform:translateY(8px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes hue{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Small screens */
@media (max-width:1000px){.facts:not(.three),.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .work,.work:nth-of-type(even),.split{grid-template-columns:1fr}
  .work:nth-of-type(even) .vis{order:0}
  .make,.reasons{grid-template-columns:1fr}
  .made{flex-direction:column}
  .gallery{max-width:none;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .gallery figure{scroll-snap-align:start}
}
@media (max-width:560px){.facts,.points{grid-template-columns:1fr}}
@media (max-width:420px){.nav{gap:14px}.top{font-size:14px}}