/* PaperPhone × Supabase-inspired theme
   Keeps the product's identity while adopting a quieter, developer-first UI. */
:root {
  --ink: #171918;
  --paper: #f7f8f7;
  --white: #fff;
  --muted: #66706b;
  --line: #dfe4e1;
  --green: #3ecf8e;
  --green-deep: #168a5b;
  --violet: #9b87f5;
  --violet-deep: #6651c8;
  --shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 14px 36px rgba(16, 24, 20, .06);
  --radius: 14px;
}

::selection { color: #07140d; background: #7ce7b6; }
body { background: var(--paper); }
a, button, select, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.nav {
  top: 14px;
  padding: 8px 9px 8px 14px;
  border-color: rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(20, 23, 21, .82);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.mark { border-radius: 7px; background: var(--green); }
.nav-links a, .privacy-menu summary, .language-select { border-radius: 7px; }
.nav-github { color: #d8fff0 !important; border: 1px solid rgba(62,207,142,.35); background: rgba(62,207,142,.13) !important; }
.privacy-popover { top: 45px; border-radius: 10px; background: rgba(20,23,21,.97); }

.hero { min-height: 780px; background: #101211; }
.hero:before {
  background:
    radial-gradient(circle at 78% 20%, rgba(62,207,142,.15), transparent 31%),
    radial-gradient(circle at 70% 76%, rgba(139,118,230,.11), transparent 26%),
    linear-gradient(115deg,#101211 0%,#131816 58%,#151617 100%);
}
.hero:after { height: 96px; }
.grain {
  opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to right,transparent 1%,#000 36%,#000 76%,transparent 100%);
}
.hero-inner { min-height: 780px; gap: 72px; }
.kicker, .label {
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .09em;
}
.kicker { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.045); }
.dot { box-shadow: 0 0 0 4px rgba(62,207,142,.14), 0 0 18px rgba(62,207,142,.45); }
h1 { font-size: clamp(3.6rem,7vw,6.7rem); line-height: .96; letter-spacing: -.025em !important; }
h1 span { color: #8b9690; }
.lead { max-width: 620px; color: #a9b2ad; }

.btn { min-height: 44px; padding: 10px 16px; border-radius: 7px; font-size: .92rem; box-shadow: none; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.green { border-color: #58dba0; background: var(--green); box-shadow: 0 0 0 1px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.25); }
.light { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.055); }
.violet { background: var(--violet-deep); }

.product-stack { height: 490px; }
.product-card {
  z-index: 1;
  width: min(405px,94%);
  padding: 30px;
  border-color: rgba(255,255,255,.13);
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  cursor: pointer;
  user-select: none;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}
.product-card:before {
  content: "";
  display: block;
  width: 42px;
  height: 8px;
  margin-bottom: 24px;
  background: radial-gradient(circle at 4px 4px,#ff6b6b 0 3px,transparent 3.5px),radial-gradient(circle at 21px 4px,#f4c95d 0 3px,transparent 3.5px),radial-gradient(circle at 38px 4px,#3ecf8e 0 3px,transparent 3.5px);
}
.product-card.plus { background: linear-gradient(145deg,rgba(40,91,67,.74),rgba(18,23,20,.94) 60%); }
.product-card.lite { background: linear-gradient(145deg,rgba(77,65,132,.7),rgba(18,19,23,.95) 62%); }
.product-card:not(.is-active) { filter: saturate(.78) brightness(.82); }
.product-card.is-active {
  z-index: 2;
  transform: translateY(-7px);
  border-color: rgba(255,255,255,.25);
  filter: none;
  box-shadow: 0 34px 86px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.09);
}
.product-card.plus.is-active { border-color: rgba(62,207,142,.46); }
.product-card.lite.is-active { border-color: rgba(155,135,245,.46); }
.product-card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.product-card.lite:focus-visible { outline-color: var(--violet); }
.product-card h2 { margin-top: 16px; font-size: 2.25rem; }
.chip { border-radius: 5px; background: rgba(255,255,255,.055); }

.section { padding: 112px 0; }
.heading { margin-bottom: 52px; }
.heading h2, .detail-copy h2, .compare h2 { letter-spacing: -.015em !important; }
.label { border: 1px solid rgba(22,138,91,.14); background: rgba(62,207,142,.09); }
.label.purple { border-color: rgba(102,81,200,.14); background: rgba(155,135,245,.1); }

.choice, .deep-card, .arch, .diagram-card {
  border-color: var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
}
.choice { padding: 36px; }
.choice:after { right: 10px; bottom: -26px; font-family: ui-monospace,monospace; font-size: 10rem; }
.choice.lite-choice, .arch.darkbox { border-color: #303431; background: #191c1a; }
.edition { border: 1px solid rgba(22,138,91,.14); border-radius: 5px; }
.lite-choice .edition { border-color: rgba(155,135,245,.18); }
.choice-top > span:last-child, .product-no, .deep-card .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.detail { background: #111412; }
.detail.lite-detail { background: #f0eef9; }
.feature { border-radius: 9px; background: rgba(255,255,255,.045); }
.lite-detail .feature { background: rgba(255,255,255,.56); }
.phone-wall a { border-width: 4px; border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.deep-card { position: relative; min-height: 230px; overflow: hidden; }
.deep-card:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(transparent,var(--green),transparent); opacity: 0; transition: opacity .2s; }
.deep-card:hover:before { opacity: 1; }

.compare { border-block: 1px solid #28302c; background: #151817; }
.table-wrap { border-radius: 12px; background: rgba(255,255,255,.025); }
th { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
tr { transition: background .15s; }
tbody tr:hover { background: rgba(62,207,142,.035); }

.arch { padding: 32px; }
.flow { gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.flow div { border-radius: 0; background: #f8faf9; }
.flow div + div { border-top: 1px solid var(--line); }
.darkbox .flow { border-color: rgba(255,255,255,.1); }
.darkbox .flow div { background: rgba(255,255,255,.035); }
.darkbox .flow div + div { border-top-color: rgba(255,255,255,.1); }
.diagram-card { box-shadow: 0 1px 2px rgba(16,24,20,.05),0 20px 60px rgba(16,24,20,.08); }
.diagram-toolbar { border-bottom: 1px solid var(--line); }

.cta { border-top: 1px solid rgba(62,207,142,.2); background: linear-gradient(120deg,#101311,#123323); }
footer { border-top: 1px solid #202622; background: #0d0f0e; }

@media (max-width: 980px) {
  .hero-inner { gap: 32px; }
  .product-stack { height: 440px; }
}
@media (max-width: 680px) {
  .nav { border-radius: 10px; }
  .hero-inner { min-height: 930px; }
  h1 { font-size: clamp(3.25rem,17vw,5rem); }
  .section { padding: 80px 0; }
  .product-card { padding: 22px; }
  .product-card:before { margin-bottom: 18px; }
  .choice, .arch { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}