/* Little Octopus Landing UI kit — styles layered on top of colors_and_type.css */
* { box-sizing: border-box; }

.lo-page { background: var(--paper); color: var(--ink); min-height: 100vh; }

/* ------- Nav ------- (20.).lo-logo img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; }*/
.lo-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 40px;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.lo-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font: 700 18px/1 var(--font-serif); transition: transform var(--dur-base) var(--ease-out); }
.lo-logo:hover { transform: translateY(-1px); color: var(--ink); }
.lo-logo:hover img { --f: 1.35; }
/* Nudge the label up so it centers on the visible circle (not the padded image box) */
.lo-logo span { transform: translateY(calc(var(--s, 65px) / 10)); }

/* --- Logo 3D hover effect (matches reference snippet) --- */
.lo-logo img {
  --s: 65px;        /* image size */
  --b: 5px;         /* border thickness */
  --c: #fff;        /* border color */
  --f: 1;           /* initial scale */

  width: var(--s);
  aspect-ratio: 1;
  padding-top: calc(var(--s) / 5);
  cursor: pointer;
  border-radius: 0 0 999px 999px;
  --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
  --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
  outline: var(--b) solid var(--c);
  outline-offset: var(--_o);
  background: radial-gradient(
      circle closest-side,
      #cae4ff calc(99% - var(--b)),
      var(--c) calc(100% - var(--b)) 99%,
      #0000
    ) var(--_g);
  -webkit-mask: linear-gradient(#000 0 0) no-repeat 50%
      calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
    radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
          mask: linear-gradient(#000 0 0) no-repeat 50%
      calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
    radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
  transform: scale(var(--f));
  transition: 0.5s;
}

.lo-logo-sm { font-size: 15px; }
.lo-logo-sm img { --s: 42px; }
.lo-logo-sm span { transform: translateY(calc(var(--s, 42px) / 10)); }

.lo-nav-links { display: flex; align-items: center; gap: 28px; }
.lo-nav-links a { color: var(--ink-2); text-decoration: none; font: 500 14px/1 var(--font-sans); transition: color 220ms; }
.lo-nav-links a:hover { color: var(--ink); }

/* ------- Buttons ------- */
.lo-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 600; text-decoration: none; transition: all var(--dur-base) var(--ease-out); white-space: nowrap; }
.lo-btn-sm { padding: 8px 18px; font-size: 13px; }
.lo-btn-lg { padding: 16px 32px; font-size: 16px; }
.lo-btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.lo-btn-primary:hover { background: var(--accent-hover); transform: scale(1.02); color: #fff; }
.lo-btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.lo-btn-secondary:hover { background: var(--ink); color: var(--paper); }
.lo-btn-block { width: 100%; justify-content: center; padding: 16px; font-size: 16px; border-radius: 16px; }
.lo-arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.lo-btn:hover .lo-arrow { transform: translateX(3px); }

/* ------- Hero ------- */
.lo-hero { max-width: 900px; margin: 0 auto; padding: 120px 32px 100px; text-align: center; }
.lo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink);
  font: 600 13px/1.4 var(--font-sans); margin-bottom: 32px; }
.lo-display {
  font: 900 clamp(3.6rem, 7.8vw, 6.6rem)/1.15 var(--font-serif);
  color: var(--ink); letter-spacing: -0.02em; margin: 0 0 32px;
}
.lo-display .lo-en { font-family: var(--font-sans); font-style: italic; font-weight: 800; }
.lo-display .lo-accent, .lo-accent { color: var(--accent); }
.lo-sub { font: 400 18px/1.75 var(--font-sans); color: var(--ink-2); max-width: 640px; margin: 0 auto 40px; }
.lo-sub em { font-style: normal; color: var(--ink); font-weight: 600; }
.lo-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lo-hero-sub-label { margin-top: 80px; }
.lo-eyebrow { font: 600 12px/1.4 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.lo-eyebrow-on-dark { color: var(--accent); }

/* ------- Threats ------- */
.lo-threats { padding: 100px 32px; text-align: center; background: var(--paper-2); }
.lo-h1-serif { font: 700 clamp(2rem, 3.5vw, 3rem)/1.25 var(--font-serif); color: var(--ink); letter-spacing: -0.01em; margin: 0 0 56px; }
.lo-h1-serif .lo-en { font-family: var(--font-sans); font-style: italic; }
.lo-threats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; text-align: left; }
.lo-card { background: var(--paper); border-radius: 20px; padding: 32px; border: 1px solid rgba(45,41,38,0.05); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lo-card-threat h3 { font: 600 20px/1.3 var(--font-serif); margin: 18px 0 10px; color: var(--ink); }
.lo-card-threat p { font: 400 14px/1.7 var(--font-sans); color: var(--ink-2); margin: 0; }
.lo-threat-icon svg { width: 32px; height: 32px; }

/* ------- Demo ------- */
.lo-demo { max-width: 1150px; margin: 0 auto; padding: 120px 32px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.lo-demo-copy p { font: 400 17px/1.7 var(--font-sans); color: var(--ink-2); margin: 16px 0 32px; }
.lo-layers { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.lo-layers li { display: flex; align-items: center; gap: 14px; font: 500 15px/1.5 var(--font-sans); color: var(--ink); }
.lo-layer-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-mono); flex-shrink: 0; }

/* Terminal */
.lo-terminal { background: var(--night); border-radius: 24px; padding: 24px; color: var(--night-ink);
  box-shadow:
    0 2px 4px rgba(20, 22, 30, 0.08),
    0 8px 24px rgba(20, 22, 30, 0.18),
    0 32px 64px -12px rgba(20, 22, 30, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid var(--night-3);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  transform-origin: center left;
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.lo-terminal:hover {
  transform: perspective(1200px) rotateY(-1deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 2px 4px rgba(20, 22, 30, 0.08),
    0 12px 32px rgba(20, 22, 30, 0.22),
    0 40px 80px -12px rgba(20, 22, 30, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Slide-in from the right on scroll reveal — only applies to the terminal */
.lo-demo.lo-reveal .lo-terminal {
  opacity: 0;
  transform: perspective(1200px) rotateY(-12deg) rotateX(2deg) translateX(80px);
  transition: opacity 900ms var(--ease-emphatic), transform 900ms var(--ease-emphatic), box-shadow 600ms var(--ease-out);
}
.lo-demo.lo-reveal.in .lo-terminal {
  opacity: 1;
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateX(0);
}
.lo-term-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.lo-term-dots { display: flex; gap: 7px; }
.lo-term-dots span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lo-term-dots .d1 { background: #9B3A2F; } .lo-term-dots .d2 { background: #C28F3D; } .lo-term-dots .d3 { background: #6B8E5A; }
.lo-term-tag { font: 500 11px/1 var(--font-mono); color: var(--night-ink-2); letter-spacing: 0.1em; }
.lo-live { color: #6B8E5A; }
.lo-term-label { font: 500 12px/1.4 var(--font-sans); color: var(--night-ink-2); display: block; margin-bottom: 8px; }
.lo-term-input-wrap { position: relative; margin-bottom: 10px; }
.lo-term-input { width: 100%; background: var(--night-2); border: 1px solid var(--night-3); border-radius: 12px;
  padding: 12px 56px 12px 16px; color: var(--night-ink); font: 400 14px/1.5 var(--font-sans); outline: none; transition: all 220ms; }
.lo-term-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,89,0.2); }
.lo-term-send { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 700 16px/1 var(--font-sans); cursor: pointer;
  transition: background 220ms; }
.lo-term-send:hover:not(:disabled) { background: var(--accent-hover); }
.lo-term-send:disabled { opacity: 0.4; cursor: not-allowed; }
.lo-term-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.lo-term-btn { flex: 2; padding: 10px; border-radius: 10px; background: var(--night-2); color: var(--accent);
  border: 1px solid var(--night-3); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: background 220ms; }
.lo-term-btn:hover { background: var(--night-3); }
.lo-term-btn-muted { flex: 1; color: var(--night-ink-2); }

.lo-term-output { background: var(--night-2); border-radius: 14px; padding: 16px; min-height: 200px;
  font-family: var(--font-mono); font-size: 12px; position: relative; }
.lo-term-empty { color: var(--ink-3); opacity: 0.6; }
.lo-term-loading { color: var(--accent); text-align: center; padding: 50px 0;
  font-family: var(--font-mono); letter-spacing: 0.3em; }
.lo-term-loading span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: 0.05em; }
.lo-term-status { font-weight: 700; margin-bottom: 10px; letter-spacing: 0.1em; }
.lo-danger .lo-term-status { color: #E8613F; }
.lo-safe   .lo-term-status { color: #6B8E5A; }
.lo-term-json { color: #DDE6EE; margin: 0 0 10px; font-size: 11px; line-height: 1.7; white-space: pre-wrap; }
.lo-term-json { color: var(--night-ink); }
.lo-term-verdict { padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 12px; }
.lo-danger .lo-term-verdict { background: rgba(155,58,47,0.18); color: #F3DCD5; }
.lo-safe   .lo-term-verdict { background: rgba(107,142,90,0.18); color: #E6EADC; }

/* ------- Waitlist ------- */
.lo-waitlist { background: var(--ink); color: var(--paper); padding: 100px 32px; text-align: center; }
.lo-on-dark { color: var(--paper); }
.lo-on-dark-sub { font: 400 17px/1.7 var(--font-sans); color: var(--ink-4); margin: 0 0 48px; }
.lo-waitlist-card { max-width: 720px; margin: 0 auto; background: var(--paper); border-radius: 28px; padding: 36px; text-align: left;
  box-shadow: var(--shadow-xl); }
.lo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.lo-field { margin-bottom: 20px; }
.lo-field label { display: block; font: 600 13px/1.4 var(--font-sans); color: var(--ink); margin-bottom: 10px; }
.lo-multi-hint { font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: 11px; }
.lo-field input, .lo-field select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--paper); font: 400 14px/1.5 var(--font-sans); color: var(--ink); outline: none; transition: all 220ms; }
.lo-field input:focus, .lo-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,122,89,0.15); }

.lo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid transparent; color: var(--ink); font: 500 13px/1.4 var(--font-sans); cursor: pointer;
  transition: all var(--dur-base) var(--ease-out); }
.lo-chip:hover { background: var(--paper-3); }
.lo-chip-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lo-chip-on:hover { background: var(--ink); }

.lo-waitlist-done { max-width: 560px; margin: 0 auto; background: rgba(250,249,246,0.06); backdrop-filter: blur(12px);
  border: 1px solid rgba(250,249,246,0.15); border-radius: 28px; padding: 48px; }
.lo-waitlist-check { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 20px; }
.lo-waitlist-done h3 { font: 700 28px/1.2 var(--font-serif); color: var(--paper); margin: 0 0 8px; }
.lo-waitlist-done p { color: var(--ink-4); margin: 0; }

/* ------- Footer ------- */
.lo-footer { background: var(--paper); border-top: 1px solid var(--divider); padding: 32px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lo-footer-links { display: flex; gap: 28px; }
.lo-footer-links a { font: 400 13px/1 var(--font-sans); color: var(--ink-3); text-decoration: none; transition: color 220ms; }
.lo-footer-links a:hover { color: var(--ink); }
.lo-footer-meta { font: 400 12px/1 var(--font-sans); color: var(--ink-4); }

/* ------- Fade-in-up on scroll ------- */
.lo-reveal { opacity: 0; transform: translateY(24px); transition: opacity 720ms var(--ease-emphatic), transform 720ms var(--ease-emphatic); }
.lo-reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .lo-demo { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px; }
  .lo-threats-grid { grid-template-columns: 1fr; }
  .lo-nav-links a:not(.lo-btn) { display: none; }
  .lo-form-row { grid-template-columns: 1fr; }
}