:root{--gold:#C9A84C;--black:#0D0D0D;--white:#FFFFFF;--panel:#151515;--line:#2A2A2A;--muted:#B9B9B9}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:Poppins,Arial,sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;min-height:68px;padding:10px 4vw;background:rgba(10,10,10,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,168,76,.28)}
.brand-mark{width:88px;height:40px;display:flex;align-items:center;margin-right:auto}.brand-mark img{width:100%;height:100%;object-fit:contain}
nav{display:flex;align-items:center;gap:23px;font-size:12px;color:#d4d4d4}nav a{padding:7px 0;border-bottom:1px solid transparent}nav a:hover{color:#fff;border-color:var(--gold)}
.nav-download{padding:10px 16px;border-radius:7px;background:var(--gold);color:#111;font-size:12px;font-weight:700}
.hero{min-height:610px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;padding:76px 5vw;border-bottom:1px solid rgba(201,168,76,.3);overflow:hidden;background:radial-gradient(circle at 78% 32%,rgba(201,168,76,.16),transparent 26%),linear-gradient(135deg,#0b0b0b,#12100d 48%,#090909)}
.hero-copy{max-width:760px}.kicker,.section-index small,.type-label,.clearspace-copy>span,.minimum-size>span{color:var(--gold);font-size:11px;letter-spacing:.18em;font-weight:600}
.hero h1{font-size:clamp(38px,4.6vw,72px);line-height:1.05;letter-spacing:-.035em;margin:18px 0 20px;max-width:800px}.hero h1 em{color:var(--gold);font-style:normal}.hero p{font-size:16px;line-height:1.75;color:#c7c7c7;max-width:700px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid rgba(201,168,76,.45)}.btn.primary{background:var(--gold);color:#111}.btn.secondary{background:rgba(255,255,255,.02)}
.hero-brand{position:relative;min-height:360px;display:grid;place-items:center}.hero-brand img{position:relative;z-index:2;width:min(95%,650px);max-height:330px;object-fit:contain}.hero-glow{position:absolute;width:480px;height:480px;background:radial-gradient(circle,rgba(201,168,76,.22),transparent 67%);filter:blur(8px)}
.section{display:grid;grid-template-columns:220px minmax(0,1fr);gap:52px;padding:72px 4vw;border-bottom:1px solid rgba(255,255,255,.07)}.section-index>span{display:block;color:var(--gold);font-size:19px;margin-bottom:3px}.section-index h2{font-size:29px;line-height:1.16;margin:7px 0 14px}.section-index p{color:#b8b8b8;font-size:13px;line-height:1.75;margin:0}
.intro{align-items:center}.brand-manifesto{padding:38px;border:1px solid rgba(201,168,76,.35);border-radius:14px;background:linear-gradient(135deg,#151515,#101010)}.brand-manifesto>span{color:var(--gold);font-size:11px;letter-spacing:.16em}.brand-manifesto strong{display:block;font-size:clamp(28px,3.8vw,52px);line-height:1.18;margin-top:14px;max-width:960px}.traits{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.traits i{font-style:normal;border:1px solid #303030;background:#121212;border-radius:999px;padding:8px 12px;color:#d4d4d4;font-size:12px}
.logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.logo-card{background:transparent;min-width:0}.logo-stage{height:240px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}.logo-stage.dark{background:#050505}.logo-stage.light{background:#f5f5f2}.logo-stage img{width:82%;height:82%;object-fit:contain;object-position:center}.logo-copy{padding:14px 5px 0}.logo-copy h3{font-size:14px;margin:0 0 7px}.logo-copy p{font-size:12px;color:#aaa;line-height:1.65;margin:0}
.clearspace-panel{margin-top:34px;display:grid;grid-template-columns:1fr 1.35fr .75fr;gap:26px;align-items:center;padding:28px;border-radius:12px;border:1px solid #373737;background:linear-gradient(135deg,#151515,#101010)}.clearspace-copy h3{font-size:22px;margin:9px 0 12px}.clearspace-copy p{font-size:12px;line-height:1.75;color:#bbb;margin:0}
.clearspace-diagram{position:relative;aspect-ratio:1.9/1;border:1px dashed rgba(201,168,76,.65);display:grid;place-items:center;padding:13%;background:linear-gradient(to right,transparent 24.7%,rgba(201,168,76,.2) 25%,transparent 25.3%,transparent 74.7%,rgba(201,168,76,.2) 75%,transparent 75.3%),linear-gradient(to bottom,transparent 24.7%,rgba(201,168,76,.2) 25%,transparent 25.3%,transparent 74.7%,rgba(201,168,76,.2) 75%,transparent 75.3%)}.safe-area{width:100%;height:100%;border:1px dashed rgba(201,168,76,.55);display:grid;place-items:center;padding:8%}.safe-area img{width:88%;height:88%;object-fit:contain}.t{position:absolute;color:var(--gold);font-weight:700;font-size:17px}.t.top{top:3%;left:50%;transform:translateX(-50%)}.t.bottom{bottom:2%;left:50%;transform:translateX(-50%)}.t.left{left:3%;top:50%;transform:translateY(-50%)}.t.right{right:3%;top:50%;transform:translateY(-50%)}
.minimum-size{display:grid;gap:14px}.size-item{display:flex;align-items:center;gap:11px;border-top:1px solid #303030;padding-top:13px}.size-item b{font-size:26px;color:var(--gold);font-weight:400}.size-item strong{display:block;font-size:12px}.size-item small{display:block;color:#aaa;font-size:11px;margin-top:2px}
.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.color-card{height:260px;border-radius:12px;border:1px solid var(--line);padding:22px;text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end}.color-card span{font-size:13px;font-weight:600}.color-card b{font-size:28px;margin:6px 0}.color-card small{font-size:10px;opacity:.7}.color-card.gold{background:#C9A84C;color:#111}.color-card.black{background:#050505;color:white}.color-card.white{background:#fff;color:#111}
.type-layout{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;border:1px solid #2d2d2d;border-radius:12px;overflow:hidden;background:#111}.type-layout>article{padding:29px 32px;min-width:0}.type-layout>article+article{border-left:1px solid #2d2d2d}.type-primary h3{font-size:42px;margin:9px 0 7px}.type-primary>p,.type-secondary>p{color:#b8b8b8;font-size:12px;line-height:1.7}.weight-list{margin-top:22px;display:grid;gap:9px}.weight-list div{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#d8d8d8}.weight-list b{font-size:24px}.w300{font-weight:300}.w400{font-weight:400}.w500{font-weight:500}.w600{font-weight:600}.w700{font-weight:700}.type-use dl{margin:22px 0 0}.type-use dl div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #252525;padding:11px 0}.type-use dt{font-size:12px;font-weight:600}.type-use dd{margin:0;color:#aaa;font-size:12px;text-align:right}.sans-demo{font-family:Arial,Helvetica,sans-serif;font-size:58px;margin:16px 0 5px}.sans-text{font-family:Arial,Helvetica,sans-serif}.support-uses{margin-top:22px;padding-top:18px;border-top:1px solid #2b2b2b}.support-uses strong{font-size:12px;color:var(--gold)}
.application-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.application-card{background:#151515;border:1px solid #282828;border-radius:12px;overflow:hidden;min-width:0}.application-image{aspect-ratio:1.35/1;background:#080808;overflow:hidden}.application-image img{width:100%;height:100%;object-fit:cover}.application-copy{padding:18px 18px 20px;min-height:138px}.application-copy h3{font-size:14px;margin:0 0 8px;color:var(--gold)}.application-copy p{font-size:12px;color:#b6b6b6;line-height:1.6;margin:0}
.usage-groups{min-width:0}.usage-group+.usage-group{margin-top:24px;padding-top:20px;border-top:1px solid #2b2b2b}.usage-heading{font-size:11px;letter-spacing:.12em;margin-bottom:10px}.usage-heading.correct{color:#4fc47d}.usage-heading.wrong{color:#ff645d}.usage-row{display:grid;gap:14px}.correct-row{grid-template-columns:repeat(3,minmax(0,1fr))}.wrong-row{grid-template-columns:repeat(5,minmax(0,1fr))}.usage-card{background:#151515;border:1px solid #292929;border-radius:11px;overflow:hidden;min-width:0}.usage-visual{height:150px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px}.usage-visual.dark-bg{background:#050505}.usage-visual.light-bg{background:#f4f4f1}.usage-visual img{width:78%;height:78%;object-fit:contain}.usage-card h3{font-size:12px;margin:14px 16px 5px}.usage-card p{font-size:11px;color:#aaa;line-height:1.55;margin:0 16px 17px}.spacing-example{background:#070707;border:1px dashed rgba(201,168,76,.5)}.spacing-example img{width:62%;height:62%}.mini-t{position:absolute;color:var(--gold);font-size:12px;font-weight:700}.mt{top:7px;left:50%}.mb{bottom:7px;left:50%}.ml{left:8px;top:47%}.mr{right:8px;top:47%}.distort img{transform:scaleX(1.28) scaleY(.72)}.rotate img{transform:rotate(-11deg) scale(.86)}.shadow img{filter:drop-shadow(0 0 9px white) drop-shadow(8px 8px 5px rgba(201,168,76,.9))}.recolor img{filter:sepia(1) saturate(9) hue-rotate(320deg) brightness(.85)}.photo-low{background:linear-gradient(135deg,#3d3124,#6e5b46 50%,#2b261f)}.photo-low:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 17px)}.photo-low img{position:relative;opacity:.45;filter:saturate(.7)}
.library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.library-card{background:#151515;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;min-width:0}.library-preview{height:230px;background:#090909;padding:18px}.logo-pack{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-logo{border-radius:6px;display:grid;place-items:center;padding:12px;overflow:hidden}.mini-logo.dark{background:#050505}.mini-logo.light{background:#f4f4f2}.mini-logo img{width:86%;height:86%;object-fit:contain}.kit-pack{display:flex;align-items:flex-end;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 45%,#28231b,#090909 58%)}.kit-file{display:grid;place-items:center;border-radius:8px;box-shadow:0 12px 25px rgba(0,0,0,.38)}.kit-file img{width:76%;height:76%;object-fit:contain}.kit-file.tall{width:86px;height:165px;background:#f4f4f1}.kit-file.bottle{width:74px;height:135px;background:#151515;border:1px solid #3a3a3a}.kit-file.square{width:115px;height:115px;background:#f4f4f1}.template-pack{padding:0}.template-pack img{width:100%;height:100%;object-fit:cover}.library-copy{padding:18px 19px 21px}.library-copy>span{font-size:10px;color:var(--gold);letter-spacing:.14em}.library-copy h3{font-size:15px;margin:5px 0 8px}.library-copy p{font-size:11px;color:#aaa;line-height:1.55;min-height:52px;margin:0 0 16px}.library-actions{display:flex;align-items:center;justify-content:space-between;gap:15px}.library-actions a{padding:9px 12px;background:var(--gold);color:#111;border-radius:6px;font-size:11px;font-weight:700}.library-actions small{font-size:10px;color:#8f8f8f}
footer{display:grid;grid-template-columns:180px 1fr 1fr auto;gap:40px;align-items:center;padding:28px 4vw;border-top:1px solid rgba(201,168,76,.45);color:#bababa}footer img{width:120px;height:62px;object-fit:contain}footer p{font-size:12px;line-height:1.55;margin:0}footer small{color:#777}.version{text-align:right}
#toast{position:fixed;right:24px;bottom:24px;background:#fff;color:#111;padding:11px 15px;border-radius:8px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:80}#toast.show{opacity:1;transform:none}
@media(max-width:1180px){nav{gap:14px}.section{grid-template-columns:180px minmax(0,1fr);gap:35px}.logo-grid{grid-template-columns:repeat(2,1fr)}.application-grid{grid-template-columns:repeat(2,1fr)}.wrong-row{grid-template-columns:repeat(3,1fr)}.clearspace-panel{grid-template-columns:1fr 1fr}.minimum-size{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){nav{display:none}.nav-download{margin-left:auto}.hero{grid-template-columns:1fr;min-height:auto}.hero-brand{min-height:280px}.section{grid-template-columns:1fr}.section-index{max-width:700px}.type-layout{grid-template-columns:1fr}.type-layout>article+article{border-left:0;border-top:1px solid #2d2d2d}.correct-row,.wrong-row{grid-template-columns:repeat(2,1fr)}.library-grid{grid-template-columns:1fr}.library-preview{height:260px}footer{grid-template-columns:1fr 1fr}.version{text-align:left}}
@media(max-width:620px){.topbar{padding:10px 5vw}.nav-download{display:none}.hero{padding:58px 5vw}.hero-brand{min-height:220px}.section{padding:56px 5vw}.logo-grid,.application-grid,.correct-row,.wrong-row,.color-grid{grid-template-columns:1fr}.logo-stage{height:220px}.clearspace-panel{grid-template-columns:1fr}.minimum-size{grid-template-columns:1fr}.clearspace-diagram{aspect-ratio:1.55/1}.library-preview{height:220px}.type-layout>article{padding:24px}.hero h1{font-size:40px}footer{grid-template-columns:1fr;gap:18px}}