:root{--ease:cubic-bezier(.16,1,.3,1);--ink-text:#111113}
/* buttons: TITAN skew cut */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-weight:800;font-size:15px;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hi);border-color:var(--red-hi)}
.btn.sm{height:42px;padding:0 18px;font-size:14px}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#000}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform-origin:right;transform:scaleX(0)}


/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;pointer-events:none;transition:color .35s}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:20px var(--gutter)}
.nav a,.nav button{pointer-events:auto}
.brand{display:flex;flex-direction:column;gap:2px;justify-self:start;line-height:1}
.brand b{font:700 30px/0.9 var(--lat);letter-spacing:.32em;margin-inline-end:-.32em}
.brand span{font:800 13px/1 var(--ar);letter-spacing:.02em;opacity:.8}
.nav-mark{justify-self:center;display:block;width:54px;height:45px}
.nav-mark canvas{width:100%;height:100%}
.nav-end{justify-self:end;display:flex;gap:10px;align-items:center}
.menu-btn{width:50px;height:50px;border:1px solid var(--line2);display:grid;place-items:center;transition:border-color .2s,background .2s}
.menu-btn:hover{border-color:currentColor}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .35s var(--ease)}
.menu-btn i::after{content:"";position:absolute;inset-inline-start:6px;top:6px;width:12px;height:2px;background:currentColor;transition:transform .35s var(--ease),inset .35s var(--ease)}
.menu-open .menu-btn i{transform:translateY(3px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translate(0,-6px) rotate(-90deg);inset-inline-start:0;width:18px}
.nav.light{color:var(--ink-text)}
.nav.light .menu-btn{border-color:rgba(0,0,0,.2)}
.nav.light .nav-mark canvas{filter:invert(1)}
@media (max-width:640px){.brand b{font-size:24px}.brand span{font-size:11px}.nav-in{padding-top:14px}.nav .btn.sm{display:none}.nav-mark{width:44px;height:37px}}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:45;background:var(--ink);display:grid;grid-template-columns:1.1fr .9fr;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .menu{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);visibility:visible}
.menu-links{align-self:center;padding:120px var(--gutter) 60px;display:flex;flex-direction:column;gap:4px}
.menu-links a{display:flex;align-items:baseline;gap:18px;font:900 clamp(38px,6vw,84px)/1.12 var(--ar);color:var(--muted);transition:color .25s,transform .4s var(--ease)}
.menu-links a .n{font:600 15px/1 var(--lat);color:var(--red-hi);letter-spacing:.2em}
.menu-links a:hover{color:#fff;transform:translateX(-14px)}
.menu-side{position:relative;background:radial-gradient(60% 50% at 50% 55%,rgba(184,58,64,.32),transparent 70%),var(--panel);display:grid;place-items:center;overflow:hidden}
.menu-side img{width:min(80%,560px)}
.menu-side .socials{position:absolute;inset:auto var(--gutter) 34px;display:flex;gap:22px;justify-content:center;font:700 14px/1 var(--lat);letter-spacing:.2em;color:var(--muted)}
.menu-side .socials a:hover{color:#fff}
@media (max-width:820px){.menu{grid-template-columns:1fr}.menu-side{display:none}}


/* ---------- footer ---------- */
.foot{position:relative;padding:clamp(180px,26vh,260px) var(--gutter) 28px;background:var(--ink)}
.foot-stage{position:relative;max-width:var(--maxw);margin:0 auto}
.foot-card{position:relative;background:linear-gradient(180deg,#16161a,#0e0e11);border:1px solid var(--line);padding:clamp(150px,20vw,250px) clamp(20px,4vw,60px) 34px;clip-path:polygon(0 60px,calc(50% - 230px) 60px,calc(50% - 170px) 0,calc(50% + 170px) 0,calc(50% + 230px) 60px,100% 60px,100% 100%,0 100%)}
.foot-helmet{position:absolute;left:0;right:0;top:0;margin:0 auto;width:min(46vw,520px);transform:translateY(-46%);z-index:2;filter:drop-shadow(0 40px 50px rgba(0,0,0,.7))}
.foot-helmet img{width:100%;height:auto}
.foot-title{text-align:center;font:900 clamp(40px,6.4vw,110px)/1 var(--ar);margin-bottom:56px}
.foot-title .lat{display:block;font-size:.5em;letter-spacing:.2em;color:var(--red-hi);margin-top:10px}
.foot-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:end;border-top:1px solid var(--line);padding-top:30px}
.foot-cols nav{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:18px}
.foot-cols nav a{color:#d6d6dc;transition:color .2s}
.foot-cols nav a:hover{color:var(--red-hi)}
.foot-cols nav.end{text-align:end;font:700 16px/1.6 var(--lat);letter-spacing:.2em}
.foot-cols .mid{text-align:center}
.foot-cols .mid canvas{width:60px;height:50px;margin:0 auto 10px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;font-size:12px;color:var(--dim)}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols .mid{display:none}.foot-card{clip-path:polygon(0 40px,calc(50% - 130px) 40px,calc(50% - 90px) 0,calc(50% + 90px) 0,calc(50% + 130px) 40px,100% 40px,100% 100%,0 100%)}}


/* ---------- app + store (links to app.html / store.html) ---------- */
.nav-link{display:inline-flex;align-items:center;height:42px;padding:0 14px;font-weight:800;font-size:15px;color:inherit;opacity:.82;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.nav-link:hover{opacity:1;border-bottom-color:var(--red-hi)}
@media (max-width:760px){.nav-link{display:none}}
.duo-promo{padding:clamp(80px,10vw,140px) 0;background:var(--ink)}
.duo-promo h2{font-size:clamp(32px,4.6vw,60px);margin:14px 0 34px}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dp-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;min-height:440px;padding:clamp(22px,3vw,40px);border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:border-color .3s,transform .5s var(--ease)}
.dp-card:hover{transform:translateY(-6px);border-color:var(--line2)}
.dp-app{background:radial-gradient(70% 70% at 20% 80%,rgba(198,255,61,.14),transparent 70%),linear-gradient(160deg,#141710,#0b0c0a)}
.dp-store{background:radial-gradient(70% 70% at 30% 90%,rgba(184,58,64,.3),transparent 70%),linear-gradient(160deg,#18181c,#0e0e11)}
.dp-k{font-size:12px;letter-spacing:.3em;color:var(--dim);font-weight:700}
.dp-app .dp-k{color:#c6ff3d}
.dp-card h3{font-size:clamp(34px,4vw,56px);font-weight:900;margin:8px 0 10px}
.dp-card p{color:var(--muted);margin:0 0 22px;max-width:34ch}
.dp-app .btn.primary{background:#c6ff3d;border-color:#c6ff3d;color:#0a0a0a}
.dp-phone{width:clamp(150px,15vw,210px);aspect-ratio:393/852;border-radius:32px;padding:7px;background:linear-gradient(150deg,#4a4b52,#121214 30%,#0e0e10 60%,#3a3b40);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 60px rgba(0,0,0,.7),0 0 70px rgba(198,255,61,.14);transform:rotate(-4deg) translateY(10px);transition:transform .6s var(--ease)}
.dp-card:hover .dp-phone{transform:rotate(0) translateY(0)}
.dp-phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:26px}
.dp-pics{position:relative;width:clamp(170px,17vw,250px);height:260px}
.dp-pics img{position:absolute;filter:drop-shadow(0 20px 20px rgba(0,0,0,.6));transition:transform .6s var(--ease)}
.dp-pics .p1{width:150%;max-width:none;inset-inline-end:-30%;bottom:0}
.dp-pics .p2{width:55%;inset-inline-start:-10%;top:0}
.dp-pics .p3{width:46%;inset-inline-end:0;top:6%}
.dp-card:hover .p1{transform:translateX(-12px)}
.dp-card:hover .p2{transform:translateY(-8px) rotate(-6deg)}
@media (max-width:900px){.dp-grid{grid-template-columns:1fr}.dp-card{min-height:380px}}
@media (max-width:520px){.dp-card{grid-template-columns:1fr}.dp-phone,.dp-pics{justify-self:center}}


/* links to the other pages + solid bar on scroll (added for app.html / store.html) */
.nav-link{display:inline-flex;align-items:center;height:42px;padding:0 14px;font-weight:800;font-size:15px;color:inherit;opacity:.82;border-bottom:2px solid transparent;transition:opacity .2s,border-color .2s}
.nav-link:hover{opacity:1}
.nav-link.on{opacity:1;border-bottom-color:var(--red-hi)}
.nav.solid{background:rgba(7,7,8,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav.solid .nav-in{padding-top:12px;padding-bottom:12px}
.nav-in{transition:padding .3s}
@media (max-width:760px){.nav-link{display:none}}