:root{
  --bg:#f5f1ea;
  --surface:#fffdfa;
  --panel:#ebe3d5;
  --text:#121212;
  --muted:#5c5c59;
  --line:#d7cec1;
  --accent:#c7491d;
  --accent-dark:#8f2f11;
  --ink:#1f1f1f;
  --footer:#171717;
  --footer-text:#ece7de;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(245,241,234,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(10px);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:16px; font-weight:800; letter-spacing:-.03em; font-size:1.65rem}
.brand-mark{
  width:54px; height:54px; border:2px solid var(--text); background:var(--surface);
  display:grid; place-items:center;
}
.brand-mark::before{
  content:""; width:24px; height:24px; border:2px solid var(--text);
  transform:rotate(45deg);
}
.desktop-nav{display:flex; align-items:center; gap:28px}
.desktop-nav a{
  font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  padding:8px 0; position:relative;
}
.desktop-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:.25s ease;
}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}
.header-cta,.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 22px; border:2px solid var(--text); background:var(--text); color:#fff;
  text-transform:uppercase; letter-spacing:.08em; font-weight:800;
}
.button.alt{background:transparent;color:var(--text)}
.button.accent{background:var(--accent); border-color:var(--accent); color:white}
.menu-toggle{
  display:none; width:52px; height:52px; border:2px solid var(--text);
  background:var(--surface); align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--text); position:relative;
}
.menu-toggle span::before{position:absolute; top:-7px}
.menu-toggle span::after{position:absolute; top:7px}
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:.25s ease; z-index:79;
}
.mobile-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(84vw,360px); background:var(--surface);
  border-left:1px solid var(--line); transform:translateX(100%); transition:.3s ease;
  z-index:80; display:flex; flex-direction:column; padding:22px;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-backdrop.open{opacity:1; visibility:visible}
.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}
.drawer-title{font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.9rem}
.drawer-close{
  width:46px; height:46px; border:2px solid var(--text); background:transparent; cursor:pointer; position:relative;
}
.drawer-close::before,.drawer-close::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background:var(--text);
}
.drawer-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.drawer-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-links{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.mobile-links a{
  padding:18px 0; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.08em; font-weight:800;
}
.mobile-links .header-cta{margin-top:20px; width:100%}
.hero{
  max-width:var(--max); margin:0 auto; padding:72px 24px 48px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start;
}
.kicker{
  display:inline-block; margin-bottom:18px; padding:8px 12px; border:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:.78rem; background:var(--surface);
}
h1,h2,h3{letter-spacing:-.04em; line-height:1.05; margin:0 0 16px}
h1{font-size:clamp(3rem,7vw,6rem)}
h2{font-size:clamp(2.2rem,4vw,3.6rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem)}
.hero p,.lead{font-size:1.14rem; color:var(--muted); max-width:760px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.hero-card{
  background:var(--surface); border:1px solid var(--line);
}
.hero-card img{width:100%; height:540px; object-fit:cover}
.hero-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);
}
.hero-meta div{padding:16px; border-right:1px solid var(--line)}
.hero-meta div:last-child{border-right:none}
.hero-meta strong{display:block; font-size:1.2rem}
.hero-meta span{color:var(--muted); font-size:.92rem}
.section{
  max-width:var(--max); margin:0 auto; padding:30px 24px 82px;
}
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;
}
.editorial-block{
  padding:34px; background:var(--surface); border:1px solid var(--line);
}
.editorial-block.dark{
  background:var(--ink); color:white; border-color:var(--ink);
}
.editorial-block.dark p,.editorial-block.dark .muted{color:rgba(255,255,255,.76)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.card{
  background:var(--surface); border:1px solid var(--line);
}
.card img{width:100%; height:250px; object-fit:cover}
.card-body{padding:24px}
.card p,.muted{color:var(--muted)}
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--surface);
}
.stat-strip .item{padding:24px; border-right:1px solid var(--line)}
.stat-strip .item:last-child{border-right:none}
.stat-strip strong{display:block; font-size:2rem; margin-bottom:6px}
.feature-list{display:grid; gap:18px}
.feature{
  padding:22px 0; border-bottom:1px solid var(--line);
}
.feature:first-child{border-top:1px solid var(--line)}
.page-hero{
  max-width:var(--max); margin:0 auto; padding:66px 24px 22px;
}
.page-hero p{max-width:760px; color:var(--muted); font-size:1.08rem}
.wide-image{
  max-width:var(--max); margin:0 auto; padding:0 24px;
}
.wide-image img{width:100%; height:470px; object-fit:cover; border:1px solid var(--line)}
.contact-panel{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:24px;
}
.demo-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.demo-card{
  background:var(--surface); border:1px solid var(--line); padding:20px;
}
.demo-card canvas{
  width:100%; height:auto; display:block; background:#121212; border:1px solid #2a2a2a;
}
.demo-top{
  display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:14px;
}
.demo-top p,.demo-note,.demo-score{color:var(--muted)}
.demo-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.mini-button{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 14px;
  border:1px solid var(--text); background:transparent; color:var(--text); text-transform:uppercase; letter-spacing:.08em; font-weight:800; cursor:pointer;
}
.memory-board{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px;
}
.memory-tile{
  aspect-ratio:1 / 1; border:1px solid var(--line); background:var(--panel); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; cursor:pointer; user-select:none; transition:transform .18s ease, background .18s ease;
}
.memory-tile.revealed,.memory-tile.matched{background:var(--surface); transform:translateY(-2px)}
.demo-cta{
  margin-top:30px;
}
.contact-list{display:grid; gap:18px}
.contact-list div{padding-bottom:18px; border-bottom:1px solid var(--line)}
form{display:grid; gap:14px}
input, textarea{
  width:100%; min-height:56px; border:1px solid var(--line); background:var(--surface); padding:16px; font:inherit; color:var(--text);
}
textarea{min-height:170px; resize:vertical}
.site-footer{
  margin-top:40px; background:var(--footer); color:var(--footer-text); border-top:1px solid #2a2a2a;
}
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:40px 24px 28px;
}
.footer-grid{
  display:grid; grid-template-columns:1.1fr .8fr .8fr; gap:30px; padding-bottom:30px; border-bottom:1px solid #2a2a2a;
}
.footer-links{display:grid; gap:12px}
.footer-links a{color:#d8d1c6}
.footer-note{padding-top:22px; color:#c8c1b6}
@media (max-width: 980px){
  .desktop-nav,.desktop-cta{display:none}
  .menu-toggle{display:flex}
  .hero,.split,.grid-3,.grid-2,.contact-panel,.footer-grid,.demo-grid{grid-template-columns:1fr}
  .hero-card img{height:360px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .brand{font-size:1.25rem}
  .brand-mark{width:46px;height:46px}
  .hero{padding-top:48px}
  .hero-meta,.stat-strip{grid-template-columns:1fr}
  .hero-meta div,.stat-strip .item{border-right:none; border-bottom:1px solid var(--line)}
  .hero-meta div:last-child,.stat-strip .item:last-child{border-bottom:none}
}