/* OkamiUNI: a quiet stage for a native product.
   Space Grotesk carries the display; system type keeps the interface familiar. */
:root {
  --paper: #0c0c10;
  --surface: #141419;
  --surface2: #1b1b23;
  --line: #2a2a33;
  --ink: #f5f4f7;
  --muted: #aba9b5;
  --cyan: #65d9e9;
  --cyan-light: #a0eaf2;
  --magenta: #e878c5;
  --magenta-light: #f4b7df;
  --accent: #ff995f;
  --accent-light: #ffb88c;
  --display: 'Space Grotesk', sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body { background: var(--paper); font-weight: 400; }
main { overflow: clip; }
.wrap { width: min(1120px, calc(100% - 80px)); }
h1, h2, h3, h4, .brand { font-family: var(--display); }
h2 { font-size: clamp(36px, 4vw, 50px); font-weight: 400; line-height: 1.13; letter-spacing: -2px; }
h2 span { color: #b6b1c4; }
.eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 1.7px; margin-bottom: 20px; }
.header { height: 82px; border-bottom: 1px solid #ffffff0b; background: #0c0c10eb; gap: 30px; }
.brand { font-size: 23px; font-weight: 500; gap: 8px; letter-spacing: -1px; }
.brand img { width: 32px; height: 32px; }
.header > nav { font-size: 13px; gap: 28px; }
.header-actions { gap: 24px; }
.language-switch { padding: 0; border: 0; gap: 2px; font-family: var(--sans); font-size: 11px; }
.language-switch a { min-width: 31px; min-height: 36px; border-radius: 6px; }
.language-switch a[aria-current='page'] { background: #ffffff0a; color: var(--ink); }
.nav-cta { min-height: 38px; padding: 7px 15px; gap: 20px; color: #eae8ed; border-color: #ffffff24; border-radius: 7px; font-size: 12px; background: #ffffff05; }
.nav-cta span { color: var(--ink); }
.nav-cta:hover { border-color: #ffffff60; background: #ffffff0b; }
.button { justify-content: center; min-height: 48px; padding: 12px 21px; border-radius: 8px; font-size: 13px; font-weight: 500; gap: 22px; }
.button span { font-size: 19px; line-height: 1; }
.primary { color: #171219; background: #f0edf5; border: 1px solid #fff; box-shadow: 0 1px 0 #ffffff55 inset, 0 5px 18px #0002; }
.primary:hover { background: white; transform: translateY(-2px); }
.github-star { color: var(--ink); background: #ffffff04; border: 1px solid #ffffff26; gap: 9px; }
.github-star svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.github-star .external-arrow { margin-left: 8px; color: var(--muted); font-size: 15px; }
.github-star:hover { background: #ffffff0a; border-color: #e5b28880; transform: translateY(-2px); }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.footer-links { display: flex; align-items: center; gap: 24px; font-size: 11px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.footer-links a:hover { color: var(--ink); }
.footer-links > span { font-size: 10px; }

.hero { position: relative; padding-top: 66px; }
.hero::before { content: ''; pointer-events: none; position: absolute; z-index: -1; inset: -180px -15% 28%; background: radial-gradient(ellipse at 68% 48%, #39223b40, transparent 58%), radial-gradient(ellipse at 27% 66%, #12313b30, transparent 56%); }
.hero-intro { text-align: center; max-width: 780px; margin: 0 auto; }
.hero-platform { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: #c4bdcc; margin: 0 0 25px; }
.hero-platform svg { width: 15px; height: 15px; fill: none; stroke: #c4bdcc; stroke-width: 1.3; }
.hero h1 { font-family: var(--display); font-size: clamp(58px, 6.8vw, 88px); font-weight: 400; line-height: 1.02; letter-spacing: -4.7px; }
.hero h1 > span { color: var(--ink); }
.hero-description { font-size: 17px; line-height: 1.65; color: #b7b2c1; margin: 25px auto 0; max-width: 510px; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 27px; }
.hero-note { display: block; text-align: center; font-size: 11px; line-height: 1.65; color: #a09aa9; margin: 14px 0 0; }
.hero-product { position: relative; width: min(1040px, 100%); margin: 59px auto 0; }
.product-stage { position: relative; padding: 0 8px 8px; border: 1px solid #42404d; border-radius: 14px; background: #17161d; box-shadow: 0 25px 80px #0006, 0 0 0 5px #ffffff02; }
.product-stage::before { content: ''; position: absolute; top: -1px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #66d9e9ad 15%, #c2b2deba 52%, #e878c5b3 85%, transparent); }
.stage-topline { padding: 9px 10px; align-items: center; color: #c4c0ce; font: 11px var(--sans); letter-spacing: 0; min-height: 49px; }
.stage-name { display: flex; align-items: center; }
.stage-name .status-dot { width: 5px; height: 5px; background: var(--cyan); margin-right: 9px; }
.capture-themes { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #ffffff0c; border-radius: 7px; background: #0c0c1050; }
.capture-themes button { display: inline-flex; gap: 6px; align-items: center; min-height: 27px; padding: 4px 10px; font-size: 10px; border: 0; border-radius: 4px; background: transparent; color: #aaa5b6; }
.capture-themes button[aria-pressed='true'] { background: #302d39; color: #f9f5ff; box-shadow: 0 1px 4px #0004; }
.capture-themes button:hover { color: white; }
.theme-swatch { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #ffffff55; }
.dark-swatch { background: #101019; }
.light-swatch { background: #ece9e1; }
.screenshot-open { border-radius: 6px; aspect-ratio: 1180 / 760; background: #111116; }
.hero-shot { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: contain; }
.zoom-hint { display: inline-flex; align-items: center; gap: 7px; font: 10px var(--sans); bottom: 16px; right: 16px; padding: 8px 11px; color: #e8e3ef; border: 1px solid #ffffff22; border-radius: 6px; background: #15131cea; backdrop-filter: blur(10px); }
.zoom-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.screenshot-caption { font: 10px/1.6 var(--sans); color: #9893a4; gap: 15px; margin-top: 14px; }
.hero-product > .screenshot-caption { padding-inline: 2px; }
.product-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1040px, 100%); margin: 33px auto 0; border-bottom: 1px solid var(--line); }
.product-route { position: relative; display: flex; align-items: center; gap: 15px; min-height: 96px; padding: 16px 25px; border-top: 1px solid var(--line); transition: background .2s; }
.product-route:first-child { padding-left: 0; }
.product-route:last-child { padding-right: 0; }
.product-route::before { content: ''; position: absolute; top: -3px; left: 28px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px var(--paper); }
.product-route:first-child::before { left: 8px; }
.product-route > svg { width: 23px; height: 23px; flex-shrink: 0; stroke: var(--cyan); stroke-width: 1.25; fill: none; }
.product-route strong { display: block; font-weight: 500; font-size: 13px; color: #e2dce8; }
.product-route small { display: block; font-size: 11px; color: #9f98ab; margin-top: 4px; }
.product-route .route-link { margin-left: auto; font-size: 16px; color: #716b7d; }
.route-agenda::before { background: var(--accent); }
.route-agenda > svg { stroke: var(--accent); }
.route-foco::before { background: var(--magenta); }
.route-foco > svg { stroke: var(--magenta); }
.product-route:hover { background: #ffffff04; }
.product-route:hover .route-link { color: var(--ink); }
.workflow { padding-top: 124px; }
.section-heading { margin-bottom: 37px; gap: 48px; }
.section-heading > p { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 310px; }
.workflow .eyebrow { color: var(--magenta-light); }
.workflow-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
.workflow-grid > section { min-width: 0; border: 1px solid #ffffff12; border-radius: 16px; background: #141318; padding: 35px; overflow: hidden; }
.workflow-grid h3 { font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: -1px; margin: 0 0 16px; }
.workflow-grid p:not(.eyebrow) { font-size: 13px; line-height: 1.8; color: var(--muted); }
.workflow-grid .eyebrow { font-size: 9px; letter-spacing: 1.1px; margin-bottom: 20px; }
.workflow-grid .intelligence { display: flex; flex-direction: column; background: linear-gradient(140deg, #21172430, transparent 50%), #141318; }
.intelligence-header { padding-left: 0; }
.little-star { font-size: 14px; margin-right: 6px; }
.intelligence-header > p:last-child { margin-top: 0; max-width: 370px; }
.intelligence-preview { margin: 32px -5px 24px; }
.real-detail { aspect-ratio: 3.3; border: 1px solid #6d656e; border-radius: 8px; margin: 0; }
.real-detail img { width: 270%; left: -116%; top: -128%; }
.intelligence-preview figcaption { font-size: 9px; margin-top: 11px; }
.intelligence-points { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; margin-top: auto; border-top: 1px solid #ffffff10; padding-top: 22px; }
.intelligence-points h4 { font-size: 13px; font-weight: 500; letter-spacing: -.1px; margin: 0 0 7px; }
.intelligence-points p { font-size: 12px !important; margin: 0; }
.workflow-grid .gesture-section { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: linear-gradient(140deg, #10232b38, transparent 55%), #131519; }
.workflow-grid .gesture-copy .eyebrow { color: var(--cyan-light); }
.gesture-copy > p:not(.eyebrow) { margin: 0; max-width: none; }
.gesture-visual { margin: 30px 0 24px; }
.compare-frame { aspect-ratio: 2; border-color: #666670; border-radius: 8px; }
.compare-frame > img, .compare-overlay > img { width: 230%; left: -36%; top: -13%; }
.compare-line { background: var(--cyan); }
.compare-line > span { width: 26px; height: 26px; background: var(--cyan); color: #14252a; font-size: 16px; }
.gesture-control { margin-top: auto; max-width: none; }
.gesture-control label { font-size: 11px; color: #d0cbd8; }
.gesture-control label > span { font-size: 20px; color: var(--cyan); }
input[type='range'] { accent-color: var(--cyan); min-height: 30px; }
.range-labels { font: 9px var(--sans); }
.gesture-section > .screenshot-caption { font-size: 9px; }
.text-button { font: 10px var(--sans); color: var(--cyan-light); min-height: 25px; }
.explore { padding-top: 125px; }
.explore .section-heading { text-align: center; display: block; margin-bottom: 30px; }
.explore .section-heading > p { margin: 23px auto 0; max-width: 420px; }
.explore .eyebrow { color: var(--cyan-light); }
.demo-controls { display: flex; width: fit-content; margin: 0 auto 28px; border-color: #ffffff14; background: #141419; border-radius: 9px; padding: 4px; }
.demo-controls button { border-radius: 6px; min-height: 38px; font-size: 11px; padding: 8px 19px; }
.app-window { border: 1px solid #393743; border-radius: 12px; box-shadow: 0 24px 70px #0003; }
.app-chrome { background: #1b1922; border-color: #302d3a; }
#demo-panel { background: #131219; }
.app-sidebar { background: #111017; }
.mail-item[aria-pressed='true'] { background: #17262e; }
.demo-caption { font: 10px/1.7 var(--sans); }
.features { padding-top: 124px; }
.feature-grid { gap: 42px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 8px; }
.feature-grid article { display: flex; flex-direction: column; align-items: start; padding: 0; background: transparent; border: 0; border-radius: 0; }
.feature-grid .feature-icon { display: flex; align-items: center; font-family: var(--display); height: 42px; font-size: 31px; font-weight: 400; margin-bottom: 18px; }
.feature-grid .theme-count { letter-spacing: -1.6px; color: var(--magenta); }
.feature-grid h3 { font-size: 18px; font-weight: 400; letter-spacing: -.4px; margin: 0 0 13px; }
.feature-grid p { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 22px; }
.feature-foot, .keycaps { font: 10px var(--sans); }
.feature-foot, .keycaps, .theme-dots { margin-top: auto; }
.keycaps { flex-wrap: wrap; }
.theme-dots span { width: auto; font: 10px var(--sans); margin: 0 0 0 4px; }
.theme-dots i { width: 16px; height: 16px; }
.privacy-editorial { display: grid; grid-template-columns: .9fr 1.15fr; gap: 95px; padding-top: 77px; margin-top: 112px; border-top: 1px solid var(--line); background: transparent; }
.privacy-intro h2 { font-size: 54px; font-weight: 400; letter-spacing: -2.5px; }
.privacy-intro h2 span { color: #b6b1c4; }
.privacy-intro > p:not(.eyebrow) { font-size: 14px; max-width: 290px; margin-top: 22px; }
.privacy-question { font-size: 12px; border-color: #34505a; gap: 20px; margin-top: 24px; }
.privacy-question span { font-size: 18px; }
.privacy-rule { padding: 23px 0; }
.privacy-rule h3 { font-size: 16px; font-weight: 400; }
.privacy-tag { font: 8px var(--sans); letter-spacing: .7px; }
.privacy-rule p { font-size: 12px; line-height: 1.8; }
.privacy-proof { font-size: 11px; color: #bab5c4; }
.privacy-destinations > span:not(.privacy-or) { font: 10px var(--sans); border-radius: 6px; padding: 9px 12px; }
.faq { padding-block: 112px 90px; gap: 95px; grid-template-columns: .9fr 1.15fr; }
.faq h2 { font-size: 36px; letter-spacing: -1.2px; }
summary { font-size: 13px; padding-block: 20px; }
summary > span { color: #96909f; font-size: 20px; }
details > p { font-size: 12px; }
.closing { text-align: center; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 75px 24px 82px; margin-bottom: 0; background: radial-gradient(ellipse at 50% 80%, #30213838, transparent 65%); }
.closing-logo { object-fit: contain; width: 54px; height: 54px; display: block; margin: 0 auto 24px; }
.closing .eyebrow { color: #c2afcc; font-size: 9px; }
.closing h2 { font-size: 60px; font-weight: 400; letter-spacing: -2.8px; margin: 0 auto 28px; max-width: 650px; }
.closing-note { margin: 17px 0 0; color: #a29aac; font-size: 11px; }
footer { padding-block: 26px; }
footer .brand { font-size: 20px; }
footer .brand img { width: 27px; height: 27px; }
footer p, footer > span { font-size: 10px; }
@media (min-width: 901px) {
  .hero-intro { animation: arrive .5s ease-out; }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: 78px; }
  .product-route { gap: 11px; padding-inline: 15px; }
  .product-route strong { font-size: 12px; }
  .product-route small { font-size: 10px; }
  .workflow-grid > section { padding: 28px; }
  .workflow-grid h3 { font-size: 27px; }
  .workflow-grid p:not(.eyebrow) { font-size: 12px; }
  .feature-grid { gap: 30px; }
  .privacy-editorial, .faq { gap: 60px; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px); }
  .hero h1 { font-size: 70px; letter-spacing: -3.5px; }
  .hero-description { font-size: 16px; }
  .hero-product { margin-top: 45px; }
  .product-route { gap: 12px; flex-wrap: wrap; align-content: start; padding-block: 22px; }
  .product-route > span:not(.route-link) { width: 100%; }
  .product-route > svg { width: 21px; height: 21px; }
  .product-route .route-link { position: absolute; right: 16px; top: 21px; }
  .workflow, .explore, .features { padding-top: 90px; }
  .section-heading { gap: 28px; }
  .section-heading > p { font-size: 13px; max-width: 250px; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid > section { padding: 36px; }
  .workflow-grid h3 { font-size: 33px; }
  .workflow-grid p:not(.eyebrow) { font-size: 14px; }
  .intelligence-header > p:last-child { max-width: 420px; }
  .intelligence-preview { margin-block: 28px; }
  .workflow-grid .gesture-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; }
  .gesture-visual { margin: 0; }
  .gesture-control { grid-column: 1/-1; margin-top: 0; }
  .gesture-section > .screenshot-caption { grid-column: 1/-1; margin-top: -15px; }
  .compare-frame { aspect-ratio: 1.2; }
  .feature-grid { gap: 30px; }
  .feature-grid article { display: flex; padding: 0; }
  .feature-grid h3 { font-size: 16px; }
  .feature-grid p { font-size: 12px; }
  .feature-foot, .keycaps, .theme-dots { grid-column: auto; }
  .theme-dots span { width: 100%; margin: 6px 0 0; }
  .privacy-editorial { gap: 40px; padding-top: 60px; margin-top: 85px; }
  .privacy-intro h2 { font-size: 45px; }
  .privacy-rule h3 { font-size: 15px; }
  .faq { gap: 40px; padding-block: 85px; }
  .faq h2 { font-size: 32px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .header { height: 72px; }
  .header .brand { font-size: 21px; }
  .hero { padding-top: 43px; }
  .hero-platform { font-size: 10px; gap: 7px; margin-bottom: 23px; }
  .hero-platform svg { width: 13px; height: 13px; }
  .hero h1 { font-size: clamp(44px, 12.7vw, 67px); line-height: 1.05; letter-spacing: -2.7px; }
  .hero-description { font-size: 14px; line-height: 1.7; max-width: 315px; margin-top: 23px; }
  .desktop-break { display: none; }
  .hero-actions { gap: 10px; margin-top: 24px; }
  .button { font-size: 12px; padding: 11px 16px; min-height: 45px; gap: 18px; }
  .hero-note { font-size: 10px; }
  .hero-product { margin-top: 38px; }
  .product-stage { padding: 0 4px 4px; border-radius: 9px; }
  .stage-topline { padding: 7px 5px; min-height: 40px; }
  .stage-name { font-size: 8px; }
  .stage-name .status-dot { display: none; }
  .capture-themes { padding: 2px; }
  .capture-themes button { min-height: 28px; padding: 4px 6px; font-size: 8px; gap: 4px; }
  .theme-swatch { width: 7px; height: 7px; }
  .screenshot-open { border-radius: 4px; }
  .hero-shot { min-height: 0; object-fit: contain; }
  .zoom-hint { bottom: 7px; right: 7px; padding: 6px 8px; font-size: 8px; }
  .zoom-hint svg { width: 10px; height: 10px; }
  .hero-product > .screenshot-caption { font-size: 8px; margin-top: 11px; gap: 9px; }
  .product-routes { margin-top: 25px; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .product-route, .product-route:first-child, .product-route:last-child { flex-wrap: nowrap; gap: 16px; padding: 17px 2px; min-height: 78px; border-top: 0; }
  .product-route + .product-route { border-top: 1px solid #ffffff08; }
  .product-route::before { display: none; }
  .product-route > span:not(.route-link) { width: auto; }
  .product-route strong { font-size: 12px; }
  .product-route small { font-size: 10px; }
  .product-route .route-link { position: static; margin-left: auto; }
  .workflow, .explore, .features { padding-top: 70px; }
  h2 { font-size: 35px; letter-spacing: -1.7px; }
  .section-heading { display: block; margin-bottom: 27px; }
  .section-heading > p { font-size: 13px; max-width: 320px; margin-top: 20px; }
  .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .workflow-grid { gap: 16px; }
  .workflow-grid > section { padding: 25px; border-radius: 12px; }
  .workflow-grid h3 { font-size: 29px; letter-spacing: -1px; }
  .workflow-grid p:not(.eyebrow) { font-size: 12px; }
  .workflow-grid .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .intelligence-preview { margin: 25px -5px 23px; }
  .intelligence-preview figcaption { font-size: 8px; }
  .intelligence-points { gap: 18px; padding-top: 20px; }
  .intelligence-points h4 { font-size: 12px; line-height: 1.5; }
  .intelligence-points p { font-size: 11px !important; }
  .workflow-grid .gesture-section { display: flex; gap: 0; align-items: stretch; }
  .gesture-visual { margin: 25px 0 21px; }
  .compare-frame { aspect-ratio: 1.8; }
  .gesture-section > .screenshot-caption { margin-top: 15px; }
  .explore .section-heading > p { font-size: 13px; margin-top: 20px; }
  .demo-controls { width: 100%; gap: 3px; margin-bottom: 20px; }
  .demo-controls button { flex: 1; padding: 8px 5px; font-size: 10px; }
  .demo-controls button span { display: block; }
  .demo-caption { font-size: 9px; }
  .feature-grid { grid-template-columns: 1fr; gap: 27px; padding-top: 0; }
  .feature-grid article { padding-top: 22px; border-top: 1px solid var(--line); }
  .feature-grid .feature-icon { height: 34px; margin-bottom: 15px; }
  .feature-grid h3 { font-size: 20px; }
  .feature-grid p { font-size: 13px; margin-bottom: 18px; }
  .theme-dots span { width: auto; margin: 0 0 0 4px; }
  .privacy-editorial { grid-template-columns: 1fr; gap: 35px; margin-top: 70px; padding-top: 52px; }
  .privacy-intro h2 { font-size: 44px; }
  .privacy-intro > p:not(.eyebrow) { font-size: 13px; max-width: 290px; margin-top: 20px; }
  .privacy-rule h3 { font-size: 17px; }
  .privacy-rule p { font-size: 13px; }
  .privacy-rule-heading { gap: 9px; }
  .privacy-proof { font-size: 11px; }
  .faq { grid-template-columns: 1fr; gap: 29px; padding-block: 70px 55px; }
  .faq h2 { font-size: 33px; }
  summary { font-size: 13px; }
  .closing { padding: 55px 10px; }
  .closing h2 { font-size: 44px; letter-spacing: -2px; }
  .closing .eyebrow { font-size: 8px; }
  .closing-logo { width: 44px; height: 44px; margin-bottom: 22px; }
  .hero-actions .button, .closing-actions .button { min-width: 212px; }
  .footer-links { gap: 17px; }
  footer { padding-block: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-intro { animation: none; }
  .product-route, .button { transition: none; }
}