:root{
    --green:#ADD786;
    --green-light:#EAF5DD;
    --green-mid:#8fc85f;
    --green-deep:#6f9e46;
    --maroon:#290611;
    --maroon-soft:#4a1420;
    --bg-top:#f3f4f1;
    --bg-bot:#e7e9e4;
  }

  *{box-sizing:border-box;margin:0;padding:0;}

  body{
    font-family:'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bot) 100%);
    color:var(--maroon);
    width:100%;
    overflow-x:hidden;
    
  }

  /* ---------- HEADER ---------- */
  header{
    position:relative;
    padding:22px 3vw 30px max(24px,3vw);
    overflow:hidden;
    min-height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .top-bar{
    position:absolute;
    top:24px; left:max(24px,3vw); right:3vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .top-bar {
    width:46px;
    height:46px;
    border-radius:50%;
 }

  .top-bar .dots{ display:flex;gap:6px; }
  .top-bar .dots span{
    width:6px;height:6px;border-radius:50%;
    background:var(--maroon-soft);
  }

  .ribbon-wrap{
    position:relative;
    display:flex;
    justify-content:center;
    margin-top:52px;
    margin-bottom:14px;
  }

  .ribbon{
    position:relative;
    background:var(--maroon);
    color:var(--green-light);
    padding:20px 60px;
    font-weight:800;
    font-size:clamp(22px,4vw,34px);
    letter-spacing:1.5px;
    text-align:center;
    -webkit-clip-path:polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
    clip-path:polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
    box-shadow:0 8px 22px rgba(41,6,17,0.22);
  }

  h1.sub{
    text-align:center;
    font-size:clamp(15px,2vw,20px);
    font-weight:700;
    color:var(--maroon-soft);
    letter-spacing:0.4px;
  }

  /* ---------- SECTIONS ---------- */
  .section{
    position:relative;
    padding:26px 3vw 26px max(24px,3vw);
    display:flex;
    align-items:center;
  }

  .float-dot{
    position:absolute;
    border-radius:50%;
    background:var(--green);
    z-index:0;
    animation:floatDot 4s ease-in-out infinite;
  }
  .float-dot.dark{ background:var(--maroon-soft); opacity:0.3; }
  .float-dot.mid{ background:var(--green-deep); }
  .float-dot.pulse{ animation:pulseDot 2.6s ease-in-out infinite; }
  .float-dot.spin{ animation:spinDot 6s linear infinite; }

  @keyframes floatDot{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
  }
  @keyframes pulseDot{
    0%,100%{ transform:scale(1); opacity:0.7; }
    50%{ transform:scale(1.4); opacity:1; }
  }
  @keyframes spinDot{
    0%{ transform:rotate(0deg) translateX(10px) rotate(0deg); }
    100%{ transform:rotate(360deg) translateX(10px) rotate(-360deg); }
  }

  .plus{
    position:absolute;
    color:var(--green-deep);
    font-size:28px;
    font-weight:800;
    z-index:0;
    animation:floatPlus 3.4s ease-in-out infinite;
  }
  .plus.spin{ animation:spinPlus 5s linear infinite; }
  .plus.pop{ animation:popPlus 2.2s ease-in-out infinite; }

  @keyframes floatPlus{
    0%,100%{ transform:translateY(0) rotate(0deg); opacity:0.85; }
    50%{ transform:translateY(-10px) rotate(12deg); opacity:1; }
  }
  @keyframes spinPlus{
    0%{ transform:rotate(0deg); }
    100%{ transform:rotate(360deg); }
  }
  @keyframes popPlus{
    0%,100%{ transform:scale(1); opacity:0.7; }
    50%{ transform:scale(1.3); opacity:1; }
  }

  @media (prefers-reduced-motion: reduce){
    .float-dot, .plus{ animation:none; }
  }

  .row{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:clamp(24px, 4vw, 56px);
    max-width:min(2400px, 94vw); margin:0 auto; width:100%;
  }
  .row.reverse{ flex-direction:row-reverse; }

  .art-wrap{
    flex:0 0 46%;
    position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .art-wrap img, .art-wrap { width:100%; max-width:100%; height:auto; }

  .content{ flex:1; min-width:0; }

  .eyebrow{
    display:inline-block;
    background:var(--green);
    color:var(--maroon);
    font-size:12.5px;
    font-weight:800;
    letter-spacing:1.2px;
    padding:6px 14px;
    border-radius:20px;
    margin-bottom:14px;
  }

  .content h2{
    font-size:clamp(24px,2.8vw,32px);
    color:var(--maroon);
    line-height:1.22;
    font-weight:800;
    margin-bottom:14px;
  }

  .content p{
    font-size:clamp(16.5px,1.7vw,19px);
    line-height:1.75;
    color:#4a3138;
    max-width:100%;
    margin-bottom:20px;
  }

  .feature-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 20px;
    max-width:100%;
  }

  .feature-list li{
    list-style:none;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:700;
    color:var(--maroon-soft);
  }

  .feature-list li .tick{
    flex:0 0 auto;
    width:22px;height:22px;
    border-radius:50%;
    background:var(--green-light);
    border:2px solid var(--green-mid);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;
    color:var(--green-deep);
  }

  .content p.closing{
    margin-top:20px;
    margin-bottom:0;
    font-size:clamp(15px,1.5vw,17px);
    font-weight:700;
    font-style:italic;
    color:var(--maroon);
    border-left:3px solid var(--green);
    padding-left:16px;
    max-width:100%;
  }

  @media (max-width:820px){
    .row, .row.reverse{ flex-direction:column; gap:18px; }
    .art-wrap{ flex:0 0 auto; max-width:320px; }
    .art-wrap img, .art-wrap { max-width:100%; }
    .feature-list{ grid-template-columns:1fr 1fr; max-width:none; }
    .content p, .content p.closing{ max-width:100%; }
    .section{ padding:34px 4vw 34px max(20px,4vw); }
  }

  footer{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:40px 16px 46px max(24px,16px);
    background:var(--maroon);
    color:var(--green-light);
    display:flex; flex-direction:column; justify-content:center;
    min-height:auto;
  }
  footer p{ font-size:14px; opacity:0.8; margin-top:10px; max-width:520px; margin-left:auto; margin-right:auto; }
  footer .fname{ font-weight:800; font-size:20px; color:var(--green); }