:root{
  /* Dark */
  --bg-dark:#0b0d12; --panel-dark:#0F1218; --ink-dark:#e6e9ef; --ink-dim-dark:#b7bdc8; --line-dark:#182133;
  /* Light */
  --bg-light:#ffffff; --panel-light:#f7f8fb; --ink-light:#0b0d12; --ink-dim-light:#586172; --line-light:#e7edf4;
  /* Shared */
  --accent:#66ffd1; --accent-2:#6aa8ff; --muted:#8892a6; --cta:#e74c3c;
  --max:1220px; --g:28px; --pad:clamp(84px,10vw,128px);
  --hero-url: url('https://res.cloudinary.com/dxvponxxg/image/upload/f_auto,q_auto/v1754934593/right1_wangdm.png');
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg-dark);color:var(--ink-dark)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.grid{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--ink-dim-dark)}

/* ===== NAV ===== */
nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--bg-dark) 88%, transparent);
  border-bottom:1px solid var(--line-dark)
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:84px}
.brand-link{display:flex;align-items:center;gap:10px}
.brand-logo{
  height:56px; /* 40% larger than the prior ~40px */
  width:auto;
  display:block;
}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim-dark)}
.nav-links a:hover{color:var(--ink-dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;padding:10px 14px;border-radius:999px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.btn-cta{background:var(--cta);border:1px solid var(--cta);color:#fff;border-radius:12px;padding:14px 18px;font-weight:700}

/* ===== SECTION WRAPPERS ===== */
section{border-top:1px solid var(--line-dark)}
.s--dark{background:var(--bg-dark); color:var(--ink-dark)}
.s--white{background:var(--bg-light); color:var(--ink-light); border-top:1px solid var(--line-light)}
.s--dark .muted{color:var(--ink-dim-dark)}
.s--white .muted{color:var(--ink-dim-light)}
.wrap{padding:var(--pad) 0}
.h1{font-size: clamp(42px,7.5vw,82px);line-height:1.04;letter-spacing:-.02em;font-weight:800;margin:0 0 24px}
.h2{font-size: clamp(30px,4.2vw,48px);letter-spacing:-.01em;margin:0}
.lead{max-width:820px;font-size: clamp(18px,2.1vw,22px);line-height:1.55}

/* ===== HERO — no band/overlay ===== */
.hero{
  position:relative; min-height:clamp(60vh,85vh,92vh); isolation:isolate;
  background-image:var(--hero-url);
  background-size:cover; background-position:50% 22%; background-repeat:no-repeat;
}
.hero-content{position:absolute; inset:0; display:grid; align-items:end; justify-items:start; padding:clamp(20px,4vw,40px)}
.hero-inner{max-width:min(980px,92vw)}
.hero-title{
  color:#fff; font-size:clamp(28px,5.2vw,52px); line-height:1.08; font-weight:850; letter-spacing:-.015em; margin:0 0 10px;
  text-shadow:0 2px 12px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.9);
  -webkit-text-stroke:0.4px rgba(0,0,0,.25);
}
.hero-sub{color:#fff; opacity:.94; max-width:820px; margin:0 0 14px; text-shadow:0 1px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.75)}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
@media (max-width:720px){
  .hero-content{justify-items:center;align-items:end}
  .hero{background-position:50% 30%}
  .brand-logo{height:48px}
  .nav-wrap{min-height:74px}
}

/* ===== TRUST ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.stat{border:1px solid var(--line-dark);border-radius:20px;padding:26px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.big{font-size:34px;font-weight:800;color:var(--accent-2)}
.stat-l{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}

/* ===== SERVICES (white) ===== */
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sub{max-width:720px}
.rows{display:grid;grid-template-columns:repeat(12,1fr);gap: calc(var(--g) + 10px)}
.svc{grid-column: span 12;border-radius:22px;padding:34px;background:var(--panel-light);border:1px solid var(--line-light)}
.svc-grid{display:grid;grid-template-columns: 1.1fr 1fr;gap: var(--g)}
.pill{display:inline-flex;border:1px solid var(--line-light);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--ink-dim-light);margin-bottom:8px}
.svc .t{font-weight:800;font-size:22px;margin:6px 0 10px}
.svc ul{margin:12px 0 0 18px;color:var(--ink-dim-light);line-height:1.7}
.price-badge{display:inline-block;margin-top:14px;padding:8px 12px;border-radius:10px;background:#d9dee7;color:#0b0d12;font-weight:800;font-size:14px;border:1px solid #c9cfdb}
.svc .actions{margin-top:18px}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap: var(--g)}
.tile{border:1px solid var(--line-light);border-radius:16px;overflow:hidden;background:var(--bg-light);position:relative}
.ph{aspect-ratio:16/10;display:grid;place-items:center;background:#f1f4f9;border-bottom:1px dashed var(--line-light);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.bd{padding:16px}
.k{color:#0d9488;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.tt{font-weight:700}

/* Magnifier glyph */
.zoomable{cursor:zoom-in}
.tile .ph::after{
  content:"🔍"; position:absolute; bottom:12px; right:12px; font-size:18px;
  background:rgba(0,0,0,.45); color:#fff; padding:4px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.5);
}

/* ===== CASE STUDIES ===== */
.cases{display:grid;grid-template-columns:repeat(12,1fr);gap: calc(var(--g) + 8px)}
.case{grid-column: span 12;border:1px solid var(--line-light);border-radius:22px;background:var(--panel-light);overflow:hidden}
.case-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 24px}
.case-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink-dim-light);font-size:12px}
.tag{border:1px solid var(--line-light);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--ink-dim-light)}
.case-btn{border:1px solid var(--ink-light);border-radius:999px;padding:8px 12px;font-size:12px;cursor:pointer;background:transparent;color:var(--ink-light)}
.case-body{grid-template-columns:1.1fr 1fr;gap: var(--g);padding:0 24px 24px;display:grid;max-height:0;opacity:0;transition:max-height .5s ease, opacity .5s ease, background-color .35s ease}
.case.expanded .case-body{max-height:1800px;opacity:1;background:color-mix(in srgb, var(--panel-light) 85%, white)}
.case-copy{color:var(--ink-dim-light);line-height:1.75}

/* Carousel inside cards */
.carousel{position:relative;border:1px dashed var(--line-light);border-radius:16px;overflow:hidden;background:#f1f4f9}
.track{display:flex;gap:0;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth}
.slide{min-width:100%;scroll-snap-align:center;position:relative}
.slide img{width:100%;height:100%;object-fit:cover}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:8px 10px;cursor:pointer}
.car-prev{left:10px} .car-next{right:10px}

/* ===== ABOUT (dark) ===== */
.about-shell{padding:var(--pad) 0}
.about-grid-v2{display:grid;grid-template-columns:1.2fr 0.8fr;gap:calc(var(--g) + 14px);align-items:start}
.about-kicker{color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:14px}
.about-title{font-size:clamp(36px,6.5vw,64px);line-height:1.06;letter-spacing:-.02em;margin:0 0 16px}
.about-intro{font-size:clamp(18px,2.1vw,22px);line-height:1.6;color:var(--ink-dim-dark);max-width:58ch;margin:0 0 16px}
.about-body{color:var(--ink-dim-dark);max-width:60ch;line-height:1.7}
.about-list{margin:18px 0 0;display:grid;gap:10px;color:var(--ink-dim-dark)}
.about-list li{list-style:none;position:relative;padding-left:22px}
.about-list li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--accent);border-radius:2px}

.about-rail{display:grid;gap:16px;position:relative}
.stat-pill{border:1px solid var(--line-dark);border-radius:18px;padding:20px 22px;background:color-mix(in srgb, var(--panel-dark) 88%, transparent);display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat-pill .num{font-size:28px;font-weight:850;color:var(--accent)}
.stat-pill .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}

/* ===== CONTACT (waves background ONLY, NO BAND) ===== */
.s--waves{
  background: url('https://res.cloudinary.com/dxvponxxg/image/upload/v1754755543/waves_ato7e8.png') center/cover no-repeat;
}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap: calc(var(--g) + 10px)}
.panel-dark{border:1px solid var(--line-dark);border-radius:22px;padding:26px;background:color-mix(in srgb, var(--panel-dark) 85%, transparent)}
label{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.s--dark label{color:var(--ink-dim-dark)}
input,select,textarea{width:100%;border-radius:12px;padding:12px;margin-top:6px}
.s--dark input,.s--dark select,.s--dark textarea{background:#0b0f16;border:1px solid var(--line-dark);color:var(--ink-dark)}
textarea{min-height:120px;resize:vertical}
.cta{margin-top:16px}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1200px);max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:18px;right:22px;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer}
.lightbox .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:999px;padding:10px 12px;cursor:pointer}
.lightbox .prev{left:16px} .lightbox .next{right:16px}

/* ===== Responsive ===== */
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .case-body{grid-template-columns:1fr}
  .about-grid-v2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}