@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');
:root{--bg:#fbfbfd;--text:#11111a;--muted:rgba(17,17,26,.70);--card:#ffffff;--card2:#ffffff;--border:rgba(17,17,26,.10);--primary:#ff2d75;--secondary:#8b1cff;--shadow:0 18px 60px rgba(17,17,26,.12);--shadow2:0 12px 30px rgba(17,17,26,.10);--radius:22px;}
body.dark{--bg:#0f0f14;--text:#ffffff;--muted:rgba(255,255,255,.72);--card:rgba(255,255,255,.06);--card2:rgba(255,255,255,.04);--border:rgba(255,255,255,.12);--shadow:0 20px 70px rgba(0,0,0,.55);--shadow2:0 14px 34px rgba(0,0,0,.45);}
*{font-family:'Tajawal',sans-serif;}
body{background:radial-gradient(1200px 700px at 12% 8%, rgba(255,45,117,.10), transparent 55%),radial-gradient(900px 600px at 88% 10%, rgba(139,28,255,.10), transparent 55%),radial-gradient(900px 600px at 70% 90%, rgba(34,211,238,.08), transparent 55%),var(--bg);color:var(--text);transition:.25s ease;}
a{color:inherit;text-decoration:none;}
.container-xl{max-width:1200px;}
.kicker{color:var(--muted);letter-spacing:.25px;}
.navbar{background: rgba(251,251,253,.78)!important;backdrop-filter: blur(10px);border-bottom:1px solid var(--border);}
body.dark .navbar{background: rgba(15,15,20,.78)!important;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:34px;}
.pillora-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,45,117,.30);background: rgba(255,45,117,.10);font-weight:900;font-size:12px;}
.btn-pillora{background: linear-gradient(90deg,var(--primary),var(--secondary));border:none;color:#fff!important;border-radius:14px;padding:.78rem 1.05rem;box-shadow:0 14px 32px rgba(255,45,117,.18);}
.btn-pillora:hover{opacity:.94;}
.btn-soft{border:1px solid var(--border);background: rgba(255,255,255,.55);color: var(--text);border-radius:14px;padding:.72rem 1.0rem;}
body.dark .btn-soft{background: rgba(255,255,255,.06);}
.cardx{border:1px solid var(--border);border-radius: var(--radius);background: linear-gradient(180deg,var(--card),var(--card2));box-shadow: var(--shadow);overflow:hidden;}
.cardx-soft{border:1px solid var(--border);border-radius: var(--radius);background: rgba(255,255,255,.50);box-shadow: var(--shadow2);}
body.dark .cardx-soft{background: rgba(255,255,255,.05);}
.hero{padding:108px 0 42px;}
.section{padding:74px 0;}
.section-title{font-weight:900;letter-spacing:.2px;}
.hero-visual{width:100%;border-radius:18px;border:1px solid var(--border);background: rgba(0,0,0,.06);min-height:320px;object-fit:cover;}
.product-card img{width:100%;height:200px;object-fit:cover;display:block;}
.chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-weight:800;font-size:12px;}
.price{font-weight:900;font-size:20px;}
.quote{border-radius:18px;padding:18px;border:1px dashed rgba(17,17,26,.18);background: rgba(17,17,26,.03);}
body.dark .quote{border-color: rgba(255,255,255,.18);background: rgba(0,0,0,.14);}
.grid3{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px;}
@media(min-width:768px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1200px){.grid3{grid-template-columns:repeat(3,minmax(0,1fr));}}
/*
  Production-safe visibility:
  The project previously used a JS-driven "fade-up" reveal.
  When JS is blocked/unavailable (private mode, strict browsers, CSP, adblockers),
  opacity:0 left the entire page blank.
  Requirement: content must ALWAYS be visible without relying on JavaScript.
*/
.fade-up{opacity:1;transform:none;transition:.25s ease;}
.fade-up.show{opacity:1;transform:none;}
.form-control,.form-select{border-radius:14px;border:1px solid var(--border);background: rgba(255,255,255,.72);color: var(--text);}
body.dark .form-control, body.dark .form-select{background: rgba(255,255,255,.06);color: var(--text);}
.form-control:focus,.form-select:focus{box-shadow:none;border-color: rgba(255,45,117,.45);}
.footer{border-top:1px solid var(--border);padding:28px 0;color: var(--muted);}
.hr{height:1px;background: var(--border);width:100%;}

.mobilebar{position:fixed;bottom:14px;left:14px;right:14px;z-index:1050;display:flex;gap:10px;justify-content:space-between;padding:10px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.78);backdrop-filter: blur(12px);box-shadow: var(--shadow2);}
body.dark .mobilebar{background:rgba(15,15,20,.72);}
@media(min-width:992px){.mobilebar{display:none;}}

/* === v2 enhancements === */
.pillora-body{background:var(--bg); color:var(--text); font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.main-wrap{padding-top:86px;}
.pillora-nav{backdrop-filter:saturate(140%) blur(10px); background:color-mix(in oklab,var(--bg) 78%, transparent); border-bottom:1px solid var(--border);}
.pillora-logo{height:34px; width:auto;}
.brand-name{font-weight:800; letter-spacing:.2px;}
.navbar .nav-link{color:var(--text); opacity:.85;}
.navbar .nav-link:hover{opacity:1;}
.pillora-dropdown{background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow2);}
.btn-ghost{border:1px solid var(--border); background:color-mix(in oklab,var(--card) 75%, transparent); color:var(--text); border-radius:999px; padding:.55rem .9rem;}
.icon-btn{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0;}
.pillora-btn{border-radius:999px; padding:.6rem 1.05rem; font-weight:700;}
.pillora-btn-outline{border-radius:999px; padding:.6rem 1.05rem; font-weight:700;}
.pillora-input{border-radius:14px; border:1px solid var(--border); background:var(--card); color:var(--text);}
.pillora-input:focus{box-shadow:none; border-color:color-mix(in oklab,var(--primary) 45%, var(--border));}
.pillora-callout{border:1px dashed color-mix(in oklab,var(--primary) 40%, var(--border)); background:color-mix(in oklab,var(--card) 80%, transparent); border-radius:18px;}
.footer{border-top:1px solid var(--border); background:color-mix(in oklab,var(--bg) 88%, var(--card) 12%);}
.footer-title{font-weight:800; margin-bottom:.6rem;}
.footer-links li{margin:.35rem 0;}
.footer-links a{color:var(--text); opacity:.78; text-decoration:none;}
.footer-links a:hover{opacity:1; text-decoration:underline;}
.social-btn{width:42px; height:42px; border-radius:999px; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none; background:color-mix(in oklab,var(--card) 70%, transparent);}
.social-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow2);}
.payment-row .pay-pill{border:1px solid var(--border); background:color-mix(in oklab,var(--card) 70%, transparent); border-radius:999px; padding:.35rem .7rem; font-size:.85rem; opacity:.9;}
.payment-row .pay-icon{height:32px; width:auto; border-radius:10px; border:1px solid var(--border); background:color-mix(in oklab,var(--card) 60%, transparent);}
.footer-bottom{border-top:1px solid var(--border);}

/* Modal */
.pillora-modal{background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow);}
.age-icon{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:color-mix(in oklab,var(--primary) 20%, var(--card)); border:1px solid var(--border);}
.age-icon i{font-size:1.25rem;}

/* Sections */
.section{padding:72px 0;}
.hero{padding:96px 0 56px;}
.hero .kicker{display:inline-flex; gap:.5rem; align-items:center; border:1px solid var(--border); border-radius:999px; padding:.35rem .75rem; background:color-mix(in oklab,var(--card) 75%, transparent); font-weight:700; font-size:.9rem;}
.gradient-text{background:linear-gradient(90deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-card{border:1px solid var(--border); background:radial-gradient(1200px 500px at 20% 0%, color-mix(in oklab,var(--primary) 12%, transparent), transparent), var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.hero-badges .badge{border:1px solid var(--border); background:color-mix(in oklab,var(--card) 70%, transparent); color:var(--text);}

.feature-card{border:1px solid var(--border); background:var(--card2); border-radius:22px; padding:18px; height:100%;}
.feature-card i{font-size:1.25rem;}
.trust-row .trust-item{border:1px solid var(--border); background:color-mix(in oklab,var(--card) 70%, transparent); border-radius:18px; padding:14px;}
.review-card{border:1px solid var(--border); background:var(--card); border-radius:22px; padding:18px; height:100%;}
.review-card .stars{letter-spacing:1px;}
.floating-cta{position:fixed; bottom:18px; inset-inline-end:18px; z-index:1040; display:flex; gap:10px;}
.floating-cta a{border-radius:999px; box-shadow:var(--shadow2);}
@media (max-width: 576px){
  .floating-cta{inset-inline-end:12px; bottom:12px;}
  .hero{padding:72px 0 40px;}
}

.pillora-nav.nav-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.10);}

/* Cards */
.card-glow{border:1px solid var(--border); background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--shadow2); transition:transform .2s ease, box-shadow .2s ease;}
.card-glow:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.card-glow .thumb{height:180px; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.02);}
.pillora-thumb{width:56px; height:56px; border-radius:16px; border:1px solid var(--border); background-size:cover; background-position:center; box-shadow:var(--shadow2);}

.filter-chip.active{border-color:color-mix(in oklab,var(--primary) 55%, var(--border)); background:color-mix(in oklab,var(--primary) 14%, var(--card));}

/* Demo */
.hero-mini{padding-top:80px; padding-bottom:40px;}
.demo-card{min-height:140px; border:1px dashed var(--border); border-radius:18px; padding:18px; font-size:1.05rem; font-weight:700; background:rgba(255,255,255,.55); display:flex; align-items:center;}
body.dark .demo-card{background:rgba(255,255,255,.06);}
.demo-card.pop{animation:pop .22s ease-out;}
@keyframes pop{from{transform:scale(.98); opacity:.8} to{transform:scale(1); opacity:1}}

.staging-ribbon{position:fixed;top:14px;left:14px;z-index:1050;padding:6px 10px;border-radius:999px;background:rgba(255,0,120,.12);border:1px solid rgba(255,0,120,.35);backdrop-filter: blur(10px);font-weight:700;letter-spacing:.08em;font-size:12px;color:var(--pillora-text);}

/* Private Mode */
.private-banner{position:sticky;top:0;z-index:1060;background:linear-gradient(90deg, rgba(0,0,0,.90), rgba(20,20,20,.90));color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0;}
.private-mode .hero-visual,
.private-mode .product-card img,
.private-mode .safe-media{filter:blur(10px) saturate(.6) contrast(.9);}
.private-mode .chip{opacity:.85;}
.private-mode .pillora-18{opacity:1;}

/* Progressive disclosure */
.disclose-hidden{display:none !important;}

/* Inputs */
.pillora-input{border-radius:14px !important;}


/* Private Mode */
.private-banner{position:sticky;top:0;z-index:1060;background:linear-gradient(90deg, rgba(0,0,0,.92), rgba(22,22,22,.92));color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0;}
.private-mode .hero-visual,
.private-mode .product-card img,
.private-mode .safe-media{filter:blur(10px) saturate(.75) contrast(.95);}
.private-mode .product-title,
.private-mode .product-hook{letter-spacing:.02em;}
.private-mode .quote{opacity:.9;}

/* Progressive disclosure */
.disclose-hidden{display:none !important;}

/* Small UI polish */
.pillora-input{border-radius:14px;}
.pillora-nav .nav-link{font-weight:700; opacity:.92;}
.pillora-nav .nav-link:hover{opacity:1;}