:root { --bg:#08090a; --surface:rgba(255,255,255,.035); --surface2:rgba(255,255,255,.018); --border:rgba(255,255,255,.09); --subtle:rgba(255,255,255,.055); --text:#f7f8f8; --text2:#d0d6e0; --muted:#8a8f98; --accent:#7877ff; --accent2:#aeb7ff; --max:1180px; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; min-width:320px; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:linear-gradient(180deg,#0a0b0f 0%,var(--bg) 45%,#070809 100%); overflow-x:hidden; }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle at 50% 20%,black,transparent 72%); }
    body::after { content:""; position:fixed; width:620px; height:620px; top:180px; right:-310px; border-radius:50%; pointer-events:none; filter:blur(26px); background:radial-gradient(circle,rgba(102,92,255,.16),rgba(60,72,255,.05) 42%,transparent 70%); }
    a { color:inherit; text-decoration:none; }
    .shell { width:min(calc(100% - 40px),var(--max)); margin:0 auto; position:relative; }
    .nav { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--subtle); background:rgba(8,9,10,.76); backdrop-filter:blur(16px); }
    .nav-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
    .brand { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; white-space:nowrap; }
    .brand-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,rgba(120,119,255,.16),rgba(255,255,255,.025)); color:#e3e5ff; font-size:12px; letter-spacing:.04em; }
    .link-row { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
    .pill { padding:9px 12px; border:1px solid var(--subtle); border-radius:999px; color:var(--text2); background:rgba(255,255,255,.018); font-size:13px; font-weight:500; transition:.18s ease; }
    .pill:hover,.pill.current { border-color:rgba(120,119,255,.4); background:rgba(120,119,255,.1); color:#fff; }
    .hero { padding:58px 0 28px; }
    .eyebrow,.section-kicker { color:var(--accent2); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
    h1 { max-width:920px; margin:14px 0 0; font-size:clamp(2.55rem,6.2vw,4.7rem); line-height:1.01; letter-spacing:-.065em; }
    .lead { max-width:790px; margin:20px 0 0; color:var(--text2); font-size:18px; line-height:1.72; }
    .visual { position:relative; margin-top:30px; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:#08090d; box-shadow:0 22px 52px rgba(0,0,0,.38),inset 0 0 42px rgba(120,119,255,.09); }
    .visual img { display:block; width:100%; height:220px; object-fit:cover; object-position:center 52%; opacity:.86; filter:saturate(1.06) contrast(1.04); }
    .visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(7,8,10,.52),transparent 58%),linear-gradient(0deg,rgba(7,8,10,.48),transparent 55%); }
    .visual-caption { position:absolute; z-index:1; left:18px; bottom:15px; color:#dce0ff; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
    .section { padding:34px 0; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:26px; margin-bottom:20px; }
    h2 { margin:9px 0 0; font-size:clamp(1.85rem,4vw,3.05rem); line-height:1.05; letter-spacing:-.055em; }
    .section-copy { max-width:500px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
    .service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    .card { position:relative; min-height:318px; padding:26px; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,rgba(20,22,32,.86),rgba(10,11,14,.9)),url('/assets/texture-cyberpunk-v1.webp') center/cover; box-shadow:inset 0 0 30px rgba(120,119,255,.055); }
    .card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(5,6,8,.38)); }
    .card > * { position:relative; z-index:1; }
    .icon-wrap { width:48px; height:48px; display:grid; place-items:center; margin-bottom:22px; border:1px solid rgba(120,119,255,.28); border-radius:14px; color:#d3d8ff; background:linear-gradient(145deg,rgba(120,119,255,.2),rgba(255,255,255,.025)); box-shadow:inset 0 0 20px rgba(120,119,255,.1); }
    .icon-wrap svg { width:24px; height:24px; }
    h3 { margin:0 0 11px; font-size:22px; letter-spacing:-.04em; }
    .card p { max-width:53ch; margin:0; color:var(--text2); font-size:15px; line-height:1.72; }
    .card ul { display:grid; gap:5px; margin:17px 0 0; padding:0; list-style:none; color:var(--muted); font-size:13px; }
    .card li::before { content:"/"; margin-right:8px; color:var(--accent2); font-weight:700; }
    .path { display:grid; grid-template-columns:1.08fr .92fr; gap:20px; align-items:stretch; }
    .process { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px; border:1px solid var(--border); border-radius:20px; background:linear-gradient(145deg,var(--surface),var(--surface2)); }
    .step { min-height:164px; padding:18px; border-left:1px solid var(--subtle); }
    .step:first-child { border-left:0; }
    .step-no { display:block; margin-bottom:21px; color:var(--accent2); font-size:11px; font-weight:700; letter-spacing:.1em; }
    .step strong { display:block; margin-bottom:8px; font-size:15px; }
    .step span { color:var(--muted); font-size:13px; line-height:1.65; }
    .side-note { padding:27px; border:1px solid rgba(120,119,255,.22); border-radius:20px; background:linear-gradient(160deg,rgba(34,35,62,.48),rgba(10,11,14,.94)); box-shadow:inset 0 0 36px rgba(120,119,255,.075); }
    .side-note h3 { margin-top:13px; font-size:21px; }
    .side-note p { margin:0; color:var(--text2); line-height:1.75; font-size:15px; }
    .side-note a { display:inline-flex; margin-top:22px; color:#b9f3ff; font-size:14px; font-weight:700; }
    .side-note a:hover { color:#fff; }
    .footer { margin-top:28px; padding:29px 0 54px; border-top:1px solid var(--subtle); color:var(--muted); font-size:13px; }
    @media (max-width:980px) { .path{grid-template-columns:1fr;} .process{grid-template-columns:repeat(2,1fr);} .step:nth-child(3){border-left:0;} }
    @media (max-width:720px) { .shell{width:min(calc(100% - 24px),var(--max));} .nav-inner{min-height:64px;flex-direction:column;align-items:flex-start;padding:12px 0;} .link-row{display:flex;width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;} .link-row::-webkit-scrollbar{display:none;} .hero{padding-top:42px;} .visual img{height:180px;} .section-head{display:block;} .section-copy{margin-top:14px;} .service-grid,.process{grid-template-columns:1fr;} .card{min-height:0;} .step,.step:nth-child(3){min-height:0;border-left:0;border-top:1px solid var(--subtle);} .step:first-child{border-top:0;} }