:root {
  --content-width: 1200px;
}

 body {
    color: var(--walnut);
    background: var(--pearl);
    line-height: 1.6;
    letter-spacing: .01em;
    font-weight: 400;
    
 }

/* ===== HERO ===== */
    .hero{
      min-height:100vh;
      background:linear-gradient(135deg,var(--mahogany) 0%,var(--walnut) 50%,var(--cognac) 100%);
      display:flex;align-items:center;position:relative;overflow:hidden;
      padding-top:var(--header-height);
    }
    .hero::before{
      content:'';position:absolute;inset:0;opacity:.03;
      background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(212,165,116,.4) 35px,rgba(212,165,116,.4) 70px);
    }
    .hero-glow{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(212,165,116,.15) 0%,transparent 50%);filter:blur(100px)}
    .hero .content{position:relative;z-index:1;text-align:center;padding:6rem 2rem;width:100%;max-width:1200px;margin:0 auto;animation:fadeInUp 1.2s ease-out}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
    .badge{
      display:inline-block;font-size:.75rem;letter-spacing:.35em;text-transform:uppercase;color:var(--champagne);font-weight:700;margin-bottom:2.5rem;
      padding:.5rem 1.5rem;border:1px solid rgba(247,231,206,.2);border-radius:50px;background:rgba(212,165,116,.08);backdrop-filter:blur(10px)
    }
    .title{font-family:'Bebas Neue',sans-serif;font-size:clamp(4.5rem,10vw,8rem);line-height:.88;color:var(--ivory);letter-spacing:-.03em;margin-bottom:1.5rem;font-weight:400;text-shadow:0 5px 25px rgba(139,90,43,.3),0 2px 10px rgba(107,68,35,.5)}
    @keyframes liquidGold{0%{background-position:0% 50%}33%{background-position:50% 50%}66%{background-position:100% 50%}100%{background-position:0% 50%}}
    .accent{
      background:linear-gradient(92deg,var(--champagne) 0%,var(--amber) 20%,var(--golden) 40%,var(--honey) 60%,var(--amber) 80%,var(--champagne) 100%);
      background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:liquidGold 6s ease-in-out infinite;display:inline-block;filter:brightness(1.2)
    }
    .subtitle{font-size:1.3rem;color:var(--champagne);max-width:760px;margin:1rem auto 4rem;opacity:.95;line-height:1.65}

    /* Plan Card */
    .plan-wrap{margin-top:3rem}
    .plan{
      background:linear-gradient(135deg,rgba(255,254,249,.08),rgba(247,231,206,.04));
      backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);
      border:1px solid rgba(230,184,125,.25);border-radius:30px;
      box-shadow:0 40px 100px rgba(139,90,43,.15),0 15px 40px rgba(107,68,35,.12),inset 0 2px 2px rgba(255,254,249,.2);
      padding:3.5rem;display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;max-width:940px;margin:0 auto;position:relative;overflow:hidden
    }
    .plan::before{
      content:'';position:absolute;top:0;left:-100%;right:-100%;height:2px;
      background:linear-gradient(90deg,transparent,var(--amber),var(--golden),var(--amber),transparent);animation:shimmer 4s ease-in-out infinite
    }
    @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
    .plan h3{font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem;font-weight:800}
    .price{font-family:'Bebas Neue',sans-serif;font-size:5rem;line-height:1;background:linear-gradient(180deg,var(--ivory),var(--champagne));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem}
    .price span{font:normal 500 1.1rem/1 'Inter',sans-serif;color:var(--champagne);opacity:.85}
    .list{list-style:none;display:grid;gap:1.2rem}
    .li{display:grid;grid-template-columns:26px 1fr;gap:1rem;align-items:start;color:var(--champagne);font-size:.95rem;line-height:1.6}
    .li svg{width:26px;height:26px;color:var(--success);filter:drop-shadow(0 2px 4px rgba(76,175,80,.4))}
    .li strong{color:var(--ivory);font-weight:700}
    .micro{margin-top:2rem;font-size:.95rem;color:var(--champagne);opacity:.95}
    .micro strong{color:var(--ivory)}
    .note{font-size:.85rem;color:var(--champagne);margin-top:1rem;opacity:.8;font-style:italic}
    .note a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
    .btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
    .btn-primary{
      display:inline-block;padding:1.2rem 2.75rem;border-radius:50px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
      background:linear-gradient(135deg,var(--golden),var(--bronze));color:var(--ivory);border:0;
      box-shadow:0 12px 35px rgba(212,165,116,.35),0 5px 15px rgba(139,90,43,.2),inset 0 2px 2px rgba(255,254,249,.3);
      transition:all .3s cubic-bezier(.23,1,.32,1);font-size:.9rem;position:relative;overflow:hidden
    }
    .btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 45px rgba(212,165,116,.4),0 7px 20px rgba(139,90,43,.25),inset 0 2px 2px rgba(255,254,249,.4)}

    /* Sections */
    .section{padding:8rem 4rem;position:relative;overflow:hidden}
    .section-bg-light{background:linear-gradient(180deg,var(--pearl) 0%,var(--warm-sand) 50%,var(--pearl) 100%)}
    .section-bg-white{background:linear-gradient(180deg,var(--ivory) 0%,var(--pearl) 50%,var(--warm-sand) 100%)}
    .section-pattern{position:absolute;inset:0;opacity:.02;background-image:radial-gradient(circle at 1px 1px,var(--golden) 1px,transparent 1px);background-size:40px 40px}
    .section-header{text-align:center;margin-bottom:4.5rem}
    .section-header h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.25rem,7vw,5.25rem);line-height:1;color:var(--walnut);margin-bottom:1.25rem;letter-spacing:-.02em}
    .section-header p{color:var(--cognac);max-width:740px;margin:0 auto;font-size:1.15rem;line-height:1.65}

    /* Cards */
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:1200px;margin:0 auto}
    .card{
      background:linear-gradient(145deg,rgba(255,254,249,.9),rgba(251,247,240,.85));
      backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border:1px solid rgba(212,165,116,.12);border-radius:24px;
      box-shadow:0 15px 40px rgba(139,90,43,.06),0 5px 15px rgba(107,68,35,.05);
      padding:3rem;transition:all .35s cubic-bezier(.23,1,.32,1);position:relative;overflow:hidden
    }
    .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--golden),var(--amber),var(--golden));transform:scaleX(0);transform-origin:center;transition:transform .35s ease;opacity:0}
    .card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 25px 60px rgba(212,165,116,.12),0 10px 25px rgba(139,90,43,.08);border-color:rgba(212,165,116,.22);background:linear-gradient(145deg,var(--ivory),rgba(251,247,240,.95))}
    .card:hover::before{transform:scaleX(1);opacity:1}
    .card-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--golden),var(--bronze));border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:2rem;box-shadow:0 8px 24px rgba(212,165,116,.25),inset 0 2px 2px rgba(255,254,249,.3)}
    .card-icon svg{width:32px;height:32px;color:var(--ivory)}
    .card h3{font-size:1.3rem;font-weight:800;color:var(--walnut);margin-bottom:.75rem}
    .card p{color:var(--warm-gray-600);line-height:1.65}
    .card ul{list-style:none;padding:0;margin-top:1rem}
    .card ul li{padding-left:1.25rem;position:relative;margin-bottom:.75rem;font-size:.95rem;color:var(--warm-gray-700)}
    .card ul li::before{content:'•';position:absolute;left:.25rem;color:var(--golden);font-weight:700;font-size:1.2rem}
    .fine{margin-top:1.25rem;font-size:.88rem;color:var(--warm-gray-500);font-style:italic}

    /* AOS-like */
    [data-aos]{opacity:0;transition:all .9s cubic-bezier(.23,1,.32,1)}
    [data-aos="fade-up"]{transform:translateY(30px)}
    [data-aos="scale-up"]{transform:scale(.94)}
    .aos-animate{opacity:1;transform:none}

    /* Responsive */
    @media (max-width:1100px){
      .plan{grid-template-columns:1fr;padding:2.5rem}
      .cards{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{padding:0 1.5rem}
      .hero{min-height:auto;padding:6rem 0 4rem}
      .title{font-size:4rem}
      .plan{padding:2rem;gap:2rem}
      .price{font-size:3.5rem}
      .section{padding:5rem 1.5rem}
      .section-header h2{font-size:3.5rem}
      .cards{grid-template-columns:1fr;gap:2rem}
    }