:root {
  --navy:#12304c;
  --navy-2:#1d4569;
  --cyan:#0cb6d5;
  --cyan-dark:#0a7e98;
  --amber:#f5a623;
  --ink:#182431;
  --ink-2:#4c5d6e;
  --ink-3:#778797;
  --line:#dbe3e9;
  --paper:#ffffff;
  --mist:#f3f6f8;
  --sand:#f4f0e8;
  --green:#16704a;
  --red:#a94438;
  --max:1180px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.8; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; }

.site-header { position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(219,227,233,.9); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); }
.header-inner { display:flex; align-items:center; gap:24px; max-width:var(--max); height:66px; margin:0 auto; padding:0 24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-wordmark { display:flex; flex-direction:column; color:var(--navy); font-family:var(--sans); font-size:15px; font-weight:900; line-height:1.05; letter-spacing:.08em; }
.brand-wordmark small { color:var(--ink-3); font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.16em; }
.site-header nav { display:flex; gap:3px; margin-left:auto; }
.site-header nav a { padding:7px 10px; border-radius:6px; color:var(--ink-2); font-size:12px; font-weight:700; text-decoration:none; }
.site-header nav a:hover { background:var(--mist); color:var(--navy); }
.header-label { padding:5px 9px; border:1px solid #b9dce5; border-radius:999px; background:#eefbfe; color:#0b7188; font-size:9px; font-weight:800; white-space:nowrap; }

.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#0c263f 0%,#173e61 55%,#0a6f86 130%); color:#fff; }
.hero::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to right,#000,transparent 80%); }
.hero-grid { position:relative; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:58px; max-width:var(--max); min-height:720px; margin:0 auto; padding:80px 24px 70px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow,.section-no { margin:0 0 15px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.hero .eyebrow { color:#7ed7e8; }
.hero h1 { margin:0; font-family:var(--serif); font-size:clamp(40px,5.5vw,68px); font-weight:600; letter-spacing:.02em; line-height:1.3; }
.hero h1 span { color:#88def0; }
.hero-lead { max-width:600px; margin:25px 0 0; color:#d3e6ed; font-size:16px; line-height:2; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.hero-tags span { padding:6px 11px; border:1px solid rgba(255,255,255,.23); border-radius:999px; background:rgba(255,255,255,.06); color:#e6f4f7; font-size:10px; font-weight:700; }
.hero-visual { position:relative; min-height:480px; }
.core { position:absolute; z-index:3; top:50%; left:50%; display:grid; place-items:center; width:164px; height:164px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.34); border-radius:50%; background:linear-gradient(145deg,#0cb6d5,#08778f); box-shadow:0 0 0 18px rgba(12,182,213,.08),0 20px 55px rgba(0,0,0,.24); }
.core b { align-self:end; font-family:var(--serif); font-size:25px; letter-spacing:.08em; }
.core span { align-self:start; color:#d4f7fc; font-size:10px; }
.orbit { position:absolute; z-index:4; width:142px; padding:15px 16px; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.09); box-shadow:0 12px 32px rgba(0,0,0,.14); backdrop-filter:blur(10px); }
.orbit span,.orbit small { display:block; }
.orbit span { font-size:14px; font-weight:800; }
.orbit small { margin-top:3px; color:#c4dce5; font-size:9px; }
.orbit--client { top:15px; left:50%; transform:translateX(-50%); }
.orbit--office { top:50%; right:0; transform:translateY(-50%); }
.orbit--partner { bottom:15px; left:50%; transform:translateX(-50%); }
.orbit--guard { top:50%; left:0; transform:translateY(-50%); }
.line { position:absolute; z-index:1; top:50%; left:50%; width:2px; height:150px; background:linear-gradient(to bottom,rgba(126,215,232,.8),rgba(126,215,232,.08)); transform-origin:top center; }
.line--a { transform:rotate(180deg); }
.line--b { transform:rotate(-90deg); }
.line--c { transform:rotate(0deg); }
.line--d { transform:rotate(90deg); }
.hero-note { position:relative; max-width:var(--max); margin:0 auto; padding:12px 24px 18px; border-top:1px solid rgba(255,255,255,.12); color:#9fc5d1; font-size:9px; }

.section { padding:100px 24px; }
.section--light { background:#f8fafb; }
.section--sand { background:var(--sand); }
.section--navy { background:var(--navy); color:#fff; }
.section--teal { background:#0f5662; color:#fff; }
.section--scope { background:#f7f9fa; }
.section-head { max-width:var(--max); margin:0 auto 46px; }
.section-no { color:var(--cyan-dark); }
.section-head h2 { max-width:820px; margin:0; color:var(--navy); font-family:var(--serif); font-size:clamp(29px,4vw,46px); font-weight:600; line-height:1.45; }
.section-head > p:last-child { max-width:760px; margin:16px 0 0; color:var(--ink-2); font-size:15px; }
.section-head--inverse .section-no { color:#6bd2e4; }
.section-head--inverse h2 { color:#fff; }
.section-head--inverse > p:last-child { color:#c9dde5; }

.before-after { display:grid; grid-template-columns:1fr 100px 1fr; align-items:stretch; max-width:var(--max); margin:0 auto; }
.state-card { padding:34px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 30px rgba(18,48,76,.06); }
.state-card--before { border-top:4px solid #a66e62; }
.state-card--after { border-top:4px solid var(--cyan); }
.state-label { color:var(--ink-3); font-family:var(--mono); font-size:10px; letter-spacing:.15em; }
.state-card h3 { margin:8px 0 22px; color:var(--navy); font-family:var(--serif); font-size:24px; }
.state-card ul { display:grid; gap:11px; padding:0; margin:0; list-style:none; }
.state-card li { display:grid; grid-template-columns:28px 1fr; gap:10px; color:var(--ink-2); font-size:13px; }
.state-card li span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--mist); color:var(--ink-3); font-family:var(--mono); font-size:8px; }
.state-result { margin:25px 0 0; padding:12px 14px; border-radius:7px; background:#f5f7f9; color:var(--navy); font-size:12px; font-weight:800; text-align:center; }
.state-card--after .state-result { background:#e6f8fb; color:#096f84; }
.change-arrow { display:grid; place-items:center; align-content:center; color:var(--ink-3); }
.change-arrow span { font-size:10px; font-weight:700; text-align:center; }
.change-arrow b { color:var(--cyan-dark); font-size:36px; font-weight:300; }

.flow-rail { display:grid; grid-template-columns:repeat(6,1fr); max-width:var(--max); padding:0; margin:0 auto; list-style:none; }
.flow-rail li { position:relative; min-width:0; padding:0 13px; }
.flow-rail li::after { content:""; position:absolute; z-index:0; top:28px; right:-12px; width:24px; height:1px; background:#54728b; }
.flow-rail li:last-child::after { display:none; }
.flow-no { position:relative; z-index:1; display:grid; place-items:center; width:56px; height:56px; margin-bottom:18px; border:1px solid #5b7890; border-radius:50%; background:#173b5a; color:#70d0e1; font-family:var(--mono); font-size:13px; }
.flow-rail small { color:#74cfe0; font-family:var(--mono); font-size:8px; letter-spacing:.12em; }
.flow-rail b { display:block; margin:5px 0 8px; font-size:13px; }
.flow-rail p { margin:0; color:#b9ced8; font-size:10px; line-height:1.8; }

.role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:var(--max); margin:0 auto; }
.role-grid article { padding:26px 24px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 20px rgba(18,48,76,.05); }
.role-icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:16px; border-radius:12px; background:#e8f6f9; color:#0a7288; font-family:var(--serif); font-size:18px; font-weight:700; }
.role-grid small { color:var(--ink-3); font-family:var(--mono); font-size:8px; letter-spacing:.14em; }
.role-grid h3 { margin:4px 0 9px; color:var(--navy); font-size:18px; }
.role-grid p { min-height:84px; margin:0; color:var(--ink-2); font-size:12px; }
.role-grid article > div { margin-top:17px; padding-top:12px; border-top:1px solid var(--line); color:var(--cyan-dark); font-size:10px; font-weight:800; }

.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:var(--max); margin:0 auto; }
.result-grid article { position:relative; min-height:270px; padding:27px 25px; overflow:hidden; border:1px solid #ddd6c8; border-radius:14px; background:#fff; }
.result-mark { position:absolute; top:15px; right:17px; color:#e6e0d4; font-family:var(--serif); font-size:46px; line-height:1; }
.result-grid h3 { position:relative; margin:22px 0 11px; color:var(--navy); font-size:17px; }
.result-grid p { position:relative; min-height:73px; margin:0; color:var(--ink-2); font-size:12px; }
.result-grid ul { display:flex; flex-wrap:wrap; gap:5px; padding:0; margin:18px 0 0; list-style:none; }
.result-grid li { padding:3px 8px; border-radius:999px; background:#eff7f8; color:#31717c; font-size:8px; font-weight:700; }
.metric-note { display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:center; max-width:var(--max); margin:24px auto 0; padding:21px 24px; border:1px solid #d8d0c2; border-radius:12px; background:#ebe5da; }
.metric-note > div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.metric-note span { margin-right:5px; color:#785828; font-size:10px; font-weight:800; }
.metric-note b { padding:4px 8px; border-radius:5px; background:#fff; color:var(--navy); font-size:9px; }
.metric-note p { margin:0; color:#716c62; font-size:9px; line-height:1.7; }

.screen-story { display:grid; grid-template-columns:300px 1fr; align-items:center; gap:34px; max-width:var(--max); margin:0 auto 70px; }
.screen-story--reverse { grid-template-columns:1fr 300px; }
.screen-story--reverse .screen-copy { order:2; }
.screen-copy > span,.mobile-copy > span { color:var(--cyan-dark); font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em; }
.screen-copy h3,.mobile-copy h3 { margin:8px 0 13px; color:var(--navy); font-family:var(--serif); font-size:24px; line-height:1.5; }
.screen-copy p,.mobile-copy p { margin:0; color:var(--ink-2); font-size:12px; }
.screen-copy ul { padding-left:1.2em; margin:16px 0 0; color:var(--ink-2); font-size:11px; }
.browser-frame { overflow:hidden; border:1px solid #cbd5df; border-radius:11px; background:#e8edf1; box-shadow:0 18px 45px rgba(18,48,76,.16); }
.browser-bar { display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border-bottom:1px solid #d0d7dd; background:#f2f4f6; }
.browser-bar i { width:8px; height:8px; border-radius:50%; background:#c5ccd2; }
.browser-bar i:first-child { background:#e18a7d; }
.browser-bar i:nth-child(2) { background:#e5bc63; }
.browser-bar i:nth-child(3) { background:#6fbd8c; }
.browser-bar span { margin-left:6px; color:#667583; font-size:8px; }
.browser-bar b { margin-left:auto; padding:2px 6px; border-radius:999px; background:#fff3cd; color:#856404; font-size:7px; }
.browser-frame iframe { display:block; width:100%; height:480px; border:0; background:#fff; pointer-events:none; }

.mobile-showcase { max-width:var(--max); margin:20px auto 0; padding:44px; border-radius:22px; background:linear-gradient(135deg,#eff4f6,#e5ecef); }
.mobile-copy { max-width:720px; margin-bottom:35px; }
.mobile-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.mobile-points div { padding:8px 11px; border:1px solid #d3dde2; border-radius:8px; background:rgba(255,255,255,.75); }
.mobile-points b,.mobile-points small { display:block; }
.mobile-points b { color:var(--navy); font-size:10px; }
.mobile-points small { color:var(--ink-3); font-size:8px; }
.phones { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.phone { position:relative; height:620px; overflow:hidden; border:8px solid #18222d; border-radius:32px; background:#fff; box-shadow:0 20px 42px rgba(18,48,76,.2); }
.phone::after { content:""; position:absolute; left:50%; bottom:7px; width:90px; height:4px; transform:translateX(-50%); border-radius:99px; background:#18222d; }
.phone-label { position:absolute; z-index:2; top:8px; right:9px; padding:3px 7px; border-radius:999px; background:rgba(18,48,76,.9); color:#fff; font-size:7px; font-weight:800; }
.phone iframe { width:100%; height:100%; border:0; pointer-events:none; }

.security-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; max-width:var(--max); margin:0 auto; }
.security-grid article { padding:25px 22px; border:1px solid rgba(255,255,255,.2); border-radius:13px; background:rgba(255,255,255,.06); }
.security-grid article > span { color:#83d9e6; font-family:var(--mono); font-size:10px; }
.security-grid h3 { margin:9px 0 8px; font-size:15px; }
.security-grid p { margin:0; color:#c7e0e4; font-size:10px; }
.security-note { max-width:var(--max); margin:22px auto 0; color:#9bc5cc; font-size:9px; }

.scope-table { max-width:var(--max); margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; }
.scope-row { display:grid; grid-template-columns:180px 1fr 110px; align-items:center; min-height:58px; padding:10px 18px; border-top:1px solid var(--line); font-size:11px; }
.scope-row:first-child { border-top:0; }
.scope-row--head { min-height:42px; background:#edf2f5; color:var(--ink-3); font-family:var(--mono); font-size:8px; letter-spacing:.08em; }
.scope-row b { color:var(--navy); font-size:12px; }
.scope-row > span { color:var(--ink-2); }
.scope-row em { justify-self:start; padding:3px 8px; border-radius:999px; font-size:8px; font-style:normal; font-weight:800; }
.scope-row em.done { background:#e1f2e7; color:var(--green); }
.scope-row em.phase { background:#fff1d5; color:#8b6518; }

.closing { padding:110px 24px; background:linear-gradient(135deg,#0d2943,#173f61); color:#fff; text-align:center; }
.closing-inner { max-width:900px; margin:0 auto; }
.closing .eyebrow { color:#6ed1e3; }
.closing h2 { margin:0; font-family:var(--serif); font-size:clamp(32px,5vw,54px); font-weight:600; line-height:1.5; }
.closing p:not(.eyebrow) { max-width:650px; margin:20px auto 0; color:#c5dce5; font-size:14px; }
.closing-points { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-top:32px; }
.closing-points span { padding:7px 12px; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:rgba(255,255,255,.06); font-size:10px; font-weight:700; }
.closing-points i { color:#68cada; font-style:normal; }
.closing-brand { display:flex; justify-content:center; align-items:center; gap:13px; margin-top:48px; }
.closing-brand strong { color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:.16em; }
.closing-brand span { color:#a9c6d2; font-size:10px; }

footer { display:flex; justify-content:space-between; gap:20px; padding:25px max(24px,calc((100vw - var(--max))/2 + 24px)); border-top:1px solid var(--line); background:#fff; }
footer b,footer span { display:block; }
footer b { color:var(--navy); font-size:11px; }
footer span,footer p { margin:0; color:var(--ink-3); font-size:8px; }

@media (max-width:960px) {
  .site-header nav { display:none; }
  .header-label { margin-left:auto; }
  .hero-grid { grid-template-columns:1fr; padding-top:65px; }
  .hero-visual { width:min(560px,100%); margin:0 auto; }
  .before-after { grid-template-columns:1fr; gap:14px; }
  .change-arrow { grid-template-columns:auto auto; gap:8px; }
  .change-arrow span br { display:none; }
  .change-arrow b { transform:rotate(90deg); }
  .flow-rail { grid-template-columns:repeat(3,1fr); gap:28px 8px; }
  .flow-rail li:nth-child(3)::after { display:none; }
  .role-grid,.security-grid { grid-template-columns:repeat(2,1fr); }
  .result-grid { grid-template-columns:repeat(2,1fr); }
  .metric-note { grid-template-columns:1fr; }
  .screen-story,.screen-story--reverse { grid-template-columns:1fr; }
  .screen-story--reverse .screen-copy { order:0; }
  .phones { gap:12px; }
  .phone { height:540px; border-width:6px; border-radius:25px; }
}

@media (max-width:640px) {
  .header-inner { height:58px; padding:0 14px; }
  .brand-wordmark { font-size:13px; }
  .hero-grid { min-height:auto; padding:54px 18px 45px; }
  .hero h1 { font-size:38px; }
  .hero-lead { font-size:13px; }
  .hero-visual { min-height:390px; transform:scale(.9); }
  .orbit { width:118px; padding:11px; }
  .orbit span { font-size:12px; }
  .core { width:135px; height:135px; }
  .line { height:118px; }
  .section { padding:70px 16px; }
  .section-head { margin-bottom:32px; }
  .section-head h2 { font-size:30px; }
  .state-card { padding:25px 20px; }
  .flow-rail { grid-template-columns:1fr 1fr; gap:24px 6px; }
  .flow-rail li:nth-child(2n)::after { display:none; }
  .flow-rail li:nth-child(3)::after { display:block; }
  .role-grid,.result-grid,.security-grid { grid-template-columns:1fr; }
  .role-grid p { min-height:0; }
  .result-grid article { min-height:auto; }
  .result-grid p { min-height:0; }
  .browser-frame iframe { height:360px; }
  .mobile-showcase { padding:28px 15px; border-radius:15px; }
  .phones { grid-template-columns:1fr; gap:20px; }
  .phone { width:min(350px,100%); height:620px; margin:0 auto; }
  .scope-row { grid-template-columns:1fr auto; gap:3px 10px; padding:12px 14px; }
  .scope-row > span { grid-column:1/-1; }
  .scope-row--head { display:none; }
  .closing { padding:80px 18px; }
  footer { flex-direction:column; padding:20px 18px; }
}

@media print {
  @page { size:A4; margin:12mm; }
  body { color:#111; font-size:10pt; }
  .site-header { position:static; }
  .site-header nav,.header-label { display:none; }
  .section,.hero,.closing { break-inside:avoid; padding:16mm 8mm; }
  .hero-grid { min-height:0; }
  .hero-visual { display:none; }
  .hero { background:#173f61 !important; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .flow-rail { grid-template-columns:repeat(3,1fr); }
  .role-grid,.result-grid,.security-grid { grid-template-columns:repeat(2,1fr); }
  .browser-frame iframe,.phones { display:none; }
  .screen-story,.screen-story--reverse { display:block; margin-bottom:16mm; }
  .mobile-showcase { padding:10mm; }
  .state-card,.result-grid article,.role-grid article { box-shadow:none; }
  .section--navy,.section--teal,.closing { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  footer { padding:8mm; }
}