:root{
  --bg:#0b0b10;
  --panel:#121219;
  --text:#eaeaf1;
  --muted:#a8abb6;
  --brand:#7c5cff;
  --brand2:#ffb700;
  --line:#24242f;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --header-h:72px;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-top:var(--header-h);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1300px,90%);margin-inline:auto}
.tiny{font-size:12px}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  background:rgba(11,11,16,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled{box-shadow:var(--shadow); background:rgba(11,11,16,.75)}
.header-row{height:var(--header-h); display:flex; align-items:center; gap:16px; position:relative}
.logo{font-weight:700;font-size:20px;letter-spacing:.2px;cursor:pointer}
/* Rainbow wave on logo */
.logo.logo-wave{
  background:linear-gradient(90deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#b980f0,#ff6b6b);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:logoWave 650ms ease-out 1 both;
}
@keyframes logoWave{
  from{background-position:var(--start-x,0%) 0}
  to{background-position:120% 0}
}

.main-nav{margin-left:auto; display:flex; align-items:center}
.main-nav ul{display:flex; gap:8px; align-items:center}
.main-nav li{list-style:none}
.main-nav a{padding:8px 10px; border-radius:10px; font-weight:600; font-size:14px}
.main-nav a:hover{color:var(--brand2)}
/* Search (header) */
.header-search{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,60%); display:flex; align-items:center; justify-content:center}
.search-input{width:100%; background:#0e0e15; border:1px solid var(--line); color:var(--text); border-radius:999px; padding:10px 14px; font-weight:500}
.search-input::placeholder{color:#8f93a3}
.search-panel{position:absolute; top:calc(100% + 8px); left:0; right:0; background:#0f0f15; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; display:none; z-index:1200; max-height:320px; overflow:auto}
.search-item{display:block; padding:10px 12px; border-radius:10px}
.search-item .ti{font-weight:700; font-size:14px}
.search-item .di{color:var(--muted); font-size:13px; margin-top:2px}
.search-item:hover, .search-item.active{background:rgba(124,92,255,.10); border:1px solid rgba(124,92,255,.25)}
.no-results{padding:12px; color:var(--muted); font-size:13px; text-align:center}
/* Icon button + mobile toggle */
.icon-btn{width:40px; height:40px; border:1px solid #2a2a36; background:rgba(255,255,255,.02); color:var(--text); border-radius:10px; display:inline-grid; place-items:center; cursor:pointer}
.icon-btn svg{width:18px; height:18px}
/* Utilities */
.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
[hidden]{display:none !important}
.search-icon-li{display:none}

.nav-toggle{display:none; background:none; border:0; width:40px; height:40px; border-radius:8px}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:5px auto}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:700; border:1px solid transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease}
.btn-primary{color:#ffffff; background:linear-gradient(90deg, var(--brand) 0%, #9d84ff 50%, var(--brand) 100%); background-size:200% 100%; cursor: pointer;}
.btn-primary:hover{background-position:100% 0; box-shadow:0 6px 18px rgba(124,92,255,.35); transform:translateY(-1px)}
.btn-ghost{border-color:#2a2a36; background:rgba(255,255,255,.02); color:var(--text)}
.btn-ghost:hover{background:rgba(124,92,255,.10); border-color:rgba(124,92,255,.35); box-shadow:0 6px 16px rgba(124,92,255,.18)}

/* Hero */
.hero{position:relative; isolation:isolate}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(1200px 600px at 20% 10%, rgba(124,92,255,.35), transparent 60%),
             radial-gradient(1200px 600px at 80% 20%, rgba(255,183,0,.25), transparent 60%),
             linear-gradient(180deg, #11121a 0%, #0b0b10 60%);
}
.hero .hero-inner{padding:96px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center}
.eyebrow{color:var(--brand2); font-weight:700; letter-spacing:.4px; margin-bottom:12px}
.hero h1{font-size:clamp(32px,5vw,56px); line-height:1.1; font-weight:700; max-width:12ch}
.hero .lead{margin-top:16px; color:var(--muted); max-width:52ch; font-size:clamp(16px,2.2vw,18px)}
.cta-row{display:flex; gap:12px; margin-top:26px}

.trust{display:flex; gap:24px; margin-top:34px; color:#bdbfe9; opacity:.9; flex-wrap:wrap}
.trust li{list-style:none; border:1px dashed rgba(189,191,233,.25); padding:6px 10px; border-radius:999px}

/* Hero art */
.hero-art{position:relative; height:360px; border-radius:20px;}
.hero-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
/* Aurora overlay */
.hero-art::before, .hero-art::after{
  content:""; position:absolute; inset:-20%; border-radius:28px; filter:blur(32px); opacity:.5; mix-blend-mode:screen; pointer-events:none;
}
.hero-art::before{
  animation:auroraMove 22s ease-in-out infinite;
}
.hero-art::after{background:
  radial-gradient(35% 45% at 65% 70%, rgba(124,92,255,.28), transparent 60%),
  radial-gradient(35% 45% at 30% 30%, rgba(255,183,0,.25), transparent 60%);
  animation:auroraMove 28s ease-in-out reverse infinite;
}
@keyframes auroraMove{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
#starfield{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent}
/* Hero floating tiles */
.hero-tiles{position:absolute; inset:0; pointer-events:none}
.tile{position:absolute; display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(16,16,24,.85); box-shadow:var(--shadow); backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px); font-weight:700;transition:top .6s ease,left .6s ease,transform .6s ease,opacity .4s ease; opacity:.0}
.tile.ready{opacity:1}
.tile svg{width:20px; height:20px; opacity:.9}
@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.tile span{letter-spacing:.2px}
.grad-a{background:linear-gradient(135deg, rgba(255,195,113,.22), rgba(255,95,109,.22));}
.grad-b{background:linear-gradient(135deg, rgba(137,247,254,.18), rgba(102,166,255,.18));}
.grad-c{background:linear-gradient(135deg, rgba(253,219,146,.20), rgba(209,253,255,.20));}

/* Sections */
.section{padding:80px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:28px}
.section-head h2{font-size:clamp(24px,3.2vw,36px)}
.section-head p{color:var(--muted)}
.centered{flex-direction:column; align-items:center; text-align:center; gap:6px}

/* Templates grid */
.templates .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.card .thumb{display:block; height:180px}
.thumb.t1{background:linear-gradient(135deg,#FFC371,#FF5F6D)}
.thumb.t2{background:linear-gradient(135deg,#74ebd5,#ACB6E5)}
.thumb.t3{background:linear-gradient(135deg,#89f7fe,#66a6ff)}
.thumb.t4{background:linear-gradient(135deg,#fddb92,#d1fdff)}
.card-body{padding:16px; display:flex; flex-direction:column; flex:1 1 auto}
.card h3{font-size:18px; margin-bottom:6px}
.card p{color:var(--muted); margin-bottom:14px}
.card-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
.card-actions .btn{
  min-width: 0;
  /* Remove width:100% or display:block if present */
}
.card-actions .btn-buy{
  order: 2;
  padding-left: 32px;
  padding-right: 32px;
}

/* Features */
.features{background:linear-gradient(180deg,#0b0b10 0%,#0e0e15 100%)}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}
.feat svg{width:28px; height:28px; opacity:.9}
.feat h3{margin:10px 0 6px; font-size:18px}
.feat p{color:var(--muted)}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px}
.steps li{
  list-style:none;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}
.step-num{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; background:var(--brand); color:#0e0a2a; font-weight:700; margin-bottom:8px}

/* Testimonials (single-at-a-time slider) */
.quotes{position:relative; overflow:hidden; transition:height .25s ease; min-height:100px}
.quotes blockquote{position:absolute; inset:0; opacity:0; transform:translateX(16px); transition:opacity .25s ease, transform .25s ease; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.quotes blockquote.active{opacity:1; transform:translateX(0)}
blockquote p{font-size:16px}
blockquote cite{display:block; margin-top:10px; color:var(--muted); font-style:normal}

/* FAQ — single column to avoid height coupling */
.faq-list{display:block}
.faq-list details{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; cursor:pointer;}
.faq-list summary{cursor:pointer; font-weight:600; outline:none}
.faq-list p{margin-top:10px; color:var(--muted)}

/* About */
.about-text{max-width:60ch; margin:0 auto; color:#d6d7e2; text-align: center;}

/* Contact */
.contact-form{max-width:720px; margin:0 auto; display:grid; gap:12px}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-form input, .contact-form textarea{width:100%; background:#0e0e15; border:1px solid var(--line); color:var(--text); border-radius:12px; padding:12px 14px; resize: none;}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid rgba(124,92,255,.5); outline-offset:0}

/* Modal */
.modal{position:fixed; inset:0; display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-panel{position:absolute; inset:auto 50% 50% auto; transform:translate(50%,50%); width:min(420px,92%); background:#0f0f15; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.modal-close{position:absolute; top:8px; right:10px; width:32px; height:32px; border:1px solid var(--line); background:transparent; color:var(--text); border-radius:8px; cursor:pointer}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
/* Modal buttons: neutral by default, brand on hover */
.modal-grid .btn{border-color:#2a2a36; background:rgba(255,255,255,.02); color:var(--text)}
.modal-grid .btn:hover{background:linear-gradient(90deg, var(--brand) 0%, #9d84ff 50%, var(--brand) 100%); background-size:200% 100%; color:#ffffff; border-color:transparent; box-shadow:0 6px 18px rgba(124,92,255,.35); transform:translateY(-1px)}
.modal-grid .btn:focus-visible{outline:2px solid rgba(124,92,255,.6); outline-offset:2px}

/* Footer */
.site-footer{background:#0a0a0f;}
.cta-panel{background:linear-gradient(135deg, rgba(124,92,255,.12), rgba(255,183,0,.12));
  border:1px solid var(--line); border-radius:var(--radius); padding:30px; margin:28px 0; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 500px; margin: 20px auto 80px;}

.footer-wrap{padding:18px 0 26px}
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:10px}
.foot-brand .logo{font-size:18px}
.foot-tagline{color:var(--muted); font-size:14px}
.foot-nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.foot-nav a{color:#d9d9df; font-size: 14px;}
.foot-nav a:hover{color:var(--brand2)}
.footer-divider{height:1px; background:var(--line); margin:14px 0}
.footer-bottom{display:flex; justify-content:flex-end; color:var(--muted); font-size:13px}
@media (max-width:760px){
  .footer-top{justify-content:center; text-align:center}
  .foot-brand{justify-content:center}
  .footer-bottom{justify-content:center; text-align:center}
}

/* Responsive */
@media (max-width: 1024px){
  .templates .grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  /* Search responsive */
  .header-search{display:none}
  .search-icon-li{display:list-item}
  .mobile-search{position:fixed; top:var(--header-h); left:0; right:0; padding:12px; background:#0f0f15; border-bottom:1px solid var(--line); z-index:1200}
  .mobile-search .search-panel{position:static; display:block; margin-top:8px; max-height:50vh; overflow:auto}
  /* Header: no dropdown on small screens */
  .nav-toggle{display:none}
  .main-nav ul{position:static; display:flex; flex-direction:row; gap:8px; padding:0; background:transparent; border:0}
  /* Fluid-ish type scaling on small screens */
  body{font-size:14px}
  .main-nav a{font-size:13px}
  .btn{padding:10px 14px}
  .btn, .btn .label{font-size:14px}

  /* Hero */
  .eyebrow{font-size:14px}
  .hero .lead{font-size:15px}
  .trust{font-size:14px}
  .trust li{font-size:13px}

  /* Cards & sections */
  .section-head h2{font-size:22px}
  .card h3{font-size:16px}
  .card p{font-size:14px}

  /* Testimonials & FAQ */
  blockquote p{font-size:15px}
  .faq-list summary{font-size:15px}
  .faq-list p{font-size:14px}

  /* Footer links */
  .foot-nav a{font-size:13px}
  .hero .hero-inner{padding:72px 0 32px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{display:none}
  .hero-copy{text-align:center; max-width:64ch; margin-left:auto; margin-right:auto}
  .hero h1{max-width:100%}
  .hero .lead{margin-left:auto; margin-right:auto}
  .cta-row{justify-content:center}
  .trust{justify-content:center}
  .templates .grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  /* Center feature and steps content on small screens */
  .feat{align-items:center; justify-content:center; text-align:center}
  .steps li{align-items:center; justify-content:center; text-align:center}
}
/* Global button hover/transition effect */
button, .btn {
  transition: all 300ms ease;
}
button:hover, .btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}