:root{
    --cream:#F5F4EC; --card:#FFFFFF;
    --charcoal:#55514A; --stone:#6B655D; --espresso:#4A463F;
    --orange:#F2782A; --green:#50C880; --yellow:#F2D024;
    --line:rgba(85,81,74,0.16);
    --serif:'Quicksand',sans-serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --round:'Fredoka',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--charcoal);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-0.01em;color:var(--charcoal)}
  @property --ba{syntax:'<angle>';inherits:false;initial-value:0deg}
  .btn{position:relative;z-index:0;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;border:none;cursor:pointer;border-radius:12px;padding:11px 22px;display:inline-block;color:#211D19;transition:transform .12s ease}
  .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--ba),#F2782A,#F2D024,#50C880,#F2782A);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
  .btn:hover::before{opacity:1;animation:btnspin 2.4s linear infinite}
  .btn:active{transform:translateY(1px)}
  @keyframes btnspin{to{--ba:360deg}}
  .btn-primary{background:var(--orange)}
  .btn-green{background:var(--green)}
  .btn-ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)}
  .btn-ghost::before{display:none}
  .btn-ghost:hover{background:rgba(85,81,74,.06)}
  .kicker{font-family:var(--round);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;display:inline-flex;align-items:center;gap:9px}
  .kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
  .sec-head{font-size:clamp(28px,3.4vw,40px);max-width:16em}
  .sec-intro{color:var(--stone);font-size:18px;max-width:38em;margin-top:16px}
  section{padding:78px 0}

  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);background:rgba(245,244,236,.82);border-bottom:1px solid transparent;transition:border-color .3s}
  nav.scrolled{border-color:var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand img{width:36px;height:auto}
  .brand span{font-family:var(--round);font-weight:600;font-size:27px;color:var(--orange);line-height:1}
  .nav-right{display:flex;align-items:center;gap:26px}
  .nav-link{position:relative;font-size:15px;color:var(--charcoal);font-weight:600;padding:4px 1px}
  .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#F2782A,#F2D024,#50C880);background-size:200% 100%;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
  .nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);animation:navshift 3s linear infinite}
  @keyframes navshift{to{background-position:200% 0}}
  .nav-cta{padding:10px 22px}

  header{position:relative;overflow:hidden;padding:64px 0 84px}
  .ring{position:absolute;border-radius:50%;border:1.5px solid var(--green);opacity:.12;pointer-events:none}
  .ripple{position:absolute;pointer-events:none;z-index:0;opacity:.3}
  .ripple circle{fill:none;stroke-width:1.3}
  .mi{width:26px;height:26px;display:block;color:var(--espresso)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:2}
  .eyebrow{font-family:var(--round);font-weight:500;font-size:13px;letter-spacing:.03em;color:var(--stone);display:inline-flex;align-items:center;gap:9px;margin-bottom:20px}
  .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
  h1{font-size:clamp(34px,4.6vw,54px)}
  .hero-sub{font-size:19px;color:var(--stone);margin:22px 0 26px;max-width:30em}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .hero-photo{border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -26px rgba(74,70,63,.5);aspect-ratio:1.12}
  .hero-photo img{width:100%;height:100%;object-fit:cover;display:block}

  .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
  .vcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;transition:transform .2s,box-shadow .2s}
  .vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(74,70,63,.28)}
  .vic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-family:var(--round);font-weight:600;font-size:22px;color:var(--espresso);margin-bottom:18px}
  .vcard h3{font-size:20px;margin-bottom:8px}
  .vcard p{font-size:15px;color:var(--stone)}

  .band{background:var(--green);border-radius:30px;padding:56px 52px;position:relative;overflow:hidden;text-align:center}
  .band h2{color:var(--espresso);font-size:clamp(28px,3.4vw,38px);max-width:16em;margin:0 auto}
  .band p{color:var(--espresso);font-size:18px;margin:14px auto 0;max-width:32em}
  .contact{display:flex;gap:10px;max-width:460px;margin:28px auto 0;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
  .contact input{flex:1;min-width:220px;font-size:15px;padding:14px 18px;border:none;border-radius:14px;background:#fff;color:var(--charcoal);outline:none}
  .contact input::placeholder{color:var(--stone)}
  .band .note{color:var(--espresso);font-size:13px;margin-top:12px;opacity:.85}
  .ringg{position:absolute;border-radius:50%;border:1.3px solid rgba(245,244,236,.18)}

  footer{border-top:1px solid var(--line);padding:38px 0;margin-top:20px}
  .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .foot-links{display:flex;gap:22px;font-size:14px;color:var(--stone)}
  .foot-links a:hover{color:var(--charcoal)}

  @media(max-width:880px){
    .hero-grid{grid-template-columns:1fr;gap:36px}
    .hero-photo{order:2}
    .vgrid{grid-template-columns:1fr}
    .band{padding:44px 28px}
    .nav-link{display:none}
  }