/* ============================================
   شركة يحيى الراشد للمحاماة — Premium Editorial v4
   Luxury Dark Navy + Gold — Cinematic Motion
   Font: Year of the Camel — Full Mobile Responsive
   ============================================ */

/* === FONTS — عام الإبل === */
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-Thin.otf') format('opentype');font-weight:100}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-ExtraLight.otf') format('opentype');font-weight:200}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-Light.otf') format('opentype');font-weight:300}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-Regular.otf') format('opentype');font-weight:400}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-Medium.otf') format('opentype');font-weight:500}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-Bold.otf') format('opentype');font-weight:700}
@font-face{font-family:'YC';src:url('fonts/TheYearofTheCamel-ExtraBold.otf') format('opentype');font-weight:800}

/* === DESIGN TOKENS === */
:root{
    --bg:#04080f;
    --bg-2:#080e1c;
    --bg-3:#0c1426;
    --bg-4:#121d38;
    --bg-card:rgba(10,16,32,.75);

    --gold:#c9a54e;
    --gold-light:#e8cc7a;
    --gold-lighter:#f5e4a8;
    --gold-dark:#9a7a30;
    --gold-g:linear-gradient(135deg,#f5e4a8 0%,#c9a54e 40%,#9a7a30 100%);
    --gold-g-h:linear-gradient(135deg,#f5e4a8 0%,#ddb95e 50%,#c9a54e 100%);

    --ivory:#f0ece4;
    --ivory-dim:rgba(240,236,228,.7);
    --silver:#8a92a8;
    --silver-dim:rgba(138,146,168,.5);
    --white:#fff;

    --radius:16px;
    --radius-lg:24px;
    --radius-xl:32px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);
    --ease-out:cubic-bezier(.16,1,.3,1);

    --shadow-sm:0 4px 16px rgba(0,0,0,.15);
    --shadow-md:0 12px 40px rgba(0,0,0,.25);
    --shadow-lg:0 24px 80px rgba(0,0,0,.4);
    --shadow-gold:0 8px 32px rgba(201,165,78,.12);

    --nav-h:80px;
    --section-py:120px;
}

/* === RESET === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);font-size:16px;overflow-x:hidden;overflow-x:clip;width:100%}
body{font-family:'YC',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ivory);direction:rtl;line-height:1.85;overflow-x:hidden;overflow-x:clip;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
::selection{background:rgba(201,165,78,.2);color:var(--gold-lighter)}

.container{max-width:1200px;margin:0 auto;padding:0 28px;width:100%}

/* === SITE WRAPPER — prevents mobile horizontal overflow === */
.site-wrapper{width:100%;overflow-x:hidden;overflow-x:clip;position:relative}

/* === SCROLL PROGRESS BAR === */
.scroll-progress{position:fixed;top:0;right:0;height:3px;background:var(--gold-g);z-index:9999;transform-origin:right;transition:none;pointer-events:none;border-radius:0 0 0 2px}

/* === AMBIENT FLOATING ORBS === */
.ambient-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.03;animation:orbFloat 20s ease-in-out infinite}
.ambient-orb:nth-child(1){width:600px;height:600px;background:var(--gold);top:-10%;right:-10%;animation-delay:0s;animation-duration:25s}
.ambient-orb:nth-child(2){width:500px;height:500px;background:#3a5ba0;bottom:-15%;left:-10%;animation-delay:-8s;animation-duration:30s}
.ambient-orb:nth-child(3){width:400px;height:400px;background:var(--gold);top:50%;right:60%;animation-delay:-14s;animation-duration:22s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,-60px) scale(1.1)}50%{transform:translate(-30px,40px) scale(.9)}75%{transform:translate(50px,20px) scale(1.05)}}

/* === NAVIGATION === */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all .5s var(--ease)}
.nav.scrolled{padding:10px 0;background:rgba(4,8,15,.92);backdrop-filter:blur(30px) saturate(1.4);border-bottom:1px solid rgba(201,165,78,.05);box-shadow:0 4px 30px rgba(0,0,0,.2)}
.nav .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;transition:transform .3s var(--ease)}
.logo:hover{transform:scale(1.03)}
.logo-mark{width:220px;height:75px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s}
.logo-mark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.logo:hover .logo-mark{transform:scale(1.05)}

.nav-menu{display:flex;align-items:center;gap:2px;list-style:none}
.nav-menu a{color:var(--silver);padding:10px 20px;font-size:.88rem;font-weight:500;border-radius:12px;transition:all .3s var(--ease);position:relative}
.nav-menu a:hover{color:var(--gold-light)}
.nav-menu a.active{color:var(--gold-light);background:rgba(201,165,78,.06)}
.nav-menu a.active::after{content:'';position:absolute;bottom:4px;right:50%;transform:translateX(50%);width:18px;height:2px;background:var(--gold-g);border-radius:2px}
.nav-cta-link{border:1.5px solid rgba(201,165,78,.25) !important;color:var(--gold) !important;font-weight:600 !important;padding:10px 24px !important}
.nav-cta-link:hover{background:var(--gold) !important;color:var(--bg) !important;border-color:var(--gold) !important;box-shadow:var(--shadow-gold) !important}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:6px;z-index:1001}
.burger span{display:block;width:26px;height:2px;background:var(--gold);border-radius:2px;transition:.4s var(--ease);transform-origin:center}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* === HERO === */
.hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;position:relative;overflow:hidden;overflow:clip;padding-top:var(--nav-h);width:100%}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.15) saturate(.4);transform:scale(1.05);animation:heroZoom 30s ease-in-out infinite alternate}
@keyframes heroZoom{0%{transform:scale(1.05)}100%{transform:scale(1.12)}}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,8,15,.97) 0%,rgba(8,14,28,.85) 40%,rgba(12,20,38,.7) 70%,rgba(4,8,15,.9) 100%)}
.hero-bg::before{content:'';position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(to top,var(--bg),transparent);z-index:1}
.hero .container{position:relative;z-index:2}
.hero-inner{max-width:100%;text-align:center;overflow:hidden;word-break:break-word}

/* Hero decorative elements */
.hero-deco{position:absolute;z-index:1;pointer-events:none}
.hero-deco-line{right:8%;top:15%;width:1px;height:200px;background:linear-gradient(to bottom,transparent,rgba(201,165,78,.15),transparent);animation:decoLineFloat 6s ease-in-out infinite}
.hero-deco-line:nth-child(2){right:12%;top:25%;height:140px;animation-delay:-2s;opacity:.5}
.hero-deco-circle{left:10%;bottom:20%;width:120px;height:120px;border:1px solid rgba(201,165,78,.06);border-radius:50%;animation:decoCircleSpin 20s linear infinite}
@keyframes decoLineFloat{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(-20px)}}
@keyframes decoCircleSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Hero big logo */
.hero-logo-big{margin-bottom:28px;animation:heroLogoIn 1.2s var(--ease-out) both}
.hero-logo-big img{width:280px;height:auto;margin:0 auto;display:block;filter:drop-shadow(0 4px 40px rgba(201,165,78,.12))}
@keyframes heroLogoIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Hero gold divider */
.hero-divider{display:flex;align-items:center;justify-content:center;margin-bottom:32px;animation:heroFadeIn .8s var(--ease-out) .3s both}
.hero-divider span{display:block;width:80px;height:2px;background:var(--gold-g);border-radius:2px;position:relative}
.hero-divider span::before,.hero-divider span::after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--gold);border-radius:50%}
.hero-divider span::before{right:-16px}
.hero-divider span::after{left:-16px}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.hero h1{font-size:clamp(2.2rem,4.5vw,3.8rem);font-weight:800;line-height:1.25;margin-bottom:20px;letter-spacing:-.5px;animation:heroFadeIn .8s var(--ease-out) .4s both}
.hero .hl{background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero h1+p{color:var(--silver);font-size:1.05rem;line-height:2;max-width:640px;margin:0 auto 40px;animation:heroFadeIn .8s var(--ease-out) .5s both;word-break:break-word;overflow-wrap:break-word}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;animation:heroFadeIn .8s var(--ease-out) .6s both}

/* Gold shimmer line under hero */
.hero-line{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,78,.3),transparent);z-index:2}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;font-family:inherit;font-size:.95rem;font-weight:700;border-radius:14px;border:none;cursor:pointer;transition:all .4s var(--ease);text-decoration:none;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:.4s}
.btn:hover::before{opacity:1}
.btn-gold{background:var(--gold-g);color:var(--bg);box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(201,165,78,.3)}
.btn-ghost{background:transparent;color:var(--gold);border:1.5px solid rgba(201,165,78,.2)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,165,78,.05);transform:translateY(-4px)}
.btn svg{width:18px;height:18px}

/* === STATS BAR === */
.stats-bar{position:relative;z-index:10;margin-top:-56px;padding:0;overflow:hidden}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(10,16,32,.85);backdrop-filter:blur(24px) saturate(1.2);border-radius:var(--radius-xl);border:1px solid rgba(201,165,78,.06);overflow:hidden;box-shadow:var(--shadow-lg)}
.stat{padding:40px 24px;text-align:center;position:relative;transition:all .4s var(--ease)}
.stat:not(:last-child)::after{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:linear-gradient(to bottom,transparent,rgba(201,165,78,.08),transparent)}
.stat:hover{background:rgba(201,165,78,.03)}
.stat-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:rgba(201,165,78,.06);border-radius:14px;color:var(--gold);transition:.3s}
.stat-icon svg{width:22px;height:22px}
.stat:hover .stat-icon{background:rgba(201,165,78,.1);transform:scale(1.08)}
.stat-num{font-size:2.8rem;font-weight:800;background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}
.stat-label{font-size:.82rem;color:var(--silver);font-weight:500}

/* === SECTION STYLING === */
.sec-header{text-align:center;margin-bottom:64px}
.sec-tag{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:4px;font-weight:700;margin-bottom:18px}
.sec-tag::before,.sec-tag::after{content:'';width:32px;height:1px;background:var(--gold-g)}
.sec-title{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;line-height:1.3;margin-bottom:18px;letter-spacing:-.3px}
.sec-title .hl{background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-desc{font-size:1rem;color:var(--silver);max-width:600px;margin:0 auto;line-height:2}

/* === ABOUT === */
.about{padding:var(--section-py) 0}
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.about-img{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-img img{width:100%;height:500px;object-fit:cover;transition:transform 1s var(--ease)}
.about-img:hover img{transform:scale(1.05)}
.about-img::after{content:'';position:absolute;inset:0;border:1px solid rgba(201,165,78,.08);border-radius:var(--radius-xl);pointer-events:none}
.about-img::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,8,15,.4),transparent 50%);z-index:1;pointer-events:none}
.about-badge{position:absolute;bottom:24px;right:24px;background:rgba(4,8,15,.85);backdrop-filter:blur(16px);border:1px solid rgba(201,165,78,.12);border-radius:18px;padding:20px 28px;text-align:center;z-index:2}
.about-badge .num{font-size:2.6rem;font-weight:800;background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.about-badge .txt{font-size:.72rem;color:var(--silver);margin-top:4px}
.about-body .sec-tag{justify-content:flex-start}
.about-body h2{font-size:2.2rem;font-weight:800;margin-bottom:22px;line-height:1.35}
.about-body p{color:var(--silver);font-size:1rem;line-height:2.1;margin-bottom:18px}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.about-feat{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-card);border:1px solid rgba(201,165,78,.04);border-radius:14px;transition:all .4s var(--ease);backdrop-filter:blur(8px)}
.about-feat:hover{border-color:rgba(201,165,78,.12);background:rgba(201,165,78,.04);transform:translateX(-4px)}
.about-feat .ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(201,165,78,.07);border-radius:11px;color:var(--gold);flex-shrink:0;transition:.3s}
.about-feat:hover .ic{background:rgba(201,165,78,.12);transform:scale(1.1)}
.about-feat .ic svg{width:18px;height:18px}
.about-feat span{font-size:.88rem;font-weight:700}

/* === SERVICES === */
.services{padding:var(--section-py) 0;position:relative}
.services::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),var(--bg-2) 30%,var(--bg-2) 70%,var(--bg));pointer-events:none}
.services .container{position:relative;z-index:1}
.srv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.srv-card{padding:44px 36px;background:var(--bg-card);border:1px solid rgba(201,165,78,.04);border-radius:var(--radius-xl);transition:all .6s var(--ease);position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.srv-card::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(201,165,78,.03) 0%,transparent 50%);transition:.8s var(--ease);opacity:0}
.srv-card::after{content:'';position:absolute;top:0;right:0;left:0;height:2px;background:var(--gold-g);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.srv-card:hover{border-color:rgba(201,165,78,.1);transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.srv-card:hover::before{opacity:1}
.srv-card:hover::after{transform:scaleX(1)}
.srv-ic{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:rgba(201,165,78,.06);border:1px solid rgba(201,165,78,.06);border-radius:16px;margin-bottom:24px;color:var(--gold);transition:all .4s var(--ease)}
.srv-ic svg{width:28px;height:28px}
.srv-card:hover .srv-ic{background:rgba(201,165,78,.1);transform:scale(1.1) rotate(-3deg);border-color:rgba(201,165,78,.15)}
.srv-card h3{font-size:1.25rem;font-weight:800;margin-bottom:14px;transition:color .3s}
.srv-card:hover h3{color:var(--gold-light)}
.srv-card p{color:var(--silver);font-size:.92rem;line-height:2}
.srv-num{position:absolute;bottom:16px;left:24px;font-size:4rem;font-weight:800;background:linear-gradient(135deg,rgba(201,165,78,.04),rgba(201,165,78,.01));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}

/* === VISION/VALUES === */
.values-sec{padding:var(--section-py) 0}
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:64px}
.trio-card{padding:40px 30px;background:var(--bg-card);border:1px solid rgba(201,165,78,.04);border-radius:var(--radius-xl);text-align:center;transition:all .6s var(--ease);position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.trio-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold-g);transform:scaleX(0);transition:.5s var(--ease)}
.trio-card:hover{border-color:rgba(201,165,78,.1);transform:translateY(-6px);box-shadow:var(--shadow-md)}
.trio-card:hover::after{transform:scaleX(1)}
.trio-ic{width:68px;height:68px;display:flex;align-items:center;justify-content:center;background:rgba(201,165,78,.05);border:1px solid rgba(201,165,78,.06);border-radius:50%;margin:0 auto 22px;color:var(--gold);transition:.4s var(--ease)}
.trio-ic svg{width:30px;height:30px}
.trio-card:hover .trio-ic{background:rgba(201,165,78,.08);transform:scale(1.1);border-color:rgba(201,165,78,.15)}
.trio-card h3{font-size:1.3rem;font-weight:800;background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px}
.trio-card p{color:var(--silver);font-size:.92rem;line-height:2}

.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.val-item{display:flex;gap:18px;padding:28px 24px;background:var(--bg-card);border:1px solid rgba(201,165,78,.03);border-radius:18px;transition:all .4s var(--ease);backdrop-filter:blur(8px)}
.val-item:hover{border-color:rgba(201,165,78,.1);background:rgba(201,165,78,.02);transform:translateY(-3px)}
.val-ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(201,165,78,.06);border:1px solid rgba(201,165,78,.06);border-radius:13px;flex-shrink:0;color:var(--gold);transition:.4s}
.val-ic svg{width:22px;height:22px}
.val-item:hover .val-ic{background:rgba(201,165,78,.1);transform:scale(1.08);border-color:rgba(201,165,78,.15)}
.val-item h4{font-size:1rem;font-weight:800;color:var(--gold-light);margin-bottom:6px}
.val-item p{font-size:.85rem;color:var(--silver);line-height:1.9}

/* === TEAM === */
.team{padding:var(--section-py) 0;position:relative}
.team::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),var(--bg-2) 30%,var(--bg-2) 70%,var(--bg));pointer-events:none}
.team .container{position:relative;z-index:1}
.team-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.team-img{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.team-img img{width:100%;height:460px;object-fit:cover;transition:transform 1s var(--ease)}
.team-img:hover img{transform:scale(1.05)}
.team-img::after{content:'';position:absolute;inset:0;border:1px solid rgba(201,165,78,.08);border-radius:var(--radius-xl);pointer-events:none}
.team-img::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(4,8,15,.3),transparent 40%);z-index:1;pointer-events:none}
.team-body .sec-tag{justify-content:flex-start}
.team-body h2{font-size:2.2rem;font-weight:800;margin-bottom:22px;line-height:1.35}
.team-body p{color:var(--silver);font-size:1rem;line-height:2.1;margin-bottom:32px}
.team-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tnum{text-align:center;padding:24px 14px;background:var(--bg-card);border:1px solid rgba(201,165,78,.04);border-radius:16px;transition:all .4s var(--ease);backdrop-filter:blur(8px)}
.tnum:hover{border-color:rgba(201,165,78,.12);transform:translateY(-3px)}
.tnum .n{font-size:2rem;font-weight:800;background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px}
.tnum .t{font-size:.78rem;color:var(--silver)}

/* === CONTACT === */
.contact{padding:var(--section-py) 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px}
.contact-info h2{font-size:2.2rem;font-weight:800;margin-bottom:14px;line-height:1.35}
.contact-info>p{color:var(--silver);font-size:1rem;line-height:2;margin-bottom:32px}
.c-items{display:flex;flex-direction:column;gap:16px}
.c-item{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--bg-card);border:1px solid rgba(201,165,78,.04);border-radius:18px;transition:all .4s var(--ease);backdrop-filter:blur(8px)}
.c-item:hover{border-color:rgba(201,165,78,.12);background:rgba(201,165,78,.03);transform:translateX(-6px)}
.c-item .ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(201,165,78,.06);border:1px solid rgba(201,165,78,.06);border-radius:13px;color:var(--gold);flex-shrink:0;transition:.3s}
.c-item:hover .ic{background:rgba(201,165,78,.1);transform:scale(1.08)}
.c-item .ic svg{width:22px;height:22px}
.c-item .lbl{font-size:.72rem;color:var(--gold);font-weight:700;margin-bottom:3px;letter-spacing:1px;text-transform:uppercase}
.c-item .val{font-size:.92rem;font-weight:500;direction:ltr;text-align:right}

.form-wrap{background:var(--bg-card);border:1px solid rgba(201,165,78,.06);border-radius:var(--radius-xl);padding:48px 40px;position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.form-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold-g)}
.form-wrap::after{content:'';position:absolute;top:0;right:0;width:250px;height:250px;background:radial-gradient(circle,rgba(201,165,78,.03),transparent 70%);pointer-events:none}
.form-wrap h3{font-size:1.4rem;font-weight:700;background:var(--gold-g);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:32px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-group{margin-bottom:18px}
.f-group label{display:block;font-size:.82rem;font-weight:700;color:var(--silver);margin-bottom:8px}
.f-group input,.f-group textarea,.f-group select{width:100%;padding:14px 18px;background:rgba(4,8,15,.5);border:1px solid rgba(201,165,78,.06);border-radius:13px;color:var(--ivory);font-family:inherit;font-size:.92rem;transition:all .3s var(--ease);direction:rtl}
.f-group input:focus,.f-group textarea:focus,.f-group select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,165,78,.06);background:rgba(4,8,15,.7)}
.f-group input::placeholder,.f-group textarea::placeholder{color:var(--silver-dim)}
.f-group textarea{min-height:140px;resize:vertical}
.f-group select{cursor:pointer;-webkit-appearance:none;appearance:none}
.f-group select option{background:var(--bg-3);color:var(--ivory)}
.f-submit{margin-top:8px}
.f-submit .btn{width:100%;justify-content:center;padding:18px;font-size:1rem}

.form-ok{display:none;text-align:center;padding:48px 24px}
.form-ok.show{display:block;animation:formOkIn .6s var(--ease-bounce)}
@keyframes formOkIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.form-ok .check{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:rgba(46,204,113,.06);border:2px solid rgba(46,204,113,.15);border-radius:50%;margin:0 auto 18px;color:#2ecc71}
.form-ok .check svg{width:32px;height:32px}
.form-ok h4{font-size:1.3rem;color:#2ecc71;margin-bottom:10px}
.form-ok p{color:var(--silver);font-size:.92rem}

/* Honeypot */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* === FOOTER === */
.footer{padding:64px 0 0;background:linear-gradient(180deg,var(--bg),var(--bg-2));border-top:1px solid rgba(201,165,78,.04);position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,78,.15),transparent)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-bottom:48px}
.footer-brand{display:flex;flex-direction:column;gap:18px}
.footer-brand p{color:var(--silver);font-size:.9rem;line-height:2}
.f-social{display:flex;gap:12px;margin-top:4px}
.f-social a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(201,165,78,.08);border-radius:12px;color:var(--gold);transition:all .4s var(--ease)}
.f-social a:hover{background:rgba(201,165,78,.08);border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-gold)}
.f-social a svg{width:18px;height:18px}
.footer-col h4{font-size:1.05rem;font-weight:700;color:var(--gold-light);margin-bottom:18px;position:relative;padding-bottom:10px}
.footer-col h4::after{content:'';position:absolute;bottom:0;right:0;width:28px;height:2px;background:var(--gold-g);border-radius:2px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-col ul a{color:var(--silver);font-size:.88rem;transition:all .3s var(--ease);display:flex;align-items:center;gap:6px}
.footer-col ul a::before{content:'';width:0;height:1px;background:var(--gold);transition:width .3s}
.footer-col ul a:hover{color:var(--gold);padding-right:4px}
.footer-col ul a:hover::before{width:12px}
.footer-bottom{padding:22px 0;border-top:1px solid rgba(201,165,78,.04);display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--silver)}

/* === SCROLL TOP === */
.scroll-top{position:fixed;bottom:32px;left:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--gold-g);color:var(--bg);border:none;border-radius:14px;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .5s var(--ease);z-index:90;box-shadow:0 8px 28px rgba(201,165,78,.2)}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(201,165,78,.35)}
.scroll-top svg{width:20px;height:20px}

/* === WA FLOAT === */
.wa-float{position:fixed;bottom:32px;right:32px;z-index:90}
.wa-float a{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#25d366;border-radius:50%;color:#fff;box-shadow:0 8px 28px rgba(37,211,102,.3);transition:all .4s var(--ease);position:relative}
.wa-float a::after{content:'';position:absolute;inset:-4px;border:2px solid rgba(37,211,102,.2);border-radius:50%;animation:waPulse 2s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
.wa-float a:hover{transform:scale(1.1);box-shadow:0 12px 36px rgba(37,211,102,.4)}
.wa-float a svg{width:28px;height:28px;fill:currentColor;stroke:none}

/* === REVEAL ANIMATION === */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}
.reveal-d2{transition-delay:.2s}
.reveal-d3{transition-delay:.3s}
.reveal-d4{transition-delay:.4s}

/* Reveal from sides */
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal-left.visible{opacity:1;transform:translateX(0)}

/* ============================================
   RESPONSIVE — FULL MOBILE OPTIMIZATION
   ============================================ */

/* === LARGE TABLETS & SMALL DESKTOPS === */
@media(max-width:1024px){
    :root{--section-py:80px}
    .container{padding:0 24px}
    .about-grid{grid-template-columns:1fr;gap:40px}
    .about-img{order:-1}
    .about-body .sec-tag{justify-content:center}
    .about-body{text-align:center}
    .about-features{grid-template-columns:1fr 1fr}
    .about-body h2{font-size:1.9rem}

    .contact-grid{grid-template-columns:1fr;gap:40px}
    .team-grid{grid-template-columns:1fr;gap:40px}
    .team-img{order:-1}
    .team-body .sec-tag{justify-content:center}
    .team-body{text-align:center}
    .team-body h2{font-size:1.9rem}

    .srv-grid{grid-template-columns:1fr}
    .trio-grid{grid-template-columns:1fr}
    .val-grid{grid-template-columns:1fr 1fr}
    .stats-inner{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2)::after{display:none}
    .footer-grid{grid-template-columns:1fr 1fr}
    .hero-deco{display:none}
}

/* === TABLETS === */
@media(max-width:768px){
    :root{--section-py:64px;--nav-h:70px}
    .container{padding:0 20px}

    /* Mobile Navigation */
    .nav{padding:14px 0}
    .nav.scrolled{padding:8px 0}
    .logo-mark{width:170px;height:58px}
    .nav-menu{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(4,8,15,.98);
        backdrop-filter:blur(30px) saturate(1.4);
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:8px;
        z-index:998;
        padding:20px
    }
    .nav-menu.open{display:flex}
    .nav-menu a{font-size:1.1rem;padding:16px 32px}
    .nav-cta-link{border:1.5px solid rgba(201,165,78,.3) !important;margin-top:12px !important;padding:14px 36px !important}
    .burger{display:flex;z-index:999}

    /* Hero Mobile */
    .hero{min-height:100vh;min-height:100dvh;padding-top:var(--nav-h);padding-bottom:40px}
    .hero h1{font-size:1.8rem;line-height:1.4;margin-bottom:16px}
    .hero h1+p{font-size:.9rem;line-height:1.9;margin-bottom:28px;padding:0 4px}
    .hero-btns{flex-direction:column;gap:12px;padding:0 16px}
    .hero-btns .btn{width:100%;justify-content:center;padding:14px 28px;font-size:.92rem}
    .hero-divider{margin-bottom:24px}
    .hero-divider span{width:60px}

    /* Stats Mobile */
    .stats-bar{margin-top:-40px}
    .stats-inner{grid-template-columns:1fr 1fr;border-radius:var(--radius-lg)}
    .stat{padding:28px 16px}
    .stat-num{font-size:2.2rem}
    .stat-label{font-size:.75rem}
    .stat-icon{width:40px;height:40px;margin-bottom:10px}
    .stat-icon svg{width:18px;height:18px}

    /* About Mobile */
    .about-img img{height:280px}
    .about-badge{bottom:16px;right:16px;padding:14px 20px;border-radius:14px}
    .about-badge .num{font-size:2rem}
    .about-badge .txt{font-size:.65rem}
    .about-body h2{font-size:1.6rem}
    .about-body p{font-size:.92rem;line-height:1.95}
    .about-features{grid-template-columns:1fr;gap:10px}
    .about-feat{padding:14px 16px;gap:12px}
    .about-feat .ic{width:36px;height:36px;border-radius:10px}
    .about-feat .ic svg{width:16px;height:16px}
    .about-feat span{font-size:.82rem}

    /* Services Mobile */
    .srv-card{padding:32px 24px;border-radius:var(--radius-lg)}
    .srv-ic{width:52px;height:52px;margin-bottom:18px;border-radius:14px}
    .srv-ic svg{width:24px;height:24px}
    .srv-card h3{font-size:1.1rem;margin-bottom:10px}
    .srv-card p{font-size:.85rem;line-height:1.9}
    .srv-num{font-size:3rem}

    /* Values Mobile */
    .val-grid{grid-template-columns:1fr}
    .val-item{padding:22px 20px;gap:14px;border-radius:14px}
    .val-ic{width:42px;height:42px;border-radius:11px}
    .val-ic svg{width:20px;height:20px}
    .val-item h4{font-size:.92rem}
    .val-item p{font-size:.82rem;line-height:1.85}
    .trio-card{padding:32px 24px;border-radius:var(--radius-lg)}
    .trio-ic{width:56px;height:56px;margin-bottom:18px}
    .trio-ic svg{width:26px;height:26px}
    .trio-card h3{font-size:1.15rem}
    .trio-card p{font-size:.85rem;line-height:1.9}

    /* Team Mobile */
    .team-img img{height:280px}
    .team-body h2{font-size:1.6rem}
    .team-body p{font-size:.92rem;line-height:1.95;margin-bottom:24px}
    .team-nums{grid-template-columns:repeat(3,1fr);gap:10px}
    .tnum{padding:18px 10px;border-radius:12px}
    .tnum .n{font-size:1.5rem}
    .tnum .t{font-size:.7rem}

    /* Contact Mobile */
    .contact-info h2{font-size:1.6rem;text-align:center}
    .contact-info>p{text-align:center;font-size:.92rem}
    .c-item{padding:16px 18px;gap:14px;border-radius:14px}
    .c-item .ic{width:42px;height:42px;border-radius:11px}
    .c-item .ic svg{width:20px;height:20px}
    .c-item .lbl{font-size:.68rem}
    .c-item .val{font-size:.85rem}
    .c-item:hover{transform:translateX(0)}
    .form-wrap{padding:28px 20px;border-radius:var(--radius-lg)}
    .form-wrap h3{font-size:1.2rem;margin-bottom:24px}
    .f-row{grid-template-columns:1fr;gap:0}
    .f-group{margin-bottom:14px}
    .f-group label{font-size:.78rem;margin-bottom:6px}
    .f-group input,.f-group textarea,.f-group select{padding:12px 16px;font-size:.88rem;border-radius:11px}
    .f-group textarea{min-height:110px}
    .f-submit .btn{padding:15px;font-size:.92rem}

    /* Section Headers Mobile */
    .sec-header{margin-bottom:40px}
    .sec-tag{font-size:.65rem;letter-spacing:3px;gap:8px}
    .sec-tag::before,.sec-tag::after{width:24px}
    .sec-title{font-size:1.6rem;margin-bottom:14px}
    .sec-desc{font-size:.9rem;line-height:1.9}

    /* Footer Mobile */
    .footer{padding:48px 0 0}
    .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:32px}
    .footer-brand{align-items:center;text-align:center}
    .footer-brand p{font-size:.85rem}
    .f-social{justify-content:center}
    .footer-col{text-align:center}
    .footer-col h4{font-size:.95rem}
    .footer-col h4::after{right:50%;transform:translateX(50%)}
    .footer-col ul{align-items:center}
    .footer-col ul a{justify-content:center}
    .footer-bottom{flex-direction:column;gap:8px;text-align:center;padding:18px 0}
    .footer-bottom p{font-size:.72rem}

    /* Fixed buttons */
    .scroll-top,.wa-float{bottom:20px}
    .scroll-top{left:20px;width:42px;height:42px;border-radius:12px}
    .scroll-top svg{width:18px;height:18px}
    .wa-float{right:20px}
    .wa-float a{width:50px;height:50px}
    .wa-float a svg{width:24px;height:24px}
}

/* === SMALL PHONES === */
@media(max-width:480px){
    .container{padding:0 16px}
    :root{--section-py:52px}

    /* Stats stacked */
    .stats-inner{grid-template-columns:1fr;border-radius:var(--radius)}
    .stat::after{display:none !important}
    .stat{padding:24px 16px}
    .stat:not(:last-child){border-bottom:1px solid rgba(201,165,78,.04)}
    .stat-num{font-size:2rem}

    /* Hero compact */
    .hero h1{font-size:1.5rem;line-height:1.45}
    .hero h1+p{font-size:.85rem;padding:0}
    .hero-btns{padding:0 8px}
    .hero-btns .btn{padding:13px 20px;font-size:.88rem}
    .hero-divider span{width:48px}

    /* Team numbers stacked */
    .team-nums{grid-template-columns:repeat(3,1fr);gap:8px}
    .tnum{padding:14px 8px}
    .tnum .n{font-size:1.3rem}
    .tnum .t{font-size:.65rem}

    /* Compact cards */
    .srv-card{padding:26px 20px}
    .srv-card h3{font-size:1.02rem}
    .srv-num{font-size:2.5rem}
    .trio-card{padding:26px 20px}
    .val-item{padding:18px 16px}
    .val-item p{font-size:.78rem}

    /* About compact */
    .about-img img{height:220px}
    .about-body h2,.team-body h2,.contact-info h2{font-size:1.4rem}

    /* Team compact */
    .team-img img{height:220px}

    /* Logo smaller */
    .logo-mark{width:150px;height:50px}
}

/* === VERY SMALL PHONES (320px) === */
@media(max-width:360px){
    .container{padding:0 14px}
    .hero h1{font-size:1.35rem}
    .hero h1+p{font-size:.82rem}
    .btn{padding:12px 18px;font-size:.85rem;gap:8px}
    .btn svg{width:16px;height:16px}
    .logo-mark{width:130px;height:44px}
    .stat-num{font-size:1.8rem}
    .about-body h2,.team-body h2,.contact-info h2{font-size:1.3rem}
    .sec-title{font-size:1.4rem}
    .tnum .n{font-size:1.2rem}
}

/* === Touch device optimizations === */
@media(hover:none){
    .srv-card:hover,.trio-card:hover,.val-item:hover,.stat:hover,.about-feat:hover,.c-item:hover,.tnum:hover{transform:none}
    .about-img:hover img,.team-img:hover img{transform:none}
}

/* === Landscape phone fix === */
@media(max-height:500px) and (orientation:landscape){
    .hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 60px}
    .hero h1{font-size:1.4rem}
    .hero h1+p{margin-bottom:20px}
    .nav-menu{overflow-y:auto}
}

/* === Safe area for notched phones === */
@supports(padding:max(0px)){
    .nav{padding-top:max(20px,env(safe-area-inset-top))}
    .nav.scrolled{padding-top:max(10px,env(safe-area-inset-top))}
    .footer-bottom{padding-bottom:max(22px,env(safe-area-inset-bottom))}
    .scroll-top{bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px))}
    .wa-float{bottom:max(20px,calc(env(safe-area-inset-bottom) + 8px))}
}