/* =============================================
   0APPZ — FUTURISTIC DESIGN SYSTEM v2
   Glassmorphism + Neon Glow + Micro-animations
   ============================================= */

/* ===== CSS Custom Properties ===== */
:root {
    /* Core */
    --bg: #FAF8FC;
    --bg-card: rgba(255,255,255,0.72);
    --bg-card-solid: #FFFFFF;
    --bg-elevated: rgba(255,255,255,0.88);
    --bg-glass: rgba(255,255,255,0.55);
    --text: #1A1A2E;
    --text-secondary: #5A5A7A;
    --text-tertiary: #9090A8;

    /* Accent */
    --accent: #FF6B4A;
    --accent-glow: rgba(255,107,74,0.35);
    --accent-light: rgba(255,107,74,0.08);
    --accent-2: #7C5CFC;
    --accent-2-glow: rgba(124,92,252,0.3);
    --accent-3: #00D4AA;
    --accent-3-glow: rgba(0,212,170,0.25);

    /* Surfaces */
    --border: rgba(0,0,0,0.06);
    --border-glass: rgba(255,255,255,0.25);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 40px var(--accent-glow);

    /* Misc */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --max-w: 1120px;
    --header-h: 64px;
}

[data-theme="dark"] {
    --bg: #0A0A14;
    --bg-card: rgba(20,20,40,0.72);
    --bg-card-solid: #141428;
    --bg-elevated: rgba(22,22,44,0.88);
    --bg-glass: rgba(16,16,32,0.6);
    --text: #E8E8F0;
    --text-secondary: #9898B0;
    --text-tertiary: #686888;
    --accent: #FF7B5C;
    --accent-light: rgba(255,123,92,0.12);
    --border: rgba(255,255,255,0.06);
    --border-glass: rgba(255,255,255,0.08);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
}

/* ===== Reset ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
body{
    font-family:var(--font);
    font-size:1rem;
    line-height:1.6;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
    overflow-x:hidden;
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto;}}

/* ===== Selection & Scrollbar ===== */
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}

/* ===== Container ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;}
.section{padding:100px 0;position:relative;}
.section-alt{background:var(--bg-alt, rgba(0,0,0,0.015));}
[data-theme="dark"] .section-alt{background:rgba(255,255,255,0.01);}

.section-head{margin-bottom:56px;text-align:center;}
.section-badge{
    display:inline-flex;align-items:center;gap:8px;
    font-size:0.8rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.1em;color:var(--accent);
    background:var(--accent-light);
    padding:6px 16px;border-radius:100px;
    margin-bottom:16px;
}
.section-title{font-size:2.4rem;font-weight:800;letter-spacing:-0.03em;margin-bottom:12px;line-height:1.15;}
.section-desc{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin:0 auto;}

/* ===== HEADER — Glassmorphism Floating Bar ===== */
.site-header{
    position:fixed;top:16px;left:50%;transform:translateX(-50%);
    z-index:1000;
    width:calc(100% - 32px);max-width:var(--max-w);
    background:var(--bg-glass);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    padding:0 8px;
    height:var(--header-h);
    display:flex;align-items:center;justify-content:space-between;
    transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow:0 2px 20px rgba(0,0,0,0.04);
}
[data-theme="dark"] .site-header{box-shadow:0 2px 24px rgba(0,0,0,0.4);}
.site-header.header-scrolled{
    border-radius:var(--radius);
    box-shadow:0 4px 32px rgba(0,0,0,0.08);
    background:var(--bg-elevated);
}
[data-theme="dark"] .site-header.header-scrolled{box-shadow:0 4px 40px rgba(0,0,0,0.5);}

/* ===== Logo ===== */
.header-logo{
    display:flex;align-items:center;gap:8px;
    font-weight:800;font-size:1.15rem;text-decoration:none;
    color:var(--text);letter-spacing:-0.02em;
    padding:8px 4px;flex-shrink:0;
}
.header-logo-icon{
    width:34px;height:34px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.1rem;
    box-shadow:0 4px 12px var(--accent-glow);
}

/* ===== Category Pills (scrollable row) ===== */
.nav-pills-row{
    display:flex;align-items:center;gap:6px;
    overflow-x:auto;scrollbar-width:none;
    mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
    padding:0 4px;
}
.nav-pills-row::-webkit-scrollbar{display:none;}
.nav-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 14px;
    background:transparent;
    border:1.5px solid var(--border);
    border-radius:100px;
    font-family:var(--font);font-size:0.82rem;font-weight:600;
    color:var(--text-secondary);cursor:pointer;
    white-space:nowrap;transition:all 0.2s;
    flex-shrink:0;
}
.nav-pill:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-light);
    box-shadow:0 0 20px var(--accent-glow);
}
.nav-pill.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    box-shadow:0 4px 16px var(--accent-glow);
}
.pill-icon{font-size:0.95rem;}
.pill-label{font-weight:600;}
.pill-count{
    font-size:0.7rem;background:rgba(0,0,0,0.08);padding:1px 7px;border-radius:100px;
    font-weight:700;
}
[data-theme="dark"] .pill-count{background:rgba(255,255,255,0.1);}
.nav-pill.active .pill-count{background:rgba(255,255,255,0.2);}

/* ===== Header Actions ===== */
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.header-action-btn{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:1.5px solid var(--border);
    border-radius:50%;cursor:pointer;
    color:var(--text-secondary);font-size:1rem;
    transition:all 0.2s;
}
.header-action-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-light);
    box-shadow:0 0 16px var(--accent-glow);
}
.lang-btn{
    width:auto;border-radius:100px;padding:0 12px;gap:5px;
    font-family:var(--font);font-size:0.82rem;font-weight:600;
}
.lang-btn .lang-arrow{font-size:0.55rem;transition:transform 0.2s;}

/* Browse button */
.browse-btn{
    width:auto;border-radius:100px;padding:0 16px;gap:6px;
    font-family:var(--font);font-size:0.82rem;font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;border:none;
    box-shadow:0 4px 16px var(--accent-glow);
}
.browse-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow);}
.browse-icon{display:none;}

/* ===== MEGA PANEL — Full-width Glass Dropdown ===== */
.mega-overlay{
    position:fixed;inset:0;z-index:998;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;visibility:hidden;
    transition:opacity 0.3s,visibility 0.3s;
}
.mega-overlay.active{opacity:1;visibility:visible;}

.mega-panel{
    position:fixed;top:calc(var(--header-h) + 24px);
    left:50%;transform:translateX(-50%) translateY(-12px);
    z-index:999;
    width:calc(100% - 32px);max-width:var(--max-w);
    max-height:calc(100vh - var(--header-h) - 56px);
    background:var(--bg-elevated);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    box-shadow:0 16px 64px rgba(0,0,0,0.12);
    opacity:0;visibility:hidden;
    transition:opacity 0.3s,transform 0.35s cubic-bezier(0.16,1,0.3,1),visibility 0.3s;
    overflow:hidden;
    display:flex;flex-direction:column;
}
[data-theme="dark"] .mega-panel{box-shadow:0 16px 64px rgba(0,0,0,0.5);}
.mega-panel.active{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

.mega-inner{display:flex;flex-direction:column;overflow:hidden;height:100%;}
.mega-header{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 24px 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.mega-title{font-weight:700;font-size:1rem;white-space:nowrap;}
.mega-search-wrap{
    display:flex;align-items:center;gap:8px;
    background:var(--bg-glass);
    border:1.5px solid var(--border);
    border-radius:100px;
    padding:8px 16px;
    flex:1;max-width:320px;
    transition:border-color 0.2s,box-shadow 0.2s;
}
.mega-search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.mega-search-icon{color:var(--text-tertiary);flex-shrink:0;}
.mega-search{
    border:none;background:transparent;font-family:var(--font);
    font-size:0.9rem;color:var(--text);outline:none;width:100%;
}
.mega-search::placeholder{color:var(--text-tertiary);}

.mega-body{flex:1;overflow-y:auto;padding:16px 24px 8px;}
.mega-cat-section{margin-bottom:20px;}
.mega-cat-head{
    display:flex;align-items:center;gap:8px;
    margin-bottom:12px;font-weight:700;font-size:0.82rem;
    text-transform:uppercase;letter-spacing:0.06em;
    color:var(--cat-color, var(--accent));
}
.mega-cat-icon{font-size:1.1rem;}
.mega-cat-count{font-size:0.7rem;color:var(--text-tertiary);font-weight:500;margin-left:auto;}
.mega-tool-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:10px;
}
.mega-tool-card{
    display:flex;align-items:center;gap:14px;
    padding:14px 16px;
    border-radius:var(--radius);
    text-decoration:none;color:var(--text);
    transition:all 0.25s cubic-bezier(0.16,1,0.3,1);
    border:1px solid var(--border);
    background:var(--bg-glass);
    position:relative;overflow:hidden;
}
.mega-tool-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,var(--card-accent, var(--accent)),transparent 70%);
    opacity:0;transition:opacity 0.3s;
}
.mega-tool-card:hover::before{opacity:0.06;}
.mega-tool-card:hover{
    border-color:var(--card-accent, var(--accent));
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(0,0,0,0.08),0 0 0 1px var(--card-accent, var(--accent)) inset;
}
.mega-tool-icon{
    width:44px;height:44px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:1.7rem;border-radius:var(--radius-sm);
    background:var(--accent-light);
    border:1px solid var(--border);
}
.mega-tool-card:hover .mega-tool-icon{
    background:linear-gradient(135deg,var(--card-accent, var(--accent)),var(--accent-2));
    color:#fff;
}
.mega-tool-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative;z-index:1;}
.mega-tool-name{font-weight:700;font-size:0.9rem;display:block;line-height:1.2;}
.mega-tool-desc{font-size:0.75rem;color:var(--text-tertiary);display:block;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mega-tool-arrow{
    font-size:0.9rem;color:var(--text-tertiary);
    transition:all 0.25s;flex-shrink:0;position:relative;z-index:1;
    opacity:0.5;
}
.mega-tool-card:hover .mega-tool-arrow{
    color:var(--card-accent, var(--accent));
    transform:translateX(3px);opacity:1;
}

.mega-footer{
    padding:12px 24px;
    border-top:1px solid var(--border);
    flex-shrink:0;
}
.mega-footer-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:0.85rem;}

.mega-no-results{
    text-align:center;padding:40px 20px;
    color:var(--text-tertiary);
}
.mega-no-icon{font-size:3rem;display:block;margin-bottom:12px;}
.mega-no-text{font-size:1rem;}

/* ===== Language Dropdown ===== */
.lang-dropdown{
    position:fixed;z-index:1002;
    background:var(--bg-elevated);
    backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
    border:1px solid var(--border-glass);
    border-radius:var(--radius);
    padding:8px;min-width:200px;
    box-shadow:0 12px 48px rgba(0,0,0,0.12);
    opacity:0;visibility:hidden;
    transform:translateY(-8px);
    transition:all 0.25s;
}
.lang-dropdown.active{opacity:1;visibility:visible;transform:translateY(0);}
.lang-dropdown a{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:var(--radius-sm);
    color:var(--text);text-decoration:none;font-size:0.9rem;font-weight:500;
    transition:all 0.15s;
}
.lang-dropdown a:hover{background:var(--accent-light);color:var(--accent);}
.lang-dropdown a.lang-link-active{background:var(--accent-light);color:var(--accent);font-weight:700;}
.lang-dropdown a.lang-link-active::after{content:"✓";margin-left:auto;font-size:0.85rem;font-weight:700;}
.lang-flag{font-size:1.2rem;}

/* ===== HERO ===== */
.hero-section{
    padding:160px 0 80px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,var(--bg) 0%,rgba(124,92,252,0.03) 50%,var(--bg) 100%);
}
.hero-bg-orb{
    position:absolute;border-radius:50%;pointer-events:none;
    filter:blur(80px);opacity:0.4;
}
.hero-bg-orb-1{
    width:500px;height:500px;
    background:var(--accent-glow);
    top:-15%;right:-10%;
    animation:orbFloat 8s ease-in-out infinite;
}
.hero-bg-orb-2{
    width:350px;height:350px;
    background:var(--accent-2-glow);
    bottom:-20%;left:-8%;
    animation:orbFloat 10s ease-in-out infinite reverse;
}
.hero-bg-orb-3{
    width:200px;height:200px;
    background:var(--accent-3-glow);
    top:40%;left:50%;
    animation:orbFloat 7s ease-in-out 2s infinite;
}
@keyframes orbFloat{
    0%,100%{transform:translate(0,0) scale(1);}
    33%{transform:translate(30px,-30px) scale(1.05);}
    66%{transform:translate(-20px,20px) scale(0.95);}
}

.hero-section .container{position:relative;z-index:1;text-align:center;}
.hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--bg-elevated);
    border:1px solid var(--border-glass);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:8px 20px;border-radius:100px;
    font-size:0.85rem;font-weight:600;color:var(--text-secondary);
    margin-bottom:28px;
    animation:fadeInUp 0.6s ease both;
    box-shadow:var(--shadow-sm);
}
.hero-badge-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent-3);
    box-shadow:0 0 8px var(--accent-3-glow);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}

.hero-title{
    font-size:clamp(2.5rem,7vw,4.5rem);
    font-weight:900;letter-spacing:-0.04em;
    line-height:1.08;margin-bottom:24px;
    animation:fadeInUp 0.6s ease 0.1s both;
}
.hero-gradient-text{
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-sub{
    font-size:1.15rem;color:var(--text-secondary);
    max-width:520px;margin:0 auto 36px;line-height:1.65;
    animation:fadeInUp 0.6s ease 0.15s both;
}
.hero-actions{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    margin-bottom:40px;
    animation:fadeInUp 0.6s ease 0.2s both;
}
.hero-pills{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    animation:fadeInUp 0.6s ease 0.25s both;
}
.hero-pill{
    display:flex;align-items:center;gap:5px;
    font-size:0.85rem;color:var(--text-secondary);font-weight:500;
}
.hero-wave{
    position:absolute;bottom:-1px;left:0;right:0;line-height:0;
}
.hero-wave svg{width:100%;height:80px;}

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

/* ===== GLOW BUTTONS ===== */
.btn-glow{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 28px;
    font-family:var(--font);font-size:1rem;font-weight:700;
    text-decoration:none;border:none;border-radius:100px;
    cursor:pointer;transition:all 0.25s;
    position:relative;overflow:hidden;
}
.btn-glow-primary{
    background:linear-gradient(135deg,var(--accent),#FF8F6B);
    color:#fff;
    box-shadow:0 6px 24px var(--accent-glow);
}
.btn-glow-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 32px var(--accent-glow);
}
.btn-glow-ghost{
    background:var(--bg-elevated);
    color:var(--text);
    border:1.5px solid var(--border-glass);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-glow-ghost:hover{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 4px 20px var(--accent-glow);
}
.btn-glow-white{
    background:#fff;color:var(--accent);
    box-shadow:0 6px 24px rgba(0,0,0,0.1);
}
.btn-glow-white:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,0.15);}

/* ===== STEPS ===== */
.steps-row{
    display:flex;align-items:flex-start;justify-content:center;gap:0;
}
.step-card{
    flex:1;max-width:300px;text-align:center;padding:40px 28px;
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:all 0.3s;
    position:relative;overflow:hidden;
}
.step-card::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,var(--accent-glow),transparent);
    opacity:0;transition:opacity 0.3s;
}
.step-card:hover::before{opacity:0.05;}
.step-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--accent);
}
.step-num{
    font-size:3rem;font-weight:900;color:var(--accent);
    opacity:0.15;line-height:1;margin-bottom:8px;
}
.step-icon-wrap{
    width:60px;height:60px;margin:0 auto 16px;
    background:linear-gradient(135deg,var(--accent-light),transparent);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
}
.step-icon{font-size:1.8rem;}
.step-title{font-size:1.15rem;font-weight:700;margin-bottom:8px;}
.step-desc{font-size:0.9rem;color:var(--text-secondary);}
.step-connector{
    display:flex;align-items:center;padding-top:60px;flex-shrink:0;
}
.step-connector span{
    width:40px;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-radius:2px;
}

/* ===== HOME TOOL GRID ===== */
.home-cat-section{margin-bottom:40px;}
.home-cat-head{
    display:flex;align-items:center;gap:10px;
    margin-bottom:20px;
}
.home-cat-icon{font-size:1.4rem;}
.home-cat-label{
    font-size:0.8rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--cat-color, var(--accent));
}
.home-cat-head::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(90deg,var(--cat-color, var(--border)),transparent);
}
.home-tool-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:12px;
}
.home-tool-card{
    display:flex;flex-direction:column;
    padding:20px 18px;
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius);
    text-decoration:none;color:var(--text);
    transition:all 0.3s;
    position:relative;overflow:hidden;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    animation:cardAppear 0.5s ease both;
}
@keyframes cardAppear{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.htc-glow{
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,var(--glow-color),transparent 70%);
    opacity:0;transition:opacity 0.3s;
}
.home-tool-card:hover .htc-glow{opacity:0.12;}
.home-tool-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--glow-color, var(--accent));
}
.htc-icon{font-size:2.4rem;margin-bottom:12px;position:relative;z-index:1;}
.htc-name{font-weight:700;font-size:1rem;margin-bottom:4px;position:relative;z-index:1;}
.htc-desc{font-size:0.8rem;color:var(--text-secondary);margin-bottom:12px;position:relative;z-index:1;flex:1;}
.htc-cta{font-size:0.78rem;font-weight:700;color:var(--accent);position:relative;z-index:1;display:flex;align-items:center;gap:4px;}

/* ===== BENEFITS ===== */
.benefits-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.benefit-card{
    text-align:center;padding:36px 24px;
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:all 0.3s;
}
.benefit-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
    border-color:var(--accent);
}
.benefit-icon-ring{
    width:64px;height:64px;margin:0 auto 16px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent-light),transparent);
    display:flex;align-items:center;justify-content:center;
    font-size:1.8rem;
}
.benefit-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px;}
.benefit-card p{font-size:0.85rem;color:var(--text-secondary);}

/* ===== FAQ ===== */
.faq-list{max-width:640px;margin:0 auto;content-visibility:auto;contain-intrinsic-size:400px;}
.faq-item{
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius);
    margin-bottom:12px;overflow:hidden;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:border-color 0.2s,box-shadow 0.2s;
}
.faq-item[open]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-light);}
.faq-item summary{
    font-size:1rem;font-weight:600;padding:18px 24px;
    display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;list-style:none;gap:12px;
    transition:color 0.15s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--accent);}
.faq-indicator{
    font-size:1.4rem;color:var(--text-tertiary);
    transition:transform 0.3s;flex-shrink:0;
}
.faq-item[open] .faq-indicator{transform:rotate(45deg);color:var(--accent);}
.faq-answer{padding:0 24px 20px;color:var(--text-secondary);font-size:0.95rem;line-height:1.7;}

/* ===== CTA ===== */
.cta-section{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    text-align:center;padding:100px 0;color:#fff;
    content-visibility:auto;contain-intrinsic-size:300px;
}
.cta-glow{
    position:absolute;width:400px;height:400px;
    background:rgba(255,255,255,0.1);border-radius:50%;
    top:-30%;left:50%;transform:translateX(-50%);
    filter:blur(60px);
}
.cta-section .container{position:relative;z-index:1;}
.cta-title{font-size:2.2rem;font-weight:800;margin-bottom:16px;}
.cta-desc{font-size:1.1rem;opacity:0.9;margin-bottom:32px;}

/* ===== FOOTER ===== */
.site-footer{
    border-top:1px solid var(--border);
    padding:56px 0 32px;
    content-visibility:auto;contain-intrinsic-size:400px;
}
.footer-grid{
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;
    margin-bottom:40px;
}
.footer-brand{font-weight:800;font-size:1.1rem;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.footer-desc{font-size:0.9rem;color:var(--text-secondary);line-height:1.7;max-width:280px;}
.footer-col-title{
    font-size:0.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.1em;color:var(--text-tertiary);margin-bottom:20px;
}
.footer-col-links{display:flex;flex-direction:column;gap:12px;}
.footer-col-links a{
    color:var(--text-secondary);text-decoration:none;font-size:0.9rem;
    transition:color 0.15s;display:flex;align-items:center;gap:6px;
}
.footer-col-links a:hover{color:var(--accent);}
.footer-bottom{
    border-top:1px solid var(--border);
    padding-top:24px;display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:12px;
}
.footer-copy{font-size:0.85rem;color:var(--text-tertiary);}
.footer-bottom-links{display:flex;gap:24px;}
.footer-bottom-links a{color:var(--text-tertiary);text-decoration:none;font-size:0.85rem;transition:color 0.15s;}
.footer-bottom-links a:hover{color:var(--accent);}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav{
    display:none;
    position:fixed;bottom:0;left:0;right:0;
    z-index:1001;
    background:var(--bg-elevated);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid var(--border-glass);
    padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));
}
.mobile-bottom-nav .bottom-nav-row{
    display:flex;justify-content:space-around;align-items:center;
}
.bottom-nav-item{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;color:var(--text-tertiary);
    font-family:var(--font);font-size:0.65rem;font-weight:600;
    cursor:pointer;padding:6px 12px;
    border-radius:var(--radius-sm);transition:all 0.2s;
    text-decoration:none;
}
.bottom-nav-item .nav-item-icon{font-size:1.3rem;transition:transform 0.2s;}
.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--accent);}
.bottom-nav-item:active .nav-item-icon{transform:scale(0.9);}

/* ===== MOBILE TOOLS PANEL (Slide-up) ===== */
.mobile-panel-overlay{
    position:fixed;inset:0;z-index:1002;
    background:rgba(0,0,0,0.4);
    opacity:0;visibility:hidden;
    transition:all 0.3s;
}
.mobile-panel-overlay.active{opacity:1;visibility:visible;}

.mobile-panel{
    position:fixed;bottom:0;left:0;right:0;
    z-index:1003;
    background:var(--bg-elevated);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    max-height:75vh;
    transform:translateY(100%);
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
    display:flex;flex-direction:column;
    box-shadow:0 -8px 40px rgba(0,0,0,0.12);
}
[data-theme="dark"] .mobile-panel{box-shadow:0 -8px 40px rgba(0,0,0,0.5);}
.mobile-panel.active{transform:translateY(0);}

.mobile-panel-handle{
    width:40px;height:4px;background:var(--border);
    border-radius:2px;margin:12px auto 8px;flex-shrink:0;
}
.mobile-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 20px 12px;flex-shrink:0;
}
.mobile-panel-title{font-weight:700;font-size:1rem;}
.mobile-panel-close{
    background:var(--bg-glass);border:1px solid var(--border);
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1rem;color:var(--text-secondary);
    transition:all 0.15s;
}
.mobile-panel-close:hover{border-color:var(--accent);color:var(--accent);}
.mobile-panel-search{
    display:flex;align-items:center;gap:8px;
    margin:0 20px 12px;padding:10px 16px;
    background:var(--bg-glass);
    border:1.5px solid var(--border);
    border-radius:100px;flex-shrink:0;
}
.mobile-panel-input{
    border:none;background:transparent;font-family:var(--font);
    font-size:0.9rem;color:var(--text);outline:none;width:100%;
}
.mobile-panel-input::placeholder{color:var(--text-tertiary);}
.mobile-panel-body{flex:1;overflow-y:auto;padding:0 20px 20px;}

.mp-cat-section{margin-bottom:20px;}
.mp-cat-head{
    font-size:0.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:0.08em;margin-bottom:10px;
    color:var(--cat-color, var(--accent));
    display:flex;align-items:center;gap:6px;
}
.mp-cat-num{font-size:0.65rem;color:var(--text-tertiary);font-weight:500;}
.mp-tool-list{display:flex;flex-direction:column;gap:4px;}
.mp-tool-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;
    border-radius:var(--radius-sm);
    text-decoration:none;color:var(--text);
    transition:all 0.15s;
}
.mp-tool-item:active{background:var(--accent-light);}
.mp-tool-icon{font-size:1.5rem;flex-shrink:0;}
.mp-tool-info{flex:1;min-width:0;}
.mp-tool-name{font-weight:600;font-size:0.9rem;display:block;}
.mp-tool-desc{font-size:0.75rem;color:var(--text-tertiary);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-tool-arrow{color:var(--text-tertiary);font-size:0.85rem;}
.mp-no-results{text-align:center;padding:30px;color:var(--text-tertiary);}

/* ===== BACK TO TOP ===== */
.back-to-top{
    position:fixed;bottom:88px;right:24px;z-index:900;
    width:44px;height:44px;
    background:var(--bg-elevated);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--border-glass);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text-secondary);font-size:1.2rem;
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:all 0.3s;
    box-shadow:var(--shadow-md);
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{
    border-color:var(--accent);color:var(--accent);
    box-shadow:0 4px 20px var(--accent-glow);
    transform:translateY(-2px);
}

/* ===== TOAST ===== */
.toast-container{
    position:fixed;bottom:100px;right:24px;z-index:9999;
    display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
    display:flex;align-items:center;gap:10px;
    padding:14px 20px;
    background:var(--bg-elevated);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border-glass);
    color:var(--text);font-size:0.9rem;font-family:var(--font);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-lg);
    pointer-events:auto;font-weight:500;
    animation:toastIn 0.3s ease both;
    max-width:380px;
}
.toast.toast-out{animation:toastOut 0.25s ease both;}
.toast-success{border-color:var(--accent-3);box-shadow:0 4px 20px var(--accent-3-glow);}
.toast-error{border-color:#E53935;box-shadow:0 4px 20px rgba(229,57,53,0.25);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(20px);}}

/* ===== TOOL PAGE WRAPPER ===== */
.tool-section{padding-top:100px;padding-bottom:80px;}
.calc-card{
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    padding:32px;margin-top:24px;
    background:var(--bg-card);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media(max-width:768px){.calc-grid{grid-template-columns:1fr;}.calc-card{padding:24px;}}
.input-group{margin-bottom:20px;}
.input-group label{display:block;margin-bottom:8px;font-size:0.95rem;font-weight:600;color:var(--text);}
.input-group input,.input-group select{
    width:100%;padding:12px 16px;
    border:1.5px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg-glass);
    color:var(--text);font-family:var(--font);font-size:1rem;
    transition:border-color 0.15s,box-shadow 0.15s;
}
.input-group input:focus,.input-group select:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-light);
}
.input-group input.error{border-color:#E53935;}
.input-group input.success{border-color:var(--accent-3);}
.error-message{color:#E53935;font-size:0.85rem;margin-top:6px;display:none;font-weight:500;}
.help-text{color:var(--text-tertiary);font-size:0.85rem;margin-top:6px;}
.btn-calc{
    width:100%;padding:14px;border:none;
    background:linear-gradient(135deg,var(--accent),#FF8F6B);
    color:white;font-family:var(--font);font-size:1rem;font-weight:700;
    cursor:pointer;border-radius:100px;
    transition:all 0.2s;margin-top:8px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 16px var(--accent-glow);
}
.btn-calc:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow);}
.btn-calc:disabled{opacity:0.4;cursor:not-allowed;}
.btn-calc.secondary{
    background:transparent;color:var(--text);
    border:1.5px solid var(--border);box-shadow:none;
}
.btn-calc.secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:none;box-shadow:none;}

.results-box{display:none;}
.results-box.show{display:block;animation:fadeInUp 0.3s ease;}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:20px;}
.result-item{text-align:center;padding:20px 12px;border:1px solid var(--border-glass);border-radius:var(--radius-sm);background:var(--bg-glass);}
.result-value{font-size:1.8rem;font-weight:700;color:var(--accent);}
.result-label{font-size:0.8rem;color:var(--text-tertiary);margin-top:6px;font-weight:500;}

.btn-copy{
    width:100%;padding:12px;border:1.5px solid var(--border);
    background:transparent;color:var(--text);
    font-family:var(--font);font-size:0.9rem;font-weight:600;cursor:pointer;
    border-radius:100px;transition:all 0.15s;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-copy:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);}

.btn-convert,.btn-group .btn-convert{width:100%;}
.btn-convert:hover:not(:disabled),.btn-group .btn-convert:hover:not(:disabled){background:linear-gradient(135deg,#FF8F6B,var(--accent));}
.btn-convert:disabled,.btn-group .btn-convert:disabled{opacity:0.4;cursor:not-allowed;}

.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.countdown-item{text-align:center;padding:20px 12px;border:1px solid var(--border-glass);border-radius:var(--radius-sm);background:var(--bg-glass);}
.countdown-value{font-size:2rem;font-weight:700;color:var(--accent);}
.countdown-label{font-size:0.8rem;color:var(--text-tertiary);margin-top:6px;font-weight:500;}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat-item{padding:20px;text-align:center;border:1px solid var(--border-glass);border-radius:var(--radius-sm);}
.stat-label{font-size:0.8rem;color:var(--text-tertiary);margin-bottom:6px;font-weight:500;}
.stat-value{font-size:1.3rem;font-weight:700;color:var(--accent);}

.timeline-bar{height:6px;background:var(--border);margin:20px 0;border-radius:3px;overflow:hidden;}
.timeline-progress{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;transition:width 0.6s;border-radius:3px;}
.timeline-labels{display:flex;justify-content:space-between;font-size:0.85rem;color:var(--text-tertiary);}
.insights-box{margin-top:20px;border:1px solid var(--border-glass);border-radius:var(--radius-sm);padding:20px;background:var(--bg-glass);}
.insights-box h4{margin-bottom:6px;font-size:1rem;font-weight:600;}
.insights-box p{font-size:0.9rem;color:var(--text-secondary);}

.option-group{display:flex;gap:8px;margin-bottom:20px;}
.option-btn{flex:1;padding:12px 16px;border:1.5px solid var(--border);border-radius:100px;background:var(--bg-glass);color:var(--text-secondary);font-family:var(--font);font-size:0.9rem;font-weight:500;cursor:pointer;text-align:center;transition:all 0.1s;}
.option-btn.active{background:var(--accent);color:white;border-color:var(--accent);}

.age-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.results-box h3{margin-bottom:16px;font-size:1.1rem;font-weight:700;}

/* ===== RTL ===== */
[lang="ar"] .toast-container{right:auto;left:24px;}
[lang="ar"] .toast{direction:rtl;}
[lang="ar"] .hero-title{direction:rtl;}
[lang="ar"] .section-head,.hero-section .container{direction:rtl;}
[lang="ar"] .steps-row{direction:rtl;}

/* ===== TOOL BREADCRUMB & TITLE ===== */
.tool-breadcrumb{
    padding:100px 0 0;
    font-size:0.85rem;color:var(--text-tertiary);
}
.tool-breadcrumb a{color:var(--accent);text-decoration:none;}
.tool-breadcrumb a:hover{text-decoration:underline;}
.tool-page-title{
    font-size:2rem;font-weight:800;margin-bottom:8px;
    display:flex;align-items:center;gap:12px;
}
.tool-page-desc{font-size:1rem;color:var(--text-secondary);margin-bottom:32px;}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .tool-grid{grid-template-columns:repeat(4,1fr);}
    .benefits-grid{grid-template-columns:repeat(2,1fr);}
    .steps-row{flex-direction:column;align-items:center;}
    .step-card{max-width:100%;width:100%;margin-bottom:16px;}
    .step-connector{display:none;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .nav-pills-row{gap:4px;}
    .nav-pill{padding:6px 11px;font-size:0.78rem;}
}
@media(max-width:768px){
    .nav-pills-row{display:none;}
    .browse-btn{width:38px;padding:0;justify-content:center;border-radius:50%;}
    .browse-btn .browse-label{display:none;}
    .browse-btn .browse-icon{display:inline;font-size:1.2rem;}
    .mobile-bottom-nav{display:block;}
    .section{padding:64px 0;}
    .hero-section{padding:130px 0 60px;}
    .hero-title{font-size:2.2rem;}
    .hero-sub{font-size:1rem;}
    .hero-pills{gap:8px;}
    .footer-grid{grid-template-columns:1fr;gap:28px;}
    .section-title{font-size:1.8rem;}
    .back-to-top{bottom:80px;}
    .toast-container{bottom:88px;}
    .mega-panel{display:none;}
    .mega-overlay{display:none;}
    .benefits-grid{grid-template-columns:1fr;}
    .site-header{border-radius:var(--radius);width:100%;top:0;border-radius:0;border-left:none;border-right:none;border-top:none;}
    body{padding-bottom:70px;}
}
@media(max-width:480px){
    .hero-actions{flex-direction:column;}
    .hero-actions .btn-glow{width:100%;justify-content:center;}
    .home-tool-grid{grid-template-columns:1fr;}
    .benefit-card{padding:24px 16px;}
    .mega-tool-grid{grid-template-columns:1fr;}
    .hero-title{font-size:1.9rem;}
}