/* ================================================================
   TabibSoft — Specialty Detail — Light Theme
   ================================================================ */

:root {
    --bd:#1B2D6E; --bl:#29ABE2; --bm:#2236A0;
    --bp:#E8F5FC; --b50:#F0F7FF;
    --white:#fff; --gray:#F4F7FD;
    --txt:#0F1E4A; --sub:#3D4F7A;
    --font-b:'Noto Sans Arabic',sans-serif;
    --font-d:'Noto Naskh Arabic',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--white);color:var(--txt);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;object-fit:cover}

/* ── NAV ── */
.nav{
    position:sticky;top:0;z-index:200;
    background:rgba(255,255,255,.96);backdrop-filter:blur(24px);
    padding:.9rem 2rem;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(27,45,110,.08);
    box-shadow:0 2px 14px rgba(27,45,110,.05);
}
.nav-mid{display:flex;gap:1.5rem;list-style:none}
.nav-mid a{color:var(--sub);font-size:.88rem;font-weight:600;transition:color .2s}
.nav-mid a:hover{color:var(--bd)}
.nav-cta{
    background:linear-gradient(135deg,var(--bl),var(--bd));
    color:#fff;padding:.5rem 1.25rem;border-radius:9999px;
    font-weight:700;font-size:.88rem;transition:transform .2s;
}
.nav-cta:hover{transform:translateY(-2px)}

/* ── HERO — Light ── */
.hero{
    min-height:80vh;position:relative;
    display:flex;align-items:center;overflow:hidden;
    background:linear-gradient(160deg,var(--b50) 0%,#EBF4FF 45%,var(--bp) 100%);
}
.hero-bg{position:absolute;inset:0}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.08}
.hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to left,transparent 30%,rgba(240,247,255,.95) 75%);
}
.hero-inner{
    position:relative;z-index:2;
    max-width:1200px;margin:0 auto;padding:5rem 2rem;
    display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.hero-back{
    display:inline-flex;align-items:center;gap:.4rem;
    color:var(--sub);font-size:.85rem;margin-bottom:1.5rem;transition:color .2s;
}
.hero-back:hover{color:var(--bd)}
.hero-badge{
    display:inline-flex;align-items:center;gap:.5rem;
    background:rgba(41,171,226,.1);border:1px solid rgba(41,171,226,.28);
    color:var(--bm);padding:.35rem 1rem;border-radius:9999px;
    font-size:.82rem;font-weight:700;margin-bottom:1.2rem;
}
.hero-dot{width:8px;height:8px;background:var(--bl);border-radius:50%;animation:blink 2s infinite}
.hero-title{font-family:var(--font-d);font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:700;color:var(--txt);line-height:1.38;margin-bottom:1rem}
.hero-title span{color:var(--bl)}
.hero-desc{color:var(--sub);font-size:.97rem;line-height:1.88;margin-bottom:2rem}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.5rem}
.btn-prim{
    background:linear-gradient(135deg,var(--bl),var(--bd));
    color:#fff;padding:.85rem 1.75rem;border-radius:9999px;
    font-weight:700;font-size:.95rem;
    display:inline-flex;align-items:center;gap:.5rem;
    box-shadow:0 6px 22px rgba(41,171,226,.35);transition:transform .2s;
}
.btn-prim:hover{transform:translateY(-3px);color:#fff}
.btn-sec{
    border:2px solid rgba(27,45,110,.2);color:var(--bd);
    padding:.85rem 1.75rem;border-radius:9999px;font-weight:600;font-size:.95rem;
    display:inline-flex;align-items:center;gap:.5rem;
    background:#fff;box-shadow:0 2px 8px rgba(27,45,110,.06);
    transition:all .2s;
}
.btn-sec:hover{border-color:var(--bd);box-shadow:0 6px 20px rgba(27,45,110,.12)}
.hero-stats{display:flex;gap:2rem;padding-top:2rem;border-top:1px solid rgba(27,45,110,.1)}
.hstat-num{font-family:var(--font-d);font-size:1.7rem;font-weight:700;color:var(--bd);display:block}
.hstat-lbl{font-size:.78rem;color:var(--sub)}

/* ── DEVICE ── */
.hero-visual{position:relative}
.device-frame{
    background:#fff;border:1.5px solid rgba(27,45,110,.1);
    border-radius:20px;overflow:hidden;
    box-shadow:0 24px 64px rgba(27,45,110,.16);
}
.device-bar{
    background:var(--b50);padding:.65rem 1rem;
    display:flex;align-items:center;gap:.5rem;
    border-bottom:1px solid rgba(27,45,110,.08);
}
.dot{width:10px;height:10px;border-radius:50%}
.device-screen{position:relative}
.device-screen img{width:100%;height:240px;object-fit:cover}
.screen-overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(27,45,110,.2) 0%,transparent 50%);
    display:flex;align-items:flex-end;padding:1rem;
}
.float-card{
    position:absolute;bottom:-18px;left:-18px;
    background:#fff;border:1.5px solid rgba(27,45,110,.1);
    border-radius:14px;padding:.9rem 1.15rem;
    display:flex;align-items:center;gap:.75rem;
    box-shadow:0 10px 32px rgba(27,45,110,.12);
    animation:float 4s ease-in-out infinite;
}
.fc-icon{font-size:1.5rem}
.fc-title{font-weight:700;color:var(--txt);font-size:.86rem}
.fc-sub{font-size:.73rem;color:var(--sub)}

/* ── STATS BAND ── */
.stats-band{background:var(--bd);padding:2.5rem 2rem}
.stats-grid{
    max-width:900px;margin:0 auto;
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:2rem;text-align:center;
}
.stat-num{font-family:var(--font-d);font-size:2.1rem;font-weight:700;color:var(--bl);display:block}
.stat-lbl{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:.25rem}

/* ── TABS ── */
.tabs-section{padding:5rem 0;background:var(--gray)}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.section-eyebrow{
    display:inline-block;padding:.3rem .9rem;border-radius:9999px;
    font-size:.8rem;font-weight:700;margin-bottom:.8rem;
    background:var(--bp);color:var(--bd);border:1px solid rgba(27,45,110,.1);
}
.section-title{font-family:var(--font-d);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--txt);margin-bottom:.5rem}
.section-sub{color:var(--sub);font-size:.95rem;margin-bottom:3rem}
.tabs-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.tab-btn{
    background:var(--white);border:1.5px solid rgba(27,45,110,.12);border-radius:9999px;
    padding:.5rem 1.2rem;font-family:var(--font-b);font-size:.86rem;
    font-weight:600;color:var(--sub);cursor:pointer;transition:all .2s;
}
.tab-btn.active,.tab-btn:hover{background:var(--bd);border-color:var(--bd);color:#fff}
.tab-panel{display:none}
.tab-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.tab-img-wrap{border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(27,45,110,.12)}
.tab-img-wrap img{width:100%;height:300px;object-fit:cover}
.tab-content-title{font-family:var(--font-d);font-size:1.45rem;font-weight:700;color:var(--txt);margin-bottom:.9rem}
.tab-content-desc{color:var(--sub);line-height:1.88;margin-bottom:1.4rem;font-size:.94rem}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.feat-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem;color:var(--txt)}
.feat-check{
    width:22px;height:22px;border-radius:50%;
    background:rgba(41,171,226,.12);color:var(--bl);
    display:flex;align-items:center;justify-content:center;
    font-size:.78rem;flex-shrink:0;margin-top:.12rem;
}

/* ── GALLERY ── */
.gallery-section{padding:5rem 0;background:var(--white)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-top:3rem}
.gallery-card{border-radius:16px;overflow:hidden;border:1.5px solid rgba(27,45,110,.08);transition:all .3s;background:#fff;box-shadow:0 2px 10px rgba(27,45,110,.05)}
.gallery-card:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(27,45,110,.12)}
.gallery-card img{width:100%;height:190px;object-fit:cover}
.gallery-card-body{padding:.95rem 1.15rem}
.gallery-card-title{font-weight:700;font-size:.88rem;color:var(--txt);margin-bottom:.28rem}
.gallery-card-desc{font-size:.78rem;color:var(--sub)}

/* ── TESTIMONIALS ── */
.testimonials-section{padding:5rem 0;background:var(--gray)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.tcard{
    background:var(--white);border:1.5px solid rgba(27,45,110,.08);
    border-radius:18px;padding:1.65rem;
    transition:all .3s;box-shadow:0 2px 10px rgba(27,45,110,.05);
}
.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(27,45,110,.1)}
.stars{color:#f59e0b;font-size:.9rem;margin-bottom:.9rem}
.tcard-text{color:var(--sub);line-height:1.82;font-size:.9rem;margin-bottom:1.4rem}
.tcard-author{display:flex;align-items:center;gap:.7rem;padding-top:.9rem;border-top:1px solid rgba(27,45,110,.07)}
.avatar{
    width:40px;height:40px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--bl),var(--bd));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:.88rem;
}
.author-name{font-weight:700;font-size:.88rem;color:var(--txt)}
.author-title{font-size:.76rem;color:var(--sub)}

/* ── OTHER ── */
.other-section{padding:3.5rem 0;background:var(--white)}
.other-chips{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.25rem}
.other-chip{
    display:inline-flex;align-items:center;gap:.4rem;
    background:var(--gray);border:1.5px solid rgba(27,45,110,.1);
    border-radius:9999px;padding:.38rem .9rem;
    font-size:.83rem;font-weight:600;color:var(--sub);transition:all .2s;
}
.other-chip:hover{border-color:var(--bl);color:var(--bd);background:var(--bp)}

/* ── CTA ── */
.cta-section{
    padding:5.5rem 2rem;text-align:center;
    background:linear-gradient(135deg,var(--bd),#0a1535);
}
.cta-section h2{font-family:var(--font-d);font-size:clamp(1.8rem,3vw,2.7rem);color:#fff;margin-bottom:.9rem}
.cta-section p{color:rgba(255,255,255,.6);font-size:1rem;margin-bottom:2.25rem}
.cta-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.footer-mini{background:var(--bd);padding:1.75rem;text-align:center;color:rgba(255,255,255,.4);font-size:.82rem}

/* ── ANIMATIONS ── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
    .hero-inner{grid-template-columns:1fr}
    .hero-visual{display:none}
    .tab-panel.active{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:1fr 1fr}
    .testimonials-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    .gallery-grid{grid-template-columns:1fr}
    .nav-mid{display:none}
}