/* ==========================================================================
   PRAMESH BAGHEL — ULTRA-MODERN PREMIUM DESIGN 2.0
   prameshbaghel.in | Inspired by Linear, Vercel, Raycast UI
   Typography: Apple SF Pro System Font Stack (iPhone-style)
   ========================================================================== */

/* Apple iPhone / SF Pro Font Stack */
:root {
    --font-sf: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
    --font-sf-mono: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
                    'Fira Code', Menlo, Consolas, monospace;
}

/* ─── 1. Theme Variables ─────────────────────────────────────────────────── */

:root, [data-theme="cyber"] {
    --p:      #7c3aed;
    --p2:     #06b6d4;
    --p3:     #10b981;
    --pg:     rgba(124,58,237,0.4);
    --c2:     #22d3ee;
    --c3:     #34d399;
    --gold:   #f59e0b;

    --bg:     #050810;
    --bg-c:   rgba(11,16,32,0.82);
    --bg-ch:  rgba(16,23,48,0.95);
    --bg-n:   rgba(7,11,22,0.97);
    --bdr:    rgba(255,255,255,0.07);
    --bdr-g:  rgba(124,58,237,0.5);
    --bdr-g2: rgba(6,182,212,0.45);

    --t1: #eef2ff;
    --t2: #7e96be;
    --t3: #3d5572;

    --grad: linear-gradient(135deg,#7c3aed 0%,#06b6d4 60%,#10b981 100%);
    --grad2: linear-gradient(135deg,#7c3aed,#4f46e5);
    --o1:#7c3aed; --o2:#06b6d4; --o3:#10b981;

    --r1:8px; --r2:14px; --r3:20px; --rf:9999px;
    --blur:blur(24px);
    --e:cubic-bezier(0.16,1,0.3,1);
    --tx:all 0.26s var(--e);
}

[data-theme="purple"] {
    --p:#a855f7; --p2:#ec4899; --p3:#8b5cf6;
    --pg:rgba(168,85,247,0.4); --c2:#f472b6; --c3:#a78bfa; --gold:#fbbf24;
    --bg:#060211; --bg-c:rgba(18,8,38,0.85); --bg-ch:rgba(27,12,56,0.96); --bg-n:rgba(11,5,24,0.98);
    --bdr:rgba(255,255,255,0.09); --bdr-g:rgba(168,85,247,0.55); --bdr-g2:rgba(236,72,153,0.45);
    --t1:#fdf4ff; --t2:#c4a8e0; --t3:#7855a0;
    --grad:linear-gradient(135deg,#a855f7 0%,#ec4899 55%,#6366f1 100%);
    --o1:#a855f7; --o2:#ec4899; --o3:#6366f1;
}

[data-theme="royal"] {
    --p:#2563eb; --p2:#d97706; --p3:#10b981;
    --pg:rgba(37,99,235,0.4); --c2:#fbbf24; --c3:#34d399; --gold:#f59e0b;
    --bg:#020c1e; --bg-c:rgba(6,18,46,0.85); --bg-ch:rgba(10,27,68,0.95); --bg-n:rgba(4,12,30,0.97);
    --bdr:rgba(255,255,255,0.07); --bdr-g:rgba(245,158,11,0.5); --bdr-g2:rgba(37,99,235,0.5);
    --t1:#e8f0ff; --t2:#6d93c8; --t3:#2d4f7c;
    --grad:linear-gradient(135deg,#2563eb 0%,#fbbf24 65%,#f59e0b 100%);
    --o1:#1d4ed8; --o2:#d97706; --o3:#2563eb;
}

[data-theme="light"] {
    --p:#4f46e5; --p2:#0284c7; --p3:#059669;
    --pg:rgba(79,70,229,0.15); --c2:#0ea5e9; --c3:#10b981; --gold:#d97706;
    --bg:#f0f4fd; --bg-c:rgba(255,255,255,0.9); --bg-ch:rgba(255,255,255,1); --bg-n:rgba(241,245,255,0.97);
    --bdr:rgba(0,0,0,0.07); --bdr-g:rgba(79,70,229,0.4); --bdr-g2:rgba(2,132,199,0.35);
    --t1:#0d1424; --t2:#4a5e7a; --t3:#8898b2;
    --grad:linear-gradient(135deg,#4f46e5 0%,#0284c7 100%);
    --o1:rgba(99,102,241,0.18); --o2:rgba(6,182,212,0.18); --o3:rgba(16,185,129,0.15);
}

/* ─── 2. Reset & Body ────────────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:17px}

body {
    font-family: var(--font-sf);
    background:var(--bg);
    color:var(--t1);
    min-height:100vh;
    display:flex; align-items:flex-start; justify-content:center;
    padding:1.5rem 1rem;
    transition:background 0.4s,color 0.4s;
    -webkit-font-smoothing:antialiased;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:40px 40px;
}
[data-theme="light"] body {
    background-image:
        linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
}

h1,h2,h3,h4{font-family:var(--font-sf);color:var(--t1);font-weight:700;letter-spacing:-0.03em}
a{color:inherit;text-decoration:none}

/* ─── 3. Ambient Orbs ────────────────────────────────────────────────────── */

.bg-glow{position:fixed;border-radius:50%;filter:blur(140px);z-index:-1;pointer-events:none;opacity:0.3;transition:all 0.7s}
.bg-glow-1{width:600px;height:600px;top:-180px;left:-150px;background:radial-gradient(circle,var(--o1) 0%,transparent 65%)}
.bg-glow-2{width:500px;height:500px;bottom:-130px;right:-130px;background:radial-gradient(circle,var(--o2) 0%,transparent 65%)}
.bg-glow-3{width:350px;height:350px;top:50%;left:42%;background:radial-gradient(circle,var(--o3) 0%,transparent 65%)}
[data-theme="light"] .bg-glow{opacity:0.1}

/* ─── 4. Utility ─────────────────────────────────────────────────────────── */

.gradient-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline}
.highlight-cyan{color:var(--c2)}
.highlight-emerald{color:var(--c3)}
.highlight-gold{color:var(--gold)}

.pulse-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--c3);display:inline-block;
    animation:pulse 2.2s ease infinite;
}
@keyframes pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.7);transform:scale(0.9)}
    60%{box-shadow:0 0 0 8px rgba(52,211,153,0);transform:scale(1)}
}

/* Card entrance */
.card-hidden{opacity:0;transform:translateY(24px) scale(0.98)}
.card-visible{opacity:1;transform:none;transition:opacity 0.5s var(--e),transform 0.5s var(--e)}

/* ─── 5. Layout ──────────────────────────────────────────────────────────── */

.bento-wrapper{width:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}

/* ─── 6. Header ──────────────────────────────────────────────────────────── */

.bento-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:0.7rem 1.25rem;
    background:var(--bg-c);
    backdrop-filter:var(--blur);
    border:1px solid var(--bdr-g);
    border-radius:var(--r3);
    box-shadow:0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 24px var(--pg);
    gap:0.75rem;flex-wrap:wrap;
    position:relative;overflow:hidden;
    transition:var(--tx);
}
.bento-header::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--grad);border-radius:2px 2px 0 0;
    box-shadow:0 0 10px var(--pg);
}

.bento-logo{
    display:inline-flex;
    align-items:center;
    gap:0.65rem;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
    transition:var(--tx);
}
.bento-logo:hover{
    transform:translateY(-1px);
}
.logo-icon-box{
    position:relative;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    box-shadow:0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-logo:hover .logo-icon-box{
    transform:scale(1.08) rotate(-2deg);
    box-shadow:0 0 20px var(--pg), inset 0 1px 0 rgba(255,255,255,0.2);
}
.logo-svg{
    width:38px;
    height:38px;
    display:block;
}
.logo-box-bg{
    fill:rgba(15, 23, 42, 0.6);
    stroke:var(--bdr);
    transition:stroke 0.3s ease, fill 0.3s ease;
}
[data-theme="light"] .logo-box-bg{
    fill:rgba(255, 255, 255, 0.9);
}
.bento-logo:hover .logo-box-bg{
    stroke:var(--p);
    fill:rgba(var(--rgb-p, 99, 102, 241), 0.15);
}
.logo-path{
    stroke:var(--p);
    transition:stroke 0.3s ease, filter 0.3s ease;
}
.bento-logo:hover .logo-path{
    stroke:var(--p2);
    filter:drop-shadow(0 0 6px var(--pg));
}
.logo-text-group{
    display:inline-flex;
    align-items:center;
    gap:0.3rem;
}
.logo-name{
    font-family:var(--font-sf);
    font-weight:900;
    font-size:1.24rem;
    letter-spacing:-0.035em;
    color:var(--t1);
    transition:color 0.2s ease;
}
.logo-badge{
    font-family:var(--font-sf);
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0.02em;
    padding:0.14rem 0.44rem;
    border-radius:6px;
    background:var(--grad);
    color:#ffffff;
    box-shadow:0 2px 8px var(--pg);
    text-transform:lowercase;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-logo:hover .logo-badge{
    transform:scale(1.05);
    box-shadow:0 0 12px var(--pg);
}

/* Style Switcher */
.look-selector{
    display:flex;align-items:center;gap:0.45rem;
    background:var(--bg-n);border:1px solid var(--bdr);
    border-radius:var(--rf);padding:0.22rem 0.5rem;
}
.look-label{
    font-size:0.7rem;font-weight:700;color:var(--t3);
    text-transform:uppercase;letter-spacing:0.05em;
    display:flex;align-items:center;gap:0.3rem;
}
.look-dots{display:flex;gap:0.28rem}
.look-dot-btn{
    background:transparent;border:1px solid transparent;
    border-radius:var(--rf);padding:0.18rem 0.52rem;
    font-size:0.7rem;font-weight:600;color:var(--t2);
    cursor:pointer;display:inline-flex;align-items:center;gap:0.28rem;
    transition:var(--tx);
}
.look-dot-btn:hover{background:rgba(255,255,255,0.07);color:var(--t1)}
.look-dot-btn.active{
    background:rgba(255,255,255,0.1);border-color:var(--p);
    color:var(--t1);box-shadow:0 0 14px var(--pg);
}
.dot-color{width:7px;height:7px;border-radius:50%;display:inline-block}
.c-cyber {background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.c-purple{background:linear-gradient(135deg,#a855f7,#ec4899)}
.c-royal {background:linear-gradient(135deg,#2563eb,#f59e0b)}
.c-light {background:linear-gradient(135deg,#4f46e5,#0ea5e9);border:1px solid #94a3b8}

/* Header right */
.header-right{display:flex;align-items:center;gap:0.5rem}
.time-status-pill{
    font-size:0.72rem;font-weight:700;
    color:var(--c3);
    background:rgba(52,211,153,0.1);
    border:1px solid rgba(52,211,153,0.25);
    padding:0.26rem 0.7rem;border-radius:var(--rf);
    display:inline-flex;align-items:center;gap:0.38rem;white-space:nowrap;
}
.header-icon-btn{
    width:32px;height:32px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:0.9rem;flex-shrink:0;transition:var(--tx);
}
.linkedin-btn{background:#0a66c2;color:#fff;box-shadow:0 2px 10px rgba(10,102,194,0.3)}
.linkedin-btn:hover{background:#084e96;transform:translateY(-2px);box-shadow:0 5px 16px rgba(10,102,194,0.5);color:#fff}
.insta-btn{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);color:#fff;box-shadow:0 2px 10px rgba(220,39,67,0.3)}
.insta-btn:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(220,39,67,0.5);color:#fff}

/* ─── 7. Bento Grid ──────────────────────────────────────────────────────── */

.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

/* Base card */
.bento-card{
    background:var(--bg-c);
    backdrop-filter:var(--blur);
    border:1px solid var(--bdr);
    border-radius:var(--r3);
    padding:1.4rem;
    box-shadow:0 8px 30px rgba(0,0,0,0.4);
    transition:var(--tx);
    position:relative;overflow:hidden;
}
/* left accent line on hover */
.bento-card::before{
    content:'';position:absolute;top:0;bottom:0;left:0;width:3px;
    background:var(--grad);border-radius:3px 0 0 3px;
    opacity:0;transition:var(--tx);
}
.bento-card:hover::before{opacity:1}
.bento-card:hover{
    border-color:var(--bdr-g);
    background:var(--bg-ch);
    transform:translateY(-3px);
    box-shadow:0 16px 44px rgba(0,0,0,0.5),0 0 30px var(--pg);
}

/* ─── 8. Hero ────────────────────────────────────────────────────────────── */

.bento-hero{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between}

.hero-top{display:flex;align-items:center;gap:1.1rem;margin-bottom:0.9rem}

.avatar-box-glow{position:relative;width:62px;height:62px;flex-shrink:0}
.avatar-inner{
    width:100%;height:100%;border-radius:50%;
    background:var(--grad);color:#fff;
    font-family:var(--font-sf);font-weight:900;font-size:1.45rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 30px var(--pg);
    border:2px solid rgba(255,255,255,0.22);position:relative;z-index:2;
}
.avatar-ring{
    position:absolute;top:-5px;left:-5px;
    width:72px;height:72px;border-radius:50%;
    border:2px dashed var(--p2);opacity:0.5;
    animation:spin 18s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.name-badge-row{display:flex;align-items:center;gap:0.4rem}
.hero-name{font-size:2.3rem;line-height:1.1}
.verified-icon{color:var(--c2);font-size:1.3rem}
.hero-tagline{font-size:1.15rem;font-weight:600;color:var(--t2);margin-top:0.1rem}
.hero-bio{font-size:1rem;color:var(--t2);line-height:1.72;margin-bottom:1.15rem}
.hero-btns{display:flex;gap:0.65rem;flex-wrap:wrap}

/* ─── 9. Stats ───────────────────────────────────────────────────────────── */

.bento-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;align-content:center}

.stat-mini{
    background:var(--bg-n);
    border:1px solid var(--bdr);
    border-radius:var(--r2);
    padding:0.9rem 0.55rem;
    text-align:center;
    transition:var(--tx);position:relative;overflow:hidden;
}
.stat-mini::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,var(--pg) 0%,transparent 65%);
    opacity:0;transition:var(--tx);
}
.stat-mini:hover::after{opacity:1}
.stat-mini:hover{border-color:var(--p);transform:translateY(-2px)}
.stat-icon-sub{font-size:0.88rem;color:var(--p);margin-bottom:0.22rem}
.stat-val{display:block;font-family:var(--font-sf);font-size:1.85rem;font-weight:900;position:relative;z-index:1;letter-spacing:-0.04em}
.stat-lbl{font-size:0.8rem;color:var(--t3);text-transform:uppercase;letter-spacing:0.06em;font-weight:700}

/* ─── 10. Service Cards ──────────────────────────────────────────────────── */

.bento-service{display:flex;flex-direction:column}
.service-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.8rem}
.s-icon{width:44px;height:44px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.icon-web{background:rgba(6,182,212,0.12);color:var(--c2);border:1px solid rgba(6,182,212,0.28)}
.icon-seo{background:rgba(124,58,237,0.12);color:var(--p);border:1px solid rgba(124,58,237,0.28)}

.live-tag{
    font-size:0.7rem;font-weight:700;color:var(--c3);
    background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.28);
    padding:0.17rem 0.58rem;border-radius:var(--rf);
    display:inline-flex;align-items:center;gap:0.28rem;
}
.tag-rank{color:var(--gold);background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.28)}

.bento-service h3{font-size:1.4rem;margin-bottom:0.42rem}
.bento-service p{font-size:0.97rem;color:var(--t2);margin-bottom:0.85rem;flex-grow:1;line-height:1.68}

.mini-tags{display:flex;flex-wrap:wrap;gap:0.38rem}
.tag-highlight{
    font-size:0.82rem;font-weight:600;color:var(--p);
    background:var(--bg-n);border:1px solid var(--bdr);
    padding:0.2rem 0.58rem;border-radius:var(--r1);
    transition:var(--tx);
}
.tag-highlight:hover{border-color:var(--p);color:var(--t1)}

/* ─── 11. Calculator ─────────────────────────────────────────────────────── */

.bento-calc{display:flex;flex-direction:column;justify-content:space-between}
.calc-head-mini{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.9rem}
.calc-head-mini h4{font-size:1.1rem;display:flex;align-items:center;gap:0.38rem}
.res-mini-tag{
    font-size:0.7rem;font-weight:700;color:var(--c3);
    background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.28);
    padding:0.17rem 0.58rem;border-radius:var(--rf);
}
.c-label-row{display:flex;justify-content:space-between;font-size:0.92rem;color:var(--t2);margin-bottom:0.5rem}
.slider{width:100%;height:5px;border-radius:4px;background:rgba(255,255,255,0.08);outline:none;-webkit-appearance:none}
.slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
    background:var(--p);border:2.5px solid #fff;
    box-shadow:0 0 12px var(--pg);cursor:pointer;transition:var(--tx);
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.25)}

/* ─── 12. Tools ──────────────────────────────────────────────────────────── */

.bento-tools{display:flex;flex-direction:column}
.bento-tools h4{font-size:0.96rem;margin-bottom:0.28rem;display:flex;align-items:center;gap:0.38rem}
.tools-desc{font-size:0.74rem;color:var(--t3);margin-bottom:0.65rem}
.tools-pills{display:flex;flex-wrap:wrap;gap:0.4rem}
.tools-pills span{
    background:var(--bg-n);border:1px solid var(--bdr);
    font-size:0.84rem;font-weight:600;padding:0.32rem 0.72rem;
    border-radius:var(--r1);display:inline-flex;align-items:center;gap:0.3rem;
    transition:var(--tx);color:var(--t2);
}
.tools-pills span:hover{border-color:var(--p2);transform:translateY(-2px);color:var(--t1)}
.chip-html i{color:#e34f26}.chip-wp i{color:#21759b}.chip-shop i{color:#96bf48}
.chip-ahrefs i{color:#ff6000}.chip-semrush i{color:#ff642d}.chip-gsc i{color:#4285f4}
.chip-meta i{color:#0668e1}.chip-li i{color:#0a66c2}

/* ─── 13. Contact Form ───────────────────────────────────────────────────── */

.bento-contact{grid-column:span 2;display:flex;flex-direction:column;justify-content:space-between}
.contact-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem}
.contact-header-row h4{font-size:1.3rem;color:var(--p);display:flex;align-items:center;gap:0.38rem}
.contact-fast-tag{font-size:0.95rem;font-weight:700;color:var(--c3);display:flex;align-items:center;gap:0.32rem}

.bento-form{display:flex;flex-direction:column;gap:0.65rem}
.form-compact-row{display:grid;grid-template-columns:1fr 1fr;gap:0.65rem}
.bento-form input,.bento-form select{
    width:100%;padding:0.65rem 0.85rem;
    background:var(--bg-n);border:1px solid var(--bdr);
    border-radius:var(--r1);color:var(--t1);
    font-family:var(--font-sf);font-size:0.97rem;
    outline:none;transition:var(--tx);
}
.bento-form input:focus,.bento-form select:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--pg)}
.bento-form input::placeholder{color:var(--t3)}
.form-feedback{font-size:0.79rem;border-radius:var(--r1);padding:0.48rem;text-align:center;display:none}
.form-feedback.success{display:block;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:var(--c3)}

/* ─── 14. Buttons ────────────────────────────────────────────────────────── */

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:0.45rem;
    font-family:var(--font-sf);font-weight:600;font-size:1rem;
    padding:0.65rem 1.3rem;border-radius:var(--rf);
    cursor:pointer;border:none;transition:var(--tx);letter-spacing:0.01em;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 20px var(--pg)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--pg);color:#fff}
.btn-whatsapp{background:#25d366;color:#fff;box-shadow:0 4px 18px rgba(37,211,102,0.32)}
.btn-whatsapp:hover{background:#22c55e;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,0.5);color:#fff}
.btn-linkedin{background:#0a66c2;color:#fff;box-shadow:0 4px 14px rgba(10,102,194,0.28)}
.btn-linkedin:hover{background:#084e96;transform:translateY(-2px);color:#fff}
.btn-insta{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;box-shadow:0 4px 14px rgba(220,39,67,0.28)}
.btn-insta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(220,39,67,0.48);color:#fff}
.btn-block{width:100%}

/* ─── 15. Footer ─────────────────────────────────────────────────────────── */

.bento-footer{
    display:flex;justify-content:space-between;align-items:center;
    padding:0.8rem 1.25rem;
    background:var(--bg-c);border:1px solid var(--bdr);
    border-radius:var(--r3);font-size:0.77rem;color:var(--t3);
}
.footer-socials{display:flex;gap:0.55rem}
.footer-socials a{
    width:30px;height:30px;border-radius:50%;
    background:var(--bg-n);border:1px solid var(--bdr);
    display:flex;align-items:center;justify-content:center;
    font-size:0.85rem;transition:var(--tx);
}
.footer-socials a:hover{background:var(--p);color:#fff;border-color:var(--p);transform:translateY(-2px)}

/* ─── 16. Floating WhatsApp ──────────────────────────────────────────────── */

.floating-wa-btn{
    position:fixed;bottom:1.5rem;right:1.5rem;
    width:52px;height:52px;background:#25d366;color:#fff;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.65rem;box-shadow:0 6px 24px rgba(37,211,102,0.45);
    z-index:999;transition:var(--tx);
}
.floating-wa-btn:hover{transform:scale(1.12) rotate(8deg);color:#fff}

/* ─── 17. Comprehensive Mobile & Cross-Device Responsive ────────────────── */

html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Tablet Breakpoint (<= 880px) */
@media (max-width: 880px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem;
    }
    .bento-hero, .bento-contact {
        grid-column: 1 / -1;
    }
    .hero-name {
        font-size: 1.95rem;
    }
}

/* Phablet & Large Phones (<= 768px) */
@media (max-width: 768px) {
    body {
        padding: 0.85rem 0.65rem 5rem 0.65rem;
    }
    .bento-header {
        padding: 0.65rem 0.9rem;
        gap: 0.65rem;
    }
    .look-selector {
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 0.28rem 0.5rem;
        overflow-x: auto;
    }
    .header-right {
        gap: 0.35rem;
    }
    .bento-card {
        padding: 1.15rem;
        border-radius: var(--r2);
    }
    .hero-top {
        gap: 0.85rem;
    }
    .avatar-box-glow {
        width: 54px;
        height: 54px;
    }
    .avatar-inner {
        font-size: 1.25rem;
    }
    .avatar-ring {
        width: 62px;
        height: 62px;
        top: -4px;
        left: -4px;
    }
    .hero-name {
        font-size: 1.7rem;
    }
    .hero-tagline {
        font-size: 1rem;
    }
    .hero-bio {
        font-size: 0.94rem;
        line-height: 1.65;
        margin-bottom: 1rem;
    }
}

/* Standard Mobile Phones (<= 600px) */
@media (max-width: 600px) {
    body {
        padding: 0.6rem 0.45rem 5rem 0.45rem;
    }
    .bento-wrapper {
        gap: 0.75rem;
    }
    .bento-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .bento-hero, .bento-contact, .bento-stats, .bento-calc, .bento-service, .bento-tools {
        grid-column: span 1;
    }
    
    /* Header optimization */
    .bento-header {
        padding: 0.6rem 0.75rem;
        border-radius: var(--r2);
    }
    .bento-logo {
        gap: 0.45rem;
    }
    .logo-icon-box {
        width: 34px;
        height: 34px;
    }
    .logo-svg {
        width: 34px;
        height: 34px;
    }
    .logo-name {
        font-size: 1.12rem;
    }
    .time-status-pill {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
    }
    .look-selector {
        padding: 0.25rem 0.4rem;
        gap: 0.25rem;
    }
    .look-label {
        font-size: 0.65rem;
    }
    .look-dot-btn {
        padding: 0.16rem 0.4rem;
        font-size: 0.66rem;
    }

    /* Hero Buttons */
    .hero-btns {
        flex-direction: column;
        gap: 0.55rem;
        width: 100%;
    }
    .hero-btns .btn {
        width: 100%;
        padding: 0.72rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Stats 2-column grid */
    .bento-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
    }
    .stat-mini {
        padding: 0.75rem 0.4rem;
    }
    .stat-val {
        font-size: 1.55rem;
    }
    .stat-lbl {
        font-size: 0.72rem;
    }

    /* Services */
    .bento-service h3 {
        font-size: 1.25rem;
    }
    .bento-service p {
        font-size: 0.92rem;
    }

    /* Calculator */
    .calc-head-mini h4 {
        font-size: 0.96rem;
    }
    .c-label-row {
        font-size: 0.82rem;
        flex-direction: column;
        gap: 0.25rem;
    }
    .slider {
        margin: 0.5rem 0;
    }

    /* Form */
    .form-compact-row {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .bento-form input, .bento-form select {
        padding: 0.72rem 0.8rem;
        font-size: 16px; /* Prevents auto-zoom in iOS Safari */
    }
    .contact-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .contact-header-row h4 {
        font-size: 1.15rem;
    }
    .contact-fast-tag {
        font-size: 0.85rem;
    }

    /* Footer */
    .bento-footer {
        flex-direction: column;
        gap: 0.65rem;
        text-align: center;
        padding: 0.75rem 0.85rem;
        border-radius: var(--r2);
    }

    /* Floating WhatsApp Pill */
    .floating-wa-btn {
        bottom: 1.1rem;
        right: 1.1rem;
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        box-shadow: 0 4px 18px rgba(37,211,102,0.4);
    }
}

/* Extra Small Phones (<= 380px) */
@media (max-width: 380px) {
    .hero-name {
        font-size: 1.45rem;
    }
    .hero-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .look-selector {
        justify-content: flex-start;
    }
    .tools-pills span {
        font-size: 0.76rem;
        padding: 0.26rem 0.52rem;
    }
}