:root { --knb-purple:#6d38ed; --knb-purple-dark:#41208f; --knb-yellow:#ffd43d; --knb-ink:#171526; --knb-muted:#666577; --knb-soft:#f7f5fc; --knb-border:#e8e3f2; }
.knb-content-page { color:var(--knb-ink); background:#fff; font-family:"Poppins",sans-serif; }
.knb-content-page img { max-width:100%; }
.knb-content-hero { position:relative; padding:72px 0 76px; background:radial-gradient(circle at 88% 15%,rgba(255,212,61,.31),transparent 25%),radial-gradient(circle at 5% 0%,rgba(109,56,237,.14),transparent 34%),linear-gradient(135deg,#fbfaff,#f4efff 56%,#fffaf0); border-bottom:1px solid #ebe5f4; overflow:hidden; }
.knb-content-hero::after { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(86,50,170,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(86,50,170,.035) 1px,transparent 1px); background-size:35px 35px; pointer-events:none; }
.knb-content-hero .container { position:relative; z-index:1; }
.knb-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.9fr); align-items:center; gap:clamp(38px,6vw,80px); }
.knb-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:22px; color:#787587; font-size:12px; }.knb-breadcrumb a { color:var(--knb-purple-dark); font-weight:650; text-decoration:none; }.knb-breadcrumb i { font-size:8px; }
.knb-eyebrow { display:inline-flex; align-items:center; gap:8px; margin-bottom:17px; padding:8px 12px; color:#5530b1; background:rgba(255,255,255,.8); border:1px solid #ded2f7; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 8px 24px rgba(75,43,143,.06); }.knb-eyebrow i { color:#ffb800; }
.knb-content-hero h1 { max-width:770px; margin:0 0 17px; font-family:"Outfit",sans-serif; font-size:clamp(40px,5.2vw,70px); letter-spacing:-.05em; line-height:1.02; }.knb-content-hero h1 span { color:var(--knb-purple); }.knb-content-hero p { max-width:670px; margin:0; color:#656476; font-size:15px; line-height:1.8; }
.knb-hero-stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }.knb-hero-stats span { display:inline-flex; align-items:center; gap:8px; padding:10px 13px; color:#4d4a5b; background:rgba(255,255,255,.78); border:1px solid #e6def2; border-radius:11px; font-size:10px; font-weight:700; }.knb-hero-stats i { color:var(--knb-purple); font-size:15px; }
.knb-hero-collage { position:relative; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:12px; height:420px; }.knb-hero-collage figure { position:relative; margin:0; overflow:hidden; background:#ddd; border:6px solid rgba(255,255,255,.88); border-radius:22px; box-shadow:0 20px 50px rgba(41,25,76,.16); }.knb-hero-collage figure:first-child { grid-row:1/3; }.knb-hero-collage img { width:100%; height:100%; object-fit:cover; }.knb-hero-collage figure::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(26,17,49,.18)); }

.knb-gallery-main,.knb-blog-main { padding:70px 0 90px; background:#fff; }.knb-section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:30px; }.knb-section-heading span { color:var(--knb-purple); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.knb-section-heading h2 { margin:5px 0 0; font-family:"Outfit",sans-serif; font-size:clamp(28px,4vw,45px); letter-spacing:-.04em; }.knb-section-heading p { max-width:550px; margin:0; color:var(--knb-muted); font-size:12px; line-height:1.7; }
.knb-filter-bar { position:sticky; top:10px; z-index:20; display:flex; align-items:center; gap:8px; margin-bottom:31px; padding:10px; background:rgba(255,255,255,.9); border:1px solid #ebe7f1; border-radius:16px; box-shadow:0 13px 35px rgba(31,22,55,.08); backdrop-filter:blur(14px); overflow-x:auto; scrollbar-width:none; }.knb-filter-bar::-webkit-scrollbar { display:none; }.knb-filter-btn { display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; padding:10px 14px; color:#646273; background:transparent; border:1px solid transparent; border-radius:10px; font-size:11px; font-weight:750; }.knb-filter-btn span { display:grid; min-width:21px; height:21px; padding:0 5px; place-items:center; color:#888699; background:#eeeaf4; border-radius:7px; font-size:8px; }.knb-filter-btn:hover { color:var(--knb-purple); background:#faf8ff; }.knb-filter-btn.active { color:#fff; background:linear-gradient(135deg,#7b48f1,#5b2dc8); box-shadow:0 8px 20px rgba(109,56,237,.22); }.knb-filter-btn.active span { color:#332264; background:var(--knb-yellow); }
.knb-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }.knb-gallery-card { position:relative; background:#fff; border:1px solid var(--knb-border); border-radius:20px; box-shadow:0 14px 36px rgba(32,23,56,.055); overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }.knb-gallery-card[hidden] { display:none; }.knb-gallery-card:hover { transform:translateY(-5px); box-shadow:0 22px 50px rgba(41,25,76,.11); }.knb-gallery-open { position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; background:#ede8f4; border:0; overflow:hidden; }.knb-gallery-open img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.knb-gallery-card:hover img { transform:scale(1.045); }.knb-gallery-open::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(21,14,36,.5)); opacity:.65; }.knb-gallery-zoom { position:absolute; z-index:2; right:15px; bottom:15px; display:grid; width:39px; height:39px; place-items:center; color:#2a1d05; background:var(--knb-yellow); border-radius:12px; box-shadow:0 7px 20px rgba(0,0,0,.2); }.knb-gallery-card-body { padding:17px 18px 19px; }.knb-gallery-category { color:var(--knb-purple); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.knb-gallery-card h3 { margin:5px 0 6px; font-family:"Outfit",sans-serif; font-size:17px; letter-spacing:-.02em; }.knb-gallery-card p { display:-webkit-box; margin:0; overflow:hidden; color:#7a7887; font-size:10px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.knb-gallery-date { display:flex; align-items:center; gap:6px; margin-top:10px; color:#92909d; font-size:9px; }
.knb-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(10,8,18,.91); backdrop-filter:blur(12px); }.knb-lightbox.open { display:flex; }.knb-lightbox-dialog { position:relative; width:min(1100px,100%); }.knb-lightbox-image { display:block; width:100%; max-height:78vh; object-fit:contain; background:#12111c; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,.55); }.knb-lightbox-caption { padding:14px 4px 0; color:#fff; }.knb-lightbox-caption strong { display:block; font-family:"Outfit",sans-serif; font-size:17px; }.knb-lightbox-caption span { display:block; margin-top:3px; color:#aaa7b6; font-size:10px; }.knb-lightbox-close,.knb-lightbox-nav { position:absolute; z-index:3; display:grid; place-items:center; color:#fff; background:rgba(25,22,36,.8); border:1px solid rgba(255,255,255,.15); border-radius:50%; backdrop-filter:blur(9px); }.knb-lightbox-close { top:-18px; right:-18px; width:44px; height:44px; }.knb-lightbox-nav { top:50%; width:47px; height:47px; transform:translateY(-50%); }.knb-lightbox-prev { left:-65px; }.knb-lightbox-next { right:-65px; }

.knb-blog-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:30px; padding:13px; background:#faf9fd; border:1px solid #ece8f3; border-radius:16px; }.knb-blog-search { position:relative; flex:1; }.knb-blog-search i { position:absolute; top:50%; left:14px; color:#9996a5; transform:translateY(-50%); }.knb-blog-search input { width:100%; padding:12px 14px 12px 40px; background:#fff; border:1px solid #e2deea; border-radius:11px; outline:none; font-size:11px; }.knb-blog-search input:focus { border-color:#a78af0; box-shadow:0 0 0 3px rgba(109,56,237,.08); }.knb-blog-categories { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }.knb-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }.knb-blog-card { display:flex; min-width:0; flex-direction:column; background:#fff; border:1px solid var(--knb-border); border-radius:21px; box-shadow:0 14px 38px rgba(32,23,56,.055); overflow:hidden; transition:.25s ease; }.knb-blog-card[hidden] { display:none; }.knb-blog-card:hover { transform:translateY(-5px); box-shadow:0 23px 53px rgba(41,25,76,.11); }.knb-blog-card-media { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#eee; }.knb-blog-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }.knb-blog-card:hover img { transform:scale(1.04); }.knb-blog-card-media span { position:absolute; left:14px; bottom:14px; padding:7px 10px; color:#fff; background:rgba(75,35,169,.91); border:1px solid rgba(255,255,255,.18); border-radius:8px; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(7px); }.knb-blog-card-body { display:flex; flex:1; flex-direction:column; padding:20px; }.knb-blog-meta { display:flex; flex-wrap:wrap; gap:10px; color:#9996a4; font-size:8px; font-weight:650; }.knb-blog-meta span { display:flex; align-items:center; gap:5px; }.knb-blog-meta i { color:var(--knb-purple); }.knb-blog-card h2 { margin:10px 0 9px; font-family:"Outfit",sans-serif; font-size:20px; letter-spacing:-.025em; line-height:1.25; }.knb-blog-card h2 a { color:inherit; text-decoration:none; }.knb-blog-card p { display:-webkit-box; margin:0 0 18px; overflow:hidden; color:#747281; font-size:10.5px; line-height:1.7; -webkit-box-orient:vertical; -webkit-line-clamp:3; }.knb-read-link { display:inline-flex; align-items:center; gap:8px; margin-top:auto; color:var(--knb-purple); font-size:10px; font-weight:800; text-decoration:none; }.knb-read-link i { display:grid; width:27px; height:27px; place-items:center; color:#302007; background:var(--knb-yellow); border-radius:9px; }.knb-empty { grid-column:1/-1; padding:55px 20px; color:#8a8796; background:#faf9fc; border:1px dashed #ddd7e8; border-radius:18px; text-align:center; }.knb-empty i { display:block; margin-bottom:10px; color:#b1a5ce; font-size:30px; }

.knb-article-hero { padding:55px 0 68px; }.knb-article-hero .knb-hero-grid { grid-template-columns:minmax(0,1fr) minmax(400px,1fr); }.knb-article-hero h1 { font-size:clamp(38px,4.9vw,64px); }.knb-article-image { aspect-ratio:16/10; margin:0; overflow:hidden; background:#eee; border:7px solid rgba(255,255,255,.9); border-radius:27px; box-shadow:0 28px 62px rgba(36,22,70,.16); }.knb-article-image img { width:100%; height:100%; object-fit:cover; }.knb-article-meta { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:23px; color:#767383; font-size:10px; }.knb-article-meta span { display:flex; align-items:center; gap:7px; }.knb-article-meta i { color:var(--knb-purple); }
.knb-article-section { padding:65px 0 90px; background:#f8f7fb; }.knb-article-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:32px; }.knb-article-content { padding:clamp(26px,4vw,52px); background:#fff; border:1px solid #e8e4ef; border-radius:26px; box-shadow:0 15px 45px rgba(33,25,58,.055); }.knb-quick-answer { display:grid; grid-template-columns:50px minmax(0,1fr); gap:17px; margin-bottom:34px; padding:23px; background:linear-gradient(135deg,#f4efff,#fffdf5); border:1px solid #e3d8f8; border-radius:18px; }.knb-quick-answer > i { display:grid; width:50px; height:50px; place-items:center; color:#352000; background:var(--knb-yellow); border-radius:14px; font-size:21px; }.knb-quick-answer span { color:var(--knb-purple); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.knb-quick-answer h2 { margin:3px 0 7px; font-family:"Outfit",sans-serif; font-size:21px; }.knb-quick-answer p { margin:0; color:#6d6a79; font-size:12px; line-height:1.75; }.knb-article-body { color:#53515f; font-size:13px; line-height:1.85; }.knb-article-body h2,.knb-article-body h3,.knb-article-body h4 { scroll-margin-top:95px; color:#1c1828; font-family:"Outfit",sans-serif; letter-spacing:-.025em; }.knb-article-body h2 { margin:42px 0 14px; padding-top:35px; border-top:1px solid #eeeaf3; font-size:29px; }.knb-article-body h2:first-child { margin-top:0; }.knb-article-body h3 { margin:28px 0 10px; font-size:22px; }.knb-article-body h4 { margin:22px 0 8px; font-size:18px; }.knb-article-body p { margin:0 0 17px; }.knb-article-body ul,.knb-article-body ol { display:grid; gap:9px; margin:0 0 20px; padding-left:22px; }.knb-article-body li::marker { color:var(--knb-purple); font-weight:800; }.knb-article-body blockquote { margin:24px 0; padding:18px 20px; color:#473b63; background:#f7f3ff; border-left:4px solid var(--knb-purple); border-radius:0 13px 13px 0; }.knb-article-body a { color:var(--knb-purple); text-underline-offset:3px; }.knb-article-footer { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; padding-top:22px; border-top:1px solid #eeeaf3; }.knb-article-footer span { padding:7px 10px; color:#6f6c7c; background:#f7f6fa; border-radius:8px; font-size:9px; }
.knb-article-sidebar { position:sticky; top:20px; display:grid; gap:18px; max-height:calc(100vh - 40px); padding-right:4px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#bca6ee transparent; }.knb-side-card { padding:22px; background:#fff; border:1px solid #e7e3ed; border-radius:19px; box-shadow:0 12px 34px rgba(33,25,58,.05); }.knb-side-card > span { color:var(--knb-purple); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.knb-side-card h2 { margin:5px 0 15px; font-family:"Outfit",sans-serif; font-size:18px; }.knb-toc { display:grid; }.knb-toc a { display:flex; gap:8px; padding:8px 0; color:#6f6c7a; border-bottom:1px solid #f0edf3; font-size:10px; line-height:1.45; text-decoration:none; }.knb-toc a:last-child { border-bottom:0; }.knb-toc a::before { content:""; width:6px; height:6px; flex:0 0 auto; margin-top:4px; background:#c8bddf; border-radius:50%; }.knb-toc a.level-h3 { padding-left:12px; }.knb-toc a:hover { color:var(--knb-purple); }.knb-side-cta { color:#fff; background:radial-gradient(circle at top right,rgba(255,212,61,.21),transparent 28%),linear-gradient(145deg,#28194f,#151023); border-color:#382663; }.knb-side-cta > span { color:#d6c6ff; }.knb-side-cta h2 { color:#fff; }.knb-side-cta p { color:#b8b5c3; font-size:10px; line-height:1.7; }.knb-side-cta a { display:inline-flex; width:100%; align-items:center; justify-content:center; gap:7px; padding:11px; color:#2c2005; background:var(--knb-yellow); border-radius:10px; font-size:10px; font-weight:800; text-decoration:none; }.knb-related-mini { display:grid; gap:12px; }.knb-related-mini a { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:10px; color:inherit; text-decoration:none; }.knb-related-mini img { width:70px; height:50px; object-fit:cover; border-radius:9px; }.knb-related-mini strong { display:-webkit-box; overflow:hidden; font-size:10px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.knb-related-mini small { display:block; margin-bottom:2px; color:var(--knb-purple); font-size:7px; text-transform:uppercase; }

@media(max-width:991px){.knb-hero-grid,.knb-article-hero .knb-hero-grid { grid-template-columns:1fr; }.knb-hero-collage { height:360px; }.knb-gallery-grid,.knb-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.knb-article-layout { grid-template-columns:1fr; }.knb-article-sidebar { position:static; max-height:none; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); }.knb-side-card:first-child { grid-column:1/-1; }.knb-section-heading { align-items:flex-start; flex-direction:column; }}
@media(max-width:767px){.knb-content-hero { padding:48px 0 52px; }.knb-content-hero h1 { font-size:42px; }.knb-hero-collage { height:290px; }.knb-gallery-main,.knb-blog-main { padding:48px 0 65px; }.knb-gallery-grid,.knb-blog-grid { grid-template-columns:1fr; gap:17px; }.knb-gallery-card { border-radius:17px; }.knb-filter-bar { margin-right:-6px; margin-left:-6px; }.knb-blog-toolbar { align-items:stretch; flex-direction:column; }.knb-article-content { padding:22px; border-radius:20px; }.knb-quick-answer { grid-template-columns:1fr; padding:19px; }.knb-article-body h2 { font-size:25px; }.knb-article-sidebar { grid-template-columns:1fr; }.knb-lightbox { padding:16px; }.knb-lightbox-nav { top:auto; bottom:-58px; }.knb-lightbox-prev { left:0; }.knb-lightbox-next { right:0; }.knb-lightbox-close { top:-13px; right:-6px; }}