/* =========================================================
   Dosya — brandbook.css
   Aanvullende stijlen bovenop styles.css voor de merkgids
   ========================================================= */

.bb-hero{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + 90px) 0 80px;
}
.bb-hero .hero-bg{position:absolute;inset:0;z-index:0}
.bb-hero .container{position:relative;z-index:1}
.bb-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:7px 15px;border-radius:999px;margin-bottom:22px}
.bb-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:18px}
.bb-hero p{color:var(--txt-soft);font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:620px}
.bb-meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.bb-meta div{font-size:.9rem;color:var(--txt-mute)}
.bb-meta strong{display:block;color:var(--txt);font-family:'Plus Jakarta Sans';font-size:1.05rem;margin-top:2px}

/* section heading aligned left for docs */
.bb-head{max-width:760px;margin:0 0 44px}
.bb-head .num{font-family:'Plus Jakarta Sans';font-weight:800;font-size:.9rem;color:var(--cyan);letter-spacing:.1em}
.bb-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin:10px 0 14px}
.bb-head p{color:var(--txt-soft);font-size:1.06rem}

.bb-section{padding:clamp(60px,8vw,100px) 0;border-top:1px solid var(--line)}
.bb-section:nth-of-type(even){background:var(--ink-2)}

.bb-subhead{font-family:'Plus Jakarta Sans';font-weight:700;font-size:1.15rem;margin:40px 0 18px;display:flex;align-items:center;gap:10px}
.bb-subhead::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--grad)}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .3s var(--ease),border-color .3s}
.value:hover{transform:translateY(-5px);border-color:rgba(79,124,255,.4)}
.value .vi{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px}
.value h3{font-size:1.12rem;margin-bottom:7px}
.value p{color:var(--txt-soft);font-size:.93rem}

/* ---------- logo tiles ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.logo-tile{border:1px solid var(--line);border-radius:var(--radius);padding:46px 30px;display:flex;align-items:center;justify-content:center;min-height:180px;position:relative}
.logo-tile.dark{background:#0b1020;}
.logo-tile.light{background:#f5f7ff}
.logo-tile.grad{background:linear-gradient(135deg,#16204a,#0d1530)}
.logo-tile.photo{background:linear-gradient(135deg,#243154,#0b1020);background-image:radial-gradient(circle at 20% 20%,rgba(79,124,255,.5),transparent 40%),radial-gradient(circle at 80% 80%,rgba(34,211,238,.4),transparent 45%)}
.logo-tile img{max-width:min(80%,260px);height:auto}
.logo-tile .tile-label{position:absolute;top:12px;left:14px;font-size:.72rem;font-weight:600;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.1em}
.logo-tile.light .tile-label{color:#7e89af}

.variant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.variant{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card)}
.variant .v-show{height:120px;display:flex;align-items:center;justify-content:center;padding:20px}
.variant .v-show.on-dark{background:#0b1020}
.variant .v-show.on-light{background:#f5f7ff}
.variant img{max-width:88%;max-height:74px}
.variant .v-name{padding:11px 14px;border-top:1px solid var(--line);font-size:.82rem;color:var(--txt-soft);font-weight:600}

/* ---------- construction / clearspace ---------- */
.construct{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.construct-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.construct-box h4{font-family:'Plus Jakarta Sans';margin-bottom:8px}
.construct-box p{color:var(--txt-soft);font-size:.92rem}
.construct-box .frame{background:#0b1020;border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:16px;display:flex;justify-content:center}

/* ---------- do / don't ---------- */
.dd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dd{border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.dd .dd-show{height:120px;display:flex;align-items:center;justify-content:center;background:#0b1020;padding:18px;position:relative}
.dd .dd-show img{max-width:70%;max-height:64px}
.dd .dd-cap{padding:13px 15px;font-size:.86rem;display:flex;gap:9px;align-items:flex-start}
.dd .badge{flex:none;width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;margin-top:1px}
.dd.no .badge{background:rgba(255,107,107,.18);color:#ff6b6b}
.dd.yes .badge{background:rgba(31,182,115,.18);color:#1fb673}
.dd.no .dd-show{outline:0}
.dd-cap span:last-child{color:var(--txt-soft)}

/* ---------- color swatches ---------- */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swatch{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card);cursor:pointer;transition:transform .25s var(--ease),border-color .25s}
.swatch:hover{transform:translateY(-4px);border-color:var(--line-2)}
.swatch .chip{height:96px;position:relative}
.swatch .chip .copy{position:absolute;top:8px;right:9px;font-size:.66rem;font-weight:700;background:rgba(0,0,0,.35);color:#fff;padding:4px 8px;border-radius:6px;opacity:0;transition:opacity .2s}
.swatch:hover .chip .copy{opacity:1}
.swatch .meta{padding:13px 14px}
.swatch .meta .nm{font-family:'Plus Jakarta Sans';font-weight:700;font-size:.92rem}
.swatch .meta .hex{font-size:.82rem;color:var(--txt-soft);font-variant-numeric:tabular-nums;margin-top:2px}
.swatch .meta .rgb{font-size:.74rem;color:var(--txt-mute);margin-top:1px}
.swatch.copied .chip .copy{opacity:1;background:#1fb673}

.gradient-bar{height:120px;border-radius:var(--radius);background:var(--grad);display:flex;align-items:flex-end;justify-content:space-between;padding:14px 18px;color:#06122e;font-weight:700;font-family:'Plus Jakarta Sans';font-size:.85rem}

.usage-bar{display:flex;height:46px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:8px}
.usage-bar span{display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#06122e}

.note{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:10px;padding:16px 18px;margin-top:24px;color:var(--txt-soft);font-size:.92rem}
.note b{color:var(--txt)}

/* ---------- typography ---------- */
.face-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.face{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.face .big{font-size:3.6rem;line-height:1;margin-bottom:14px}
.face .pjs{font-family:'Plus Jakarta Sans';font-weight:800}
.face .inter{font-family:'Inter';font-weight:600}
.face h4{font-family:'Plus Jakarta Sans';font-size:1.1rem;margin-bottom:6px}
.face p{color:var(--txt-soft);font-size:.9rem;margin-bottom:14px}
.face .glyphs{font-size:1.05rem;color:var(--txt-soft);letter-spacing:1px;border-top:1px solid var(--line);padding-top:14px}
.face .weights{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.face .weights span{font-size:1.15rem}

.scale{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:14px 22px}
.scale-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}
.scale-row:last-child{border-bottom:none}
.scale-row .sr-text{font-family:'Plus Jakarta Sans';font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scale-row .sr-meta{flex:none;color:var(--txt-mute);font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- iconography ---------- */
.icon-row{display:flex;gap:14px;flex-wrap:wrap}
.icon-chip{width:64px;height:64px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.icon-chip svg{width:28px;height:28px}

/* ---------- principles ---------- */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.principle{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.principle .pn{flex:none;width:40px;height:40px;border-radius:11px;background:var(--grad);color:#06122e;font-family:'Plus Jakarta Sans';font-weight:800;display:flex;align-items:center;justify-content:center}
.principle h4{font-family:'Plus Jakarta Sans';margin-bottom:5px}
.principle p{color:var(--txt-soft);font-size:.92rem}

/* ---------- voice ---------- */
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.voice-col{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--card)}
.voice-col h4{font-family:'Plus Jakarta Sans';display:flex;align-items:center;gap:9px;margin-bottom:16px}
.voice-col.do h4{color:#1fb673}
.voice-col.dont h4{color:#ff6b6b}
.voice-col ul{display:flex;flex-direction:column;gap:12px}
.voice-col li{color:var(--txt-soft);font-size:.95rem;padding-left:22px;position:relative}
.voice-col li::before{position:absolute;left:0;top:0;font-weight:800}
.voice-col.do li::before{content:"✓";color:#1fb673}
.voice-col.dont li::before{content:"✕";color:#ff6b6b}
.voice-col em{color:var(--txt);font-style:normal;font-weight:600}

.words{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.words .wbox{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--card)}
.words .wbox h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-mute);margin-bottom:12px}
.tagchips{display:flex;flex-wrap:wrap;gap:8px}
.tagchips span{font-size:.85rem;padding:6px 12px;border-radius:999px}
.words .yes .tagchips span{background:rgba(31,182,115,.12);color:#7ee0b4;border:1px solid rgba(31,182,115,.25)}
.words .no .tagchips span{background:rgba(255,107,107,.1);color:#ffb1b1;border:1px solid rgba(255,107,107,.22);text-decoration:line-through}

/* ---------- applications ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.app-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.app-stage{padding:34px;display:flex;align-items:center;justify-content:center;background:#0b1020;min-height:240px}
.app-card .app-name{padding:14px 18px;border-top:1px solid var(--line);font-size:.86rem;color:var(--txt-soft);font-weight:600}

/* business card */
.bizcard{width:300px;height:180px;border-radius:16px;padding:22px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.bizcard.front{background:linear-gradient(135deg,#16204a,#0d1530);border:1px solid var(--line-2)}
.bizcard.back{background:var(--grad);color:#06122e;display:flex;align-items:center;justify-content:center}
.bizcard .bc-logo{display:flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:1.2rem}
.bizcard .bc-info{position:absolute;bottom:22px;left:22px;font-size:.78rem;line-height:1.7;color:var(--txt-soft)}
.bizcard .bc-info strong{color:#fff;display:block;font-size:.92rem}
.bizcard.back .bc-mark{width:64px;height:64px}

/* avatar */
.avatar-set{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.av{border-radius:50%;overflow:hidden;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.av img{width:62%;height:62%}
.av.s1{width:90px;height:90px}
.av.s2{width:64px;height:64px}
.av.s3{width:44px;height:44px}

/* app icon */
.appicon-set{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.appicon{border-radius:22%;overflow:hidden;box-shadow:var(--shadow)}
.appicon img{width:100%;height:100%;display:block}
.appicon.s1{width:104px;height:104px}
.appicon.s2{width:72px;height:72px}
.appicon.s3{width:48px;height:48px}

/* ad banner */
.ad{width:100%;max-width:360px;border-radius:14px;padding:26px;background:linear-gradient(135deg,#16204a,#0d1530);border:1px solid var(--line-2);position:relative;overflow:hidden}
.ad .ad-logo{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans';font-weight:800;margin-bottom:14px}
.ad h4{font-family:'Plus Jakarta Sans';font-size:1.5rem;margin-bottom:8px}
.ad h4 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ad p{color:var(--txt-soft);font-size:.9rem;margin-bottom:16px}
.ad .ad-btn{display:inline-block;background:var(--grad);color:#06122e;font-weight:700;font-family:'Plus Jakarta Sans';font-size:.85rem;padding:9px 18px;border-radius:999px}

/* ---------- downloads ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dl{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;background:var(--card);transition:transform .25s var(--ease),border-color .25s}
.dl:hover{transform:translateY(-3px);border-color:var(--blue)}
.dl .dl-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--cyan);font-weight:700;font-size:.7rem}
.dl strong{display:block;font-size:.9rem}
.dl small{color:var(--txt-mute);font-size:.78rem}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:#1fb673;color:#04261a;font-weight:700;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:300;font-size:.9rem}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .values,.dd-grid,.dl-grid,.principles{grid-template-columns:1fr 1fr}
  .swatches,.variant-grid{grid-template-columns:repeat(2,1fr)}
  .logo-grid,.construct,.face-grid,.voice-grid,.apps-grid,.words{grid-template-columns:1fr}
}
@media (max-width:680px){
  .bb-badge{display:none}
}
@media (max-width:560px){
  .values,.dd-grid,.dl-grid,.principles,.swatches,.variant-grid{grid-template-columns:1fr}
  .bizcard{width:100%;max-width:300px}
  .bb-meta{gap:18px 26px}
}