/* HighLightIt! Holding Page — v2.0 */
:root{
  --hi-yellow:#FFD400;
  --bg-0:#0f1216;
  --bg-1:#131820;
  --fg:#F5F7FA;
  --muted:#B8C0CC;
  --card:#181C22;
  --ring:rgba(255,212,0,.28);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #1B2230 0%, transparent 60%),
    radial-gradient(1000px 700px at 110% 20%, #0A0F15 0%, transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0 0 .75rem}
h1{font-size:clamp(2.2rem,4vw + 1rem,4rem);line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,1.2vw + 1rem,2rem);letter-spacing:-.01em}
h3{font-size:1.05rem}
p{color:var(--muted)}
strong{color:var(--fg)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#000;color:#fff}

/* HERO */
.hero{padding:6rem 1.25rem 3rem;text-align:center}
.hero-inner{max-width:980px;margin:0 auto}
.hero-inner{max-width:980px;margin:0 auto}

/* Hero layout: logo left, text stack right (right-aligned) */
:root{ --heroRowGap: 12px; }
@media (min-width: 820px){
  .hero{ text-align: initial; }
  .hero-inner{
    display: grid;
    grid-template-columns: clamp(120px, 14vw, 220px) 1fr;
    column-gap: 28px;
    row-gap: var(--heroRowGap);
    align-items: center; /* vertical centre vs logo */
  }
  .hero-inner .app-icon{ grid-column: 1; justify-self: start; align-self: center; }
  .hero-inner .brand,
  .hero-inner .tagline,
  .hero-inner .subline,
  .hero-inner .cta-wrap{ grid-column: 2; justify-self: end; text-align: right; }
  /* remove ad-hoc margins; use grid gap instead */
  .tagline{ margin-top: 0; }
  .subline{ margin-top: 0; }
  .cta-wrap{ margin-top: .25rem; }
}

/* Mobile: keep centred */
@media (max-width: 819.98px){
  .hero{ text-align: center; }
  .hero-inner{ display: block; }
  .hero-inner .brand,
  .hero-inner .tagline,
  .hero-inner .subline,
  .hero-inner .cta-wrap{ text-align: center; }
}
.app-icon{width:128px;height:128px;margin:0 auto 1rem;filter:drop-shadow(0 10px 30px #0008)}
.brand{display:flex;align-items:flex-end;justify-content:center;gap:.2ch}
.brand-text{font-weight:800}
.brand-bang{position:relative;display:inline-block;font-weight:900;transform:translateY(-.07em);color:var(--hi-yellow)}
.brand-bang::before{
  content:"";position:absolute;left:50%;top:50%;width:1.4em;height:1.4em;
  transform:translate(-50%,-45%);border-radius:50%;border:.18em solid var(--hi-yellow);
  box-shadow:0 0 20px var(--ring),0 0 40px var(--ring);pointer-events:none}
.tagline{font-size:1.2rem;color:var(--fg);margin-top:.25rem}
.subline{margin-top:.5rem}

/* CTA */
.cta-wrap{margin-top:1.25rem}
.cta-bottom{display:grid;place-items:center;margin:2rem 0 0}
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.25rem;border-radius:999px;background:#10151d;color:var(--fg);
  border:1px solid #232a36;cursor:pointer;font-weight:600;isolation:isolate;
  transition:transform .08s ease,border-color .2s ease}
.cta:hover{transform:translateY(-1px);border-color:#2f394a}
.cta:active{transform:translateY(0)}
.cta-ring{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(180px 180px at var(--x,50%) var(--y,50%),var(--ring),transparent 60%);pointer-events:none;mix-blend-mode:screen}

/* Main sections */
.main{padding:2rem 1.25rem 4rem}
.why,.tool,.features,.gallery,.audience,.evidence,.principles{max-width:1100px;margin:0 auto 3.5rem}

/* WHY */
.why-list{list-style:none;padding:0;margin:1rem auto 0;display:grid;gap:.75rem;max-width:900px}
.why-list.strip{max-width:1100px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.why-list.tight{max-width:780px}
.why-list li{padding:.85rem 1rem;background:var(--card);border:1px solid #222834;border-radius:14px}

/* Audience split */
.audience-split{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:800px){.audience-split{grid-template-columns:1fr 1fr}}

/* THE TOOL */
.tool-list{list-style:none;padding:0;margin:1rem auto 0;display:grid;gap:.6rem;max-width:900px}
.tool-list li{padding:0 .25rem;color:var(--fg)}

/* Features */
.feature-grid{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.feature-card{position:relative;padding:1rem;background:var(--card);border:1px solid #222834;border-radius:16px;min-height:140px;overflow:hidden}
.f-icon{font-weight:800;color:var(--hi-yellow);opacity:.9;margin-bottom:.25rem}
.feature-card.pulse::after{
  content:"";position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(closest-side,var(--ring),transparent 70%);
  animation:pulse 1.2s ease-out 1}
@keyframes pulse{from{transform:scale(.7);opacity:.9}to{transform:scale(1.15);opacity:0}}

/* Evidence */
.evidence-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1rem}
.ev-card{background:var(--card);border:1px solid #222834;border-radius:16px;padding:1rem}

/* Learning principles */
.principles .why-list{max-width:900px}

/* Carousel + Before/After */
.gallery .carousel{position:relative;margin-top:1rem}
.slide{display:none}
.slide.current{display:block}
.ba{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid #222834;background:#0f1216}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:polygon(0 0,var(--reveal,50%) 0,var(--reveal,50%) 100%,0 100%)}
.ba-range{position:absolute;left:0;right:0;bottom:10px;width:60%;margin:0 auto;appearance:none;height:6px;border-radius:999px;background:#222a36;outline:none}
.ba-range::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--hi-yellow);box-shadow:0 0 0 6px rgba(255,212,0,.12);border:none;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--hi-yellow);border:none;cursor:ew-resize}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #232a36;background:#10151d;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.nav:hover{border-color:#2f394a}
.prev{left:-8px}.next{right:-8px}
.dots{margin:.75rem auto 0;display:flex;gap:.5rem;justify-content:center}
.dot{width:8px;height:8px;border-radius:50%;background:#2b3340;border:none;cursor:pointer}
.dot.is-active{background:var(--hi-yellow);box-shadow:0 0 0 6px rgba(255,212,0,.12)}
.gallery-note{text-align:center;margin-top:.5rem;color:var(--muted)}

/* Footer */
.footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted)}

/* Dialog */
.soon::backdrop{background:rgba(0,0,0,.6)}
.soon{border:none;border-radius:16px;padding:0}
.soon-card{padding:1.25rem 1.25rem 1rem;background:var(--card);border:1px solid #222834;border-radius:16px;min-width:260px;text-align:center}
.btn-close{margin-top:.5rem;padding:.6rem 1rem;border-radius:999px;border:1px solid #232a36;background:#10151d;color:var(--fg);cursor:pointer}
.btn-close:hover{border-color:#2f394a}

/* Responsive */
@media (min-width:900px){.app-icon{width:160px;height:160px}}

.hr-glow{
  height: 2px;
  border: 0;
  background: linear-gradient(90deg,transparent, rgba(253,229,6,.7), transparent);
  margin: 36px 0;
}

.spacer-xl{ height: 48px; }

.stacked span { display:block; }
.stacked .spaced { margin-top: 50rem; } /* adjust gap here */