/* ============================================================
   Jirisan Ventures Sdn Bhd - jiri-san.com
   Shared stylesheet for the corporate site.

   Design system
   -------------
   Ground        near-black with a green cast, so the jade accent
                 reads as emitted light rather than paint.
   Two accents   jade  = NADI / GPU observability (health, pulse)
                 amber = Investments (capital)
   Type          Instrument Serif for display, Inter for text,
                 system mono for labels and data.
   ============================================================ */

:root {
  --bg:        #0A0C0B;
  --bg-2:      #0F1211;
  --panel:     #121615;
  --line:      #232928;
  --line-soft: #1A201E;

  --fg:        #ECEAE4;
  --fg-2:      #B9BDB8;
  --fg-3:      #7E847F;

  --jade:      #4CD3A0;
  --jade-dim:  #2E8A69;
  --amber:     #E0B44C;
  --amber-dim: #8F702A;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", 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: 1140px;
  --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; }

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

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: clamp(64px, 9vw, 116px); }
.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- 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(--jade-dim);
  flex: none;
}
.eyebrow.amber::before { background: var(--amber-dim); }

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

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

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.9vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

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

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

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
.measure { max-width: 66ch; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 11, 0.82);
  backdrop-filter: blur(14px);
  -webkit-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: 68px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg);
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  font-size: 13.5px;
  color: var(--fg-2);
  transition: color 0.18s ease;
  position: relative;
  padding-block: 4px;
}
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--jade-dim);
}

@media (max-width: 720px) {
  .nav { gap: 18px; }
  .nav a { font-size: 12.5px; }
  .brand-sub { display: none; }
}
@media (max-width: 480px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; padding-block: 12px; gap: 10px; }
}

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

.hero { padding-block: clamp(72px, 12vw, 148px) clamp(56px, 8vw, 96px); position: relative; overflow: hidden; }

.hero::after {
  /* why: one soft jade bloom behind the headline stops the page reading
     as a flat dark rectangle, with no image weight to download */
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(900px, 120vw); aspect-ratio: 1;
  transform: translateX(-40%);
  background: radial-gradient(circle, rgba(76,211,160,0.09), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: 26px; }

.ridge { margin-top: clamp(40px, 6vw, 68px); width: 100%; height: auto; display: block; }
.ridge path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ridge path { animation: none; stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}

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

.divisions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (max-width: 840px) { .divisions { grid-template-columns: 1fr; } }

.division {
  background: var(--bg);
  padding: clamp(30px, 4.2vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.24s ease;
}
.division:hover { background: var(--bg-2); }

.division .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--jade);
}
.division.inv .num { color: var(--amber); }
.division h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.division p { color: var(--fg-2); font-size: 15px; }

.division .go {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jade);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.division.inv .go { color: var(--amber); }
.division:hover .go .arrow { transform: translateX(4px); }
.go .arrow { transition: transform 0.22s ease; }

/* why: the two division cards must line up block for block. The left card's
   first paragraph runs a line longer than the right one, and with each card
   laid out independently that pushes every following block on the right up
   by a row. Subgrid makes both cards share the parent's row tracks, so each
   track is sized to the taller of the two and the second paragraph, the tag
   row and the link all start on the same line. Progressive enhancement — the
   flex layout above still renders without subgrid, just unaligned. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 841px) {
    .divisions { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .division {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 16px;
    }
    .division .go { margin-top: 0; align-self: end; }
  }
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ---------- grids ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 52px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
/* why: four cells of running prose at a 1140px cap gives ~285px columns,
   which is too narrow to read. 2x2 keeps the bordered-table look and
   doubles the measure. */
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.point h3 { margin-bottom: 8px; }
.point p { color: var(--fg-2); font-size: 15px; }
.point .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--jade-dim);
  display: block;
  margin-bottom: 10px;
}
.point.amber .k { color: var(--amber-dim); }
.cell { background: var(--bg); padding: clamp(22px, 2.8vw, 32px); }

/* ---------- capability lists ---------- */

.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3.4vw, 46px); }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

.cap h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.cap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cap li { font-size: 14.5px; color: var(--fg-2); padding-left: 18px; position: relative; line-height: 1.5; }
.cap li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 1px;
  background: var(--jade-dim);
}
.cap.amber li::before { background: var(--amber-dim); }

/* ---------- callout ---------- */

.callout {
  border-left: 2px solid var(--jade-dim);
  padding: 4px 0 4px 22px;
  color: var(--fg-2);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.6;
  max-width: 64ch;
}
.callout.amber { border-left-color: var(--amber-dim); }

/* ---------- status banner ---------- */

.status {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 4px rgba(76,211,160,0.14);
  flex: none;
  margin-top: 9px;
}
.status .body { flex: 1; }
.status h3 { margin-bottom: 6px; }
.status p { color: var(--fg-2); font-size: 14.5px; }

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

.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

address { font-style: normal; color: var(--fg-2); font-size: 15.5px; line-height: 1.75; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 26px; font-size: 14.5px; }
.dl dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 4px;
}
.dl dd { margin: 0; color: var(--fg-2); }

.link {
  color: var(--jade);
  border-bottom: 1px solid rgba(76,211,160,0.32);
  transition: border-color 0.18s ease;
}
.link:hover { border-bottom-color: var(--jade); }

.site-footer { border-top: 1px solid var(--line-soft); padding-block: 36px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.site-footer p, .site-footer a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--fg-3);
  margin: 0;
}
.site-footer a:hover { color: var(--fg-2); }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- fine print ---------- */

.fineprint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 78ch;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}