/* =========================================================================
   OSUSS ALTAMIZ — Glassmorphism theme (dark navy + amber gold)
   Reskins the existing component classes into a premium frosted-glass look.
   Same class names as before, so all templates transform at once.
   ========================================================================= */
@import url('colors_and_type.css');

/* ---------- Dark-glass token overrides (semantic aliases flip the theme) ---------- */
:root{
  --ink:#F4F1EA;                    /* warm off-white — primary text */
  --fg-1:#F4F1EA;
  --fg-2:rgba(244,241,234,.72);
  --fg-3:rgba(244,241,234,.48);
  --fg-on-dark-1:#fff;
  --fg-on-dark-2:rgba(244,241,234,.72);
  --fg-on-dark-3:rgba(244,241,234,.5);
  --gold:var(--brand-amber-500);
  --gold-soft:var(--brand-amber-300);
  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.13);
  --border-strong:rgba(255,255,255,.22);
  --border-inverse:rgba(255,255,255,.13);

  --glass:rgba(255,255,255,.05);
  --glass-2:rgba(255,255,255,.08);
  --glass-line:rgba(255,255,255,.13);
  --glass-line-2:rgba(255,255,255,.22);
  --blur:16px;

  --bg-0:#071319; --bg-1:#0a1e28; --bg-2:#0b2233;
  --radius-md:14px; --radius-lg:18px;
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-md:0 20px 44px -20px rgba(0,0,0,.6);
  --shadow-lg:0 34px 70px -28px rgba(0,0,0,.7);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.07);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0; min-height:100%;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); color:var(--fg-1);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.6; overflow-x:hidden; position:relative;
}
/* ambient background field + subtle grain */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 82% -6%, rgba(242,157,36,.16), transparent 58%),
    radial-gradient(900px 700px at 6% 8%, rgba(27,79,126,.30), transparent 56%),
    radial-gradient(1200px 900px at 60% 112%, rgba(15,53,86,.5), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%, #050f14);}
body::after{content:""; position:fixed; inset:0; z-index:-1; opacity:.4; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size:3px 3px;}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}

.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);}
.section{padding:var(--sp-9) 0;}
.section--tight{padding:var(--sp-8) 0;}
.muted{background:rgba(255,255,255,.02);}

/* ---------- glass primitive (shared look) ---------- */
.glass, .svc, .tool-card, .article, .model, .cred, .calc, .info-card, .member,
.hero__plate, .stats, .float-tag{
  background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--glass-line); box-shadow:var(--shadow-md), var(--shadow-inset);
}

/* ---------- Header ---------- */
.app-header{position:sticky; top:0; z-index:50;
  background:rgba(8,18,24,.55); backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid var(--border-subtle);}
.app-header__inner{display:flex; align-items:center; gap:var(--sp-5); height:74px;}
[dir="rtl"] .app-header__inner{flex-direction:row-reverse;}
.brand-lockup{display:flex; align-items:center; gap:12px;}
.brand-lockup__mark{width:32px; height:40px; flex-shrink:0; object-fit:contain;}
.brand-lockup__ar{font-family:var(--font-display-ar); font-weight:700; font-size:18px; line-height:1.1; color:var(--ink); direction:rtl;}
.brand-lockup__en{font-family:var(--font-display-en); font-weight:600; font-size:10px; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);}
.app-nav{display:flex; gap:var(--sp-5); margin-inline-start:auto;}
.app-nav a{font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--fg-2); padding:6px 0; border-bottom:2px solid transparent; transition:color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);}
.app-nav a:hover{color:var(--ink);}
.app-nav a.active{border-bottom-color:var(--gold); color:var(--ink);}
.app-actions{display:flex; align-items:center; gap:12px;}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body); font-size:14px; font-weight:600; padding:12px 22px; border:1px solid transparent; border-radius:999px; cursor:pointer; transition:all var(--dur-base) var(--ease-standard); display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.btn:active{opacity:.92;}
.btn--primary{background:linear-gradient(135deg, var(--brand-amber-300), var(--brand-amber-500)); color:#20180a; box-shadow:0 12px 30px -12px rgba(242,157,36,.55);}
.btn--primary:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(242,157,36,.65);}
.btn--secondary{background:var(--glass-2); color:var(--ink); border-color:var(--glass-line);}
.btn--secondary:hover{background:rgba(255,255,255,.14); transform:translateY(-2px);}
.btn--outline{background:var(--glass); color:var(--ink); border-color:var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.btn--outline:hover{border-color:var(--glass-line-2); background:rgba(255,255,255,.12); transform:translateY(-2px);}
.btn--ghost{background:transparent; color:var(--fg-2); padding:12px 10px;}
.btn--ghost:hover{color:var(--gold);}
.btn--ondark{color:var(--ink); border-color:rgba(255,255,255,.25);}
.btn--ondark:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn--login{padding:11px 16px;}
.btn .i{width:18px; height:18px;}

/* ---------- Lang toggle + icons ---------- */
.lang-toggle{display:inline-flex; background:var(--glass-2); border:1px solid var(--glass-line); border-radius:999px; padding:3px;}
.lang-toggle__btn{font-family:var(--font-display); font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; border:0; background:transparent; color:var(--fg-2); cursor:pointer; transition:all var(--dur-base) var(--ease-standard); letter-spacing:.04em;}
.lang-toggle__btn.active{background:linear-gradient(135deg,var(--brand-amber-300),var(--brand-amber-500)); color:#20180a;}
.icon-btn{width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon-btn.wa{background:#25D366; color:#fff;}
.icon-btn.wa:hover{background:#1da851;}
.icon-btn .i{width:20px; height:20px;}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; color:var(--ink); padding:6px;}
.nav-toggle .i{width:26px; height:26px;}

/* ---------- Hero ---------- */
.hero{position:relative; background:transparent; color:var(--ink); overflow:hidden; padding:var(--sp-9) 0 calc(var(--sp-9) + 24px);}
.hero__bg-grid{position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size:60px 60px; pointer-events:none; mask-image:radial-gradient(1000px 600px at 70% 20%, #000, transparent 80%);}
.hero__watermark{position:absolute; right:-80px; bottom:-100px; width:560px; height:560px; background:url('assets/logomark-tight.png') no-repeat center / contain; opacity:.06; filter:brightness(2.5); pointer-events:none;}
[dir="rtl"] .hero__watermark{right:auto; left:-80px;}
.hero__inner{position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-8); align-items:center;}
[dir="rtl"] .hero__inner{grid-template-columns:1fr 1.4fr;}
.hero__eyebrow{font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px; display:inline-flex; align-items:center; gap:10px;}
[dir="rtl"] .hero__eyebrow{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:16px;}
.hero__eyebrow::before{content:""; width:30px; height:1px; background:linear-gradient(90deg,var(--gold),transparent);}
.hero__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem, 4.4vw + 1rem, 4.6rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 var(--sp-5); color:var(--ink);}
[dir="rtl"] .hero__title{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.22; font-weight:700;}
.hero__title em{color:var(--gold); font-style:normal;}
.hero__lede{font-family:var(--font-body); font-size:18px; line-height:1.65; color:var(--fg-2); margin:0 0 var(--sp-6); max-width:560px;}
[dir="rtl"] .hero__lede{line-height:1.9;}
.hero__cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.hero__plate{position:relative; padding:var(--sp-6); border-radius:var(--radius-lg); border-inline-start:2px solid var(--gold);}
.hero__plate-title{font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;}
[dir="rtl"] .hero__plate-title{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:16px;}
.hero__plate-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-mono); font-size:12px; gap:12px;}
.hero__plate-row:last-child{border-bottom:0;}
.hero__plate-row span:first-child{color:var(--fg-3); text-transform:uppercase; letter-spacing:.12em; font-size:10px; align-self:center;}
.hero__plate-row span:last-child{color:var(--ink);}
[dir="rtl"] .hero__plate-row span:first-child{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:12px;}

/* hero index strip */
.hero__index{position:relative; z-index:2; margin-top:var(--sp-7); border-top:1px solid var(--glass-line); display:grid; grid-template-columns:repeat(4,1fr);}
.hero__index a{display:flex; flex-direction:column; gap:7px; padding:18px; border-inline-start:1px solid var(--border-subtle); transition:background var(--dur-base) var(--ease-standard);}
.hero__index a:first-child{border-inline-start:0;}
.hero__index a:hover{background:rgba(255,255,255,.05);}
.hero__index .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--gold);}
.hero__index .t{font-family:var(--font-display-ar); font-size:16px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:7px;}
.hero__index .t .i{width:15px; height:15px; color:var(--fg-3); transition:transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);}
.hero__index a:hover .t .i{color:var(--gold); transform:translate(-3px,-3px);}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative; background:transparent; color:#fff; overflow:hidden; border-bottom:1px solid var(--border-subtle);}
.page-hero__inner{position:relative; z-index:2; padding:var(--sp-8) 0;}
.page-hero h1{font-family:var(--font-display); color:#fff; font-weight:800; font-size:clamp(2rem, 3vw + 1rem, 3.4rem); letter-spacing:-.02em; margin:0 0 10px;}
[dir="rtl"] .page-hero h1{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.3; font-weight:700;}
.crumb{font-family:var(--font-mono); font-size:12px; color:var(--fg-3); letter-spacing:.06em; margin-bottom:14px; display:flex; gap:8px;}
[dir="rtl"] .crumb{font-family:var(--font-display-ar); letter-spacing:0; font-size:14px;}
.crumb a:hover{color:var(--gold);}
.page-hero .lede{font-size:18px; color:var(--fg-2); max-width:640px; margin:6px 0 0;}
[dir="rtl"] .page-hero .lede{line-height:1.9;}

/* ---------- Sections ---------- */
.section__eyebrow{font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;}
[dir="rtl"] .section__eyebrow{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:16px;}
.section__eyebrow::before{content:""; width:30px; height:1px; background:linear-gradient(90deg,var(--gold),transparent);}
.section__title{font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 2.6vw + 1rem, 3rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 var(--sp-4); color:var(--ink)!important; max-width:720px;}
[dir="rtl"] .section__title{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.3;}
.section__lede{font-family:var(--font-body); font-size:18px; line-height:1.65; color:var(--fg-2); max-width:660px; margin:0 0 var(--sp-7);}
[dir="rtl"] .section__lede{line-height:1.9;}
.section--center{text-align:center;}
.section--center .section__eyebrow, .section--center .section__title, .section--center .section__lede{margin-inline:auto;}
.section--center .section__eyebrow{justify-content:center;}
.band-navy{position:relative; border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.5rem) !important; background:linear-gradient(160deg, rgba(15,53,86,.55), rgba(11,30,40,.55)); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); overflow:hidden;}
.band-navy .section__title, .band-navy h2, .band-navy h3{color:#fff;}

/* ---------- Image placeholders (brand-styled) ---------- */
.photo{position:relative; background:linear-gradient(160deg, rgba(27,79,126,.6), rgba(11,30,40,.85)); color:var(--fg-2); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; min-height:100%; overflow:hidden;}
[dir="rtl"] .photo{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:14px;}
.photo::before{content:""; position:absolute; inset:0; opacity:.09; background-image:repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 22px);}
.photo span{position:relative; z-index:2; padding:0 1rem;}
.figure{aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--glass-line);}

/* ---------- Service cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.svc{border-radius:var(--radius-lg); padding:var(--sp-6); display:flex; flex-direction:column; gap:12px; transition:transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);}
.svc:hover{border-color:var(--glass-line-2); box-shadow:var(--shadow-lg); transform:translateY(-6px);}
.svc__num{font-family:var(--font-mono); font-size:11px; color:var(--gold); letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:10px;}
.svc__num::before{content:""; width:18px; height:1px; background:var(--gold);}
.svc__ico{width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg, rgba(242,157,36,.22), rgba(242,157,36,.05)); border:1px solid rgba(242,157,36,.28); color:var(--gold); display:inline-flex; align-items:center; justify-content:center;}
.svc__ico .i{width:24px; height:24px;}
.svc__title{font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.2; color:var(--ink); margin:0; letter-spacing:-.01em;}
[dir="rtl"] .svc__title{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.4;}
.svc__desc{font-size:14px; line-height:1.6; color:var(--fg-2); margin:0;}
[dir="rtl"] .svc__desc{line-height:1.9;}
.svc__cta{font-family:var(--font-display); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); display:inline-flex; align-items:center; gap:6px; margin-top:auto; border-top:1px solid var(--glass-line); padding-top:16px; transition:gap var(--dur-base) var(--ease-standard);}
[dir="rtl"] .svc__cta{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0;}
.svc:hover .svc__cta{gap:10px;}

/* ---------- Stats ---------- */
.stats{border-radius:var(--radius-lg); padding:var(--sp-6) 0;}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6);}
.stat__num{font-family:var(--font-display); font-weight:700; font-size:48px; line-height:1; color:var(--gold-soft); letter-spacing:-.02em;}
.stat__label{font-family:var(--font-display); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-2); margin-top:8px;}
[dir="rtl"] .stat__label{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:15px;}

/* ---------- Why us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6) var(--sp-7);}
.why-item{display:flex; gap:14px;}
.why-item .ico{flex-shrink:0; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, rgba(242,157,36,.2), rgba(242,157,36,.05)); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(242,157,36,.26);}
.why-item .ico .i{width:22px; height:22px;}
.why-item h4{font-family:var(--font-display); color:var(--ink); margin:0 0 6px; font-size:18px;}
[dir="rtl"] .why-item h4{font-family:var(--font-display-ar);}
.why-item p{color:var(--fg-2); font-size:14px; margin:0; line-height:1.6;}
[dir="rtl"] .why-item p{line-height:1.9;}

/* ---------- Prose + feature rows ---------- */
.prose{max-width:720px;}
.prose p{color:var(--fg-2); font-size:16px; line-height:1.7; margin:0 0 var(--sp-4);}
[dir="rtl"] .prose p{line-height:2;}
.prose h2, .prose h3{font-family:var(--font-display); color:var(--ink); margin:var(--sp-6) 0 var(--sp-3);}
[dir="rtl"] .prose h2, [dir="rtl"] .prose h3{font-family:var(--font-display-ar);}
.prose ul{list-style:disc; padding-inline-start:1.4em; display:grid; gap:8px; margin:var(--sp-3) 0; color:var(--fg-2);}
.prose a{color:var(--gold); text-decoration:underline;}
.prose img{border-radius:var(--radius-lg); margin:var(--sp-4) 0;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center;}
.checklist{display:grid; gap:12px; margin:var(--sp-4) 0 0;}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--fg-1); font-size:15px;}
.checklist .i{width:20px; height:20px; color:var(--gold); flex-shrink:0; margin-top:2px;}

/* team */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);}
.member{border-radius:var(--radius-lg); padding:var(--sp-5);}
.member .avatar{aspect-ratio:1; border-radius:14px; overflow:hidden; margin-bottom:12px;}
.member .name{font-family:var(--font-display); font-weight:600; color:var(--ink);}
[dir="rtl"] .member .name{font-family:var(--font-display-ar);}
.member .role{font-size:13px; color:var(--gold-soft);}

/* credentials / logo strip */
.cred-row{display:flex; flex-wrap:wrap; gap:var(--sp-4);}
.cred{display:flex; align-items:center; gap:10px; padding:16px 20px; border-radius:14px; font-size:14px; color:var(--fg-1);}
.cred .i{width:20px; height:20px; color:var(--gold);}
.logo-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:stretch;}
.logo-strip .cred{justify-content:center; color:var(--fg-2); font-family:var(--font-display-ar); font-weight:600; min-height:66px;}

/* ---------- Portfolio gallery ---------- */
.filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-6);}
.chip{font-family:var(--font-display); font-size:13px; font-weight:500; padding:9px 18px; border-radius:999px; border:1px solid var(--glass-line); background:var(--glass); color:var(--fg-1); cursor:pointer; transition:all var(--dur-base) var(--ease-standard); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
[dir="rtl"] .chip{font-family:var(--font-display-ar);}
.chip:hover{border-color:var(--glass-line-2);}
.chip.active{background:linear-gradient(135deg,var(--brand-amber-300),var(--brand-amber-500)); color:#20180a; border-color:transparent;}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tile{position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); display:block; border:1px solid var(--glass-line); transition:transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);}
.tile:hover{transform:translateY(-6px); border-color:var(--glass-line-2);}
.tile .photo{min-height:100%;}
.tile .meta{position:absolute; inset-inline:0; bottom:0; z-index:3; padding:var(--sp-4); background:linear-gradient(0deg, rgba(5,12,16,.92), transparent); color:#fff;}
.tile .meta .t{font-family:var(--font-display); font-weight:600; font-size:16px;}
[dir="rtl"] .tile .meta .t{font-family:var(--font-display-ar);}
.tile .meta .s{font-size:12px; color:var(--fg-3); margin-top:2px;}
.tile .badge{position:absolute; top:12px; inset-inline-start:12px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--gold); color:#20180a; padding:4px 8px; border-radius:6px;}

/* model designs */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.model{border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);}
.model:hover{transform:translateY(-6px); border-color:var(--glass-line-2);}
.model .thumb{aspect-ratio:4/3;}
.model .b{padding:16px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.model .b .t{font-family:var(--font-display); font-weight:600; color:var(--ink);}
[dir="rtl"] .model .b .t{font-family:var(--font-display-ar);}
.model .b .x{font-family:var(--font-mono); font-size:12px; color:var(--gold-soft);}

/* project / design detail */
.spec-table{width:100%; border-collapse:collapse;}
.spec-table th, .spec-table td{text-align:start; padding:13px 0; border-bottom:1px solid var(--glass-line); font-size:14px; color:var(--fg-1);}
.spec-table th{font-family:var(--font-display); color:var(--fg-3); font-weight:500; width:40%;}
[dir="rtl"] .spec-table th{font-family:var(--font-display-ar);}
.gallery-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.gallery-strip .figure{aspect-ratio:1;}
.cover-figure{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:var(--sp-6); border:1px solid var(--glass-line);}
.cover-figure img{width:100%; height:100%; object-fit:cover;}
.article-meta{display:flex; gap:14px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--fg-3); margin-top:12px;}

/* ---------- Knowledge / articles ---------- */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.article{display:flex; flex-direction:column; height:100%; border-radius:var(--radius-lg); overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);}
.article:hover{box-shadow:var(--shadow-lg); transform:translateY(-6px); border-color:var(--glass-line-2);}
.article .thumb{aspect-ratio:16/9;}
.article .body{padding:var(--sp-5); display:flex; flex-direction:column; gap:8px; flex:1;}
.article .tag{font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
[dir="rtl"] .article .tag{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0;}
.article h3{font-family:var(--font-display); font-size:19px; color:var(--ink); margin:0; line-height:1.3;}
[dir="rtl"] .article h3{font-family:var(--font-display-ar);}
.article p{font-size:14px; color:var(--fg-2); margin:0; line-height:1.6;}
[dir="rtl"] .article p{line-height:1.9;}
.article .date{font-family:var(--font-mono); font-size:11px; color:var(--fg-3); margin-top:auto; letter-spacing:.06em;}

/* tools */
.tool-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tool-card{display:flex; flex-direction:column; gap:12px; padding:var(--sp-5); border-radius:var(--radius-lg); height:100%; transition:transform var(--dur-base) var(--ease-standard), border-color var(--dur-base);}
.tool-card:hover{transform:translateY(-6px); border-color:var(--glass-line-2);}
.tool-card .ico{width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg, rgba(242,157,36,.22), rgba(242,157,36,.05)); border:1px solid rgba(242,157,36,.28); color:var(--gold); display:inline-flex; align-items:center; justify-content:center;}
.tool-card .ico .i{width:24px; height:24px;}
.tool-card h3{font-family:var(--font-display); font-size:18px; color:var(--ink); margin:0;}
[dir="rtl"] .tool-card h3{font-family:var(--font-display-ar);}
.tool-card p{font-size:14px; color:var(--fg-2); margin:0; line-height:1.6; flex:1;}
[dir="rtl"] .tool-card p{line-height:1.9;}
.badge-soon{align-self:flex-start; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--glass-2); color:var(--fg-2); padding:4px 8px; border-radius:6px; border:1px solid var(--glass-line);}

/* mini calc */
.calc{border-radius:var(--radius-lg); padding:var(--sp-6); max-width:520px;}
.calc .row{display:grid; grid-template-columns:1fr 120px; gap:12px; align-items:center; margin-bottom:12px;}
.calc label{font-size:14px; color:var(--fg-1); font-weight:500;}
.calc input{padding:9px 12px; border:1px solid var(--glass-line); border-radius:12px; font-family:var(--font-mono); text-align:end; background:rgba(255,255,255,.04); color:var(--ink);}
.calc .out{margin-top:14px; padding-top:14px; border-top:1px solid var(--glass-line); display:flex; justify-content:space-between; align-items:baseline;}
.calc .out .v{font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--gold-soft);}
.calc .out .v small{font-size:14px; color:var(--fg-3); font-weight:500;}

/* ---------- Forms / contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-7); align-items:start;}
.form{display:grid; gap:var(--sp-4);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}
.field{display:grid; gap:6px;}
.field label{font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--fg-2); text-transform:uppercase;}
[dir="rtl"] .field label{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:15px;}
.field input, .field select, .field textarea{font-family:var(--font-body); font-size:15px; padding:12px 14px; border:1px solid var(--glass-line); border-radius:12px; background:rgba(255,255,255,.04); color:var(--ink); width:100%; transition:border-color var(--dur-base), background var(--dur-base);}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-3);}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,.07);}
.info-card{border-radius:var(--radius-lg); padding:var(--sp-6);}
.info-card h3{font-family:var(--font-display); color:var(--ink); margin:0 0 var(--sp-5);}
[dir="rtl"] .info-card h3{font-family:var(--font-display-ar);}
.info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:var(--sp-4);}
.info-row .ico{flex-shrink:0; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(242,157,36,.2), rgba(242,157,36,.05)); border:1px solid rgba(242,157,36,.26); color:var(--gold); display:inline-flex; align-items:center; justify-content:center;}
.info-row .ico .i{width:20px; height:20px;}
.info-row .t{font-weight:600; color:var(--ink); font-size:15px;}
.info-row .s{color:var(--fg-2); font-size:14px;}
.map-embed{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--glass-line); margin-top:var(--sp-6);}

/* ---------- CTA band ---------- */
.cta-band{position:relative; background:linear-gradient(160deg, rgba(27,79,126,.5), rgba(11,30,40,.6)); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); color:#fff; border-radius:var(--radius-lg); padding:var(--sp-8); text-align:center; overflow:hidden; box-shadow:var(--shadow-lg);}
.cta-band__grid{position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px); background-size:48px 48px;}
.cta-band > *{position:relative; z-index:2;}
.cta-band h2{font-family:var(--font-display); color:#fff; margin:0 0 12px; font-size:clamp(1.6rem, 2vw + 1rem, 2.4rem);}
[dir="rtl"] .cta-band h2{font-family:var(--font-display-ar);}
.cta-band p{color:var(--fg-2); margin:0 auto var(--sp-5); max-width:540px;}
.cta-band .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---------- Portal cards ---------- */
.portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.portal-card{position:relative; display:block; background:linear-gradient(160deg, rgba(15,53,86,.5), rgba(11,30,40,.62)); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); color:#fff; border-radius:var(--radius-lg); border-inline-start:2px solid var(--gold); border-top:1px solid var(--glass-line); border-right:1px solid var(--glass-line); border-bottom:1px solid var(--glass-line); padding:var(--sp-6); overflow:hidden; transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);}
.portal-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.portal-card__grid{position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:40px 40px; pointer-events:none;}
.portal-card > *{position:relative; z-index:2;}
.portal-card .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;}
.portal-card .eyebrow .i{width:18px; height:18px;}
.portal-card h3{font-family:var(--font-display-ar); font-size:24px; color:#fff; margin:0 0 8px;}
.portal-card p{font-size:14px; line-height:1.9; color:var(--fg-2); margin:0 0 18px; max-width:340px;}
.portal-card .go{font-family:var(--font-display-ar); font-size:14px; font-weight:600; color:var(--gold); display:inline-flex; align-items:center; gap:8px;}
.portal-card .go .i{width:18px; height:18px; transition:transform var(--dur-base) var(--ease-standard);}
.portal-card:hover .go .i{transform:translateX(-4px);}
.portal-card .tag{position:absolute; top:16px; inset-inline-end:16px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:6px;}
.portal-card .tag--live{background:var(--gold); color:#20180a;}
.portal-card .tag--soon{background:rgba(255,255,255,.1); color:var(--fg-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}

/* ---------- Footer ---------- */
.app-footer{background:linear-gradient(180deg, transparent, rgba(0,0,0,.35)); border-top:1px solid var(--glass-line); color:var(--fg-2); padding:var(--sp-8) 0 var(--sp-6);}
.app-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:var(--sp-6);}
.app-footer .flogo{height:54px; margin-bottom:16px; opacity:.9;}
.app-footer .fdesc{font-size:14px; line-height:1.8; color:var(--fg-2); max-width:320px;}
.app-footer h5{font-family:var(--font-display); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold-soft); margin:0 0 14px;}
[dir="rtl"] .app-footer h5{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:15px;}
.app-footer ul{display:flex; flex-direction:column; gap:10px;}
.app-footer a{color:var(--fg-2); font-size:14px; transition:color var(--dur-base) var(--ease-standard);}
.app-footer a:hover{color:var(--gold);}
.social{display:flex; gap:8px; margin-top:14px;}
.social a{width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--glass-line); color:var(--fg-2);}
.social a:hover{background:rgba(255,255,255,.06); color:var(--gold); border-color:var(--gold);}
.social .i{width:18px; height:18px;}
.app-footer__bottom{display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--glass-line); font-family:var(--font-mono); font-size:12px; color:var(--fg-3); gap:12px; flex-wrap:wrap;}
[dir="rtl"] .app-footer__bottom{font-family:var(--font-display-ar);}

/* whatsapp float */
.wa-float{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);}
.wa-float:hover{background:#1da851;}
.wa-float .i{width:28px; height:28px;}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);}
.reveal.in{opacity:1; transform:none;}

/* bilingual long-form blocks */
html[lang="ar"] [data-only="en"], html[lang="en"] [data-only="ar"]{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:1140px) and (min-width:981px){ .btn--login .txt{display:none;} }
@media (max-width:980px){
  .hero__inner, [dir="rtl"] .hero__inner{grid-template-columns:1fr;}
  .svc-grid, .article-grid, .tool-grid, .model-grid, .gallery, .why-grid{grid-template-columns:1fr 1fr;}
  .hero__index{grid-template-columns:1fr 1fr;}
  .hero__index a:nth-child(odd){border-inline-start:0;}
  .portal-grid{grid-template-columns:1fr;}
  .logo-strip{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .stats__grid{grid-template-columns:repeat(2,1fr);}
  .app-footer__grid{grid-template-columns:1fr 1fr;}
  .split, .contact-grid{grid-template-columns:1fr;}
  .app-nav{display:none; position:absolute; top:74px; inset-inline:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(8,18,24,.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--glass-line); padding:8px var(--gutter); margin:0;}
  .app-nav.open{display:flex;}
  .app-nav a{padding:13px 0; border-bottom:1px solid var(--border-subtle);}
  .nav-toggle{display:inline-flex; margin-inline-start:auto;}
}
@media (max-width:560px){
  .svc-grid, .article-grid, .tool-grid, .model-grid, .gallery, .why-grid, .team-grid, .stats__grid, .app-footer__grid, .form-row, .gallery-strip, .hero__index{grid-template-columns:1fr;}
  .hero__index a{border-inline-start:0; border-top:1px solid var(--border-subtle);}
  .hero__index a:first-child{border-top:0;}
  .logo-strip{grid-template-columns:1fr 1fr;}
  .hero__title{font-size:2.4rem;}
  .lang-toggle{display:none;}
  .app-actions .btn--primary .txt{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .reveal{opacity:1 !important; transform:none !important;}
}