@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* ═══════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════ */
:root {
  --orange:        #F86822;
  --light-orange:  #FC997E;
  --glow:          #F9D7CD;
  --black:         #000000;
  --smooth-black:  #2E2D2D;
  --white:         #FFFFFF;
  --crystal:       #1770E5;
  --light-grey:    #E6E6E6;
  --grey:          #C2C3CC;
  --warm-grey:     #7C7572;
  --font:          'Inter', sans-serif;
  --ease-out:      cubic-bezier(0.16,1,0.3,1);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); background:var(--white); color:var(--black); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* ═══════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(0,0,0,0.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:28px; width:auto; }
.nav-links { display:flex; align-items:center; gap:8px; list-style:none; }
.nav-links a {
  font-size:13px; font-weight:400;
  color:rgba(255,255,255,0.45);
  padding:6px 14px; border-radius:100px;
  transition:all 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color:var(--white); background:rgba(255,255,255,0.07); }
.nav-cta {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700;
  color:var(--black); background:var(--orange);
  padding:9px 20px; border-radius:100px;
  transition:all 0.2s var(--ease-out);
}
.nav-cta:hover { background:var(--light-orange); transform:translateY(-1px); }
.nav-cta svg { width:13px; height:13px; }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */
.hero {
  min-height:100vh;
  background:var(--black);
  display:grid; grid-template-rows:1fr auto;
  padding-top:64px;
  position:relative; overflow:hidden;
}
.hero-noise {
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; opacity:0.6;
}
.hero::before {
  content:''; position:absolute;
  width:700px; height:700px;
  background:radial-gradient(ellipse at center, rgba(248,104,34,0.18) 0%, transparent 70%);
  top:-100px; right:-100px; pointer-events:none;
}
.hero::after {
  content:''; position:absolute;
  width:400px; height:400px;
  background:radial-gradient(ellipse at center, rgba(23,112,229,0.1) 0%, transparent 70%);
  bottom:100px; left:10%; pointer-events:none;
}
.hero-inner {
  display:flex; flex-direction:column; justify-content:center;
  padding:80px 48px 60px;
  max-width:1200px; margin:0 auto; width:100%;
  position:relative; z-index:1;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700;
  color:var(--orange);
  letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:32px;
}
.hero-eyebrow::before { content:''; width:24px; height:1px; background:var(--orange); }
.hero-h1 {
  font-size:clamp(56px,8vw,108px);
  font-weight:700; letter-spacing:-0.04em; line-height:0.95;
  color:var(--white); margin-bottom:40px;
}
.hero-h1 .line2 { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.25); }
.hero-h1 .accent { color:var(--orange); }
.hero-desc {
  font-size:18px; font-weight:400;
  color:rgba(255,255,255,0.45); line-height:1.7;
  max-width:520px; margin-bottom:52px;
}
.hero-stats { display:flex; gap:48px; padding-top:40px; border-top:1px solid rgba(255,255,255,0.07); }
.stat-val { font-size:28px; font-weight:700; color:var(--white); letter-spacing:-0.02em; }
.stat-val span { color:var(--orange); }
.stat-label { font-size:11px; font-weight:400; color:rgba(255,255,255,0.3); text-transform:uppercase; letter-spacing:0.1em; margin-top:2px; }
.hero-scroll-strip {
  padding:20px 48px; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; gap:32px;
  overflow:hidden; position:relative; z-index:1;
}
.scroll-label { font-size:10px; color:rgba(255,255,255,0.2); letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.scroll-track { display:flex; gap:32px; overflow:hidden; flex:1; }
.scroll-item { font-size:11px; font-weight:700; color:rgba(255,255,255,0.15); text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap; }
.scroll-item.hi { color:rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════
   SECTION SHELL
═══════════════════════════════════════════════ */
.section { padding:100px 48px; max-width:1200px; margin:0 auto; }
.sec-header { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:28px; border-bottom:1px solid var(--light-grey); margin-bottom:56px; }
.sec-tag { display:flex; flex-direction:column; gap:6px; }
.sec-num { font-size:11px; font-weight:700; color:var(--orange); letter-spacing:0.12em; }
.sec-title { font-size:36px; font-weight:700; letter-spacing:-0.03em; color:var(--black); line-height:1; }
.sec-count { font-size:11px; font-weight:400; color:var(--grey); letter-spacing:0.05em; }

/* ═══════════════════════════════════════════════
   BRAND TABS
═══════════════════════════════════════════════ */
.brand-tabs { display:flex; gap:4px; margin-bottom:40px; background:var(--light-grey); padding:4px; border-radius:12px; width:fit-content; }
.brand-tab {
  font-family:var(--font); font-size:13px; font-weight:700;
  color:var(--warm-grey); background:transparent;
  padding:8px 24px; border-radius:9px; border:none; cursor:pointer;
  transition:all 0.2s var(--ease-out);
}
.brand-tab.active { color:var(--black); background:var(--white); box-shadow:0 2px 8px rgba(0,0,0,0.12); }
.brand-tab:hover:not(.active) { color:var(--black); }
.logo-brand-panel { display:none; }
.logo-brand-panel.active { display:block; }

/* ═══════════════════════════════════════════════
   LOGO SUITE
═══════════════════════════════════════════════ */
#logos { background:#F7F7F5; padding:100px 0; }
#logos .section { padding-top:0; padding-bottom:0; }
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.logo-card { background:var(--white); display:flex; flex-direction:column; transition:all 0.3s var(--ease-out); position:relative; overflow:hidden; }
.logo-card:hover { z-index:2; box-shadow:0 20px 60px rgba(0,0,0,0.12); transform:translateY(-4px); }
.logo-preview { height:200px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.logo-preview.transparent {
  background-image:linear-gradient(45deg,#f0f0ee 25%,transparent 25%),linear-gradient(-45deg,#f0f0ee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0ee 75%),linear-gradient(-45deg,transparent 75%,#f0f0ee 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; background-color:#e8e8e8;
}
.logo-preview.bg-black { background:var(--black); }
.logo-preview.bg-orange { background:var(--orange); }
.logo-preview.bg-white { background:var(--white); border-bottom:1px solid var(--light-grey); }
.logo-preview.bg-surface { background:#F7F7F5; }
.logo-preview.bg-smooth { background:var(--smooth-black); }
.logo-preview img { max-height:72px; max-width:80%; object-fit:contain; transition:transform 0.3s var(--ease-out); }
.logo-card:hover .logo-preview img { transform:scale(1.04); }
.logo-ph { display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; }
.logo-ph-icon { width:48px; height:48px; border-radius:10px; border:1.5px dashed; display:flex; align-items:center; justify-content:center; opacity:0.4; }
.bg-black .logo-ph-icon { border-color:rgba(255,255,255,0.5); }
.bg-black .logo-ph-text { color:rgba(255,255,255,0.3); }
.bg-orange .logo-ph-icon { border-color:rgba(255,255,255,0.6); }
.bg-orange .logo-ph-text { color:rgba(255,255,255,0.5); }
.logo-ph-text { font-size:10px; color:var(--grey); letter-spacing:0.06em; text-align:center; }
.logo-meta { padding:20px 24px; border-top:1px solid var(--light-grey); display:flex; flex-direction:column; gap:14px; }
.logo-name { font-size:13px; font-weight:700; color:var(--black); letter-spacing:-0.01em; }
.logo-formats { display:flex; gap:6px; flex-wrap:wrap; }
.fmt-badge {
  font-size:10px; font-weight:700;
  padding:4px 9px; border-radius:4px;
  border:1px solid var(--light-grey);
  color:var(--warm-grey); background:#F7F7F5;
  letter-spacing:0.05em; cursor:pointer;
  transition:all 0.15s; text-decoration:none; display:inline-block;
}
.fmt-badge:hover { background:var(--orange); color:var(--white); border-color:var(--orange); }
.fmt-badge.svg:hover { background:var(--black); border-color:var(--black); color:var(--white); }

/* ═══════════════════════════════════════════════
   COLORS
═══════════════════════════════════════════════ */
#colors { background:var(--white); }
.color-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:16px; margin-bottom:32px; }
.color-grid-2 { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:60px; }
.color-card { border-radius:16px; overflow:hidden; border:1px solid var(--light-grey); transition:all 0.25s var(--ease-out); cursor:pointer; }
.color-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.1); }
.color-swatch { height:160px; position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:12px; }
.color-card:first-child .color-swatch { height:220px; }
.copy-chip { background:rgba(0,0,0,0.2); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.9); font-size:10px; padding:5px 10px; border-radius:6px; cursor:pointer; opacity:0; transition:opacity 0.2s; letter-spacing:0.06em; }
.copy-chip.dark-chip { background:rgba(255,255,255,0.2); color:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.1); }
.color-card:hover .copy-chip { opacity:1; }
.color-info { padding:16px 18px 18px; background:var(--white); }
.color-name { font-size:14px; font-weight:700; color:var(--black); margin-bottom:4px; letter-spacing:-0.01em; }
.color-role { font-size:11px; font-weight:400; color:var(--warm-grey); margin-bottom:10px; }
.color-vals { display:flex; flex-direction:column; gap:2px; }
.color-val { font-size:10px; color:var(--grey); letter-spacing:0.04em; }
.color-val strong { font-weight:700; color:var(--black); }
.pairings-label { font-size:18px; font-weight:700; letter-spacing:-0.02em; margin-bottom:20px; }
.pairings-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.pairing-chip { border-radius:12px; overflow:hidden; border:1px solid var(--light-grey); height:80px; display:flex; align-items:center; justify-content:center; position:relative; }
.pairing-chip span { font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.pairing-label { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:9px; font-weight:700; letter-spacing:0.06em; padding:6px; background:rgba(0,0,0,0.06); color:inherit; opacity:0.5; }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════ */
#typography { background:#F7F7F5; }
.type-showcase { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:48px; }
.type-face-card { background:var(--white); border:1px solid var(--light-grey); border-radius:16px; padding:36px; overflow:hidden; position:relative; }
.type-face-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.type-face-card.primary::after { background:var(--orange); }
.type-face-card.secondary::after { background:var(--crystal); }
.face-tag { font-size:10px; font-weight:700; color:var(--grey); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
.face-specimen { font-size:52px; font-weight:700; letter-spacing:-0.04em; line-height:1; color:var(--black); margin-bottom:6px; }
.face-specimen.regular { font-weight:400; font-size:40px; }
.face-abc { font-size:14px; font-weight:400; color:var(--warm-grey); margin-bottom:24px; letter-spacing:0.02em; }
.face-weights { border-top:1px solid var(--light-grey); padding-top:20px; display:flex; flex-direction:column; gap:8px; }
.weight-row { display:flex; justify-content:space-between; align-items:baseline; }
.weight-sample { font-size:15px; color:var(--black); }
.weight-meta { font-size:10px; color:var(--grey); }
.type-scale-table { background:var(--white); border:1px solid var(--light-grey); border-radius:16px; overflow:hidden; }
.scale-row { display:grid; grid-template-columns:80px 1fr 140px; align-items:center; padding:18px 28px; border-bottom:1px solid var(--light-grey); gap:24px; }
.scale-row:last-child { border-bottom:none; }
.scale-name { font-size:10px; font-weight:700; color:var(--grey); letter-spacing:0.06em; text-transform:uppercase; }
.scale-preview { color:var(--black); line-height:1.2; }
.scale-spec { font-size:10px; color:var(--grey); text-align:right; letter-spacing:0.04em; }

/* ═══════════════════════════════════════════════
   USAGE RULES
═══════════════════════════════════════════════ */
#usage { background:var(--white); }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rule-card { border-radius:14px; border:1px solid var(--light-grey); padding:28px 32px; position:relative; overflow:hidden; transition:all 0.2s var(--ease-out); }
.rule-card:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,0.07); }
.rule-card.do { background:var(--white); border-color:#86EFAC; }
.rule-card.dont { background:var(--white); border-color:#FECDD3; }
.rule-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.rule-card.do::before { background:#22C55E; }
.rule-card.dont::before { background:#F43F5E; }
.rule-tag { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:5px 12px; border-radius:100px; margin-bottom:16px; }
.rule-card.do .rule-tag { background:#F0FDF4; color:#16A34A; }
.rule-card.dont .rule-tag { background:#FFF1F2; color:#E11D48; }
.rule-title { font-size:16px; font-weight:700; color:var(--black); letter-spacing:-0.02em; margin-bottom:8px; }
.rule-desc { font-size:13px; font-weight:400; color:var(--warm-grey); line-height:1.65; }

/* ═══════════════════════════════════════════════
   DOWNLOAD CTA
═══════════════════════════════════════════════ */
#download { background:var(--black); padding:100px 0; }
#download .section { padding-top:0; padding-bottom:0; }
.dl-card { background:var(--smooth-black); border:1px solid rgba(255,255,255,0.07); border-radius:24px; padding:72px 64px; display:grid; grid-template-columns:1fr auto; gap:64px; align-items:center; position:relative; overflow:hidden; }
.dl-card::before { content:''; position:absolute; width:600px; height:600px; background:radial-gradient(ellipse,rgba(248,104,34,0.12) 0%,transparent 65%); top:-200px; right:-100px; pointer-events:none; }
.dl-eyebrow { font-size:10px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:16px; }
.dl-title { font-size:44px; font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:1.05; margin-bottom:16px; }
.dl-title em { color:var(--orange); font-style:normal; }
.dl-desc { font-size:15px; font-weight:400; color:rgba(255,255,255,0.4); line-height:1.7; max-width:440px; }
.dl-actions { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.btn-primary { display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:14px; font-weight:700; color:var(--black); background:var(--orange); padding:16px 32px; border-radius:100px; border:none; cursor:pointer; transition:all 0.2s var(--ease-out); white-space:nowrap; text-decoration:none; }
.btn-primary:hover { background:var(--light-orange); transform:translateY(-2px); }
.btn-primary svg { width:15px; height:15px; flex-shrink:0; }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font); font-size:13px; font-weight:700; color:rgba(255,255,255,0.5); background:transparent; padding:14px 32px; border-radius:100px; border:1px solid rgba(255,255,255,0.12); cursor:pointer; letter-spacing:-0.01em; transition:all 0.2s; white-space:nowrap; text-decoration:none; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.3); color:var(--white); }

/* ═══════════════════════════════════════════════
   FILE TREE
═══════════════════════════════════════════════ */
#assets { background:#F7F7F5; }
.file-tree { background:var(--black); border-radius:16px; padding:32px 36px; font-size:12px; line-height:1.9; color:rgba(255,255,255,0.4); overflow-x:auto; font-family:'Courier New',monospace; }
.tree-folder { color:rgba(255,200,100,0.8); }
.tree-file   { color:rgba(255,255,255,0.6); }
.tree-ext-svg  { color:#67E8F9; }
.tree-ext-png  { color:#A78BFA; }
.tree-ext-pdf  { color:#F87171; }
.tree-count  { color:rgba(255,255,255,0.2); }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer { background:var(--black); border-top:1px solid rgba(255,255,255,0.05); padding:32px 48px; display:flex; align-items:center; justify-content:space-between; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); }
.footer-name { font-size:14px; font-weight:700; color:var(--white); letter-spacing:-0.01em; }
.footer-right { font-size:11px; color:rgba(255,255,255,0.2); letter-spacing:0.05em; }

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
.toast { position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--black); border:1px solid rgba(255,255,255,0.1); color:var(--white); font-size:12px; font-weight:400; padding:13px 24px; border-radius:100px; z-index:1000; pointer-events:none; white-space:nowrap; transition:transform 0.4s var(--ease-out),opacity 0.4s; opacity:0; letter-spacing:0.04em; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast .t-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); margin-right:8px; vertical-align:middle; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.hero-inner > * { animation:fadeUp 0.7s var(--ease-out) both; }
.hero-eyebrow { animation-delay:0.1s; }
.hero-h1      { animation-delay:0.2s; }
.hero-desc    { animation-delay:0.32s; }
.hero-stats   { animation-delay:0.44s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .logo-grid { grid-template-columns:repeat(2,1fr); }
  .color-grid { grid-template-columns:1fr 1fr; }
  .color-grid-2 { grid-template-columns:repeat(3,1fr); }
  .type-showcase { grid-template-columns:1fr; }
  .dl-card { grid-template-columns:1fr; gap:40px; }
  .pairings-row { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px){
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hero-inner { padding:60px 20px 40px; }
  .hero-stats { gap:24px; flex-wrap:wrap; }
  .section { padding:60px 20px; }
  .logo-grid { grid-template-columns:1fr; }
  .color-grid { grid-template-columns:1fr; }
  .color-grid-2 { grid-template-columns:repeat(2,1fr); }
  .rules-grid { grid-template-columns:1fr; }
  .dl-card { padding:40px 28px; }
  .pairings-row { grid-template-columns:repeat(2,1fr); }
  footer { padding:24px 20px; flex-direction:column; gap:12px; text-align:center; }
}