
:root {
  --bg: #fffaf3;
  --surface: #ffffff;
  --ink: #171717;
  --muted: #6d6a66;
  --orange: #ff6b2c;
  --orange-dark: #e9561b;
  --yellow: #ffd166;
  --line: #ebe4da;
  --shadow: 0 18px 50px rgba(35, 25, 15, .10);
  --radius: 24px;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), calc(100% - 40px)); margin: auto; }
.site-header {
  position: sticky; top: 0; z-index: 20; background: rgba(255,250,243,.88);
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(235,228,218,.8);
}
.nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight: 950; letter-spacing:-.04em; font-size: 22px; }
.brand-mark { width: 38px; height:38px; background: var(--orange); border-radius: 11px; position:relative; transform: rotate(4deg); }
.brand-mark:before, .brand-mark:after { content:""; position:absolute; background:#171717; border-radius:50%; width:5px; height:5px; top:14px; }
.brand-mark:before { left:10px; } .brand-mark:after { right:10px; }
.nav-links { display:flex; align-items:center; gap: 26px; font-size:14px; font-weight:800; }
.nav-links a { color:#514e49; }
.nav-links a:hover, .nav-links a.active { color:var(--ink); }
.nav-cta { padding:11px 17px; border-radius:999px; background:var(--ink); color:#fff !important; }
.menu { display:none; background:none; border:0; font-size:25px; cursor:pointer; }
.hero { padding: 86px 0 72px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:70px; }
.kicker { color:var(--orange-dark); font-size:13px; font-weight:950; text-transform:uppercase; letter-spacing:.13em; }
h1,h2,h3 { line-height:1.05; letter-spacing:-.045em; margin:0 0 20px; }
h1 { font-size:clamp(50px, 7vw, 86px); max-width:700px; }
h2 { font-size:clamp(36px, 5vw, 58px); }
h3 { font-size:25px; }
.lead { font-size:19px; color:var(--muted); max-width:650px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 21px; border-radius:14px; font-weight:900; border:1px solid var(--ink); }
.btn-primary { background:var(--orange); border-color:var(--orange); }
.btn-primary:hover { background:var(--orange-dark); }
.btn-secondary { background:var(--surface); }
.hero-art {
  min-height:440px; border-radius:40px; background:#191919; position:relative; overflow:hidden;
  box-shadow:var(--shadow); display:grid; place-items:center;
}
.hero-art:before { content:""; width:320px; height:320px; border-radius:42px; background:var(--orange); transform:rotate(14deg); position:absolute; }
.cat-face { width:230px; height:230px; background:#fff; border-radius:48px; position:relative; z-index:1; transform:rotate(-4deg); box-shadow:12px 16px 0 rgba(0,0,0,.15); }
.cat-face:before,.cat-face:after { content:""; position:absolute; width:48px; height:48px; background:#fff; top:-25px; transform:rotate(45deg); }
.cat-face:before { left:25px; } .cat-face:after { right:25px; }
.eye { width:18px; height:18px; background:#171717; border-radius:50%; position:absolute; top:88px; }
.eye.left { left:62px; } .eye.right { right:62px; }
.nose { width:15px; height:12px; background:var(--orange); border-radius:50% 50% 45% 45%; position:absolute; top:125px; left:108px; }
.mouth { width:44px; height:24px; border-bottom:4px solid #171717; border-radius:0 0 50% 50%; position:absolute; top:127px; left:93px; }
.whisker { position:absolute; width:58px; height:2px; background:#171717; top:130px; }
.w1{left:8px;transform:rotate(10deg)} .w2{left:5px;top:148px;transform:rotate(-7deg)} .w3{right:8px;transform:rotate(-10deg)} .w4{right:5px;top:148px;transform:rotate(7deg)}
.float { position:absolute; z-index:3; background:#fff; border:2px solid #171717; border-radius:14px; padding:10px 13px; font-weight:950; box-shadow:6px 7px 0 #171717; }
.float.one{top:42px;left:35px;transform:rotate(-8deg)} .float.two{bottom:38px;right:30px;transform:rotate(7deg)}
.section { padding:92px 0; }
.section.alt { background:#171717; color:#fff; }
.section-head { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:38px; }
.section-head p { max-width:530px; color:var(--muted); }
.alt .section-head p { color:#b7b2ac; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 7px 25px rgba(35,25,15,.04); }
.card.dark { background:#242424; border-color:#383838; }
.icon { width:48px;height:48px;border-radius:14px;background:var(--orange);display:grid;place-items:center;font-size:23px;margin-bottom:22px; }
.card p { color:var(--muted); margin-bottom:0; }
.dark p { color:#aaa59f; }
.cat-card { padding:0; overflow:hidden; }
.cat-art { height:230px; background:#eee4d7; display:grid; place-items:center; position:relative; }
.cat-art .mini-cat { width:130px;height:130px;border-radius:30px;background:#fff;position:relative;transform:rotate(-5deg); }
.cat-art .mini-cat:before,.cat-art .mini-cat:after{content:"";position:absolute;background:#fff;width:30px;height:30px;top:-15px;transform:rotate(45deg)}
.cat-art .mini-cat:before{left:15px}.cat-art .mini-cat:after{right:15px}
.cat-info { padding:22px; }
.tag { display:inline-block; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.1em; background:#f1ece5; padding:6px 9px; border-radius:999px; margin-bottom:12px; }
.cat-info p { margin:0; }
.feature-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.feature-item { display:flex; gap:16px; padding:22px; border:1px solid #373737; border-radius:18px; background:#202020; }
.feature-item strong { display:block; margin-bottom:4px; }
.feature-item p { margin:0; font-size:14px; color:#aaa59f; }
.page-hero { padding:80px 0 50px; background:#191919; color:#fff; }
.page-hero p { color:#aaa59f; max-width:650px; font-size:18px; }
.breadcrumb { font-size:13px; color:#8e8982; margin-bottom:20px; }
.news-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:18px; }
.news-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:25px; min-height:210px; }
.news-card:first-child { background:var(--orange); border-color:var(--orange); }
.news-date { font-size:12px; font-weight:900; color:#8a847c; text-transform:uppercase; letter-spacing:.08em; }
.news-card:first-child .news-date { color:#6f2b12; }
.faq { border-top:1px solid var(--line); }
details { padding:22px 0; border-bottom:1px solid var(--line); }
summary { cursor:pointer; font-weight:900; font-size:18px; }
details p { color:var(--muted); max-width:800px; margin-bottom:0; padding-top:12px; }
.about-box { background:var(--orange); border-radius:32px; padding:55px; display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.footer { background:#111; color:#fff; padding:55px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:35px; }
.footer h4 { margin:0 0 14px; }
.footer a { color:#aaa59f; display:block; margin:8px 0; font-size:14px; }
.footer p { color:#8f8a84; font-size:14px; }
.footer-bottom { border-top:1px solid #2d2d2d; margin-top:35px; padding-top:20px; color:#777; font-size:12px; display:flex;justify-content:space-between; }
.notice { background:#fff0e8; border:1px solid #ffd0b8; border-radius:18px; padding:18px 20px; color:#7d3417; }
@media(max-width:850px){
  .nav-links { display:none; position:absolute; top:76px;left:0;right:0;background:var(--bg);padding:20px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line); }
  .nav-links.open { display:flex; } .menu{display:block}
  .hero-grid,.about-box { grid-template-columns:1fr; } .hero { padding-top:55px; }
  .hero-art { min-height:340px; } .cat-face { width:180px;height:180px; } .cat-face:before,.cat-face:after{width:38px;height:38px}
  .eye{top:68px}.eye.left{left:48px}.eye.right{right:48px}.nose{top:100px;left:83px}.mouth{top:102px;left:68px}.whisker{top:105px}
  .grid-3,.grid-4,.news-grid { grid-template-columns:1fr 1fr; } .feature-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .container{width:min(var(--max),calc(100% - 28px));} h1{font-size:47px}.section{padding:68px 0}
  .grid-3,.grid-4,.news-grid,.footer-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:15px}
  .about-box{padding:32px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
}
