/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(70px, 10vw, 120px); }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px;
  border: 1px solid var(--border-strong); border-radius: 100px; background: rgba(255,255,255,.03);
  font-size: .85rem; color: var(--text-soft); margin-bottom: 28px;
}

.hero h1 { max-width: 16ch; margin-bottom: 26px; }

.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Hero canvas ---- */
.hero { position: relative; }

.hero-grid-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%); mask: radial-gradient(80% 60% at 50% 30%, #000, transparent 75%); }

/* ---- Bento grid ---- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }

.bento .b-2 { grid-column: span 2; }

@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .b-2 { grid-column: span 1; } }

/* ---- Big metric ---- */
.metric .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.03em; line-height: 1; }

/* ---- Section glyphs: a bespoke looping micro-animation per section instead of a
   "01 02 03" numbered list - each one previews what the section is actually about,
   same "unique mini-demo per item" language as the .sc-* service-card icons. All
   glyphs share one chip silhouette so the artwork inside can vary freely. ---- */
.mlabel-glyph { display: flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border); background: #0c0f17; }

.mlabel-glyph svg { width: 24px; height: 24px; overflow: visible; }

/* 01 - tech universe: a tiny constellation, echoing the canvas below it */
.mlg-orbit .g-link { stroke: rgba(109,139,255,.45); stroke-width: 1.4; }

.mlg-orbit .g-node { fill: #0c0f17; stroke: var(--accent); stroke-width: 1.6; }

.mlg-orbit .g-pulse { fill: var(--accent-2); filter: drop-shadow(0 0 3px rgba(67,231,208,.85)); }

/* 02 - capabilities: layers assembling into a stack */
.mlg-stack .g-bar { fill: var(--accent-3); opacity: .4; animation: mlg-rise 2.8s var(--ease) infinite; }

.mlg-stack .g-bar2 { animation-delay: .28s; fill: var(--accent); }

.mlg-stack .g-bar3 { animation-delay: .56s; fill: var(--accent-2); }

@keyframes mlg-rise { 0%, 100% { opacity: .4; } 30% { opacity: 1; } }

/* 03 - why us: a signature checkmark drawing in, then holding */
.mlg-check .g-check { fill: none; stroke: var(--accent-2); stroke-dasharray: 24; stroke-dashoffset: 24;
  filter: drop-shadow(0 0 4px rgba(67,231,208,.6)); animation: mlg-draw 3s var(--ease) infinite; }

@keyframes mlg-draw { 0% { stroke-dashoffset: 24; } 35%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -24; } }

/* 04 - blueprints: a schematic frame with a scanning pass */
.mlg-blueprint .g-bp-frame { fill: none; stroke: rgba(140,165,235,.4); stroke-width: 1.2; }

.mlg-blueprint .g-bp-grid { stroke: rgba(140,165,235,.22); stroke-width: 1; }

.mlg-blueprint .g-bp-scan { fill: var(--accent); opacity: .55; animation: mlg-scan 3.2s ease-in-out infinite; }

@keyframes mlg-scan { 0%, 8% { transform: translateY(0); opacity: .55; } 92%, 100% { transform: translateY(13px); opacity: .55; } 50% { opacity: .18; } }

/* 05 - idea to launch: a dot climbing a rising trajectory */
.mlg-launch .g-launch-path { fill: none; stroke: rgba(176,120,255,.35); stroke-width: 1.3; stroke-dasharray: 2 4; }

.mlg-launch .g-launch-dot { fill: var(--accent-3); filter: drop-shadow(0 0 4px rgba(176,120,255,.85)); }

/* 06 - selected work: a browser frame with content refreshing */
.mlg-browser .g-br-frame { fill: none; stroke: rgba(140,165,235,.4); stroke-width: 1.2; }

.mlg-browser .g-br-dot { fill: rgba(140,165,235,.5); }

.mlg-browser .g-br-line { fill: var(--accent-2); }

.mlg-browser .g-br-line1 { animation: mlg-linefade 3s ease infinite; }

.mlg-browser .g-br-line2 { animation: mlg-linefade 3s ease infinite .3s; fill: var(--accent); }

@keyframes mlg-linefade { 0%, 100% { opacity: .35; } 45% { opacity: 1; } }

.progressbar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 8px; }

.progressbar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width .35s var(--ease); }

/* ---- Service index (editorial rows) ---- */
.svc-index { border-top: 1px solid var(--border); }

.svc-row { position: relative; display: grid; grid-template-columns: 84px 1.15fr 1fr auto; align-items: center; gap: 22px; padding: 30px 10px; border-bottom: 1px solid var(--border); color: var(--text); transition: padding .35s var(--ease), background .35s; overflow: hidden; }

.svc-row .bg { position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity .35s; }

.svc-row:hover { padding-left: 26px; }

.svc-row:hover .bg { opacity: 1; }

.svc-row .no { font-family: var(--mono); font-size: .8rem; color: var(--text-mute); letter-spacing: .1em; }

.svc-row .nm { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.9rem); letter-spacing: -.02em; position: relative; }

.svc-row .ds { color: var(--text-soft); font-size: .93rem; position: relative; }

.svc-row .go { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; transition: transform .35s var(--ease), background .35s, border-color .35s; position: relative; }

.svc-row .go svg { width: 19px; height: 19px; stroke: currentColor; transition: transform .35s var(--ease); }

.svc-row:hover .go { background: var(--grad); border-color: transparent; color: #07090f; transform: rotate(-45deg); }

@media (max-width: 800px) { .svc-row { grid-template-columns: 48px 1fr auto; } .svc-row .ds { display: none; } }

/* ---- Manifesto (scroll-highlight words) ---- */
.manifesto { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.35; letter-spacing: -.02em; max-width: 22ch; }

/* ---- Stack blueprint cards ---- */
.blueprint { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 26px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s; }

.blueprint:hover { transform: translateY(-6px); border-color: var(--border-strong); }

.blueprint .bp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

.blueprint h3 { font-size: 1.25rem; }

.blueprint .eta { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; color: var(--text-mute); border: 1px solid var(--border); padding: 4px 10px; border-radius: 100px; }

.blueprint .use { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin: 4px 0 12px; }

.blueprint p { color: var(--text-soft); font-size: .93rem; }

.blueprint::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .8; }

.blueprint.c1::after { background: linear-gradient(90deg, #b078ff, #6d8bff); }

.blueprint.c2::after { background: linear-gradient(90deg, #6d8bff, #43e7d0); }

.blueprint.c3::after { background: linear-gradient(90deg, #43e7d0, #b078ff); }

/* ---- Giant gradient numerals ---- */
.ghost-n { position: relative; font-family: var(--mono); font-weight: 700; font-size: clamp(3rem, 7vw, 5rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: .5; transition: opacity .4s, filter .4s; }

.step-card { position: relative; overflow: hidden; }

.step-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); opacity: 0; transition: opacity .4s; }

.step-card:hover::after { opacity: 1; }

/* ---- Tech Universe (interactive logo constellation) ---- */
.tv-wrap { position: relative; height: clamp(430px, 62vh, 620px); border-block: 1px solid var(--border);
  background: radial-gradient(80% 90% at 50% 0%, rgba(109,139,255,.06), transparent 70%); overflow: hidden; }

/* galaxies stack 2-up on phones - needs more vertical room than one band */
@media (max-width: 700px) { .tv-wrap { height: 660px; } }

/* ---- Hero rotating word + outcome ticker ---- */
.rl { display: block; min-height: 1.15em; }

.rotate-wrap { }

.rw-caret { display: inline-block; width: 4px; height: .82em; margin-left: 4px; background: var(--accent-2); vertical-align: baseline; animation: blink 1s steps(1) infinite; border-radius: 2px; }

.outcome-ticker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); border: 1px solid var(--border); border-radius: 100px; padding: 9px 18px; background: rgba(255,255,255,.02); }

.outcome-ticker .ot-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: pulse 2.2s infinite; flex: none; }