/* ═══════════════════════════════════════════
   LINKDIL — BRAND STYLESHEET
   Edit variables below to change colors/fonts
═══════════════════════════════════════════ */

:root {
  --rose: #C4687A;
  --rose-light: #F5E0E5;
  --rose-dark: #A3485A;
  --amber: #E8A87C;
  --amber-light: #FEF4EC;
  --dark: #1C1218;
  --dark2: #2D1A22;
  --cream: #FDF6F0;
  --maroon: #3D2C2C;
  --gray: #888;
  --gray-light: #F5F5F5;
  --white: #FFFFFF;
  --border: rgba(196,104,122,0.15);
  --shadow: 0 20px 60px rgba(196,104,122,0.12);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.25s ease;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--cream); color: var(--dark); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
input, textarea, select, button { font-family: var(--font-body); }

/* ═══ UTILS ═══ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; }
.section-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 54px); font-weight: 700; color: var(--dark); line-height: 1.1; margin-bottom: 16px; }
.section-sub { font-size: 16px; color: var(--gray); line-height: 1.7; max-width: 600px; margin-bottom: 48px; }
.br-hide { display: none; }
@media (min-width: 768px) { .br-hide { display: inline; } }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition); white-space: nowrap; }
.btn-primary { background: var(--rose); color: var(--white); }
.btn-primary:hover { background: var(--rose-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196,104,122,0.35); }
.btn-ghost { background: transparent; color: var(--dark); border: 1.5px solid rgba(28,18,24,0.2); }
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }
.btn-full { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-lg { padding: 18px 36px; font-size: 16px; }

/* ═══ NAV ═══ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: rgba(253,246,240,0.85); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: all var(--transition); }
.nav.scrolled { padding: 12px 40px; background: rgba(253,246,240,0.97); }
.nav-logo { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--dark); }
.nav-logo span { color: var(--rose); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--maroon); transition: color var(--transition); }
.nav-links a:hover { color: var(--rose); }
.nav-cta { background: var(--rose); color: var(--white) !important; padding: 10px 22px; border-radius: 999px; }
.nav-cta:hover { background: var(--rose-dark); transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all 0.3s; }
.mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; z-index: 99; background: var(--cream); border-bottom: 1px solid var(--border); padding: 24px 40px; flex-direction: column; gap: 20px; }
.mobile-menu a { font-size: 16px; font-weight: 500; color: var(--maroon); }
.mobile-menu.open { display: flex; }

@media (max-width: 768px) {
  .nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { padding: 20px 24px; }
}

/* ═══ HERO ═══ */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 120px 80px 80px; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; }
.orb1 { width: 500px; height: 500px; background: radial-gradient(circle, #C4687A, transparent); top: -100px; right: -100px; animation: float1 8s ease-in-out infinite; }
.orb2 { width: 300px; height: 300px; background: radial-gradient(circle, #E8A87C, transparent); bottom: 100px; left: 10%; animation: float2 10s ease-in-out infinite; }
.orb3 { width: 200px; height: 200px; background: radial-gradient(circle, #C4687A, transparent); top: 30%; left: -80px; animation: float1 12s ease-in-out infinite reverse; }
.grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.3; }

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-30px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-15px,20px); } }

.hero-content { position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--rose-light); color: var(--rose); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; margin-bottom: 24px; animation: fadeUp 0.6s ease both; }
.hero-title { font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); font-weight: 700; line-height: 1.05; color: var(--dark); margin-bottom: 20px; animation: fadeUp 0.6s ease 0.1s both; }
.hero-title em { color: var(--rose); font-style: italic; }
.hero-sub { font-size: 17px; color: var(--gray); line-height: 1.7; margin-bottom: 36px; animation: fadeUp 0.6s ease 0.2s both; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; animation: fadeUp 0.6s ease 0.3s both; }
.hero-stats { display: flex; align-items: center; gap: 24px; animation: fadeUp 0.6s ease 0.4s both; }
.stat { display: flex; flex-direction: column; }
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--dark); }
.stat-label { font-size: 12px; color: var(--gray); }
.stat-div { width: 1px; height: 36px; background: var(--border); }

/* Phone Mockup */
.hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; animation: fadeUp 0.6s ease 0.2s both; }
.phone-mockup { width: 300px; height: 580px; background: var(--dark); border-radius: 40px; padding: 16px; box-shadow: 0 40px 100px rgba(28,18,24,0.3), 0 0 0 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.phone-mockup::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 60px; height: 6px; background: var(--dark2); border-radius: 3px; z-index: 5; }
.phone-screen { background: linear-gradient(160deg, #2D1A22 0%, #1C1218 60%, #2A1A10 100%); border-radius: 28px; height: 100%; padding: 40px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.pm-header { font-family: var(--font-display); font-size: 22px; color: var(--white); text-align: center; font-weight: 600; }
.pm-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 120px; }
.pm-photo { border-radius: 12px; }
.p1 { background: linear-gradient(135deg, var(--rose) 0%, var(--amber) 100%); }
.p2 { background: linear-gradient(135deg, #8B4A6B 0%, var(--rose) 100%); }
.pm-msg { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.6; text-align: center; font-style: italic; background: rgba(255,255,255,0.06); padding: 12px; border-radius: 12px; }
.pm-song { font-size: 11px; color: var(--amber); text-align: center; }
.pm-countdown { font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 100px 24px 60px; text-align: center; }
  .hero-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { order: -1; }
  .phone-mockup { width: 240px; height: 460px; }
}

/* ═══ HOW IT WORKS ═══ */
.how { padding: 100px 0; background: var(--white); }
.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; gap: 16px; margin-top: 48px; }
.step { text-align: center; }
.step-num { font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--rose-light); line-height: 1; margin-bottom: 8px; }
.step-icon { font-size: 32px; margin-bottom: 12px; }
.step h3 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--gray); line-height: 1.6; }
.step-arrow { font-size: 24px; color: var(--rose); opacity: 0.4; margin-top: 48px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
}

/* ═══ PRODUCTS ═══ */
.products { padding: 100px 0; background: var(--cream); }
.product-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.ptab { padding: 8px 20px; border-radius: 999px; border: 1.5px solid var(--border); background: transparent; font-size: 13px; font-weight: 500; color: var(--gray); cursor: pointer; transition: all var(--transition); }
.ptab:hover { border-color: var(--rose); color: var(--rose); }
.ptab.active { background: var(--rose); color: var(--white); border-color: var(--rose); }
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card { background: var(--white); border-radius: var(--radius); padding: 28px 24px; border: 1px solid var(--border); transition: all var(--transition); position: relative; overflow: hidden; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--rose); }
.product-card.hidden { display: none; }
.pc-emoji { font-size: 36px; margin-bottom: 16px; }
.product-card h3 { font-size: 17px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.product-card p { font-size: 13px; color: var(--gray); line-height: 1.6; margin-bottom: 16px; }
.pc-tag { display: inline-block; font-size: 11px; font-weight: 600; background: var(--rose-light); color: var(--rose); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.pc-btn { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--rose); gap: 4px; transition: gap var(--transition); }
.pc-btn:hover { gap: 8px; }

/* ═══ TRACKERS ═══ */
.trackers-section { padding: 100px 0; background: var(--dark); }
.trackers-section .section-label { color: var(--amber); }
.trackers-section .section-title { color: var(--white); }
.trackers-section .section-sub { color: rgba(255,255,255,0.5); }
.tracker-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 60px; }
.tracker-cat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 28px; }
.tc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tc-icon { font-size: 24px; }
.tc-header h3 { font-size: 17px; font-weight: 600; color: var(--white); flex: 1; }
.tc-count { font-size: 11px; color: var(--amber); font-weight: 500; background: rgba(232,168,124,0.15); padding: 3px 10px; border-radius: 999px; }
.tc-list { display: flex; flex-direction: column; gap: 12px; }
.tc-list li { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(255,255,255,0.65); }
.tc-price { font-size: 13px; font-weight: 600; color: var(--amber); background: rgba(232,168,124,0.12); padding: 3px 10px; border-radius: 999px; transition: background var(--transition); }
.tc-price:hover { background: rgba(232,168,124,0.25); }

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

/* Bundles */
.bundles { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 48px; }
.bundles-title { font-family: var(--font-display); font-size: 30px; color: var(--white); margin-bottom: 28px; }
.bundles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.bundle-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 24px; position: relative; transition: all var(--transition); }
.bundle-card:hover { border-color: rgba(232,168,124,0.4); transform: translateY(-4px); }
.featured-bundle { border-color: var(--amber) !important; background: rgba(232,168,124,0.08) !important; }
.bundle-best { position: absolute; top: -12px; left: 24px; background: var(--amber); color: var(--dark); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.bundle-emoji { font-size: 32px; margin-bottom: 12px; }
.bundle-card h4 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 6px; }
.bundle-card p { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.bundle-price { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--amber); margin-bottom: 16px; }
.bundle-price span { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.4); font-family: var(--font-body); }

/* ═══ PRICING ═══ */
.pricing { padding: 100px 0; background: var(--cream); }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 60px; }
.pricing-card { background: var(--white); border-radius: var(--radius); padding: 36px 28px; border: 1.5px solid var(--border); position: relative; transition: all var(--transition); }
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.featured-pkg { border-color: var(--rose); background: var(--dark); }
.pkg-popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--rose); color: var(--white); font-size: 11px; font-weight: 700; padding: 5px 16px; border-radius: 999px; white-space: nowrap; }
.pkg-name { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.featured-pkg .pkg-name { color: var(--white); }
.pkg-tier { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); margin-bottom: 20px; }
.featured-pkg .pkg-tier { color: rgba(255,255,255,0.5); }
.pkg-price { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--rose); margin-bottom: 8px; }
.pkg-price span { font-size: 18px; color: var(--gray); font-family: var(--font-body); }
.pkg-delivery { font-size: 13px; color: var(--gray); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.featured-pkg .pkg-delivery { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.pkg-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.pkg-features li { font-size: 14px; color: var(--maroon); }
.featured-pkg .pkg-features li { color: rgba(255,255,255,0.8); }

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

/* Addons */
.addons { background: var(--white); border-radius: var(--radius); padding: 32px; border: 1px solid var(--border); }
.addons h3 { font-size: 18px; font-weight: 600; color: var(--dark); margin-bottom: 20px; }
.addons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.addon { display: flex; justify-content: space-between; align-items: center; background: var(--gray-light); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; color: var(--maroon); }
.addon span { font-weight: 600; color: var(--rose); }

/* ═══ TESTIMONIALS ═══ */
.testimonials { padding: 100px 0; background: var(--white); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card { background: var(--cream); border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); transition: all var(--transition); }
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.featured-testi { background: var(--dark); border-color: var(--rose); }
.testi-emoji { font-size: 32px; margin-bottom: 16px; }
.testi-card p { font-size: 15px; color: var(--maroon); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.featured-testi p { color: rgba(255,255,255,0.85); }
.testi-name { font-size: 13px; font-weight: 600; color: var(--rose); }

@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 900px) { .testi-grid { grid-template-columns: 1fr 1fr; } }

/* ═══ CONTACT ═══ */
.contact { padding: 100px 0; background: var(--cream); }
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.order-form { background: var(--white); border-radius: var(--radius); padding: 40px; border: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--maroon); }
.form-group input, .form-group select, .form-group textarea { padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--dark); background: var(--cream); transition: border-color var(--transition); outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--rose); background: var(--white); }
.form-group textarea { resize: vertical; }
.form-note { text-align: center; font-size: 12px; color: var(--gray); margin-top: 12px; }
.contact-side { display: flex; flex-direction: column; gap: 24px; }
.contact-info { background: var(--white); border-radius: var(--radius); padding: 28px; border: 1px solid var(--border); }
.contact-info h3 { font-size: 16px; font-weight: 600; color: var(--dark); margin-bottom: 20px; }
.contact-link { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); transition: color var(--transition); }
.contact-link:last-child { border-bottom: none; }
.contact-link:hover { color: var(--rose); }
.cl-icon { font-size: 24px; }
.contact-link strong { display: block; font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 2px; }
.contact-link div { font-size: 13px; color: var(--gray); }
.contact-promise { background: var(--dark); border-radius: var(--radius); padding: 28px; }
.contact-promise h4 { font-size: 15px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
.contact-promise ul { display: flex; flex-direction: column; gap: 10px; }
.contact-promise li { font-size: 13px; color: rgba(255,255,255,0.7); }

@media (max-width: 768px) {
  .contact-wrap { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ═══ FOOTER ═══ */
.footer { background: var(--dark); padding: 80px 0 32px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--white); margin-bottom: 12px; }
.footer-logo span { color: var(--rose); }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { font-size: 13px; color: rgba(255,255,255,0.5); transition: color var(--transition); }
.footer-social a:hover { color: var(--rose); }
.footer-links-col h4 { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 16px; letter-spacing: 0.06em; }
.footer-links-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 10px; transition: color var(--transition); }
.footer-links-col a:hover { color: var(--rose); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.25); }

@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ═══ MODAL ═══ */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal.open { opacity: 1; pointer-events: all; }
.modal-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(28,18,24,0.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box { background: var(--white); border-radius: var(--radius); padding: 48px 40px; text-align: center; max-width: 400px; width: 100%; position: relative; z-index: 1001; transform: translateY(20px); transition: transform 0.25s; }
.modal.open .modal-box { transform: translateY(0); }
.modal-emoji { font-size: 56px; margin-bottom: 16px; }
.modal-box h3 { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.modal-box p { font-size: 15px; color: var(--gray); line-height: 1.6; margin-bottom: 28px; }

/* ═══ BIGGER NAV LOGO ═══ */
.nav-logo { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--dark); letter-spacing: -0.5px; }
.nav-logo span { color: var(--rose); }

/* ═══ HERO SHOWCASE ANIMATION ═══ */
.showcase-wrap { position: relative; width: 360px; height: 580px; margin: 0 auto; }
.showcase-cards { position: absolute; inset: 0; pointer-events: none; }
.sc-card { position: absolute; background: var(--white); border-radius: 14px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--maroon); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(196,104,122,0.1); white-space: nowrap; }
.sc-card1 { top: 10px; left: -60px; animation: floatCard 6s ease-in-out infinite; }
.sc-card2 { top: 80px; right: -50px; animation: floatCard 7s ease-in-out infinite 1s; }
.sc-card3 { bottom: 140px; left: -70px; animation: floatCard 5s ease-in-out infinite 0.5s; }
.sc-card4 { bottom: 80px; right: -60px; animation: floatCard 8s ease-in-out infinite 1.5s; }
.sc-card5 { top: 160px; left: -80px; animation: floatCard 6.5s ease-in-out infinite 2s; }
.sc-card6 { top: 220px; right: -65px; animation: floatCard 7.5s ease-in-out infinite 0.8s; }
@keyframes floatCard { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }

.float-badge { position: absolute; background: var(--white); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.1); border: 1px solid var(--border); z-index: 10; white-space: nowrap; }
.fb1 { top: -20px; left: 10px; animation: floatBadge 4s ease-in-out infinite; color: var(--maroon); }
.fb2 { bottom: 80px; left: -20px; animation: floatBadge 5s ease-in-out infinite 1s; color: var(--rose); }
.fb3 { bottom: 20px; right: -10px; animation: floatBadge 6s ease-in-out infinite 0.5s; color: var(--maroon); }
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.phone-mockup { position: relative; z-index: 5; width: 280px; height: 540px; background: var(--dark); border-radius: 40px; padding: 14px; box-shadow: 0 40px 100px rgba(28,18,24,0.35), 0 0 0 1px rgba(255,255,255,0.08); margin: 20px auto 0; }
.phone-mockup::before { content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:55px; height:5px; background:rgba(255,255,255,0.15); border-radius:3px; z-index:10; }
.phone-screen { background: linear-gradient(160deg, #2D1A22 0%, #1C1218 60%, #2A1A10 100%); border-radius:28px; height:100%; overflow:hidden; position:relative; }

/* Phone slides */
.phone-slide { position:absolute; inset:0; padding:32px 18px 18px; display:flex; flex-direction:column; gap:10px; opacity:0; transition:opacity 0.8s ease; pointer-events:none; }
.phone-slide.active { opacity:1; }

/* Birthday slide */
.ps-birthday { background: linear-gradient(160deg,#2D1A22,#1C1218); }
.ps-bday-emoji { font-size:32px; text-align:center; animation: bounce 1s ease infinite; }
@keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.ps-bday-title { font-family:var(--font-display); font-size:22px; color:#fff; text-align:center; font-weight:700; line-height:1.2; }
.ps-bday-title em { color:var(--rose); font-style:italic; }
.ps-photos { display:grid; grid-template-columns:1fr 1fr; gap:6px; height:100px; }
.ps-photo { border-radius:10px; }
.ps-msg { font-size:11px; color:rgba(255,255,255,0.8); text-align:center; font-style:italic; background:rgba(255,255,255,0.06); padding:10px; border-radius:10px; line-height:1.5; }
.ps-song { font-size:11px; color:var(--amber); text-align:center; }
.ps-cd { font-size:11px; color:rgba(255,255,255,0.4); text-align:center; }

/* Proposal slide */
.ps-proposal { background: linear-gradient(160deg,#1A1A2E,#16213E); }
.ps-ring { font-size:48px; text-align:center; animation: ringPulse 2s ease-in-out infinite; }
@keyframes ringPulse { 0%,100%{transform:scale(1) rotate(-5deg)} 50%{transform:scale(1.1) rotate(5deg)} }
.ps-prop-q { font-family:var(--font-display); font-size:18px; color:#fff; text-align:center; line-height:1.3; }
.ps-prop-sub { font-size:12px; color:rgba(255,255,255,0.5); text-align:center; font-style:italic; }
.ps-prop-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.ps-prop-yes { background:var(--rose); color:#fff; border:none; border-radius:999px; padding:10px; font-size:13px; font-weight:700; cursor:pointer; }
.ps-prop-no { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); border:none; border-radius:999px; padding:10px; font-size:13px; cursor:pointer; transition:transform 0.2s; }

/* Tracker slide */
.ps-tracker { background: linear-gradient(160deg,#0F2027,#1C1218); }
.ps-tr-title { font-size:14px; color:var(--amber); font-weight:600; }
.ps-tr-prog { margin:4px 0; }
.ps-tr-label { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:4px; }
.ps-tr-bar { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.ps-tr-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--rose),var(--amber)); }
.ps-tr-dots { display:flex; gap:5px; justify-content:center; margin:6px 0; }
.ps-tr-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.ps-tr-dot.done { background:var(--rose); color:#fff; }
.ps-tr-dot.rest { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.3); }
.ps-tr-dot.today { background:var(--amber); color:var(--dark); }
.ps-streak { font-size:12px; color:var(--amber); text-align:center; font-weight:600; }

/* Anniversary slide */
.ps-anniversary { background: linear-gradient(160deg,#1A0A0F,#2D1A22); }
.ps-hearts { font-size:18px; text-align:center; letter-spacing:4px; animation: heartbeat 1.5s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.ps-ann-title { font-family:var(--font-display); font-size:18px; color:#fff; text-align:center; }
.ps-ann-title em { color:var(--rose); font-style:italic; }
.ps-tl { display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,0.04); border-radius:10px; padding:10px; }
.ps-tl-item { display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,0.6); }
.ps-tl-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0; }
.ps-tl-dot.active { background:var(--rose); box-shadow:0 0 8px var(--rose); }
.ps-ann-msg { font-size:11px; color:rgba(255,255,255,0.7); text-align:center; font-style:italic; line-height:1.5; }

/* ═══ EXAMPLES SECTION ═══ */
.examples-section { padding:100px 0; background:var(--white); }
.examples-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.etab { padding:10px 22px; border-radius:999px; border:1.5px solid var(--border); background:transparent; font-size:14px; font-weight:500; color:var(--gray); cursor:pointer; transition:all var(--transition); }
.etab:hover { border-color:var(--rose); color:var(--rose); }
.etab.active { background:var(--rose); color:var(--white); border-color:var(--rose); }
.examples-wrap { position:relative; }
.example-preview { display:none; grid-template-columns:1fr 1.2fr; gap:60px; align-items:center; }
.example-preview.active { display:grid; }
@media (max-width:900px) { .example-preview.active { grid-template-columns:1fr; } }

/* EP Phone */
.ep-phone { display:flex; justify-content:center; }
.ep-screen { width:260px; height:500px; border-radius:36px; padding:24px 16px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 30px 80px rgba(0,0,0,0.2); overflow:hidden; }
.ep-birthday { background:linear-gradient(160deg,#2D1A22,#1C1218); }
.ep-anniversary { background:linear-gradient(160deg,#1A0A0F,#2D1A22); }
.ep-proposal { background:linear-gradient(160deg,#1A1A2E,#16213E); }
.ep-farewell { background:linear-gradient(160deg,#0F2027,#1C1218); }
.ep-tracker { background:linear-gradient(160deg,#0D1B2A,#1C1218); }

.ep-confetti { font-size:18px; text-align:center; letter-spacing:3px; }
.ep-hearts { font-size:18px; text-align:center; letter-spacing:4px; animation:heartbeat 1.5s ease-in-out infinite; }
.ep-ring-anim { font-size:44px; text-align:center; animation:ringPulse 2s ease-in-out infinite; }
.ep-title { font-family:var(--font-display); font-size:20px; font-weight:700; color:#fff; text-align:center; line-height:1.2; }
.ep-title span { color:var(--rose); display:block; }
.ep-photos { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; height:70px; }
.ep-photo { border-radius:8px; }
.ep-msg { font-size:11px; color:rgba(255,255,255,0.8); text-align:center; font-style:italic; background:rgba(255,255,255,0.06); padding:10px; border-radius:10px; line-height:1.5; border:1px solid rgba(255,255,255,0.06); }
.ep-song { font-size:11px; color:var(--amber); text-align:center; }
.ep-countdown-bar { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.04); padding:8px 12px; border-radius:8px; }
.ep-cd { color:var(--rose); font-weight:600; }
.ep-timeline { display:flex; flex-direction:column; gap:6px; background:rgba(255,255,255,0.04); border-radius:10px; padding:10px; }
.ep-tl-item { display:flex; align-items:center; gap:8px; font-size:11px; color:rgba(255,255,255,0.6); }
.ep-tl-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.2); flex-shrink:0; }
.ep-tl-dot.active { background:var(--rose); box-shadow:0 0 8px var(--rose); }
.ep-story-slides { background:rgba(255,255,255,0.05); border-radius:10px; padding:12px; min-height:60px; }
.ep-slide-num { font-size:10px; color:var(--amber); font-weight:600; margin-bottom:4px; }
.ep-slide-text { font-size:12px; color:rgba(255,255,255,0.8); font-style:italic; line-height:1.5; }
.ep-proposal-q { text-align:center; }
.ep-q-text { font-family:var(--font-display); font-size:18px; color:#fff; margin-bottom:12px; }
.ep-q-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ep-q-yes { background:var(--rose); color:#fff; border:none; border-radius:999px; padding:10px; font-size:13px; font-weight:700; cursor:pointer; transition:transform 0.2s; }
.ep-q-yes:hover { transform:scale(1.05); }
.ep-q-no { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); border:none; border-radius:999px; padding:10px; font-size:13px; cursor:pointer; transition:transform 0.3s; }
.ep-memory-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ep-mem { border-radius:10px; padding:10px 8px; font-size:11px; color:rgba(255,255,255,0.8); text-align:center; }
.ep-names { font-size:11px; color:var(--amber); text-align:center; }
.ep-progress { margin:4px 0; }
.ep-prog-label { display:flex; justify-content:space-between; font-size:11px; color:rgba(255,255,255,0.6); margin-bottom:4px; }
.ep-prog-bar { height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.ep-prog-fill { height:100%; border-radius:3px; }
.ep-week-dots { display:flex; gap:4px; justify-content:center; }
.ep-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.3); }
.ep-dot.done { background:var(--rose); color:#fff; }
.ep-dot.rest { background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.15); }
.ep-streak { font-size:12px; color:var(--amber); text-align:center; font-weight:600; }
.ep-exercises { display:flex; flex-direction:column; gap:4px; }
.ep-ex { font-size:11px; color:rgba(255,255,255,0.5); padding:5px 8px; background:rgba(255,255,255,0.03); border-radius:6px; }
.ep-ex.done { color:rgba(255,255,255,0.8); }
.ep-budget-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; }
.ep-bsum { background:rgba(255,255,255,0.05); border-radius:8px; padding:8px 4px; text-align:center; }
.ep-bsum-label { font-size:9px; color:rgba(255,255,255,0.4); margin-bottom:3px; }
.ep-bsum-val { font-size:13px; font-weight:700; }
.ep-cats { display:flex; flex-direction:column; gap:6px; }
.ep-cat { display:flex; align-items:center; gap:6px; font-size:10px; color:rgba(255,255,255,0.5); }
.ep-cat-bar { flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }

/* EP Info */
.ep-info { display:flex; flex-direction:column; gap:16px; }
.ep-badge { display:inline-block; font-size:12px; font-weight:600; background:var(--rose-light); color:var(--rose); padding:5px 14px; border-radius:999px; width:fit-content; }
.ep-info h3 { font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--dark); line-height:1.2; }
.ep-info p { font-size:15px; color:var(--gray); line-height:1.7; }
.ep-features { display:flex; flex-direction:column; gap:8px; }
.ep-features li { font-size:14px; color:var(--maroon); }
.ep-price { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--rose); }
.ep-price span { font-size:14px; color:var(--gray); font-family:var(--font-body); font-weight:400; }

/* ═══ PAYMENT SECTION ═══ */
.payment-section { padding:100px 0; background:var(--dark); }
.payment-section .section-label { color:var(--amber); }
.payment-section .section-title { color:var(--white); }
.payment-section .section-sub { color:rgba(255,255,255,0.5); }
.payment-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.pay-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:28px 20px; text-align:center; transition:all var(--transition); }
.pay-card:hover { border-color:rgba(196,104,122,0.4); transform:translateY(-4px); }
.pay-featured { border-color:var(--rose) !important; background:rgba(196,104,122,0.08) !important; }
.pay-icon { font-size:36px; margin-bottom:12px; }
.pay-card h3 { font-size:18px; font-weight:600; color:var(--white); margin-bottom:6px; }
.pay-card p { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.pay-apps { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pay-app { font-size:11px; font-weight:600; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7); padding:4px 10px; border-radius:999px; }
.pay-trust { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.pt-item { font-size:14px; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05); padding:10px 20px; border-radius:999px; }
@media (max-width:900px) { .payment-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:500px) { .payment-grid { grid-template-columns:1fr; } }

/* ═══ REAL EXAMPLES GRID ═══ */
.real-examples-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 60px; }
@media (max-width: 800px) { .real-examples-grid { grid-template-columns: 1fr; } }

.re-card { display: grid; grid-template-columns: 220px 1fr; gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--white); text-decoration: none; color: inherit; transition: all 0.25s ease; cursor: pointer; }
.re-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(196,104,122,0.15); border-color: var(--rose); }
@media (max-width: 1100px) { .re-card { grid-template-columns: 1fr; } }

.re-preview { background: var(--dark); padding: 16px; display: flex; align-items: center; justify-content: center; min-height: 260px; }
.re-screen { width: 160px; height: 300px; border-radius: 24px; position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.re-glow { position: absolute; inset: 0; opacity: 0.8; }
.re-inner { position: relative; z-index: 2; padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.re-emoji-big { font-size: 36px; animation: bounce 2s ease-in-out infinite; }
.re-moon-icon { font-size: 40px; animation: moonGlow2 3s ease-in-out infinite; }
@keyframes moonGlow2 { 0%,100%{filter:drop-shadow(0 0 8px rgba(245,200,66,0.5))} 50%{filter:drop-shadow(0 0 20px rgba(245,200,66,0.9))} }
.re-title-sm { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--white); text-align: center; line-height: 1.2; }
.re-sub-sm { font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; }
.re-stars { font-size: 11px; color: rgba(245,200,66,0.5); letter-spacing: 3px; text-align: center; animation: starTwinkle 2s ease-in-out infinite; }
@keyframes starTwinkle { 0%,100%{opacity:0.5} 50%{opacity:1} }
.re-scenes { display: flex; gap: 4px; justify-content: center; }
.re-scene-dot { width: 6px; height: 6px; border-radius: 50%; }
.re-tag-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.re-chip { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
.re-stat-row { display: flex; gap: 6px; justify-content: center; }
.re-mini-stat { background: rgba(255,255,255,0.04); border: 1px solid; border-radius: 8px; padding: 5px 8px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.re-mini-stat span { font-size: 14px; font-weight: 700; }
.re-mini-stat small { font-size: 9px; color: rgba(255,255,255,0.4); }
.re-habit-dots { display: flex; gap: 4px; justify-content: center; }
.re-hd { width: 26px; height: 26px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.25); }
.re-hd.done { background: #7C6AF7; color: #fff; }
.re-hd.today { background: #22D3EE; color: var(--dark); }
.re-hd.rest { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.1); }

/* RE info panel */
.re-info { padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.re-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; width: fit-content; }
.re-info h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--dark); line-height: 1.2; }
.re-info p { font-size: 13px; color: var(--gray); line-height: 1.7; }
.re-open { font-size: 13px; font-weight: 700; color: var(--rose); margin-top: 4px; transition: gap 0.2s; }
.re-card:hover .re-open { letter-spacing: 0.03em; }

/* Examples CTA */
.examples-cta { text-align: center; padding: 40px; background: var(--cream); border-radius: var(--radius); border: 1px solid var(--border); }
.examples-cta p { font-size: 18px; color: var(--maroon); margin-bottom: 20px; font-family: var(--font-display); }

/* Also hide old examples tab logic */
.examples-tabs { display: none; }
.example-preview { display: none !important; }

/* ═══════════════════════════════════
   ANIMATED PHONE PREVIEWS
═══════════════════════════════════ */

/* Grid */
.real-examples-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:60px; }
@media(max-width:900px){ .real-examples-grid{grid-template-columns:1fr;} }

/* Card */
.re-card { display:grid; grid-template-columns:200px 1fr; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--white); transition:all 0.3s ease; }
.re-card:hover { transform:translateY(-6px); box-shadow:0 28px 64px rgba(196,104,122,0.13); border-color:var(--rose); }
@media(max-width:1100px){ .re-card{grid-template-columns:1fr;} }

/* Phone frame */
.re-preview { background:#111; display:flex; align-items:center; justify-content:center; padding:20px 16px; min-height:420px; }
.phone-frame { width:160px; height:320px; background:#1a1a2e; border-radius:28px; padding:12px 8px 10px; box-shadow:0 0 0 2px #333, 0 20px 60px rgba(0,0,0,0.7); position:relative; }
.pf-notch { width:50px; height:5px; background:#222; border-radius:3px; margin:0 auto 8px; }
.pf-screen { border-radius:18px; height:285px; overflow:hidden; position:relative; }

/* RE info */
.re-info { padding:22px 18px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.re-label { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; width:fit-content; }
.re-info h3 { font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--dark); line-height:1.2; }
.re-info p { font-size:12px; color:var(--gray); line-height:1.7; }
.re-tags { display:flex; flex-wrap:wrap; gap:5px; }
.re-tags span { font-size:10px; font-weight:600; background:var(--gray-light); color:var(--maroon); padding:3px 9px; border-radius:999px; }
.re-order-btn { font-size:13px; font-weight:700; color:var(--rose); margin-top:4px; display:inline-block; }
.re-order-btn:hover { letter-spacing:0.02em; }

/* ══ HARSHU SCREEN ══ */
.harshu-screen { background:#000; }
.hs { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px 10px; opacity:0; transition:opacity 0.8s ease; pointer-events:none; gap:8px; }
.hs.active { opacity:1; }
.hs1 { background:#000; }
.hs2 { background:linear-gradient(160deg,#0a001a,#1a0030); }
.hs3 { background:linear-gradient(160deg,#001a0f,#003320); }
.hs4 { background:linear-gradient(160deg,#001a1a,#002233); }
.hs5 { background:linear-gradient(180deg,#0d0020 0%,#1a0533 35%,#6b2fa0 65%,#e8804a 82%,#ffd580 100%); }
.scanlines { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(34,211,238,0.04) 0px,rgba(34,211,238,0.04) 1px,transparent 1px,transparent 3px); pointer-events:none; z-index:1; }
.typewriter-text { font-family:'Courier New',monospace; font-size:11px; color:#22d3ee; text-align:center; line-height:1.9; max-width:130px; text-shadow:0 0 8px rgba(34,211,238,0.7); white-space:pre-wrap; position:relative; z-index:2; }
.tw-cursor { width:2px; height:14px; background:#22d3ee; animation:curBlink 0.7s step-end infinite; display:inline-block; vertical-align:middle; position:relative; z-index:2; }
@keyframes curBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.hs-title { font-size:12px; font-weight:700; text-align:center; }

/* Scratch card anim */
.scratch-card-anim { width:120px; height:65px; border-radius:12px; position:relative; overflow:hidden; }
.sc-overlay { position:absolute; inset:0; background:linear-gradient(135deg,#7c3aed,#ec4899,#f97316); animation:scratchReveal 3s ease-in-out infinite; }
@keyframes scratchReveal { 0%,30%{clip-path:inset(0 0 0 0)} 60%,70%{clip-path:inset(0 0 0 100%)} 100%{clip-path:inset(0 0 0 0)} }
.sc-reveal { position:absolute; inset:0; background:linear-gradient(135deg,#7c3aed,#ec4899); display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:18px; color:#fff; font-weight:700; font-size:11px; text-align:center; gap:3px; }

/* Spin wheel */
.spin-wheel-anim { width:90px; height:90px; border-radius:50%; position:relative; animation:spinAnim 4s ease-in-out infinite; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.sw-inner { width:100%; height:100%; border-radius:50%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.sw-seg { display:flex; align-items:center; justify-content:center; font-size:18px; }
.s1 { background:#7c3aed; border-radius:50% 0 0 0; }
.s2 { background:#ec4899; border-radius:0 50% 0 0; }
.s3 { background:#16a34a; border-radius:0 0 0 50%; }
.s4 { background:#f59e0b; border-radius:0 0 50% 0; }
@keyframes spinAnim { 0%{transform:rotate(0)} 40%{transform:rotate(720deg)} 60%,100%{transform:rotate(720deg)} }
.sw-pointer { color:#fff; font-size:12px; text-align:center; margin-top:-4px; }
.sw-result { font-size:10px; color:rgba(255,255,255,0.7); text-align:center; font-style:italic; }

/* Mirror anim */
.mirror-anim { width:100px; border:2px solid rgba(34,211,238,0.3); border-radius:50% 50% 46% 46%/60% 60% 40% 40%; padding:16px 10px; text-align:center; background:rgba(34,211,238,0.04); box-shadow:0 0 20px rgba(34,211,238,0.1); }
.mirror-face { font-size:28px; animation:mFace 3s ease-in-out infinite; display:block; margin-bottom:6px; }
@keyframes mFace { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08) translateY(-2px)} }
.mirror-msg { font-size:9px; color:rgba(34,211,238,0.8); font-style:italic; line-height:1.5; }

/* Sunrise */
.sunrise-bg { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.sunrise-sun { position:absolute; width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#fffde7,#ffeb3b 40%,#ff9800); box-shadow:0 0 0 8px rgba(255,235,59,0.2),0 0 40px rgba(255,152,0,0.3); animation:sunRise 4s ease-in-out infinite, sunPulse 2s ease-in-out infinite; bottom:38%; left:50%; transform:translateX(-50%); }
@keyframes sunRise { 0%,100%{bottom:30%} 50%{bottom:40%} }
@keyframes sunPulse { 0%,100%{box-shadow:0 0 0 8px rgba(255,235,59,0.2),0 0 40px rgba(255,152,0,0.2)} 50%{box-shadow:0 0 0 14px rgba(255,235,59,0.25),0 0 60px rgba(255,152,0,0.35)} }
.sunrise-hills { position:absolute; bottom:0; left:0; right:0; height:35%; background:linear-gradient(to top,#2d1050,#1a0533); border-radius:60% 60% 0 0 / 30% 30% 0 0; }
.sunrise-birds { position:absolute; top:20%; left:0; right:0; }
.sb { position:absolute; font-size:10px; animation:birdFly 4s linear infinite; }
.sb:nth-child(1) { top:0; animation-delay:0s; }
.sb:nth-child(2) { top:10px; animation-delay:1.2s; }
.sb:nth-child(3) { top:-8px; animation-delay:2.4s; }
@keyframes birdFly { from{left:-10%} to{left:110%} }
.sunrise-card { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); background:rgba(255,247,237,0.1); border:1px solid rgba(245,200,66,0.2); border-radius:12px; padding:8px 14px; text-align:center; backdrop-filter:blur(10px); z-index:5; white-space:nowrap; }
.sc-sun-icon { font-size:18px; animation:sunSpin2 8s linear infinite; display:block; }
@keyframes sunSpin2 { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.sc-text { font-size:10px; color:#fff7ed; font-weight:700; line-height:1.5; }

/* Dots */
.hs-dots { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:20; }
.hd { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.2); transition:all 0.3s; }
.hd.active { background:#fbbf24; transform:scale(1.4); }

/* ══ VAISHU SCREEN ══ */
.vaishu-screen { background:radial-gradient(ellipse at 50% 80%,#1a0a2e,#08050f 60%,#000); overflow:hidden; }
.star-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.lantern { position:absolute; font-size:20px; z-index:3; animation:lanternSway 3s ease-in-out infinite; }
.l1 { top:8%; left:10%; animation-delay:0s; }
.l2 { top:5%; right:10%; animation-delay:1s; }
@keyframes lanternSway { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(8deg) translateY(-6px)} }
.vaishu-moon { position:absolute; top:3%; left:50%; transform:translateX(-50%); font-size:32px; z-index:3; animation:moonFloat 4s ease-in-out infinite; filter:drop-shadow(0 0 12px rgba(245,200,66,0.8)); }
@keyframes moonFloat { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-5px)} }
.ff { position:absolute; font-size:10px; z-index:4; animation:ffFloat 3s ease-in-out infinite; }
.ff1 { top:30%; left:15%; animation-delay:0s; }
.ff2 { top:50%; right:12%; animation-delay:1s; }
.ff3 { top:40%; left:55%; animation-delay:2s; }
@keyframes ffFloat { 0%,100%{opacity:0.3;transform:translateY(0) scale(1)} 50%{opacity:1;transform:translateY(-8px) scale(1.3)} }
.vaishu-card { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); background:rgba(255,247,237,0.07); border:1px solid rgba(245,200,66,0.2); border-radius:14px; padding:12px 14px; text-align:center; backdrop-filter:blur(12px); z-index:5; width:130px; animation:cardFloat 4s ease-in-out infinite; }
@keyframes cardFloat { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
.vc-icons { font-size:12px; margin-bottom:4px; }
.vc-name { font-size:20px; font-weight:900; background:linear-gradient(135deg,#f5c842,#e8b020); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:nameGlow2 3s ease-in-out infinite; }
@keyframes nameGlow2 { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.3)} }
.vc-msg { font-size:8px; color:rgba(255,247,237,0.75); line-height:1.6; margin:5px 0; font-style:italic; }
.vc-sub { font-size:9px; color:rgba(245,200,66,0.6); }

/* ══ PRATIK SCREEN ══ */
.pratik-screen { background:#080B14; overflow-y:auto; }
.pt-header { background:linear-gradient(135deg,#0F1629,#1a1040,#0F1629); padding:12px 10px 10px; border-bottom:1px solid rgba(99,102,241,0.15); }
.pt-badge { font-size:8px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; background:rgba(99,102,241,0.15); color:#6366F1; padding:2px 8px; border-radius:999px; display:inline-block; margin-bottom:4px; }
.pt-title { font-size:13px; font-weight:800; background:linear-gradient(135deg,#6366F1,#38BDF8,#10B981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pt-stats-row { display:flex; gap:6px; margin-top:8px; }
.pt-stat { background:#141C35; border:1px solid #1E2A4A; border-radius:8px; padding:5px 8px; text-align:center; flex:1; }
.pt-stat span { font-size:14px; font-weight:800; color:#E2E8F0; display:block; }
.pt-stat small { font-size:8px; color:#64748B; }
.pt-body { padding:10px; display:flex; flex-direction:column; gap:8px; }
.pt-prog-item { display:flex; flex-direction:column; gap:3px; }
.pt-prog-label { display:flex; justify-content:space-between; font-size:9px; color:#94A3B8; }
.pt-bar { height:5px; background:#1E2A4A; border-radius:3px; overflow:hidden; }
.pt-fill { height:100%; width:0; border-radius:3px; background:var(--c,#6366F1); transition:width 2s ease; }
.pt-week { display:flex; gap:4px; justify-content:center; margin-top:2px; }
.pt-day { width:24px; height:24px; border-radius:50%; font-size:8px; font-weight:700; display:flex; align-items:center; justify-content:center; background:#141C35; color:#64748B; }
.pt-day.done { background:#6366F1; color:#fff; }
.pt-day.today { background:#F59E0B; color:#000; }
.pt-day.rest { background:#0F1629; color:#334155; }
.pt-streak { font-size:9px; color:#F59E0B; text-align:center; font-weight:600; }

/* ══ HABIT SCREEN ══ */
.habit-screen { background:#0D0F1A; overflow-y:auto; }
.ht-header { background:linear-gradient(135deg,#1a1040,#0f1628); padding:10px; border-bottom:1px solid rgba(255,255,255,0.06); }
.ht-logo { font-size:13px; font-weight:800; background:linear-gradient(90deg,#A89BF9,#22D3EE); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ht-quote { font-size:9px; color:#9B9DC8; font-style:italic; margin-top:3px; }
.ht-quote strong { color:#A89BF9; font-style:normal; }
.ht-month { font-size:9px; color:#5C5E8A; font-family:monospace; margin-top:3px; }
.ht-body { padding:8px; display:flex; flex-direction:column; gap:7px; }
.ht-habit { background:#1A1D2E; border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:7px 8px; }
.ht-name { font-size:9px; color:#F0F0FF; font-weight:600; margin-bottom:5px; }
.ht-days { display:flex; gap:3px; align-items:center; }
.hday { width:20px; height:20px; border-radius:50%; font-size:7px; font-weight:700; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.2); flex-shrink:0; }
.hday.done { background:#7C6AF7; color:#fff; }
.hday.today { background:#22D3EE; color:#000; }
.hday.rest { background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.08); }
.ht-streak-mini { font-size:9px; color:#F59E0B; margin-left:auto; padding-left:4px; flex-shrink:0; }
.ht-overall { background:#131520; border:1px solid rgba(255,255,255,0.05); border-radius:8px; padding:7px 8px; }
.ht-ov-label { display:flex; justify-content:space-between; font-size:9px; color:#9B9DC8; margin-bottom:5px; }
.ht-ov-label span { color:#A89BF9; font-weight:700; }
.ht-ov-bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; }
.ht-ov-fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#7C6AF7,#22D3EE); transition:width 2s ease; }

/* Examples CTA */
.examples-cta { text-align:center; padding:40px; background:var(--cream); border-radius:var(--radius); border:1px solid var(--border); }
.examples-cta p { font-size:18px; color:var(--maroon); margin-bottom:20px; font-family:var(--font-display); }

/* hide old stuff */
.examples-tabs,.example-preview { display:none !important; }

/* ═══════════════════════════════════
   V4 EXAMPLE PREVIEWS — COMPLETE
═══════════════════════════════════ */

/* Grid & card */
.real-examples-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:60px}
@media(max-width:900px){.real-examples-grid{grid-template-columns:1fr}}
.re-card{display:grid;grid-template-columns:200px 1fr;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--white);transition:all .3s}
.re-card:hover{transform:translateY(-6px);box-shadow:0 28px 64px rgba(196,104,122,.13);border-color:var(--rose)}
@media(max-width:1100px){.re-card{grid-template-columns:1fr}}
.re-preview{background:#0a0a12;display:flex;align-items:center;justify-content:center;padding:16px 12px;min-height:380px}
.phone-frame{width:160px;height:310px;background:#111827;border-radius:28px;padding:10px 7px 8px;box-shadow:0 0 0 2px #222,0 20px 60px rgba(0,0,0,.8);position:relative}
.pf-notch{width:48px;height:4px;background:#1f2937;border-radius:2px;margin:0 auto 7px}
.pf-screen{border-radius:18px;height:273px;overflow:hidden;position:relative}
.re-info{padding:20px 18px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.re-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;width:fit-content}
.re-info h3{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--dark);line-height:1.2}
.re-info p{font-size:12px;color:var(--gray);line-height:1.7}
.re-tags{display:flex;flex-wrap:wrap;gap:5px}
.re-tags span{font-size:10px;font-weight:600;background:var(--gray-light);color:var(--maroon);padding:3px 9px;border-radius:999px}
.re-order-btn{font-size:13px;font-weight:700;color:var(--rose);display:inline-block;margin-top:4px}
.examples-cta{text-align:center;padding:36px;background:var(--cream);border-radius:var(--radius);border:1px solid var(--border)}
.examples-cta p{font-size:18px;color:var(--maroon);margin-bottom:20px;font-family:var(--font-display)}
.examples-tabs,.example-preview{display:none!important}

/* ══ EMOTIONAL STORY ══ */
.es{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 10px;opacity:0;transition:opacity .8s;pointer-events:none;gap:8px}
.es.active{opacity:1}
.es1{background:#000}
.es2{background:linear-gradient(160deg,#0a001a,#1a0030)}
.es3{background:linear-gradient(160deg,#001a0f,#003320)}
.es4{background:linear-gradient(160deg,#001a1a,#002233)}
.es5{background:linear-gradient(180deg,#0d0020 0%,#1a0533 35%,#6b2fa0 65%,#e8804a 82%,#ffd580 100%);padding:0}
.es-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(34,211,238,.04) 0,rgba(34,211,238,.04) 1px,transparent 1px,transparent 3px);pointer-events:none}
.es1-content{display:flex;align-items:center;gap:2px;position:relative;z-index:2}
.es1-tw{font-family:'Courier New',monospace;font-size:11px;color:#22d3ee;text-align:center;line-height:1.9;text-shadow:0 0 8px rgba(34,211,238,.7);white-space:pre-wrap}
.es1-cursor{width:2px;height:14px;background:#22d3ee;animation:curB .7s step-end infinite;flex-shrink:0}
@keyframes curB{0%,100%{opacity:1}50%{opacity:0}}
.es2-card{width:120px;height:64px;border-radius:12px;position:relative;overflow:hidden}
.es2-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#7c3aed,#ec4899,#f97316);animation:scrA 3s ease-in-out infinite}
@keyframes scrA{0%,20%{clip-path:inset(0 0 0 0)}55%,65%{clip-path:inset(0 0 0 100%)}95%,100%{clip-path:inset(0 0 0 0)}}
.es2-msg{position:absolute;inset:0;background:linear-gradient(135deg,#4c1d95,#7c3aed);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:9px;color:#fff;font-weight:700;text-align:center;gap:2px}
.es3-wheel-wrap{position:relative;width:88px;height:88px}
.es3-wheel{width:88px;height:88px;border-radius:50%;position:relative;overflow:hidden;animation:spinW 4s ease-in-out infinite;box-shadow:0 4px 20px rgba(0,0,0,.4)}
@keyframes spinW{0%{transform:rotate(0)}40%{transform:rotate(780deg)}60%,100%{transform:rotate(780deg)}}
.es3-seg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.es3-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:900;z-index:5;background:radial-gradient(circle,rgba(0,0,0,.6) 30%,transparent 70%)}
.es3-pin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);color:#fbbf24;font-size:14px;z-index:10;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.es3-result{font-size:9px;color:rgba(255,255,255,.6);text-align:center;font-style:italic;margin-top:4px}
.es4-mirror{width:110px;border:1.5px solid rgba(34,211,238,.3);border-radius:50% 50% 46% 46%/55% 55% 45% 45%;padding:14px 10px;text-align:center;background:rgba(34,211,238,.03);box-shadow:0 0 20px rgba(34,211,238,.1);position:relative}
.es4-glow{position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.1),transparent 70%);animation:glowP 3s ease-in-out infinite}
@keyframes glowP{0%,100%{opacity:.5}50%{opacity:1}}
.es4-face{font-size:28px;animation:mFaceB 3s ease-in-out infinite;display:block;margin-bottom:5px}
@keyframes mFaceB{0%,100%{transform:scale(1)}50%{transform:scale(1.08) translateY(-2px)}}
.es4-msg{font-size:8px;color:rgba(34,211,238,.8);font-style:italic;line-height:1.5}
.es4-next{font-size:8px;color:rgba(255,255,255,.3);margin-top:5px}
.es5-sky{position:absolute;inset:0;overflow:hidden}
.es5-sun{position:absolute;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffde7,#ffeb3b 40%,#ff9800);box-shadow:0 0 0 7px rgba(255,235,59,.2),0 0 40px rgba(255,152,0,.3);animation:sunR2 4s ease-in-out infinite,sunP2 2s ease-in-out infinite;bottom:36%;left:50%;transform:translateX(-50%)}
@keyframes sunR2{0%,100%{bottom:30%}50%{bottom:40%}}
@keyframes sunP2{0%,100%{box-shadow:0 0 0 7px rgba(255,235,59,.2),0 0 30px rgba(255,152,0,.2)}50%{box-shadow:0 0 0 12px rgba(255,235,59,.25),0 0 50px rgba(255,152,0,.35)}}
.es5-hill{position:absolute;bottom:0;left:0;right:0;height:33%;background:linear-gradient(to top,#2d1050,#1a0533);border-radius:60% 60% 0 0/30% 30% 0 0}
.es5-bird{position:absolute;font-size:9px}
.b1{top:18%;animation:bF 4s linear infinite}
.b2{top:25%;animation:bF 4s linear 1.3s infinite}
.b3{top:15%;animation:bF 4s linear 2.5s infinite}
@keyframes bF{from{left:-5%}to{left:110%}}
.es5-card{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:rgba(255,247,237,.08);border:1px solid rgba(245,200,66,.2);border-radius:10px;padding:7px 12px;text-align:center;backdrop-filter:blur(10px);z-index:5;white-space:nowrap}
.es5-icon{font-size:16px;animation:ss2 8s linear infinite;display:block}
@keyframes ss2{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.es5-txt{font-size:9px;color:#fff7ed;font-weight:700;line-height:1.5}
.es5-sub{font-size:8px;color:rgba(245,200,66,.7);margin-top:2px}
.es-dots{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;gap:3px;z-index:20}
.esdot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.esdot.active{background:#fbbf24;transform:scale(1.4)}

/* ══ MOON NIGHT ══ */
.mn-lantern{position:absolute;font-size:20px;z-index:3;animation:lSway 3s ease-in-out infinite}
.mnl1{top:6%;left:8%;animation-delay:0s}
.mnl2{top:4%;right:8%;animation-delay:1.2s}
@keyframes lSway{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
.mn-moon{position:absolute;top:2%;left:50%;transform:translateX(-50%);font-size:32px;z-index:3;animation:mnFloat 4s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(245,200,66,.9))}
@keyframes mnFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.mn-ff{position:absolute;font-size:9px;z-index:4;animation:ffF 3s ease-in-out infinite}
.mnff1{top:28%;left:12%;animation-delay:0s}
.mnff2{top:48%;right:10%;animation-delay:1.1s}
.mnff3{top:38%;left:52%;animation-delay:2.2s}
@keyframes ffF{0%,100%{opacity:.3;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-8px) scale(1.3)}}
.mn-card{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:rgba(255,247,237,.07);border:1px solid rgba(245,200,66,.2);border-radius:12px;padding:10px 12px;text-align:center;backdrop-filter:blur(12px);z-index:5;width:128px;animation:cF 4s ease-in-out infinite}
@keyframes cF{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
.mn-icons{font-size:11px;margin-bottom:3px}
.mn-name{font-size:18px;font-weight:900;background:linear-gradient(135deg,#f5c842,#e8b020);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ngA 3s ease-in-out infinite}
@keyframes ngA{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.mn-msg{font-size:7.5px;color:rgba(255,247,237,.75);line-height:1.6;margin:4px 0;font-style:italic}
.mn-sub{font-size:8px;color:rgba(245,200,66,.6)}

/* ══ FITNESS TRACKER — pixel perfect ══ */
.pt-screen{background:#080B14;overflow:hidden;display:flex;flex-direction:column}
.pt-hdr{background:linear-gradient(135deg,#0F1629 0%,#1a1040 50%,#0F1629 100%);border-bottom:1px solid #1E2A4A;padding:10px 8px 8px;flex-shrink:0}
.pt-hbadge{display:inline-block;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);border-radius:20px;padding:2px 8px;font-size:7px;color:#6366F1;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.pt-htitle{font-size:14px;font-weight:800;background:linear-gradient(135deg,#6366F1,#38BDF8,#10B981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}
.pt-hsub{color:#64748B;font-size:7.5px;margin-top:1px}
.pt-hstats{display:flex;gap:4px;margin-top:6px}
.pt-hstat{background:#141C35;border:1px solid #1E2A4A;border-radius:6px;padding:4px 6px;text-align:center;flex:1}
.pt-hstat span{font-size:12px;font-weight:800;color:#E2E8F0;display:block}
.pt-hstat small{font-size:7px;color:#64748B}
.c-indigo{color:#6366F1}.c-emerald{color:#10B981}.c-sky{color:#38BDF8}.c-amber{color:#F59E0B}
.c-purple{color:#A89BF9}.c-green{color:#4ADE80}.c-cyan{color:#22D3EE}.c-yellow{color:#FBBF24}
.pt-tabs{display:flex;background:#0F1629;border-bottom:1px solid #1E2A4A;flex-shrink:0}
.pt-tab{padding:6px 8px;font-size:8px;font-weight:600;color:#64748B;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
.pt-tab.active{color:#6366F1;border-bottom-color:#6366F1}
.pt-body{flex:1;overflow:hidden;position:relative}
.ptv{position:absolute;inset:0;padding:8px;display:flex;flex-direction:column;gap:5px;opacity:0;transition:opacity .5s;overflow:hidden}
.ptv.active{opacity:1}
.pt-targets-title{font-size:9px;font-weight:700;color:#94A3B8;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.pt-target-row{display:flex;flex-direction:column;gap:2px}
.pt-target-label{display:flex;justify-content:space-between;font-size:8px;color:#94A3B8}
.pt-bar-bg{height:5px;background:#1E2A4A;border-radius:3px;overflow:hidden}
.pt-bar-fill{height:100%;width:0;border-radius:3px;transition:width 2s ease}
.pt-habits{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.pt-hab{font-size:8px;color:#64748B;padding:3px 6px;background:#141C35;border-radius:4px}
.pt-hab.done{color:#10B981;background:rgba(16,185,129,.08)}
.pt-week-row{display:flex;gap:3px;justify-content:center;margin-top:2px}
.pt-wday{width:22px;height:22px;border-radius:50%;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#141C35;color:#64748B}
.pt-wday.done{background:#6366F1;color:#fff}
.pt-wday.today{background:#F59E0B;color:#000}
.pt-wday.rest{background:#0F1629;color:#334155}
.pt-streak{font-size:8px;color:#F59E0B;text-align:center;font-weight:600}
.pt-ex-row{display:flex;align-items:center;gap:5px;padding:4px 0;border-bottom:1px solid #1E2A4A}
.pt-ex-badge{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.pt-ex-name{font-size:9px;font-weight:600;color:#E2E8F0;flex:1}
.pt-ex-reps{font-size:8px;color:#64748B}
.pt-macros{display:flex;gap:4px;margin-top:4px}
.pt-macro{background:#141C35;border:1px solid #1E2A4A;border-radius:6px;padding:5px;text-align:center;flex:1}
.pt-macro span{font-size:11px;font-weight:800;display:block}
.pt-macro small{font-size:7px;color:#64748B}
.pt-meal{display:flex;align-items:center;gap:5px;padding:4px 0;border-bottom:1px solid #1E2A4A}
.pt-meal-ck{width:16px;height:16px;border-radius:4px;background:#10B981;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-meal-ck-empty{width:16px;height:16px;border-radius:4px;border:1.5px solid #1E2A4A;flex-shrink:0}
.pt-meal-n{font-size:9px;font-weight:600;color:#E2E8F0}
.pt-meal-f{font-size:7.5px;color:#64748B}
.pt-meal-p{font-size:9px;font-weight:700;margin-left:auto;flex-shrink:0}

/* ══ HABIT TRACKER — pixel perfect ══ */
.ht-screen{background:#0D0F1A;overflow:hidden;display:flex;flex-direction:column;font-family:'DM Sans',sans-serif}
.ht-hero{background:linear-gradient(135deg,#1a1040 0%,#0f1628 40%,#0a1a1a 100%);border-bottom:1px solid rgba(255,255,255,.06);padding:8px 10px 7px;position:relative;overflow:hidden;flex-shrink:0}
.ht-hero-glow{position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(124,106,247,.2),transparent 70%);pointer-events:none}
.ht-logo-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.ht-logo-icon{width:24px;height:24px;background:linear-gradient(135deg,#7C6AF7,#22D3EE);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ht-logo-text{font-size:12px;font-weight:800;background:linear-gradient(90deg,#A89BF9,#22D3EE);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ht-logo-sub{font-size:7px;color:#5C5E8A;margin-top:-1px}
.ht-quote{font-size:8px;color:#9B9DC8;font-style:italic;padding:4px 8px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(255,255,255,.06);display:inline-block;margin-bottom:5px}
.ht-quote strong{color:#A89BF9;font-style:normal}
.ht-month-row{display:flex;align-items:center;justify-content:space-between}
.ht-mnav{font-size:14px;color:#5C5E8A;cursor:pointer;padding:0 4px}
.ht-mname{font-size:9px;font-weight:600;color:#F0F0FF;font-family:'DM Sans',monospace}
.ht-tabs{display:flex;background:#131520;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ht-tab{padding:6px 10px;font-size:8px;font-weight:500;color:#5C5E8A;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
.ht-tab.active{color:#A89BF9;border-bottom-color:#7C6AF7}
.ht-body{flex:1;background:#131520;overflow:hidden;position:relative}
.htv{position:absolute;inset:0;padding:6px;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .5s;overflow:hidden}
.htv.active{opacity:1}
.ht-day-header{display:grid;grid-template-columns:44px repeat(7,1fr);gap:2px;margin-bottom:2px;flex-shrink:0}
.ht-hblank{} .ht-hday{text-align:center;font-size:7px;font-weight:600;color:#5C5E8A;text-transform:uppercase;padding:2px 0}
.ht-hday.is-today{color:#22D3EE}
.ht-hd-num{font-size:9px;font-weight:700;font-family:monospace;color:#9B9DC8;margin-top:1px}
.ht-hday.is-today .ht-hd-num{color:#22D3EE}
.ht-habits-wrap{border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.06);flex-shrink:0}
.ht-hrow{display:grid;grid-template-columns:44px repeat(7,1fr);border-bottom:1px solid rgba(255,255,255,.05);background:#1A1D2E}
.ht-hrow:last-child{border-bottom:none}
.ht-hinfo{display:flex;align-items:center;gap:3px;padding:5px 4px;border-right:1px solid rgba(255,255,255,.05)}
.ht-hicon{font-size:9px;flex-shrink:0}
.ht-hname{font-size:7.5px;font-weight:600;color:#F0F0FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-daycell{display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;border-right:1px solid rgba(255,255,255,.04);padding:4px 1px;color:#5C5E8A}
.ht-daycell:last-child{border-right:none}
.ck-done{color:#4ADE80;background:rgba(74,222,128,.08)}
.ck-future{color:#333755;background:rgba(255,255,255,.01)}
.ht-strip{display:grid;grid-template-columns:44px repeat(7,1fr);border-top:1px solid rgba(255,255,255,.04);background:#131520;flex-shrink:0}
.ht-strip-label{font-size:6.5px;color:#5C5E8A;font-weight:600;text-transform:uppercase;padding:4px 4px;display:flex;align-items:center;border-right:1px solid rgba(255,255,255,.04)}
.ht-strip-cell{display:flex;align-items:center;justify-content:center;padding:3px 1px;border-right:1px solid rgba(255,255,255,.04)}
.ht-strip-cell:last-child{border-right:none}
.ht-strip-pct{font-size:8px;font-weight:700;padding:1px 3px;border-radius:4px}
.done-pct{color:#4ADE80;background:rgba(74,222,128,.12)}
.ok-pct{color:#FBBF24;background:rgba(251,191,36,.12)}
.bad-pct{color:#5C5E8A;background:transparent}
/* Dashboard */
.ht-metric-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;flex-shrink:0}
.ht-metric{background:#1A1D2E;border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:6px 4px;text-align:center}
.ht-micon{font-size:12px;margin-bottom:2px}
.ht-mval{font-size:14px;font-weight:800;font-family:monospace}
.ht-mlbl{font-size:7px;color:#5C5E8A;margin-top:1px}
.ht-wsb-title{font-size:8px;color:#5C5E8A;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:2px 0;flex-shrink:0}
.ht-wsb-row,.ht-stat-row{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ht-wsb-icon{font-size:9px;width:14px;text-align:center;flex-shrink:0}
.ht-wsb-name{font-size:8px;font-weight:500;color:#F0F0FF;width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.ht-wsb-bar{flex:1;height:4px;background:#20233A;border-radius:2px;overflow:hidden}
.ht-wsb-fill{height:100%;border-radius:2px}
.ht-wsb-pct{font-size:8px;font-weight:700;width:26px;text-align:right;flex-shrink:0}
.ht-overall-bar-wrap{margin-top:4px;flex-shrink:0}
.ht-ov-bar{height:5px;background:#20233A;border-radius:3px;overflow:hidden;margin-top:2px}
.ht-ov-fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7C6AF7,#22D3EE);transition:width 2s ease}