/* ============================================================
   DIRECTION F — "LIVING"
   An organism, not a layout. Petal / leaf-shaped pods (a nod to
   plant-derived actives), cell-cluster diagrams, flowing vessel
   filaments threading the whole page, capsule controls, and
   wavy membrane dividers instead of hard section edges.
   Deep luminous teal-navy, carried from Direction D.
   ============================================================ */

:root {
  --f-base:    #08202d;
  --f-base-2:  #0a2738;
  --f-text:    rgba(233,246,250,0.92);
  --f-muted:   rgba(202,224,233,0.62);
  --f-faint:   rgba(202,224,233,0.4);
  --f-border:  rgba(140,220,235,0.14);
  --f-rim:     linear-gradient(135deg, rgba(77,192,172,.7), rgba(68,200,245,.55) 60%, transparent);
  /* organic leaf radii */
  --leaf-l:    14px 84px 14px 84px / 14px 84px 14px 84px;
  --leaf-r:    84px 14px 84px 14px / 84px 14px 84px 14px;
  --blob-a:    96px 68px 104px 58px / 70px 96px 58px 104px;
  --blob-b:    58px 104px 68px 96px / 104px 58px 96px 70px;
}

body {
  background: var(--f-base);
  color: var(--f-text);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Pervasive living background ---------- */
.bg-field { display: none; }
.bg-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 760px at 84% -10%, rgba(68,200,245,0.2), transparent 58%),
    radial-gradient(1000px 700px at 4% 20%, rgba(77,192,172,0.17), transparent 56%),
    radial-gradient(1300px 1000px at 64% 116%, rgba(71,173,197,0.15), transparent 62%),
    linear-gradient(180deg, var(--f-base) 0%, var(--f-base-2) 100%);
}
.page { position: relative; z-index: 1; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 54px; position: relative; }

/* ---------- Eyebrow as a budding stem ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 13px; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px rgba(77,192,172,.8), -16px 0 0 -3px rgba(68,200,245,.5); }

/* ---------- Capsule controls (no rectangles) ---------- */
.cta-solid { background: var(--amber); color: #3a2a02; font-weight: 600; font-size: 15.5px; padding: 15px 30px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; transition: filter .2s var(--ease), transform .25s var(--ease), box-shadow .25s; box-shadow: 0 12px 34px -10px rgba(250,166,26,.6); }
.cta-solid:hover { filter: brightness(1.06); transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 42px -10px rgba(250,166,26,.7); }
.cta-ghost { color: #fff; font-weight: 600; font-size: 15.5px; padding: 15px 30px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; position: relative; background: rgba(255,255,255,.04); backdrop-filter: blur(6px); transition: transform .25s var(--ease), background .2s; border: 1px solid transparent; }
.cta-ghost::before { content: ""; position: absolute; inset: 0; border-radius: 999px; padding: 1px; background: var(--f-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cta-ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px) scale(1.01); }

.alink { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 16px; color: #fff; transition: gap .2s var(--ease); white-space: nowrap; }
.alink .ar { color: var(--teal); transition: transform .2s var(--ease); }
.alink:hover { gap: 16px; }
.alink.muted { color: var(--f-muted); }
.alink.muted:hover { color: #fff; }

/* ---------- Announcement bar ---------- */
.annbar { position: relative; z-index: 40; background: rgba(5,18,26,0.55); backdrop-filter: blur(8px); border-bottom: 1px solid var(--f-border); font-size: 13px; }
.annbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 46px; gap: 16px; }
.ann-text { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; color: var(--f-muted); margin: 0; }
.ann-tag { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(77,192,172,.45); padding: 3px 10px; border-radius: 999px; }
.ann-type { font-weight: 600; color: #fff; }
.ann-dot { color: rgba(255,255,255,.3); }
.ann-read { font-weight: 600; color: #fff; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.ann-read:hover { color: var(--teal); }
.ann-x { background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: rgba(255,255,255,.45); padding: 4px 8px; flex: none; }
.ann-x:hover { color: #fff; }
@media (max-width: 680px) { .ann-body { display: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7,24,34,0.6); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--f-border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.brand img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; color: rgba(233,246,250,.82); text-decoration: none; transition: color .2s var(--ease); }
.nav-links a:hover { color: var(--teal); }
.header-cta { display: flex; align-items: center; gap: 20px; }
.util { display: flex; align-items: center; gap: 18px; }
.util a { font-size: 13.5px; font-weight: 500; color: var(--f-muted); text-decoration: none; }
.util a:hover { color: #fff; }
.btn-amber { background: var(--amber); color: #3a2a02; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: filter .2s var(--ease), transform .2s; box-shadow: 0 8px 22px -10px rgba(250,166,26,.7); }
.btn-amber:hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (max-width: 1080px) { .util { display: none; } }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; padding: 64px 0 90px; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 115% at 16% 52%, var(--f-base) 0%, rgba(8,32,45,0.96) 24%, rgba(8,32,45,0.74) 44%, rgba(8,32,45,0.22) 66%, rgba(8,32,45,0) 80%); }
.hero-fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,32,45,0.5) 0%, rgba(8,32,45,0) 16%, rgba(8,32,45,0) 76%, var(--f-base) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-inner { max-width: 800px; }
.hero-eyebrow { margin-bottom: 30px; }
.hero h1 { font-weight: 700; color: #fff; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(48px, 7vw, 100px); margin: 0; }
.hero h1 .l1 { display: block; font-weight: 300; color: rgba(255,255,255,.94); }
.hero h1 .l2 { display: block; }
.hero h1 .l2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { margin-top: 34px; font-size: 20px; line-height: 1.62; color: var(--f-muted); max-width: 640px; font-weight: 300; }
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-def { margin-top: 40px; padding-left: 22px; border-left: 2px solid rgba(77,192,172,.5); max-width: 600px; }
.hero-def .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.hero-def p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--f-faint); font-weight: 300; }

/* ---------- Membrane wave divider ---------- */
.membrane { position: relative; z-index: 2; line-height: 0; }
.membrane svg { display: block; width: 100%; height: 70px; }
.membrane .edge { fill: none; stroke: url(#fGrad); stroke-width: 2; opacity: .6; }
.membrane .edge2 { fill: none; stroke: rgba(140,220,235,.18); stroke-width: 1.5; }

/* ---------- Section scaffold ---------- */
.block { position: relative; padding: 116px 0; z-index: 2; }
.block-head { max-width: 940px; }
.block h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; font-size: clamp(38px, 5vw, 70px); margin-top: 24px; color: #fff; }
.block h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lede { margin-top: 26px; font-size: 20px; line-height: 1.55; max-width: 720px; font-weight: 300; color: var(--f-muted); }
.lede strong { color: #fff; font-weight: 600; }

/* ---------- POD primitive (frosted cell with luminous rim) ---------- */
.pod { position: relative; background: rgba(255,255,255,0.045); backdrop-filter: blur(14px); padding: 40px 42px; overflow: hidden; }
.pod::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--f-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .8; }
.pod.leaf-l { border-radius: var(--leaf-l); }
.pod.leaf-r { border-radius: var(--leaf-r); }
.pod.blob-a { border-radius: var(--blob-a); }
.pod.blob-b { border-radius: var(--blob-b); }

/* ---------- PROOF — orbiting cells ---------- */
.proof { position: relative; z-index: 2; padding: 30px 0 10px; }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proof-cell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 26px; border-radius: 50% 50% 48% 52% / 52% 50% 50% 48%; background: radial-gradient(circle at 42% 36%, rgba(77,192,172,0.14), rgba(255,255,255,0.03) 70%); border: 1px solid var(--f-border); }
.proof-cell:nth-child(odd) { transform: translateY(-16px); }
.proof-cell:nth-child(even) { transform: translateY(16px); }
.proof-num { font-size: 54px; font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.proof-num .u { font-size: 22px; color: var(--teal); }
.proof-num.txt { font-size: 36px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.proof-label { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--f-muted); }
.proof-label b { color: #fff; font-weight: 600; }

/* ---------- PROBLEM — scattered cell colony ---------- */
.colony { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.colony .pod:nth-child(1) { margin-top: 0; }
.colony .pod:nth-child(2) { margin-top: 54px; }
.colony .pod:nth-child(3) { margin-top: 22px; }
.pod .pn { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--teal); }
.pod h3 { margin-top: 16px; font-size: 21px; font-weight: 600; color: #fff; line-height: 1.26; letter-spacing: -0.01em; }
.pod p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--f-muted); }
.pod p b { color: #fff; font-weight: 600; }
.kicker { margin-top: 60px; font-size: clamp(28px, 3.6vw, 52px); font-weight: 300; color: #fff; letter-spacing: -0.02em; text-align: center; }
.kicker b { font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- SOLUTION — flowering cluster ---------- */
.cluster { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cluster .pod:nth-child(3n+2) { margin-top: 40px; }
.petal-ico { width: 38px; height: 38px; margin-bottom: 6px; }
.cluster .fn { font-size: 12px; font-weight: 700; color: var(--teal); letter-spacing: .1em; }
.cluster h3 { margin-top: 12px; font-size: 18.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.cluster p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--f-muted); }

/* ---------- Domain thread (signature nucleus diagram) ---------- */
.thread { margin-top: 72px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.thread-copy p { font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; color: #fff; line-height: 1.4; letter-spacing: -0.01em; }
.thread-copy p b { font-weight: 700; }
.thread-diagram { position: relative; }
.sol-links { margin-top: 50px; display: flex; flex-wrap: wrap; gap: 18px 40px; }

/* ---------- PLATFORM / TEROKA ---------- */
.platform-grid { display: grid; grid-template-columns: 0.95fr 1.12fr; gap: 64px; align-items: center; margin-top: 52px; }
.platform-note { margin-top: 28px; padding: 24px 28px; border-radius: var(--leaf-l); border: 1px solid var(--f-border); background: rgba(255,255,255,.04); font-size: 16px; line-height: 1.55; color: var(--f-muted); }
.platform-note b { color: #fff; font-weight: 600; }
.teroka-wrap { position: relative; padding: 14px; }
.teroka-glow { position: absolute; inset: -4%; background: radial-gradient(circle at 50% 46%, rgba(77,192,172,.26), rgba(68,200,245,.12) 44%, transparent 66%); filter: blur(10px); pointer-events: none; }
.teroka-caption { margin-top: 18px; font-size: 13px; color: var(--f-faint); text-align: center; }
.teroka .flow { animation: fDash 1.4s linear infinite; }
.teroka .flow-rev { animation-direction: reverse; }
.teroka .flow-out { animation-duration: 1.1s; }
@keyframes fDash { to { stroke-dashoffset: -20; } }
.teroka .orb { transform-box: fill-box; transform-origin: center; animation: fPulse 4s var(--ease) infinite; }
.teroka .orb-b { animation-delay: 2s; }
@keyframes fPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .teroka .flow, .teroka .orb, .thread-diagram .spin, .thread-diagram .met { animation: none; } }

/* ---------- PORTFOLIO — two organisms ---------- */
.port-grid { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.organism { position: relative; padding: 48px 46px 42px; display: flex; flex-direction: column; transition: transform .35s var(--ease); }
.organism:nth-child(2) { margin-top: 44px; }
.organism:hover { transform: translateY(-6px); }
.organism .ptag { font-size: 12.5px; font-weight: 700; letter-spacing: .15em; color: var(--teal); }
.organism h3 { margin-top: 16px; font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.08; }
.organism .role { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--f-faint); }
.organism p { margin-top: 20px; font-size: 15.5px; line-height: 1.6; color: var(--f-muted); flex: 1; }
.organism .alink { margin-top: 26px; align-self: flex-start; }
.pipeline-link { margin-top: 44px; text-align: center; }

/* ---------- INSIGHTS + NEWS ---------- */
.split-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; max-width: none; }
.ins-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ins-card { text-decoration: none; display: flex; flex-direction: column; padding: 34px 32px; transition: transform .35s var(--ease); }
.ins-card:nth-child(2) { margin-top: 30px; }
.ins-card:hover { transform: translateY(-5px); }
.ins-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.ins-card h3 { margin-top: 16px; font-size: 19px; font-weight: 600; color: #fff; line-height: 1.3; letter-spacing: -0.01em; flex: 1; }
.ins-card .author { margin-top: 28px; font-size: 13px; color: var(--f-faint); }

.news-list { margin-top: 44px; display: grid; gap: 0; }
.news-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 28px; align-items: center; padding: 22px 4px; border-bottom: 1px solid var(--f-border); text-decoration: none; transition: padding-left .25s var(--ease); }
.news-row { position: relative; }
.news-row::before { content: ""; position: absolute; left: -2px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); transform: translateY(-50%) scale(0); transition: transform .25s var(--ease); box-shadow: 0 0 10px rgba(77,192,172,.8); }
.news-row:hover { padding-left: 18px; }
.news-row:hover::before { transform: translateY(-50%) scale(1); }
.news-date { font-size: 13px; font-weight: 600; color: var(--f-faint); font-variant-numeric: tabular-nums; }
.news-title { font-size: 17px; font-weight: 500; color: #fff; line-height: 1.4; }
.news-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }

/* ---------- SUBSCRIBE ---------- */
.subscribe { position: relative; }
.sub-pod { position: relative; padding: 70px 84px; overflow: hidden; border-radius: 120px 56px 120px 56px / 80px 56px 80px 56px; }
.sub-glow { position: absolute; top: -50%; right: -8%; width: 740px; height: 740px; background: radial-gradient(circle, rgba(68,200,245,.22), transparent 60%); pointer-events: none; }
.sub-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.sub-inner h2 { font-size: clamp(34px, 4vw, 56px); margin-top: 20px; }
.sub-form { display: flex; gap: 12px; }
.sub-form input { flex: 1; border: 1px solid var(--f-border); background: rgba(255,255,255,.06); border-radius: 999px; padding: 16px 22px; font-family: var(--font); font-size: 15.5px; color: #fff; }
.sub-form input::placeholder { color: var(--f-faint); }
.sub-form input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.sub-note { margin-top: 16px; font-size: 13.5px; color: var(--f-faint); }
.sub-note a { color: var(--teal); font-weight: 600; text-decoration: none; }

/* ---------- FOOTER ---------- */
.site-footer { position: relative; z-index: 2; background: rgba(4,16,23,0.66); border-top: 1px solid var(--f-border); padding: 74px 0 42px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.site-footer .brand-foot img { height: 26px; margin-bottom: 20px; }
.site-footer .tagline { font-size: 14px; line-height: 1.65; max-width: 300px; color: var(--f-muted); }
.foot-col h4 { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--f-faint); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; color: var(--f-muted); text-decoration: none; padding: 7px 0; }
.foot-col a:hover { color: var(--teal); }
.foot-bottom { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--f-border); display: flex; justify-content: space-between; font-size: 13px; color: var(--f-faint); flex-wrap: wrap; gap: 10px; }

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .platform-grid, .port-grid, .ins-grid, .thread, .sub-inner, .cluster, .colony { grid-template-columns: 1fr; }
  .proof .wrap { grid-template-columns: repeat(2, 1fr); }
  .colony .pod, .cluster .pod, .ins-card, .organism { margin-top: 0 !important; transform: none !important; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .ins-grid { grid-template-columns: 1fr; }
  /* hero text fills the width — dim the whole field for legibility */
  .hero-veil { background: radial-gradient(150% 130% at 32% 46%, var(--f-base) 0%, rgba(8,32,45,0.92) 40%, rgba(8,32,45,0.5) 70%, rgba(8,32,45,0.12) 100%); }
}
@media (max-width: 600px) {
  .wrap { padding: 0 22px; }
  .nav-links { display: none; }
  .proof .wrap { grid-template-columns: 1fr; }
  .proof-cell { transform: none !important; }
  .block { padding: 78px 0; }
  .sub-pod { padding: 44px 26px; }
  .news-row { grid-template-columns: 1fr; gap: 6px; }
  .pod, .organism, .sub-pod { border-radius: 28px !important; }
}