/* ============================================================
   KEYRON — light pages design system
   Navy ink on cool marble. Reference: Calendly-style token sheet.
   Used by every page except index.html (which keeps the dark
   Auros hero treatment).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink-navy:#0b3558;
  --signal-blue:#006bff;
  --slate-gray:#476788;
  --mist-gray:#a6bbd1;
  --cloud:#f8f9fb;
  --paper:#ffffff;
  --pebble:#f0f3f8;
  --hairline:#d4e0ed;
  --coral-magenta:#e55cff;
  --sky-cyan:#0099ff;
  --deep-cobalt:#004eba;

  --ff-display:'Manrope','Noto Sans JP',ui-sans-serif,system-ui,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;

  --sp-8:8px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-72:72px; --sp-96:96px;

  --r-cards:24px; --r-small:4px; --r-badges:9999px; --r-inputs:8px; --r-buttons:8px; --r-product:16px;

  --shadow-sm: rgba(71,103,136,.04) 0 4px 5px 0, rgba(71,103,136,.03) 0 4px 10px 0, rgba(71,103,136,.05) 0 10px 20px 0;
  --shadow-card: rgba(71,103,136,.04) 0 4px 5px 0, rgba(71,103,136,.03) 0 8px 15px 0, rgba(71,103,136,.08) 0 30px 50px 0;
  --shadow-btn: rgba(71,103,136,.04) 0 4px 5px 0, rgba(71,103,136,.03) 0 8px 15px 0, rgba(71,103,136,.06) 0 15px 30px 0;

  --page-max:1200px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.lp{
  margin:0;
  background:var(--cloud);
  color:var(--ink-navy);
  font-family:var(--ff-display);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.lp h1,.lp h2,.lp h3,.lp h4{
  font-family:var(--ff-display);
  font-weight:700;
  color:var(--ink-navy);
  margin:0;
  text-wrap:balance;
  line-height:1.2;
}
.lp p{ margin:0; }
.lp a{ color:inherit; text-decoration:none; }
.lp img{ display:block; max-width:100%; }
.lp a:focus-visible, .lp button:focus-visible{ outline:2px solid var(--signal-blue); outline-offset:3px; border-radius:2px; }
.lp ::selection{ background:var(--signal-blue); color:#fff; }

.lp-wrap{ max-width:var(--page-max); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.lp-section{ padding:clamp(56px,8vw,96px) 0; }
.lp-section-alt{ background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }

.lp-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal-blue);
}
.lp-eyebrow::before{ content:""; width:22px; height:2px; background:var(--sky-cyan); }

.lp-h2{ font-size:clamp(1.9rem,4vw,3.125rem); letter-spacing:-.01em; }
.lp-h3{ font-size:clamp(1.4rem,2.4vw,1.75rem); letter-spacing:-.005em; }
.lp-lead{ color:var(--slate-gray); font-size:1.125rem; max-width:62ch; line-height:1.7; }
.lp-sec-head{ display:grid; gap:14px; max-width:760px; margin-bottom:clamp(32px,5vw,56px); }
.lp-sec-head.center{ margin-inline:auto; text-align:center; justify-items:center; }

/* ---------- buttons ---------- */
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff-display); font-weight:600; font-size:18px; line-height:1.4;
  padding:12px 22px; border-radius:var(--r-buttons); border:none; cursor:pointer;
  text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.lp-btn-primary{ background:var(--signal-blue); color:#fff; box-shadow:var(--shadow-btn); }
.lp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -18px rgba(0,107,255,.55); }
.lp-btn-dark{ background:var(--ink-navy); color:#fff; box-shadow:var(--shadow-btn); }
.lp-btn-dark:hover{ transform:translateY(-2px); }
.lp-btn-ghost{ background:var(--paper); color:var(--ink-navy); border:1.5px solid var(--hairline); }
.lp-btn-ghost:hover{ border-color:var(--signal-blue); color:var(--signal-blue); }
.lp-btn-sm{ font-size:14px; padding:9px 16px; }

.lp-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#e6f0ff; color:var(--deep-cobalt);
  font-size:12px; font-weight:500; border-radius:var(--r-badges); padding:4px 12px;
}

/* ---------- header ---------- */
.lp-header{
  position:sticky; top:0; z-index:100; height:72px; display:flex; align-items:center;
  background:rgba(248,249,251,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.lp-header-in{ display:flex; align-items:center; gap:24px; width:100%; }
.lp-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; margin-right:auto; color:var(--ink-navy); }
.lp-brand-mark{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--signal-blue),var(--sky-cyan)); flex:none; }
.lp-nav{ display:flex; gap:28px; }
.lp-nav a{ font-size:14px; font-weight:500; color:var(--ink-navy); transition:color .2s ease; }
.lp-nav a:hover{ color:var(--signal-blue); }
.lp-header-actions{ display:flex; align-items:center; gap:10px; }
.lp-header-actions .lp-btn{ padding:9px 16px; font-size:14px; }
.lp-menu-toggle{ display:none; background:none; border:none; color:var(--ink-navy); padding:6px; cursor:pointer; }
.lp-menu-toggle svg{ width:22px; height:22px; }
.lp-mobile-menu{ display:none; flex-direction:column; gap:4px; padding:14px clamp(20px,4vw,48px) 20px; background:var(--paper); border-top:1px solid var(--hairline); }
.lp-mobile-menu[hidden]{ display:none; }
.lp-mobile-menu.open{ display:flex; }
.lp-mobile-menu a{ padding:12px 4px; font-size:14px; font-weight:500; color:var(--ink-navy); border-bottom:1px solid var(--pebble); }
.lp-mobile-menu .lp-btn{ justify-content:center; margin-top:8px; border-bottom:none; }
@media (max-width:900px){
  .lp-nav, .lp-header-actions{ display:none; }
  .lp-menu-toggle{ display:flex; align-items:center; justify-content:center; }
}

/* ---------- cards ---------- */
.lp-card{
  background:var(--paper); border-radius:var(--r-cards); padding:var(--sp-24);
  box-shadow:var(--shadow-card);
}
.lp-photo{
  position:relative; border-radius:var(--r-product); overflow:hidden; box-shadow:var(--shadow-card);
  background:var(--pebble);
}
.lp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-photo-blob{ position:relative; }
.lp-photo-blob::before{
  content:""; position:absolute; z-index:0; border-radius:50%; filter:blur(2px);
  width:70%; height:70%; opacity:.55;
}
.lp-photo-blob.magenta::before{ background:var(--coral-magenta); top:-14%; right:-14%; }
.lp-photo-blob.cyan::before{ background:var(--sky-cyan); bottom:-14%; left:-14%; }
.lp-photo-blob .lp-photo{ position:relative; z-index:1; }

/* ---------- grids ---------- */
.lp-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center; }
.lp-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.lp-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .lp-grid-2{ grid-template-columns:1fr; } .lp-grid-3{ grid-template-columns:1fr 1fr; } .lp-grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .lp-grid-3{ grid-template-columns:1fr; } .lp-grid-4{ grid-template-columns:1fr; } }

/* ---------- feature / accordion rows ---------- */
.lp-feature{
  display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--hairline); align-items:flex-start;
}
.lp-feature .ic{ width:22px; height:22px; flex:none; color:var(--signal-blue); margin-top:3px; }
.lp-feature h4{ font-size:18px; font-weight:600; margin-bottom:4px; }
.lp-feature p{ color:var(--slate-gray); font-size:14px; line-height:1.7; }

/* ---------- table (company profile / matrix style) ---------- */
.lp-table{ display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--r-cards); overflow:hidden; }
.lp-row{ background:var(--paper); display:grid; grid-template-columns:160px 1fr; gap:16px; padding:16px 20px; }
@media (max-width:600px){ .lp-row{ grid-template-columns:1fr; } }
.lp-row .k{ font-family:var(--ff-mono); font-size:12px; color:var(--mist-gray); text-transform:uppercase; letter-spacing:.06em; }
.lp-row .v{ font-size:14.5px; font-weight:500; color:var(--ink-navy); }

/* ---------- footer ---------- */
.lp-footer{ background:var(--cloud); border-top:1px solid var(--hairline); padding:56px 0 32px; }
.lp-footer-in{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid var(--hairline); }
.lp-footer-brand b{ display:block; margin-bottom:8px; }
.lp-footer-brand p{ color:var(--slate-gray); font-size:14px; max-width:34ch; }
.lp-footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.lp-footer-cols > div{ display:flex; flex-direction:column; gap:10px; }
.lp-footer-cols span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-gray); margin-bottom:2px; }
.lp-footer-cols a{ font-size:14px; font-weight:500; color:var(--ink-navy); }
.lp-footer-cols a:hover{ color:var(--signal-blue); }
.lp-footer-bottom{ padding-top:20px; font-family:var(--ff-mono); font-size:11.5px; color:var(--mist-gray); }

/* ---------- reveal on scroll ----------
   Content stays fully visible at rest (opacity:1 always) — only a small
   rise-into-place transform animates, so nothing is ever hidden waiting
   on JS/IntersectionObserver. */
@media (prefers-reduced-motion:no-preference){
  .lp-rv{ transform:translateY(16px); transition:transform .7s var(--ease); }
  .lp-rv.in{ transform:none; }
}