:root{
  --sf-red:#E53935;
  --sf-blue:#2FA8FF;
  --sf-ink:#0B0F1A;
  --sf-muted:#6B7280;
  --sf-bg:#0B0F1A;
  --sf-card:#111827;
  --sf-white:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--sf-ink);
  background:#fff;
  line-height:1.5;
}

a{color:var(--sf-blue); text-decoration:none}
a:hover{text-decoration:underline}

.sf-container{max-width:1120px; margin:0 auto; padding:0 18px}

/* Header */
.sf-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid #EEF2F7}
.sf-header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px}
.sf-brand{display:flex; align-items:center; gap:10px; min-width:max-content}
.sf-brand img{width:184px; height:auto}
.sf-brand-name{font-weight:900; letter-spacing:.4px}

.sf-header-actions{display:flex; gap:10px; align-items:center}

/* Desktop nav */
.sf-nav{display:block}
.sf-menu{list-style:none; display:flex; gap:14px; padding:0; margin:0; align-items:center}
.sf-menu li{position:relative}
.sf-menu a{color:#111827; font-weight:800}
.sf-menu a:hover{color:var(--sf-red); text-decoration:none}

/* Dropdown */
.sf-menu .sub-menu{display:none; position:absolute; top:100%; left:0; min-width:220px; padding:10px; margin:10px 0 0; list-style:none; background:#fff; border:1px solid #EEF2F7; border-radius:16px; box-shadow:0 18px 50px rgba(2,6,23,.14)}
.sf-menu li:hover > .sub-menu,
.sf-menu li:focus-within > .sub-menu{display:block}
.sf-menu .sub-menu a{display:block; padding:10px 10px; border-radius:12px; font-weight:800}
.sf-menu .sub-menu a:hover{background:rgba(229,57,53,.08)}

.sf-sub-toggle{display:none}

/* Mobile toggle button */
.sf-nav-toggle{display:none; align-items:center; gap:10px; border:1px solid #E5E7EB; background:#fff; border-radius:12px; padding:10px 12px; font-weight:900; cursor:pointer}
.sf-nav-toggle:hover{border-color:#CBD5E1}
.sf-nav-toggle-bars{width:18px; height:12px; position:relative; display:block}
.sf-nav-toggle-bars::before,
.sf-nav-toggle-bars::after{content:""; position:absolute; left:0; right:0; height:2px; background:#111827; border-radius:2px}
.sf-nav-toggle-bars::before{top:0}
.sf-nav-toggle-bars::after{bottom:0}
.sf-nav-toggle-bars{background:linear-gradient(#111827,#111827) center/100% 2px no-repeat}
.sf-nav-toggle-text{font-size:12px}

.sf-nav-overlay{position:fixed; inset:0; background:rgba(2,6,23,.44); z-index:60}

.sf-nav-mobile-head{display:none; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.10)}
.sf-nav-close{font-size:26px; line-height:1; background:transparent; color:#fff; border:0; cursor:pointer}

.sf-nav-actions{display:none; padding:16px; border-top:1px solid rgba(255,255,255,.10); gap:10px}

/* Prevent background scroll when menu open */
.sf-no-scroll{overflow:hidden}

/* Mobile nav (off-canvas) */
@media (max-width: 980px){
  .sf-header-actions{display:none}
  .sf-nav-toggle{display:inline-flex}

  /* Off-canvas panel */
  .sf-nav{position:fixed; top:0; right:0; bottom:0; width:min(92vw, 360px);
    background:linear-gradient(180deg, #0B0F1A, #070A12);
    color:#E5E7EB;
    z-index:70;
    transform:translateX(104%);
    transition:transform .20s ease;
    display:flex;
    flex-direction:column;
    padding:0;
  }
  .sf-nav.is-open{transform:translateX(0)}

  .sf-nav-overlay[hidden]{display:none}
  .sf-nav-overlay{display:block}

  .sf-nav-mobile-head{display:flex; color:#fff}
  .sf-nav-mobile-head strong{font-family:Montserrat, Inter, system-ui}

  .sf-menu{flex-direction:column; align-items:stretch; gap:0; padding:12px 16px; margin:0}
  .sf-menu li{width:100%}
  .sf-menu a{display:block; color:#fff; padding:12px 10px; border-radius:12px}
  .sf-menu a:hover{background:rgba(255,255,255,.06); color:#fff}

  /* Disable hover dropdown behavior on mobile */
  .sf-menu li:hover > .sub-menu,
  .sf-menu li:focus-within > .sub-menu{display:block}

  /* Collapsible submenus */
  .sf-sub-toggle{display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
    position:absolute; right:8px; top:6px;
  }

  .sf-menu .sub-menu{position:static; margin:0; padding:0 0 0 12px; min-width:0;
    border:0; border-radius:0; box-shadow:none; background:transparent;
    display:block;
    max-height:0; overflow:hidden;
    transition:max-height .20s ease;
  }
  .sf-menu .sub-menu a{padding:10px 10px}
  .menu-item-has-children.is-sub-open > .sub-menu{max-height:640px}

  .sf-nav-actions{display:grid}
}

.sf-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; padding:12px 16px; font-weight:900; border:1px solid transparent; cursor:pointer; transition:transform .08s ease, box-shadow .15s ease, background .15s ease}
.sf-btn:active{transform:translateY(1px)}
.sf-btn-primary{background:var(--sf-red); color:#fff; box-shadow:0 10px 24px rgba(229,57,53,.24)}
.sf-btn-primary:hover{background:#D32F2F; text-decoration:none}
.sf-btn-ghost{background:#fff; border-color:#E5E7EB; color:#111827}
.sf-btn-ghost:hover{text-decoration:none; border-color:#CBD5E1}

/* Hero */
.sf-hero{padding:56px 0 26px; background:radial-gradient(1200px 500px at 10% 10%, rgba(47,168,255,.18), transparent 60%), radial-gradient(1200px 500px at 90% 10%, rgba(229,57,53,.18), transparent 60%)}
.sf-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center}
.sf-kicker{display:inline-flex; gap:10px; align-items:center; font-weight:900; color:var(--sf-red)}
.sf-title{font-size:44px; line-height:1.05; margin:12px 0 10px; letter-spacing:-.8px}
.sf-subtitle{color:#374151; font-size:18px; margin:0 0 18px}
.sf-cta{display:flex; flex-wrap:wrap; gap:10px}
.sf-hero-card{background:#fff; border:1px solid #EEF2F7; border-radius:18px; padding:16px; box-shadow:0 16px 44px rgba(2,6,23,.10)}
.sf-hero-card h3{margin:0 0 8px}
.sf-hero-card p{margin:0; color:#4B5563}
.sf-metrics{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px}
.sf-metric{border:1px dashed #E5E7EB; border-radius:14px; padding:10px; text-align:center}
.sf-metric strong{display:block; font-size:18px}
.sf-metric span{color:#6B7280; font-size:12px}

/* Sections */
.sf-section{padding:40px 0}
.sf-section h2{margin:0 0 10px; font-size:28px; letter-spacing:-.4px}
.sf-section p.lead{margin:0 0 18px; color:#4B5563}

/* Tip video */
.sf-video{border-radius:18px; overflow:hidden; border:1px solid #EEF2F7; background:#0B0F1A; box-shadow:0 18px 50px rgba(2,6,23,.14)}
.sf-video iframe{width:100%; height:420px; display:block}

/* About / Meet the Trainer */
.sf-about-hero{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:center}
.sf-about-hero-media{position:relative}
.sf-about-portrait{width:100%; height:420px; object-fit:cover; border-radius:18px; border:1px solid #EEF2F7; box-shadow:0 18px 52px rgba(2,6,23,.12)}
.sf-about-badge{position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid #EEF2F7; border-radius:16px; padding:10px 12px; box-shadow:0 16px 44px rgba(2,6,23,.12)}
.sf-about-badge strong{display:block}
.sf-about-badge span{display:block; font-size:12px; color:#4B5563}
.sf-about-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}

.sf-about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:start}
.sf-about-photo img{width:100%; height:260px; object-fit:cover; border-radius:18px; border:1px solid #EEF2F7; box-shadow:0 12px 34px rgba(2,6,23,.08); margin-top:14px}
.sf-about-side{border:1px solid #EEF2F7; border-radius:18px; padding:14px; background:#fff; box-shadow:0 12px 34px rgba(2,6,23,.08)}
.sf-about-facts{margin:10px 0 0; padding-left:18px; color:#374151}

.sf-cert-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px}
.sf-cert{border:1px solid #EEF2F7; border-radius:18px; padding:14px; background:#fff; box-shadow:0 12px 34px rgba(2,6,23,.08)}
.sf-cert-top{display:flex; align-items:center; gap:10px}
.sf-cert-dot{width:12px; height:12px; border-radius:999px; background:var(--sf-red); box-shadow:0 0 0 6px rgba(229,57,53,.12)}

.sf-about-gallery-head{display:flex; justify-content:space-between; gap:14px; align-items:end; flex-wrap:wrap}
.sf-gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px}
.sf-gallery.sf-gallery-4{grid-template-columns:repeat(4, 1fr)}
.sf-gallery-item{margin:0; border:1px solid #EEF2F7; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 12px 34px rgba(2,6,23,.08)}
.sf-gallery-item img{width:100%; height:240px; object-fit:cover; display:block}
.sf-gallery-item figcaption{padding:10px 12px; font-size:13px; color:#374151}

@media (max-width: 980px){
  .sf-about-hero{grid-template-columns:1fr}
  .sf-about-portrait{height:320px}
  .sf-about-grid{grid-template-columns:1fr}
  .sf-cert-grid{grid-template-columns:1fr}
  .sf-gallery{grid-template-columns:1fr}
}

/* Routine cards */
.sf-grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.sf-grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.sf-card{border:1px solid #EEF2F7; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 12px 34px rgba(2,6,23,.08); transition:transform .12s ease, box-shadow .15s ease}
.sf-card:hover{transform:translateY(-2px); box-shadow:0 18px 52px rgba(2,6,23,.12)}
.sf-card img{width:100%; height:200px; object-fit:cover; display:block}
.sf-card-body{padding:14px}
.sf-tag{display:inline-flex; align-items:center; gap:8px; font-weight:900; color:#fff; background:linear-gradient(90deg, var(--sf-red), #FF6B6B); padding:6px 10px; border-radius:999px; font-size:12px}
.sf-card h3{margin:10px 0 6px}
.sf-card p{margin:0; color:#4B5563}

/* Footer */
.sf-footer{padding:34px 0; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, #0B0F1A, #070A12); color:#E5E7EB}
.sf-footer a{color:#E5E7EB}
.sf-footer a:hover{color:#FFFFFF}

.sf-footer-grid{display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:18px; align-items:start}
.sf-footer-logo{display:flex; gap:12px; align-items:center}
.sf-footer-logo img{width:184px; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.sf-footer-name{font-weight:1000; letter-spacing:.3px; font-family:Montserrat, Inter, system-ui}
.sf-footer-tagline{font-size:12px; color:#9CA3AF}

.sf-footer-h{margin:0 0 10px; font-family:Montserrat, Inter, system-ui; font-size:16px}
.sf-footer-text{margin:10px 0 0; color:#9CA3AF}
.sf-footer-list{margin:0; padding-left:18px; color:#D1D5DB; display:grid; gap:8px}

.sf-footer-social{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}
.sf-social-link{display:inline-flex; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-weight:900; font-size:12px; text-decoration:none}
.sf-social-link:hover{text-decoration:none; background:rgba(229,57,53,.14); border-color:rgba(229,57,53,.35)}

.sf-footer-note{margin-top:10px; font-size:12px; color:#9CA3AF}

.sf-footer-cta{margin-top:12px}

.sf-footer-mini{margin-top:10px; font-size:12px; color:#9CA3AF}

/* Footer newsletter form: dark-mode friendly */
.sf-footer .sf-form{max-width:520px}
.sf-footer .sf-field input,
.sf-footer .sf-field select,
.sf-footer .sf-field textarea{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#FFFFFF;
}
.sf-footer .sf-field input::placeholder,
.sf-footer .sf-field textarea::placeholder{color:rgba(255,255,255,.65)}
.sf-footer .sf-field input:focus,
.sf-footer .sf-field select:focus,
.sf-footer .sf-field textarea:focus{
  outline:2px solid rgba(47,168,255,.35);
  border-color:rgba(47,168,255,.55);
}
.sf-footer .sf-submit{background:var(--sf-red); color:#fff; border:1px solid rgba(255,255,255,.10)}
.sf-footer .sf-submit:hover{background:#D32F2F}

.sf-footer-bottom{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:#9CA3AF; font-size:12px}

@media (max-width: 980px){
  .sf-footer-grid{grid-template-columns:1fr; gap:16px}
}

/* Forms */
.sf-form{display:grid; gap:10px; max-width:560px}
.sf-field{display:grid; gap:6px}
.sf-field label{font-weight:800}
.sf-field input, .sf-field textarea, .sf-field select{
  border:1px solid #E5E7EB; border-radius:12px; padding:12px 12px;
  font:inherit;
}
.sf-field input:focus, .sf-field textarea:focus, .sf-field select:focus{outline:2px solid rgba(47,168,255,.35); border-color:rgba(47,168,255,.55)}
.sf-help{font-size:12px; color:#6B7280}
.sf-note{background:#FFF7ED; border:1px solid #FED7AA; color:#7C2D12; padding:12px; border-radius:14px}

/* Responsive */
@media (max-width: 980px){
  .sf-hero-grid{grid-template-columns:1fr}
  .sf-title{font-size:36px}
  .sf-grid-3{grid-template-columns:1fr}
  .sf-video iframe{height:240px}
  .sf-nav ul{gap:10px}
}
\n\n/* ---- Supastar Fitness Tools (static build) ---- */\n
:root{
  --sf-red:#E53935;
  --sf-blue:#2FA8FF;
  --sf-ink:#0B0F1A;
}

/* Simulator */
.sf-sim{border:1px solid #E5E7EB; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 12px 38px rgba(2,6,23,.08)}
.sf-sim-grid{display:grid; grid-template-columns:1fr 1fr; gap:0}
.sf-sim-left{padding:14px}
.sf-sim-right{padding:14px; background:radial-gradient(600px 300px at 20% 20%, rgba(47,168,255,.12), transparent 60%), radial-gradient(600px 300px at 80% 20%, rgba(229,57,53,.12), transparent 60%)}
.sf-sim-buttons{display:flex; flex-wrap:wrap; gap:8px}
.sf-sim-btn{border:1px solid #E5E7EB; background:#fff; padding:10px 12px; border-radius:999px; font-weight:900; cursor:pointer}
.sf-sim-btn.is-active{border-color:rgba(229,57,53,.5); box-shadow:0 0 0 4px rgba(229,57,53,.10)}
.sf-sim-diagram{margin-top:12px}
.sf-sim-body{position:relative; height:240px; border-radius:18px; border:1px dashed #E5E7EB; background:linear-gradient(180deg, rgba(17,24,39,.03), rgba(17,24,39,.0)); overflow:hidden}
.sf-sim-body:before{content:""; position:absolute; inset:0; background:radial-gradient(260px 120px at 50% 30%, rgba(47,168,255,.10), transparent 60%), radial-gradient(260px 120px at 50% 70%, rgba(229,57,53,.08), transparent 60%);}
.sf-hotspot{position:absolute; width:46px; height:46px; border-radius:999px; border:2px solid rgba(47,168,255,.6); background:rgba(255,255,255,.92); cursor:pointer; box-shadow:0 10px 20px rgba(2,6,23,.10)}
.sf-hotspot:hover{transform:translateY(-1px)}
.sf-hotspot:after{content:""; display:block; width:10px; height:10px; margin:16px auto; border-radius:999px; background:var(--sf-red)}
.hs-core{left:calc(50% - 23px); top:110px}
.hs-chest{left:calc(50% - 23px); top:62px}
.hs-back{left:calc(50% - 23px); top:18px}
.hs-legs{left:calc(50% - 23px); top:170px}
.hs-shoulders{left:calc(50% - 90px); top:40px}
.hs-arms{left:calc(50% + 45px); top:40px}
.sf-sim-hint{margin-top:10px; color:#6B7280; font-size:12px}

.sf-sim-panel{background:#fff; border:1px solid #E5E7EB; border-radius:18px; padding:14px; box-shadow:0 12px 34px rgba(2,6,23,.08)}
.sf-sim-title{font-weight:1000; font-size:18px; margin-bottom:8px}
.sf-sim-list{margin:0; padding-left:18px; display:grid; gap:8px}
.sf-sim-tip{color:#6B7280; font-size:12px}
.sf-sim-cta{margin-top:12px}
.sf-sim-cta-btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:12px; font-weight:900; background:var(--sf-red); color:#fff; text-decoration:none}
.sf-sim-cta-btn:hover{text-decoration:none; background:#D32F2F}

@media (max-width: 980px){
  .sf-sim-grid{grid-template-columns:1fr}
}

/* Consultation Card */
.sf-consult-card{border:1px solid #E5E7EB; border-radius:18px; padding:14px; background:radial-gradient(600px 260px at 20% 20%, rgba(229,57,53,.12), transparent 60%), radial-gradient(600px 260px at 80% 20%, rgba(47,168,255,.12), transparent 60%), #fff; box-shadow:0 12px 34px rgba(2,6,23,.08)}

/* Forms */
.sf-form-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.sf-submit{display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:12px; font-weight:900; border:0; background:var(--sf-red); color:#fff; cursor:pointer; box-shadow:0 14px 34px rgba(229,57,53,.18)}
.sf-submit:hover{filter:brightness(.98)}

.sf-submit-secondary{background:#fff; color:var(--sf-ink); border:1px solid #E5E7EB; box-shadow:0 12px 28px rgba(2,6,23,.08)}
.sf-submit-secondary:hover{border-color:#CBD5E1}

.sf-success{background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; padding:10px 12px; border-radius:12px}

/* Chat widget */
.sf-chat{position:fixed; right:16px; bottom:16px; z-index:9999; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}
.sf-chat-fab{display:flex; align-items:center; gap:10px; border:0; border-radius:999px; padding:12px 14px; font-weight:1000; background:linear-gradient(90deg, var(--sf-red), #FF6B6B); color:#fff; cursor:pointer; box-shadow:0 18px 44px rgba(229,57,53,.24)}
.sf-chat-fab-dot{width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.9); box-shadow:0 0 0 6px rgba(255,255,255,.22)}

.sf-chat-panel{display:none; width:340px; max-width: calc(100vw - 32px); margin-top:10px; background:#fff; border:1px solid #E5E7EB; border-radius:18px; overflow:hidden; box-shadow:0 22px 70px rgba(2,6,23,.20)}
.sf-chat-panel.is-open{display:block}
.sf-chat-head{display:flex; justify-content:space-between; gap:10px; padding:12px 12px; background:radial-gradient(400px 180px at 20% 20%, rgba(47,168,255,.18), transparent 60%), radial-gradient(400px 180px at 80% 20%, rgba(229,57,53,.18), transparent 60%)}
.sf-chat-sub{font-size:12px; color:#4B5563; margin-top:2px}
.sf-chat-close{border:0; background:transparent; font-size:22px; cursor:pointer; line-height:1}

.sf-chat-body{height:260px; overflow:auto; padding:12px; background:#F9FAFB}
.sf-chat-bubble{max-width:84%; padding:10px 12px; border-radius:14px; margin:8px 0; font-size:13px; box-shadow:0 10px 24px rgba(2,6,23,.06)}
.sf-chat-bubble.bot{background:#fff; border:1px solid #E5E7EB}
.sf-chat-bubble.user{background:rgba(47,168,255,.15); border:1px solid rgba(47,168,255,.28); margin-left:auto}

.sf-chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid #E5E7EB; background:#fff}
.sf-chat-input input{flex:1; border:1px solid #E5E7EB; border-radius:12px; padding:10px 12px; font:inherit}
.sf-chat-input button{border:0; border-radius:12px; padding:10px 12px; font-weight:1000; background:var(--sf-blue); color:#fff; cursor:pointer}