/* ============= CoreWOD — Coming Soon =============
   Mobile-first responsive stylesheet
   Author: ChatGPT (GPT-5 Pro)
   ------------------------------------------------- */
:root{
  --brand:#e64a19;         /* accent orange */
  --brand-2:#ff7043;       /* lighter accent */
  --bg:#0f0f10;
  --text:#f2f2f3;
  --muted:#a7a7ad;
  --card:#16171a;
  --border: #2a2b31;
  --focus: #9dd1ff;
  --success:#36d399;
  --error:#ff6b6b;
  --maxw: 1120px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
}
/* Layout */
.container{
  width:min(95%, var(--maxw));
  margin-inline: auto;
}
header{
  position:sticky; top:0; z-index:40;
  background: linear-gradient(180deg, rgba(15,15,16,.95), rgba(15,15,16,.80) 70%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 0;
}
.brand{
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}
.brand-inner{
  display: flex;
  align-items: center;
  gap: .65rem;
}
.brand img{
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}
.brand .logotext{
  font-size: 1.05rem;
  line-height: 28px;
}
nav a{
  color: var(--muted);
  text-decoration: none;
  margin-left: .9rem;
  font-weight: 600;
  line-height: 1;
}
nav a:hover, nav a:focus{
  color: var(--text);
  outline: none;
}
.button, button, input[type="submit"]{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:1px solid rgba(0,0,0,.25);
  color:#fff; font-weight:800; letter-spacing:.3px;
  padding:.85rem 1.15rem; border-radius:.7rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(230,74,25,.25);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.button.secondary{ 
  background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.button:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.button:active{ transform: translateY(0); }
.button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.small{ font-size:.92rem; padding:.65rem .9rem; }
.tag{
  display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1rem;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12);
  padding:.32rem .6rem; border-radius:.4rem;
  margin-top:.25rem;
}

/* Hero */
.hero{
  position:relative; isolation:isolate;
  min-height: 92dvh;
  display:grid; place-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.38) 45%, rgba(0,0,0,.86)),
                    url("../assets/hero.jpg");
  background-size:cover; background-position:center 35%;
  filter: saturate(.95) contrast(1.05);
  z-index:-2;
}
.hero::after{
  /* fine noise for texture */
  content:""; position:absolute; inset:-5%;
  background-image: radial-gradient(circle at 25% 10%, rgba(255,255,255,.05), transparent 35%),
                    radial-gradient(circle at 80% 30%, rgba(255,255,255,.035), transparent 40%);
  z-index:-1;
}
.hero-inner{
  text-align:center;
  padding: 6rem 0 3.25rem;
}
.hero-panel{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  background: linear-gradient(180deg, rgba(18,19,23,.40), rgba(18,19,23,.32));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 1.5rem 1.3rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 60px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.05);
  max-width: 860px; margin-inline:auto;
}
h1{
  font-size: clamp(1.9rem, 7.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin:0;
}
.lead{
  font-size: clamp(.98rem, 2.7vw, 1.15rem); 
  color:#ececf0; 
  line-height:1.5;
  margin-top:.25rem;
  max-width: 46rem; 
  margin-inline: auto;
}
.cta{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center; margin-top:.6rem;}
.hero .badges{ margin-top:.6rem; display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap; }
.hero .tag{ margin-bottom:.35rem; }

/* Section */
section{ padding: 4.5rem 0; }
.section-title{
  margin:0 0 2rem; font-size: clamp(1.35rem, 2.8vw, 2rem);
}
.cards{
  display:grid; gap:1rem; grid-template-columns:1fr;
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1.25rem;
}
.card h3{ margin:.2rem 0 .6rem; font-size:1.15rem; }
.card p{ margin:.4rem 0; color:#d3d3d8; }
.icon{ font-size:1.35rem; margin-right:.35rem; }

/* Demo (equipment & style picker) */
.demo-grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
}
fieldset{
  border:1px solid var(--border); border-radius:.8rem; padding:1rem; background: #121317;
}
legend{
  padding:0 .5rem; color:#e8e8ec; font-weight:700;
}
.options{ display:flex; flex-wrap:wrap; gap:.5rem; }
.options label{
  border:1px solid var(--border); border-radius:.65rem; padding:.6rem .75rem; cursor:pointer;
  background: #17181c;
}
.options input{ display:none; }
.options input:checked + span{ outline:2px solid var(--brand); }

.range-wrap{ display:flex; align-items:center; gap:1rem; }
.range-wrap input[type="range"]{ width: 250px; }
.output{ font-weight:700; min-width: 2ch; }

.result{
  background: #111216; border:1px dashed var(--brand-2); border-radius:.8rem; padding:1rem;
  min-height: 90px; color:#f7f7fa;
}

/* Join form */
.form{
  background: linear-gradient(180deg, #121317, #0f1014);
  border:1px solid var(--border); border-radius:1rem; padding:1.25rem;
}
.form .row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
input[type="email"], input[type="text"]{
  background:#0f1014; border:1px solid var(--border); border-radius:.6rem; padding:.85rem 1rem; color:#fff;
  width:100%; min-width:unset; height: 48px; flex:1 1 260px;
}
input[type="submit"]{ height: 48px; }
input::placeholder{ color:#9a9aa0; }
.helper{ color:#cfd2da; font-size:.9rem; margin-top:.35rem; }
.legal{ font-size:.8rem; color:#a8a8ae; }
.notice{ font-size:.9rem; color:var(--success); display:none; }
.error{ color:var(--error); font-size:.9rem; display:none; }

/* Footer */
footer{ padding: 2.5rem 0 4rem; color:#bdbdc4; border-top:1px solid var(--border); }
footer a{ color:#e6e6eb; text-decoration:none; }
footer .legal-links{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; }

/* Responsive breakpoints */
@media(max-width:480px){
  .cta .button, .cta .button.secondary{ width:100%; }
}

@media(min-width:640px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}

@media(min-width:768px){
  .demo-grid{ grid-template-columns:1.05fr .95fr; }
  .hero .tag{ margin-bottom:.55rem; }
}

@media(min-width:960px){
  .cards{ grid-template-columns:repeat(3,1fr); }
}

/* Honeypot anti-spam */
.hp{ position:absolute; left:-9999px; height:0; width:0; overflow:hidden; }