:root { --blue: #0733c8; --acid: #d8fb23; --ink: #0b1425; --demo-bg: #0b2eab; --demo-text: #fff; --demo-line: #5a79d9; --demo-accent: #d8fb23; --demo-accent-text: #071739; --demo-font: 'Barlow', Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'Barlow', Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.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; }
:focus-visible { outline: 3px solid #e8ff53; outline-offset: 3px; }
.header { position: relative; z-index: 3; height: 78px; display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); padding: 0 clamp(25px, 4vw, 64px); background: var(--blue); color: #fff; }
.brand { flex: 0 0 auto; width: 236px; display: flex; align-items: center; }
.brand img { width: 236px; max-height: 56px; object-fit: contain; object-position: left; }
.nav { display: flex; align-items: center; gap: clamp(19px, 3vw, 42px); }
.nav a { white-space: nowrap; font-weight: 800; font-size: 13px; text-transform: uppercase; }
.nav a:hover { color: var(--acid); }
.search { display: flex; margin-left: auto; width: min(225px, 20vw); height: 39px; background: #fff; }
.search input { width: 100%; min-width: 0; padding: 0 10px; border: 0; outline: 0; color: var(--ink); background: none; font-size: 11px; }
.search button { padding: 0 10px; border: 0; background: #fff; color: var(--blue); font-size: 10px; font-weight: 800; }
.basket { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; border: 0; background: none; color: #fff; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.basket span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--acid); color: #081735; }
.menu-toggle { display: none; }
.hero { position: relative; height: 420px; overflow: hidden; background: var(--blue); color: #fff; }
.hero-photo { position: absolute; inset: 0 0 0 42%; background: url('./assets/hero.webp') center 48% / cover no-repeat; }
.hero-blue { position: absolute; inset: 0 39% 0 0; background: var(--blue); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); }
.hero-content { position: relative; display: flex; align-items: start; flex-direction: column; justify-content: center; width: min(720px, 62%); height: 100%; padding-left: clamp(30px, 4vw, 65px); padding-bottom: 20px; }
.hero h1 { margin: 0; font: italic 900 clamp(78px, 8.4vw, 132px) / .75 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.hero h1 em { display: inline-block; margin-top: 14px; color: var(--acid); font-style: inherit; }
.hero p { margin: 30px 0 25px; font-size: 17px; letter-spacing: .04em; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 52px; padding: 11px 22px; font-size: 14px; font-weight: 800; }
.button-acid { background: var(--acid); color: #0a1530; }
.button:hover, .buy button:hover, .stack-action button:hover { filter: brightness(.91); }
.hero-stamp { position: absolute; right: 20px; bottom: 22px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .24em; }
.ticker { display: flex; justify-content: space-between; align-items: center; gap: 15px; height: 46px; padding: 0 clamp(25px, 4vw, 64px); border-bottom: 1px solid #d7dce2; background: #f0f2f7; color: var(--ink); overflow: hidden; white-space: nowrap; }
.ticker span { font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.ticker span:nth-child(even) { color: var(--blue); }
.goals { padding: 27px clamp(25px, 4vw, 64px) 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.section-heading span { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--blue); }
.section-heading h2 { margin: 5px 0 0; font: italic 900 clamp(45px, 5.5vw, 78px) / .9 'Barlow Condensed', Impact, sans-serif; letter-spacing: -.02em; }
.section-heading p { max-width: 260px; margin: 0; font-size: 13px; line-height: 1.45; }
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.goal { position: relative; height: 135px; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 5px; overflow: hidden; border: 0; padding: 20px 27px; background-size: cover; background-position: 60% center; color: #fff; text-align: left; }
.goal::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(4 12 31 / .85), transparent 86%); }
.goal > * { position: relative; }
.goal strong { font: italic 900 clamp(44px, 4vw, 62px) / .88 'Barlow Condensed', Impact, sans-serif; }
.goal span { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--acid); }
.goal-build { background-image: url('./assets/build.webp'); }
.goal-perform { background-image: url('./assets/perform.webp'); }
.goal-recover { background-image: url('./assets/recover.webp'); }
.goal:hover, .goal[aria-pressed="true"] { outline: 5px solid var(--acid); outline-offset: -5px; }
.shop { padding: 31px clamp(25px, 4vw, 64px) 57px; }
.shop .section-heading { margin-bottom: 24px; }
.shop .section-heading button { padding: 10px 0; border: 0; border-bottom: 2px solid var(--blue); background: none; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #cbd2da; border-bottom: 1px solid #cbd2da; }
.product { display: grid; grid-template-columns: 47% 53%; min-height: 230px; }
.product[hidden] { display: none; }
.product + .product { border-left: 1px solid #cbd2da; }
.product-image { display: grid; place-items: center; background: #f4f6f8; }
.product-image img { width: 95%; height: 195px; object-fit: contain; }
.product-info { display: flex; flex-direction: column; align-items: start; padding: 22px 13px; min-width: 0; }
.product-info > span { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--blue); }
.product-info h3 { margin: 10px 0 3px; font: 800 clamp(22px, 2.2vw, 32px) / .94 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; }
.product-info p { margin: 0; font-size: 12px; color: #5c6570; }
.buy { width: 100%; margin-top: auto; display: grid; gap: 8px; }
.buy strong { font-size: 24px; font-weight: 800; }
.buy button { width: 100%; min-height: 38px; border: 0; background: var(--acid); color: var(--ink); font-size: 12px; font-weight: 800; }
.results-empty { padding: 20px; background: #eee; }
.stack { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 190px; padding: 28px clamp(25px, 4vw, 64px); background: var(--blue); color: #fff; }
.stack > div:first-child > span { color: var(--acid); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.stack h2 { margin: 6px 0 0; font: italic 900 clamp(43px, 4.7vw, 70px) / .9 'Barlow Condensed', Impact, sans-serif; }
.stack p { margin: 12px 0 0; font-size: 13px; }
.stack-action { display: flex; align-items: center; gap: 24px; }
.stack-action strong { white-space: nowrap; font-size: 29px; }
.stack-action button { min-height: 49px; padding: 10px 25px; border: 0; background: var(--acid); color: var(--ink); white-space: nowrap; font-size: 13px; font-weight: 800; }
.about { display: flex; align-items: center; gap: 36px; padding: 25px clamp(25px, 4vw, 64px); background: #09152d; color: #fff; }
.about strong { color: var(--acid); font: italic 900 25px 'Barlow Condensed', Impact, sans-serif; white-space: nowrap; }
.about p { max-width: 520px; margin: 0; color: #d5ddee; font-size: 11px; line-height: 1.5; }
.about a { margin-left: auto; font-size: 11px; font-weight: 800; white-space: nowrap; }
@media (max-width: 1150px) { .header { gap: 19px; } .search { display: none; } .product { display: block; } .product-image img { height: 160px; } .product-info { min-height: 190px; } }
@media (max-width: 700px) { .header { height: 66px; padding: 0 15px; gap: 10px; } .brand, .brand img { width: 165px; max-height: 49px; } .menu-toggle { display: block; margin-left: auto; padding: 7px 9px; border: 1px solid #86a0e4; background: none; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; } .nav { display: none; position: absolute; z-index: 12; top: 66px; left: 0; right: 0; padding: 12px 19px; background: var(--blue); flex-direction: column; align-items: start; gap: 0; box-shadow: 0 15px 20px rgb(0 0 0 / .2); } .nav.is-open { display: flex; } .nav a { padding: 10px 0; width: 100%; } .basket { font-size: 0; gap: 0; } .basket::before { content: 'BASKET'; font-size: 10px; } .basket span { width: 22px; height: 22px; margin-left: 5px; font-size: 10px; } .hero { height: 620px; } .hero-photo { inset: 0 0 42% 0; background-position: 65% center; } .hero-blue { inset: 46% 0 0 0; clip-path: none; } .hero-content { justify-content: end; width: 100%; padding: 0 17px 53px; } .hero h1 { font-size: clamp(67px, 18vw, 108px); } .hero p { font-size: 15px; margin: 19px 0; } .hero-stamp { right: 15px; bottom: 14px; font-size: 8px; } .ticker { height: 39px; padding: 0 17px; } .ticker span { font-size: 9px; } .ticker span:nth-child(n+3) { display: none; } .goals { padding: 35px 14px 25px; } .section-heading { display: block; } .section-heading h2 { font-size: 56px; } .section-heading p { margin-top: 10px; } .goal-grid { grid-template-columns: 1fr; gap: 9px; } .goal { height: 128px; background-position: 70% center; } .goal strong { font-size: 52px; } .shop { padding: 30px 14px 42px; } .shop .section-heading { display: flex; align-items: end; } .shop .section-heading h2 { font-size: 43px; } .shop .section-heading button { font-size: 9px; } .products { grid-template-columns: 1fr; } .product { display: grid; grid-template-columns: 42% 58%; min-height: 188px; } .product + .product { border-left: 0; border-top: 1px solid #cbd2da; } .product-image img { height: 175px; } .product-info { min-height: 0; padding: 14px 12px; } .product-info h3 { font-size: 24px; } .buy strong { font-size: 21px; } .buy button { min-height: 34px; } .stack { display: block; min-height: 0; padding: 32px 18px; } .stack h2 { font-size: 52px; } .stack-action { margin-top: 25px; } .stack-action strong { font-size: 23px; } .stack-action button { flex: 1; padding: 10px; } .about { display: block; padding: 25px 18px; } .about p { margin: 8px 0; } .about a { display: inline-block; margin-top: 10px; } }