/* ============================================================
   Dayanex — dayanex.ai
   Shared stylesheet for the corporate site.

   Design system
   -------------
   Ground        near-black with a blue cast. The company sells power and
                 fibre; the ground should read as an unlit facility at night,
                 with the accents as the only things drawing current.
   Two accents   cyan  = Connectivity      (signal, fibre, transit)
                 amber = AI Infrastructure (power, heat, compute)
                 The split is load-bearing: every element on the site belongs
                 to one division or the other, and the colour says which.
   Type          Space Grotesk for display — drawn on a grid, it reads as
                 engineered rather than editorial, which is the register an
                 infrastructure company wants. Inter for text, system mono for
                 labels, addresses and figures.

   Deliberately NOT the jiri-san.com palette (jade + serif). Different company,
   different buyer; the two sites should not look related.
   ============================================================ */

:root {
  --bg:        #070A0E;
  --bg-2:      #0A0E14;
  --panel:     #0E141B;
  --panel-2:   #121A23;
  --line:      #1D2833;
  --line-soft: #151D26;

  --fg:        #EEF2F6;
  --fg-2:      #AEB8C2;
  --fg-3:      #6F7C88;

  --cyan:      #3FC8E4;
  --cyan-dim:  #1C6E82;
  --amber:     #EDA83F;
  --amber-dim: #8A6222;

  --font-display: "Space Grotesk", "Segoe UI", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --max: 1160px;
  --pad: clamp(20px, 5vw, 48px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* why: a fraction of a percent of noise over the whole page. Large flat areas
   of near-black band visibly on 8-bit panels; the grain breaks the banding and
   is the cheapest thing separating a considered dark palette from a flat one. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(63, 200, 228, 0.22); color: var(--fg); }

:focus-visible { outline: 1px solid var(--cyan-dim); outline-offset: 3px; }

/* ---------- layout primitives ---------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(72px, 10vw, 128px); }

.rule {
  border: 0;
  margin: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

/* ---------- eyebrow / labels ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--cyan-dim);
  flex: none;
}
.eyebrow.amber::before { background: var(--amber-dim); }
.eyebrow.plain::before { background: var(--line); }

/* ---------- headings ---------- */

h1, h2, h3 { font-weight: 500; margin: 0; }

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin-left: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.9vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
  margin: 22px 0 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 10, 14, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 66px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: 0.875rem;
  color: var(--fg-2);
  transition: color 0.15s ease;
}
.nav a:hover { color: var(--fg); }

@media (max-width: 760px) {
  .nav { gap: 16px; }
  .nav a { font-size: 0.8rem; }
  .nav a.nav-hide-sm { display: none; }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(64px, 11vw, 132px) clamp(48px, 7vw, 84px); }

/* why: the tagline is the brand line, not a subhead. Mono treatment with
   division-coloured separators, so the three words read as three claims
   rather than one sentence. */
.tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tagline span { display: inline-flex; align-items: center; gap: 14px; }
.tagline span::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cyan-dim);
}
.tagline span:nth-child(2)::after { background: var(--amber-dim); }
.tagline span:last-child::after { display: none; }

/* ---------- the fabric motif ---------- */

/* why: a literal picture of the business — a transit path (cyan) and a compute
   path (amber) crossing one common fabric. Inline SVG rather than an image so
   it costs no request, scales cleanly, and recolours with the palette. */
.fabric-wrap {
  margin-top: clamp(38px, 6vw, 62px);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 26px;
}
.fabric { display: block; width: 100%; height: auto; }

.fabric-key {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.fabric-key i {
  display: inline-block;
  width: 14px; height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--cyan);
}
.fabric-key .k-amber i { background: var(--amber); }

/* ---------- division cards ---------- */

.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 46px;
}

.division {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(26px, 3.4vw, 38px);
  overflow: hidden;
  transition: background 0.18s ease;
}
.division:hover { background: var(--panel-2); }

/* why: the top edge carries the division colour. It is the only place the
   accent appears at full strength on the card, so the card stays quiet until
   you are looking for which business it belongs to. */
.division::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent 78%);
}
.division.amber::before { background: linear-gradient(90deg, var(--amber), transparent 78%); }

.division h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.division p { color: var(--fg-2); margin-top: 14px; font-size: 0.955rem; }

.division-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cyan);
}
.division.amber .division-tag { color: var(--amber); }

.division ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.division li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--fg-2);
}
.division li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 1px;
  background: var(--cyan-dim);
}
.division.amber li::before { background: var(--amber-dim); }

.division .more {
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
}
.division.amber .more { color: var(--amber); }
.division .more::after { content: " \2192"; }

/* ---------- generic feature grid ---------- */

/* why: hairlines are drawn as a 1px ring on each cell rather than as a lined
   container background showing through a 1px gap. The container-background
   trick is simpler, but when the track count does not divide the cell count
   (four cells in three columns) the leftover track paints as a solid block.
   Overlapping rings across the 1px gap resolve to a single clean hairline and
   draw nothing where there is no cell. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  margin-top: 46px;
}
.cell {
  background: var(--bg);
  padding: clamp(22px, 2.8vw, 30px);
  box-shadow: 0 0 0 1px var(--line-soft);
}
.cell h3 { margin-bottom: 10px; }
.cell p { color: var(--fg-2); font-size: 0.915rem; }
.cell .num {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  color: var(--fg-3);
  margin-bottom: 14px;
}

/* ---------- prose blocks ---------- */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.two-col .body { color: var(--fg-2); font-size: 1rem; }
.two-col .body strong { color: var(--fg); font-weight: 500; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin-top: 42px;
}
.contact-block .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
.contact-block address {
  font-style: normal;
  color: var(--fg-2);
  font-size: 0.94rem;
  line-height: 1.7;
}
.contact-block a { color: var(--fg); border-bottom: 1px solid var(--line); }
.contact-block a:hover { border-bottom-color: var(--cyan); }

/* ---------- notice ---------- */

/* why: the DACS to Dayanex rename is the one thing an existing customer
   landing here needs to understand in three seconds. It gets its own object,
   not a paragraph they might scroll past. */
.notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan-dim);
  border-radius: 3px;
  padding: 22px 24px;
  margin-top: 40px;
  font-size: 0.94rem;
  color: var(--fg-2);
}
.notice strong { color: var(--fg); font-weight: 500; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  padding-block: 52px 44px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-nav a { font-size: 0.86rem; color: var(--fg-2); }
.footer-nav a:hover { color: var(--fg); }
.footer-legal {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  line-height: 1.9;
}

/* ---------- subpage header ---------- */

.page-head { padding-block: clamp(56px, 8vw, 92px) clamp(34px, 5vw, 54px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}