/* COLAVE SYSTEMS — fully self-hosted landing page */
@font-face {
  font-family: 'Noto Sans Local';
  src: url('fonts/noto-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Local';
  src: url('fonts/noto-sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Local';
  src: url('fonts/noto-sans-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Local';
  src: url('fonts/noto-sans-bold.woff2') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
/* If the official Google Sans file is added, it will be used automatically. */
@font-face {
  font-family: 'Google Sans Local';
  src: url('fonts/google-sans.woff2') format('woff2'),
       url('fonts/google-sans.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --blue: #087aff;
  --blue-deep: #006ce6;
  --orange: #f58a31;
  --ink: #172136;
  --muted: #657086;
  --stroke: #e7ebf2;
  --page: #fff;
  --soft: #f7f9fd;
  --font: 'Google Sans Local', 'Noto Sans Local', Arial, sans-serif;
  --max: 1192px;
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible { outline: 3px solid rgba(8,122,255,.6); outline-offset: 4px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.container { width: min(calc(100% - 96px),var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 9999; top: 10px; left: 10px; background: var(--ink); color: white; padding: 12px 18px; border-radius: 8px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.blue-text { color: var(--blue); }
.orange-text { color: var(--orange); }
/* Navigation */
.site-header { position: relative; z-index: 50; background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(232,236,244,.85); }
.header-inner { height: 88px; display: flex; align-items: center; gap: 35px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-logo { width: 140px; height: auto; }
.brand-suffix { color: #68778f; font-size: 14px; line-height: 1; font-weight: 600; padding-left: 12px; border-left: 1px solid #d8e0ed; letter-spacing: -.35px; }
.desktop-nav { display: flex; align-items: center; gap: 35px; margin-left: auto; }
.desktop-nav a,.footer-right a { font-size: 14px; font-weight: 500; transition: color .2s; }
.desktop-nav a:hover,.footer-right a:hover { color: var(--blue); }
.header-action { display: inline-flex; gap: 18px; align-items: center; justify-content: center; border: 1px solid #e3e9f3; border-radius: 100px; padding: 12px 17px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: border .2s,background .2s,transform .2s; }
.header-action:hover { border-color: var(--blue); background: #f6faff; transform: translateY(-1px); }
.header-action span { font-size: 18px; color: var(--blue); }
.menu-button,.mobile-nav { display: none; }
/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(111deg,#fff 8%,#f7fbff 66%,#f6f9ff 100%); }
.hero-wash { position: absolute; width: 760px; height: 760px; right: -370px; top: -310px; border-radius: 50%; background: radial-gradient(circle,rgba(8,122,255,.075),transparent 70%); pointer-events: none; }
.hero-grid { min-height: 653px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 38px; align-items: center; padding-top: 60px; padding-bottom: 55px; }
.hero-copy { position: relative; z-index: 1; padding-top: 15px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; background: #e9f3ff; border: 1px solid #dcecff; color: #1269cb; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; border-radius: 100px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(8,122,255,.14); }
h1,h2,h3,p { margin-top: 0; }
h1 { font-weight: 700; font-size: clamp(48px,5.25vw,76px); line-height: 1.14; letter-spacing: -3.8px; margin: 27px 0 26px; }
.hero-lead { font-size: 18px; line-height: 1.83; color: var(--muted); max-width: 530px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 29px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 31px; min-height: 54px; padding: 13px 19px 13px 23px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--blue); box-shadow: 0 11px 25px rgba(8,122,255,.19); }
.button-primary:hover { background: var(--blue-deep); box-shadow: 0 15px 26px rgba(8,122,255,.24); }
.button-arrow { font-size: 20px; font-weight: 400; }
.text-link { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 11px; }
.text-link span { color: var(--blue); font-size: 18px; transition: transform .2s; }
.text-link:hover span { transform: translateY(3px); }
.hero-footnote { margin: 62px 0 0; font-size: 12px; color: #95a2b4; }
.hero-footnote span { padding-inline: 9px; }
.hero-art { position: relative; min-width: 0; height: 500px; display: flex; align-items: center; justify-content: center; }
.orbit { position: absolute; width: 488px; height: 488px; border: 1px solid #e5effd; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.orbit-inner { width: 365px; height: 365px; border-style: dashed; border-color: #dbeafc; }
.decor-star { position: absolute; color: #f7a75b; font-size: 39px; }
.decor-star-a { top: 44px; right: 5px; }
.decor-star-b { bottom: 42px; left: 14px; color: #74b5ff; font-size: 24px; }
.hero-visual-panel { position: relative; width: min(100%,440px); height: 422px; background: #fff; border: 1px solid #e2eaf7; border-radius: 19px; transform: rotate(-3deg); box-shadow: 0 38px 80px rgba(27,80,154,.12),0 4px 12px rgba(19,75,162,.04); overflow: hidden; }
.visual-panel-head { height: 53px; display: flex; align-items: center; padding: 0 20px; gap: 18px; border-bottom: 1px solid #edf1f6; color: #a0acc0; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.visual-dots { display: flex; gap: 5px; }
.visual-dots i { width: 7px; height: 7px; background: #dae5f3; border-radius: 50%; }
.visual-dots i:first-child { background: #ffbc83; }
.visual-head-mark { margin-left: auto; color: #b6c4d7; font-size: 18px; }
.visual-main { padding: 15px 25px 10px; display: flex; flex-direction: column; align-items: center; }
.visual-core { width: 55px; height: 55px; border-radius: 20px; background: #edf5ff; border: 1px solid #deecff; display: grid; place-items: center; box-shadow: 0 6px 15px rgba(8,122,255,.08); }
.visual-core img { object-fit: contain; width: 36px; height: 36px; }
.visual-connector { height: 21px; width: 202px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; }
.visual-connector span { width: 1px; height: 13px; background: #d2e0f4; }
.visual-connector i { position: absolute; width: 202px; height: 1px; left: 0; top: 10px; background: #d2e0f4; }
.visual-connector:before { content: ''; display: block; position: absolute; top: -1px; left: 50%; width: 1px; height: 12px; background: #d2e0f4; }
.visual-node { display: flex; align-items: center; width: 100%; max-width: 326px; background: white; border: 1px solid #e9eef6; border-radius: 12px; padding: 9px 12px; box-shadow: 0 5px 12px rgba(20,64,120,.04); gap: 12px; }
.visual-node+.visual-node { margin-top: 8px; }
.visual-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; }
.visual-icon svg { width: 22px; height: 22px; }
.visual-icon-blue { color: var(--blue); background: #eaf4ff; }
.visual-icon-orange { color: var(--orange); background: #fff1e5; }
.visual-icon-calendar { color: #657ad4; background: #eff0ff; }
.visual-node strong { display: block; font-size: 13px; letter-spacing: -.25px; }
.visual-node small { display: block; color: #97a2b4; font-size: 10px; margin-top: 3px; }
.visual-tick { margin-left: auto; color: #a8b5c7; font-size: 17px; }
.visual-panel-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #edf1f6; font-size: 9px; letter-spacing: 1px; color: #9aa7b9; padding: 15px 24px; font-weight: 600; }
.visual-panel-foot span:first-child { display: flex; gap: 8px; align-items: center; }
.visual-panel-foot i { width: 5px; height: 5px; border-radius: 50%; background: #7bc99b; }
.float-chip { position: absolute; z-index: 2; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 9px; padding: 13px 16px; border: 1px solid #e4ebf5; background: rgba(255,255,255,.98); border-radius: 12px; box-shadow: 0 12px 27px rgba(38,80,138,.1); }
.float-chip-top { right: -7px; top: 74px; transform: rotate(4deg); }
.float-chip-top span { font-size: 17px; color: var(--orange); }
.float-chip-bottom { left: -30px; bottom: 66px; transform: rotate(3deg); }
.float-chip-bottom span { background: #e1f5e8; color: #43ad6f; width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; }
.scroll-line { display: flex; align-items: center; justify-content: space-between; color: #9caac0; font-size: 10px; font-weight: 700; letter-spacing: 1.3px; padding-bottom: 23px; }
.scroll-indicator { width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; color: var(--blue); background: #e8f2ff; border-radius: 50%; }
/* Product section */
.section { padding: 115px 0; }
.products-section { background: white; }
.section-header { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 45px; }
.section-kicker { color: var(--blue); font-size: 11px; letter-spacing: 1.5px; font-weight: 700; display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.small-line { width: 26px; height: 2px; background: currentColor; border-radius: 20px; }
h2 { font-size: clamp(38px,4.1vw,56px); font-weight: 700; letter-spacing: -2.7px; line-height: 1.18; margin-bottom: 0; }
.section-header-text { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 330px; margin: 0 0 5px; }
.product-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--stroke); border-radius: 22px; overflow: hidden; background: white; min-height: 470px; margin-top: 24px; box-shadow: 0 9px 36px rgba(26,54,99,.025); }
.product-info { padding: clamp(34px,4vw,61px); align-self: center; }
.product-category { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #7c8aa0; margin-bottom: 25px; }
.category-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px #ebf4ff; }
.orange-dot { background: var(--orange); box-shadow: 0 0 0 4px #fff0e4; }
.product-info h3 { font-size: clamp(35px,3.4vw,49px); line-height: 1.18; letter-spacing: -2.2px; font-weight: 700; margin-bottom: 21px; }
.product-title-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.product-badge { display: inline-flex; align-items: center; border-radius: 50px; background: #fff1e3; color: #be6823; font-size: 11px; font-weight: 700; padding: 7px 10px; margin-top: -17px; }
.calendar-badge { background: #edf0ff; color: #485ac5; }
.product-description { color: var(--muted); font-size: 15px; line-height: 1.92; margin-bottom: 26px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-tags span { display: inline-flex; border: 1px solid #e7edf5; background: #f9fbfe; color: #526078; padding: 7px 11px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.details-button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid #eef1f5; margin-top: 32px; padding: 19px 0 0; color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.details-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eaf4ff; color: var(--blue); font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s; }
.details-button[aria-expanded="true"] .details-plus { transform: rotate(45deg); }
.product-details { padding-top: 15px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.product-details ul { margin: 0 0 11px; padding-left: 19px; }
.product-details li+li { margin-top: 7px; }
.product-details p { margin: 12px 0 0; }
.product-visual { position: relative; min-height: 450px; padding: 32px; display: grid; place-items: center; isolation: isolate; overflow: hidden; }
.product-visual:before { content: ''; position: absolute; border-radius: 50%; width: 450px; height: 450px; z-index: -1; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.product-visual-label { position: absolute; z-index: 2; top: 30px; left: 31px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.product-visual-corner { position: absolute; right: 32px; bottom: 23px; font-size: 25px; opacity: .5; }
.advert-visual { background: #ecf5ff; color: #3c88dc; }
.advert-visual:before { border: 1px solid rgba(8,122,255,.15); box-shadow: 0 0 0 80px rgba(255,255,255,.17); }
.advert-flow { position: relative; width: min(100%,340px); margin-top: 20px; }
.advert-sources { display: flex; gap: 14px; justify-content: center; }
.source-pill { background: white; box-shadow: 0 8px 20px rgba(3,95,186,.06); border: 1px solid #d7e7fb; border-radius: 11px; padding: 12px 16px; font-size: 12px; font-weight: 700; color: #374963; width: 136px; text-align: center; }
.flow-lines { height: 45px; width: 146px; margin: auto; display: flex; justify-content: space-between; border-bottom: 2px dashed #abcffa; position: relative; }
.flow-lines i { width: 2px; height: 28px; border-left: 2px dashed #abcffa; margin: auto 0 0; }
.flow-lines:after { content: '↓'; position: absolute; left: 50%; bottom: -16px; font-size: 18px; color: #73acee; }
.flow-engine { position: relative; margin: 25px 0 16px; border-radius: 16px; display: flex; align-items: center; gap: 11px; padding: 17px; background: #fff; box-shadow: 0 20px 50px rgba(18,92,181,.15); border: 1px solid #d7e9fd; color: var(--ink); }
.engine-icon { width: 45px; height: 45px; display: grid; place-items: center; background: #e9f3ff; color: var(--blue); border-radius: 12px; font-size: 26px; }
.engine-title { display: block; font-size: 15px; font-weight: 700; }
.flow-engine small { display: block; color: #7e8ea6; font-size: 10px; margin-top: 5px; }
.engine-state { margin-left: auto; color: #75c999; font-size: 14px; }
.flow-bottom { display: flex; gap: 12px; }
.mini-flow { flex: 1; background: rgba(255,255,255,.72); border: 1px solid #d5e6fa; border-radius: 10px; padding: 14px 7px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #617c9d; font-size: 10px; font-weight: 700; }
.mini-icon { color: var(--blue); font-size: 18px; font-weight: 700; }
.stock-visual { background: #fff3e8; color: #d78642; }
.stock-visual:before { border: 1px solid rgba(240,135,41,.18); box-shadow: 0 0 0 80px rgba(255,255,255,.25); }
.stock-flow { display: grid; place-items: center; padding-top: 24px; }
.stock-boxes { width: 270px; display: flex; flex-direction: column; align-items: center; }
.stock-box { width: 100%; background: white; border: 1px solid #f7dfc8; border-radius: 13px; box-shadow: 0 12px 28px rgba(166,100,37,.08); display: flex; align-items: center; gap: 14px; padding: 13px 18px; color: #634d39; }
.stock-box b { font-size: 13px; }
.stock-box svg { width: 28px; height: 28px; color: #e18a3c; }
.stock-path { height: 40px; display: flex; flex-direction: column; align-items: center; font-size: 18px; color: #e8b27c; }
.stock-path span { display: block; width: 1px; height: 10px; background: #edc49e; }
.stock-path i { font-style: normal; margin-top: -5px; }
.box-check { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #fff1de; color: #d78537; font-size: 18px; }
.bottom-box svg { color: #e58e41; }
.other-products { display: flex; align-items: center; justify-content: center; gap: 15px; border-radius: 12px; margin-top: 25px; background: #f8faff; border: 1px dashed #dce5f2; padding: 25px 20px; color: #6b798f; }
.other-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid #dbe6f4; background: white; color: var(--blue); border-radius: 50%; font-size: 22px; }
.other-products p { margin: 0; font-size: 13px; line-height: 1.7; }
/* Philosophy */
.approach-section { background: #142741; color: white; overflow: hidden; }
.approach-main { position: relative; display: flex; justify-content: space-between; gap: 80px; padding-bottom: 85px; border-bottom: 1px solid rgba(255,255,255,.13); }
.approach-intro { position: relative; z-index: 1; }
.section-kicker-light { color: #8dbcff; }
.approach-intro h2 { font-size: clamp(39px,4.3vw,59px); letter-spacing: -3px; margin-bottom: 27px; }
.approach-intro h2 span { color: #78b6ff; }
.approach-intro>p:last-child { color: #bdcadd; line-height: 1.9; font-size: 16px; max-width: 590px; margin: 0; }
.approach-icon { position: relative; width: 260px; height: 205px; flex: 0 0 260px; display: grid; place-items: center; }
.approach-ring { position: absolute; width: 228px; height: 228px; border: 1px solid rgba(128,181,255,.21); border-radius: 50%; }
.ring-two { width: 166px; height: 166px; }
.approach-orb { width: 110px; height: 110px; border: 1px solid rgba(150,200,255,.25); border-radius: 30px; background: #204366; box-shadow: 0 17px 50px rgba(0,0,0,.13); display: grid; place-items: center; font-size: 57px; color: #80bbff; transform: rotate(-10deg); }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 55px; margin-top: 45px; }
.principle-index { color: #74aef6; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
.principle h3 { font-size: 19px; letter-spacing: -.5px; font-weight: 600; margin: 14px 0 11px; }
.principle p { color: #afbdd0; font-size: 13px; line-height: 1.83; max-width: 275px; margin: 0; }
/* Footer */
.site-footer { background: #fff; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; padding-top: 64px; padding-bottom: 65px; }
.footer-brand p { color: #7c899c; font-size: 13px; margin: 23px 0 0; }
.footer-right { display: flex; gap: 32px; align-items: start; padding-top: 15px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 25px; color: #a1acbb; padding: 22px 0 28px; font-size: 11px; border-top: 1px solid var(--stroke); }
/* Laptop */
@media (max-width: 1100px) {
  .container { width: min(calc(100% - 64px),var(--max)); }
  h1 { font-size: clamp(45px,5vw,61px); letter-spacing: -2.9px; }
  .hero-grid { gap: 20px; }
  .hero-art { transform: scale(.92); }
  .float-chip-top { right: -15px; }
  .float-chip-bottom { left: -15px; }
  .product-info { padding: 36px; }
  .product-badge { margin-top: 0; margin-bottom: 17px; }
}
/* Tablet */
@media (max-width: 800px) {
  .container { width: min(calc(100% - 44px),var(--max)); }
  .header-inner { height: 74px; }
  .brand-logo { width: 119px; }
  .brand-suffix { font-size: 12px; }
  .desktop-nav { gap: 17px; }
  .header-action { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 5px; padding-top: 85px; padding-bottom: 40px; }
  .hero-copy { text-align: center; padding-top: 0; }
  h1 { font-size: clamp(49px,8vw,68px); }
  .hero-lead { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-footnote { margin-top: 37px; }
  .hero-art { margin: 0 auto; width: 510px; max-width: 100%; height: 435px; transform: scale(.93); }
  .product-card { grid-template-columns: 1fr; }
  .product-visual { min-height: 360px; }
  .product-info { padding: 42px; }
  .stock-card .product-info { order: 2; }
  .stock-card .product-visual { order: 1; }
  .product-title-row { align-items: baseline; }
  .product-badge { margin-bottom: 0; }
  .section-header-text { max-width: 260px; }
  .approach-icon { width: 170px; flex-basis: 170px; }
  .principles { gap: 25px; }
}
/* Mobile */
@media (max-width: 700px) {
  .container { width: calc(100% - 40px); }
  html { scroll-padding-top: 74px; }
  .site-header { background: #fff; }
  .header-inner { height: 72px; }
  .desktop-nav { display: none; }
  .menu-button { display: flex; position: relative; margin-left: auto; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid #e2e9f4; border-radius: 11px; background: white; cursor: pointer; }
  .menu-button span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 4px; transition: transform .2s; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav:not([hidden]) { display: flex; flex-direction: column; gap: 0; padding: 8px 20px 22px; border-top: 1px solid #edf0f6; box-shadow: 0 16px 25px rgba(24,44,78,.07); }
  .mobile-nav a { display: flex; justify-content: space-between; padding: 16px 4px; font-weight: 600; font-size: 15px; border-bottom: 1px solid #edf0f6; }
  .mobile-nav span { color: var(--blue); }
  .hero-grid { padding-top: 72px; padding-bottom: 0; }
  h1 { font-size: clamp(41px,9vw,58px); line-height: 1.18; letter-spacing: -2.8px; margin: 24px 0 19px; }
  .hero-lead { font-size: 15px; line-height: 1.85; max-width: 420px; margin-bottom: 27px; }
  .hero-actions { gap: 22px; }
  .hero-footnote { font-size: 10px; margin-top: 35px; }
  .hero-art { height: 410px; transform: scale(.83); margin-top: -5px; margin-bottom: -15px; }
  .float-chip-bottom { left: -6px; }
  .scroll-line { padding-bottom: 17px; }
  .section { padding: 78px 0; }
  .section-header { display: block; margin-bottom: 30px; }
  .section-header-text { max-width: 550px; margin-top: 17px; font-size: 13px; }
  h2 { font-size: 42px; letter-spacing: -1.9px; }
  .product-card { margin-top: 17px; border-radius: 18px; }
  .product-visual { min-height: 315px; padding: 25px; }
  .product-visual:before { width: 330px; height: 330px; }
  .advert-flow { transform: scale(.84); width: 340px; margin-block: -21px; }
  .stock-flow { transform: scale(.9); }
  .product-info { padding: 30px 26px 36px; }
  .product-info h3 { font-size: 41px; margin-bottom: 17px; }
  .product-description { font-size: 14px; margin-bottom: 22px; }
  .feature-tags span { font-size: 10px; }
  .product-category { margin-bottom: 21px; }
  .other-products { align-items: start; justify-content: flex-start; padding: 19px; }
  .approach-main { gap: 25px; padding-bottom: 42px; }
  .approach-icon { display: none; }
  .approach-intro h2 { font-size: 43px; letter-spacing: -2.2px; }
  .approach-intro>p:last-child { font-size: 14px; }
  .principles { grid-template-columns: 1fr; gap: 29px; margin-top: 34px; }
  .principle { display: grid; grid-template-columns: 35px 1fr; gap: 0 10px; }
  .principle-index { grid-row: span 2; margin-top: 5px; }
  .principle h3 { margin: 0 0 7px; font-size: 18px; }
  .principle p { max-width: none; }
  .footer-inner { padding: 48px 0 35px; display: block; }
  .footer-right { padding-top: 30px; gap: 25px; }
  .footer-bottom { padding: 22px 0; flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 390px) {
  .container { width: calc(100% - 30px); }
  .hero-art { transform: scale(.72); margin-left: -5%; margin-right: -5%; }
  h1 { font-size: 39px; letter-spacing: -2px; }
  .button { gap: 15px; }
  .product-title-row { display: block; }
  .product-badge { margin-bottom: 19px; }
  .footer-bottom { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Colave Calendar — drawn in CSS, without external artwork. */
.calendar-visual { background: #f0f2ff; color: #737dcb; }
.calendar-visual:before { border: 1px solid rgba(93,113,212,.16); box-shadow: 0 0 0 80px rgba(255,255,255,.26); }
.calendar-dot { background: #727bd3; box-shadow: 0 0 0 4px #f0efff; }
.calendar-demo { width: min(100%,350px); background: #fff; border: 1px solid #dce2fc; border-radius: 17px; box-shadow: 0 24px 55px rgba(75,86,157,.13); overflow: hidden; color: #1d2b48; transform: rotate(-2deg); }
.calendar-demo-header { display: flex; align-items: center; gap: 12px; padding: 19px 20px 15px; }
.calendar-demo-icon { width: 43px; height: 43px; background: #eef0ff; border-radius: 12px; display: grid; place-items: center; color: #667bd7; }
.calendar-demo-icon svg { width: 24px; height: 24px; }
.calendar-demo-header strong { display: block; font-size: 15px; }
.calendar-demo-header small { display: block; font-size: 10px; color: #98a2b9; margin-top: 3px; }
.calendar-demo-mark { margin-left: auto; font-size: 22px; color: #ffa048; }
.calendar-demo-week { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin: 0 20px 17px; }
.calendar-demo-week span { background: #f5f7fc; border-radius: 9px; padding: 12px 0; font-size: 10px; font-weight: 700; color: #8e9cb3; text-align: center; }
.calendar-demo-week .active { background: #087aff; color: #fff; box-shadow: 0 6px 15px rgba(8,122,255,.2); }
.calendar-demo-row { display: flex; align-items: center; gap: 12px; margin: 0 20px 8px; background: #fafbff; border: 1px solid #eef1fb; padding: 12px; border-radius: 9px; font-size: 10px; font-weight: 600; }
.calendar-demo-num { color: #7c89ad; font-size: 11px; }
.calendar-demo-line { margin-left: auto; width: 17px; height: 5px; border-radius: 5px; background: #c7d7f7; }
.calendar-demo-line.short { width: 10px; }
.calendar-demo-footer { display: flex; align-items: center; gap: 8px; background: #f8faff; border-top: 1px solid #edf0fa; margin-top: 17px; padding: 15px 20px; color: #8191b2; font-size: 10px; font-weight: 700; }
.calendar-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: #6bba94; }
.calendar-demo-footer-right { margin-left: auto; font-size: 15px; }
.developer-link { color: var(--blue); font-weight: 600; }
.developer-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
 .calendar-demo { width: min(100%,320px); }
 .calendar-demo-header { padding: 15px 17px; }
 .calendar-demo-week { margin-inline: 17px; }
 .calendar-demo-row { margin-inline: 17px; }
 .footer-right { flex-wrap: wrap; }
}

/* Automatic dark appearance: follows the operating system / browser preference.
   No JavaScript, cookies, localStorage or manual theme setting required. */
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #65adff;
    --blue-deep: #2489ff;
    --orange: #ffad65;
    --ink: #edf3fc;
    --muted: #b1bed1;
    --stroke: #2b3950;
    --page: #101724;
    --soft: #172132;
  }

  body { background: var(--page); }
  .skip-link { background: #eaf3ff; color: #111d2e; }
  .brand-suffix { color: #b7c5d9; border-left-color: #35455a; }

  /* Navigation and call to action */
  .site-header { background: rgba(16,23,36,.97); border-bottom-color: #29384e; }
  .header-action { border-color: #34445b; background: #192638; }
  .header-action:hover { background: #20334e; }
  .button-primary { color: #fff; background: #087aff; box-shadow: 0 11px 30px rgba(0,99,230,.24); }
  .button-primary:hover { background: #006deb; box-shadow: 0 13px 30px rgba(0,99,230,.3); }

  /* Intro illustration: preserve the blue/orange identity against deep navy */
  .hero { background: linear-gradient(115deg,#101724 5%,#131e30 65%,#15253c 100%); }
  .hero-wash { background: radial-gradient(circle,rgba(56,138,255,.16),transparent 70%); }
  .eyebrow { color: #91c5ff; background: #193554; border-color: #305275; }
  .hero-footnote { color: #899ab2; }
  .orbit { border-color: #304762; }
  .orbit-inner { border-color: #2b415b; }
  .hero-visual-panel { background: #192536; border-color: #33445a; box-shadow: 0 38px 85px rgba(0,0,0,.3),0 5px 20px rgba(0,0,0,.2); }
  .visual-panel-head, .visual-panel-foot { border-color: #304057; color: #a0b0c7; }
  .visual-dots i { background: #526982; }
  .visual-head-mark { color: #9bb5d4; }
  .visual-core { background: #203b5c; border-color: #355a81; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
  .visual-connector span, .visual-connector i, .visual-connector:before { background: #48607c; }
  .visual-node { background: #233249; border-color: #344862; box-shadow: 0 5px 14px rgba(0,0,0,.15); }
  .visual-node small { color: #bac7da; }
  .visual-tick { color: #91a8c5; }
  .visual-icon-blue { background: #1a436a; }
  .visual-icon-orange { background: #4d3529; }
  .visual-icon-calendar { color: #aeb9ff; background: #303758; }
  .float-chip { background: #24334a; border-color: #3a506b; box-shadow: 0 12px 30px rgba(0,0,0,.26); }
  .float-chip-bottom span { background: #234d3b; color: #92e1b6; }
  .scroll-line { color: #9aafc9; }
  .scroll-indicator { background: #203d60; }

  /* Product cards and tags */
  .products-section, .product-card { background: var(--page); }
  .product-card { border-color: var(--stroke); box-shadow: 0 9px 35px rgba(0,0,0,.12); }
  .product-category { color: #a4b5ca; }
  .category-dot { box-shadow: 0 0 0 4px #213b59; }
  .orange-dot { box-shadow: 0 0 0 4px #483426; }
  .calendar-dot { box-shadow: 0 0 0 4px #343451; }
  .product-badge { background: #483121; color: #ffbc82; }
  .calendar-badge { background: #30385c; color: #b8c2ff; }
  .feature-tags span { background: #1c293a; border-color: #34435a; color: #c8d4e4; }
  .details-button { border-top-color: #33435a; }
  .details-plus { background: #203d60; }
  .other-products { background: #182335; color: #b8c6d9; border-color: #3b4b63; }
  .other-icon { background: #253750; border-color: #41526d; }

  /* Advert flow */
  .advert-visual { background: #152c48; color: #8dc4ff; }
  .advert-visual:before { border-color: rgba(104,177,255,.22); box-shadow: 0 0 0 80px rgba(100,160,255,.045); }
  .source-pill { background: #223853; color: #e1ebf9; border-color: #3d5979; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
  .flow-lines { border-bottom-color: #567a9e; }
  .flow-lines i { border-left-color: #567a9e; }
  .flow-lines:after { color: #92bded; }
  .flow-engine { background: #223650; border-color: #466481; color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
  .engine-icon { background: #1b4b75; }
  .flow-engine small { color: #b3c6dd; }
  .mini-flow { background: rgba(34,54,80,.82); border-color: #466481; color: #d2e0f0; }

  /* Stock flow */
  .stock-visual { background: #39291f; color: #ffc08a; }
  .stock-visual:before { border-color: rgba(255,172,92,.24); box-shadow: 0 0 0 80px rgba(255,168,86,.035); }
  .stock-box { background: #493626; border-color: #765539; color: #f7e5d1; box-shadow: 0 12px 28px rgba(0,0,0,.15); }
  .stock-box svg, .bottom-box svg { color: #ffb66c; }
  .stock-path { color: #ffc18b; }
  .stock-path span { background: #ab7852; }
  .box-check { background: #63482d; color: #ffbf7a; }

  /* Calendar illustration */
  .calendar-visual { background: #242842; color: #b9baff; }
  .calendar-visual:before { border-color: rgba(150,154,255,.25); box-shadow: 0 0 0 80px rgba(150,154,255,.045); }
  .calendar-demo { background: #242d47; color: #f2f3ff; border-color: #495477; box-shadow: 0 24px 55px rgba(0,0,0,.22); }
  .calendar-demo-icon { background: #343f6c; color: #b2bbff; }
  .calendar-demo-header small { color: #bbc6df; }
  .calendar-demo-week span { background: #323e57; color: #d4ddf0; }
  .calendar-demo-week .active { background: #087aff; color: white; }
  .calendar-demo-row { background: #2a3751; border-color: #41516f; }
  .calendar-demo-num { color: #b8c9ed; }
  .calendar-demo-line { background: #5b729e; }
  .calendar-demo-footer { background: #222e47; border-top-color: #41516f; color: #c0cdec; }

  /* Philosophy already has a dark base; avoid a bright separator into it */
  .approach-section { background: #0b1220; }
  .site-footer { background: #101724; }
  .footer-brand p { color: #aab9cd; }
  .footer-bottom { color: #a8bad1; }

  /* Mobile navigation (light rules were defined inside a mobile query) */
  .menu-button { background: #1d2a3d; border-color: #40516b; }
  .mobile-nav:not([hidden]) { background: #101724; border-top-color: #33435a; box-shadow: 0 16px 25px rgba(0,0,0,.28); }
  .mobile-nav a { border-bottom-color: #33435a; }
}