/* ---------- Base ---------- */
:root{
  --bg: #0f1115;
  --fg: #f6f7fb;
  --muted:#c9ccda;
  --accent:#9AE6B4;
  --accent-2:#A78BFA;
  --card:#1a1d24cc;
  --glass:#141821a6;
  --ring:#ffffff2a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --focus: 0 0 0 3px #a78bfa80, 0 0 0 6px #9ae6b460;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --fg:#12131a;
    --muted:#4b4f63;
    --card:#ffffffcc;
    --glass:#ffffffa8;
    --ring:#00000018;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 75% -10%, #a78bfa22, transparent 60%),
              radial-gradient(1000px 600px at -10% 60%, #9ae6b422, transparent 60%),
              var(--bg);
  overflow:auto; /* allow page scrolling */
}

/* Accessibility */
:focus-visible{outline:none; box-shadow: var(--focus)}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important}
}

/* Background blobs */
.bg-aura .blob{
  position:fixed; inset:auto;
  width:55vmax; height:55vmax; border-radius:50%;
  filter: blur(80px); opacity:.25; z-index:-2;
}
.bg-aura .b1{ background:#a78bfa88; top:-10vmax; right:-8vmax; animation:float 22s ease-in-out infinite;}
.bg-aura .b2{ background:#9ae6b488; bottom:-12vmax; left:-10vmax; animation:float 26s ease-in-out infinite reverse;}
.bg-aura .b3{ background:#fbcfe888; top:30vh; right:10vw; width:35vmax; height:35vmax; animation:float 30s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(3vmax,-2vmax)}}
.bg-aura .grain{ position:fixed; inset:0; width:100%; height:100%; mix-blend-mode:overlay; opacity:.15; z-index:-1}

/* Topbar */
.topbar{
  position:sticky; top:10px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between;
  margin:10px 14px 6px 14px; padding:10px 14px; background:var(--glass); border:1px solid var(--ring); backdrop-filter: blur(12px);
  border-radius: var(--radius); box-shadow: var(--shadow); z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.brand .logo{display:grid; place-items:center; width:28px; height:28px; border-radius:12px; background:linear-gradient(135deg,#a78bfa,#9ae6b4); color:#0b0c10; font-size:18px}
.brand .wordmark{font-family:"Playfair Display", serif; font-size:20px}

.dots{display:flex; gap:10px; align-items:center}
.dots label{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  background:linear-gradient(to bottom, #ffffffaa, #ffffff33);
  border:1px solid var(--ring); cursor:pointer; transition:transform .25s ease, box-shadow .25s ease;
}
.dots label:hover{transform:translateY(-2px); box-shadow:0 6px 16px #00000030}
.dots .uicon{font-size:18px}

/* Hidden radios */
input[type="radio"]{position:absolute; opacity:0; pointer-events:none}

/* Deck container (scrollable per slide) */
.deck{
  position:relative; display:grid; gap:18px; padding:0 14px 60px 14px;
}
.slide{
  position:relative; display:block; padding: clamp(12px, 3.5vw, 44px);
  opacity:.3; transform: translateY(6px) scale(.995); pointer-events:auto;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  filter:saturate(.8);
}
.slide .content{
  width:min(100%, 980px); margin-inline:auto;
  background:var(--card); border:1px solid var(--ring);
  border-radius: calc(var(--radius) + 6px); padding:clamp(16px,3vw,36px);
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
h1,h2{font-family:"Playfair Display", serif; line-height:1.15; letter-spacing:.2px; margin:.2em 0 .5em}
h1{font-size: clamp(26px, 4vw, 46px)}
h2{font-size: clamp(24px, 3.2vw, 36px)}
.lead{font-size: clamp(16px, 1.6vw, 20px); color:var(--muted)}
p{font-size: clamp(15px, 1.3vw, 18px); color:var(--fg);}
ul.points{display:grid; gap:8px; padding-left:18px}
.accent{background:linear-gradient(135deg,#a78bfa, #9ae6b4); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Tooltip icons */
.uicon{
  display:inline-block; margin-left:.2em; cursor:help;
  position:relative; vertical-align:middle; font-size:1em;
}
.uicon::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:130%; transform:translateX(-50%) translateY(6px);
  background:#111827; color:#f9fafb; white-space:nowrap; font-size:12px; line-height:1; padding:8px 10px;
  border-radius:8px; border:1px solid #ffffff2a; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; box-shadow:0 10px 20px #00000050;
}
.uicon:hover::after{opacity:1; transform:translateX(-50%) translateY(0)}

/* Graphic slots */
.graphic-slot{
  margin-top:18px; height: clamp(120px, 24vh, 260px);
  border:2px dashed #ffffff33; border-radius:14px; display:grid; place-items:center; color:var(--muted);
}

/* Nav buttons inside slides */
.nav{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.nav label, .cta .ghost, .primary, .tiny-btn{
  appearance:none; border:none; cursor:pointer; padding:10px 16px; font-weight:600; border-radius:12px;
  background:linear-gradient(135deg,#ffffffaa,#ffffff44); color:var(--fg); border:1px solid var(--ring);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
  text-decoration:none; display:inline-block;
}
.nav .prev{opacity:.85}
.nav .next, .primary{background:linear-gradient(135deg,#a78bfa,#9ae6b4); color:#0b0c10}
.nav label:hover, .primary:hover, .tiny-btn:hover{transform: translateY(-2px); box-shadow:0 12px 20px #00000033}
.cta{display:flex; gap:12px; margin-top:18px}
.cta .ghost{background:transparent}
.cta .ghost:hover{background:#ffffff1a}

/* Pills */
.pillgrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.pill{
  background:#ffffff12; border:1px solid var(--ring); border-radius:18px; padding:14px 16px; backdrop-filter: blur(6px);
}

/* Steps */
.steps{display:grid; gap:10px; counter-reset: step; margin:0; padding:0}
.steps li{
  list-style:none; background:#ffffff10; border:1px solid var(--ring); border-radius:14px; padding:12px 14px; position:relative; overflow:hidden;
}
.steps li span{font-weight:600}
.steps li::before{
  counter-increment: step; content: counter(step);
  position:absolute; inset:auto auto 8px 12px; font-weight:800; color:#000; background:linear-gradient(135deg,#a78bfa,#9ae6b4);
  width:28px; height:28px; display:grid; place-items:center; border-radius:10px;
}

/* Collapsible blocks */
.exp{margin:10px 0}
.exp summary{cursor:pointer; font-weight:700}
.exp > *{margin-top:8px}

/* Testimonial */
.testimonial{margin:0}
.testimonial blockquote{font-family:"Playfair Display", serif; font-size: clamp(18px, 2vw, 24px); margin:0}
.testimonial figcaption{margin-top:8px; color:var(--muted)}

/* Cards */
.cardrow{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
.card{
  background:#ffffff10; border:1px solid var(--ring); border-radius:16px; padding:14px; min-height:110px;
  transition: transform .3s ease;
}
.card:hover{transform: translateY(-4px)}

/* Multimedia */
.media-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:6px}
.media-card{
  background:#ffffff10; border:1px solid var(--ring); border-radius:16px; padding:14px; display:grid; gap:8px;
}
.media-thumb{
  width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  background:#ffffff14; border:1px solid var(--ring); font-size:28px;
}
.tiny-btn{padding:8px 12px; font-size:14px}

/* Carousel */
.carousel, .gallery{margin-top:12px}
.carousel input, .gallery input{position:absolute; opacity:0}
.carousel .frames, .gallery .frames{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--ring); background:#ffffff10}
.carousel .frame, .gallery .frame{min-height:80px; display:grid; place-items:center; padding:18px; transition:transform .5s ease, opacity .5s ease}
.carousel .frames{display:grid; grid-template-columns: 100% 100% 100%; width:300%; transform:translateX(0)}
.gallery .frames{display:grid; grid-template-columns: 100% 100% 100%; width:300%; transform:translateX(0)}
.carousel .cnav, .gallery .gnav{display:flex; gap:8px; justify-content:center; margin-top:8px}
.carousel .cnav label, .gallery .gnav label{cursor:pointer}

/* Carousel positions */
#c1a:checked ~ .frames{transform:translateX(0%)}
#c1b:checked ~ .frames{transform:translateX(-100%)}
#c1c:checked ~ .frames{transform:translateX(-200%)}
#g1a:checked ~ .frames{transform:translateX(0%)}
#g1b:checked ~ .frames{transform:translateX(-100%)}
#g1c:checked ~ .frames{transform:translateX(-200%)}

/* Active slide emphasis */


/* Per-slide entry effects */
.anim-fade .content{animation: fadeIn .8s ease both .05s}
.anim-rise .content{animation: riseIn .8s ease both .05s}
.anim-zoom .content{animation: zoomIn .7s ease both .05s}
.anim-slide-left .content{animation: slideL .7s cubic-bezier(.2,.9,.2,1) both .05s}
.anim-blur-in .content{animation: blurIn .7s ease both .05s}
.anim-cards .card{animation: pop .6s ease both; animation-delay: calc(.05s * var(--i, 1));}
.anim-lilt .content{animation: lilt .8s ease both .05s}
.anim-tree .content{animation: riseIn .8s ease both .05s}
.anim-glow .content{animation: glowIn 1s ease both .05s}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes zoomIn{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:scale(1)}}
@keyframes slideL{from{opacity:0; transform:translateX(24px)}to{opacity:1; transform:none}}
@keyframes blurIn{from{filter:blur(10px); opacity:0}to{filter:blur(0); opacity:1}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)}to{opacity:1; transform:none}}
@keyframes lilt{0%{transform:translateY(8px)}100%{transform:none}}
@keyframes glowIn{from{opacity:0; box-shadow:none}to{opacity:1; box-shadow:0 0 0 1px var(--ring), 0 20px 50px #00000040}}

/* Responsive */
@media (max-width: 980px){
  .pillgrid{grid-template-columns:1fr}
  .cardrow{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:1fr}
  .graphic-slot{height: 160px}
}
@media (max-width: 640px){
  .cardrow{grid-template-columns:1fr}
  .topbar{margin:8px 10px}
  .deck{padding:0 10px 40px 10px}
}


/* ===== NO-ANIMATION MODE (global, for straight-through clicks) ===== */
.no-anim *, .no-anim *::before, .no-anim *::after{
  animation: none !important;
  transition: none !important;
}
.no-anim .slide{transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important;}
.no-anim .slide .content{animation: none !important;}
.no-anim .anim-fade .content,
.no-anim .anim-rise .content,
.no-anim .anim-zoom .content,
.no-anim .anim-slide-left .content,
.no-anim .anim-blur-in .content,
.no-anim .anim-cards .card,
.no-anim .anim-lilt .content,
.no-anim .anim-tree .content,
.no-anim .anim-glow .content{animation: none !important}

.no-anim .carousel .frames,
.no-anim .carousel .frame,
.no-anim .gallery .frames,
.no-anim .gallery .frame{transition: none !important}

.no-anim .dots label:hover,
.no-anim .nav label:hover,
.no-anim .primary:hover,
.no-anim .tiny-btn:hover{transform:none !important; box-shadow:none !important}

/* Disable background float animation too */
.no-anim .bg-aura .b1,
.no-anim .bg-aura .b2,
.no-anim .bg-aura .b3{animation: none !important}


.dots .dot{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
  background:linear-gradient(to bottom, #ffffffaa, #ffffff33);
  border:1px solid var(--ring); text-decoration:none; color:inherit;
}
.dots .dot:hover{transform:translateY(-2px); box-shadow:0 6px 16px #00000030}

.slide{scroll-margin-top: 90px}