.app-page {
  --app-red: #f21f32;
  --app-red-dark: #d91729;
  --app-black: #101115;
  --app-gray: #6e7078;
  --app-line: #e3e3e6;
  --app-soft: #f6f6f7;
  background: #fff;
  color: var(--app-black);
}

.app-page main { overflow: hidden; }
.app-page h1,.app-page h2,.app-page h3,.app-page p,.app-page figure { margin: 0; }

.app-hero > .wc-header.site-container {
  z-index: 20;
  width: calc(100% - 24px);
  max-width: 1736px;
  margin-inline: auto;
  padding: 19px 26px 18px;
}

.app-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px !important;
  color: var(--app-red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.app-eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 58px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 14px/1 var(--t-text-font);
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.app-button:hover { transform: translateY(-2px); }
.app-button--primary { color: #fff; background: var(--app-red); box-shadow: 0 14px 32px rgba(242,31,50,.2); }
.app-button--primary:hover { background: var(--app-red-dark); box-shadow: 0 18px 38px rgba(242,31,50,.27); }
.app-button--secondary { color: var(--app-black); border-color: #dcdde1; background: #fff; }
.app-button--secondary:hover { box-shadow: 0 10px 28px rgba(0,0,0,.08); }

.app-hero { min-height: 100svh; padding-top: 12px; background: linear-gradient(90deg,#fff 0 63%,#fff7f7 100%); }
.app-hero__grid { display: grid; grid-template-columns: minmax(470px,.92fr) minmax(620px,1.08fr); gap: clamp(35px,4vw,72px); align-items: center; min-height: calc(100svh - 108px); padding-top: 42px; padding-bottom: 62px; }
.app-hero__copy { position: relative; z-index: 3; }
.app-hero__title { max-width: 750px; font: italic 900 clamp(70px,7.2vw,132px)/.84 var(--t-headline-font); letter-spacing: -.035em; text-transform: uppercase; }
.app-hero__title span { color: var(--app-red); font-size: .88em; }
.app-hero__lead { max-width: 650px; margin-top: 34px !important; color: var(--app-gray); font-size: clamp(18px,1.35vw,23px); line-height: 1.5; }
.app-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.app-hero__support { display:grid; grid-template-columns:38px 1fr; gap:2px 12px; align-items:center; width:max-content; max-width:100%; margin-top:24px; color:var(--app-black); text-decoration:none; }
.app-hero__support > span { grid-row:1/3; display:grid; width:38px; height:38px; place-items:center; border:1px solid #d9dade; border-radius:50%; color:var(--app-red); font-weight:700; }
.app-hero__support strong { font-size:14px; line-height:1.2; }
.app-hero__support small { color:var(--app-gray); font-size:11px; line-height:1.3; }
.app-hero__support:hover strong { color:var(--app-red); }

.app-hero__visual { position: relative; min-height: min(72vh,750px); }
.app-hero__club-photo { position: absolute; left: 0; top: 14%; width: 62%; height: 72%; overflow: hidden; box-shadow: 0 32px 70px rgba(23,19,20,.12); }
.app-hero__club-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55)); }
.app-hero__club-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.app-hero__club-photo figcaption { position: absolute; z-index: 2; left: 7%; bottom: 5%; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.app-hero__club-photo figcaption span { width: 42px; height: 2px; background: var(--app-red); }
.app-hero__phone { position: absolute; z-index: 3; right: 1%; top: 1%; width: min(29vw,380px); filter: drop-shadow(0 35px 38px rgba(31,24,26,.19)); }
.app-hero__phone img { width: 100%; height: auto; }
.app-hero__stat { position: absolute; z-index: 5; left: -4%; top: 9%; display: grid; min-width: 225px; padding: 20px 26px; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#44454a,#292a2e); box-shadow: 0 18px 38px rgba(0,0,0,.2); }
.app-hero__stat strong { font-size: 38px; line-height: 1; }
.app-hero__stat span { margin-top: 8px; font-size: 12px; line-height: 1.35; }
.app-hero__hint { position: absolute; z-index: 5; right: 0; bottom: 14%; display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; min-width: 190px; padding: 18px 20px; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 18px 42px rgba(32,27,28,.12); }
.app-hero__hint > span { grid-row: 1/3; color: var(--app-red); font-size: 28px; }
.app-hero__hint strong { font-size: 13px; }
.app-hero__hint small { color: var(--app-gray); font-size: 11px; }

.app-reveal { animation: app-reveal .75s both cubic-bezier(.2,.7,.2,1); }
.app-hero__copy > :nth-child(2){animation-delay:.08s}.app-hero__copy > :nth-child(3){animation-delay:.15s}.app-hero__copy > :nth-child(4){animation-delay:.22s}.app-hero__visual{animation-delay:.12s}
@keyframes app-reveal { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }

.app-features,.app-install,.app-faq { padding: clamp(85px,8vw,145px) 0; }
.app-features { background: var(--app-soft); }
.app-section-head { display: grid; grid-template-columns: 1fr minmax(320px,.44fr); gap: 60px; align-items: end; margin-bottom: clamp(50px,6vw,88px); }
.app-section-head h2,.app-faq h2 { font: italic 900 clamp(55px,5.7vw,104px)/.88 var(--t-headline-font); letter-spacing: -.025em; text-transform: uppercase; }
.app-section-head h2 span,.app-faq h2 span { color: var(--app-red); }
.app-section-head > p,.app-install__intro-copy p { color: var(--app-gray); font-size: clamp(17px,1.2vw,20px); line-height: 1.55; }
.app-features__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.app-feature { position: relative; min-height: 330px; padding: clamp(25px,2.2vw,40px); border: 1px solid var(--app-line); border-radius: 18px; background: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.app-feature:hover { transform: translateY(-7px); box-shadow: 0 24px 48px rgba(17,18,21,.08); }
.app-feature__number { position: absolute; right: 28px; top: 27px; color: #aaaab0; font-size: 12px; }
.app-feature svg { width: 50px; height: 50px; margin-top: 40px; fill:none; stroke:var(--app-red); stroke-width:1.6; }
.app-feature h3 { margin-top: 60px; font-size: clamp(20px,1.4vw,26px); line-height: 1.14; }
.app-feature p { margin-top: 14px; color: var(--app-gray); font-size: 15px; line-height: 1.55; }

.app-install { background: #fff; }
.app-section-head--install { grid-template-columns: 1fr minmax(320px,.4fr); }
.app-install__intro-copy { display: grid; gap: 18px; padding-bottom: 6px; }
.app-install__intro-copy a { color: var(--app-red); font-size: 14px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.app-install__panel { border-top: 1px solid var(--app-line); }
.app-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--app-line); }
.app-tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 25px 16px; border: 0; color: #92939a; background: transparent; font: 700 15px/1 var(--t-text-font); cursor: pointer; }
.app-tab small { font-size: 11px; font-weight: 400; }
.app-tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--app-red); transform:scaleX(0); transition:transform .2s ease; }
.app-tab.is-active { color: var(--app-black); }
.app-tab.is-active::after { transform:scaleX(1); }
.app-browser { padding-top: clamp(45px,5vw,80px); }
.app-browser[hidden] { display:none; }
.app-steps { display:grid; justify-content:center; gap:clamp(26px,3vw,56px); margin:0; padding:0; list-style:none; }
.app-steps--two { grid-template-columns:repeat(2,minmax(230px,300px)); }
.app-steps--three { grid-template-columns:repeat(3,minmax(220px,280px)); }
.app-steps--four { grid-template-columns:repeat(4,minmax(190px,250px)); }
.app-step figure { position:relative; overflow:hidden; border-radius:6px; box-shadow:0 20px 42px rgba(20,20,23,.16); background:#f1f1f2; }
.app-step figure::after { content:""; position:absolute; inset:0; border:1px solid rgba(0,0,0,.08); border-radius:inherit; pointer-events:none; }
.app-step img { width:100%; height:auto; }
.app-step > div { display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; margin-top:24px; }
.app-step > div span { display:grid; width:46px; height:46px; place-items:center; border-radius:50%; color:#fff; background:var(--app-red); font-size:20px; font-weight:700; }
.app-step > div p { padding-top:3px; font-size:clamp(15px,1.15vw,18px); line-height:1.45; }

.app-faq { background: var(--app-soft); }
.app-faq__grid { display:grid; grid-template-columns:.52fr 1fr; gap:clamp(50px,8vw,150px); }
.app-faq__heading { align-self:start; position:sticky; top:32px; }
.app-faq__heading > p:last-child { max-width:320px; margin-top:28px; color:var(--app-gray); font-size:15px; line-height:1.55; }
.app-faq__items { border-top:1px solid #d5d5d8; }
.app-faq details { border-bottom:1px solid #d5d5d8; }
.app-faq summary { display:flex; justify-content:space-between; gap:24px; padding:28px 0; font-size:clamp(18px,1.35vw,22px); font-weight:500; line-height:1.4; list-style:none; cursor:pointer; }
.app-faq summary::-webkit-details-marker { display:none; }
.app-faq summary span { position:relative; flex:0 0 30px; width:30px; height:30px; border:1px solid #c9c9cd; border-radius:50%; background:#fff; }
.app-faq summary span::before,.app-faq summary span::after { content:""; position:absolute; left:8px; right:8px; top:14px; height:1px; background:currentColor; }
.app-faq summary span::after { transform:rotate(90deg); transition:transform .2s ease; }
.app-faq details[open] summary span { color:var(--app-red); border-color:var(--app-red); }
.app-faq details[open] summary span::after { transform:none; }
.app-faq details p { max-width:760px; padding:0 56px 28px 0; color:var(--app-gray); font-size:16px; line-height:1.65; }
.app-faq code { color:var(--app-black); background:#e9e9eb; padding:2px 5px; border-radius:4px; }

@media(max-width:1250px){
  .app-hero__grid{grid-template-columns:minmax(420px,.9fr) minmax(500px,1.1fr)}
  .app-hero__title{font-size:clamp(65px,7vw,92px)}
  .app-hero__phone{width:320px}.app-hero__club-photo{width:64%}.app-hero__stat{left:-2%}
  .app-features__grid{grid-template-columns:repeat(2,1fr)}
  .app-steps--four{grid-template-columns:repeat(4,minmax(160px,1fr));gap:24px}
}

@media(max-width:900px){
  .app-hero__grid{grid-template-columns:1fr;min-height:auto;padding-top:70px}
  .app-hero__copy{max-width:700px}.app-hero__visual{min-height:650px;margin-top:10px}
  .app-hero__club-photo{left:5%;width:62%}.app-hero__phone{right:5%;width:330px}.app-hero__stat{left:0}
  .app-section-head,.app-section-head--install,.app-faq__grid{grid-template-columns:1fr;gap:32px}
  .app-steps--four{grid-template-columns:repeat(2,minmax(200px,280px))}
  .app-faq__heading{position:static}
}

@media(max-width:600px){
  .app-hero > .wc-header.site-container{padding:14px 16px;width:calc(100% - 20px)}
  .app-hero{min-height:auto}.app-hero__grid{padding-top:50px;padding-bottom:70px}
  .app-eyebrow{font-size:10px;margin-bottom:18px!important}
  .app-hero__title{font-size:clamp(49px,15vw,68px);line-height:.9}
  .app-hero__lead{margin-top:24px!important;font-size:17px}
  .app-hero__actions{display:grid}.app-button{width:100%}
  .app-hero__facts{gap:14px;font-size:11px}.app-hero__visual{min-height:485px;margin-top:20px}
  .app-hero__club-photo{left:0;top:17%;width:68%;height:67%}.app-hero__phone{right:-5%;top:2%;width:min(62vw,265px)}
  .app-hero__stat{left:0;top:3%;min-width:150px;padding:14px 16px}.app-hero__stat strong{font-size:28px}.app-hero__hint{display:none}
  .app-section-head h2,.app-faq h2{font-size:48px}
  .app-features__grid{grid-template-columns:1fr}.app-feature{min-height:270px}.app-feature svg{margin-top:25px}.app-feature h3{margin-top:45px}
  .app-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--site-gutter)*-1);padding-inline:var(--site-gutter)}.app-tab{flex:0 0 150px}
  .app-steps,.app-steps--two,.app-steps--three,.app-steps--four{display:flex;justify-content:flex-start;gap:18px;overflow-x:auto;margin-inline:calc(var(--site-gutter)*-1);padding:0 var(--site-gutter) 25px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .app-step{flex:0 0 76vw;scroll-snap-align:center}.app-step > div{grid-template-columns:40px 1fr}.app-step > div span{width:40px;height:40px;font-size:17px}
  .app-faq details p{padding-right:20px}
}

@media(prefers-reduced-motion:reduce){.app-reveal{animation:none!important}.app-button,.app-feature{transition:none!important}}