/* =========================================================================
   Styles used ONLY by the kit showcase page (index.html).
   Not required by the app pages — delete this file when you ship.
   ========================================================================= */

.kit-hero{
  background:
    radial-gradient(120% 140% at 88% -10%,rgba(97,114,243,.55),transparent 55%),
    radial-gradient(100% 120% at 5% 110%,rgba(20,184,166,.35),transparent 55%),
    linear-gradient(125deg,var(--plum-900),var(--violet-800) 55%,var(--violet-600));
  color:#fff;padding:var(--sp-9) var(--sp-8);border-radius:var(--r-xl);
  margin-bottom:var(--sp-7);position:relative;overflow:hidden;
}
.kit-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 78% 12%,rgba(255,255,255,.14),transparent 70%);
}
.kit-hero > *{position:relative;z-index:1;}
.kit-hero h1{color:#fff;font-size:var(--fs-4xl);margin-bottom:var(--sp-3);letter-spacing:-.04em;}
.kit-hero p{color:rgba(255,255,255,.78);max-width:640px;font-size:var(--fs-lg);line-height:1.65;}
.kit-hero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6);}
.kit-hero__meta .badge{
  background:rgba(255,255,255,.12);color:#fff;height:30px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(6px);
}

.kit-section{margin-bottom:var(--sp-10);scroll-margin-top:90px;}
.kit-section__head{
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border);
}
.kit-section__head h2{margin:0;}
.kit-section__head p{color:var(--text-subtle);font-size:var(--fs-sm);margin:0;}
.kit-section__num{
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--primary);
  background:var(--violet-50);padding:4px 10px;border-radius:var(--r-full);font-weight:var(--fw-semibold);
}

.kit-block{margin-bottom:var(--sp-6);}
.kit-block__title{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-subtle);margin-bottom:var(--sp-3);
}
.kit-demo{
  border-radius:var(--r-lg);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  padding:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
}
.kit-demo--stack{flex-direction:column;align-items:stretch;gap:var(--sp-5);}
.kit-demo--plain{box-shadow:none;background:transparent;padding:0;}
.kit-demo--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;}

.kit-code{
  margin:var(--sp-2) 0 0;background:var(--plum-900);color:#cfc7e6;
  border-radius:var(--r-md);padding:var(--sp-5);
  font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.75;
  overflow-x:auto;white-space:pre;
}
.kit-code .t{color:#a487fb;}
.kit-code .a{color:#7fd8c8;}
.kit-code .c{color:#6b6383;}

/* Colour swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:var(--sp-3);}
.swatch{
  border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.swatch:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--border),var(--shadow-md);}
.swatch__chip{height:68px;}
.swatch__meta{padding:10px 12px;}
.swatch__name{font-size:var(--fs-xs);font-weight:var(--fw-semibold);}
.swatch__val{font-size:var(--fs-2xs);color:var(--text-subtle);font-family:var(--font-mono);}

/* Specimen tables */
.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.spec-table th{
  text-align:left;padding:9px 12px;color:var(--text-subtle);font-size:var(--fs-xs);
  font-weight:var(--fw-medium);border-bottom:1px solid var(--border);
}
.spec-table td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.spec-table tr:last-child td{border-bottom:0;}
.spec-table td:first-child{width:38%;}
.spec-table code{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--primary);}

/* Icon grid */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:var(--sp-2);}
.icon-cell{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--sp-4) var(--sp-2);
  border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  font-size:var(--fs-2xs);color:var(--text-subtle);text-align:center;
  transition:all var(--dur) var(--ease);
}
.icon-cell i{font-size:19px;color:var(--text);}
.icon-cell:hover{box-shadow:inset 0 0 0 1px var(--violet-200),var(--shadow-sm);color:var(--primary);transform:translateY(-2px);}
.icon-cell:hover i{color:var(--primary);}

/* Rulers */
.ruler{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:11px;font-size:var(--fs-xs);color:var(--text-subtle);}
.ruler__bar{height:14px;background:linear-gradient(90deg,var(--violet-400),var(--violet-600));border-radius:var(--r-xs);}
.radius-demo{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.radius-demo__box{
  width:80px;height:64px;background:var(--violet-50);
  box-shadow:inset 0 0 0 1px var(--violet-100);
  display:grid;place-items:center;font-size:var(--fs-2xs);color:var(--primary);font-weight:var(--fw-semibold);
}
.shadow-demo{display:flex;gap:var(--sp-5);flex-wrap:wrap;}
.shadow-demo__box{
  width:120px;height:80px;background:var(--surface);border-radius:var(--r-md);
  display:grid;place-items:center;font-size:var(--fs-2xs);color:var(--text-subtle);font-weight:var(--fw-semibold);
}

/* Kit page nav */
.kit-toc{
  position:sticky;top:calc(var(--topbar-h) + var(--sp-5));align-self:start;
  width:196px;flex:0 0 196px;font-size:var(--fs-sm);
}
.kit-toc__title{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-subtle);font-weight:var(--fw-semibold);margin-bottom:var(--sp-3);
}
.kit-toc a{
  display:block;padding:7px 12px;border-radius:var(--r-xs);color:var(--text-muted);
  font-weight:var(--fw-medium);
}
.kit-toc a:hover{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-xs);}
.kit-layout{display:flex;gap:var(--sp-7);align-items:flex-start;}
.kit-content{flex:1;min-width:0;}
@media(max-width:1180px){.kit-toc{display:none;}}

/* Phone frame */
.phone{
  width:310px;border:10px solid var(--plum-800);border-radius:42px;background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow-lg);flex:0 0 310px;
}
.phone__bar{
  height:38px;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-muted);
  background:var(--surface);
}
.phone__body{padding:var(--sp-4);background:var(--bg);min-height:440px;}