/* =========================================================
   Kho giao diện (kho-giao-dien.html) — follows the approved design.
   Loaded after style.css + mockups.css.
   ========================================================= */

.page-templates { --kg-ink: #0b1f4d; --kg-blue: #1467e6; --kg-muted: #56687f; --kg-line: #e1eaf5; --gutter: max(20px, calc((100% - 1240px) / 2)); background: #f6f9fe; }
.page-templates h1, .page-templates h2, .page-templates h3 { color: var(--kg-ink); }
.kg-kicker { display: block; font: 700 12.5px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--kg-blue); margin-bottom: 8px; }
.pill.outline-blue { background: #fff; border: 1.5px solid #9fc0f0; color: var(--kg-blue); }
.pill.outline-blue:hover { border-color: var(--kg-blue); background: #f2f7ff; }
.kg-search-btn { border-color: #dbe5f1 !important; }

/* ---------- Screenshot-style thumbnail of a demo site (rendered by templates.js) ---------- */
.shot { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: #0d1a2e; font-family: var(--hf), 'Be Vietnam Pro', serif; }
.shot-bg { position: absolute; inset: 0; background: var(--img) center / cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,12,24,.82) 0%, rgba(5,12,24,.45) 48%, rgba(5,12,24,0) 78%); }
.shot-light { background: #fff; }
.shot-light::after { background: linear-gradient(90deg, rgba(255,251,249,.94) 0%, rgba(255,251,249,.7) 42%, rgba(255,251,249,0) 70%); }
.shot-mono .shot-bg { filter: grayscale(1); }
.shot-nav { position: absolute; z-index: 2; left: 6cqw; right: 6cqw; top: 5cqw; display: flex; align-items: center; gap: 3.2cqw; }
.shot-nav i { width: 9cqw; height: 2.4cqw; border-radius: 3px; background: var(--p); margin-right: auto; }
.shot-nav span { width: 5.5cqw; height: .9cqw; border-radius: 2px; background: rgba(255,255,255,.55); }
.shot-nav b { width: 9cqw; height: 3.2cqw; border-radius: 99px; background: var(--p); }
.shot-light .shot-nav span { background: rgba(60,40,50,.3); }
.shot-copy { position: absolute; z-index: 2; left: 6cqw; top: 17cqw; width: 52cqw; }
.shot-title { margin: 0 0 3cqw; font-size: 6.6cqw; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.shot-light .shot-title { color: #2b2226; }
.shot-line { display: block; width: 34cqw; height: .9cqw; border-radius: 2px; background: rgba(255,255,255,.45); margin-bottom: 1.5cqw; }
.shot-line.s { width: 24cqw; }
.shot-light .shot-line { background: rgba(60,40,50,.25); }
.shot-btn { display: block; width: 14cqw; height: 3.6cqw; margin-top: 3cqw; border-radius: 99px; background: var(--p); }
.shot-strip { position: absolute; z-index: 2; left: 5cqw; right: 22cqw; bottom: -2cqw; height: 17cqw; padding: 2.2cqw; border-radius: 1.6cqw 1.6cqw 0 0; background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; box-shadow: 0 -1cqw 3cqw rgba(0,0,0,.2); }
.shot-strip i { border-radius: 1cqw; background: var(--img) center / cover; }
.shot-strip i:nth-child(2) { background-position: 20% 60%; filter: saturate(.8); }
.shot-strip i:nth-child(3) { background-position: 80% 30%; }
.shot-mono .shot-strip i { filter: grayscale(1); }
.shot-phone { position: absolute; z-index: 3; right: 5cqw; bottom: 4cqw; width: 16cqw; aspect-ratio: 9 / 18; border: 1cqw solid #0d1520; border-radius: 3cqw; background: #fff; overflow: hidden; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.35); }
.shot-phone::before { content: ""; position: absolute; inset: 0 0 45% 0; background: var(--img) center / cover; }
.shot-phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 20%; border-radius: 1cqw; background: repeating-linear-gradient(180deg, #e4ebf3 0 18%, transparent 18% 32%); }

/* ---------- Hero ---------- */
.kg-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 20px; align-items: center;
  padding: 100px var(--gutter) 30px;
  background:
    radial-gradient(ellipse 50% 60% at 78% 30%, rgba(160,200,255,.45), transparent 70%),
    linear-gradient(180deg, #eef5ff 0%, #e6f0ff 60%, #f6f9fe 100%);
}
.kg-hero-bg {
  position: absolute; inset: 0 0 0 42%; pointer-events: none;
  background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=60') center / cover;
  opacity: .16; filter: saturate(.4) blur(1px);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.kg-hero-copy { position: relative; z-index: 2; }
.kg-badge { display: inline-block; padding: 6px 16px; border-radius: 99px; background: #dce9ff; color: var(--kg-blue); font: 700 12px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.kg-hero h1 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; margin: 16px 0 12px; }
.kg-hero h1 span { display: block; margin-top: 6px; font-size: .68em; letter-spacing: -.03em; background: linear-gradient(90deg, #0f5fe8, #1d8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kg-hero-copy > p { color: #3b4d66; font-size: 15.5px; line-height: 1.65; margin: 0; }
.kg-search {
  display: flex; align-items: center; gap: 12px; max-width: 620px; margin-top: 24px;
  padding: 7px 7px 7px 22px; border-radius: 99px; background: #fff;
  box-shadow: 0 16px 40px rgba(20,80,160,.14); border: 1px solid #e4edf8;
}
.kg-search-ic { font-size: 22px; color: var(--kg-blue); }
.kg-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 15px var(--sans); color: var(--kg-ink); background: none; }
.kg-search .pill { min-height: 48px; padding: 0 28px; }
.kg-cats { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.kg-cat {
  width: 76px; height: 82px; padding: 10px 4px 8px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.85); border: 1.5px solid transparent; color: var(--kg-muted);
  box-shadow: 0 8px 20px rgba(20,80,160,.07);
  font: 500 11.5px var(--sans); line-height: 1.2; text-align: center;
  transition: transform .3s, border-color .3s, color .3s, box-shadow .3s;
}
.kg-cat svg { font-size: 26px; color: var(--kg-blue); }
.kg-cat:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(20,80,160,.14); }
.kg-cat.active { border-color: #7fb0f2; color: var(--kg-blue); background: #fff; }
.kg-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; padding: 0; margin: 22px 0 0; }
.kg-checks li { position: relative; padding-left: 30px; font-size: 13.5px; color: #4e6079; }
.kg-checks li::before, .kg-cta-checks li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 50%;
  background: #1467e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Hero art: three floating screens on a glass podium */
.kg-hero-art { position: relative; height: 470px; perspective: 1600px; }
.kg-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.kg-screen { position: absolute; border-radius: 12px; border: 7px solid #fff; background: #fff; box-shadow: 0 30px 60px rgba(20,70,150,.28); overflow: hidden; }
.kg-screen .kg-shot { position: absolute; inset: 0; }
.kg-screen.s-main { left: 16%; top: 30px; width: 66%; aspect-ratio: 16 / 11; transform: rotateY(-14deg) rotateX(4deg); z-index: 3; animation: kg-float 7s ease-in-out infinite; }
.kg-screen.s-left { left: 0; top: 90px; width: 26%; aspect-ratio: 3 / 4.4; transform: rotateY(22deg) translateZ(-80px); z-index: 1; opacity: .92; animation: kg-float 8s -2s ease-in-out infinite; }
.kg-screen.s-right { right: 0; top: 150px; width: 28%; aspect-ratio: 3 / 4.2; transform: rotateY(-24deg) translateZ(-40px); z-index: 2; animation: kg-float 7.5s -4s ease-in-out infinite; }
.kg-podium { position: absolute; left: 12%; right: 6%; bottom: 10px; height: 70px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(214,230,252,.8)); box-shadow: 0 20px 40px rgba(20,70,150,.18); transform: rotateX(60deg); transform-origin: 50% 100%; }
@keyframes kg-float { 50% { translate: 0 -10px; } }
.kg-count {
  position: absolute; z-index: 5; right: 12%; bottom: 44px; display: grid; gap: 2px; padding: 16px 20px;
  border-radius: 16px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); box-shadow: 0 20px 44px rgba(20,70,150,.22);
}
.kg-count svg { font-size: 30px; color: var(--kg-blue); }
.kg-count strong { font: 800 30px var(--display); color: var(--kg-blue); letter-spacing: -.03em; line-height: 1.1; }
.kg-count span { font-size: 13px; color: #4e6079; line-height: 1.35; }
.kg-script { position: absolute; z-index: 5; right: 0; top: -6px; font: 600 24px/1.15 var(--script); color: #3a64b8; text-align: center; transform: rotate(-8deg); }

/* ---------- Filter bar ---------- */
.kg-filter-wrap { padding: 0 var(--gutter); position: relative; z-index: 3; }
.kg-filter {
  display: grid; grid-template-columns: 1.6fr repeat(6, 1fr); gap: 14px; align-items: end;
  padding: 18px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--kg-line);
  box-shadow: 0 18px 44px rgba(20,60,120,.08);
}
.kg-field { display: grid; gap: 8px; min-width: 0; }
.kg-field > span:first-child { font: 700 13px var(--display); color: var(--kg-ink); }
.kg-input, .kg-select { position: relative; display: flex; align-items: center; height: 44px; border-radius: 10px; border: 1px solid #dbe5f1; background: #fff; transition: border-color .2s, box-shadow .2s; }
.kg-input:focus-within, .kg-select:focus-within { border-color: var(--kg-blue); box-shadow: 0 0 0 3px rgba(20,103,230,.12); }
.kg-input input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; background: none; font: 14px var(--sans); color: var(--kg-ink); }
.kg-input svg { margin-right: 12px; color: #8ea0b7; font-size: 18px; }
.kg-select select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 34px 0 12px; border: 0; outline: 0; background: none; cursor: pointer;
  font: 14px var(--sans); color: #3a4d66; text-overflow: ellipsis;
}
.kg-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid #52657e; border-bottom: 1.8px solid #52657e; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.kg-color select { padding-left: 38px; }
.kg-swatch { position: absolute; left: 12px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; background: conic-gradient(#ff4d4d, #ffb84d, #f5f542, #4dd98b, #4db8ff, #7c5cff, #ff4dd2, #ff4d4d); }
.kg-sort::after { display: none; }
.kg-sort svg { position: absolute; right: 12px; color: var(--kg-blue); font-size: 18px; pointer-events: none; }

/* ---------- Sections ---------- */
.kg-section { padding: 46px var(--gutter) 20px; }
.kg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 22px; }
.kg-head h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.kg-head p { margin: 0; color: var(--kg-muted); font-size: 14.5px; }
.kg-view { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.kg-view > span { font-size: 14px; color: var(--kg-muted); }
.kg-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid #dbe5f1; background: #fff; }
.kg-toggle button { width: 40px; height: 38px; display: grid; place-items: center; border: 0; background: none; color: #5a6d86; font-size: 18px; }
.kg-toggle button.active { background: linear-gradient(135deg, #1a6dff, #0b5ce8); color: #fff; }

/* Template cards */
.kg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kg-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
  background: #fff; border: 1px solid var(--kg-line); box-shadow: 0 12px 30px rgba(20,60,120,.06);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  animation: kg-in .5s both;
}
@keyframes kg-in { from { opacity: 0; transform: translateY(16px); } }
.kg-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(20,80,160,.15); }
.kg-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; background: #dfe8f3; }
.kg-card:hover .shot-bg { transform: scale(1.06); }
.kg-id { position: absolute; z-index: 5; left: 12px; top: 12px; padding: 4px 11px; border-radius: 99px; background: #fff; color: var(--kg-blue); font: 700 12px var(--display); letter-spacing: .04em; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.kg-fav { position: absolute; z-index: 5; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #fff; color: #33445c; font-size: 17px; box-shadow: 0 4px 12px rgba(0,0,0,.14); transition: transform .25s, color .25s; }
.kg-fav:hover { transform: scale(1.1); }
.kg-fav[aria-pressed="true"] { color: #ef3e5c; }
.kg-fav[aria-pressed="true"] svg { fill: currentColor; }
.kg-hover { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: rgba(8,24,56,.45); opacity: 0; transition: opacity .3s; }
.kg-hover span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; background: #fff; color: var(--kg-blue); font: 700 13px var(--display); transform: translateY(10px); transition: transform .3s; }
.kg-thumb:hover .kg-hover, .kg-thumb:focus-visible .kg-hover { opacity: 1; }
.kg-thumb:hover .kg-hover span { transform: none; }
.kg-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.kg-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kg-card h3 { font-size: 16.5px; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.kg-plan { flex-shrink: 0; padding: 3px 10px; border-radius: 99px; font: 600 11.5px var(--sans); }
.plan-professional { background: #e5efff; color: #1d64de; }
.plan-premium { background: #fde6f2; color: #c01f78; }
.plan-standard { background: #e6f1ff; color: #2c72da; }
.kg-card-cat { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13px; color: #5f7189; }
.kg-card-cat svg { color: var(--kg-blue); font-size: 16px; }
.kg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.kg-tags span { padding: 5px 11px; border-radius: 99px; background: #eef4fb; color: #52657e; font-size: 12px; }
.kg-card-actions { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; margin-top: auto; }
.kg-card-actions .pill { min-height: 42px; padding: 0 10px; font-size: 13.5px; }
.kg-empty { padding: 40px 20px; text-align: center; color: var(--kg-muted); background: #fff; border-radius: 14px; border: 1px dashed #c9d8ec; }
.link-btn { color: var(--kg-blue) !important; }

/* List view */
.kg-grid.list { grid-template-columns: 1fr 1fr; }
.kg-grid.list .kg-card { flex-direction: row; }
.kg-grid.list .kg-thumb { width: 44%; aspect-ratio: auto; min-height: 220px; flex-shrink: 0; }

/* Featured */
.kg-featured { padding-top: 40px; }
.kg-h2-soft { font-weight: 500 !important; }
.kg-h2-soft b { font-weight: 800; }
.kg-all { display: inline-flex; align-items: center; gap: 8px; color: var(--kg-blue); font: 700 14px var(--display); }
.kg-all svg { transition: transform .25s; } .kg-all:hover svg { transform: translateX(4px); }
.kg-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid #dbe5f1; display: grid; place-items: center; background: #fff; color: var(--kg-ink); font-size: 17px; box-shadow: 0 6px 16px rgba(20,60,120,.08); transition: background .25s, color .25s; }
.kg-arrow:hover { background: var(--kg-blue); color: #fff; border-color: var(--kg-blue); }
.kg-feat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kg-feat { overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid var(--kg-line); box-shadow: 0 12px 30px rgba(20,60,120,.06); cursor: pointer; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; animation: kg-in .5s both; }
.kg-feat:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(20,80,160,.15); }
.kg-feat:hover .shot-bg { transform: scale(1.06); }
.kg-feat .kg-thumb { aspect-ratio: 2 / 1.05; }
.kg-feat-body { position: relative; padding: 24px 16px 16px; }
.kg-feat-body .kg-id { top: -14px; left: 14px; }
.kg-feat h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.kg-feat .kg-tags { margin: 10px 0 0; }

/* ---------- Custom design CTA ---------- */
.kg-cta-wrap { padding: 40px var(--gutter) 70px; }
.kg-cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr .9fr; align-items: center; gap: 24px;
  min-height: 240px; padding: 34px 40px; border-radius: 20px; color: #fff;
  background:
    radial-gradient(ellipse 35% 80% at 58% 60%, rgba(40,120,255,.45), transparent 70%),
    linear-gradient(110deg, #0a2a66, #06204f 50%, #041637);
  box-shadow: 0 26px 60px rgba(6,32,86,.3);
}
.kg-cta-badge { display: inline-block; padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(90,170,255,.6); color: #7cc4ff; font: 700 12px var(--display); letter-spacing: .16em; text-transform: uppercase; }
.kg-cta h2 { color: #fff; font-size: clamp(22px, 2.1vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 10px; }
.kg-cta p { color: #c5d5ee; font-size: 14.5px; margin: 0 0 20px; }
.kg-white { background: #fff; color: #0b2a6b; min-height: 48px; box-shadow: 0 12px 26px rgba(0,0,0,.25); }
.kg-white:hover { transform: translateY(-2px); }
.kg-cta-art { position: relative; height: 200px; perspective: 1200px; }
.kg-ring { position: absolute; left: 20%; right: -10%; top: -20%; bottom: -30%; border-radius: 50%; border: 2px solid rgba(80,160,255,.35); box-shadow: 0 0 60px rgba(40,120,255,.35), inset 0 0 40px rgba(40,120,255,.25); transform: rotateX(70deg); }
.kg-cta-art .kg-screen { border-width: 6px; border-color: #0e1726; }
.kg-cta-art .c-front { left: 0; top: 18px; width: 70%; aspect-ratio: 16 / 10.5; transform: rotateY(18deg); z-index: 2; }
.kg-cta-art .c-back { right: 0; top: 42px; width: 48%; aspect-ratio: 16 / 11; transform: rotateY(-20deg) translateZ(-60px); border-color: #e9eef6; }
.kg-cta-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.kg-cta-checks li { position: relative; padding-left: 36px; color: #dde8f8; font-size: 14.5px; }
.kg-cta-checks li::before { width: 24px; height: 24px; background-size: 13px; }

/* ---------- Demo preview modal ---------- */
.kg-preview-modal { padding: 0; }
.kg-preview { position: relative; display: flex; flex-direction: column; width: min(1500px, calc(100vw - 40px)); height: calc(100vh - 40px); border-radius: 18px; overflow: hidden; background: #0d1729; box-shadow: 0 40px 100px rgba(0,0,0,.5); animation: pop .3s cubic-bezier(.2,.8,.2,1); }
.kg-pv-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e3eaf3; }
.kg-pv-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kg-pv-info strong { font: 700 15px var(--display); color: var(--kg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-pv-id { padding: 4px 10px; border-radius: 99px; background: #e5efff; color: var(--kg-blue); font: 700 12px var(--display); }
.kg-pv-devices { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #eef3f9; }
.kg-pv-devices button { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 9px; background: none; color: #52657e; font: 600 13px var(--sans); }
.kg-pv-devices button svg { font-size: 18px; }
.kg-pv-devices button.active { background: #fff; color: var(--kg-blue); box-shadow: 0 2px 8px rgba(20,60,120,.12); }
.kg-pv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.kg-pv-open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: #3d5070; font: 600 13px var(--sans); }
.kg-pv-open:hover { background: #eef3f9; }
.kg-pv-close { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #eef3f9; color: var(--kg-ink); font-size: 18px; }
.kg-pv-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center, #1a2b48, #0b1424); }
.kg-pv-frame { position: relative; overflow: hidden; background: #fff; transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1), border-radius .45s; }
.kg-pv-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.kg-pv-frame.tablet, .kg-pv-frame.mobile { border-radius: 26px; box-shadow: 0 0 0 10px #111a27, 0 0 0 11px #2a3a52, 0 30px 80px rgba(0,0,0,.6); }
.kg-pv-frame.mobile { border-radius: 34px; }
.kg-pv-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: #c9d6ea; font-size: 14px; background: #0d1729; transition: opacity .3s; }
.kg-pv-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #4d9bff; animation: spin .9s linear infinite; }
.kg-pv-loading.done { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .kg-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kg-field-search { grid-column: span 2; }
}
@media (max-width: 1180px) {
  .kg-hero { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .kg-hero-art { height: 400px; max-width: 760px; width: 100%; margin: 10px auto 0; }
  .kg-grid, .kg-feat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kg-feat-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 40px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kg-feat { scroll-snap-align: start; }
  .kg-cta { grid-template-columns: 1fr 1fr; }
  .kg-cta-art { display: none; }
  .kg-grid.list { grid-template-columns: 1fr; }
  .kg-pv-devices span, .kg-pv-open span { display: none; }
}
@media (max-width: 860px) {
  .kg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kg-feat-row { grid-auto-columns: calc((100% - 20px) / 2); }
  .kg-head { flex-direction: column; align-items: flex-start; }
  .kg-filter { grid-template-columns: 1fr 1fr; }
  .kg-cta { grid-template-columns: 1fr; }
  .kg-pv-bar { grid-template-columns: 1fr auto; }
  .kg-pv-devices { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 640px) {
  .kg-hero { padding-top: 86px; }
  .kg-hero h1 { font-size: 32px; }
  .kg-hero-copy > p br { display: none; }
  .kg-search { padding-left: 16px; }
  .kg-search .pill { padding: 0 18px; }
  .kg-search .pill svg { display: none; }
  .kg-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .kg-cat { width: auto; height: 74px; font-size: 10.5px; }
  .kg-checks { gap: 10px 18px; }
  .kg-hero-art { height: 260px; }
  .kg-script, .kg-screen.s-left { display: none; }
  .kg-count { right: 2%; bottom: 10px; padding: 10px 14px; }
  .kg-count strong { font-size: 22px; }
  .kg-grid { grid-template-columns: 1fr; }
  .kg-grid.list .kg-card { flex-direction: column; }
  .kg-grid.list .kg-thumb { width: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .kg-feat-row { grid-auto-columns: 84%; }
  .kg-filter { padding: 16px; }
  .kg-cta { padding: 28px 22px; }
  .kg-preview { width: 100vw; height: 100dvh; border-radius: 0; }
  .kg-pv-info strong { display: none; }
  .kg-pv-actions .pill { padding: 0 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-screen { animation: none !important; }
}

/* ---------- Fine-tuning to match the design line breaks ---------- */
.page-templates .pill.primary { background: linear-gradient(90deg, #1a6dff, #2b86ff); }
.page-templates .pill.primary:hover { box-shadow: 0 14px 30px rgba(26,109,255,.35); }
@media (min-width: 1181px) {
  .kg-hero { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .kg-hero h1 span { white-space: nowrap; }
  .kg-cats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; max-width: 680px; }
  .kg-cat { width: auto; height: 80px; font-size: 11px; }
  .kg-checks { flex-wrap: nowrap; gap: 22px; }
  .kg-checks li { white-space: nowrap; font-size: 13px; padding-left: 27px; }
  .kg-script { top: -4px; right: -1%; }
  .kg-screen.s-main { top: 78px; width: 62%; }
  .kg-count { right: 6%; }
}
.kg-head h2, .kg-cta h2 { line-height: 1.2; }
.kg-h2-soft { font-size: clamp(20px, 1.75vw, 25px) !important; letter-spacing: -.02em !important; }
.kg-h2-soft b { font-size: 1.22em; }
.kg-card-body { padding: 14px 14px 16px; }
.kg-card h3 { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kg-plan { padding: 3px 8px; font-size: 11px; }
.kg-tags { gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.kg-tags span { padding: 4px 9px; font-size: 11.5px; white-space: nowrap; }
.kg-feat .shot-copy { top: 13cqw; }
.kg-feat .shot-title { font-size: 5.4cqw; }
.kg-feat .shot-strip { height: 12cqw; right: 26cqw; }
.kg-feat .shot-phone { display: none; }
.kg-cta { grid-template-columns: 1.35fr .95fr .9fr; }
.kg-cta h2 { font-size: clamp(22px, 1.9vw, 28px); }
@media (min-width: 1181px) { .kg-cta h2 { white-space: nowrap; } }

/* =========================================================
   Premium 3D (html.fx3d is set by templates.js; skipped for reduced motion)
   Start (hero) and end (CTA) get the big moments; the gallery only reacts on hover.
   ========================================================= */

/* ---- Hero entrance ---- */
.fx3d .kg-hero .kg-badge { display: inline-block; opacity: 0; transform: translateY(-16px) scale(.9); transition: opacity .6s, transform .8s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-hero h1 { transform-origin: 50% 100%; opacity: 0; transform: perspective(900px) translateY(40px) rotateX(-40deg); transition: opacity .8s .12s, transform 1.1s .12s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-hero-copy > p, .fx3d .kg-search { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform 1s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-hero-copy > p { transition-delay: .3s; }
.fx3d .kg-search { transition-delay: .42s; }
.fx3d .kg-cat {
  opacity: 0; transform: perspective(500px) rotateX(-80deg) translateY(20px); transform-origin: 50% 0;
  transition: opacity .6s, transform .9s cubic-bezier(.16,.84,.24,1), border-color .3s, color .3s, box-shadow .3s;
  transition-delay: calc(.55s + var(--i) * .05s);
}
.fx3d .kg-checks li { opacity: 0; transform: translateX(-16px); transition: opacity .6s, transform .8s cubic-bezier(.16,.84,.24,1); transition-delay: calc(1s + var(--i) * .08s); }
.fx3d .play .kg-badge, .fx3d .play h1, .fx3d .play .kg-hero-copy > p, .fx3d .play .kg-search, .fx3d .play .kg-checks li, .fx3d .play .kg-cat { opacity: 1; transform: none; }
.fx3d .ready .kg-cat { transition-delay: 0s; }
.fx3d .ready .kg-cat:hover { transform: perspective(500px) translateY(-6px) rotateX(12deg); }
.fx3d .kg-cat svg { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.fx3d .kg-cat:hover svg { transform: perspective(200px) rotateY(360deg); }

/* Screens fly out of depth, podium rises, badge pops, handwriting draws in */
.fx3d .kg-stage { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fx3d .kg-screen { animation: none; transition: opacity .9s, transform 1.4s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-hero:not(.play) .s-main { opacity: 0; transform: rotateY(-40deg) rotateX(20deg) translateZ(-400px) translateY(80px); }
.fx3d .kg-hero:not(.play) .s-left { opacity: 0; transform: rotateY(60deg) translateZ(-300px) translateX(-120px); }
.fx3d .kg-hero:not(.play) .s-right { opacity: 0; transform: rotateY(-60deg) translateZ(-300px) translateX(120px); }
.fx3d .s-main { transition-delay: .35s; }
.fx3d .s-left { transition-delay: .55s; }
.fx3d .s-right { transition-delay: .65s; }
.fx3d .ready .kg-screen { animation: kg-float 7s ease-in-out infinite; }
.fx3d .ready .s-left { animation-duration: 8s; animation-delay: -2s; }
.fx3d .ready .s-right { animation-duration: 7.5s; animation-delay: -4s; }
.fx3d .kg-podium { transition: opacity .8s .2s, transform 1.2s .2s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-hero:not(.play) .kg-podium { opacity: 0; transform: rotateX(90deg) translateY(40px); }
.fx3d .kg-count { transition: opacity .6s 1.2s, scale .8s 1.2s cubic-bezier(.3,1.5,.5,1), translate .6s cubic-bezier(.2,.8,.2,1); translate: calc(var(--px, 0) * -34px) calc(var(--py, 0) * -24px); }
.fx3d .kg-hero:not(.play) .kg-count { opacity: 0; scale: .5; }
.fx3d .kg-script { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s 1.3s ease-out, translate .6s cubic-bezier(.2,.8,.2,1); translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 16px); }
.fx3d .play .kg-script { clip-path: inset(0 0 0 0); }
.fx3d .kg-hero-bg { transition: translate .8s cubic-bezier(.2,.8,.2,1); translate: calc(var(--px, 0) * 20px) calc(var(--py, 0) * 12px); }
/* Light sweep across the main screen */
.fx3d .s-main::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%) 130% 0 / 260% 100%;
  animation: kg-sweep 6s 2.4s ease-in-out infinite;
}
@keyframes kg-sweep { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }

/* ---- Middle: hover-only ---- */
.fx3d .kg-card, .fx3d .kg-feat { position: relative; }
.fx3d .kg-card::after, .fx3d .kg-feat::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 42%);
  opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light;
}
.fx3d .is-tilting::after { opacity: 1; }
.fx3d .kg-card.is-tilting, .fx3d .kg-feat.is-tilting { transition: transform .08s linear, box-shadow .3s; box-shadow: 0 30px 60px rgba(20,80,160,.2); }

/* ---- End: CTA flips up, screens swing in and follow the pointer, orbit ring spins ---- */
.fx3d .kg-cta.reveal { transition: opacity .9s, transform 1.3s cubic-bezier(.16,.84,.24,1); transform-origin: 50% 100%; }
.fx3d .kg-cta.reveal:not(.in) { opacity: 0; transform: perspective(1400px) rotateX(-50deg) translateY(50px); }
.fx3d .kg-cta-art { transform-style: preserve-3d; }
.fx3d .kg-cta .c-front { transition: opacity .9s .5s, transform 1.2s .5s cubic-bezier(.16,.84,.24,1); transform: rotateY(calc(18deg + var(--cx, 0) * 16deg)) rotateX(calc(var(--cy, 0) * -8deg)); }
.fx3d .kg-cta .c-back { transition: opacity .9s .7s, transform 1.2s .7s cubic-bezier(.16,.84,.24,1); transform: rotateY(calc(-20deg + var(--cx, 0) * 12deg)) translateZ(-60px); }
.fx3d .kg-cta:not(.in) .c-front { opacity: 0; transform: rotateY(70deg) translateZ(-200px); }
.fx3d .kg-cta:not(.in) .c-back { opacity: 0; transform: rotateY(-70deg) translateZ(-260px); }
.fx3d .kg-ring { animation: kg-ring 14s linear infinite; }
@keyframes kg-ring { from { transform: rotateX(70deg) rotateZ(0deg); } to { transform: rotateX(70deg) rotateZ(360deg); } }
.fx3d .kg-ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #7cc4ff; box-shadow: 0 0 16px 4px rgba(124,196,255,.8); }
.fx3d .kg-cta-checks li { transition: opacity .6s, transform .8s cubic-bezier(.16,.84,.24,1); }
.fx3d .kg-cta:not(.in) .kg-cta-checks li { opacity: 0; transform: translateX(30px); }
.fx3d .kg-cta.in .kg-cta-checks li:nth-child(1) { transition-delay: .6s; }
.fx3d .kg-cta.in .kg-cta-checks li:nth-child(2) { transition-delay: .72s; }
.fx3d .kg-cta.in .kg-cta-checks li:nth-child(3) { transition-delay: .84s; }
.fx3d .kg-cta.in .kg-cta-checks li:nth-child(4) { transition-delay: .96s; }
.fx3d .kg-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(120,180,255,.18), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.fx3d .kg-cta:hover::before { opacity: 1; }