/* PeakFit – global styles */
/* Variables */
:root{
  --pf-red:#e0182d;
  --pf-dark:#0f1114;
  --pf-mid:#1c222b;
  --pf-text:#111418;
  --pf-muted:#6b7380;
  --pf-bg:#ffffff;
  --pf-cream:#f7f8fb;
  --pf-green:#22c55e;
  --pf-yellow:#f59e0b;
  --pf-radius:14px;
  --pf-shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--pf-text);
  background:var(--pf-bg);
  line-height:1.6;
}

/* Utilities */
.container{width:min(1120px, 92vw); margin-inline:auto}
.container.narrow{width:min(780px, 92vw)}
.grid{display:grid; gap:24px}
.flex{display:flex; gap:16px; align-items:center}
.center{text-align:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.2rem; border-radius:999px;
  font-weight:700; border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:.2s transform ease, .2s background-color ease, .2s color ease, .2s border-color ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pf-red); color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent; border-color:#fff; color:#fff}
.btn-ghost.dark{border-color:var(--pf-dark); color:var(--pf-dark)}
.badge{display:inline-flex; align-items:center; gap:.45rem; background:#111; color:#fff; padding:.35rem .6rem; border-radius:999px; font-size:.75rem; letter-spacing:.02em}
.badge .dot{width:8px; height:8px; background:var(--pf-green); border-radius:999px}
.kicker{color:var(--pf-red); font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.75rem}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(2rem, 3vw + 1.2rem, 3.25rem)}
h2{font-size:clamp(1.4rem, 1.6vw + 1rem, 2.1rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
ul{margin:0; padding-left:1.1rem}
.card{
  background:#fff; border-radius:var(--pf-radius); box-shadow:var(--pf-shadow);
  padding:24px;
}
.card.dark{background:var(--pf-mid); color:#f7f8fb}
.section{padding:64px 0}
.section.tight{padding:40px 0}
.section.alt{background:var(--pf-cream)}
hr.sep{border:none; height:1px; background:rgba(0,0,0,.08); margin:24px 0}

/* Announcement bar */
.announce{background:linear-gradient(135deg,#fde68a,#fca5a5); color:#111}
.announce .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.announce strong{letter-spacing:.02em}
.announce .close{border:none; background:#00000018; width:34px; height:34px; border-radius:999px; cursor:pointer}
.announce .close:hover{background:#00000024}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:.25s ease padding, .25s ease box-shadow, .25s ease background-color;
}
.header.shrink{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.nav{display:flex; align-items:center; justify-content:center; padding:14px 0; gap:28px; position:relative}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand .logo{
  width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg, var(--pf-red), #ff4d4d);
  display:grid; place-items:center; color:#fff; font-weight:900
}
.brand span{font-weight:900; color:#111; letter-spacing:.01em; white-space:nowrap}
.menu{display:flex; gap:20px; align-items:center}
/* center group: brand + menu */
.menu a{
  color:#1a1f27; text-decoration:none; font-weight:600; padding:.5rem .7rem; border-radius:12px; white-space:nowrap;
}
.menu a.active, .menu a:hover{background:#f1f3f7}
.menu a:focus-visible{outline:3px solid #e0182d33; outline-offset:2px; border-radius:12px}
.menu .btn{padding:.55rem .9rem; font-weight:800; border-radius:999px; box-shadow:0 6px 14px rgba(224,24,45,.18)}
.cta-nav{margin-left:10px}

.burger{display:none; width:44px; height:44px; border-radius:10px; border:1px solid rgba(0,0,0,.1); background:#fff; z-index:60}
@media (max-width: 960px){
  .nav{justify-content:space-between}
  .menu{display:none; position:fixed; inset:calc(64px + env(safe-area-inset-top)) 0 0; background:rgba(255,255,255,.98); backdrop-filter:blur(6px); padding:18px; flex-direction:column; align-items:flex-start; overflow:auto; font-size:1.05rem}
  .menu.open{display:flex}
  .menu a{width:100%; padding:1rem 1.1rem}
  .burger{display:inline-grid; place-items:center}
}

/* Hero */
.hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45)),
    url('https://images.pexels.com/photos/841130/pexels-photo-841130.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
  color:#fff;
}
.hero .container{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center; min-height:70vh}
.hero .card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; backdrop-filter: blur(8px)}
.hero ul{list-style:none; padding:0}
.hero li{display:flex; align-items:flex-start; gap:.6rem; margin:.4rem 0}
.hero li svg{flex:0 0 auto; margin-top:.12rem}

/* Feature rows */
.feature{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center;
}
.feature img{width:100%; height:100%; object-fit:cover; border-radius:16px}
.feature.reverse{grid-template-columns:.95fr 1.05fr}
@media (max-width: 960px){
  .hero .container{grid-template-columns:1fr; min-height:auto; padding:36px 0}
  .feature, .feature.reverse{grid-template-columns:1fr}
}

/* Spotlights / Videos */
.video-grid{display:grid; gap:16px}
.video-grid{grid-template-columns:repeat(3, 1fr)}
.video{
  position:relative; overflow:hidden; border-radius:14px; background:#000; aspect-ratio:16/9; cursor:pointer;
  display:grid; place-items:center; color:#fff;
}
.video::after{
  content:"▶"; font-size:42px; width:62px; height:62px; background:rgba(255,255,255,.1);
  display:grid; place-items:center; border:2px solid #fff; border-radius:999px;
}
.video .label{
  position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.5); padding:.35rem .5rem; border-radius:8px; font-weight:700
}
@media (max-width: 960px){ .video-grid{grid-template-columns:1fr} }

/* Testimonials */
.testimonials{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.testimonial{padding:22px; background:#fff; border-radius:14px; box-shadow:var(--pf-shadow)}
.testimonial .avatar{
  width:44px; height:44px; border-radius:999px; background:linear-gradient(135deg, #fde68a, #fca5a5);
  display:grid; place-items:center; color:#111; font-weight:900
}
@media (max-width:960px){ .testimonials{grid-template-columns:1fr} }

/* Journey steps */
.steps{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.step img{width:100%; border-radius:12px; height:200px; object-fit:cover}
@media (max-width:960px){ .steps{grid-template-columns:1fr} }

/* CTA block */
.cta{
  text-align:center; background:linear-gradient(135deg, var(--pf-red), #ff5858); color:#fff;
  padding:48px; border-radius:16px
}
.cta small{opacity:.9}

/* Footer */
.footer{background:var(--pf-dark); color:#cbd5e1}
.footer a{color:#cbd5e1; text-decoration:none}
.footer .grid{grid-template-columns:2fr 1fr 1fr 1fr; gap:28px}
.footer .brand span{color:#fff}
.footer .fine{color:#7c8696; font-size:.85rem}
.newsletter input{
  width:100%; padding:.8rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:#0b0d11; color:#fff; margin-bottom:10px;
}
@media (max-width:960px){ .footer .grid{grid-template-columns:1fr} }

/* Page banners */
.banner{
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.5)),
  url('https://images.pexels.com/photos/2261477/pexels-photo-2261477.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;
  color:#fff; padding:90px 0 70px; text-align:center
}
.breadcrumbs{font-size:.9rem; opacity:.9}

/* Tables / Pricing */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:14px 12px; border-bottom:1px solid rgba(0,0,0,.08); text-align:left}
.table th{background:#f5f7fb}

/* Forms */
form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:720px){ form .row{grid-template-columns:1fr} }
input, textarea, select{
  width:100%; padding:.9rem 1rem; border:1px solid #d5d9e0; border-radius:12px; outline:none;
  transition:.15s ease; background:#fff; font-size:1rem
}
input:focus, textarea:focus, select:focus{border-color:var(--pf-red); box-shadow:0 0 0 4px #e0182d22}
label{display:block; font-weight:700; margin:.35rem 0}
.form-note{font-size:.9rem; color:var(--pf-muted)}
.alert{padding:12px 14px; border-radius:12px; background:#ecfeff; color:#064e3b; border:1px solid #99f6e4}

/* Modal */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:80; padding:24px
}
.modal.open{display:flex}
.modal .box{width:min(960px, 96vw); background:#000; border-radius:12px; overflow:hidden; position:relative}
.modal .close{
  position:absolute; right:8px; top:8px; width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; cursor:pointer
}
.ratio{position:relative; width:100%; padding-top:56.25%}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%}

/* FAQ */
.faq{display:grid; gap:12px; max-width:900px; margin-inline:auto}
.faq .item{background:#fff; border-radius:12px; box-shadow:var(--pf-shadow); overflow:hidden}
.faq .q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; cursor:pointer}
.faq .q strong{font-size:1rem}
.faq .toggle{flex:0 0 auto; width:28px; height:28px; border-radius:8px; border:1px solid #d8dde6; display:grid; place-items:center}
.faq .a{padding:0 18px 16px 18px; color:var(--pf-muted); display:none}
.faq .item.open .a{display:block}
.faq .item.open .toggle{background:#f5f7fb}

/* Back to top button */
.to-top{
  position:fixed; right:22px; bottom:22px; width:52px; height:52px; border-radius:999px;
  background:linear-gradient(135deg, var(--pf-red), #ff4d4d); color:#fff; border:none; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--pf-shadow); z-index:90; font-size:22px; line-height:1;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:.25s opacity ease, .25s transform ease, .25s filter ease;
}
.to-top:hover{filter:brightness(.96)}
.to-top.show{opacity:1; pointer-events:auto; transform:none}