:root{--bg:#0b0a0a;--panel:#171313;--ink:#f2eee8;--muted:#a9a19d;--accent:#ff5538;--gold:#e7ded1}
body{background:var(--bg);background-image:radial-gradient(#ffffff08 .6px,transparent .6px);background-size:5px 5px}
.site-header{background:#0b0a0aee;border-color:#e5d6ca24}
.brand-mark{background:var(--accent);color:#100a09;transform:skew(-10deg) rotate(-2deg)}
.brand-name{letter-spacing:3px}
.brand-name small{color:#b4aaa1}
.site-header nav a{color:#c1b5ac}
.nav-shop{border-color:var(--accent);color:var(--accent)}
.nav-shop:hover{color:#120b09}
.hero{background:radial-gradient(circle at 75% 42%,#4a1f18 0,#1c1110 32%,#0b0a0a 68%)}
.hero:before{content:'BØNES';position:absolute;right:-2%;top:0;font:800 clamp(150px,24vw,430px)/1 'Barlow Condensed',sans-serif;color:transparent;-webkit-text-stroke:1px #f6eee714;letter-spacing:-.06em;pointer-events:none;transform:rotate(-7deg)}
.hero-grid{opacity:.27;background-image:repeating-linear-gradient(135deg,transparent 0 7px,#ffffff08 8px 9px);background-size:auto;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-glow{border-color:#ff55384a;box-shadow:0 0 0 95px #ff553809,0 0 0 190px #ff553806;transform:rotate(25deg) scaleX(.8)}
.hero h1{letter-spacing:-2.7px;text-shadow:5px 5px 0 #0008}
.hero h1 em{color:var(--accent)}
.hero-copy>p{color:#c3b8b1}
.pulse{box-shadow:0 0 0 6px #ff553825}
.button.primary{color:#130a08;box-shadow:6px 6px 0 #ff553838}
.button.secondary{border-color:#84726a}
.hero-note{color:#b7a8a0}
.art-frame{border-color:#ff5538a0;background:#130e0d;box-shadow:16px 17px 0 #0008,0 0 55px #ff553823;clip-path:polygon(0 0,95% 0,100% 5%,100% 100%,5% 100%,0 95%)}
.frame-top{color:#d2aaa0;border-color:#ff55384d}
.frame-dots i{border-color:var(--accent)}
.art-content{background:radial-gradient(circle at 76% 68%,#803426 0,transparent 32%),repeating-linear-gradient(0deg,transparent,transparent 28px,#ff55380c 29px),linear-gradient(135deg,#321711,#100c0b)}
.art-kicker{color:#e0afa1}
.art-heading span{color:var(--accent)}
.art-bars b{background:var(--accent)}
.art-circle{border-color:#ff6345;color:#ff6345;box-shadow:0 0 35px #ff553844,inset 0 0 30px #ff553822;border-radius:6px;transform:rotate(-13deg) skew(-7deg)}
.art-footer{color:#d4b1a6}
.floating-label{background:#f0e8dc;color:#1c1310;transform:rotate(-5deg);box-shadow:8px 8px 0 #ff553877}
.diamond{color:var(--accent)}
.ticker{color:#160b08}
.section h2 span{color:var(--accent)}
.card{background:#181311;border-color:#4b312b;box-shadow:7px 7px 0 #0008}
.card:hover{border-color:var(--accent);transform:translate(-3px,-9px);box-shadow:10px 13px 0 #ff553830}
.card-top{color:#d4b6ab}
.card-copy p{color:#bbaaa2}
.phone-visual{background:radial-gradient(circle,#843828,#201311 66%)}
.phone-orb{background:radial-gradient(circle at 30% 20%,#ffac86,#c04428 60%,#2b120c);box-shadow:0 0 30px #ff553880}
.phone-apps i{background:#b7605199}
.pet-visual{background:radial-gradient(circle at 50% 70%,#78664a,#29201a 49%,#17110e)}
.pet-halo{border-color:#eab17880}
.fish-visual{background:linear-gradient(#44251c,#110f0d)}
.water{border-color:#ff735b55}
.fish-icon{color:#ff8a5e;text-shadow:0 0 50px #ff5538}
.ripple{border-color:#ff8a5e66}
.manifesto{background:#1b1412;border-color:#5a3027}
.manifesto-grid p:not(.kicker){color:#c6b6ad}
.manifesto-bottom{color:#b79a8e}
.cta-box{background:linear-gradient(110deg,#a43624,#57221b 68%,#211311);border-color:#ff745a;clip-path:polygon(0 0,97% 0,100% 8%,100% 100%,3% 100%,0 92%)}
.cta .kicker{color:#ffe5d4}
.cta h2 span{color:#fff0dd}
.cta-box>p:not(.kicker){color:#f4d5c8}
.cta-orbit{border-color:#ffb29455;box-shadow:0 0 0 72px #ffc5aa0b,0 0 0 144px #ffc5aa08}
.button.light{background:#f1e8da;color:#2b110d}
.button.outline{border-color:#f1d5c9;color:#fff2e9}
@media(max-width:760px){.site-header nav{background:#17100e}.hero:before{font-size:42vw;top:25%}.hero h1{letter-spacing:-1.5px}.art-content{padding:35px 25px}.art-bars{left:25px}.art-footer{left:25px;right:25px}}
@media(max-width:420px){.hero h1{font-size:clamp(55px,14vw,61px)}.art-heading{font-size:40px}.floating-label{font-size:8px;padding:12px}}
.logo-frame{position:relative;padding:18px;background:#0b0a0a;border:1px solid #ff5538a0;box-shadow:16px 17px 0 #0008,0 0 55px #ff553823;clip-path:polygon(0 0,95% 0,100% 5%,100% 100%,5% 100%,0 95%)}
.logo-frame:before{content:'';position:absolute;inset:12px;border:1px solid #f2eee829;pointer-events:none}
.logo-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.logo-frame-top,.logo-frame-bottom{display:flex;justify-content:space-between;gap:12px;padding:5px 6px;font:700 10px 'DM Sans',sans-serif;letter-spacing:1.4px;color:#e4d7cf}
.logo-frame-top{color:var(--accent)}
.logo-frame-bottom{font-size:9px}
@media(max-width:420px){.logo-frame-top,.logo-frame-bottom{font-size:7px;letter-spacing:.8px}}
.docs-callout{display:flex;align-items:end;justify-content:space-between;gap:40px;padding:65px 0 75px;border-top:1px solid #ff553844}.docs-callout h2{font:800 clamp(50px,6vw,82px)/.9 'Barlow Condensed',sans-serif;letter-spacing:-1px;margin:18px 0}.docs-callout h2 span{color:var(--accent)}.docs-callout p:not(.kicker){color:#b9aaa2;max-width:560px;line-height:1.65}.docs-callout .button{white-space:nowrap;margin-bottom:8px}@media(max-width:760px){.docs-callout{display:block;padding:50px 0 60px}.docs-callout .button{margin-top:20px}}