:root{
    --dark:#41332a;
    --accent:#9f6d44;
    --cream:#eee9e7;
    --cream2:#eee7e4;
    --cream3:#f2ece9;
    --gray:#d9d9d9;
    --gray2:#aaaaaa;
    --canvas-w:1920px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{background:var(--dark);}
  body{
    font-family:'Assistant', sans-serif;
    background:var(--dark);
    direction:ltr;
    display:flex;
    justify-content:center;
    overflow-x:hidden;
  }
  .scaler{
    transform-origin:top center;
  }
  .page{
    direction:rtl;
  }
  .page{
    position:relative;
    width:var(--canvas-w);
    height:7300px;
    background:var(--cream) url('../images/background.png') no-repeat center 790px;
    background-size: 100% auto;
    overflow:hidden;
    flex:none;
  }
  .abs{position:absolute;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{display:block; max-width:none;}

  /* ---------- HEADER / NAV ---------- */
  .hero{
    position:relative;
    width:1920px; height:980px;
    background:
      linear-gradient(180deg, rgba(65,51,42,.55) 0%, rgba(65,51,42,.25) 45%, rgba(65,51,42,.65) 100%),
      linear-gradient(120deg,#6b5645,#3a2e26 60%,#22190f);
    background-blend-mode:multiply, normal;
  }
  .nav{
    position:absolute; top:27px; left:0; width:1920px;
    display:flex; justify-content:center; gap:60px; flex-direction:row-reverse;
  }
  .nav a{font-size:20px; color:var(--cream2); font-weight:400; white-space:nowrap;}
  .logo-wrap{
    position:absolute; top:327px; left:616px; width:689px; height:210px;
    text-align:center; color:var(--cream3);
  }
  .logo-wrap .logo-title{
    font-size:88px; font-weight:700; letter-spacing:2px; line-height:1;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .logo-wrap .logo-title .dot{color:var(--accent); font-size:34px;}
  .logo-wrap .logo-tag{
    margin-top:18px; font-size:20px; letter-spacing:6px; font-weight:300; opacity:.85;
  }
  .hero-btn{
    position:absolute; top:589px; width:160px; height:64px;
    background:var(--accent); color:var(--cream3);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:400; box-shadow:0 3px 8px rgba(0,0,0,.25);
    border:none; cursor:pointer; font-family:'Assistant', sans-serif;
    transition: all 0.3s ease;
  }
  .hero-btn:hover{
    background: #fff;
    color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
  }
  .hero-btn.book{left:780px;}
  .hero-btn.join{left:980px;}

  /* Scroll Indicator */
  .scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 1s ease 1.5s both;
  }

  .scroll-arrow {
    width: 30px;
    height: 50px;
    border: 2px solid var(--cream3);
    border-radius: 25px;
    position: relative;
  }

  .scroll-arrow::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--cream3);
    border-radius: 50%;
    animation: scrollDown 2s ease-in-out infinite;
  }

  /* ---------- SECTION HEADINGS w/ divider lines ---------- */
  .section-heading{
    position:absolute; text-align:center; width:100%;
  }
  .section-heading h2{
    font-size:48px; font-weight:700; color:var(--dark); display:inline-block; position:relative;
  }
  .section-heading .rule{
    position:absolute; top:32px; width:108px; height:1px; background:var(--dark);
  }
  .heading-trainings{ top:3997px;}
  .heading-programs{ top:5100px;}
  .heading-studio{ top:1000px;}
  .heading-benefits{ top:2079px;}

  /* generic centered heading construction */
  .center-heading{ position:absolute; left:0; right:0; width:100%; text-align:center; }
  .center-heading h2{ font-size:48px; font-weight:700; color:var(--dark); position:relative; display:inline-block; padding:0 30px;}
  .center-heading h2::before, .center-heading h2::after{
    content:""; position:absolute; top:32px; width:108px; height:1px; background:var(--dark);
  }
  .center-heading h2::before{ right:100%; }
  .center-heading h2::after{ left:100%; }

  /* ---------- STUDIO SECTION ---------- */
  .studio-photo{
    position:absolute; top:1080px; left:240px; width:582px; height:700px;
    overflow:hidden; border-radius:4px; z-index:10;
  }
  .studio-photo img{width:100%; height:100%; object-fit:cover;}
  .studio-photo .badge{
    position:absolute; top:24px; left:24px; color:var(--cream3);
    font-size:34px; font-weight:700;
  }
  .studio-text{
    position:absolute; top:1380px; right:240px; width:560px;
    font-size:22px; line-height:1.55; color:var(--dark); text-align:right;
  }
  .studio-text p{margin-bottom:16px;}

  /* ---------- BENEFITS ---------- */
  .benefit{
    position:absolute; width:280px; text-align:center; color:var(--dark);
  }
  .benefit .icon{width:110px; height:130px; margin:0 auto 20px; object-fit:contain;}
  .benefit h3{font-size:24px; font-weight:600; margin-bottom:20px;}
  .benefit p{font-size:20px; line-height:1.5;}
  .benefit.b1{ top:2380px; left:783px; width:220px;}
  .benefit.b2{ top:2560px; left:1355px; width:346px; text-align:center;}
  .benefit.b3{ top:2560px; left:783px; width:346px;}
  .benefit.b4{ top:2560px; left:207px; width:346px;}

  /* ---------- CTA BANNER ---------- */
  .cta{
    position:relative; width:1920px; height:672px;
    background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
      linear-gradient(120deg,#7c6852,#3a2e26);
    background-blend-mode:normal;
  }
  .cta h2{
    position:absolute; top:195px; left:0; right:0; width:100%;
    font-size:48px; font-weight:700; color:var(--cream3); text-align:center;
  }
  .cta .sub{
    position:absolute; top:268px; left:0; right:0; width:100%;
    font-size:32px; color:var(--cream3); text-align:center; line-height:1.4;
  }
  .cta-form{
    position:absolute; top:380px; left:0; right:0; width:100%;
    display:flex; flex-direction:column; align-items:center; gap:20px;
  }
  .cta-inputs{
    display:flex; gap:20px; direction:rtl;
  }
  .cta-input{
    width:220px; height:64px; background:var(--gray); color:var(--dark);
    font-size:20px; text-align:center; border:none; font-family:inherit;
    border-radius:4px;
  }
  .cta-input::placeholder{
    color:var(--gray2);
  }
  .cta-submit{
    width:200px; height:64px; background:var(--accent); color:var(--cream3);
    font-size:24px; border:none; cursor:pointer; font-family:'Assistant', sans-serif;
    transition: all 0.3s ease; border-radius:4px;
  }
  .cta-submit:hover{
    background: #fff;
    color: var(--accent);
    transform: translateY(-2px);
  }

  /* ---------- TRAININGS GRID ---------- */
  .trainings-wrap{ position:absolute; top:4160px; left:0; width:1920px; height:700px;}
  
  /* Floating Elements Animation - MILLION DOLLAR EDITION */
  .floating-elements{
    position:absolute;
    top:3800px; left:0; width:1920px; height:2400px;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  
  .float-icon{
    position:absolute;
    width:60px; height:60px;
    background: url('../images/float.png') no-repeat center;
    background-size:contain;
    opacity:0.12;
    filter: drop-shadow(0 0 8px rgba(159,109,68,0.3));
  }
  
  /* CRAZY ANIMATIONS */
  @keyframes floatMagic {
    0% { transform: translateY(0) translateX(0) rotate(0deg) scale(1); }
    20% { transform: translateY(-60px) translateX(30px) rotate(72deg) scale(1.2); }
    40% { transform: translateY(-30px) translateX(-40px) rotate(144deg) scale(0.8); }
    60% { transform: translateY(-80px) translateX(20px) rotate(216deg) scale(1.3); }
    80% { transform: translateY(-20px) translateX(-30px) rotate(288deg) scale(0.9); }
    100% { transform: translateY(0) translateX(0) rotate(360deg) scale(1); }
  }
  
  @keyframes floatDance {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); filter: hue-rotate(0deg); }
    25% { transform: translateY(-50px) rotate(90deg) scale(1.4); filter: hue-rotate(30deg); }
    50% { transform: translateY(-100px) rotate(180deg) scale(0.7); filter: hue-rotate(60deg); }
    75% { transform: translateY(-30px) rotate(270deg) scale(1.2); filter: hue-rotate(90deg); }
  }
  
  @keyframes floatZigzag {
    0% { transform: translateX(0) translateY(0); }
    10% { transform: translateX(50px) translateY(-20px); }
    20% { transform: translateX(0) translateY(-50px); }
    30% { transform: translateX(-50px) translateY(-30px); }
    40% { transform: translateX(0) translateY(-80px); }
    50% { transform: translateX(60px) translateY(-60px); }
    60% { transform: translateX(0) translateY(-100px); }
    70% { transform: translateX(-60px) translateY(-70px); }
    80% { transform: translateX(0) translateY(-40px); }
    90% { transform: translateX(40px) translateY(-20px); }
    100% { transform: translateX(0) translateY(0); }
  }
  
  @keyframes floatSpiral {
    0% { transform: rotate(0deg) translateX(0) rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) translateX(40px) rotate(-90deg) scale(1.3); }
    50% { transform: rotate(180deg) translateX(0) rotate(-180deg) scale(0.8); }
    75% { transform: rotate(270deg) translateX(40px) rotate(-270deg) scale(1.2); }
    100% { transform: rotate(360deg) translateX(0) rotate(-360deg) scale(1); }
  }
  
  @keyframes floatBounce {
    0%, 100% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
    25% { transform: translateY(-80px) scale(1.1); animation-timing-function: ease-in; }
    50% { transform: translateY(-20px) scale(0.95); animation-timing-function: ease-out; }
    75% { transform: translateY(-60px) scale(1.05); animation-timing-function: ease-in; }
  }
  
  @keyframes floatWave {
    0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
    12.5% { transform: translateY(-30px) translateX(40px) rotate(15deg); }
    25% { transform: translateY(-60px) translateX(0) rotate(0deg); }
    37.5% { transform: translateY(-30px) translateX(-40px) rotate(-15deg); }
    50% { transform: translateY(0) translateX(0) rotate(0deg); }
    62.5% { transform: translateY(30px) translateX(40px) rotate(15deg); }
    75% { transform: translateY(0) translateX(0) rotate(0deg); }
    87.5% { transform: translateY(-30px) translateX(-40px) rotate(-15deg); }
  }
  
  @keyframes floatPulseGlow {
    0%, 100% { transform: scale(1); opacity:0.1; filter: drop-shadow(0 0 5px rgba(159,109,68,0.2)); }
    50% { transform: scale(1.5); opacity:0.25; filter: drop-shadow(0 0 20px rgba(159,109,68,0.5)); }
  }
  
  @keyframes floatInfinity {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(50px) translateY(-50px); }
    50% { transform: translateX(0) translateY(0); }
    75% { transform: translateX(-50px) translateY(-50px); }
    100% { transform: translateX(0) translateY(0); }
  }
  
  /* LEFT SIDE */
  .float-icon:nth-child(1) { top:3%; left:3%; animation: floatMagic 12s ease-in-out infinite; width:70px; height:70px; }
  .float-icon:nth-child(2) { top:12%; left:8%; animation: floatDance 10s ease-in-out infinite 0.5s; width:55px; height:55px; }
  .float-icon:nth-child(3) { top:25%; left:2%; animation: floatZigzag 15s linear infinite 1s; width:45px; height:45px; }
  .float-icon:nth-child(4) { top:38%; left:10%; animation: floatSpiral 18s linear infinite 1.5s; width:80px; height:80px; }
  .float-icon:nth-child(5) { top:52%; left:4%; animation: floatBounce 8s ease-in-out infinite 2s; width:60px; height:60px; }
  .float-icon:nth-child(6) { top:68%; left:7%; animation: floatWave 14s ease-in-out infinite 0.8s; width:50px; height:50px; }
  .float-icon:nth-child(7) { top:82%; left:3%; animation: floatPulseGlow 6s ease-in-out infinite 2.5s; width:65px; height:65px; }
  .float-icon:nth-child(8) { top:92%; left:9%; animation: floatInfinity 11s ease-in-out infinite 1.2s; width:40px; height:40px; }
  
  /* RIGHT SIDE */
  .float-icon:nth-child(9) { top:5%; right:5%; animation: floatDance 11s ease-in-out infinite 0.3s; width:65px; height:65px; }
  .float-icon:nth-child(10) { top:18%; right:9%; animation: floatMagic 14s ease-in-out infinite 1.8s; width:50px; height:50px; }
  .float-icon:nth-child(11) { top:32%; right:3%; animation: floatBounce 9s ease-in-out infinite 0.6s; width:75px; height:75px; }
  .float-icon:nth-child(12) { top:45%; right:11%; animation: floatZigzag 16s linear infinite 2.2s; width:55px; height:55px; }
  .float-icon:nth-child(13) { top:58%; right:6%; animation: floatSpiral 20s linear infinite 1s; width:85px; height:85px; }
  .float-icon:nth-child(14) { top:72%; right:4%; animation: floatWave 12s ease-in-out infinite 3s; width:45px; height:45px; }
  .float-icon:nth-child(15) { top:85%; right:8%; animation: floatPulseGlow 7s ease-in-out infinite 0.4s; width:70px; height:70px; }
  .float-icon:nth-child(16) { top:95%; right:2%; animation: floatInfinity 13s ease-in-out infinite 2.8s; width:60px; height:60px; }
  
  /* CENTER - THE MAGIC */
  .float-icon:nth-child(17) { top:8%; left:30%; animation: floatMagic 15s ease-in-out infinite 0.7s; width:40px; height:40px; opacity:0.08; }
  .float-icon:nth-child(18) { top:15%; left:45%; animation: floatDance 13s ease-in-out infinite 1.3s; width:35px; height:35px; opacity:0.06; }
  .float-icon:nth-child(19) { top:22%; left:60%; animation: floatSpiral 17s linear infinite 2s; width:45px; height:45px; opacity:0.08; }
  .float-icon:nth-child(20) { top:35%; left:35%; animation: floatBounce 10s ease-in-out infinite 0.9s; width:50px; height:50px; opacity:0.07; }
  .float-icon:nth-child(21) { top:42%; left:55%; animation: floatZigzag 14s linear infinite 1.6s; width:38px; height:38px; opacity:0.06; }
  .float-icon:nth-child(22) { top:55%; left:40%; animation: floatWave 11s ease-in-out infinite 2.4s; width:42px; height:42px; opacity:0.08; }
  .float-icon:nth-child(23) { top:65%; left:50%; animation: floatInfinity 16s ease-in-out infinite 0.5s; width:55px; height:55px; opacity:0.07; }
  .float-icon:nth-child(24) { top:75%; left:38%; animation: floatPulseGlow 8s ease-in-out infinite 1.8s; width:48px; height:48px; opacity:0.09; }
  .float-icon:nth-child(25) { top:88%; left:52%; animation: floatMagic 19s ease-in-out infinite 3.2s; width:36px; height:36px; opacity:0.06; }
  .float-icon:nth-child(26) { top:28%; left:25%; animation: floatDance 12s ease-in-out infinite 2.6s; width:32px; height:32px; opacity:0.05; }
  .float-icon:nth-child(27) { top:48%; left:65%; animation: floatSpiral 21s linear infinite 1.1s; width:44px; height:44px; opacity:0.07; }
  .float-icon:nth-child(28) { top:78%; left:28%; animation: floatBounce 9s ease-in-out infinite 3.5s; width:52px; height:52px; opacity:0.08; }
  .train-card{
    position:absolute; width:460px; height:560px; background:var(--cream);
    box-shadow:0 4px 12px rgba(0,0,0,.25);
  }
  .train-card .photo{width:100%; height:278px; overflow:hidden; position:relative;}
  .train-card .photo img{width:100%; height:100%; object-fit:cover;}
  .train-card .photo::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.2);}
  .train-card h3{ text-align:center; font-size:32px; font-weight:700; color:var(--dark); margin-top:30px;}
  .train-card p{ text-align:center; font-size:20px; color:var(--dark); margin-top:12px; padding:0 40px; line-height:1.4;}
  .train-card .link{
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    font-size:24px; font-weight:700; color:var(--accent); text-decoration:underline;
  }
  .col1{left:240px;} .col2{left:730px;} .col3{left:1220px;}
  .row1{top:0;} .row2{top:590px;}
  .show-more{
    position:absolute; top:600px; left:50%; transform:translateX(-50%);
    font-size:24px; font-weight:700; color:var(--dark); text-decoration:underline;
  }

  /* ---------- PRICING ---------- */
  .pricing-wrap{ position:absolute; top:5260px; left:0; width:1920px; height:790px;}
  .price-card{
    position:absolute; width:460px; height:790px; box-shadow:0 4px 12px rgba(0,0,0,.25);
    padding:30px 40px; text-align:center;
  }
  .price-card.tier1{ left:240px; top:0; background:var(--dark); color:var(--cream);}
  .price-card.tier2{ left:730px; top:0; background:var(--cream);}
  .price-card.tier3{ left:1220px; top:0; background:var(--cream);}
  .price-card .plan{font-size:24px; font-weight:400; margin-bottom:10px;}
  .price-card .lessons{font-size:40px; font-weight:700; margin-bottom:10px;}
  .price-card .price{font-size:64px; font-weight:700;}
  .price-card .price small{font-size:32px;}
  .price-card .yearly{font-size:20px; font-weight:400; margin-top:6px;}
  .price-card .desc{font-size:24px; margin-top:16px; line-height:1.4;}
  .price-card .divider{height:1px; background:currentColor; opacity:.35; margin:24px 0;}
  .price-card ul{margin-top:6px;}
  .price-card li{
    font-size:20px; text-align:right; padding-right:26px; position:relative; margin-bottom:20px; line-height:1.3;
  }
  .price-card li::before{
    content:"✓"; position:absolute; right:0; top:0; color:var(--accent); font-weight:700;
  }
  .price-card.tier1 li::before{ color:var(--cream);}
  .price-btn{
    position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    width:155px; height:64px; display:flex; align-items:center; justify-content:center;
    font-size:20px; font-weight:700; cursor:pointer; border:none; font-family:'Assistant', sans-serif;
    transition: all 0.3s ease;
  }
  .price-card.tier1 .price-btn{ background:var(--cream); color:var(--dark);}
  .price-card.tier1 .price-btn:hover{ background:#fff; color:var(--accent); transform:translateX(-50%) translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.2);}
  .price-card.tier2 .price-btn{ background:var(--accent); color:var(--cream);}
  .price-card.tier2 .price-btn:hover{ background:#fff; color:var(--accent); transform:translateX(-50%) translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.2);}
  .price-card.tier3 .price-btn{ background:var(--dark); color:var(--cream);}
  .price-card.tier3 .price-btn:hover{ background:#fff; color:var(--dark); transform:translateX(-50%) translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.2);}

  /* ---------- CTA 2 ---------- */
  .cta2{
    position:relative; width:2546px; height:671px; left:50%; transform:translateX(-50%);
    background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), linear-gradient(120deg,#7c6852,#3a2e26);
    margin-top:0;
  }
  .cta2 h2{ position:absolute; top:195px; left:50%; transform:translateX(-50%); font-size:48px; font-weight:700; color:var(--cream3); white-space:nowrap;}
  .cta2 .sub{ position:absolute; top:268px; left:50%; transform:translateX(-50%); font-size:32px; color:var(--cream3); text-align:center; line-height:1.4;}
  .cta2-form{ position:absolute; top:413px; left:50%; transform:translateX(-50%); display:flex;}

  /* ---------- FOOTER ---------- */
  .footer{
    position:relative; width:1920px; height:679px; background:var(--dark); color:var(--cream3);
  }
  .footer-col{ position:absolute; top:60px; text-align:right;}
  .footer-col h4{ font-size:20px; font-weight:700; margin-bottom:33px;}
  .footer-col a, .footer-col p{ display:block; font-size:20px; font-weight:400; margin-bottom:22px; color:var(--cream3);}
  .footer-col.nav1{ right:290px;}
  .footer-col.nav2{ right:530px;}
  .footer-col.nav3{ right:790px; text-align:left; left:80px; right:auto;}
  .footer-hours{ position:absolute; top:190px; right:130px; font-size:20px; text-align:right; line-height:1.6;}
  .footer-map{
    position:absolute; top:135px; left:240px; width:262px; height:262px; overflow:hidden; border-radius:4px;
  }
  .footer-map img{width:100%; height:100%; object-fit:cover;}
  .footer-line{ position:absolute; bottom:112px; left:240px; width:1440px; height:1px; background:rgba(238,231,228,.3);}
  .footer-copy{ position:absolute; bottom:60px; right:130px; font-size:20px;}
  .footer-social{ position:absolute; bottom:55px; left:240px; display:flex; gap:24px; font-size:24px;}

  @media (max-width:1920px){
    body{ overflow-x:auto; }
  }

  /* ========== ANIMATIONS ========== */
  
  /* Hero Background Zoom */
  @keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
  }
  
  .hero {
    overflow: hidden;
  }
  
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    animation: heroZoom 20s ease-in-out infinite alternate;
    z-index: -1;
  }

  /* Fade In Up Animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Fade In Animation */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Slide In from Left */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Slide In from Right */
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Scale In */
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Hero Nav Animation */
  .nav {
    animation: fadeIn 1s ease 0.3s both;
  }

  .nav a {
    transition: all 0.3s ease;
  }

  .nav a:hover {
    color: var(--accent);
    transform: translateY(-2px);
  }

  /* Hero Buttons Animation */
  .hero-btn.book {
    animation: fadeInUp 0.8s ease 0.8s both;
  }

  .hero-btn.join {
    animation: fadeInUp 0.8s ease 1s both;
  }

  /* Studio Section Animations */
  .studio-photo {
    animation: slideInLeft 1s ease both;
  }

  .studio-text {
    animation: slideInRight 1s ease 0.3s both;
  }

  /* Benefits Icons Float */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .benefit .icon,
  img[src*="icon-"] {
    transition: transform 0.3s ease;
  }

  img[src*="icon-"]:hover {
    transform: scale(1.1);
    animation: float 2s ease-in-out infinite;
  }

  /* Train Cards Hover Effects */
  .train-card {
    transition: all 0.4s ease;
  }

  .train-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
  }

  .train-card .photo img {
    transition: transform 0.5s ease;
  }

  .train-card:hover .photo img {
    transform: scale(1.1);
  }

  .train-card .link {
    transition: all 0.3s ease;
  }

  .train-card .link:hover {
    color: var(--dark);
    letter-spacing: 1px;
  }

  /* Price Cards Hover */
  .price-card {
    transition: all 0.4s ease;
  }

  .price-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,.3);
  }

  /* CTA Section Animations */
  .cta h2, .cta .sub {
    animation: fadeInUp 1s ease both;
  }

  .cta-form {
    animation: fadeInUp 1s ease 0.5s both;
  }

  .cta-input {
    transition: all 0.3s ease;
  }

  .cta-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent);
    transform: scale(1.02);
  }

  /* Footer Links Hover */
  footer a {
    transition: all 0.3s ease;
  }

  footer a:hover {
    color: var(--accent) !important;
    transform: translateX(-5px);
  }

  /* Social Icons Bounce */
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .footer-social a:hover {
    background: var(--accent) !important;
    animation: bounce 0.5s ease;
  }

  /* Scroll Reveal Classes */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* Pulse Animation for Important Elements */
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(159, 109, 68, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(159, 109, 68, 0); }
  }

  .hero-btn:focus,
  .cta-submit:focus,
  .price-btn:focus {
    animation: pulse 1.5s infinite;
  }

  /* Smooth Scroll Indicator */
  @keyframes scrollDown {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(10px); opacity: 0.5; }
  }

  /* ========== ENHANCED ANIMATIONS ========== */

  /* Studio Section Animations */
  .studio-heading {
    animation: fadeInUp 1s ease 0.5s both;
  }

  .studio-photo {
    transition: all 0.5s ease;
  }

  .studio-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(159,109,68,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .studio-photo:hover::after {
    opacity: 1;
  }

  .studio-photo:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }

  .studio-photo img {
    transition: transform 0.8s ease;
  }

  .studio-photo:hover img {
    transform: scale(1.05);
  }

  /* Fade In Classes */
  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards;
  }

  .fade-in-left {
    animation: slideInLeft 1s ease forwards;
  }

  .fade-in-right {
    animation: slideInRight 1s ease 0.3s forwards;
  }

  /* Decorative Elements - disabled to not interfere with layout */

  /* Animated Underline for Links */
  .train-card .link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--dark);
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }

  .train-card .link:hover::after {
    width: 100%;
  }

  /* Glow Effect on Buttons */
  .hero-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--accent), #d4a574, var(--accent));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(10px);
  }

  .hero-btn:hover::before {
    opacity: 0.6;
  }

  /* Shimmer Effect */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .price-card.tier1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
  }

  /* Floating Decorative Dots */
  @keyframes floatDot {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
  }

  /* Scale Up Animation */
  .scale-up {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease;
  }

  .scale-up.active {
    opacity: 1;
    transform: scale(1);
  }

  /* Smooth Image Reveal */
  .studio-photo img,
  .train-card .photo img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.8s ease, transform 0.5s ease;
  }

  /* Text Highlight Animation */
  @keyframes textGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 20px rgba(159,109,68,0.3); }
  }

  .cta h2 {
    animation: textGlow 3s ease-in-out infinite;
  }

  /* Card Tilt Effect */
  .train-card {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  /* Smooth Border Animation */
  .cta-input {
    position: relative;
    background: linear-gradient(var(--gray), var(--gray)) padding-box,
                linear-gradient(90deg, var(--gray), var(--accent), var(--gray)) border-box;
    border: 2px solid transparent;
  }

  .cta-input:focus {
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(90deg, var(--accent), #d4a574, var(--accent)) border-box;
  }

/* ========== RESPONSIVE DESIGN ========== */

/* Large Screens */
@media (max-width: 1400px) {
  .train-card { width: 400px; }
  .price-card { width: 350px; }
}

/* Tablet */
@media (max-width: 1200px) {
  .nav { gap: 40px; }
  .logo-wrap { left: 50%; transform: translateX(-50%); }
  .hero-btn { width: 140px; }
  .train-card { width: 350px; height: 500px; }
  .train-card .photo { height: 220px; }
  .price-card { width: 320px; }
}

@media (max-width: 992px) {
  .page { overflow-x: hidden; }
  .scaler { transform: none !important; width: 100% !important; }
  
  .hero { width: 100%; height: auto; min-height: 100vh; padding: 20px; }
  .nav { 
    position: relative; 
    top: 0; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px;
    width: 100%;
  }
  .nav a { font-size: 16px; }
  
  .logo-wrap { 
    position: relative; 
    top: 50px; 
    left: 0; 
    transform: none; 
    width: 100%; 
    text-align: center;
  }
  .logo-wrap .logo-title { font-size: 56px; flex-wrap: wrap; }
  
  .hero-btn { 
    position: relative; 
    top: 30px; 
    left: auto; 
    right: auto;
    margin: 10px;
  }
  
  .hero-btns-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
  }
  
  .studio-heading,
  .studio-text,
  .studio-photo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 600px;
    margin: 20px auto;
  }
  
  .studio-photo { height: 400px !important; }
  
  .center-heading {
    position: relative !important;
    top: auto !important;
    margin: 60px auto 40px;
  }
  
  .benefits-wrap,
  .trainings-wrap,
  .pricing-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
  }
  
  .benefit-card,
  .train-card,
  .price-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  
  .train-card { width: calc(50% - 20px); max-width: 400px; }
  .price-card { width: calc(50% - 20px); max-width: 380px; }
  
  .cta {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 80px 20px;
  }
  
  .cta h2,
  .cta .sub {
    position: relative !important;
    top: auto !important;
    margin-bottom: 20px;
  }
  
  .cta-form {
    position: relative !important;
    top: auto !important;
    margin-top: 30px;
  }
  
  .floating-elements { display: none; }
  
  footer {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 60px 20px;
  }
  
  footer .abs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 40px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav { gap: 15px; }
  .nav a { font-size: 14px; }
  
  .logo-wrap .logo-title { font-size: 42px; }
  .logo-wrap .logo-tag { font-size: 14px; letter-spacing: 3px; }
  
  .hero-btn { width: 130px; height: 54px; font-size: 16px; }
  
  .studio-heading h2,
  .center-heading h2 { font-size: 36px !important; }
  
  .studio-text { font-size: 18px !important; }
  
  .train-card { width: 100%; max-width: 350px; }
  .price-card { width: 100%; max-width: 350px; }
  
  .cta h2 { font-size: 32px !important; }
  .cta .sub { font-size: 20px !important; }
  
  .cta-inputs { flex-direction: column; }
  .cta-input { width: 100% !important; max-width: 300px; }
  .cta-submit { width: 100% !important; max-width: 300px; }
  
  .stats-section { flex-direction: column; gap: 30px; }
  
  footer { text-align: center; }
  footer .footer-map { margin: 0 auto 30px; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .nav a { font-size: 12px; }
  .logo-wrap .logo-title { font-size: 32px; }
  
  .studio-heading h2,
  .center-heading h2 { font-size: 28px !important; }
  
  .cta h2 { font-size: 24px !important; }
  .cta .sub { font-size: 16px !important; }
  
  .price-card h3 { font-size: 20px; }
  .price-card .price { font-size: 48px; }
}