:root {
  --bg: #fffaf0;
  --paper: #fffdf8;
  --ink: #18252d;
  --muted: #66747b;
  --line: #dfe5dd;
  --coral: #ff735f;
  --orange: #f6b73c;
  --lime: #b5d94c;
  --mint: #66d5b4;
  --blue: #68a7ff;
  --violet: #9a7cf7;
  --pink: #ef76b5;
  --shadow: 0 24px 80px rgba(41, 72, 82, .12);
  --radius-lg: 34px;
  --radius-md: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 7% 5%, rgba(255,115,95,.16), transparent 22rem),
    radial-gradient(circle at 92% 12%, rgba(104,167,255,.16), transparent 25rem),
    radial-gradient(circle at 70% 85%, rgba(102,213,180,.14), transparent 27rem),
    var(--bg);
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(24,37,45,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,37,45,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 88%);
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }

.skip-link { position: absolute; left: 16px; top: -48px; padding: 10px 14px; background: #fff; border-radius: 999px; z-index: 100; }
.skip-link:focus { top: 16px; }
.shell { width: min(1280px, calc(100% - 34px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(18px);
  background: rgba(255,250,240,.76);
  border-bottom: 1px solid rgba(24,37,45,.07);
}
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; overflow: visible; }
.logo-circle { mix-blend-mode: multiply; opacity: .9; }
.logo-coral { fill: var(--coral); }
.logo-blue { fill: var(--blue); }
.logo-lime { fill: var(--lime); }
.brand-name { font-size: 1.22rem; font-weight: 900; letter-spacing: -.035em; }
.topnav { display: flex; align-items: center; gap: 10px; }
.topnav a { text-decoration: none; color: #53636b; font-size: .92rem; font-weight: 650; padding: 10px 14px; border-radius: 999px; transition: .2s ease; }
.topnav a:hover { background: rgba(255,255,255,.75); color: var(--ink); transform: translateY(-1px); }
.topnav a:last-child { background: var(--ink); color: white; }

.hero {
  min-height: 510px;
  padding: 78px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: center;
  gap: 36px;
}
.hero-copy { max-width: 900px; }
.eyebrow, .section-label { margin: 0 0 12px; color: #728078; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; }
.hero h1 { margin: 0; max-width: 900px; font-size: clamp(3rem, 6.3vw, 5.6rem); line-height: .93; letter-spacing: -.07em; }
.hero h1::after { content: ""; display: inline-block; width: .23em; height: .23em; margin-left: .08em; border-radius: 50%; background: var(--coral); vertical-align: .07em; box-shadow: .28em -.14em 0 var(--blue), .15em .22em 0 var(--lime); }
.hero-lead { max-width: 780px; margin: 26px 0 12px; font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: #536269; }
.hero-note, .panel-text { margin: 0; color: var(--muted); font-size: .96rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-tags span { padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(24,37,45,.08); font-size: .86rem; font-weight: 750; box-shadow: 0 8px 22px rgba(41,72,82,.06); }
.hero-tags span:nth-child(1) { box-shadow: inset 4px 0 0 var(--coral), 0 8px 22px rgba(41,72,82,.06); }
.hero-tags span:nth-child(2) { box-shadow: inset 4px 0 0 var(--blue), 0 8px 22px rgba(41,72,82,.06); }
.hero-tags span:nth-child(3) { box-shadow: inset 4px 0 0 var(--lime), 0 8px 22px rgba(41,72,82,.06); }
.hero-decoration { position: relative; aspect-ratio: 1; max-width: 390px; width: 100%; justify-self: end; }
.decor-orbit, .decor-core { position: absolute; border-radius: 47% 53% 58% 42% / 48% 42% 58% 52%; mix-blend-mode: multiply; }
.decor-orbit { inset: 10%; opacity: .72; animation: floaty 7s ease-in-out infinite alternate; }
.orbit-one { background: var(--coral); transform: translate(-15%, -8%) rotate(8deg); }
.orbit-two { background: var(--blue); transform: translate(16%, -3%) rotate(-13deg); animation-delay: -2s; }
.orbit-three { background: var(--lime); transform: translate(1%, 18%) rotate(18deg); animation-delay: -4s; }
.decor-core { width: 22%; height: 22%; left: 39%; top: 39%; background: white; box-shadow: 0 10px 35px rgba(24,37,45,.14); }
@keyframes floaty { to { border-radius: 58% 42% 40% 60% / 38% 60% 40% 62%; transform: translate(2%, 2%) rotate(20deg) scale(1.04); } }

.tool-section { padding: 8px 0 52px; }
.tool-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr); border: 1px solid rgba(24,37,45,.08); background: rgba(255,255,255,.62); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.panel { min-width: 0; }
.controls-panel { padding: 38px 34px 24px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,250,240,.72)); }
.shape-panel { padding: 38px 40px 32px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,252,248,.78)); }
.panel-heading { padding-bottom: 8px; }
.controls-list { display: grid; }
.control-item { padding: 21px 0 18px; border-bottom: 1px solid var(--line); }
.control-item-gender { --accent: #B85F44; }
.control-item-age { --accent: #C6952B; }
.control-item-culture { --accent: #88A12F; }
.control-item-tenure { --accent: #329684; }
.control-item-thinking { --accent: #3476AB; }
.control-item-access { --accent: #6D58B1; }
.control-item-education { --accent: #B64F8F; }
.control-item-origin { --accent: #7C7065; }
.control-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.control-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.control-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
.control-label { margin: 0; font-size: clamp(1rem, 1vw, 1.14rem); font-weight: 800; }
.control-value { min-width: 42px; text-align: right; color: #718078; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.control-range { width: 100%; margin: 13px 0 0; appearance: none; -webkit-appearance: none; height: 38px; background: transparent; }
.control-range:focus { outline: none; }
.control-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, white), var(--line-strong, #ccd4ca)); }
.control-range::-moz-range-track { height: 6px; border: 0; border-radius: 999px; background: #cfd6cc; }
.control-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -10px; width: 26px; height: 26px; border-radius: 50%; background: white; border: 5px solid var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.control-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: white; border: 5px solid var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.control-hint { margin: 10px 0 0; color: var(--muted); font-size: .94rem; }

.shape-topbar { display: grid; grid-template-columns: 1fr minmax(190px, 285px); gap: 24px; align-items: start; }
.team-name-field input { width: 100%; border: 0; border-bottom: 2px solid #d8dfd5; padding: 2px 0 10px; background: transparent; color: #56656c; font-size: 1rem; }
.team-name-field input:focus { outline: none; border-bottom-color: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shape-stage { padding: 8px 0 18px; }
#shape-svg { width: min(100%, 520px); margin: 0 auto; overflow: visible; filter: drop-shadow(0 14px 20px rgba(49,84,91,.08)); }
.chart-grid-line, .chart-axis { fill: none; stroke: #d5ddd3; stroke-width: 1.3; }
.chart-axis { stroke-width: 1.1; }
.chart-average-polygon { fill: none; stroke: #cbd3ca; stroke-width: 1.5; stroke-dasharray: 5 6; }
.chart-wedge { stroke: none; opacity: .23; }
.chart-area { fill: rgba(255,255,255,.28); stroke: #172220; stroke-width: 2.8; stroke-linejoin: round; }
.chart-point { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 2px 3px rgba(24,37,45,.2)); }
.chart-label { font-size: 12px; letter-spacing: .17em; font-weight: 900; text-transform: uppercase; fill: #50615a; }

.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
.metric { min-width: 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.66); border: 1px solid rgba(24,37,45,.07); }
.metric:nth-child(1) { box-shadow: inset 0 4px 0 var(--coral); }
.metric:nth-child(2) { box-shadow: inset 0 4px 0 var(--blue); }
.metric:nth-child(3) { box-shadow: inset 0 4px 0 var(--lime); }
.metric-label { display: block; margin-bottom: 6px; color: #748179; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; font-weight: 800; }
.metric strong { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.05em; line-height: 1; }
.metric-denominator { color: #7d877f; font-size: 1rem; }
.metric-reading-block strong { font-size: clamp(1.4rem, 2.5vw, 1.9rem); letter-spacing: -.02em; }
.summary-block { margin-top: 4px; padding: 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,115,95,.11), rgba(104,167,255,.1), rgba(181,217,76,.11)); }
.summary-block p { margin: 0; font-size: clamp(1rem, 1.35vw, 1.16rem); color: #2a3834; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 22px; }
.btn { border-radius: 999px; padding: 13px 20px; font-weight: 800; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(41,72,82,.12); }
.btn-primary { background: var(--coral); color: white; }
.btn-secondary { background: white; border-color: #d6ddd4; color: #43534d; }

.reading-section { padding: 46px 0 60px; }
.reading-head { max-width: 960px; margin-bottom: 26px; }
.reading-head h2 { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.03; letter-spacing: -.055em; }
.reading-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.reading-card { position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius-md); background: rgba(255,255,255,.74); border: 1px solid rgba(24,37,45,.08); box-shadow: 0 16px 45px rgba(41,72,82,.08); }
.reading-card::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; right: -28px; top: -36px; opacity: .25; }
.reading-card:nth-child(1)::before { background: var(--coral); }
.reading-card:nth-child(2)::before { background: var(--blue); }
.reading-card:nth-child(3)::before { background: var(--lime); }
.reading-card h3 { margin: 0 0 8px; font-size: 1.3rem; }
.reading-card p { margin: 0; color: #586860; }

.contact-band { padding-bottom: 70px; }
.contact-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 38px; border-radius: var(--radius-lg); background: linear-gradient(120deg, #ff8d7b, #ffb56a 38%, #bfe66a 70%, #72d8bd); box-shadow: var(--shadow); }
.contact-card h2 { margin: 0 0 8px; font-size: clamp(1.9rem,3.2vw,2.9rem); line-height: 1; letter-spacing: -.045em; }
.contact-card p:last-child { margin: 0; color: #32423c; }
.contact-link { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; background: var(--ink); color: white; text-decoration: none; font-weight: 800; box-shadow: 0 12px 24px rgba(24,37,45,.2); }

.site-footer { border-top: 1px solid rgba(24,37,45,.08); padding: 20px 0 32px; }
.footer-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; }
.footer-row p { margin: 0; color: #748079; font-size: .9rem; }
.footer-row p:last-child { text-align: right; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-decoration { justify-self: center; max-width: 320px; }
  .tool-grid { grid-template-columns: 1fr; }
  .controls-panel { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .topbar { flex-direction: column; align-items: flex-start; padding: 13px 0; }
  .topnav { gap: 6px; flex-wrap: wrap; }
  .topnav a { padding: 8px 10px; }
  .shape-topbar { grid-template-columns: 1fr; }
  .reading-grid, .footer-row, .contact-card { grid-template-columns: 1fr; }
  .footer-row p:last-child { text-align: left; }
}
@media (max-width: 640px) {
  .shell { width: min(100% - 18px,1280px); }
  .hero { padding: 46px 0 34px; min-height: auto; }
  .hero-decoration { max-width: 250px; }
  .controls-panel, .shape-panel { padding: 26px 18px 22px; }
  .metrics { grid-template-columns: 1fr; }
  .panel-actions { flex-direction: column; }
  .btn { width: 100%; }
  .contact-card { padding: 28px 22px; }
  .chart-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}