/* ============================================================
   THE KINGS — Public demo gallery (Demos.html)
   Page-specific styles. Tokens + base come from styles.css.
   ============================================================ */

/* ---- page shell ---- */
.dg-main{ position:relative; z-index:1; }
.dg-wrap{ max-width:1240px; margin:0 auto; width:100%; padding:0 var(--pad); }

/* brand is an <a> on this page — kill the default link look */
.nav .brand, .dg-foot .brand{ text-decoration:none; color:inherit; }
.nav .brand .word, .dg-foot .brand .word{ color:var(--ink); }

/* back link in nav */
.nav .nav-back{ display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:var(--display); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); transition:color .3s var(--ease); }
.nav .nav-back:hover{ color:var(--ink); }
.nav .nav-back .arr{ transition:transform .3s var(--ease); }
.nav .nav-back:hover .arr{ transform:translateX(-3px); }

/* ---- hero ---- */
.dg-hero{ padding:calc(96px + env(safe-area-inset-top)) 0 56px; text-align:center; }
.dg-hero .eyebrow{ justify-content:center; margin-bottom:22px; }
.dg-hero h1{ font-size:clamp(38px,6.4vw,86px); line-height:.98; letter-spacing:-.02em; }
.dg-hero h1 .glow{ color:var(--cyan); text-shadow:0 0 32px rgba(56,216,255,.45); }
.dg-hero .lead{ margin:26px auto 0; max-width:60ch; }
.dg-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-top:30px;
  font-family:var(--display); font-size:12.5px; letter-spacing:.04em; color:var(--ink-2); }
.dg-meta span{ display:inline-flex; align-items:center; gap:8px; }
.dg-meta .tick{ color:#34e0a1; }

/* ---- gallery grid ---- */
.dg-section{ padding:8px 0 30px; }
.dg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1080px){ .dg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dg-grid{ grid-template-columns:1fr; } }

.demo-tile{
  --accent:#38d8ff;
  position:relative; display:flex; flex-direction:column; gap:0;
  border-radius:16px; overflow:hidden; text-decoration:none; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .5s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease-out);
}
.demo-tile::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  opacity:.85; }
.demo-tile:hover{ transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85), 0 0 50px -22px color-mix(in srgb, var(--accent) 70%, transparent); }

.demo-tile .tile-top{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:20px 20px 0; }
.demo-mono{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:17px; color:#0c0f15;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  box-shadow:0 0 22px -4px color-mix(in srgb, var(--accent) 75%, transparent); }
.demo-badge{ font-family:var(--display); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  padding:4px 9px; border-radius:999px; }

.demo-tile .tile-body{ position:relative; z-index:1; padding:14px 20px 0; flex:1; }
.demo-ind{ display:block; font-family:var(--display); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px; }
.demo-name{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.01em; line-height:1.15; }
.demo-loc{ margin-top:5px; font-size:13.5px; color:var(--muted); }

.demo-agents{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.demo-agents span{ font-size:11px; color:var(--ink-2); padding:3px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); }

.demo-tile .tile-foot{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  margin-top:18px; padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); }
.demo-tile .tile-foot .open{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-size:12.5px; letter-spacing:.03em; color:var(--ink);
  transition:gap .3s var(--ease); }
.demo-tile:hover .tile-foot .open{ gap:11px; color:var(--accent); }
.demo-tile .tile-foot .open svg{ width:14px; height:14px; }
.demo-tile .tile-foot .agents-n{ font-size:12px; color:var(--muted); font-family:var(--display); letter-spacing:.03em; }

/* ---- customize band ---- */
.dg-customize{ padding:30px 0 10px; }
.dg-panel{ position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--glass-edge); background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:clamp(28px,4vw,52px); }
.dg-panel::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%, rgba(56,216,255,.12), transparent 55%); }
.dg-panel-grid{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:880px){ .dg-panel-grid{ grid-template-columns:1fr; gap:30px; } }
.dg-panel h2{ font-size:clamp(28px,3.4vw,46px); line-height:1.02; }
.dg-panel .lead{ margin-top:16px; }
.dg-steps{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.dg-steps li{ list-style:none; display:flex; align-items:flex-start; gap:12px; color:var(--ink-2); font-size:14.5px; }
.dg-steps li .n{ flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:11px; color:var(--cyan);
  border:1px solid rgba(56,216,255,.4); background:rgba(56,216,255,.08); }

/* reuse finder visuals; layout tweak inside panel */
.dg-customize .finder{ margin:0; max-width:none; }
.dg-build-note{ margin-top:14px; font-size:12.5px; color:var(--muted); }

/* ---- lead form ---- */
.dg-lead{ padding:40px 0 90px; }
.lead-card{ position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--glass-edge); background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:clamp(28px,4vw,52px); }
.lead-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 120% at 0% 0%, rgba(56,216,255,.10), transparent 55%); }
.lead-grid{ position:relative; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:880px){ .lead-grid{ grid-template-columns:1fr; gap:28px; } }
.lead-card h2{ font-size:clamp(26px,3.2vw,42px); line-height:1.04; }
.lead-card .lead{ margin-top:14px; font-size:17px; }
.lead-direct{ margin-top:14px; font-size:14.5px; color:var(--ink-2); }
.lead-direct a{ color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(56,216,255,.4); transition:border-color .3s var(--ease); }
.lead-direct a:hover{ border-color:var(--cyan); }

.lead-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lead-form .full{ grid-column:1 / -1; }
.lead-field{ display:flex; flex-direction:column; gap:7px; }
.lead-field label{ font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.lead-field input, .lead-field select{
  background:rgba(255,255,255,.04); border:1px solid var(--glass-edge); border-radius:12px;
  color:var(--ink); font-family:var(--body); font-size:15px; padding:13px 15px; outline:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.lead-field input::placeholder{ color:var(--muted); }
.lead-field input:focus, .lead-field select:focus{ border-color:rgba(56,216,255,.55); box-shadow:0 0 0 3px rgba(56,216,255,.12); }
.lead-field select{ appearance:none; cursor:pointer; }
.lead-form .submit{ grid-column:1 / -1; }
.lead-form .submit .btn{ width:100%; justify-content:center; padding:15px; }
.lead-fine{ grid-column:1 / -1; font-size:12px; color:var(--muted); text-align:center; margin-top:2px; }
.lead-ok{ display:none; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:18px 0; }
.lead-ok.show{ display:flex; }
.lead-ok .ok-ring{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(52,224,161,.5); background:rgba(52,224,161,.10); color:#34e0a1; }
.lead-ok .ok-ring svg{ width:28px; height:28px; }
.lead-ok h3{ font-size:22px; }
.lead-ok p{ color:var(--ink-2); max-width:42ch; }

/* footer */
.dg-foot{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08);
  padding:34px 0; background:linear-gradient(180deg, rgba(12,15,21,.72), var(--bg) 70%);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.dg-foot .dg-wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.dg-foot .brand{ cursor:pointer; }
.dg-foot .fnote{ font-size:12.5px; color:var(--muted); }
.dg-foot .fnote a{ color:var(--ink-2); text-decoration:none; transition:color .3s var(--ease); }
.dg-foot .fnote a:hover{ color:var(--cyan); }

/* entrance reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

@media (max-width:600px){
  .dg-hero{ padding-top:calc(78px + env(safe-area-inset-top)); }
  .lead-form{ grid-template-columns:1fr; }
}