:root {
    --bg-color: #050508;
    --card-bg: #0e0e14;
    --border-color: #1e1e28;
    --text-main: #ffffff;
    --text-muted: #8a8a9a;
    --primary-yellow: #d4f23b;
    --primary-green: #9de326;
    --glow-yellow: rgba(212, 242, 59, 0.2);
    --glow-purple: rgba(138, 43, 226, 0.18);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }
html { overflow-y:scroll; font-size:18px; }
body { background-color:var(--bg-color); color:var(--text-main); overflow-x:hidden; }

.glow-bg {
    position:fixed; top:-20%; left:-10%; width:60%; height:60%;
    background:radial-gradient(circle, var(--glow-purple) 0%, transparent 60%);
    z-index:-1; pointer-events:none;
}

/* ======== UTILITIES ======== */
.font-outfit { font-family:'Outfit',sans-serif; }
.text-yellow { color:var(--primary-yellow); }
.text-green  { color:var(--primary-green); }
.text-orange { color:#ff6b00; }
.highlight   { color:var(--primary-yellow); }
.glow-text   { text-shadow:0 0 15px var(--primary-yellow); }
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.w-full      { width:100%; }
.flex-between{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.cursive-text{ font-family:'Yellowtail',cursive; font-size:4rem; transform:rotate(-5deg); display:inline-block; margin:10px 0; }

/* ======== NAVBAR ======== */
.navbar {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.6rem 1.5rem; border:1px solid rgba(255,255,255,0.08);
    position:fixed; top:0.8rem; left:50%; transform:translateX(-50%);
    width:90%; max-width:1200px;
    z-index:100; background:rgba(10,10,15,0.75); backdrop-filter:blur(16px);
    border-radius:100px;
    box-shadow:0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.navbar.navbar-hidden {
    transform: translate(-50%, -150%);
    opacity: 0;
    pointer-events: none;
}
.logo { display:flex; align-items:center; gap:0.6rem; margin-left:0; }
.logo-icon {
    width:32px; height:32px;
    background: url('../assets/logo.jpeg') no-repeat center center;
    background-size: cover;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem; color:transparent;
    box-shadow:0 0 8px rgba(138,43,226,0.5);
}
.logo-text { font-family:'Outfit',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:0.5px; }
.nav-links { display:flex; gap:1.5rem; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:0.8rem !important; font-weight:500 !important; letter-spacing:0.2px; transition:color 0.3s; white-space:nowrap; }
.nav-links a:hover,.nav-links a.active { color:var(--text-main); }
.nav-links a.active { border-bottom:2px solid var(--primary-yellow); padding-bottom:4px; }
.navbar-right { display:flex; align-items:center; gap:0.6rem; }
.btn-download {
    background:transparent; color:var(--primary-yellow); border:1px solid var(--primary-yellow);
    padding:0.25rem 0.5rem; border-radius:8px; font-size:0.6rem; font-weight:600; cursor:pointer; transition:all 0.3s;
}
.btn-download:hover { background:var(--glow-yellow); }
.btn-hamburger {
    display:none; background:transparent; border:1px solid var(--border-color);
    color:var(--text-main); width:28px; height:28px; border-radius:5px; cursor:pointer; font-size:0.8rem;
}

/* ======== BUTTONS ======== */
button { cursor:pointer; border:none; font-family:'Inter',sans-serif; transition:all 0.3s ease; }
.btn-primary {
    background:var(--primary-yellow); color:#000; font-weight:600;
    padding:0.9rem 1.8rem; font-size:0.95rem; border-radius:24px; display:flex; align-items:center; gap:0.45rem;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 25px var(--glow-yellow); }
.btn-secondary {
    background:rgba(255,255,255,0.06); color:var(--text-main); border:1px solid var(--border-color);
    padding:0.9rem 1.8rem; font-size:0.95rem; border-radius:24px; display:flex; align-items:center; gap:0.45rem;
}
.btn-secondary:hover { border-color:rgba(255,255,255,0.4); }
.btn-outline {
    background:transparent; color:var(--text-muted); border:1px solid var(--border-color);
    padding:1rem; border-radius:24px; width:100%; font-size:0.95rem;
}
.btn-outline:hover { color:var(--text-main); border-color:rgba(255,255,255,0.3); }

/* ======== CONTAINER ======== */
.container { width:100%; margin:0 auto; padding:7rem 7% 4rem; }

/* ======== HERO ======== */
.hero { display:grid; grid-template-columns:1fr 1.4fr; gap:2rem; align-items:center; margin-top:2rem; }
.hero-left { max-width:650px; }
.badge-ai {
    background:rgba(255,255,255,0.05); border:1px solid var(--border-color);
    padding:0.3rem 0.7rem; border-radius:14px; display:inline-flex; align-items:center;
    gap:0.3rem; font-size:0.65rem; margin-bottom:0.7rem;
}
.hero-title { font-family:'Outfit',sans-serif; font-size:clamp(1.6rem, 5vw, 3.2rem); font-weight:800; line-height:1.1; margin-bottom:1rem; }
.hero-subtitle { color:var(--text-muted); font-size:clamp(0.75rem, 1.8vw, 1rem); line-height:1.6; margin-bottom:1.8rem; max-width:550px; }
.hero-cta { display:flex; flex-direction:row; gap:1rem; margin-bottom:1.5rem; }
.hero-cta .btn-primary { align-self:center; }
.hero-cta .btn-secondary { align-self:center; }
.social-proof { display:flex; align-items:center; gap:1rem; }
.avatars { display:flex; }
.avatars img { width:24px; height:24px; border-radius:50%; border:2px solid var(--bg-color); margin-left:-6px; object-fit:cover; }
.avatars img:first-child { margin-left:0; }
.proof-text p { font-size:clamp(0.6rem, 1.2vw, 0.75rem); }
.proof-text .sub { color:var(--text-muted); font-size:clamp(0.5rem, 1vw, 0.65rem); }

/* ======== HERO CENTER / FACE ======== */
.hero-center { position:relative; display:flex; flex-direction:column; align-items:center; }
.face-container { position:relative; width:100%; max-width:360px; margin:0 auto; }
.bg-glow-purple {
    position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(138,43,226,0.35) 0%, transparent 65%);
    border-radius:50%; z-index:0;
}
.face-img {
    width:100%; height:auto; position:relative; z-index:1;
    mask-image:linear-gradient(to bottom, black 75%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, black 75%, transparent 100%);
}
.stat-badge {
    position:absolute; background:rgba(12,12,18,0.85); backdrop-filter:blur(12px);
    border:1px solid var(--border-color); padding:0.45rem 0.65rem;
    border-radius:10px; text-align:center; min-width:80px; z-index:2;
}
.stat-symmetry { top:8%;  left:-15px; }
.stat-skin     { top:42%; left:-25px; }
.stat-jawline  { top:8%;  right:-15px; }
.stat-overall  { top:42%; right:-25px; border-color:rgba(212,242,59,0.35); }
.glow-box { box-shadow:0 0 25px rgba(212,242,59,0.12); }
.stat-label { font-size:clamp(0.45rem, 1.5vw, 0.65rem); color:var(--text-muted); margin-bottom:2px; }
.stat-value { font-size:clamp(0.85rem, 3vw, 1.4rem); font-weight:700; font-family:'Outfit'; line-height:1; }
.stat-desc  { font-size:clamp(0.45rem, 1.5vw, 0.65rem); }

.level-progress {
    background:var(--card-bg); border:1px solid var(--border-color);
    padding:0.6rem 0.9rem; border-radius:12px;
    display:flex; align-items:center; gap:0.6rem;
    margin:-15px auto 0 auto; z-index:3; width:100%; max-width:360px;
}
.level-icon { width:32px; height:32px; background:rgba(212,242,59,0.1); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.9rem; }
.level-info { flex:1; }
.level-text { font-size:clamp(0.7rem, 2vw, 0.95rem); }
.level-sub  { font-size:clamp(0.55rem, 1.5vw, 0.75rem); color:var(--text-muted); margin-bottom:3px; }
.progress-bar { width:100%; height:4px; background:var(--border-color); border-radius:2px; }
.progress-fill { height:100%; background:var(--primary-yellow); border-radius:2px; box-shadow:0 0 6px var(--primary-yellow); }

/* ======== FEATURES ======== */
.features-wrapper { position:relative; margin:6rem 0 5rem; }

.features {
    display:flex; justify-content:space-between; gap:0;
    background:var(--card-bg);
    border:1px solid var(--border-color); border-radius:20px; overflow:hidden;
}
.feature-box { flex:1; text-align:center; padding:1.5rem 1.2rem; border-right:1px solid var(--border-color); }
.feature-box:last-child { border-right:none; }
.feature-box i { font-size:1.4rem !important; margin-bottom:0.6rem !important; }
.feature-box h3 { font-size:0.9rem; margin-bottom:0.4rem; font-weight:700; }
.feature-box p  { font-size:0.75rem; color:var(--text-muted); line-height:1.5; }
.icon-yellow { color:var(--primary-yellow); }
.icon-green  { color:var(--primary-green); }
.icon-purple { color:#c484ff; }

/* ======== BENTO GRID FEATURES ======== */
.detailed-features { margin-top:2.6rem; margin-bottom:6rem; }
.header-pill { display:inline-block; border:1px solid rgba(212,242,59,0.3); color:var(--primary-yellow); font-size:0.8rem; font-weight:700; padding:0.5rem 1.4rem; border-radius:24px; letter-spacing:1px; margin-bottom:1.8rem; text-transform:uppercase; background:rgba(212,242,59,0.05); }
.spark-icon { font-size:2rem; margin-left:0.5rem; color:var(--primary-yellow); vertical-align:top; margin-top:-0.5rem; display:inline-block; }

.bento-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:1.5rem; width:100%; margin:0 auto; }
.bento-card {
    background:#0a0a0c; border:1px solid rgba(255,255,255,0.08); border-radius:16px;
    padding:clamp(1.5rem, 2vw, 2rem); position:relative; overflow:hidden; display:flex;
    transition:transform 0.3s ease, border-color 0.3s;
}
.bento-card:hover { border-color:rgba(255,255,255,0.2); }
.bento-span-2 { grid-column:span 2; }
.bento-span-3 { grid-column:span 3; }
.bento-span-4 { grid-column:span 4; }

.flex-row { flex-direction:row; align-items:center; }
.flex-col { flex-direction:column; }
.flex-col-reverse { flex-direction:column-reverse; }

.bento-content { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; flex:1; }
.bento-card h3 { font-size:1.1rem; margin-bottom:0.5rem; font-family:'Outfit',sans-serif; font-weight:700; color:#fff; }
.bento-card p { color:var(--text-muted); font-size:0.75rem; line-height:1.5; }

.feat-badge {
    align-self:flex-start; font-size:0.55rem; font-weight:700;
    padding:0.25rem 0.6rem; border-radius:12px; text-transform:uppercase; letter-spacing:1px;
    margin-bottom:0.8rem; display:flex; align-items:center; gap:0.3rem;
}
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 5px currentColor; }
.badge-active { background:rgba(157,227,38,0.1); color:var(--primary-green); border:1px solid rgba(157,227,38,0.2); }
.badge-upcoming { background:rgba(255,165,0,0.1); color:#ffa500; border:1px solid rgba(255,165,0,0.2); }
.badge-season { background:rgba(0,191,255,0.1); color:#00bfff; border:1px solid rgba(0,191,255,0.2); }
.badge-invite { background:rgba(138,43,226,0.15); color:#c484ff; border:1px solid rgba(138,43,226,0.3); }

/* Buttons & Icons */
.bento-arrow-btn {
    display:none; /* Hidden as per request */
    position:absolute; bottom:1.5rem; right:1.5rem; width:36px; height:36px;
    border-radius:50%; background:transparent; border:1px solid rgba(212,242,59,0.3);
    color:var(--primary-yellow); align-items:center; justify-content:center;
    transition:all 0.3s; z-index:5; cursor:pointer;
}
.bento-arrow-btn:hover { background:var(--primary-yellow); color:#000; }

.feat-icons-row { display:flex; gap:0.5rem; margin-top:1.5rem; align-items:center; }
.f-icon { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); font-size:0.9rem; border:1px solid rgba(255,255,255,0.05); }
.more-badge { font-size:0.7rem; color:rgba(255,255,255,0.5); padding:0.4rem 0.8rem; border-radius:15px; border:1px solid rgba(255,255,255,0.1); margin-left:0.5rem; }

/* Images & Backgrounds */
.bento-img { object-fit:contain; z-index:1; }
.bento-img-left { width:clamp(100px, 12vw, 180px); margin-right:clamp(0.8rem, 1.5vw, 1.5rem); }
.bento-img-right { width:clamp(90px, 10vw, 160px); margin-left:clamp(0.8rem, 1.5vw, 1.5rem); }
.bento-img-overlay { width:clamp(80px, 10vw, 140px); margin:0 auto 1rem auto; display:block; filter:drop-shadow(0 10px 20px rgba(157,227,38,0.2)); }
.bento-globe { width:clamp(100px, 12vw, 180px); margin:-10px auto 10px auto; display:block; filter:drop-shadow(0 0 30px rgba(138,43,226,0.4)); }

.bento-avatars { display:flex; justify-content:center; align-items:center; margin-top:auto; padding-bottom:1rem; }
.bento-avatars img { width:24px; height:24px; border-radius:50%; border:2px solid #0a0a0c; margin-left:-6px; }
.bento-avatars img:first-child { margin-left:0; }
.bento-avatars span { margin-left:8px; font-size:0.7rem; font-weight:700; color:var(--text-purple); }

/* Gradients */
.bento-bg-face { background:linear-gradient(135deg, rgba(138,43,226,0.08) 0%, #0a0a0c 40%); }
.bento-bg-workout { background:linear-gradient(180deg, rgba(157,227,38,0.05) 0%, #0a0a0c 100%); }
.bento-bg-leaderboard { background:radial-gradient(circle at center, rgba(138,43,226,0.1) 0%, #0a0a0c 70%); }
.bento-bg-arena { background:linear-gradient(135deg, #0a0a0c 40%, rgba(255,215,0,0.08) 100%); }
.bento-bg-rewards { background:linear-gradient(90deg, #0a0a0c 40%, rgba(0,191,255,0.1) 100%); }
.bento-bg-vip { background:linear-gradient(90deg, #0a0a0c 40%, rgba(138,43,226,0.1) 100%); }
.bento-bg-hidden { background:linear-gradient(90deg, rgba(138,43,226,0.05) 0%, #0a0a0c 40%); }
.bento-bg-hidden-alt { background:linear-gradient(90deg, rgba(0,191,255,0.05) 0%, #0a0a0c 40%); }

/* Prevent text overlapping absolute images on desktop */
.bento-bg-arena .bento-content { padding-right: 140px; }
.bento-bg-rewards .bento-content { padding-right: 160px; }
.bento-bg-vip .bento-content { padding-right: 160px; }

/* Blurred Text */
.blurred-text-block { filter:blur(6.5px); opacity:0.6; user-select:none; pointer-events:none; transition:filter 0.3s ease, opacity 0.3s ease; }
.bento-card:hover .blurred-text-block { filter:blur(8px); opacity:0.4; }

/* Scanners / Decorations */
.bento-img-container { position:relative; }
.corner-bracket { position:absolute; width:15px; height:15px; border:2px solid #c484ff; }
.top-left { top:0; left:0; border-right:none; border-bottom:none; border-top-left-radius:4px; }
.top-right { top:0; right:0; border-left:none; border-bottom:none; border-top-right-radius:4px; }
.bottom-left { bottom:0; left:0; border-right:none; border-top:none; border-bottom-left-radius:4px; }
.bottom-right { bottom:0; right:0; border-left:none; border-top:none; border-bottom-right-radius:4px; }

/* Graph */
.graph-visual { display:flex; align-items:flex-end; gap:4px; height:40px; margin-top:1.5rem; margin-bottom:0.5rem; position:relative; width:100px; border-bottom:1px solid rgba(255,255,255,0.1); }
.graph-visual::before { content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(157,227,38,0.2)); clip-path:polygon(0 100%, 20% 60%, 50% 80%, 100% 20%, 100% 100%); }
.graph-visual::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:100%; background:transparent; border-bottom:2px solid var(--primary-green); clip-path:polygon(0 100%, 20% 60%, 50% 80%, 100% 20%, 100% 100%); }
.bento-bottom-img { display:flex; gap:1rem; align-items:flex-end; }

/* ======== STATS ROW ======== */
.stats-row {
    display:flex; gap:0; margin-bottom:6rem;
    background:var(--card-bg); border:1px solid var(--border-color); border-radius:20px; overflow:hidden;
}
.stats-row-item {
    flex:1; text-align:center; padding:1.5rem 1.2rem;
    border-right:1px solid var(--border-color);
    display:flex; flex-direction:column; align-items:center;
}
.stats-row-item:last-child { border-right:none; }
.icon-h    { font-size:1.4rem; color:var(--primary-yellow); margin-bottom:0.4rem; }
.stat-num  { font-size:1.6rem; font-weight:700; font-family:'Outfit'; margin-bottom:2px; }
.stat-text { font-size:0.85rem; color:var(--text-muted); }

/* ======== DASHBOARD ROW ======== */
.dashboard-row { display:grid; grid-template-columns:1fr 1.3fr 0.75fr; gap:2rem; margin-bottom:6rem; }
.card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:16px; padding:1.5rem 1.2rem; display:flex; flex-direction:column; }
.card h2 { font-size:1.1rem; margin-bottom:0.8rem; font-family:'Outfit'; font-weight:700; }
.link-small { font-size:0.85rem; color:var(--text-muted); text-decoration:none; }
.link-small:hover { color:var(--text-main); }

/* Challenges */
.challenge-list { display:flex; flex-direction:column; gap:0.35rem; }
.challenge-item {
    display:flex; align-items:center; gap:0.6rem; padding:0.3rem 0.75rem;
    background:rgba(255,255,255,0.02); border:1px solid var(--border-color); border-radius:8px;
}
.ch-icon { width:28px; height:28px; background:rgba(255,255,255,0.04); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.75rem; }
.ch-info { flex:1; }
.ch-info h4   { font-size:0.65rem; margin-bottom:0.1rem; font-weight:600; }
.ch-info span { font-size:0.55rem; color:var(--text-muted); }

/* Leaderboard list */
.lb-list { display:flex; flex-direction:column; gap:0.25rem; }
.lb-row {
    display:flex; align-items:center; gap:0.6rem; padding:0.25rem 0.75rem;
    border-radius:8px; border:1px solid transparent;
}
.lb-row-you {
    background:rgba(212,242,59,0.07);
    border-color:rgba(212,242,59,0.2) !important;
}
.lb-row-muted { opacity:0.7; }
.lb-crown { font-size:0.75rem; flex-shrink:0; }
.lb-rank  { font-size:0.65rem; font-weight:700; color:var(--text-muted); width:14px; flex-shrink:0; text-align:center; }
.lb-avatar { width:24px; height:24px; border-radius:50%; border:2px solid var(--border-color); object-fit:cover; flex-shrink:0; }
.border-yellow { border-color:var(--primary-yellow) !important; }
.lb-info { flex:1; display:flex; flex-direction:column; }
.lb-name { font-size:0.65rem; font-weight:600; }
.lb-sub  { font-size:0.55rem; color:var(--text-muted); }
.you-tag { color:var(--text-muted); font-size:0.55rem; font-weight:400; }
.lb-score { font-family:'Outfit'; font-weight:700; font-size:0.85rem; }

/* Update card */
.update-card { justify-content:center; align-items:center; overflow:hidden; }
.coming-soon { font-size:0.55rem; color:var(--text-muted); letter-spacing:2px; margin-bottom:0.1rem; }
.update-card p { font-size:0.65rem; color:var(--text-muted); margin-bottom:0.6rem; line-height:1.5; text-align:center; }
.mt-auto { margin-top:auto; }

/* ======== APP CTA BANNER ======== */
.app-cta {
    display:flex; align-items:center;
    background:linear-gradient(90deg, #070710, #0d0d18);
    border:1px solid var(--border-color); border-radius:20px;
    min-height:180px; overflow:visible; position:relative; margin-bottom:6rem;
}
.app-mockup {
    flex:0 0 160px; height:100%; position:relative; display:flex;
    align-items:flex-end; justify-content:center; flex-shrink:0;
}
.app-mockup::before {
    content:''; position:absolute; width:120px; height:120px; bottom:-10px; left:20px;
    background:radial-gradient(circle, rgba(212,242,59,0.12) 0%, transparent 70%);
    border-radius:50%; z-index:1; pointer-events:none;
}
.phone-ui {
    position:absolute; bottom:-15px; left:15px; width:190px; height:390px;
    background:#08080f; border-radius:32px; border:5px solid #1a1a24;
    box-shadow:0 25px 50px rgba(0,0,0,0.7), 0 0 0 1px #222230, -6px 10px 25px rgba(212,242,59,0.06);
    transform:perspective(800px) rotateY(6deg) rotateX(2deg) scale(0.32);
    transform-origin:bottom center;
    overflow:hidden; display:flex; flex-direction:column; z-index:10;
}
.phone-notch {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:70px; height:16px; background:#1a1a24; border-radius:0 0 10px 10px; z-index:5;
}
.phone-top-bar {
    display:flex; justify-content:space-between; padding:7px 14px 0;
    font-size:0.58rem; color:rgba(255,255,255,0.55); z-index:2; position:relative;
}
.phone-icons { display:flex; gap:3px; font-size:0.5rem; }
.phone-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px; z-index:2; position:relative; color:var(--primary-yellow); font-size:0.78rem;
}
.phone-logo-text { font-family:'Outfit'; font-weight:700; letter-spacing:2px; font-size:0.88rem; }
.phone-body { flex:1; display:flex; flex-direction:column; padding:0 14px 14px; }
.phone-ring-wrap { flex:1; display:flex; justify-content:center; align-items:center; }
.phone-ring { position:relative; width:130px; height:130px; display:flex; justify-content:center; align-items:center; }
.ring-svg { position:absolute; top:0; left:0; width:100%; height:100%; filter:drop-shadow(0 0 8px rgba(212,242,59,0.5)); }
.ring-inner { display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.ring-label { font-size:0.58rem; color:var(--text-muted); margin-bottom:2px; }
.ring-score { font-size:2.8rem; font-family:'Outfit'; font-weight:800; line-height:1; color:var(--primary-yellow); text-shadow:0 0 15px rgba(212,242,59,0.6); }
.ring-desc  { font-size:0.6rem; color:var(--primary-yellow); }
.phone-stats-row {
    display:grid; grid-template-columns:1fr 1fr 1fr;
    border-top:1px solid rgba(255,255,255,0.06); padding-top:10px; gap:2px;
}
.p-stat { display:flex; flex-direction:column; align-items:center; text-align:center; }
.p-stat-mid { border-left:1px solid rgba(255,255,255,0.06); border-right:1px solid rgba(255,255,255,0.06); }
.p-label { font-size:0.52rem; color:var(--text-muted); margin-bottom:2px; }
.p-val   { font-size:1rem; font-family:'Outfit'; font-weight:700; color:var(--primary-yellow); line-height:1; }
.p-desc  { font-size:0.48rem; color:var(--primary-yellow); }

.cta-content { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:2rem; z-index:1; padding:2rem 2.5rem 2rem 0; }
.cta-text { flex:1; min-width: 300px; }
.cta-text .hero-title { font-size:2.2rem; margin-bottom:0.8rem; }
.cta-text .hero-subtitle { font-size:1rem; color:var(--text-muted); line-height:1.5; max-width:none; margin-bottom:0; }
.cta-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:1.2rem; flex-shrink:0; }
.btn-journey { padding:0.9rem 1.8rem; font-size:0.95rem; border-radius:28px; display:flex; align-items:center; gap:0.6rem; white-space:nowrap; }
.store-buttons { display:flex; gap:0.8rem; }
.store-btn { height:40px; cursor:pointer; border-radius:8px; }
.cta-bg-face {
    position:absolute; right:0; top:0; bottom:0; width:50%;
    background:url('../assets/purple_face.png') no-repeat center center;
    background-size:cover; opacity:0.9; mix-blend-mode:screen;
    mask-image:radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 20%, transparent 70%);
    pointer-events:none; border-radius:0 16px 16px 0;
}

/* ======== FOUNDERS CIRCLE ======== */
.pricing-header h2 { font-size:clamp(1.6rem, 4.5vw, 2.6rem); margin-bottom:0.5rem; font-family:'Outfit',sans-serif; font-weight:800; line-height:1.1; }
.pricing-header p { font-size:clamp(0.8rem, 2vw, 1.1rem); color:var(--text-muted); max-width:600px; margin:0 auto; }
.pricing-tiers { display:flex; gap:1.2rem; flex-wrap:nowrap; margin-bottom:2rem; width:100%; justify-content:center; }
.tier-card { flex:1; background:var(--card-bg); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:1.5rem; text-align:left; position:relative; display:flex; flex-direction:column; min-width:210px; transition:transform 0.3s, border-color 0.3s; }
.tier-card:hover { transform:translateY(-5px); }

/* Flame Animations */
@keyframes flame-green {
  20%, 80% { box-shadow: 0 0 10px rgba(157,227,38,0.1), inset 0 -5px 10px rgba(157,227,38,0.05); border-color:rgba(157,227,38,0.2); }
  0%, 100% { box-shadow: 0 0 25px rgba(157,227,38,0.6), 0 -10px 45px rgba(157,227,38,0.4), inset 0 -35px 45px rgba(157,227,38,0.3); border-color:rgba(157,227,38,0.8); }
}
@keyframes flame-blue {
  0%, 40%, 100% { box-shadow: 0 0 10px rgba(0,191,255,0.1), inset 0 -5px 10px rgba(0,191,255,0.05); border-color:rgba(0,191,255,0.2); }
  20% { box-shadow: 0 0 25px rgba(0,191,255,0.6), 0 -10px 45px rgba(0,191,255,0.4), inset 0 -35px 45px rgba(0,191,255,0.3); border-color:rgba(0,191,255,0.8); }
}
@keyframes flame-purple {
  0%, 20%, 60%, 100% { box-shadow: 0 0 15px rgba(138,43,226,0.15), inset 0 -5px 10px rgba(138,43,226,0.1); border-color:rgba(138,43,226,0.3); }
  40% { box-shadow: 0 0 35px rgba(138,43,226,0.8), 0 -20px 65px rgba(138,43,226,0.5), inset 0 -55px 65px rgba(138,43,226,0.4); border-color:rgba(138,43,226,1); }
}
@keyframes flame-orange {
  0%, 40%, 80%, 100% { box-shadow: 0 0 10px rgba(255,140,0,0.1), inset 0 -5px 10px rgba(255,140,0,0.05); border-color:rgba(255,140,0,0.2); }
  60% { box-shadow: 0 0 25px rgba(255,140,0,0.6), 0 -10px 45px rgba(255,140,0,0.4), inset 0 -35px 45px rgba(255,140,0,0.3); border-color:rgba(255,140,0,0.8); }
}
@keyframes flame-red {
  0%, 60%, 100% { box-shadow: 0 0 15px rgba(255,69,0,0.15), inset 0 -5px 10px rgba(255,69,0,0.1); border-color:rgba(255,69,0,0.3); }
  80% { box-shadow: 0 0 35px rgba(255,69,0,0.7), 0 -20px 65px rgba(255,69,0,0.5), inset 0 -55px 65px rgba(255,69,0,0.4); border-color:rgba(255,69,0,0.9); }
}

/* Colors per tier */
.tier-green { animation: flame-green 5s infinite ease-in-out; }
.tier-green .tier-icon i, .tier-green .tier-features i { color:var(--primary-green); }
.tier-green .price-val { color:var(--primary-green); }
.tier-green .btn-tier { border:1px solid rgba(157,227,38,0.4); color:var(--primary-green); }
.tier-green .btn-tier:hover { background:rgba(157,227,38,0.1); }

.tier-blue { animation: flame-blue 5s infinite ease-in-out; }
.tier-blue .tier-icon i, .tier-blue .tier-features i { color:#00bfff; }
.tier-blue .price-val { color:#00bfff; }
.tier-blue .btn-tier { border:1px solid rgba(0,191,255,0.4); color:#00bfff; }
.tier-blue .btn-tier:hover { background:rgba(0,191,255,0.1); }

.tier-purple { animation: flame-purple 5s infinite ease-in-out; transform:scale(1.02); z-index:2; }
.tier-purple:hover { transform:scale(1.02) translateY(-5px); }
.tier-purple .tier-icon i, .tier-purple .tier-features i { color:#c484ff; }
.tier-purple .price-val { color:#c484ff; }
.tier-purple .btn-tier { background:rgba(138,43,226,0.15); border:1px solid rgba(138,43,226,0.5); color:#c484ff; }
.tier-purple .btn-tier:hover { background:rgba(138,43,226,0.3); }

.tier-orange { animation: flame-orange 5s infinite ease-in-out; }
.tier-orange .tier-icon i, .tier-orange .tier-features i { color:#ff8c00; }
.tier-orange .price-val { color:#ff8c00; }
.tier-orange .btn-tier { border:1px solid rgba(255,140,0,0.4); color:#ff8c00; }
.tier-orange .btn-tier:hover { background:rgba(255,140,0,0.1); }

.tier-red { animation: flame-red 5s infinite ease-in-out; }
.tier-red .tier-icon i, .tier-red .tier-features i { color:#ff4500; }
.tier-red .price-val { color:#ff4500; }
.tier-red .btn-tier { border:1px solid rgba(255,69,0,0.5); color:#ff4500; }
.tier-red .btn-tier:hover { background:rgba(255,69,0,0.15); }

.tier-head { display:flex; align-items:center; gap:0.8rem; margin-bottom:1rem; }
.tier-icon { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.tier-title-box h3 { font-size:1rem; font-family:'Outfit'; margin-bottom:0.1rem; }
.tier-title-box p { font-size:0.6rem; color:var(--text-muted); }
.tier-price { margin-bottom:1.5rem; }
.price-val { font-size:2rem; font-family:'Outfit'; font-weight:700; line-height:1; }
.price-mo { font-size:0.75rem; color:var(--text-muted); }

.tier-features { list-style:none; margin-bottom:1.5rem; flex:1; display:flex; flex-direction:column; gap:0.6rem; }
.tier-features li { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.7rem; color:rgba(255,255,255,0.8); line-height:1.4; }
.tier-features i { font-size:0.7rem; margin-top:0.2rem; }

.btn-tier { width:100%; background:transparent; padding:0.7rem; border-radius:20px; font-weight:600; font-size:0.8rem; transition:all 0.3s; display:flex; justify-content:center; align-items:center; gap:0.5rem; }

.popular-badge, .limited-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:0.55rem; font-weight:700; padding:0.3rem 0.8rem; border-radius:12px; letter-spacing:1px; white-space:nowrap; }
.popular-badge { background:#8a2be2; color:#fff; box-shadow:0 0 15px rgba(138,43,226,0.6); }
.limited-badge { background:#ff4500; color:#fff; box-shadow:0 0 15px rgba(255,69,0,0.6); }

/* Info Bar */
.pricing-info-bar { display:flex; justify-content:space-between; align-items:center; background:#0a0a0f; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:1.5rem 2rem; margin-top:1rem; flex-wrap:wrap; gap:1.5rem; text-align:left; }
.info-items { display:flex; gap:2rem; flex:1; flex-wrap:wrap; justify-content:space-between; }
.info-item, .info-lock { display:flex; align-items:center; gap:0.8rem; }
.info-item i { font-size:1.4rem; color:rgba(255,255,255,0.4); }
.info-item h4, .info-lock h4 { font-size:0.8rem; font-weight:600; margin-bottom:0.1rem; }
.info-item p, .info-lock p { font-size:0.65rem; color:var(--text-muted); }
.info-lock { padding-left:2rem; border-left:1px solid rgba(255,255,255,0.08); }
.info-lock i { font-size:1.6rem; }

/* ======== FOOTER ======== */
footer {
    padding: 3rem 5% 2rem;
    background: #08080c;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 5rem;
    width: 100%;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    gap: 2rem;
}
.footer-left { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.footer-left .logo { margin-bottom: 0.2rem; }
.copyright { color: var(--text-muted); font-size: 0.85rem; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; flex: 1; }
.footer-links a { color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: all 0.3s ease; }
.footer-links a:hover { color: var(--primary-yellow); text-shadow: 0 0 10px rgba(212,242,59,0.3); }
.social-icons { display: flex; gap: 1rem; align-items: center; }
.social-icons a { 
    color: rgba(255,255,255,0.6); 
    font-size: 1.1rem; 
    transition: all 0.3s ease;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
}
.social-icons a:hover { 
    color: var(--primary-yellow); 
    background: rgba(212,242,59,0.1);
    border-color: rgba(212,242,59,0.3);
    transform: translateY(-4px);
}

/* ======== RESPONSIVE ======== */
@media (min-width:1600px) {
    .face-container, .level-progress { max-width:420px; }
    .bg-glow-purple { width:360px; height:360px; }
    .app-cta { min-height:160px; }
    .phone-ui { transform:perspective(800px) rotateY(6deg) rotateX(2deg) scale(0.38); transform-origin:bottom center; }
}

@media (min-width:1920px) {
    .face-container, .level-progress { max-width:480px; }
    .bg-glow-purple { width:420px; height:420px; }
    .app-cta { min-height:180px; }
    .phone-ui { transform:perspective(800px) rotateY(6deg) rotateX(2deg) scale(0.44); transform-origin:bottom center; }
}

@media (max-width:1100px) {
    .navbar { width:95%; padding:0.6rem 1.2rem; }
    .nav-links { gap: 1rem; }
    .nav-links a { font-size: 0.75rem !important; }
    .hero { grid-template-columns:1fr 1.2fr; }
    .dashboard-row { grid-template-columns:1fr 1fr; }
    .update-card { display:none; }
    .features .feature-box:last-child { border-right:none; }
    .stats-row-item:last-child { border-right:none; }
    .pricing-tiers { flex-wrap:wrap; }
    .tier-card { flex:1 1 45%; }
    .cta-content { flex-direction:column; align-items:flex-start; gap:1.5rem; }
    .cta-actions { flex-wrap:wrap; justify-content:flex-start; }
}

@media (max-width:860px) {
    .navbar { width:95%; top:1rem; padding:0.6rem 1rem; }
    .nav-links { 
        display:none; flex-direction:column; position:absolute; top:calc(100% + 15px); left:0; width:100%;
        background:rgba(14,14,20,0.95); backdrop-filter:blur(16px); border:1px solid var(--border-color);
        padding:1.5rem; gap:1.2rem; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
    }
    .nav-links.mobile-menu-active { display:flex; }
    .nav-links a { font-size:0.88rem; }
    .btn-hamburger { display:flex; align-items:center; justify-content:center; }
    .hero { grid-template-columns:1fr; gap:1.5rem; margin-top:1.5rem; }
    .hero-left { order:2; text-align:center; }
    .hero-center { order:1; }
    .hero-title { font-size:1.7rem; }
    .badge-ai { margin-left:auto; margin-right:auto; }
    .hero-subtitle { margin-left:auto; margin-right:auto; margin-bottom:1.5rem; font-size:0.9rem; }
    .hero-cta { flex-direction:row; flex-wrap:wrap; gap:0.75rem; justify-content:center; }
    .btn-primary, .btn-secondary { padding:0.55rem 1rem; font-size:0.7rem; border-radius:18px; }
    .hero-cta .btn-primary, .hero-cta .btn-secondary { align-self:auto; flex:1; justify-content:center; min-width:140px; }
    .social-proof { justify-content:center; }
    .face-container { max-width:360px; margin:0 auto; }
    .level-progress { max-width:360px; }
    .features-wrapper { margin:3rem 0; }
    .features { flex-wrap:nowrap; overflow-x:scroll; overflow-y:visible; border-radius:16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-behavior:smooth; scroll-snap-type:x mandatory; }
    .features::-webkit-scrollbar { display:none; }
    .feature-box { flex:0 0 calc(50% - 0.5px); min-width:calc(50% - 0.5px); border-right:1px solid var(--border-color); border-bottom:none; padding:1.2rem 0.8rem; scroll-snap-align:start; }
    .feature-box h3 { font-size:0.7rem; }
    .feature-box p  { font-size:0.62rem; }
    .feature-box i  { font-size:1.1rem !important; margin-bottom:0.4rem !important; }
    .feature-box:last-child { border-right:none; }
    
    .bento-grid { grid-template-columns:repeat(2, 1fr); gap:1rem; }
    .bento-span-2, .bento-span-3, .bento-span-4 { grid-column:span 2; }
    
    .detailed-features .bento-card:nth-child(3),
    .detailed-features .bento-card:nth-child(4),
    .detailed-features .bento-card:nth-child(8),
    .detailed-features .bento-card:nth-child(9) { grid-column:span 1; }
    
    .bento-card { padding:1.2rem; }
    
    /* Keep flex-row horizontal but adjust sizes */
    .flex-row { flex-direction:row; align-items:center; }
    
    /* Face Scan Card adjustments */
    .bento-bg-face .bento-img-container { width: 35%; flex-shrink: 0; margin-right: 0.75rem; margin-bottom: 0; align-self: center; }
    .bento-bg-face .bento-img-left { width: 100%; max-width: 140px; margin: 0; display: block; }
    .bento-bg-face .bento-content { min-width: 0; }
    .bento-bg-face h3 { font-size: clamp(0.85rem, 3.5vw, 1.1rem); }
    .bento-bg-face p { font-size: clamp(0.6rem, 2.5vw, 0.75rem); line-height: 1.4; }
    .feat-icons-row { flex-wrap: wrap; gap: 0.3rem; margin-top: 1rem; }
    .f-icon { width: 26px; height: 26px; font-size: 0.7rem; }
    .more-badge { font-size: 0.6rem; padding: 0.3rem 0.5rem; margin-left: 0; }
    
    /* Workout Card adjustments */
    .bento-card.bento-bg-workout { flex-direction: row-reverse; align-items: center; justify-content: space-between; }
    .bento-card.bento-bg-workout .bento-content { margin-right: 1rem; }
    .bento-card.bento-bg-workout .bento-img-overlay { margin: 0; width: clamp(80px, 20vw, 120px); }
    
    /* Chat & Profile Cards adjustments */
    .detailed-features .bento-card:nth-child(8),
    .detailed-features .bento-card:nth-child(9) { flex-direction: column; align-items: center; text-align: center; }
    .detailed-features .bento-card:nth-child(8) .bento-img,
    .detailed-features .bento-card:nth-child(9) .bento-img { width: 75px !important; margin: 0 auto 1rem auto !important; display: block; }
    .detailed-features .bento-card:nth-child(8) .feat-badge,
    .detailed-features .bento-card:nth-child(9) .feat-badge { align-self: center; margin-bottom: 0.8rem; }
    
    /* Text sizing for half-width cards */
    .detailed-features .bento-card:nth-child(3) h3, .detailed-features .bento-card:nth-child(4) h3,
    .detailed-features .bento-card:nth-child(8) h3, .detailed-features .bento-card:nth-child(9) h3 { font-size: 0.8rem; margin-bottom: 0.3rem; }
    .detailed-features .bento-card:nth-child(3) p, .detailed-features .bento-card:nth-child(4) p { font-size: 0.6rem; }
    
    /* Prevent text overlapping absolute images */
    .bento-bg-arena .bento-content { padding-right: 110px; }
    .bento-bg-rewards .bento-content { padding-right: 110px; }
    .bento-bg-vip .bento-content { padding-right: 120px; }
    
    /* Rewards and VIP image adjustments */
    .bento-card.bento-bg-rewards .bento-img,
    .bento-card.bento-bg-vip .bento-img { height: 90px !important; bottom: -10px !important; right: -10px !important; }
    
    /* Reset margins for mobile images */
    .bento-img-left { margin-right: 1rem; width: 100px; display: block; }
    .bento-img-right { margin-left: 1rem; width: 100px; display: block; }
    .bento-img-container { align-self: center; margin-bottom: 0; }
    .stats-row { flex-wrap:wrap; }
    .stats-row-item { flex:0 0 50%; border-bottom:1px solid var(--border-color); }
    .stats-row-item:nth-child(even) { border-right:none; }
    .stats-row-item:nth-child(3) { border-right:1px solid var(--border-color); }
    .stats-row-item:last-child { flex:0 0 100%; border-bottom:none; border-right:none; }
    .dashboard-row { grid-template-columns:1fr; }
    .app-cta { height:auto; flex-direction:column; padding:2rem 1.5rem; gap:1.5rem; border-radius:16px; overflow:hidden; }
    .app-mockup { flex:none; height:280px; width:100%; position:relative; }
    .app-mockup::before { display:none; }
    .phone-ui { position:absolute; bottom:-20px; left:50%; transform:translateX(-50%) perspective(600px) rotateY(4deg); width:175px; height:360px; }
    .cta-content { padding:0; flex-direction:column; gap:1rem; text-align:center; width: 100%; max-width: 100%; box-sizing: border-box; }
    .cta-text { width: 100%; }
    .cta-text .hero-title { font-size:clamp(1.5rem, 6vw, 1.9rem); line-height: 1.2; word-wrap: break-word; }
    .cta-text .hero-subtitle { font-size:clamp(0.8rem, 3vw, 1rem); }
    .cta-actions { flex-direction:column; align-items:center; gap:1rem; width:100%; }
    .btn-journey { justify-content:center; width:100%; }
    .store-buttons { justify-content:center; flex-wrap:wrap; gap:0.8rem; }
    .cta-bg-face { display:none; }
    
    .pricing-tiers { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .tier-card { min-width:0; padding:1.2rem; }
    .tier-purple { grid-column:1 / -1; }
    .tier-purple:hover, .tier-purple { transform:none; }
    .tier-title-box h3 { font-size:0.9rem; }
    .tier-title-box p { font-size:0.55rem; }
    .price-val { font-size:1.6rem; }
    .tier-features li { font-size:0.65rem; gap:0.4rem; }
    .btn-tier { font-size:0.75rem; padding:0.6rem; }
    
    .pricing-info-bar { background:none; border:none; padding:0; flex-direction:column; gap:1rem; }
    .info-items { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; background:#0a0a0f; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:1.5rem; width:100%; }
    .info-item { align-items:flex-start; }
    .info-item i { font-size:1.2rem; margin-top:0.1rem; }
    .info-lock { background:#0a0a0f; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:1.5rem; width:100%; align-items:center; justify-content:center; }
    .footer-content { display:flex; flex-direction:column; gap:2.5rem; text-align:center; align-items:center; }
    .footer-left { align-items:center; }
    .footer-links { flex-wrap:wrap; justify-content:center; gap:1.2rem; }
    .social-icons { justify-content:center; }
}

@media (max-width:480px) {
    .container { padding:5.5rem 4% 1.5rem; }
    .face-container { max-width:300px; }
    .stat-badge { min-width:72px; padding:0.5rem; }
    .stat-symmetry { left:-8px; }
    .stat-skin     { left:-12px; }
    .stat-jawline  { right:-8px; }
    .stat-overall  { right:-12px; }
    .level-progress { max-width:300px; }
    .features { border-radius:12px; }
    .feature-box { flex:0 0 100%; border-right:none !important; }
    .stats-row-item { flex:0 0 50%; }
    .stats-row-item:nth-child(3) { border-right:1px solid var(--border-color); }
    .stats-row-item:nth-child(4) { border-right:none; }
    .phone-ui { width:160px; height:330px; }
    .ring-score { font-size:2.4rem; }
    .phone-ring { width:118px; height:118px; }
    .cta-text .hero-title { font-size:1.6rem; }
    .btn-journey { font-size:0.9rem; padding:0.8rem 1.4rem; }
    .footer-links a { font-size:0.78rem; }
}