:root {
  color-scheme: light dark;
  --bg: #f7fafb;
  --surface: #ffffff;
  --surface-soft: #edf8fa;
  --ink: #102332;
  --muted: #5b6e79;
  --line: rgba(16, 35, 50, 0.12);
  --cyan: #29c7d7;
  --blue: #087df2;
  --deep-blue: #075ed4;
  --gradient: linear-gradient(125deg, var(--cyan), var(--blue));
  --shadow: 0 32px 80px rgba(20, 98, 140, 0.16);
  --radius: 28px;
  --font-serif-en: "Cormorant Garamond", "New York", "Iowan Old Style", Georgia, serif;
  --font-serif-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-serif: var(--font-serif-en);
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-family: var(--font-serif);
}

html:lang(ja) { --font-serif: var(--font-serif-ja); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.75; font-feature-settings: "palt" 1, "kern" 1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); }
.skip-link:focus { transform: none; }

.site-header { position: absolute; z-index: 20; width: 100%; padding-top: 18px; }
.nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 8px 10px 8px 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 22px; background: rgba(247,250,251,.76); box-shadow: 0 12px 40px rgba(31,83,112,.08); backdrop-filter: blur(24px) saturate(1.25); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.brand img { border-radius: 11px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--muted); }
.nav a { transition: color .2s ease, transform .2s ease; }
.nav a:hover { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.language { min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid rgba(255,255,255,.42); border-radius: 999px; background: linear-gradient(125deg, rgba(41,199,215,.62), rgba(8,125,242,.68)); color: white; font-weight: 600; line-height: 1; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,45,100,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(4,87,184,.16), 0 12px 30px rgba(0,126,240,.18); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); background: linear-gradient(125deg, rgba(54,209,220,.72), rgba(20,137,248,.76)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 16px 38px rgba(0,126,240,.25); }
.button-small { min-height: 44px; padding-inline: 18px; font-size: 14px; }

.hero { min-height: 810px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 32px; padding-top: 128px; padding-bottom: 70px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--deep-blue); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.eyebrow span { width: 30px; height: 2px; background: var(--gradient); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; max-width: 720px; font-size: clamp(54px, 6.7vw, 92px); line-height: 1.05; letter-spacing: -.04em; font-weight: 600; }
h1 em { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; font-style: normal; }
.hero-lead { max-width: 620px; margin: 32px 0 0; color: var(--muted); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.85; letter-spacing: -.01em; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-bottom: 1px solid var(--line); }
.free-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.free-note span { color: var(--blue); font-weight: 800; }
.hero-visual { position: relative; min-width: 0; min-height: 600px; display: grid; place-items: center; overflow: clip; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(42,199,215,.32), rgba(9,126,242,.12) 45%, transparent 70%); filter: blur(8px); }
.hero-icon { position: relative; z-index: 2; width: min(470px, 84%); filter: drop-shadow(0 38px 45px rgba(26,122,174,.19)); animation: float 6s ease-in-out infinite; }
.hero-icon img { border-radius: 23%; }
.orbit { position: absolute; z-index: -1; border: 1px solid rgba(21,157,215,.18); border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 92%; height: 62%; }
.orbit-two { width: 70%; height: 92%; transform: rotate(34deg); }
.path-line { position: absolute; right: 3%; bottom: 5%; width: 46%; height: 26%; border-right: 3px solid rgba(5,119,237,.28); border-bottom: 3px solid rgba(5,119,237,.28); border-radius: 0 0 90% 0; transform: rotate(14deg); filter: blur(.2px); }
@keyframes float { 50% { transform: translateY(-12px) rotate(.8deg); } }

.proof { border-block: 1px solid var(--line); background: rgba(255,255,255,.58); }
.proof-row { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 28px; color: var(--muted); font-size: 14px; font-weight: 600; }
.proof-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.section { padding-block: 140px; }
.section-heading { max-width: 700px; margin-bottom: 56px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
h2 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1.16; letter-spacing: -.035em; font-weight: 600; }
.section-heading > p:last-child { max-width: 620px; margin: 22px 0 0; color: var(--muted); font-size: 18px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.feature-card { position: relative; overflow: hidden; min-height: 410px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.78); box-shadow: 0 18px 50px rgba(25,76,105,.06); }
.feature-card::after { content: ""; position: absolute; inset: auto -15% -40% 35%; height: 65%; background: radial-gradient(circle, rgba(48,199,217,.16), transparent 68%); }
.feature-number { color: var(--deep-blue); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.feature-card h3 { position: relative; z-index: 1; margin: 170px 0 10px; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.feature-card p { position: relative; z-index: 1; max-width: 470px; margin: 0; color: var(--muted); }
.feature-primary { background: linear-gradient(145deg, #0b83ef, #095dcc); color: white; }
.feature-primary .feature-number, .feature-primary p { color: rgba(255,255,255,.8); }
.file-stack { position: absolute; top: 58px; right: 38px; width: 190px; height: 150px; }
.file-stack i, .file-stack b { position: absolute; display: grid; place-items: center; width: 132px; height: 96px; border: 1px solid rgba(255,255,255,.38); border-radius: 18px; background: rgba(255,255,255,.14); box-shadow: 0 20px 35px rgba(0,42,112,.18); backdrop-filter: blur(12px); font-size: 24px; }
.file-stack i:nth-child(2) { transform: translate(-35px,22px) rotate(-8deg); }
.file-stack i:nth-child(3) { transform: translate(-65px,45px) rotate(-15deg); }
.wave { position: absolute; top: 78px; left: 34px; height: 92px; display: flex; align-items: center; gap: 12px; }
.wave i { width: 13px; border-radius: 999px; background: var(--gradient); box-shadow: 0 8px 18px rgba(4,126,239,.2); }
.wave i:nth-child(1), .wave i:nth-child(5) { height: 34px; }.wave i:nth-child(2), .wave i:nth-child(4) { height: 68px; }.wave i:nth-child(3) { height: 92px; }
.linked-rings { position: absolute; top: 54px; right: 58px; width: 180px; height: 130px; }
.linked-rings i { position: absolute; width: 110px; height: 110px; border: 12px solid var(--cyan); border-radius: 50%; opacity: .82; }
.linked-rings i:last-child { left: 70px; border-color: var(--blue); }
.feature-wide { grid-column: 1/-1; min-height: 250px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 30px; }
.feature-wide h3 { margin: 0 0 10px; }
.context-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.context-chips span { padding: 12px 18px; border: 1px solid rgba(10,132,237,.18); border-radius: 999px; background: var(--surface-soft); color: var(--deep-blue); font-family: var(--font-ui); font-size: 13px; font-weight: 700; }

.flow-section { background: #0a1d2a; color: #f7fbfd; }
.flow-section .eyebrow { color: #58dce5; }
.flow-list { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; margin: 80px 0 0; padding: 0; list-style: none; }
.flow-list::before { content: ""; position: absolute; top: 84px; left: 16%; right: 16%; border-top: 1px dashed rgba(91,218,231,.34); }
.flow-list li { position: relative; z-index: 1; text-align: center; }
.flow-list li > span { position: absolute; top: -8px; right: calc(50% - 64px); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cyan); color: #05202a; font-size: 12px; font-weight: 850; }
.flow-glyph { width: 168px; height: 168px; display: grid; place-items: center; margin: 0 auto 28px; border: 1px solid rgba(90,218,231,.2); border-radius: 50%; background: radial-gradient(circle, rgba(33,174,209,.2), rgba(12,38,53,.7)); color: #65e0e7; font-size: 29px; font-weight: 800; box-shadow: 0 0 65px rgba(0,177,218,.12); }
.flow-glyph.mic::before { content: ""; width: 30px; height: 55px; border: 5px solid #65e0e7; border-radius: 18px; }
.flow-glyph.mic::after { content: ""; position: absolute; width: 54px; height: 50px; margin-top: 25px; border-bottom: 5px solid #65e0e7; border-radius: 0 0 30px 30px; }
.flow-glyph.path { font-size: 64px; font-weight: 400; }
.flow-list h3 { margin: 0 0 8px; font-size: 22px; }.flow-list p { margin: 0; color: #9eb0ba; }

.screens { overflow: hidden; }
.device-stage { position: relative; min-height: 690px; display: flex; align-items: flex-end; justify-content: center; padding: 70px 6% 0; border-radius: 40px; background: radial-gradient(circle at 40% 20%, rgba(95,222,229,.34), transparent 32%), linear-gradient(135deg, #e7fbfb, #cfeafa); }
.mac-window { overflow: hidden; width: 87%; margin-right: 9%; border: 8px solid #18313e; border-radius: 20px; background: #18313e; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.window-bar { height: 25px; display: flex; align-items: center; gap: 6px; padding-left: 10px; background: #18313e; }
.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #66808d; }
.mac-window img { width: 100%; aspect-ratio: 8 / 5; object-fit: contain; border-radius: 7px; }
.phone-frame { position: absolute; right: 4%; bottom: -35px; overflow: hidden; width: 22%; padding: 6px; border: 8px solid #122a38; border-radius: 36px; background: #122a38; box-shadow: 0 30px 70px rgba(7,52,86,.28); transform: rotate(4deg); }
.phone-frame img { width: 100%; aspect-ratio: 214 / 463; object-fit: contain; border-radius: 23px; }

.privacy { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; padding-block: 110px; }
.privacy-symbol { position: relative; width: min(360px,100%); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, rgba(43,200,216,.2), transparent 64%); }
.privacy-symbol::before, .privacy-symbol::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(10,126,239,.18); border-radius: 50%; }.privacy-symbol::after { inset: 29%; }
.privacy-symbol span { z-index: 1; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 24px; background: var(--gradient); color: white; font-size: 25px; font-weight: 800; box-shadow: var(--shadow); }
.privacy h2 { font-size: clamp(38px,4.5vw,62px); }.privacy > div:last-child > p:last-child { color: var(--muted); font-size: 18px; max-width: 620px; }
.final-cta { display: flex; flex-direction: column; align-items: center; padding: 100px 40px; margin-bottom: 110px; border-radius: 42px; background: linear-gradient(145deg, #e6fbfb, #e8f1ff); text-align: center; box-shadow: inset 0 0 0 1px rgba(8,126,240,.08); }
.final-cta img { width: 112px; border-radius: 25px; filter: drop-shadow(0 18px 25px rgba(13,115,175,.17)); }.final-cta h2 { max-width: 780px; margin-top: 26px; }.final-cta p { margin: 18px 0 28px; color: var(--muted); }
footer { border-top: 1px solid var(--line); }.footer-row { min-height: 108px; display: flex; align-items: center; gap: 40px; color: var(--muted); font-size: 14px; }.footer-row p { margin-left: auto; }.footer-row > div { display: flex; gap: 24px; }.footer-row .brand { color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root { --bg: #07131f; --surface: #0d202e; --surface-soft: #102b3a; --ink: #eff8fb; --muted: #9aafb9; --line: rgba(200,235,242,.13); --shadow: 0 32px 80px rgba(0,0,0,.32); }
  .nav { border-color: rgba(180,226,235,.12); background: rgba(7,19,31,.72); }
  .proof { background: rgba(13,32,46,.62); }
  .feature-card { background: rgba(13,32,46,.86); }
  .feature-primary { background: linear-gradient(145deg,#0789d4,#064da9); }
  .flow-section { background: #040d14; }
  .device-stage { background: radial-gradient(circle at 40% 20%, rgba(38,181,199,.22), transparent 32%), linear-gradient(135deg,#0d2732,#101e34); }
  .final-cta { background: linear-gradient(145deg,#0d2b36,#0d2038); }
  .hero-visual::before { opacity: .78; }
  .button { border-color: rgba(176,235,255,.36); background: linear-gradient(125deg, rgba(36,190,211,.5), rgba(16,113,232,.58)); box-shadow: inset 0 1px 0 rgba(220,249,255,.24), inset 0 -1px 0 rgba(0,39,117,.25), 0 14px 34px rgba(0,78,190,.22); }
  .button:hover { background: linear-gradient(125deg, rgba(46,203,219,.62), rgba(22,127,243,.68)); }
}

@media (max-width: 900px) {
  .nav-links { display: none; }.hero { grid-template-columns: 1fr; padding-top: 160px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.eyebrow { justify-content: center; }.hero-visual { min-height: 430px; }.hero-icon { width: min(390px,74vw); }.proof-row { flex-wrap: wrap; padding-block: 20px; }.feature-grid { grid-template-columns: 1fr; }.feature-wide { grid-column: auto; }.flow-list { grid-template-columns: 1fr; gap: 70px; }.flow-list::before { top: 8%; bottom: 8%; left: 50%; right: auto; border-top: 0; border-left: 1px dashed rgba(91,218,231,.34); }.privacy { grid-template-columns: 1fr; text-align: center; }.privacy .eyebrow { justify-content: center; }.privacy > div:last-child > p:last-child { margin-inline: auto; }.device-stage { min-height: 530px; }.phone-frame { width: 25%; }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 28px,1180px); }.site-header { padding-top: 10px; }.nav { border-radius: 18px; }.nav-actions .button { display: none; }.language { min-width: auto; }.hero { min-height: auto; padding-top: 132px; padding-bottom: 60px; }.hero-actions { flex-direction: column; gap: 18px; }.hero-visual { min-height: 340px; }.proof-row { gap: 12px 18px; font-size: 12px; }.proof-row i { display: none; }.section { padding-block: 92px; }.section-heading { margin-bottom: 38px; }.feature-card { min-height: 380px; padding: 26px; }.feature-wide { display: block; }.feature-wide .context-chips { min-height: 130px; margin-bottom: 30px; }.device-stage { min-height: 370px; padding-inline: 2%; border-radius: 26px; }.mac-window { width: 96%; margin-right: 0; border-width: 5px; }.phone-frame { width: 29%; right: 0; border-width: 5px; border-radius: 22px; }.phone-frame img { border-radius: 14px; }.privacy { gap: 38px; padding-block: 80px; }.privacy-symbol { width: 260px; }.final-cta { padding: 68px 22px; margin-bottom: 70px; border-radius: 28px; }.footer-row { flex-wrap: wrap; justify-content: space-between; padding-block: 26px; }.footer-row p { order: 3; width: 100%; margin: 0; }.footer-row > div { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }