:root { --ink:#51301f; --muted:#806956; --paper:#f9f0d8; --paper-deep:#ead9b5; --line:#cdbb99; --accent:#73422c; --blue:#577ca5; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:var(--font-ui); background:#79603b url('assets/supper-background.jpg') center top / cover fixed no-repeat; }
.landing-page { width:min(1160px,100%); min-height:100svh; margin:auto; padding:var(--space-10) clamp(var(--space-5),5vw,4rem) var(--page-bottom-space); overflow:hidden; background:linear-gradient(90deg,rgba(249,240,216,.96),rgba(249,240,216,.76) 58%,rgba(249,240,216,.38)); }
.hero-mark { width:112px; height:78px; margin:0 0 18px; overflow:hidden; border:1px solid #5b2d1d; border-radius:12px; background:#050403; box-shadow:0 10px 24px rgba(63,35,17,.22); }.hero-mark img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.wordmark { margin:0 0 28px; color:var(--accent); font-size:14px; font-weight:700; letter-spacing:-.03em; }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(360px,1fr); align-items:center; gap:clamp(40px,8vw,96px); min-height:650px; padding:20px 0 90px; }.hero-copy { max-width:620px; }.eyebrow { margin:0 0 14px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.hero h1 { max-width:650px; margin:0; color:#3f2418; font:700 clamp(56px,6.8vw,92px)/.88 var(--font-display); letter-spacing:-.035em; }.hero h1 em,.mission h2 em { color:var(--accent); font-style:italic; }.hero-intro { max-width:430px; margin:28px 0; color:#624b3d; font-size:16px; line-height:1.65; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }.hero-cta,.demo-cta { display:inline-flex; align-items:center; gap:18px; min-height:52px; padding:15px 21px; border:1px solid #4e2c1c; color:#fff8e7; font:700 12px var(--font-ui); text-decoration:none; transition:transform .18s,background .18s; }.hero-cta { background:var(--accent); }.demo-cta { background:transparent; color:var(--accent); cursor:pointer; }.hero-cta:hover,.demo-cta:hover { background:#57301f; color:#fff8e7; transform:translateY(-2px); }.demo-cta:disabled { cursor:wait; opacity:.65; }.demo-message { flex-basis:100%; min-height:18px; margin:0; color:var(--accent); font-size:12px; }
.chat-window { width:min(100%,440px); margin:auto; overflow:hidden; border:8px solid #4e3326; border-radius:25px; background:var(--paper); box-shadow:0 25px 60px rgba(63,35,17,.3),0 4px 10px rgba(63,35,17,.15); transform:rotate(2deg); }.chat-topbar { display:flex; align-items:center; gap:10px; padding:16px 17px 12px; border-bottom:1px solid var(--line); background:rgba(255,253,239,.75); }.chat-back,.chat-info { color:var(--accent); font-size:26px; line-height:1; }.chat-info { margin-left:auto; font-size:21px; }.group-avatar { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--accent); border-radius:50%; background:var(--paper-deep); color:var(--accent); font-size:17px; }.chat-topbar strong,.chat-topbar small { display:block; }.chat-topbar strong { font-size:11px; }.chat-topbar small { margin-top:3px; color:var(--muted); font-size:9px; }.chat-body { min-height:410px; padding:16px 14px 11px; background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.7),transparent 18rem),var(--paper); }.chat-date { margin:0 0 18px; color:var(--muted); font-size:9px; text-align:center; }.bubble { width:max-content; max-width:80%; margin:9px 0; padding:10px 14px; border-radius:17px; font-size:12px; line-height:1.3; }.bubble-them { border-bottom-left-radius:5px; background:#e5d8bb; color:var(--ink); }.bubble-me { margin-left:auto; border-bottom-right-radius:5px; background:var(--blue); color:#fff; }.bubble.delayed { margin-top:20px; opacity:.66; }.typing { display:flex; gap:3px; width:max-content; margin-top:14px; padding:9px 12px; border-radius:16px; background:#e5d8bb; }.typing span { width:4px; height:4px; border-radius:50%; background:var(--muted); }.chat-input { display:flex; align-items:center; justify-content:space-between; margin:0 10px 12px; padding:8px 12px; border:1px solid var(--line); border-radius:18px; color:var(--muted); font-size:11px; }.chat-input b { display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; }
.mission { max-width:650px; margin:0 auto; padding:75px 0 130px; text-align:center; }.mission h2,.team h2 { margin:0; font:700 clamp(40px,5vw,62px)/.94 var(--font-display); letter-spacing:-.025em; }.mission p:last-child { max-width:500px; margin:24px auto 0; color:var(--muted); font-size:15px; line-height:1.7; }.team { padding:0 0 90px; text-align:center; }.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:30px auto 0; text-align:left; }.developer { display:flex; align-items:center; gap:11px; padding:15px; border:1px solid var(--line); background:rgba(255,250,237,.66); color:var(--ink); text-decoration:none; transition:transform .18s,box-shadow .18s; }.developer:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(63,35,17,.12); }.dev-avatar { display:grid; width:38px; height:38px; flex:none; place-items:center; border:1px solid var(--accent); border-radius:50%; background:var(--paper-deep); color:var(--accent); font-weight:700; }.avatar-one { background:#e4b7a4; }.avatar-two { background:#c9b8d6; }.avatar-three { background:#b9cfb9; }.developer strong { display:block; font-size:12px; }.footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:24px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }.footer a { color:var(--accent); font-weight:700; text-decoration:none; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; min-height:0; padding:45px 0 90px; }.hero-copy { text-align:center; }.hero-mark { margin-left:auto; margin-right:auto; }.wordmark { text-align:center; }.hero-intro { margin-left:auto; margin-right:auto; }.hero-actions { justify-content:center; }.chat-window { transform:rotate(1deg); }.team-grid { grid-template-columns:1fr; max-width:430px; } }
@media (max-width:480px) { body { background:var(--paper); }.dinner-scene { display:none; }.landing-page { padding-left:16px; padding-right:16px; background:var(--paper); }.hero { padding-top:20px; padding-bottom:65px; }.hero h1 { font-size:clamp(48px,14vw,64px); line-height:.9; }.hero-intro { font-size:15px; }.chat-window { width:100%; border-width:5px; border-radius:22px; transform:none; }.chat-body { min-height:355px; }.footer { align-items:flex-start; flex-direction:column; }.hero-cta { min-height:48px; justify-content:center; width:100%; } }
.hero-cta { min-height:52px; padding:15px 22px; border-radius:2px; }
.developer { min-height:72px; padding:17px; }
button,a { font-family:var(--font-ui); }