@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --ink:#071b2b; --paper:#f6f8f7; --white:#fff; --blue:#1d86f5; --blue-dark:#0b5fc3; --mint:#62e2c6; --line:rgba(7,27,43,.14); --muted:#5c6d78; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.topline { color:rgba(255,255,255,.8); background:var(--ink); font:500 11px/1 DM Mono,monospace; letter-spacing:.08em; text-transform:uppercase; }
.topline .shell { display:flex; justify-content:space-between; gap:18px; padding:11px 0; }
.topline strong { color:var(--mint); font-weight:500; }
header { position:relative; z-index:5; background:rgba(246,248,247,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.nav { height:82px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; color:var(--ink); background:var(--mint); border-radius:11px; font-size:15px; letter-spacing:-.08em; }
.brand span:last-child { font-size:16px; }
.nav-links { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:700; }
.nav-links a { color:var(--muted); }
.nav-links a:hover { color:var(--ink); }
.nav-links .nav-cta { color:var(--white); background:var(--ink); padding:12px 18px; border-radius:99px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--blue-dark); font:500 12px/1 DM Mono,monospace; letter-spacing:.11em; text-transform:uppercase; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:#2b9d8b; box-shadow:0 0 0 5px rgba(43,157,139,.12); }
.hero { padding:92px 0 82px; background:var(--paper); }
.hero h1 { max-width:820px; margin:20px 0 22px; font-size:clamp(48px,7vw,84px); letter-spacing:-.08em; line-height:.96; }
.hero h1 em { color:var(--blue); font-style:normal; }
.hero p { max-width:620px; color:var(--muted); font-size:18px; line-height:1.7; }
.section { padding:90px 0; background:var(--white); }
.section-alt { background:#edf3f2; }
.section-head { max-width:700px; margin-bottom:42px; }
.section-head h2 { margin:15px 0 12px; font-size:clamp(34px,4vw,56px); letter-spacing:-.06em; line-height:1.03; }
.section-head p { max-width:580px; margin:0; color:var(--muted); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { display:flex; min-height:260px; flex-direction:column; padding:26px; border:1px solid var(--line); border-radius:20px; background:var(--white); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.service-card:hover { transform:translateY(-5px); border-color:rgba(29,134,245,.45); box-shadow:0 17px 36px rgba(7,27,43,.08); }
.service-num { color:var(--blue); font:12px DM Mono,monospace; }
.service-card h3 { margin:38px 0 9px; font-size:20px; letter-spacing:-.04em; }
.service-card p { margin:0; color:var(--muted); font-size:13px; }
.card-link { display:inline-flex; gap:8px; align-items:center; margin-top:auto; padding-top:24px; color:var(--blue-dark); font-size:12px; font-weight:800; }
.service-path-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-path { padding:26px; border-radius:20px; background:var(--ink); color:var(--white); }
.service-path span { color:var(--mint); font:12px DM Mono,monospace; }
.service-path h3 { margin:34px 0 10px; font-size:21px; letter-spacing:-.04em; }
.service-path p { margin:0; color:rgba(255,255,255,.66); font-size:13px; }
.support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.support-card { padding:25px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.64); }
.support-card strong { display:block; margin-bottom:8px; font-size:16px; }
.support-card p { margin:0; color:var(--muted); font-size:13px; }
.detail-band { padding:78px 0; background:#edf3f2; }
.detail-band-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:start; }
.detail-band h2 { max-width:560px; margin:14px 0 14px; font-size:clamp(32px,4vw,52px); letter-spacing:-.06em; line-height:1.02; }
.detail-band-intro { max-width:540px; color:var(--muted); }
.detail-band-cards { display:grid; gap:12px; }
.detail-band-card { padding:19px 20px; border:1px solid rgba(7,27,43,.12); border-radius:15px; background:rgba(255,255,255,.72); }
.detail-band-card strong { display:block; margin-bottom:5px; font-size:14px; }
.detail-band-card p { margin:0; color:var(--muted); font-size:12px; }
.ideas { display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start; }
.ideas-list { display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin:0; padding:0; list-style:none; color:var(--muted); font-size:13px; }
.ideas-list li::before { content:"+"; display:inline-block; width:22px; color:var(--blue); font:14px DM Mono,monospace; }
.ecosystem { padding:24px; border:1px solid rgba(29,134,245,.2); border-radius:18px; background:rgba(255,255,255,.65); }
.ecosystem strong { display:block; margin-bottom:8px; font-size:15px; }
.ecosystem p { margin:0; color:var(--muted); font-size:12px; }
.ecosystem-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.ecosystem-tags span { padding:7px 9px; color:var(--blue-dark); border:1px solid rgba(29,134,245,.2); border-radius:99px; background:var(--white); font:11px DM Mono,monospace; }
.detail-hero { padding:75px 0 65px; background:var(--ink); color:var(--white); }
.detail-hero .eyebrow { color:var(--mint); }
.detail-hero h1 { max-width:770px; margin:19px 0 17px; font-size:clamp(43px,6vw,76px); letter-spacing:-.08em; line-height:.98; }
.detail-hero h1 em { color:var(--mint); font-style:normal; }
.detail-hero p { max-width:650px; color:rgba(255,255,255,.65); font-size:17px; }
.detail-main { padding:78px 0; background:var(--white); }
.detail-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:80px; }
.detail-copy h2 { margin:14px 0 17px; font-size:clamp(31px,4vw,50px); letter-spacing:-.06em; line-height:1.02; }
.detail-copy p { color:var(--muted); }
.detail-list { display:grid; gap:12px; margin:30px 0 0; padding:0; list-style:none; }
.detail-list li { display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.detail-list li::before { content:"01"; color:var(--blue); font:11px DM Mono,monospace; }
.detail-note { padding:26px; border-radius:20px; background:#edf3f2; }
.detail-note strong { display:block; margin-bottom:12px; font-size:16px; }
.detail-note p { margin:0; color:var(--muted); font-size:13px; }
.detail-note .btn { margin-top:25px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 20px; border-radius:99px; font-size:13px; font-weight:800; }
.btn-primary { color:var(--white); background:var(--blue); box-shadow:0 11px 25px rgba(29,134,245,.22); }
.btn-primary:hover { background:var(--blue-dark); }
.btn-quiet { color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.5); }
.cta { padding:75px 0; color:var(--white); background:var(--ink); }
.cta .shell { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta h2 { max-width:650px; margin:0; font-size:clamp(32px,4vw,52px); letter-spacing:-.06em; line-height:1.02; }
.cta .btn-primary { flex:0 0 auto; color:var(--ink); background:var(--mint); }
footer { color:rgba(255,255,255,.55); background:#04131f; }
.footer-main { display:flex; justify-content:space-between; gap:30px; padding:30px 0; }
footer .brand { color:var(--white); }
.footer-links { display:flex; gap:25px; font-size:12px; }
.footer-links a:hover { color:var(--mint); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:17px 0 23px; border-top:1px solid rgba(255,255,255,.1); font:10px DM Mono,monospace; }
@media (max-width:900px) { .service-grid,.service-path-grid,.support-grid { grid-template-columns:repeat(2,1fr); } .ideas,.detail-grid,.detail-band-grid { grid-template-columns:1fr; gap:40px; } .cta .shell { align-items:flex-start; flex-direction:column; } }
@media (max-width:680px) { .shell { width:min(calc(100% - 32px),var(--max)); } .topline span:last-child { display:none; } .nav { height:72px; } .nav-links { gap:15px; font-size:11px; } .nav-links a:not(.nav-cta) { display:none; } .hero { padding:60px 0; } .section,.detail-main,.detail-band { padding:68px 0; } .service-grid,.service-path-grid,.support-grid { grid-template-columns:1fr; } .ideas-list { grid-template-columns:1fr; } .footer-main,.footer-bottom { display:block; } .footer-links { margin-top:20px; } .footer-bottom span { display:block; margin-top:8px; } }