@import "tailwindcss";

:root { --ink:#0b1120; --paper:#f5f3ee; --white:#fff; --blue:#1463ff; --cyan:#46d9ff; --line:rgba(11,17,32,.14); --muted:#596174; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }

.site-header { height:88px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; width:100%; z-index:20; color:white; border-bottom:1px solid rgba(255,255,255,.14); }
.brand { display:inline-flex; align-items:center; gap:13px; }
.brand-mark { width:31px; height:31px; display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:3px; transform:skew(-18deg); }
.brand-mark i { display:block; background:var(--cyan); border-radius:1px; }
.brand-mark i:nth-child(1) { height:44%; }.brand-mark i:nth-child(2) { height:72%; }.brand-mark i:nth-child(3) { height:100%; }
.brand-name { font-size:18px; font-weight:800; letter-spacing:.16em; }.brand-name span { color:var(--cyan); font-size:10px; letter-spacing:.08em; margin-left:5px; vertical-align:super; }
.nav { display:flex; align-items:center; gap:clamp(26px,3vw,48px); font-size:14px; }.nav>a:not(.nav-cta) { color:rgba(255,255,255,.75); transition:color .2s; }.nav>a:hover { color:white; }
.nav-cta { display:flex; align-items:center; gap:18px; border-left:1px solid rgba(255,255,255,.25); padding-left:34px; font-weight:700; }.nav-cta span { color:var(--cyan); font-size:18px; }
.menu-button { display:none; border:0; color:white; background:transparent; }

.hero { min-height:820px; height:100vh; max-height:980px; background:var(--ink); color:white; padding:160px clamp(24px,6vw,92px) 70px; position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); align-items:center; gap:7vw; }
.hero::before { content:""; position:absolute; width:780px; height:780px; border-radius:50%; background:radial-gradient(circle,rgba(20,99,255,.19),transparent 66%); right:-200px; top:-170px; }
.hero-grid { position:absolute; inset:0; opacity:.11; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to right,black,transparent 80%); }
.hero-content,.signal-card { position:relative; z-index:2; }
.eyebrow,.kicker { text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:800; display:flex; align-items:center; gap:12px; }.eyebrow { color:rgba(255,255,255,.64); }.eyebrow span { width:28px; height:2px; background:var(--cyan); }
.hero h1 { font-size:clamp(58px,6.4vw,100px); letter-spacing:-.065em; line-height:.94; margin:28px 0 32px; max-width:900px; font-weight:700; }.hero h1 em,.approach h2 em,.about h2 em,.contact h2 em { color:var(--cyan); font-style:normal; }
.hero-copy { max-width:620px; font-size:clamp(17px,1.4vw,21px); line-height:1.65; color:rgba(255,255,255,.66); }
.hero-actions { display:flex; align-items:center; gap:36px; margin-top:44px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:58px; padding:0 28px; font-weight:800; font-size:14px; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--blue); color:white; }.button-primary span { color:var(--cyan); font-size:18px; }
.text-link { font-weight:700; font-size:13px; border-bottom:1px solid rgba(255,255,255,.3); padding:12px 0; }.text-link span { color:var(--cyan); margin-left:12px; }
.signal-card { border:1px solid rgba(255,255,255,.16); background:rgba(15,25,45,.76); backdrop-filter:blur(16px); padding:24px; min-height:470px; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.signal-top { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.52); }.live { display:flex; align-items:center; gap:7px; }.live i { width:6px; height:6px; background:#3cffad; border-radius:50%; box-shadow:0 0 10px #3cffad; }
.signal-visual { height:285px; display:grid; place-items:center; position:relative; }.orbit { position:absolute; border:1px solid rgba(70,217,255,.25); border-radius:50%; }.orbit-one { width:92px; height:92px; }.orbit-two { width:170px; height:170px; }.orbit-three { width:250px; height:250px; }
.signal-visual::before,.signal-visual::after { content:""; position:absolute; background:rgba(70,217,255,.18); }.signal-visual::before { height:1px; width:85%; }.signal-visual::after { width:1px; height:85%; }.pulse { width:22px; height:22px; background:var(--cyan); border:6px solid var(--blue); outline:1px solid var(--cyan); border-radius:50%; box-shadow:0 0 40px var(--blue); z-index:2; }
.signal-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.12); padding-top:20px; gap:12px; }.signal-stats div { display:flex; flex-direction:column; gap:7px; }.signal-stats strong { font-size:13px; }.signal-stats span { font-size:10px; line-height:1.4; color:rgba(255,255,255,.45); }
.market-visual { height:285px; position:relative; padding:38px 8px 18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; overflow:hidden; }
.market-visual::before { content:""; position:absolute; inset:25px 0 10px; background-image:linear-gradient(rgba(70,217,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(70,217,255,.1) 1px,transparent 1px); background-size:38px 38px; }
.metric { position:relative; z-index:2; border:1px solid rgba(255,255,255,.12); background:rgba(11,17,32,.72); padding:14px; display:flex; flex-direction:column; gap:5px; }
.metric span,.metric small { color:rgba(255,255,255,.42); font-size:8px; letter-spacing:.14em; }.metric strong { font-size:25px; color:white; }.metric-b { margin-top:35px; }
.chart-line { position:absolute; z-index:3; left:14px; right:14px; bottom:48px; height:70px; display:flex; align-items:flex-end; gap:8px; border-bottom:1px solid rgba(70,217,255,.3); transform:skewY(-6deg); }
.chart-line i { flex:1; background:linear-gradient(to top,var(--blue),var(--cyan)); opacity:.8; }.chart-line i:nth-child(1){height:25%}.chart-line i:nth-child(2){height:44%}.chart-line i:nth-child(3){height:38%}.chart-line i:nth-child(4){height:61%}.chart-line i:nth-child(5){height:72%}.chart-line i:nth-child(6){height:94%}
.hero-footer { position:absolute; bottom:0; left:0; right:0; z-index:3; height:64px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; gap:30px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.45); font-size:9px; }.hero-footer i { width:3px; height:3px; background:var(--cyan); border-radius:50%; }

.section { padding:clamp(90px,11vw,160px) clamp(24px,7vw,112px); }.section-intro { display:grid; grid-template-columns:.55fr 1.2fr .75fr; align-items:end; gap:5vw; padding-bottom:70px; }.kicker { color:var(--blue); align-self:start; }.section-intro h2,.approach h2,.about h2,.contact h2 { font-size:clamp(42px,4.5vw,70px); line-height:1.02; letter-spacing:-.045em; margin:0; }.section-intro>p:last-child { color:var(--muted); line-height:1.7; margin:0; }
.service-list { border-top:1px solid var(--line); }.service-card { min-height:220px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:.18fr 1fr .72fr 40px; gap:3vw; align-items:center; position:relative; transition:padding .25s,background .25s; }.service-card:hover { background:white; padding-left:22px; padding-right:22px; }.service-number { font-family:monospace; color:var(--blue); font-size:12px; }.service-card h3 { font-size:clamp(27px,3vw,42px); letter-spacing:-.04em; margin:0 0 14px; }.service-card p { color:var(--muted); max-width:580px; line-height:1.6; margin:0; }.service-card ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }.service-card li { border:1px solid var(--line); border-radius:50px; padding:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; }.card-arrow { font-size:24px; color:var(--blue); }

.approach { background:var(--ink); color:white; }.approach-heading { display:grid; grid-template-columns:.5fr 1.1fr .65fr; gap:5vw; align-items:end; margin-bottom:90px; }.kicker.light { color:var(--cyan); }.approach-heading>p:last-child { color:rgba(255,255,255,.55); line-height:1.7; }
.capabilities { background:#102f73; color:white; }.capability-heading { display:grid; grid-template-columns:.5fr 1.1fr .65fr; gap:5vw; align-items:end; margin-bottom:70px; }.capability-heading h2 { font-size:clamp(42px,4.5vw,70px); line-height:1.02; letter-spacing:-.045em; margin:0; }.capability-heading h2 em { color:var(--cyan); font-style:normal; }.capability-heading>p:last-child { color:rgba(255,255,255,.62); line-height:1.7; }
.capability-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18); border-left:1px solid rgba(255,255,255,.18); }.capability-grid article { min-height:270px; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); padding:28px; }.capability-grid span { font-family:monospace; color:var(--cyan); font-size:11px; }.capability-grid h3 { font-size:28px; margin:82px 0 18px; }.capability-grid p { color:rgba(255,255,255,.58); font-size:13px; line-height:1.65; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.15); border-left:1px solid rgba(255,255,255,.15); }.process-grid article { min-height:350px; border-right:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); padding:28px; position:relative; }.process-grid article>span { font-family:monospace; color:rgba(255,255,255,.35); font-size:11px; }
.process-icon { width:74px; height:74px; border:1px solid rgba(70,217,255,.3); border-radius:50%; margin:55px 0 38px; display:grid; place-items:center; }.process-icon i { display:block; width:12px; height:12px; background:var(--cyan); transform:rotate(45deg); }.process-grid article:nth-child(2) .process-icon i { border-radius:50%; }.process-grid article:nth-child(3) .process-icon i { background:transparent; border:2px solid var(--cyan); }.process-grid article:nth-child(4) .process-icon i { width:22px; height:2px; transform:none; }.process-grid h3 { font-size:24px; margin:0 0 18px; }.process-grid p { color:rgba(255,255,255,.5); font-size:13px; line-height:1.65; }

.about { display:grid; grid-template-columns:1fr 1fr; gap:10vw; }.about h2 { margin-top:34px; }.about h2 em { color:var(--blue); }.about-copy>p { font-size:18px; line-height:1.7; color:var(--muted); }.about-copy>p:first-child { font-size:25px; line-height:1.45; color:var(--ink); font-weight:600; }.principles { margin-top:56px; border-top:1px solid var(--line); }.principles div { display:grid; grid-template-columns:42px .55fr 1fr; align-items:center; gap:20px; min-height:86px; border-bottom:1px solid var(--line); }.principles span { font-family:monospace; font-size:10px; color:var(--blue); }.principles strong { font-size:14px; }.principles p { color:var(--muted); font-size:12px; line-height:1.5; }

.contact { min-height:600px; background:var(--blue); color:white; text-align:center; padding:110px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }.contact-noise { position:absolute; inset:0; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:55px 55px; transform:perspective(400px) rotateX(55deg) scale(1.5); transform-origin:bottom; }.contact>* { position:relative; }.contact h2 { margin:28px 0; }.contact>p:not(.kicker) { color:rgba(255,255,255,.7); max-width:520px; line-height:1.7; }.button-light { background:white; color:var(--ink); margin-top:28px; }
footer { background:#080d18; color:white; padding:72px clamp(24px,7vw,112px) 28px; display:grid; grid-template-columns:1.5fr .5fr .8fr; gap:60px; }.footer-brand p { color:rgba(255,255,255,.45); max-width:340px; font-size:13px; line-height:1.7; margin-top:25px; }.footer-links { display:flex; flex-direction:column; gap:15px; font-size:13px; color:rgba(255,255,255,.55); }.footer-links strong { color:white; text-transform:uppercase; letter-spacing:.14em; font-size:9px; margin-bottom:8px; }.footer-links a:hover { color:var(--cyan); }.footer-bottom { grid-column:1/-1; margin-top:35px; padding-top:25px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; color:rgba(255,255,255,.3); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

@media (max-width:980px) {
  .hero { height:auto; max-height:none; grid-template-columns:1fr; padding-top:150px; }.signal-card { max-width:600px; width:100%; margin-bottom:60px; }
  .section-intro,.approach-heading { grid-template-columns:1fr; }.section-intro h2,.approach h2 { margin:30px 0; }
  .service-card { grid-template-columns:60px 1fr 40px; padding:35px 0; }.service-card ul { grid-column:2; }.card-arrow { grid-column:3; grid-row:1; }
  .process-grid { grid-template-columns:repeat(2,1fr); }.about { grid-template-columns:1fr; }.about-copy { max-width:720px; }
}
@media (max-width:720px) {
  .site-header { height:72px; }.menu-button { display:flex; align-items:center; gap:10px; z-index:30; text-transform:uppercase; letter-spacing:.12em; font-size:10px; }.menu-button i { width:18px; height:1px; background:white; }
  .nav { display:none; position:fixed; inset:0; background:var(--ink); padding:120px 28px 40px; flex-direction:column; align-items:flex-start; gap:28px; font-size:24px; }.nav.open { display:flex; }.nav-cta { border-left:0; padding:22px 0 0; margin-top:14px; border-top:1px solid rgba(255,255,255,.15); width:100%; }
  .hero { min-height:760px; padding:130px 24px 90px; }.hero h1 { font-size:clamp(50px,15vw,68px); }.hero-copy { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.signal-card { min-height:420px; }.signal-visual { height:250px; }.orbit-three { width:210px; height:210px; }
  .hero-footer { gap:14px; padding:0 15px; }.hero-footer span:nth-of-type(n+3),.hero-footer i:nth-of-type(n+2) { display:none; }
  .section { padding:82px 24px; }.section-intro { padding-bottom:40px; }.section-intro h2,.approach h2,.about h2,.contact h2 { font-size:42px; }
  .service-card { grid-template-columns:36px 1fr; }.service-card ul { grid-column:2; }.card-arrow { display:none; }.process-grid { grid-template-columns:1fr; }.process-grid article { min-height:300px; }.process-icon { margin:38px 0 28px; }
  .principles div { grid-template-columns:30px 1fr; padding:16px 0; }.principles p { grid-column:2; margin:0; }.contact { min-height:560px; }.contact h2 br { display:none; }
  footer { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; }.footer-bottom { flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

@media (max-width:980px) { .capability-heading { grid-template-columns:1fr; }.capability-heading h2 { margin:30px 0; }.capability-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .capability-heading h2 { font-size:42px; }.capability-grid { grid-template-columns:1fr; }.capability-grid article { min-height:230px; }.capability-grid h3 { margin-top:55px; } }
