:root{
  --ink: #10151F;
  --ink-2: #171E2B;
  --paper: #F3EFE7;
  --paper-dim: #B9B4A8;
  --signal: #E8432C;
  --gold: #C9A227;
  --line: rgba(243,239,231,0.14);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 26px clamp(24px, 5vw, 64px);
  border-bottom:1px solid var(--line);
}
.site-header .wordmark{
  font-family:'Fraunces', serif;
  font-size:1.2rem;
  font-weight:500;
}
.site-header nav{
  font-size:0.85rem;
  color:var(--paper-dim);
}
.site-header nav a.active{ color:var(--paper); }
.site-header .dot{ margin:0 8px; color:var(--paper-dim); }

/* ---------- Intro ---------- */
.intro{
  padding: 70px clamp(24px, 5vw, 64px) 40px;
  max-width: 640px;
}
.intro h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  line-height:1.1;
  margin-bottom:18px;
}
.intro p{
  color:var(--paper-dim);
  font-size:1rem;
  line-height:1.6;
}

/* ---------- Filters ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 0 clamp(24px, 5vw, 64px) 40px;
}
.filter-btn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--paper-dim);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:0.82rem;
  padding:8px 16px;
  cursor:pointer;
  transition: all .2s ease;
}
.filter-btn:hover{ color:var(--paper); border-color:var(--paper-dim); }
.filter-btn.active{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}

/* ---------- Grid ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin: 0 clamp(24px, 5vw, 64px) 100px;
}
.card{
  background:var(--ink);
  padding: 26px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:16px;
  transition: background .25s ease;
}
.card:hover{ background:var(--ink-2); }

.card .demo-box{
  height:150px;
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  border:1px solid var(--line);
}

.card .meta .cat{
  font-size:0.72rem;
  color:var(--gold);
  margin-bottom:6px;
}
.card .meta h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.25rem;
  margin-bottom:8px;
}
.card .meta p{
  font-size:0.85rem;
  color:var(--paper-dim);
  line-height:1.5;
}

.card.hidden{ display:none; }

/* ---------- Modal ---------- */
.modal{
  position:fixed; inset:0;
  background:rgba(16,21,31,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition: opacity .25s ease;
}
.modal.open{ opacity:1; pointer-events:all; }
.modal-inner{
  width:min(720px, 90vw);
  background:var(--ink);
  border:1px solid var(--line);
  padding:34px;
  position:relative;
}
.modal-close{
  position:absolute;
  top:14px; right:18px;
  background:none;
  border:none;
  color:var(--paper-dim);
  font-size:1.8rem;
  cursor:pointer;
  line-height:1;
}
.modal-close:hover{ color:var(--paper); }
.modal-body .demo-box{ height:320px; }

/* ---------- Footer ---------- */
.site-footer{
  padding: 30px clamp(24px, 5vw, 64px) 50px;
  display:flex;
  justify-content:space-between;
  color:var(--paper-dim);
  font-size:0.8rem;
}

/* ================= Effect-specific demo styles ================= */

/* Splash */
.demo-splash{
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
  font-size:1.6rem;
  position:relative;
}
.demo-splash .bar{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  width:70%; height:1px; background:var(--line);
}
.demo-splash .bar-fill{ height:100%; width:0%; background:var(--signal); }

/* Parallax */
.demo-parallax{ perspective:400px; }
.demo-parallax .layer{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
}
.demo-parallax .layer-back{ background:linear-gradient(135deg,#2C3E50,#10151F); }
.demo-parallax .layer-mid{ font-size:2.6rem; color:rgba(243,239,231,0.15); }
.demo-parallax .layer-front{ font-size:1.1rem; color:var(--gold); }

/* Reveal */
.demo-reveal{ display:flex; align-items:center; justify-content:center; padding:0 20px; }
.demo-reveal .line{ overflow:hidden; }
.demo-reveal .line span{
  display:block;
  font-family:'Fraunces', serif;
  font-size:1.4rem;
  transform:translateY(120%);
}

/* Pin */
.demo-pin{ position:relative; overflow:hidden; }
.demo-pin .track{ position:absolute; inset:0; display:flex; transition: transform .1s linear; width:400%; }
.demo-pin .frame{ width:25%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:1.1rem; flex-shrink:0; }
.demo-pin .frame:nth-child(1){ background:#2A1E3D; }
.demo-pin .frame:nth-child(2){ background:#1F2937; }
.demo-pin .frame:nth-child(3){ background:#4C1D14; }
.demo-pin .frame:nth-child(4){ background:#3B2F00; }
.demo-pin .hint{ position:absolute; bottom:8px; right:10px; font-size:0.65rem; color:var(--paper-dim); }

/* Magnetic */
.demo-magnetic{ display:flex; align-items:center; justify-content:center; }
.demo-magnetic .mbtn{
  padding:14px 28px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:0.85rem;
  position:relative;
  transition: transform .15s ease;
}

/* Cursor */
.demo-cursor{ display:flex; align-items:center; justify-content:center; position:relative; cursor:none; }
.demo-cursor p{ color:var(--paper-dim); font-size:0.85rem; }
.demo-cursor .blob{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:var(--signal); pointer-events:none;
  transform:translate(-50%,-50%);
  opacity:0;
  transition: opacity .2s ease;
}

/* Counter */
.demo-counter{ display:flex; gap:30px; align-items:center; justify-content:center; }
.demo-counter .num{ font-family:'Fraunces', serif; font-size:2.2rem; color:var(--gold); }
.demo-counter .lbl{ font-size:0.7rem; color:var(--paper-dim); display:block; text-align:center; margin-top:4px; }

/* Marquee */
.demo-marquee{ display:flex; align-items:center; overflow:hidden; }
.demo-marquee .track{ display:flex; gap:40px; white-space:nowrap; animation: marquee-scroll 8s linear infinite; }
.demo-marquee .track span{ font-family:'Fraunces', serif; font-size:1.3rem; color:var(--paper-dim); }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Compare (before/after) */
.demo-compare{ position:relative; overflow:hidden; }
.demo-compare .before, .demo-compare .after{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.75rem; }
.demo-compare .before{ background:#2C2C2C; color:#888; }
.demo-compare .after{ background:linear-gradient(135deg,#E8432C,#C9A227); color:#10151F; overflow:hidden; }
.demo-compare .handle{
  position:absolute; top:0; bottom:0; width:2px; background:var(--paper);
  cursor:ew-resize;
}
.demo-compare .handle::after{
  content:'⇔';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--paper); color:var(--ink);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem;
}

@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

/* ---- Section demos ---- */

/* Nav */
.demo-nav{ display:flex; flex-direction:column; justify-content:flex-start; padding:0; }
.demo-nav .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; font-size:0.7rem; border-bottom:1px solid var(--line);
  transition: background .3s ease, padding .3s ease;
}
.demo-nav .bar.shrunk{ background:var(--ink); padding:6px 14px; }
.demo-nav .bar .logo{ font-family:'Fraunces', serif; }
.demo-nav .bar .links span{ margin-left:10px; color:var(--paper-dim); }
.demo-nav .body{ flex:1; overflow-y:auto; padding:14px; font-size:0.7rem; color:var(--paper-dim); }

/* Hero */
.demo-hero{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:20px; gap:10px; }
.demo-hero h4{ font-family:'Fraunces', serif; font-size:1.4rem; font-weight:500; }
.demo-hero p{ font-size:0.78rem; color:var(--paper-dim); }
.demo-hero .cta{ margin-top:6px; padding:8px 16px; background:var(--signal); color:var(--paper); font-size:0.72rem; }

/* Testimonials */
.demo-testimonials{ display:flex; align-items:center; justify-content:center; padding:20px; position:relative; }
.demo-testimonials .quote{ font-family:'Fraunces', serif; font-style:italic; font-size:0.95rem; text-align:center; transition: opacity .4s ease; }
.demo-testimonials .who{ display:block; margin-top:10px; font-size:0.7rem; color:var(--gold); font-style:normal; }
.demo-testimonials .dots{ position:absolute; bottom:10px; display:flex; gap:6px; }
.demo-testimonials .dots span{ width:5px; height:5px; border-radius:50%; background:var(--line); }
.demo-testimonials .dots span.active{ background:var(--gold); }

/* Pricing */
.demo-pricing{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; }
.demo-pricing .toggle{ display:flex; gap:0; border:1px solid var(--line); font-size:0.65rem; }
.demo-pricing .toggle span{ padding:4px 10px; cursor:pointer; color:var(--paper-dim); }
.demo-pricing .toggle span.active{ background:var(--paper); color:var(--ink); }
.demo-pricing .price{ font-family:'Fraunces', serif; font-size:1.8rem; }
.demo-pricing .price small{ font-size:0.7rem; color:var(--paper-dim); }

/* Team */
.demo-team{ display:flex; gap:12px; align-items:center; justify-content:center; padding:16px; }
.demo-team .member{ text-align:center; }
.demo-team .avatar{ width:44px; height:44px; border-radius:50%; margin:0 auto 6px; background:linear-gradient(135deg,var(--gold),var(--signal)); transition: transform .2s ease; }
.demo-team .member:hover .avatar{ transform:scale(1.15); }
.demo-team .name{ font-size:0.65rem; color:var(--paper-dim); }

/* FAQ */
.demo-faq{ display:flex; flex-direction:column; justify-content:center; padding:14px; gap:8px; }
.demo-faq .q{ font-size:0.78rem; padding:8px 10px; border:1px solid var(--line); cursor:pointer; display:flex; justify-content:space-between; }
.demo-faq .a{ font-size:0.72rem; color:var(--paper-dim); max-height:0; overflow:hidden; transition: max-height .3s ease, padding .3s ease; padding:0 10px; }
.demo-faq .item.open .a{ max-height:60px; padding:8px 10px; }
.demo-faq .item.open .q .plus{ transform:rotate(45deg); }
.demo-faq .plus{ transition: transform .2s ease; }

/* Contact form */
.demo-contact{ display:flex; flex-direction:column; gap:8px; padding:16px; justify-content:center; }
.demo-contact input, .demo-contact textarea{
  background:transparent; border:1px solid var(--line); color:var(--paper);
  font-family:'IBM Plex Sans', sans-serif; font-size:0.75rem; padding:6px 8px; width:100%;
}
.demo-contact input:focus, .demo-contact textarea:focus{ outline:none; border-color:var(--gold); }
.demo-contact .send{ align-self:flex-start; padding:6px 14px; background:var(--signal); color:var(--paper); font-size:0.72rem; margin-top:4px; }

/* Footer demo */
.demo-footer{ display:flex; flex-direction:column; justify-content:flex-end; padding:16px; gap:10px; }
.demo-footer .cols{ display:flex; gap:20px; font-size:0.68rem; color:var(--paper-dim); }
.demo-footer .cols div div{ margin-top:4px; opacity:0.7; }
.demo-footer .bottom{ border-top:1px solid var(--line); padding-top:8px; font-size:0.65rem; color:var(--paper-dim); display:flex; justify-content:space-between; }