:root{
    --grad:linear-gradient(90deg,#14b8f0,#4f5bf0 50%,#8b3dff);
    --display:"Barlow Condensed",Inter,sans-serif;
    --bg:#ffffff;
    --soft:#f6f6f4;
    --line:#e7e7e3;
    --text:#111111;
    --muted:#5f5f5b;
    --faint:#8c8c87;
    --accent:#111111;
    --star:#f5a623;
    --green:#1a7f4b;
    --radius:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:72px}
  body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:700}
  .label{display:inline-block;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:14px}

  /* Nav */
  nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em}
  .brand img{height:42px;width:42px;object-fit:contain}
  .links{display:flex;gap:30px;align-items:center}
  .links a{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s}
  .links a:hover{color:var(--text)}
  .nav-cta{color:#fff;background:var(--accent);padding:9px 16px;border-radius:999px;border:none;font-size:14px;font-weight:600}
  .nav-cta:hover{opacity:.85}
  @media (max-width:720px){.links a{display:none}}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;border:1px solid transparent;transition:transform .15s,opacity .15s,background .15s}
  .btn:hover{transform:translateY(-1px)}
  .btn-dark{background:var(--accent);color:#fff}
  .btn-dark:hover{opacity:.88}
  .btn-light{border-color:var(--line);background:#fff;color:var(--text)}
  .btn-light:hover{background:var(--soft)}

  /* Hero */
  .hero{padding:80px 0 72px}
  .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:7px 14px;border:1px solid var(--line);border-radius:999px;margin-bottom:26px}
  .hero h1{font-size:clamp(42px,6.6vw,72px)}
  .hero h1 span{color:var(--faint)}
  .hero p{font-size:19px;color:var(--muted);max-width:520px;margin:22px 0 34px}
  .btns{display:flex;gap:12px;flex-wrap:wrap}

  /* Hero comparison card */
  .compare{background:var(--soft);border-radius:28px;padding:32px}
  .compare h3{font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted);margin-bottom:22px}
  .row{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
  .row .what{font-weight:500}
  .row .what small{display:block;font-size:13px;color:var(--faint);font-weight:400}
  .row .amt{font-size:28px;font-weight:700;letter-spacing:-.03em}
  .row.retail .amt{color:var(--faint);text-decoration:line-through;text-decoration-thickness:2px}
  .row.ours{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px;margin-top:6px}
  .row.ours .amt{font-size:34px}
  .save{margin-top:18px;font-size:14px;color:var(--muted);font-weight:500;text-align:center}
  @media (max-width:820px){.hero{padding:48px 0}.hero .wrap{grid-template-columns:1fr;gap:40px}}

  /* Stats */
  .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat{padding:30px 8px;text-align:center}
  .stat + .stat{border-left:1px solid var(--line)}
  .stat b{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em}
  .stat span{font-size:14px;color:var(--muted)}
  @media (max-width:700px){.stats .wrap{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:none}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

  section{padding:96px 0}
  .head{max-width:640px;margin-bottom:48px}
  .head.center{text-align:center;margin-left:auto;margin-right:auto}
  .head h2{font-size:clamp(34px,5vw,50px)}
  .head p{font-size:18px;color:var(--muted);margin-top:14px}

  /* About */
  .about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .about h2{font-size:clamp(34px,5vw,50px);margin-bottom:22px}
  .about p{font-size:18px;color:var(--muted);margin-bottom:16px}
  .about p strong{color:var(--text);font-weight:600}
  .features{border-top:1px solid var(--line)}
  .feature{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}
  .feature .num{flex:none;font-size:14px;font-weight:600;color:var(--faint);width:28px;padding-top:2px}
  .feature h3{font-size:18px;letter-spacing:-.01em;margin-bottom:4px}
  .feature p{color:var(--muted);font-size:15px}
  @media (max-width:820px){.about{grid-template-columns:1fr;gap:36px}}

  /* Pricing */
  .pricing{background:var(--soft)}
  .grid4{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .sport{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .2s,box-shadow .2s}
  .sport:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(0,0,0,.25)}
  .sport .icon{font-size:28px}
  .sport h3{font-size:20px;margin:18px 0 4px;letter-spacing:-.01em}
  .sport .price{font-size:40px;font-weight:700;letter-spacing:-.04em}
  .sport .price small{font-size:14px;font-weight:500;color:var(--faint);letter-spacing:0}
  .info{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin-top:32px;font-size:15px;color:var(--muted)}
  .info b{color:var(--text);font-weight:600}
  @media (max-width:1000px){.grid4{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:700px){.grid4{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:440px){.grid4{grid-template-columns:1fr}}

  /* Steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
  .step .n{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:15px;margin-bottom:18px}
  .step h3{font-size:18px;letter-spacing:-.01em;margin-bottom:6px}
  .step p{color:var(--muted);font-size:15px}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:440px){.steps{grid-template-columns:1fr}}

  /* Reviews */
  .reviews-sec{background:var(--soft)}
  .rating-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;font-weight:600}
  .stars{color:var(--star);letter-spacing:1px}
  .featured{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:16px}
  .featured-side{display:grid;gap:16px}
  .review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
  .review blockquote{font-size:16px;line-height:1.6;margin:14px 0 22px;flex:1}
  .review.big blockquote{font-size:21px;line-height:1.5;letter-spacing:-.01em;font-weight:500}
  .who{display:flex;align-items:center;gap:12px}
  .avatar{width:38px;height:38px;border-radius:50%;background:var(--text);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
  .avatar.anon{background:var(--line);color:var(--muted)}
  .who b{font-size:15px;display:block;line-height:1.3}
  .who span{font-size:13px;color:var(--faint)}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
  .tag{font-size:12px;font-weight:500;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 10px}
  .masonry{columns:3 280px;column-gap:16px}
  .masonry .review{break-inside:avoid;margin-bottom:16px;padding:24px}
  .masonry .review blockquote{margin:10px 0 18px;font-size:15px}
  .more{display:none}
  .reviews-sec.expanded .more{display:flex}
  .show-more{display:flex;justify-content:center;margin-top:16px}
  .reviews-sec.expanded .show-more{display:none}
  @media (max-width:820px){.featured{grid-template-columns:1fr}.review.big blockquote{font-size:18px}}

  /* CTA */
  .cta{background:var(--text);color:#fff;border-radius:28px;padding:72px 28px;text-align:center}
  .cta h2{font-size:clamp(34px,5vw,52px)}
  .cta p{color:#b5b5b0;font-size:18px;max-width:520px;margin:16px auto 32px}
  .cta .btn-dark{background:#fff;color:var(--text)}
  .cta .btn-light{background:transparent;border-color:#3a3a38;color:#fff}
  .cta .btn-light:hover{background:#1f1f1e}

  footer{padding:40px 0;color:var(--faint);font-size:14px}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px}

  /* Request form modal */
  dialog{border:none;border-radius:24px;padding:0;width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;color:var(--text);box-shadow:0 40px 80px -20px rgba(0,0,0,.35)}
  dialog::backdrop{background:rgba(17,17,17,.45);backdrop-filter:blur(4px)}
  .modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:28px 28px 8px}
  .modal-head h2{font-size:28px}
  .modal-head p{color:var(--muted);font-size:15px;margin-top:6px}
  .close{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;color:var(--muted)}
  .close:hover{background:var(--soft)}
  form{padding:16px 28px 28px}
  fieldset{border:none;margin-bottom:22px}
  legend{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:12px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
  .field label small{font-weight:400;color:var(--faint)}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:480px){.two{grid-template-columns:1fr}}
  input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f5f5b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(17,17,17,.08)}
  textarea{min-height:96px;resize:vertical}
  .hidden{display:none}
  .reveal{animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .seg label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-weight:500;cursor:pointer;margin:0}
  .seg input{width:auto;accent-color:var(--text)}
  .seg label:has(input:checked){border-color:var(--text);background:var(--soft)}
  .quote{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:15px}
  .quote b{font-size:20px;letter-spacing:-.02em}
  .error{color:#c0392b;font-size:14px;margin-bottom:12px}
  .submit{width:100%;justify-content:center;border:none}
  .submit[disabled]{opacity:.5;cursor:wait}
  .done{padding:48px 28px;text-align:center}
  .done .check{width:56px;height:56px;border-radius:50%;background:var(--text);color:#fff;display:grid;place-items:center;font-size:24px;margin:0 auto 18px}
  .done h2{font-size:28px;margin-bottom:8px}
  .done p{color:var(--muted);margin-bottom:24px}

  /* Size guide */
  .tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:24px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--muted);transition:all .15s}
  .tab:hover{color:var(--text)}
  .tab[aria-selected="true"]{background:var(--text);border-color:var(--text);color:#fff}
  .chart{display:none}
  .chart.active{display:block;animation:fade .25s ease}
  .chart-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .chart-title{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--soft)}
  .chart-title h3{font-size:18px;letter-spacing:-.01em}
  .chart-title span{font-size:13px;color:var(--faint)}
  .scroll{overflow-x:auto}
  table.sz{width:100%;border-collapse:collapse;font-size:15px;white-space:nowrap}
  .sz th,.sz td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
  .sz tr:last-child td{border-bottom:none}
  .sz thead th{font-size:13px;font-weight:700;background:#fff}
  .sz th[scope=row]{text-align:left;font-weight:600;position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line)}
  .sz th[scope=row] small{display:block;font-weight:400;font-size:12px;color:var(--faint)}
  .sz tbody tr:nth-child(even) td,.sz tbody tr:nth-child(even) th{background:#fbfbfa}
  .sz tr.fit td,.sz tr.fit th{color:var(--muted);font-size:14px}
  .tip{display:flex;gap:12px;margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--soft);font-size:14px;color:var(--muted)}
  .tip b{color:var(--text)}
  .measure{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
  .measure div{padding:20px;border:1px solid var(--line);border-radius:var(--radius)}
  .measure h3{font-size:16px;letter-spacing:-.01em;margin-bottom:6px}
  .measure p{font-size:14px;color:var(--muted)}
  @media (max-width:820px){.measure{grid-template-columns:1fr}}
  .size-help{font-size:13px;font-weight:500;color:var(--muted);text-decoration:underline;float:right}

  .social{display:flex;gap:18px;flex-wrap:wrap}
  .social a:hover{color:var(--text)}
  .links a[aria-current]{color:var(--text)}
  .page-head{padding:72px 0 8px}
  .page-head h1{font-size:clamp(40px,6vw,64px)}
  .page-head p{font-size:18px;color:var(--muted);max-width:620px;margin-top:16px}
  #sizes{padding-top:40px}

/* ---- Brand touches from the logo ---- */
nav::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.brand{font-family:var(--display);font-style:italic;font-weight:800;font-size:26px;letter-spacing:.01em;line-height:1}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:2px}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b,.sport .price,.row .amt{font-family:var(--display);font-style:italic;font-weight:800;letter-spacing:0}
.stat b{font-size:42px}
.sport .price{font-size:50px}
.row .amt{font-size:34px}.row.ours .amt{font-size:42px}
.sport{position:relative;overflow:hidden}
.sport::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:opacity .2s}
.sport:hover::before{opacity:1}
.tab[aria-selected="true"]{background:var(--text)}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{width:44px;height:44px;object-fit:contain}
footer .wrap{align-items:center}

/* ---- Mobile menu ---- */
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s}
nav.open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
nav.open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{display:none}
@media (max-width:720px){
  .links{gap:10px}
  .menu-btn{display:flex}
  .nav-cta{padding:9px 13px;font-size:13px;white-space:nowrap}
  .brand{font-size:20px;white-space:nowrap}
  nav.open .mobile-menu{display:flex;flex-direction:column;padding:8px 20px 20px;border-top:1px solid var(--line);background:#fff}
  .mobile-menu a{padding:14px 0;font-size:18px;font-weight:600;border-bottom:1px solid var(--line)}
  .mobile-menu a:last-child{border-bottom:none}
  .mobile-menu a[aria-current]{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* Menu button sits top-left beside the wordmark */
.nav-left{display:flex;align-items:center;gap:12px}

/* Buttons pick up the brand gradient on hover */
.btn-dark,.nav-cta,.submit{background-size:200% 100%;transition:transform .15s,background .25s,box-shadow .25s,color .15s}
.btn-dark:hover,.nav-cta:hover,.submit:hover:not([disabled]){background:var(--grad);opacity:1;box-shadow:0 10px 24px -12px rgba(91,77,240,.6)}
.btn-light:hover{background:#fff;border-color:transparent;box-shadow:inset 0 0 0 1.5px #6b5cf5;color:var(--text)}
.cta .btn-dark:hover{color:#fff}
.cta .btn-light:hover{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #8b7dff}
.tab:hover:not([aria-selected="true"]){border-color:#b9b2f7;color:var(--text)}
.menu-btn:hover{border-color:#b9b2f7}
@media (max-width:420px){
  .nav-left{gap:10px}
  .brand{font-size:18px}
  .nav-cta{padding:8px 12px;font-size:12.5px}
  nav .wrap{gap:10px}
}