/* ============================================================
   Diloni Technologies — Premium Corporate Website
   Dark + Gold theme, matching the DL brand logo
   ============================================================ */

:root {
  /* Palette */
  --bg: #07070b;
  --bg-2: #0c0c14;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.09);
  --border-gold: rgba(212, 175, 55, 0.35);

  --text: #f5f4f0;
  --muted: #9d9caa;

  /* Gold */
  --gold-1: #f6e6a8;
  --gold-2: #e6c25c;
  --gold-3: #d4af37;
  --gold-4: #b8860b;
  --gold-grad: linear-gradient(135deg, #f9edb4 0%, #e6c25c 40%, #d4af37 70%, #b8860b 100%);
  --gold-soft: rgba(212, 175, 55, 0.12);

  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bg); }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Consistent keyboard focus ring for links, buttons & the nav toggle (a11y, WCAG 2.4.7).
   Form fields keep their own :focus box-shadow indicator defined below. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }

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

/* ---------- Ambient background ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-glow {
  position: fixed; z-index: -2; border-radius: 50%;
  filter: blur(120px); opacity: 0.5; pointer-events: none;
}
.bg-glow--1 { top: -200px; right: -150px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(212,175,55,0.28), transparent 70%); }
.bg-glow--2 { top: 40%; left: -250px; width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(184,134,11,0.16), transparent 70%); }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gold-grad); z-index: 200;
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 100px; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: 1px solid transparent; transition: all 0.3s var(--ease);
  font-family: 'Space Grotesk', sans-serif; white-space: nowrap;
}
.btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.btn--full { width: 100%; }
.btn--primary {
  background: var(--gold-grad); color: #1a1206;
  box-shadow: 0 8px 30px rgba(212,175,55,0.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(212,175,55,0.45); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--border-gold); background: var(--gold-soft); transform: translateY(-2px); }

.grad-text {
  background: linear-gradient(100deg, #b8860b 0%, #f9edb4 25%, #ffffff 42%, #e6c25c 60%, #d4af37 78%, #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: inline-block;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* ---------- 3D tilt cards ---------- */
[data-tilt] { position: relative; transform-style: preserve-3d; transition: transform 0.18s var(--ease); will-change: transform; }
[data-tilt] > * { transform: translateZ(0.01px); }
.tilt-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none !important; opacity: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), transparent 45%);
  transition: opacity 0.3s; z-index: 3; }
[data-tilt]:hover .tilt-sheen { opacity: 1; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2);
  font-weight: 600; font-size: 0.92rem; transition: gap 0.3s var(--ease), color 0.3s;
}
.link-arrow:hover { gap: 12px; color: var(--gold-1); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0; transition: all 0.4s var(--ease);
  /* Notch / Dynamic Island support (additive — env() is 0 on non-notched devices) */
  padding-top: calc(18px + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav.scrolled {
  padding: 12px 0; background: rgba(7,7,11,0.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { height: 42px; width: auto; filter: drop-shadow(0 2px 10px rgba(212,175,55,0.4)); }
.brand__text {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.06em; line-height: 1; display: flex; flex-direction: column;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand__sub { font-size: 0.55rem; letter-spacing: 0.35em; color: var(--muted);
  -webkit-text-fill-color: var(--muted); margin-top: 3px; font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a { font-size: 0.9rem; color: var(--muted); font-weight: 500; transition: color 0.25s; position: relative; }
.nav__links a:not(.nav__cta):hover { color: var(--text); }
.nav__links a:not(.nav__cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold-grad); transition: width 0.3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
.nav__cta { color: #1a1206 !important; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 26px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s var(--ease); }
.nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 80px; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 900px; margin: 0 auto; }

/* Floating gold orbs */
.hero__orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.55;
  background: radial-gradient(circle at 30% 30%, var(--gold-1), var(--gold-3) 55%, transparent 72%);
  box-shadow: 0 0 40px rgba(212,175,55,0.5); }
.orb--1 { width: 16px; height: 16px; top: 22%; left: 14%; animation: float1 9s ease-in-out infinite; }
.orb--2 { width: 10px; height: 10px; top: 62%; left: 80%; animation: float2 11s ease-in-out infinite; }
.orb--3 { width: 22px; height: 22px; top: 74%; left: 20%; opacity: 0.4; animation: float3 13s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,30px); } }
@keyframes float3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,-28px) scale(1.15); } }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border-gold); font-size: 0.82rem;
  color: var(--gold-1); margin-bottom: 30px; font-weight: 500;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 0 rgba(230,194,92,0.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230,194,92,0.6); } 70% { box-shadow: 0 0 0 10px rgba(230,194,92,0); } 100% { box-shadow: 0 0 0 0 rgba(230,194,92,0); } }

.hero__title { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 26px; }
.hero__lead { font-size: clamp(1.02rem, 2vw, 1.22rem); color: var(--muted); max-width: 680px; margin: 0 auto 38px; }
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 70px; }

.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 640px; margin: 0 auto; }
.stat { padding: 22px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(10px); }
.stat__num { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat__label { font-size: 0.78rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }

.hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.1em; }
.hero__scroll span { width: 22px; height: 34px; border: 1.5px solid var(--border); border-radius: 12px; position: relative; }
.hero__scroll span::after { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 7px; border-radius: 3px; background: var(--gold-2); animation: scrolldot 1.8s infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 26px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-2); }
.marquee__track { display: flex; gap: 30px; white-space: nowrap; width: max-content; animation: scrollx 32s linear infinite; }
.marquee__track span { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; color: var(--muted); font-weight: 500; }
.marquee__track span:nth-child(odd) { color: var(--gold-3); }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 110px 0; position: relative; }
.section--alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__head { max-width: 720px; margin-bottom: 60px; }
.eyebrow { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold-3); margin-bottom: 16px; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section__sub { color: var(--muted); font-size: 1.05rem; margin-top: 18px; max-width: 620px; }
.subhead { font-size: 1.4rem; margin: 60px 0 28px; }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.about__lead p { color: var(--muted); font-size: 1.08rem; margin-bottom: 18px; }
.about__lead strong { color: var(--text); }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mini-card { padding: 26px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  transition: all 0.35s var(--ease); }
.mini-card:hover { transform: translateY(-6px); border-color: var(--border-gold); background: var(--gold-soft); }
.mini-card__icon { font-size: 1.7rem; margin-bottom: 12px; }
.mini-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.mini-card p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Vision / Mission / Values ---------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vm-card { position: relative; padding: 40px; border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden; transition: border-color 0.35s; }
.vm-card:hover { border-color: var(--border-gold); }
.vm-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--gold-grad); }
.vm-card__tag { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-3); margin-bottom: 18px; }
.vm-card__text { font-size: 1.2rem; line-height: 1.55; }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value { padding: 28px 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  transition: all 0.35s var(--ease); }
.value:hover { transform: translateY(-6px); border-color: var(--border-gold); }
.value__num { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--gold-3); opacity: 0.5; }
.value h4 { font-size: 1.05rem; margin: 12px 0 8px; }
.value p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Products ---------- */
.products { display: flex; flex-direction: column; gap: 40px; }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
  padding: 34px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.4s, transform 0.4s var(--ease); }
.product:hover { border-color: var(--border-gold); transform: translateY(-4px); }
.product--reverse .product__media { order: 2; }
.product__label { display: inline-block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-3); font-family: 'Space Grotesk', sans-serif; margin-bottom: 12px; }
.product__body h3 { font-size: 1.7rem; margin-bottom: 14px; }
.product__body p { color: var(--muted); margin-bottom: 20px; }
.feat { list-style: none; margin-bottom: 22px; display: grid; gap: 10px; }
.feat li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--text); }
.feat li::before { content: '✦'; position: absolute; left: 0; color: var(--gold-3); }
.product__note { display: inline-block; margin: 0; font-size: 0.88rem; color: var(--muted);
  padding: 10px 16px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border); }

/* product mockups */
.product__media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(160deg, #14141f, #0a0a12); border: 1px solid var(--border); }
.mock { position: absolute; inset: 0; padding: 26px; }
.mock__pill { position: absolute; bottom: 20px; right: 20px; padding: 7px 15px; border-radius: 100px;
  background: var(--gold-soft); border: 1px solid var(--border-gold); color: var(--gold-1); font-size: 0.72rem; font-weight: 600; }
.mock__bar { height: 34px; border-radius: 10px; background: var(--surface-2); margin-bottom: 18px; width: 70%; }
.mock__row { height: 14px; border-radius: 6px; background: var(--surface-2); margin-bottom: 12px; }
.mock__row.w80 { width: 80%; } .mock__row.w70 { width: 70%; } .mock__row.w60 { width: 60%; } .mock__row.w50 { width: 50%; }
.mock__sidebar { position: absolute; top: 26px; left: 26px; bottom: 26px; width: 26%; border-radius: 12px; background: var(--surface-2); }
.mock__grid { position: absolute; top: 26px; right: 26px; left: 38%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mock__grid span { aspect-ratio: 1.6; border-radius: 10px; background: var(--surface-2); }
.mock__grid span:nth-child(1) { background: var(--gold-soft); }
.mock__chart { display: flex; align-items: flex-end; gap: 10px; height: 55%; margin-bottom: 20px; }
.mock__chart i { flex: 1; border-radius: 6px 6px 0 0; background: var(--surface-2); }
.mock__chart i:nth-child(1){height:40%} .mock__chart i:nth-child(2){height:65%}
.mock__chart i:nth-child(3){height:50%} .mock__chart i:nth-child(4){height:85%; background:var(--gold-grad)}
.mock__chart i:nth-child(5){height:70%} .mock__chart i:nth-child(6){height:55%}
.mock__frame { position: absolute; width: 42%; aspect-ratio: 3/4; border-radius: 10px; background: linear-gradient(150deg, var(--gold-soft), var(--surface-2)); border: 1px solid var(--border-gold); top: 22px; left: 26px; }
.mock__frame.f2 { top: 40px; left: 40%; opacity: 0.7; transform: rotate(4deg); }
.mock__frame.f3 { top: 70px; left: 30%; opacity: 0.45; width: 30%; }

/* real product screenshots */
.product__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.product__badge { position: absolute; top: 16px; left: 16px; z-index: 3; padding: 6px 13px; border-radius: 100px;
  background: rgba(7,7,11,0.72); border: 1px solid var(--border-gold); color: var(--gold-1); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.03em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* to-do app mock */
.mock--todo { padding: 32px 28px; }
.mock--todo .tk { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mock--todo .tk span { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); flex: none; }
.mock--todo .tk.done span { background: var(--gold-grad); border-color: transparent; }
.mock--todo .tk i { flex: 1; height: 13px; border-radius: 6px; background: var(--surface-2); display: block; }
.mock--todo .tk.done i { opacity: 0.5; }

/* future products */
.future-products { margin-top: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 32px 36px; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(212,175,55,0.08), var(--surface)); border: 1px dashed var(--border-gold); }
.future-products__icon { font-size: 2rem; color: var(--gold-2); }
.future-products h3 { font-size: 1.3rem; margin-bottom: 6px; }
.future-products p { color: var(--muted); font-size: 0.95rem; }
.future-products > div { flex: 1; min-width: 240px; }

/* ---------- Brand card ---------- */
.brand-card { position: relative; padding: 44px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-gold);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; }
.brand-card__glow { position: absolute; top: -100px; right: -80px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.22), transparent 70%); filter: blur(40px); }
.brand-card__media { position: relative; z-index: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); aspect-ratio: 4/3; }
.brand-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.brand-card__body { position: relative; z-index: 1; }
.brand-card h3 { font-size: 2rem; margin-bottom: 16px; }
.brand-card p { color: var(--muted); font-size: 1.05rem; margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chips span { padding: 8px 16px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.85rem; color: var(--text); transition: all 0.3s; }
.chips span:hover { border-color: var(--border-gold); color: var(--gold-1); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service { padding: 30px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  transition: all 0.35s var(--ease); position: relative; overflow: hidden; }
.service::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: var(--gold-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s; }
.service:hover { transform: translateY(-8px); background: var(--surface-2); }
.service:hover::after { opacity: 1; }
.service__icon { font-size: 1.9rem; margin-bottom: 16px; }
.service h3 { font-size: 1.12rem; margin-bottom: 10px; }
.service p { font-size: 0.9rem; color: var(--muted); }

/* ---------- Process timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.timeline::before { content: ''; position: absolute; top: 34px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent); z-index: 0; }
.tstep { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.tstep__num { width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--gold-1);
  background: var(--bg-2); border: 1px solid var(--border-gold); box-shadow: 0 0 0 6px var(--bg-2); transition: all 0.35s var(--ease); }
.tstep:hover .tstep__num { background: var(--gold-grad); color: #1a1206; transform: scale(1.08); }
.tstep h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tstep p { font-size: 0.86rem; color: var(--muted); }

/* ---------- Tech expertise ---------- */
.tech-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tech-group { padding: 32px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.tech-group h4 { font-size: 1.15rem; margin-bottom: 20px; color: var(--gold-1); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { padding: 8px 15px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 0.85rem; font-family: 'Space Grotesk', sans-serif; transition: all 0.3s; }
.tags span:hover { border-color: var(--border-gold); color: var(--gold-1); transform: translateY(-2px); }

/* ---------- Why choose us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why { padding: 32px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  transition: all 0.35s var(--ease); }
.why:hover { transform: translateY(-6px); border-color: var(--border-gold); background: var(--gold-soft); }
.why h3 { font-size: 1.18rem; margin-bottom: 12px; }
.why h3::before { content: '✦ '; color: var(--gold-3); }
.why p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Cases ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case { padding: 34px 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border);
  transition: all 0.4s var(--ease); }
.case:hover { transform: translateY(-8px); border-color: var(--border-gold); }
.case__tag { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-3);
  font-family: 'Space Grotesk', sans-serif; margin-bottom: 16px; }
.case h3 { font-size: 1.4rem; margin-bottom: 12px; }
.case p { color: var(--muted); font-size: 0.95rem; margin-bottom: 24px; }
.case__metrics { display: flex; gap: 26px; border-top: 1px solid var(--border); padding-top: 20px; }
.case__metrics b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; color: var(--gold-1); }
.case__metrics span { font-size: 0.78rem; color: var(--muted); }
.case__visit { display: inline-block; margin-top: 18px; color: var(--gold-2); font-weight: 600; font-size: 0.85rem;
  font-family: 'Space Grotesk', sans-serif; transition: color 0.3s; }
.case:hover .case__visit { color: var(--gold-1); }
.cases__note { text-align: center; color: var(--muted); margin-top: 34px; font-size: 0.9rem; }

/* Products section ends right after the case-studies teaser note — trim the section's
   bottom padding here specifically so that short closing line isn't followed by an
   oversized empty gap before the next section starts (top padding of the next section
   still applies normally). */
#products { padding-bottom: 60px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
  padding: 56px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-gold);
  position: relative; overflow: hidden; }
.contact__intro p { color: var(--muted); margin: 18px 0 28px; }
.contact__list { list-style: none; display: grid; gap: 16px; }
.contact__list li { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.contact__list span { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-3); }
.contact__list a { color: var(--gold-1); }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.82rem; margin-bottom: 8px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color 0.3s, box-shadow 0.3s; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-3); box-shadow: 0 0 0 3px rgba(212,175,55,0.15); }
.field select { cursor: pointer; }
.field select option { background: var(--bg-2); }
.form-note { margin-top: 14px; font-size: 0.9rem; text-align: center; color: var(--gold-1); min-height: 1.2em; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding-top: 60px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 50px; padding-bottom: 44px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; margin-top: 16px; max-width: 280px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer__col h3 { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 16px; }
.footer__col a { display: block; color: var(--muted); font-size: 0.92rem; margin-bottom: 11px; transition: color 0.25s; }
.footer__col a:hover { color: var(--gold-1); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 24px 24px 30px; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted);
  /* Home-indicator / bottom-notch safe area on the last block of the page (additive) */
  padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.footer__tag { color: var(--gold-3); letter-spacing: 0.08em; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { position: fixed; top: 0; right: 0; height: 100vh; width: 280px; flex-direction: column;
    align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 100px 30px 30px;
    background: rgba(10,10,18,0.97); backdrop-filter: blur(20px); border-left: 1px solid var(--border);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
    /* Notch / home-indicator support for the full-height off-canvas menu (additive) */
    padding-top: calc(100px + env(safe-area-inset-top));
    padding-right: calc(30px + env(safe-area-inset-right));
    padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
  .nav__links.open { transform: translateX(0); visibility: visible;
    transition: transform 0.4s var(--ease), visibility 0s linear 0s; }
  /* Tap targets: keep mobile nav controls at the 44px minimum (a11y) */
  .nav__links a { font-size: 1.05rem; width: 100%; }
  .nav__links a:not(.nav__cta) { display: flex; align-items: center; min-height: 44px; }
  .nav__cta { margin-top: 14px; min-height: 44px; }
  .nav__toggle { display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; z-index: 101; }

  .about__grid, .vm-grid, .contact, .footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .tech-groups { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .cases { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .timeline::before { display: none; }
  .product, .product--reverse { grid-template-columns: 1fr; gap: 30px; }
  .product--reverse .product__media { order: 0; }
  .contact { padding: 40px 28px; }
  .brand-card { padding: 32px 24px; grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .section { padding: 80px 0; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { padding: 16px 8px; }
  .values, .services, .why-grid, .cases, .timeline, .about__cards { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .contact { padding: 30px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Skip-to-content link — visible only on keyboard focus (a11y, DTL-QA-03) */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #0b1220;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #6ea8fe;
  outline-offset: 2px;
}