/* ==========================================================================
   Shiny Kiwi — homepage-only styles
   Shared tokens, header, buttons, and base footer live in main.css
   ========================================================================== */

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 82% 18%, rgba(143,174,76,.28), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(166,135,63,.22), transparent 50%),
    var(--green-deep);
  overflow:hidden;
  padding:86px 0 70px;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--green-mid) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  opacity:.16;
  pointer-events:none;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero h1{
  color:var(--cream);
  font-size:clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight:800;
  margin:14px 0 20px;
}
.hero h1 em{ font-style:normal; color:var(--gold-light); }
.hero p.lead{ color:#DCE3CE; font-size:1.08rem; max-width:46ch; margin-bottom:30px; }
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

.hero-badge-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-badge-wrap img{ width:min(100%, 380px); filter:drop-shadow(0 22px 40px rgba(0,0,0,.45)); }
.ring-orbit{ position:absolute; inset:0; z-index:-1; }
.ring-orbit svg{width:100%; height:100%;}

/* ---------- trust bar ---------- */
.trust{ background:var(--cream-panel); border-bottom:1px solid #E4DFC8; }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.trust-item{ display:flex; gap:14px; align-items:flex-start; padding:26px 22px; border-left:1px solid #E4DFC8; }
.trust-item:first-child{border-left:none;}
.trust-item svg{flex:none; width:26px; height:26px; color:var(--green);}
.trust-item h3{font-family:'Work Sans'; font-size:.95rem; font-weight:700; margin-bottom:3px;}
.trust-item p{font-size:.84rem; color:#5b5a4d;}

/* ---------- centering tool promo ---------- */
.tool-promo{ background:var(--cream-panel); border-top:1px solid #E4DFC8; border-bottom:1px solid #E4DFC8; }
.tool-promo .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:64px 28px; }
.tool-promo-copy h2{color:var(--green-deep); font-size:clamp(1.6rem,2.8vw,2.2rem); margin:10px 0 14px;}
.tool-promo-copy p{color:#4a4a3c; margin-bottom:22px; max-width:48ch;}
.tool-mock{
  background:var(--seed); border-radius:16px; padding:22px; position:relative;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.4);
}
.tool-mock .frame{
  border:2px dashed var(--green-light); border-radius:10px; padding:18px;
  display:flex; align-items:center; justify-content:center; min-height:180px;
  position:relative; background:#20241a;
}
.tool-mock .frame::before{
  content:""; position:absolute; inset:26px; border:2px solid var(--gold); border-radius:4px;
}
.tool-mock .frame span{
  font-family:'Space Mono', monospace; color:var(--gold-light); font-size:.78rem; letter-spacing:.06em;
  background:rgba(0,0,0,.4); padding:4px 10px; border-radius:999px; z-index:1;
}
.tool-mock .readout{display:flex; justify-content:space-between; margin-top:14px; font-family:'Space Mono', monospace; color:var(--cream); font-size:.82rem;}
.tool-mock .readout b{color:var(--gold-light); font-size:1.3rem; display:block; font-family:'Baloo 2';}

/* ---------- section shell ---------- */
section{padding:84px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.4rem); margin-top:10px; color:var(--green-deep);}
.section-head p{color:#5b5a4d; margin-top:14px; font-size:1.02rem;}

/* ---------- table / what happens ---------- */
.table-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.table-card{
  background:var(--cream-panel); border:1px solid #E4DFC8; border-radius:18px; padding:26px 22px;
  position:relative; transition:transform .18s, box-shadow .18s;
}
.table-card:hover{
  transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(46,64,32,.35); border-color:var(--gold-light);
}
.table-card .icon-badge{
  width:48px; height:48px; border-radius:50%; background:var(--green); color:var(--cream);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.table-card .icon-badge svg{width:24px; height:24px;}
.table-card h3{font-size:1.08rem; margin-bottom:8px; color:var(--charcoal);}
.table-card p{font-size:.9rem; color:#5b5a4d;}
.table-card p a{color:var(--green); font-weight:600;}

/* ---------- content / IG section ---------- */
.content-section{background:var(--green-deep); color:var(--cream);}
.content-section .section-head p{color:#C7CEB6;}
.content-section .eyebrow{color:var(--gold-light);}
.content-section .section-head h2{color:var(--cream);}
.ig-embed{
  border-radius:16px; overflow:hidden;
}
.ig-embed iframe{ display:block; width:100%; aspect-ratio:1/1; border:none; }
.ig-follow{ margin-top:44px; display:flex; align-items:center; justify-content:center; }

/* ---------- mission ---------- */
.mission .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.mission-badge{
  background:var(--cream-panel); border:1px solid #E4DFC8; border-radius:24px;
  padding:40px; display:flex; align-items:center; justify-content:center;
}
.mission-badge img{width:100%; max-width:280px;}
.mission-text h2{color:var(--green-deep); font-size:clamp(1.7rem,3vw,2.3rem); margin:10px 0 18px;}
.mission-text p{color:#4a4a3c; margin-bottom:16px; font-size:1.02rem;}
.mission-text p:last-child{margin-bottom:0;}

/* ---------- newsletter / footer cta ---------- */
.follow-cta{ background:linear-gradient(120deg, var(--green) 0%, var(--green-mid) 100%); color:var(--cream); }
.follow-cta .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:56px 28px;
}
.follow-cta h2{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--cream); margin-bottom:8px;}
.follow-cta p{color:#E3EAD1; max-width:44ch;}

/* ---------- homepage footer detail (extends base footer in main.css) ---------- */
footer{padding:52px 0 26px; text-align:left;}
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.foot-brand img{width:34px; height:34px;}
.foot-brand span{font-family:'Baloo 2'; font-weight:800; color:var(--cream); font-size:1.05rem;}
footer h4{
  color:var(--cream); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  font-family:'Space Mono'; margin-bottom:14px;
}
footer ul{list-style:none;}
footer ul li{margin-bottom:9px; font-size:.9rem;}
footer ul li a:hover{color:var(--gold-light);}
.foot-bottom{
  border-top:1px solid #302E24; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem;
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--green-deep); padding:16px 28px 20px;
    border-bottom:3px solid var(--gold);
  }
  .nav-links.open{display:flex;}
  .nav-links a:not(.nav-cta){width:100%; padding:10px 2px;}
  .nav-cta{align-self:center; margin-top:16px; padding:13px 30px !important; font-size:.92rem !important;}
  .menu-btn{display:block;}
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .cta-row{justify-content:center;}
  .hero-badge-wrap{order:-1;}
  .trust .wrap{grid-template-columns:repeat(2,1fr);}
  .trust-item{border-left:none; border-top:1px solid #E4DFC8;}
  .trust-item:nth-child(1),.trust-item:nth-child(2){border-top:none;}
  .tool-promo .wrap{grid-template-columns:1fr;}
  .table-grid{grid-template-columns:repeat(2,1fr);}
  .mission .wrap{grid-template-columns:1fr;}
  .mission-badge{order:-1;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .table-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .follow-cta .wrap{flex-direction:column; align-items:flex-start;}
}
