/* =========================================
   Respawn Kopi – Cyberpunk Pink/Blue CSS
   ========================================= */
:root {
  --pink: #ec4899;
  --pink-dark: #be185d;
  --pink-glow: #f472b6;
  --blue: #3b82f6;
  --blue-neon: #60a5fa;
  --dark: #08040e;
  --card: #120820;
  --border: #2d1540;
  --text: #f0e6f6;
  --muted: #9d6ab5;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Exo 2',sans-serif; background:var(--dark); color:var(--text); overflow-x:hidden; }
h1,h2,h3,h4 { font-family:'Audiowide',sans-serif; }
.rk-container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.pink-glow { color:var(--pink); text-shadow:0 0 20px var(--pink); }

/* NAV */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1rem 0; transition:background 0.3s; }
.navbar.scrolled { background:rgba(8,4,14,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.rk-nav { max-width:1200px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.rk-logo { font-family:'Audiowide',sans-serif; font-size:1.2rem; text-decoration:none; letter-spacing:2px; }
.logo-r { color:var(--pink); text-shadow:0 0 10px var(--pink); }
.logo-s { color:#fff; }
.logo-k { color:var(--blue-neon); }
.rk-menu { display:flex; list-style:none; gap:2rem; }
.rk-menu a { color:var(--muted); text-decoration:none; font-family:'Exo 2',sans-serif; font-weight:600; font-size:0.9rem; letter-spacing:1px; transition:color 0.2s; }
.rk-menu a:hover, .rk-menu a.active { color:var(--pink); }
.rk-ham { display:none; background:none; border:none; color:var(--text); font-size:1.3rem; cursor:pointer; }

/* Buttons */
.btn-pink { display:inline-block; background:linear-gradient(135deg,var(--pink),var(--pink-dark)); color:#fff; padding:0.85rem 2rem; border-radius:8px; font-weight:700; text-decoration:none; font-family:'Exo 2',sans-serif; transition:transform 0.2s,box-shadow 0.2s; }
.btn-pink:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(236,72,153,0.5); }
.btn-border-pink { display:inline-block; border:2px solid var(--pink); color:var(--pink); padding:0.8rem 1.8rem; border-radius:8px; font-weight:600; text-decoration:none; transition:all 0.2s; }
.btn-border-pink:hover { background:var(--pink); color:#fff; }

/* HERO */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-veil { position:absolute; inset:0; background:linear-gradient(135deg,rgba(8,4,14,0.92) 0%,rgba(236,72,153,0.15) 100%); }
.hero-inner { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 1.5rem; padding-top:100px; }
.hero-tag { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:700; color:var(--pink); letter-spacing:3px; text-transform:uppercase; margin-bottom:1.5rem; }
.blink { animation:blk 1s infinite; }
@keyframes blk{0%,100%{opacity:1}50%{opacity:0.2}}
.hero-inner h1 { font-size:clamp(4rem,12vw,9rem); color:#fff; letter-spacing:4px; line-height:0.95; margin-bottom:1.5rem; }
.hero-sub { color:rgba(255,255,255,0.7); font-size:1.1rem; max-width:520px; margin-bottom:1.5rem; line-height:1.7; font-family:'Exo 2',sans-serif; }
.hero-sub strong { color:var(--pink); }
.hero-pills { display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-pills span { background:rgba(236,72,153,0.1); border:1px solid rgba(236,72,153,0.3); color:var(--pink-glow); padding:0.35rem 0.9rem; border-radius:20px; font-size:0.82rem; display:flex; align-items:center; gap:0.4rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* VIBE */
.vibe-section { padding:5rem 0; }
.vibe-label { font-family:'Audiowide',sans-serif; font-size:0.75rem; color:var(--pink); letter-spacing:3px; margin-bottom:0.8rem; }
.vibe-section h2 { font-size:2.2rem; margin-bottom:0.8rem; }
.vibe-sub { color:var(--muted); max-width:600px; margin-bottom:3rem; line-height:1.7; }
.vibe-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.vc { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:border-color 0.3s,transform 0.3s; }
.vc:hover { border-color:var(--pink); transform:translateY(-6px); }
.vc img { width:100%; height:200px; object-fit:cover; }
.vc-text { padding:1.5rem; }
.vc-text h3 { font-size:0.95rem; color:#fff; margin-bottom:0.5rem; }
.vc-text p { color:var(--muted); font-size:0.88rem; line-height:1.6; }
.center-vc { border-color:var(--pink); transform:scale(1.03); }
.center-vc:hover { transform:scale(1.03) translateY(-6px); }

/* PRICING */
.pricing-section { padding:5rem 0; background:var(--card); }
.pricing-section h2 { font-size:2.2rem; margin-bottom:3rem; }
.rk-plans { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.plan-box { background:var(--dark); border:1px solid var(--border); border-radius:20px; padding:2rem; position:relative; transition:border-color 0.3s,transform 0.3s; }
.plan-box:hover { border-color:var(--pink); transform:translateY(-4px); }
.plan-box.active-plan { border-color:var(--pink); background:linear-gradient(135deg,rgba(236,72,153,0.1),var(--dark)); box-shadow:0 0 30px rgba(236,72,153,0.2); }
.plan-hot { position:absolute; top:-12px; right:1rem; background:var(--pink); color:#fff; font-size:0.72rem; font-weight:800; padding:3px 12px; border-radius:20px; }
.plan-num { font-family:'Audiowide',sans-serif; font-size:2rem; color:var(--border); margin-bottom:0.5rem; }
.plan-box h3 { font-size:1rem; color:#fff; margin-bottom:0.8rem; }
.plan-rate { font-family:'Audiowide',sans-serif; font-size:2.5rem; color:var(--pink); margin-bottom:0.8rem; line-height:1; }
.plan-rate span { font-size:0.9rem; color:var(--muted); font-family:'Exo 2',sans-serif; }
.plan-box > p { color:var(--muted); font-size:0.85rem; line-height:1.5; margin-bottom:1rem; }
.plan-box ul { list-style:none; margin-bottom:1.5rem; }
.plan-box ul li { color:var(--muted); font-size:0.85rem; padding:0.3rem 0; display:flex; align-items:center; gap:0.5rem; border-bottom:1px solid var(--border); }
.plan-box ul li:last-child { border:none; }
.plan-box ul li i { color:var(--pink); font-size:0.7rem; }
.plan-btn { display:block; text-align:center; border:1px solid var(--pink); color:var(--pink); padding:0.65rem; border-radius:8px; text-decoration:none; font-weight:600; font-size:0.85rem; transition:all 0.2s; }
.plan-btn:hover,.plan-btn.solid { background:var(--pink); color:#fff; }

/* PHOTO STRIP */
.photo-strip { padding:3rem 0; overflow:hidden; }
.strip-scroll { display:flex; gap:1rem; padding:0 1.5rem; overflow-x:auto; scrollbar-width:none; }
.strip-scroll::-webkit-scrollbar { display:none; }
.strip-item { flex-shrink:0; border-radius:16px; overflow:hidden; width:340px; height:230px; }
.strip-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
.strip-item:hover img { transform:scale(1.06); }
.strip-cta { text-align:center; margin-top:2rem; }

/* FEATURES ROW */
.features-row { padding:4rem 0; }
.fr-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.fr-item { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:2rem; text-align:center; transition:border-color 0.3s; }
.fr-item:hover { border-color:var(--pink); }
.fr-icon { font-size:2rem; color:var(--pink); margin-bottom:1rem; }
.fr-item h4 { font-size:0.85rem; color:#fff; margin-bottom:0.6rem; }
.fr-item p { color:var(--muted); font-size:0.85rem; line-height:1.6; }

/* CTA BAND */
.cta-band { padding:5rem 0; text-align:center; background:linear-gradient(135deg,rgba(236,72,153,0.15),rgba(59,130,246,0.1)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-band h2 { font-size:2.5rem; margin-bottom:1rem; }
.cta-band p { color:var(--muted); margin-bottom:2rem; font-size:1.1rem; }

/* FOOTER */
.rk-footer { background:#040008; border-top:1px solid var(--border); }
.rk-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:3rem; padding:4rem 0; }
.rf-brand { display:flex; flex-direction:column; gap:0.8rem; }
.rf-brand p { color:var(--muted); font-size:0.88rem; line-height:1.7; max-width:280px; }
.rf-social { display:flex; gap:0.8rem; margin-top:0.5rem; }
.rf-social a { width:36px; height:36px; background:var(--card); border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; transition:all 0.2s; }
.rf-social a:hover { background:var(--pink); border-color:transparent; color:#fff; }
.rf-col h5 { font-family:'Audiowide',sans-serif; font-size:0.78rem; color:var(--pink); letter-spacing:2px; margin-bottom:1rem; }
.rf-col ul { list-style:none; }
.rf-col ul li { margin-bottom:0.6rem; }
.rf-col ul a { color:var(--muted); text-decoration:none; font-size:0.88rem; transition:color 0.2s; }
.rf-col ul a:hover { color:var(--pink); }
.rf-col p { color:var(--muted); font-size:0.85rem; margin-bottom:0.5rem; display:flex; gap:0.5rem; align-items:flex-start; line-height:1.5; }
.rf-col i { color:var(--pink); margin-top:2px; flex-shrink:0; }
.rk-footer-base { border-top:1px solid var(--border); padding:1.5rem; text-align:center; color:var(--muted); font-size:0.8rem; }

/* COOKIE */
.rk-cookie { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--card); border:1px solid var(--pink); border-radius:12px; padding:1rem 1.5rem; display:flex; gap:1.5rem; align-items:center; z-index:9999; max-width:360px; }
.rk-cookie p { color:var(--muted); font-size:0.85rem; }
.rk-cookie a { color:var(--pink); }
.rk-cookie button { background:var(--pink); color:#fff; border:none; padding:0.45rem 1rem; border-radius:8px; cursor:pointer; font-weight:700; }

/* PAGE HERO */
.page-hero { padding:120px 0 50px; background:linear-gradient(to bottom,rgba(236,72,153,0.08),transparent); border-bottom:1px solid var(--border); }
.page-hero h1 { font-size:3rem; margin-bottom:0.8rem; letter-spacing:3px; }
.page-hero p { color:var(--muted); max-width:600px; font-size:1.05rem; line-height:1.6; font-family:'Exo 2',sans-serif; }

/* RESPONSIVE */
@media (max-width:1024px) {
  .vibe-cards,.rk-plans { grid-template-columns:repeat(2,1fr); }
  .center-vc { transform:none; }
  .rk-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .fr-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .rk-ham { display:block; }
  .rk-menu { display:none; position:absolute; top:100%; left:0; right:0; background:rgba(8,4,14,0.98); flex-direction:column; padding:2rem; gap:1.5rem; border-bottom:1px solid var(--border); }
  .rk-menu.open { display:flex; }
  .vibe-cards,.rk-plans { grid-template-columns:1fr; }
  .rk-footer-grid { grid-template-columns:1fr; }
  .fr-grid { grid-template-columns:1fr; }
  .hero-inner h1 { font-size:3.5rem; }
  .strip-item { width:260px; height:180px; }
}
@media (max-width:480px) {
  .hero-inner h1 { font-size:2.8rem; }
  .hero-btns { flex-direction:column; }
  .cta-band h2 { font-size:1.8rem; }
}