/* site.css — the public pages of lazyhumanbegin.com (home, what is an AI admin system, features, pricing, FAQ, about).
   Plain pages for people and for the crawlers behind search engines and AI assistants. One look, shared here. */
:root {
  color-scheme: light;
  --blue: #2563eb; --blue-dark: #1e4fc2; --ink: #16202c; --muted: #5c6a7d; --faint: #8a95a5;
  --bg: #f6f8fb; --card: #ffffff; --line: #e6eaf0; --tint: #eef3ff; --green: #0f8a5f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.65; font-size: 17px; }
a { color: var(--blue); }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; }

/* menu */
.nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.nav__in { max-width: 880px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 800; margin-right: auto; }
.nav__brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav a.nav__link { color: var(--muted); text-decoration: none; font-size: 15px; padding: 6px 2px; }
.nav a.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav a.nav__app { background: var(--blue); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 10px; }

/* blocks */
.hero { text-align: center; padding: 56px 0 28px; }
.hero h1 { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; }
.hero p { font-size: 19px; color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
.cta { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; font-weight: 700; padding: 14px 24px; border-radius: 12px; font-size: 17px; }
.cta:hover { background: var(--blue-dark); }
.cta--ghost { background: var(--tint); color: var(--blue); margin-left: 8px; }
.cta--ghost:hover { background: #e2eaff; }
.fine { color: var(--faint); font-size: 14px; margin-top: 12px; }
section { padding-top: 28px; padding-bottom: 28px; }   /* never the sides: a `<section class="wrap">` keeps the gutter */
h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.lead { font-size: 19px; color: var(--muted); }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* four cards as a square — the auto-fit grid left the fourth one alone on its row (Malaysia's rules, built in — 2026-10-09) */
.grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .grid--four { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card h3 { color: var(--blue); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 6px; }
.big { font-size: 24px; font-weight: 800; line-height: 1.35; margin: 0 0 8px; }
.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--blue); background: var(--tint); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 14px; color: var(--muted); font-weight: 700; background: #fafbfd; }
.table tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }

/* features list */
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px; margin-bottom: 18px; }
.feat h3 { padding: 14px 0 8px; margin: 0; border-bottom: 1px solid var(--line); }
.feat dl { margin: 0; }
.feat .row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.feat .row:last-child { border-bottom: 0; }
.feat dt { font-weight: 700; margin: 0; }
.feat dd { margin: 0; color: var(--muted); }
.feat dd .tag { margin-left: 6px; }
@media (max-width: 560px) { .feat .row { grid-template-columns: 1fr; gap: 2px; } }

/* pricing */
.plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; }
.plan--popular { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.plan h3 { font-size: 20px; margin-bottom: 2px; }
.plan .tagline { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.plan .price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan .annual { color: var(--green); font-size: 14px; margin-bottom: 10px; }
.plan ul { padding-left: 18px; margin: 0 0 14px; font-size: 15px; }
.plan .inherits { color: var(--faint); font-size: 13px; margin-bottom: 8px; }
.plan .cta { margin-top: auto; text-align: center; }

/* faq */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; font-size: 17px; }
.faq summary::-webkit-details-marker { color: var(--blue); }
.faq details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.faq details p { color: var(--ink); }

/* footer */
footer { text-align: center; color: var(--faint); font-size: 14px; padding: 36px 16px 48px; }
footer a { color: var(--blue); text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* phones: the menu is not sticky and takes two short rows — brand + Open the app, then the links */
@media (max-width: 600px) {
  .nav { position: static; }
  .nav__in { gap: 6px 12px; padding: 8px 16px; }
  .nav__brand { order: 0; }
  .nav a.nav__app { order: 1; padding: 7px 12px; }
  .nav a.nav__link { order: 2; font-size: 14px; padding: 2px 0; }
  .hero { padding-top: 36px; }
}

/* ── the home page: the face (founder 2026-10-05). The brand from the intro films — a dark field with the
   logo's teal→green glow — for the hero and the two dark bands; real screens of the app everywhere else. ── */
:root { --night: #0b0e14; --night-2: #11151d; --teal: #7fe3d2; --mint: #9df0b0; --on-night: #e6e9ef; --on-night-muted: #9aa5b8; }
.home h1, .home h2, .home .big, .home .num, .home .strip__plan strong { font-family: "Sora", -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.02em; }
.home h2 { font-size: clamp(24px, 3.6vw, 32px); }

.nav--dark { background: var(--night); border-bottom-color: #1c2230; }
.nav--dark .nav__brand { color: #fff; }
.nav--dark a.nav__link { color: var(--on-night-muted); }
.nav--dark a.nav__link[aria-current="page"] { color: #fff; }
.nav--dark a.nav__app { background: var(--teal); color: #06221d; }

.hero2 { position: relative; background: var(--night); color: var(--on-night); overflow: hidden; }
.hero2__glow { position: absolute; left: 50%; top: 40%; width: 900px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(127, 227, 210, .22), rgba(157, 240, 176, .08) 45%, transparent 70%); pointer-events: none; }
.hero2__in { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.hero2 h1 { font-size: clamp(34px, 5.6vw, 54px); line-height: 1.08; margin: 0 0 16px; color: #fff; }
.hero2__sub { font-size: 20px; color: var(--on-night-muted); max-width: 520px; margin: 0 0 24px; }
.hero2__cta { margin: 0 0 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.cta--glow { background: var(--teal); color: #06221d; box-shadow: 0 0 0 0 rgba(127, 227, 210, .0), 0 10px 30px rgba(127, 227, 210, .25); }
.cta--glow:hover { background: #a3ecdf; }
.cta--line { background: transparent; color: #fff; border: 1px solid #2c3444; margin-left: 0; }
.cta--line:hover { background: #161b25; }
.fine--dark { color: var(--on-night-muted); }

/* a phone frame around a real screen or the film */
.phone { position: relative; width: 300px; max-width: 100%; margin: 0 auto; aspect-ratio: 9 / 19; border-radius: 44px; background: #0a0d13; padding: 12px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 2px #262c38; }
.phone::before { content: ""; position: absolute; left: 50%; top: 22px; width: 90px; height: 8px; border-radius: 8px; background: #1a1f29; transform: translateX(-50%); z-index: 2; }
.phone > img, .phone > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; background: #000; }
.phone--hero { width: 290px; }
.phone--side { width: 260px; }
.phone--night > img { object-position: center; }

/* three app screens, clipped to their top */
.grid--shots { margin-top: 22px; }
.shotcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.shotcard .shot { aspect-ratio: 390 / 300; overflow: hidden; background: #eef1f5; border-bottom: 1px solid var(--line); }
.shotcard .shot img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
.shotcard h3 { color: var(--blue); margin: 14px 18px 6px; }
.shotcard p { margin: 0 18px 18px; color: var(--muted); }

.band--dark { background: var(--night); color: var(--on-night); border-color: #1c2230; }
.band--dark p { color: var(--on-night-muted); }
.big--light { color: #fff; }
.band--end { padding: 44px 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.split--media { grid-template-columns: 300px 1fr; }
.split--rev { grid-template-columns: 1fr 300px; }
.numerals { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.num { line-height: 1; font-weight: 800; }
.num--big { font-size: clamp(72px, 12vw, 128px); color: var(--teal); }
.num--small { font-size: clamp(34px, 6vw, 56px); color: var(--mint); }

/* the plan strip */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.strip__plan { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.strip__plan span { font-size: 13px; color: var(--muted); font-weight: 700; }
.strip__plan strong { font-size: 20px; }
.strip__plan small { font-size: 12px; color: var(--faint); }
.strip__plan--hi { border-color: var(--blue); box-shadow: 0 0 0 3px var(--tint); }
.strip__plan:hover { border-color: var(--blue); }

@media (max-width: 760px) {
  .hero2__in { grid-template-columns: 1fr; text-align: center; padding-top: 32px; padding-bottom: 36px; }
  .hero2__sub { margin-left: auto; margin-right: auto; }
  .hero2__cta { justify-content: center; }
  .split, .split--media, .split--rev { grid-template-columns: 1fr; gap: 22px; }
  .split--rev .phone { order: -1; }
  .numerals { justify-content: flex-start; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .phone--hero { width: min(320px, 100%); }   /* the film fills the phone's width — 240px looked narrow (founder 2026-10-06) */
  .phone--side { width: min(290px, 100%); }
}

/* ── the wow layer (founder 2026-10-05: "make it wow"): the film's tiles drift in the hero, sections rise into
   view, the 95 counts up, the phones straighten, the closing line lights like a neon sign, and a sample chat types
   real answers. All motion is transform/opacity only, and off entirely for people who asked for reduced motion. ── */
.tiles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.tile { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(var(--s, 1)); white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: rgba(127, 227, 210, var(--a, .55)); background: rgba(127, 227, 210, .05);
  border: 1px solid rgba(127, 227, 210, calc(var(--a, .55) * .6)); border-radius: 999px; padding: 6px 12px; opacity: 0;
  box-shadow: 0 0 12px rgba(127, 227, 210, calc(var(--a, .55) * .25)); animation: tile-in .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) forwards, tile-float var(--f, 7s) ease-in-out calc(var(--d, 0s) + .9s) infinite alternate; }
@keyframes tile-in { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(var(--s, 1)); } }
@keyframes tile-float { to { transform: translate(-50%, calc(-50% - 14px)) scale(var(--s, 1)); } }
.hero2__copy, .phone--hero { position: relative; z-index: 1; }
.hero2__copy { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
.phone--hero { animation: rise 1s cubic-bezier(.2, .8, .2, 1) .35s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero2__glow { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .75; transform: translate(-50%, -50%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }

.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 14px 16px; background: var(--night-2); color: var(--on-night-muted); font-size: 14px; border-bottom: 1px solid #1c2230; }
.trust span::before { content: "✓ "; color: var(--teal); font-weight: 800; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }
.phone--side { transform: perspective(1200px) rotateY(var(--tilt, -12deg)); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.split--rev .phone--side { --tilt: 12deg; }
.in .phone--side { transform: perspective(1200px) rotateY(0deg); }
.num--big { display: inline-block; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* neon sign */
.neon { color: #fff; text-shadow: 0 0 6px rgba(127, 227, 210, .9), 0 0 18px rgba(127, 227, 210, .55), 0 0 44px rgba(127, 227, 210, .3); opacity: .25; }
.in .neon { opacity: 1; animation: neon-on 1.6s steps(1, end) forwards; }
@keyframes neon-on { 0% { opacity: .25; } 12% { opacity: 1; } 20% { opacity: .3; } 28% { opacity: 1; } 36% { opacity: .5; } 44%, 100% { opacity: 1; } }

/* the sample chat */
.demo { background: var(--night); color: var(--on-night); border-radius: 20px; padding: 18px; box-shadow: 0 30px 70px rgba(10, 14, 20, .35); border: 1px solid #1c2230; }
.demo__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.demo__head img { width: 34px; height: 34px; border-radius: 10px; }
.demo__head b { color: #fff; } .demo__head small { color: var(--on-night-muted); font-size: 13px; }
.demo__log { min-height: 150px; max-height: 360px; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; font-size: 15px; white-space: pre-wrap; animation: rise .4s ease both; }
.msg--you { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.msg--ai { align-self: flex-start; background: #182030; color: var(--on-night); border-bottom-left-radius: 6px; }
.msg--ai b { color: #fff; }
.msg--ai.typing::after { content: "▍"; color: var(--teal); animation: blink .8s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; color: var(--teal); background: rgba(127, 227, 210, .08); border: 1px solid rgba(127, 227, 210, .35); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.chip:hover, .chip:focus-visible { background: rgba(127, 227, 210, .18); outline: none; }
.chip[disabled] { opacity: .45; cursor: default; }
.demo__note { color: var(--on-night-muted); font-size: 13px; margin: 10px 0 0; }

@media (max-width: 760px) { .tiles { display: none; } .phone--side { --tilt: 0deg; } }   /* on a phone the film inside the phone carries the brand; tiles would sit on the words */
@media (prefers-reduced-motion: reduce) {
  .tile, .hero2__copy, .phone--hero, .hero2__glow, .msg { animation: none !important; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone--side { transform: none; transition: none; }
  .neon, .in .neon { opacity: 1; animation: none; }
}

/* polish: the closing line earns its size; home sections breathe a little more */
.home section { padding-top: 36px; padding-bottom: 36px; }   /* top/bottom ONLY — `padding: 36px 0` beat `.wrap`'s 16px gutter and the text touched the phone's edges (founder's iPhone 2026-10-07) */
.band--end .big { font-size: clamp(30px, 5vw, 44px); margin-bottom: 14px; }
.neon { text-shadow: 0 0 4px rgba(127, 227, 210, .9), 0 0 12px rgba(127, 227, 210, .55), 0 0 28px rgba(127, 227, 210, .3); }
.strip { margin-bottom: 8px; }