/* ============================================================
   Deeprion Labs, marketing site styles
   ------------------------------------------------------------
   Relies on design tokens from tokens.css (colors, type, space,
   radii, glow). Adapted from the brand's website UI kit so the
   production site matches the design system exactly:
   ~70% navy / 20% neutral text / 10% cyan, one glow per view,
   hairline structure, soft corners, restrained motion.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   Accessibility: WCAG AA contrast nudge
   ------------------------------------------------------------
   The design system's steel/muted grays (#7C8BA8 / #56688A) land
   just under the 4.5:1 AA threshold for body text on the lighter
   navy surfaces (e.g. cards on #15253F). The build spec requires
   sufficient contrast, so we lift the two neutral grays to
   AA-compliant values at the site level. tokens.css stays verbatim
   from the design system; --fg-2 / --fg-3 inherit these because
   they are defined as var(--gray-steel) / var(--gray-muted). The
   values still read as calm steel/muted secondary text and keep
   the ~70 / 20 / 10 navy / neutral / cyan balance.
   ------------------------------------------------------------ */
:root {
  --gray-steel: #8E9DB8; /* secondary text, >= 4.5:1 on all navy surfaces */
  --gray-muted: #7E8FB0; /* tertiary text / placeholders, >= 4.5:1 on navy */
}

html { scroll-behavior: smooth; }
/* offset anchored sections so the sticky nav never covers a heading */
:target { scroll-margin-top: 88px; }
[id] { scroll-margin-top: 88px; }

html,
body { margin: 0; padding: 0; }

body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { display: block; }
::selection { background: rgba(56, 189, 248, 0.28); }

a { color: var(--fg-accent); }

/* Respect users who reduce motion: kill entrance/transition flourishes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Keyboard skip link */
/* Assistive-tech-only text. Used where a visual marker carries meaning a
   screen reader would otherwise never receive, like the asterisk marking the
   checkbox group required. The group is enforced in js/main.js, so without
   this a non-sighted visitor was rejected with no idea which field failed. */
.dl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dl-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--cyan-signal);
  color: var(--fg-on-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: top var(--transition);
}
.dl-skip:focus { top: 12px; }

/* Visible focus ring for keyboard users across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.dl-nav-link:focus-visible {
  outline: 2px solid var(--cyan-signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   PAGE SHELL + DEEP-SPACE BACKGROUND
   ------------------------------------------------------------ */
.dl-page {
  position: relative;
  min-height: 100vh;
  background-color: var(--bg-base);
  /* faint, seamless square grid; the animated node field draws on top */
  background-image:
    linear-gradient(rgba(36, 55, 90, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 55, 90, 0.16) 1px, transparent 1px);
  background-size: 46px 46px;
  background-attachment: fixed;
}
/* animated constellation canvas: above grid, below all content */
.dl-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
main,
.dl-nav,
.dl-footer { position: relative; z-index: 1; }

.dl-shell { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ------------------------------------------------------------
   LOGO WORDMARK  (always lowercase: deeprion labs)
   the dot of the "i" is a cyan node with a soft glow
   ------------------------------------------------------------ */
.dl-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
}
.dl-wordmark {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.015em;
  font-size: 22px;
}
.dl-deep { color: var(--white-signal); font-weight: 700; }
.dl-labs { color: var(--gray-steel); font-weight: 400; margin-left: 0.3em; }
.dl-iwrap { position: relative; }
.dl-idot {
  position: absolute;
  top: -0.02em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--cyan-signal);
  box-shadow: 0 0 0.5em var(--cyan-glow);
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.dl-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition), background var(--transition),
    box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.dl-btn .dl-ico { flex: none; }
.dl-btn:active { transform: scale(0.98); }
.dl-btn-full { width: 100%; }

.dl-btn-primary {
  background: var(--cyan-signal);
  color: var(--fg-on-accent);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}
.dl-btn-primary:hover {
  background: #54c9fb;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.5);
}
.dl-btn-primary:active { background: var(--cyan-ocean); }

.dl-btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.dl-btn-secondary:hover {
  border-color: var(--cyan-signal);
  background: var(--cyan-soft);
}

.dl-btn-ghost {
  background: transparent;
  color: var(--fg-accent);
  padding-left: 8px;
  padding-right: 8px;
}
.dl-btn-ghost:hover { color: #6fd0fb; }

/* ------------------------------------------------------------
   EYEBROW  (mono, uppercase, // prefix)  +  BADGE pill
   ------------------------------------------------------------ */
.dl-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-accent);
  margin: 0;
}
.dl-eyebrow-mark { opacity: 0.6; }

.dl-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--cyan-soft);
  color: var(--cyan-signal);
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.dl-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ------------------------------------------------------------
   SOFT CYAN GLOW  (the single "color event" per view)
   ------------------------------------------------------------ */
.dl-glow {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
  z-index: 0;
}

/* ------------------------------------------------------------
   SHARED ICON TILE  (cyan-tinted rounded tile for signature icons)
   ------------------------------------------------------------ */
.dl-ico-tile {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--cyan-soft);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-signal);
  flex: none;
}
.dl-ico-tile svg { width: 22px; height: 22px; }
/* inline utility icons (currentColor, 1.6px stroke matches the brand) */
.dl-ico { display: inline-flex; width: 18px; height: 18px; }
.dl-ico svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   NAV  (sticky, blurred over content)
   ------------------------------------------------------------ */
.dl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 21, 40, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
}
.dl-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 20px;
}
.dl-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.dl-nav-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition);
  background: none;
  border: none;
  padding: 0;
}
.dl-nav-link:hover { color: var(--fg-1); }
.dl-nav-right { display: flex; align-items: center; gap: 16px; }
/* the in-menu CTA only appears inside the mobile dropdown */
.dl-nav-menu-cta { display: none; }

/* hamburger (mobile only) */
.dl-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
}
.dl-nav-toggle:hover { border-color: var(--cyan-signal); }

/* ------------------------------------------------------------
   SECTION SCAFFOLD
   ------------------------------------------------------------ */
.dl-section { position: relative; padding-top: 96px; padding-bottom: 96px; }
.dl-section-head { max-width: 660px; margin: 0 0 48px; }
.dl-section-head .dl-eyebrow { margin-bottom: 16px; }
.dl-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white-signal);
  margin: 0;
}
.dl-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 16px 0 0;
}
.dl-rule { height: 1px; background: var(--border-hairline); border: none; margin: 0; }
.dl-rule-shell { max-width: 1160px; margin: 0 auto; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.dl-hero { position: relative; padding: 116px 0 92px; overflow: hidden; }
.dl-hero-content { position: relative; z-index: 1; max-width: 800px; }
/* Home hero only. "AI Agents & Automation" is 815px at the 72px display size,
   so inside the shared 800 measure it broke across two lines and the headline
   block rendered as four lines instead of two; the capability strip needs the
   same room to hold one line. The six subpage heroes carry .dl-hero-page and
   keep 800, because widening the shared rule moved their hero block 40px left
   and rewrapped their h1. The sub-paragraph caps itself at 640 either way. */
.dl-hero:not(.dl-hero-page) .dl-hero-content { max-width: 880px; }
.dl-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 72px;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--white-signal);
  margin: 22px 0 0;
}
.dl-hero h1 .accent { color: var(--cyan-signal); }
/* Two-line headline block. Both lines are the headline, not an eyebrow above
   it, so they share the h1 font size; only the colour separates them. Block
   display gives the line break without a <br>, which screen readers announce. */
.dl-hero-eyebrow,
.dl-hero-headline { display: block; }
.dl-hero-eyebrow { color: var(--cyan-signal); }
.dl-hero-headline { color: var(--white-signal); }
/* The capability strip answers "is this just an email writer?" before the
   reader can ask it. Plain text, not links: nothing here should compete with
   the one button below. */
.dl-hero-capabilities {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 20px 0 0;
  /* No cap: the line takes the full home hero measure so all four items stay
     on one row. That is the whole point of it. Broken across two rows it reads
     as a list of features; on one row it reads as the scope of the product. */
  max-width: none;
}
.dl-hero-capabilities .dl-hero-dot { color: var(--fg-3); padding: 0 2px; }
.dl-hero-assurance {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-3);
  margin: 14px 0 0;
}
.dl-hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.dl-hero-proof li { padding: 0 18px; border-left: 1px solid var(--border-hairline); }
.dl-hero-proof li:first-child { padding-left: 0; border-left: 0; }
.dl-hero-securitylink { margin: 22px 0 0; font-size: 14px; }
.dl-hero-securitylink a {
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.dl-hero-securitylink a:hover { color: var(--fg-1); border-color: var(--fg-accent); }
.dl-hero-sub {
  font-size: 21px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 24px 0 0;
  max-width: 640px;
}
.dl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
/* subpage hero: same hero, slightly smaller headline for longer titles */
.dl-hero.dl-hero-page { padding: 84px 0 64px; }
.dl-hero.dl-hero-page h1 { font-size: 54px; }
@media (max-width: 900px) {
  .dl-hero.dl-hero-page h1 { font-size: 40px; }
}
@media (max-width: 560px) {
  .dl-hero.dl-hero-page h1 { font-size: 33px; }
}

/* ------------------------------------------------------------
   AUDIENCE STRIP  ("for everyone" line)
   ------------------------------------------------------------ */
.dl-audience {
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-1);
}
.dl-audience-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 0;
}
.dl-audience-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-signal);
  flex: none;
}
.dl-audience p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-1);
}
.dl-audience p .muted { color: var(--fg-2); }

/* ------------------------------------------------------------
   SERVICES  (8 cards)
   ------------------------------------------------------------ */
.dl-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dl-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color var(--transition), transform var(--transition);
}
.dl-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-3px);
}
/* faint cyan corner glow lights up on hover (the "feature card" treatment) */
.dl-card-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.dl-card:hover .dl-card-corner { opacity: 1; }
.dl-card .dl-ico-tile { margin-bottom: 18px; }
.dl-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.dl-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

/* ------------------------------------------------------------
   SOLUTIONS (problem-based cards + always-visible detail strips)
   ------------------------------------------------------------ */
.dl-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Three-step process cards. Same card shell as the solutions grid; the number
   and the principle line are what set them apart. */
.dl-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dl-step-card { display: flex; flex-direction: column; }
/* Scoped through the card for the same reason as the principle line below:
   `.dl-card p` is (0,1,1) and beats a bare class whatever the source order, so
   unscoped this rule lost its size, colour and bottom margin and the number
   rendered as another line of body copy pressed against the heading. */
.dl-step-card .dl-step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--fg-3);
  margin: 0 0 14px;
}
/* The promise the step is making, held apart from the description so it reads
   as a commitment rather than another sentence of detail.
   Scoped through the card because `.dl-card p` is (0,1,1) and would otherwise
   win on specificity regardless of source order, painting this line the same
   grey as the body copy and losing the distinction entirely. */
.dl-step-card .dl-step-principle {
  color: var(--fg-accent);
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 14px;
}
.dl-steps-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin-top: 40px;
}
.dl-steps-cta p { margin: 0; color: var(--fg-2); }
/* cards are anchor links that smooth-scroll to their detail strip */
.dl-solution-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.dl-solution-card p { flex: 1; }
.dl-solution-cue {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--cyan-signal);
}
.dl-solution-cue .dl-ico { width: 15px; height: 15px; }
.dl-solution-card:hover .dl-solution-cue .dl-ico { transform: translateY(2px); transition: transform var(--transition); }

/* .dl-solution-build is still used by the security framework page's stage
   list. The strip layout that used to wrap it (details / detail / aside /
   main / title / outcome / pain / build-label) went with the path A/B section
   and is gone. */
.dl-solution-build {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: build;
  display: grid;
  gap: 16px;
}
.dl-solution-build li {
  position: relative;
  counter-increment: build;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
}
.dl-solution-build li::before {
  content: counter(build);
  position: absolute;
  left: 0;
  top: 1px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: var(--cyan-signal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.dl-solution-build strong { color: var(--fg-1); font-weight: 600; }

.dl-solutions-foot {
  margin: 40px auto 0;
  max-width: 72ch;
  text-align: center;
}
.dl-solutions-foot p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 0 28px;
}

/* ------------------------------------------------------------
   FAQ (accordion; visible answers for GEO + FAQPage schema)
   ------------------------------------------------------------ */
.dl-faq {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dl-faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition);
}
.dl-faq-item[open] { border-color: rgba(56, 189, 248, 0.4); }
.dl-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  color: var(--fg-1);
}
.dl-faq-item summary::-webkit-details-marker { display: none; }
/* cyan plus/minus indicator */
.dl-faq-item summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--cyan-signal), var(--cyan-signal)) center/13px 2px no-repeat,
    linear-gradient(var(--cyan-signal), var(--cyan-signal)) center/2px 13px no-repeat;
  transition: transform var(--transition), opacity var(--transition);
}
/* open state collapses the plus to a minus */
.dl-faq-item[open] summary::after {
  background:
    linear-gradient(var(--cyan-signal), var(--cyan-signal)) center/13px 2px no-repeat;
}
.dl-faq-a { padding: 0 24px 22px; }
.dl-faq-a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}

/* ------------------------------------------------------------
   QUIET PANEL  (centered bordered statement block; used for the
   field-experience, live-demo, and framework-closing sections)
   ------------------------------------------------------------ */
.dl-tools {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
}
.dl-tools-head { max-width: 620px; margin: 0 auto; }
.dl-tools-head h2 { font-size: 26px; } /* kept small so the panel stays quiet */
.dl-tools-head .dl-sub { font-size: 16px; margin-top: 12px; }
@media (max-width: 560px) {
  .dl-tools { padding: 36px 22px; }
}

/* ------------------------------------------------------------
   VIDEO  (responsive 16:9 embed slot)
   ------------------------------------------------------------ */
.dl-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--navy-deep);
}
/* 16:9 fallback for browsers without aspect-ratio (Safari < 15) */
@supports not (aspect-ratio: 16 / 9) {
  .dl-video-frame { height: 0; padding-bottom: 56.25%; }
}
.dl-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Placeholder shown until a real embed URL is pasted in (data-embed) */
.dl-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.dl-video-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cyan-signal);
  color: var(--fg-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.45);
}
.dl-video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.dl-video-placeholder p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* ------------------------------------------------------------
   PROCESS  (How it works, 4 steps)
   ------------------------------------------------------------ */
.dl-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dl-step {
  padding: 30px 26px;
  border-right: 1px solid var(--border-hairline);
  position: relative;
}
.dl-step:last-child { border-right: none; }
.dl-step-n { font-family: var(--font-mono); font-size: 13px; color: var(--cyan-signal); }
.dl-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--fg-1);
  margin: 14px 0 8px;
}
.dl-step p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }

/* three-step variant of the process grid (same look, one fewer column) */
.dl-process.dl-process-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .dl-process.dl-process-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dl-process.dl-process-3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   CARD CONTENT HELPERS  (bulleted lists and stacked paragraphs
   inside .dl-card, used by the service and solutions pages)
   ------------------------------------------------------------ */
.dl-card p + p { margin-top: 9px; }
.dl-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.dl-card-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
}
.dl-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-signal);
  opacity: 0.75;
}

/* ------------------------------------------------------------
   WHY  (trust points)
   ------------------------------------------------------------ */
.dl-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dl-why-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.dl-why-item .dl-ico-tile { margin-bottom: 18px; }
.dl-why-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.dl-why-item p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ------------------------------------------------------------
   FOUNDER  (about / trust, compact two-column block)
   ------------------------------------------------------------ */
.dl-founder {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
}
.dl-founder-photo-wrap { position: relative; line-height: 0; }
.dl-founder-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--glow-cyan-sm);
}
.dl-founder-body .dl-eyebrow { margin-bottom: 14px; }
.dl-founder-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--white-signal);
  margin: 0;
}
.dl-founder-role { font-size: 15px; color: var(--gray-steel); margin: 5px 0 0; }
.dl-founder-bio {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 18px 0 0;
  max-width: 62ch;
}
.dl-founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.dl-founder-links .dl-ico { width: 18px; height: 18px; }

@media (max-width: 760px) {
  /* The proof row is 692px wide, so it starts wrapping once the hero measure
     drops under that: viewport 740px. A wrapped item keeps its left rule and
     hangs it at the start of the new line with nothing to divide, so the row
     has to become a stack before it can wrap, not at some smaller width. */
  .dl-hero-proof { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dl-hero-proof li { padding: 0; border-left: 0; }

  .dl-founder {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 26px;
    text-align: center;
  }
  .dl-founder-photo-wrap { justify-self: center; }
  .dl-founder-body .dl-eyebrow { display: flex; justify-content: center; }
  .dl-founder-bio { margin-left: auto; margin-right: auto; }
  .dl-founder-links { justify-content: center; }
}

/* ------------------------------------------------------------
   CONTACT  (the conversion point, inline form)
   ------------------------------------------------------------ */
/* simple centered CTA panel (a single button through to the contact form) */
.dl-contact-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--bg-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 72px 32px;
}
.dl-contact-cta > :not(.dl-glow) { position: relative; z-index: 1; }
.dl-contact-cta h2 { margin: 16px auto 0; max-width: 20ch; }
.dl-contact-cta .dl-sub { margin: 16px auto 0; max-width: 48ch; }
.dl-contact-cta-btn { margin-top: 32px; }
.dl-contact-cta .dl-contact-alt { margin-top: 22px; }
@media (max-width: 560px) { .dl-contact-cta { padding: 48px 22px; } }

.dl-contact {
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
}
/* full-width variant (no left aside): the form spans the whole panel */
.dl-contact-solo { grid-template-columns: 1fr; }
.dl-contact-alt-center { text-align: center; margin-top: 20px; }
.dl-contact-aside {
  padding: 48px 44px;
  border-right: 1px solid var(--border-hairline);
  position: relative;
  z-index: 1;
}
.dl-contact-aside h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white-signal);
  margin: 16px 0 0;
}
.dl-contact-aside p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 16px 0 0; }
.dl-contact-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.dl-contact-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--fg-2); }
.dl-contact-points li .dl-ico { color: var(--cyan-signal); margin-top: 1px; }
.dl-contact-alt { font-size: 14px; color: var(--fg-2); margin: 28px 0 0; }
.dl-contact-alt a { color: var(--cyan-signal); text-decoration: none; }
.dl-contact-alt a:hover { text-decoration: underline; }

.dl-contact-form { padding: 48px 44px; position: relative; z-index: 1; }
.dl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dl-field-group { margin-bottom: 18px; }
.dl-field-group:last-of-type { margin-bottom: 24px; }
/* Direct children only. The checkbox group nests its own <label> elements
   deeper, and this rule's display:block was flattening their flex layout,
   dropping every caption onto the line below its box and rendering it in
   uppercase mono. Scoping with > keeps the two apart. */
.dl-field-group > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 8px;
}
.dl-field-group label .opt { color: var(--fg-3); text-transform: none; letter-spacing: 0; }
.dl-field {
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea.dl-field { resize: vertical; min-height: 116px; line-height: 1.55; }
.dl-field::placeholder { color: var(--fg-3); }
.dl-field:focus {
  outline: none;
  border-color: var(--cyan-signal);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
/* Required marker. Carried on the label as text, not colour alone, so it
   still reads for anyone who cannot distinguish the cyan. */
.dl-req { color: var(--cyan-signal); margin-left: 2px; }

/* Selects. Native <select> so the mobile picker and keyboard behaviour
   come for free; only the chrome is restyled. The chevron is an inline
   data URI, which keeps the stylesheet free of a network request. */
select.dl-field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E9DB8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px 17px;
}
/* The placeholder option is disabled, so style it as placeholder text
   until a real choice replaces it. */
select.dl-field:invalid { color: var(--fg-3); }
select.dl-field option { background: var(--navy-surface); color: var(--fg-1); }

/* Checkbox group. Real inputs, visually replaced by a drawn box, so the
   control stays focusable and announces its state to assistive tech. */
/* A <legend> cannot inherit the label rule, since the group is a fieldset
   rather than a labelled control, so it repeats the same type here. */
.dl-checks-legend {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 8px;
}
.dl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.dl-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.dl-check input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.dl-check-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--navy-deep);
  display: grid;
  place-items: center;
  transition: border-color var(--transition), background var(--transition);
}
.dl-check-box svg { width: 12px; height: 12px; color: var(--fg-on-accent); opacity: 0; }
.dl-check input:checked + .dl-check-box {
  background: var(--cyan-signal);
  border-color: var(--cyan-signal);
}
.dl-check input:checked + .dl-check-box svg { opacity: 1; }
.dl-check input:focus-visible + .dl-check-box {
  outline: 2px solid var(--cyan-signal);
  outline-offset: 2px;
}
.dl-check:hover .dl-check-box { border-color: var(--cyan-signal); }
.dl-check-label {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
  transition: color var(--transition);
}
/* A ticked box is easy to miss at 18px, so the caption brightens with it
   and the selection reads at a glance. */
.dl-check:has(input:checked) .dl-check-label { color: var(--fg-1); }
@media (max-width: 620px) {
  .dl-checks { grid-template-columns: 1fr; }
}

.dl-form-note {
  font-size: 12.5px;
  color: var(--fg-3);
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.dl-form-note .dl-ico { width: 14px; height: 14px; color: var(--gray-steel); flex: none; }
.dl-form-error {
  font-size: 13px;
  color: var(--status-danger);
  margin: 14px 0 0;
}
.dl-hidden { display: none !important; }

/* Honeypot. Moved off screen rather than display:none, because some bots
   skip fields they can tell are not rendered. */
.dl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* success state */
.dl-success { text-align: center; padding: 36px 24px; }
.dl-success-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cyan-soft);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan-signal);
  margin: 0 auto 18px;
}
.dl-success-ico svg { width: 26px; height: 26px; }
.dl-success h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.dl-success p { font-size: 15px; color: var(--fg-2); margin: 0 auto; max-width: 36ch; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.dl-footer { border-top: 1px solid var(--border-hairline); padding: 56px 0 40px; }
.dl-footer-top { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.dl-footer-brand { max-width: 32ch; }
.dl-footer-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-signal);
  margin: 18px 0 0;
}
.dl-footer-tag { font-size: 14px; color: var(--fg-2); margin: 10px 0 0; line-height: 1.6; }
.dl-footer-location { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--gray-steel); margin: 16px 0 0; }
.dl-footer-location .dl-ico { width: 15px; height: 15px; color: var(--cyan-signal); flex: none; }
.dl-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.dl-footer-col h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 16px;
  font-weight: 500;
}
.dl-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--fg-2);
  text-decoration: none;
  margin-bottom: 11px;
  cursor: pointer;
  transition: color var(--transition);
}
.dl-footer-col a:hover { color: var(--cyan-signal); }
.dl-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-hairline);
}
.dl-footer-bottom span { font-size: 13px; color: var(--fg-3); }
.dl-footer-secure { display: flex; align-items: center; gap: 7px; }
.dl-footer-secure .dl-ico { width: 14px; height: 14px; color: var(--gray-steel); }

/* ------------------------------------------------------------
   ENTRANCE ANIMATION  (fade + short rise)
   ------------------------------------------------------------ */
@keyframes dl-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .dl-animate { animation: dl-rise 600ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  /* reveal-on-scroll: elements start hidden, .is-visible plays the rise */
  .dl-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(0.4,0,0.2,1), transform 600ms cubic-bezier(0.4,0,0.2,1); }
  .dl-reveal.is-visible { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .dl-services { grid-template-columns: repeat(2, 1fr); }
  .dl-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .dl-shell { padding-left: 24px; padding-right: 24px; }
  .dl-section { padding-top: 72px; padding-bottom: 72px; }
  .dl-hero { padding: 80px 0 64px; }
  .dl-hero h1 { font-size: 52px; }
  .dl-hero-sub { font-size: 19px; }
  .dl-h2 { font-size: 32px; }

  /* desktop links collapse into the slide-down mobile menu */
  .dl-nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10, 21, 40, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-hairline);
    padding: 8px 24px 16px;
    display: none;
  }
  .dl-nav-links.is-open { display: flex; }
  .dl-nav-link {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--border-hairline);
  }
  .dl-nav-link:last-of-type { border-bottom: none; }
  /* swap the header button for a full-width CTA inside the menu */
  .dl-nav-cta { display: none; }
  .dl-nav-menu-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
  }
  .dl-nav-toggle { display: inline-flex; }

  .dl-process { grid-template-columns: repeat(2, 1fr); }
  .dl-step { border-right: none; border-bottom: 1px solid var(--border-hairline); }
  .dl-step:nth-child(odd) { border-right: 1px solid var(--border-hairline); }
  .dl-step:last-child { border-bottom: none; }

  .dl-contact { grid-template-columns: 1fr; }
  .dl-contact-aside { border-right: none; border-bottom: 1px solid var(--border-hairline); padding: 36px 28px; }
  .dl-contact-form { padding: 36px 28px; }

  /* solutions and process cards stack */
  .dl-solutions-grid { grid-template-columns: 1fr; }
  .dl-steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .dl-shell { padding-left: 20px; padding-right: 20px; }
  .dl-hero h1 { font-size: 40px; }
  .dl-hero-sub { font-size: 17px; }
  /* Vertical rules between the proof items read as clutter once they wrap,
     so on narrow screens the row becomes a stack and the dividers go. */
  .dl-hero-capabilities { font-size: 14px; }
  .dl-h2 { font-size: 28px; }
  .dl-section { padding-top: 60px; padding-bottom: 60px; }

  .dl-services { grid-template-columns: 1fr; }
  .dl-why-grid { grid-template-columns: 1fr; }
  .dl-process { grid-template-columns: 1fr; }
  .dl-step { border-right: none !important; border-bottom: 1px solid var(--border-hairline); }
  .dl-step:last-child { border-bottom: none; }

  .dl-form-row { grid-template-columns: 1fr; gap: 0; }
  .dl-audience-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dl-hero-actions .dl-btn { flex: 1 1 auto; }
  .dl-contact-aside h2 { font-size: 28px; }
}