/* ============================================================
   KAPSHARE — extra Agenio-derived elements
   Sunsive display font + announcement bar, "The Difference"
   comparison, FAQ accordion, animated CTA band.
   All theme-aware via the same CSS vars as kapshare.css.
   ============================================================ */

/* ---------- SUNSIVE (real Agenio display font, Fontshare) ---------- */
@font-face{ font-family:"Sunsive"; src:url("assets/fonts/Sunsive-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sunsive"; src:url("assets/fonts/Sunsive-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sunsive"; src:url("assets/fonts/Sunsive-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sunsive"; src:url("assets/fonts/Sunsive-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sunsive"; src:url("assets/fonts/Sunsive-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{
  position:fixed; top:0; left:0; right:0; z-index:65;
  height:44px; display:flex; align-items:center; justify-content:center; gap:16px;
  background:var(--band); color:var(--band-fg);
  border-bottom:1px solid var(--band-line);
  font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:transform .4s var(--ease);
}
.announce.hide{ transform:translateY(-100%); }
.announce .hl{ color:var(--accent); }
.announce svg{ width:48px; height:10px; display:block; }
.announce svg path{ fill:var(--accent); }
@media(max-width:620px){ .announce{ font-size:10.5px; letter-spacing:.1em; gap:10px; } .announce svg{ width:28px; } }

/* nav sits below the announcement until you scroll */
.topbar{ top:44px; }
.topbar.scrolled{ top:0; }
@media(max-width:620px){ .topbar{ top:44px; } }

/* ---------- DOTTED CORNER FRAME (Agenio motif) ---------- */
.dot-frame{ position:relative; }
.dot-frame > .corner{ position:absolute; width:9px; height:9px; background:var(--accent); z-index:3; }
.dot-frame > .tl{ top:-4px; left:-4px; } .dot-frame > .tr{ top:-4px; right:-4px; }
.dot-frame > .bl{ bottom:-4px; left:-4px; } .dot-frame > .br{ bottom:-4px; right:-4px; }

/* ---------- "THE DIFFERENCE" COMPARISON ---------- */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:820px){ .compare-grid{ grid-template-columns:1fr; } }
.compare-card{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:clamp(28px,3.4vw,44px); position:relative; overflow:hidden;
}
.compare-card.is-us{ border-color:var(--accent); }
.compare-card.is-us::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%);
}
.compare-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line); position:relative;
}
.compare-head h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1; }
.compare-card.is-them h3{ color:var(--muted); }
.compare-head .badge{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 13px; border-radius:30px;
}
.compare-card.is-them .badge{ border:1px solid var(--line-strong); color:var(--muted); }
.compare-card.is-us .badge{ background:var(--accent); color:var(--on-accent); }
.compare-list{ list-style:none; display:flex; flex-direction:column; gap:15px; }
.compare-list li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.4; }
.compare-list .ic{
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; margin-top:1px;
}
.is-them .ic{ background:color-mix(in srgb,var(--fg) 9%,transparent); color:var(--muted); }
.is-us .ic{ background:var(--accent); color:var(--on-accent); }
.is-them li{ color:var(--muted); }

/* ---------- FAQ ACCORDION ---------- */
.faq-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(36px,6vw,90px); align-items:start; }
@media(max-width:820px){ .faq-grid{ grid-template-columns:1fr; } }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--fg);
  font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.2vw,28px); line-height:1.15;
  padding:26px 0; display:flex; justify-content:space-between; gap:24px; align-items:center;
}
.faq-q .pm{
  flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; font-size:20px; color:var(--fg);
  transition:background var(--tsm), color var(--tsm), border-color var(--tsm), transform var(--tmd);
}
.faq-item.open .faq-q .pm{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item.open .faq-a{ max-height:340px; }
.faq-a p{ color:var(--muted); font-size:16px; max-width:64ch; padding-bottom:26px; }

/* ---------- ANIMATED CTA BAND ---------- */
.cta-band{ background:var(--band); color:var(--band-fg); overflow:hidden; position:relative; }
.cta-band::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:34px 34px; opacity:.9;
}
.cta-inner{ position:relative; z-index:2; text-align:center; padding-block:clamp(70px,11vw,150px); }
.cta-band h2{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; line-height:.92; font-size:calc(clamp(2.6rem,9.5vw,8.4rem)*var(--t-scale)); }
html[data-approach="agenio"] .cta-band h2{ text-transform:none; letter-spacing:-.02em; }
.cta-band .sub{ color:rgba(255,255,255,.6); max-width:46ch; margin:24px auto 36px; font-size:clamp(16px,1.6vw,20px); }
.cta-arrows{ display:flex; gap:26px; justify-content:center; overflow:hidden; margin:8px 0 4px; }
.cta-arrows.r{ animation:drift 6s linear infinite; }
.cta-arrows .a{ color:var(--accent); font-size:26px; line-height:1; opacity:.85; }
@keyframes drift{ 0%{ transform:translateX(-24px);} 100%{ transform:translateX(24px);} }
@media(prefers-reduced-motion:reduce){ .cta-arrows.r{ animation:none; } }
.cta-tags{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.cta-tags span{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); display:inline-flex; align-items:center; gap:10px; }
.cta-tags span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }