:root{
  --bg: #ffffff;
  --surface: #fafafa;
  --card: #ffffff;
  --glass: rgba(255,255,255,.8);
  --border: rgba(0,0,0,.08);
  --text: #0b1220;
  --muted: #596275;
  --brand: #e11d48;
  --brand-2:#ff6b81;
  --accent:#111827;
  --radius: 18px;
  --shadow: 0 14px 40px rgba(16, 24, 40, .08);
  --maxw: 1180px;
  --section-gap: 100px;
}

*{box-sizing:border-box}
html,body{height:100%; width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth;}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1000px 600px at 10% -10%, #fff0f3 0%, transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, #ffe3e7 0%, transparent 60%),
              linear-gradient(180deg, var(--surface), var(--surface));
  overflow-x:hidden;
}

.bg-ribbons{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.ribbon{
  position:absolute; width:1200px; height:240px; left:-10%; top:-6%;
  background: linear-gradient(90deg, rgba(225,29,72,.15), rgba(255,107,129,.12));
  filter: blur(22px); border-radius:200px; transform: rotate(-8deg);
  animation: drift 16s ease-in-out infinite;
}
.ribbon.r2{top:60%; left:30%; width:1100px; transform: rotate(12deg); animation-delay:-8s}
@keyframes drift{0%,100%{transform:translateY(-6px) rotate(var(--r, -8deg))} 50%{transform:translateY(6px) rotate(var(--r, -8deg))}}

.header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border-bottom:1px solid var(--border);
}
.navwrap{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:18px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--accent)}
.brand-logo{width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow)}
.brand-name{font-weight:800; letter-spacing:.2px}
.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{color:var(--accent); opacity:.9; text-decoration:none; padding:10px 14px; border-radius:10px; transition:.2s}
.nav a:hover{background:rgba(225,29,72,.08); opacity:1}
.cta{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:white; font-weight:700}
.cta:hover{transform:translateY(-1px)}

.hero{max-width:var(--maxw); margin:0 auto; padding:120px 20px 40px; display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center}
.h-title{font-size: clamp(38px, 6vw, 64px); line-height:1.02; margin:0 0 14px; color:var(--accent)}
.h-sub{font-size: clamp(16px, 2.3vw, 22px); color:var(--muted); margin:0 0 28px}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 26px}
.pill{padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:13px}

.section{max-width:var(--maxw); margin:0 auto; padding:var(--section-gap) 20px}
.section h2{font-size: clamp(26px, 4.6vw, 46px); margin:0 0 14px; color:var(--accent)}
.lead{color:var(--muted); max-width:900px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:22px}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; color:var(--accent)}
.card p{margin:0; color:var(--muted)}

.showcase{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:24px}
.tile{border-radius:16px; background:
  radial-gradient(200px 120px at 20% 20%, rgba(225,29,72,.12), transparent),
  linear-gradient(135deg, rgba(225,29,72,.18), rgba(255,107,129,.14)); border:1px solid var(--border); overflow: hidden; display: flex; justify-content: center; align-items: center;} 
  
.tile img {
  width: 90%;
  height: auto;

}
.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; perspective: 1000px}
.tier{position:relative; height:420px}
.flip{width:100%; height:100%; position:relative; transform-style:preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1)}
.tier.flipped .flip{transform: rotateY(180deg)}
.face{position:absolute; inset:0; border-radius:var(--radius); backface-visibility:hidden; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--card)}
.face.front{padding:22px}
.face.back{transform: rotateY(180deg); background:#fff}
.price{font-size:40px; font-weight:800; margin:10px 0; color:var(--accent)}
.features{margin:16px 0 22px; padding:0; list-style:none}
.features li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.dot{width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--brand)}
.btn{display:inline-block; text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); padding:12px 16px; border-radius:14px; font-weight:700; transition:.2s; border:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--border)}
.btn:hover{transform:translateY(-1px)}

.back-content{padding:22px; overflow:auto}
.back-content h4{margin:0 0 10px; color:var(--accent)}
.back-content p, .back-content li{color:var(--muted)}

.back-content::-webkit-scrollbar{width:10px}
.back-content::-webkit-scrollbar-track{background:#f6f6f6; border-left:1px solid var(--border); border-radius:12px}
.back-content::-webkit-scrollbar-thumb{background: linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius:12px}
.back-content{scrollbar-width:thin; scrollbar-color: var(--brand) #f6f6f6}

.faq{max-width:900px}
.faq details{background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin:10px 0; box-shadow:var(--shadow)}
.faq summary{cursor:pointer; list-style:none; font-weight:700; color:var(--accent)}
.faq p{color:var(--muted)}

.footer{border-top:1px solid var(--border); padding:40px 20px 70px; background:rgba(255,255,255,.8); backdrop-filter: blur(10px)}
.f-cols{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr .9fr; gap:26px}
.f-cols a{color:var(--accent); opacity:.9; text-decoration:none}
.copy{max-width:var(--maxw); margin:14px auto 0; color:var(--muted); font-size:13px}

.center{text-align:center}
.muted{color:var(--muted)}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding:2px 6px; border-radius:8px; background:#fff; border:1px solid var(--border)}
.badge{display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:80px}
  .grid-3, .pricing{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .showcase{grid-template-columns: repeat(2,1fr)}
  .f-cols{grid-template-columns:1fr 1fr}
  .tier{height:460px}
}
@media (max-width: 560px){
  .showcase{grid-template-columns:1fr}
  .nav{display:none}
}

.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  display:flex; gap:12px; align-items:center; box-shadow:var(--shadow)
}
.cookiebar .grow{flex:1}
.cookiebar .actions{display:flex; gap:10px}
.hide{display:none}