/* Deverse Labs LLC — Dubai branch
   Light theme */

:root{
  --magenta:#951150;
  --magenta-2:#c2185b;
  --cyan:#0fe5f3;
  --violet:#a841f1;

  --ink:#0c1220;
  --ink-2:#3a4457;
  --ink-3:#6b768c;
  --line:#e4e7ee;
  --bg:#ffffff;
  --bg-2:#f6f7fb;
  --bg-3:#eef1f8;

  --radius:18px;
  --shadow-sm:0 1px 2px rgba(12,18,32,.06), 0 6px 18px rgba(12,18,32,.05);
  --shadow-md:0 10px 40px rgba(12,18,32,.10);
  --maxw:1180px;
  --font:"Space Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ar:"IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
html[dir="rtl"] body{font-family:var(--font-ar)}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand-tile{
  background:#0c1220; border-radius:12px; padding:7px 10px; display:flex; align-items:center;
  box-shadow:var(--shadow-sm);
}
.brand-tile img{height:26px; width:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt b{font-size:.95rem; letter-spacing:.02em}
.brand-txt span{font-size:.68rem; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase}

.nav{display:flex; gap:26px; margin-inline-start:auto; align-items:center}
.nav a{font-size:.82rem; letter-spacing:.10em; text-transform:uppercase; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent}
.nav a:hover{color:var(--magenta); border-bottom-color:var(--cyan)}
html[dir="rtl"] .nav a{letter-spacing:0; text-transform:none; font-size:.92rem}

.head-actions{display:flex; align-items:center; gap:12px; margin-inline-start:18px}
.lang{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:7px 14px; font-family:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
  color:var(--ink); display:flex; align-items:center; gap:7px; box-shadow:var(--shadow-sm);
}
.lang:hover{border-color:var(--magenta); color:var(--magenta)}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:40px; height:38px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:.92rem;
  font-family:inherit; cursor:pointer; border:1px solid transparent; transition:.18s ease;
}
.btn-primary{background:linear-gradient(100deg,var(--magenta),var(--magenta-2) 60%,var(--violet)); color:#fff; box-shadow:0 10px 26px rgba(149,17,80,.28)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(149,17,80,.34)}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--magenta)}

/* ---------- section furniture ---------- */
section{padding:88px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; letter-spacing:.20em; text-transform:uppercase; font-weight:600;
  color:var(--magenta); background:rgba(149,17,80,.07); border:1px solid rgba(149,17,80,.16);
  padding:7px 14px; border-radius:999px;
}
html[dir="rtl"] .eyebrow{letter-spacing:0; text-transform:none}
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.15}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700}
.ar-line{font-family:var(--font-ar); color:var(--ink-3); font-size:1rem; margin-top:8px; direction:rtl}
html[dir="rtl"] .ar-line{display:none}
.lead{color:var(--ink-2); font-size:1.05rem; max-width:62ch}
.sec-head{margin-bottom:44px}
.sec-head h2{margin-top:16px}
.rule{height:3px; width:64px; border-radius:2px; background:linear-gradient(90deg,var(--magenta),var(--cyan)); margin-top:18px}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:54px 0 84px;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(15,229,243,.16), transparent 60%),
    radial-gradient(760px 420px at 6% 8%, rgba(149,17,80,.10), transparent 62%),
    linear-gradient(180deg,#fbfbfe,#ffffff);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--bg-3) 1px, transparent 1px), linear-gradient(90deg,var(--bg-3) 1px, transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(700px 380px at 50% 30%, #000, transparent 75%);
  mask-image:radial-gradient(700px 380px at 50% 30%, #000, transparent 75%);
}
.hero-in{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.6rem); font-weight:700; margin:0}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--magenta),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .ar-line{font-size:1.25rem; color:var(--ink-2); margin-top:14px}
.hero p.lead{margin:20px 0 0}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-note{margin-top:26px; font-size:.85rem; color:var(--ink-3); display:flex; align-items:center; gap:9px}
.dot{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.16)}

.hero-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px;
  box-shadow:var(--shadow-md);
}
.hero-card h3{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.bars{display:flex; align-items:flex-end; gap:10px; height:150px; margin:22px 0 8px}
.bars i{flex:1; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,var(--cyan),rgba(15,229,243,.25)); animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.bars i:nth-child(4),.bars i:nth-child(7){background:linear-gradient(180deg,var(--magenta),rgba(149,17,80,.25))}
@keyframes grow{from{height:6%!important; opacity:.2} to{opacity:1}}
.hero-card .kv{display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; margin-top:14px; font-size:.85rem; color:var(--ink-2)}
.hero-card .kv b{color:var(--ink)}

/* ---------- stats ---------- */
.stats{background:var(--bg-2); border-block:1px solid var(--line); padding:44px 0}
.stats-in{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat b{display:block; font-size:clamp(1.7rem,3vw,2.3rem); font-weight:700; letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--magenta),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{font-size:.82rem; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
html[dir="rtl"] .stat span{text-transform:none; letter-spacing:0}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.about-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.about-list li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2)}
.tick{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:rgba(15,229,243,.18); color:var(--magenta); display:grid; place-items:center; font-size:.72rem; font-weight:700; margin-top:3px}
.dir-card{
  border-radius:22px; padding:38px 34px; text-align:center; color:#e7ebf3;
  background:
    radial-gradient(520px 220px at 80% -20%, rgba(15,229,243,.20), transparent 65%),
    radial-gradient(420px 240px at 5% 110%, rgba(149,17,80,.35), transparent 65%),
    #0c1220;
  box-shadow:var(--shadow-md);
}
.dir-card .dir-mark{width:150px; margin:0 auto 26px; opacity:.98}
.dir-card .name{font-weight:700; font-size:1.15rem; letter-spacing:.03em; color:#fff}
.dir-card .role{color:#9aa5ba; font-size:.9rem; margin-top:4px}
.dir-card .role-ar{font-family:var(--font-ar); color:#9aa5ba; font-size:.9rem; direction:rtl}
html[dir="rtl"] .dir-card .role-ar{display:none}
.dir-facts{list-style:none; margin:28px 0 0; padding:22px 0 0; border-top:1px solid #1e2739; display:grid; gap:14px; text-align:start}
.dir-facts li{display:flex; justify-content:space-between; gap:16px; font-size:.9rem}
.dir-facts b{color:#7d879b; font-weight:500}
.dir-facts span{color:#fff}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow-sm); transition:.2s ease; position:relative; overflow:hidden;
}
.card::after{content:""; position:absolute; inset-inline-start:0; top:0; height:3px; width:0; background:linear-gradient(90deg,var(--magenta),var(--cyan)); transition:.3s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#d9deea}
.card:hover::after{width:100%}
.card .ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,rgba(149,17,80,.10),rgba(15,229,243,.18)); color:var(--magenta)}
.card h3{font-size:1.15rem; font-weight:700}
.card .ar{font-family:var(--font-ar); color:var(--magenta); font-size:.95rem; direction:rtl; margin-top:4px}
html[dir="rtl"] .card .ar{display:none}
.card p{color:var(--ink-2); font-size:.95rem; margin:12px 0 0}

/* ---------- process ---------- */
.process{background:var(--bg-2); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; position:relative}
.step b{display:block; font-size:.75rem; letter-spacing:.18em; color:var(--cyan); text-transform:uppercase}
.step h3{font-size:1.08rem; margin-top:10px}
.step p{color:var(--ink-2); font-size:.93rem; margin:10px 0 0}
.step .num{position:absolute; inset-inline-end:22px; top:18px; font-size:2.6rem; font-weight:700; color:var(--bg-3); letter-spacing:-.04em}

/* ---------- clients ---------- */
.clients{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.client{
  border:1px solid var(--line); border-radius:16px; padding:22px; background:#fff; box-shadow:var(--shadow-sm);
  transition:.2s ease;
}
.client:hover{transform:translateY(-3px); border-color:#d9deea; box-shadow:var(--shadow-md)}
.client .ccode{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:26px; padding:0 9px; border-radius:7px;
  font-size:.76rem; font-weight:700; letter-spacing:.10em;
  color:var(--magenta); background:rgba(149,17,80,.08); border:1px solid rgba(149,17,80,.16);
  font-variant-numeric:tabular-nums;
}
.client b{display:block; margin-top:12px; font-size:.98rem}
.client span{display:block; color:var(--ink-3); font-size:.82rem; margin-top:4px}
.client .loc{color:var(--magenta); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-top:10px}
html[dir="rtl"] .client .loc{letter-spacing:0; text-transform:none}
.quote{
  margin-top:38px; border:1px solid var(--line); border-inline-start:4px solid var(--magenta);
  border-radius:16px; background:var(--bg-2); padding:28px 32px; color:var(--ink-2); font-size:1.02rem;
}
.quote b{display:block; margin-top:12px; color:var(--ink); font-size:.9rem}

/* ---------- offices ---------- */
.offices{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.office{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm)}
.office .tag{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); font-weight:700}
html[dir="rtl"] .office .tag{letter-spacing:0; text-transform:none}
.office h3{margin-top:10px; font-size:1.2rem}
.office address{font-style:normal; color:var(--ink-2); margin-top:14px; font-size:.98rem; line-height:1.85}
.office .ar{font-family:var(--font-ar); color:var(--ink-3); direction:rtl; margin-top:14px; font-size:.95rem; line-height:1.9}
html[dir="rtl"] .office .ar{display:none}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,#fff,var(--bg-2))}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
.field{display:grid; gap:7px; margin-bottom:18px}
.field label{font-size:.82rem; font-weight:600; color:var(--ink-2)}
.field input,.field textarea,.field select{
  font-family:inherit; font-size:.96rem; color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:#fff; outline:none; transition:.15s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--magenta); box-shadow:0 0 0 4px rgba(149,17,80,.10)}
.field textarea{min-height:130px; resize:vertical}
.form-note{font-size:.82rem; color:var(--ink-3); margin-top:12px}
.contact-cta{display:flex; flex-direction:column; gap:14px}
.contact-item{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff}
.contact-item .ico{width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; background:rgba(15,229,243,.16); color:var(--magenta)}
.contact-item b{display:block; font-size:.95rem}
.contact-item span{font-size:.9rem; color:var(--ink-2)}

/* ---------- footer ---------- */
.footer{background:#0c1220; color:#c9d0de; padding:60px 0 32px}
.footer a{color:#c9d0de}
.footer a:hover{color:var(--cyan)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px}
.footer .brand-txt b{color:#fff}
.footer .brand-txt span{color:#7d879b}
.footer h4{margin:0 0 14px; font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:#7d879b; font-weight:600}
html[dir="rtl"] .footer h4{letter-spacing:0; text-transform:none; font-size:.9rem}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.92rem}
.footer p{font-size:.92rem; color:#98a2b3; margin:14px 0 0; max-width:34ch}
.foot-bot{
  border-top:1px solid #1e2739; margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.85rem; color:#7d879b;
}
.foot-bot .ar{font-family:var(--font-ar); direction:rtl}
html[dir="rtl"] .foot-bot .ar{display:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-in,.about-grid,.contact-grid{grid-template-columns:1fr; gap:40px}
  .cards,.offices{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .clients{grid-template-columns:repeat(2,1fr)}
  .stats-in{grid-template-columns:repeat(2,1fr); gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{
    position:absolute; top:74px; inset-inline:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 18px; display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0; width:100%; border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .head-actions{margin-inline-start:auto}
  section{padding:64px 0}
}
@media (max-width:560px){
  .clients,.foot-grid{grid-template-columns:1fr}
  .brand-txt span{display:none}
  .header-in{gap:10px}
  .brand{gap:9px; min-width:0}
  .brand-tile{padding:5px 8px}
  .brand-tile img{height:20px}
  .brand-txt b{font-size:.82rem; white-space:nowrap}
  .head-actions{gap:8px}
  .lang{padding:6px 10px; font-size:.72rem; gap:5px}
  .burger{width:36px; height:34px}
  .footer .brand-txt span{display:block}
}