/* ── 1. Morphing dropdown ─────────────────────────────── */
.s1 { height: 600px; background: var(--gray-0); color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); font-family: var(--font); }
.s1 .nav { position: absolute; left: 0; right: 0; top: 0; height: 68px; display: flex; align-items: center; padding: 0 28px; z-index: 20; }
.s1 .logo { display: flex; align-items: center; gap: 9px; font-weight: 550; font-size: 20px; letter-spacing: -0.03em; margin-right: 26px; text-decoration: none; color: inherit; }
.s1 .items { display: flex; list-style: none; margin: 0; padding: 0; }
.s1 .trig, .s1 .plain { border: 0; background: none; padding: 10px 14px; font-size: 15px; font-weight: 550; color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); cursor: default; border-radius: 8px; text-decoration: none; display: block; transition: color .15s; }
.s1 .items:is(:hover, [data-hover]) .trig, .s1 .items:is(:hover, [data-hover]) .plain { color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); }
.s1 .items .trig:is(:hover, [data-hover]), .s1 .items .trig[aria-expanded="true"], .s1 .items .plain:is(:hover, [data-hover]) { color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); }
.s1 .act { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 550; }
.s1 .cta { background: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); color: var(--gray-0); border-radius: 9999px; padding: 8px 16px; text-decoration: none; }
.s1 .act a { color: inherit; text-decoration: none; }
.s1 .act .cta { color: var(--gray-0); }
.s1 .hero { position: absolute; inset: 0; padding: 140px 28px 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; }
.s1 .hero h3 { margin: 0; font-size: clamp(32px, 4.6cqw, 56px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 550; max-width: 13ch; }
.s1 .hero p { margin: 18px 0 0; font-size: 17px; color: color-mix(in oklab, color-mix(in oklab, var(--violet-650) 55%, var(--blue-550)) 25%, var(--gray-600)); max-width: 40ch; }
.s1 .hero .btns { display: flex; gap: 12px; margin-top: 26px; }
.s1 .hero .btns span { padding: 10px 18px; border-radius: 9999px; font-size: 15px; font-weight: 550; background: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); color: var(--gray-0); }
.s1 .hero .btns span + span { background: var(--gray-50); color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); }
.dash { align-self: start; background: var(--gray-0); border-radius: 12px; border: 1px solid color-mix(in oklab, color-mix(in oklab, var(--violet-70) 55%, var(--blue-80)) 40%, var(--gray-70)); padding: 18px; box-shadow: var(--e3); }
.dash .k { font-size: 12px; color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); }
.dash .v { font-size: 24px; font-weight: 550; letter-spacing: -0.02em; margin-top: 2px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 18px; }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in oklab, color-mix(in oklab, var(--violet-500) 80%, var(--blue-450)) 85%, var(--gray-500)); opacity: .85; }
.bars i:nth-child(3n) { background: var(--aqua-400); }
.dd-root { position: absolute; top: 58px; left: 0; z-index: 30; perspective: 2000px; pointer-events: none; }
.dd-panel { position: relative; transform-origin: 50% -20px; will-change: transform, opacity; opacity: 0; }
.dd-arrow { position: absolute; top: -6px; left: 0; width: 13px; height: 13px; background: var(--gray-0); border-radius: 4px 0 0 0; box-shadow: -1px -1px 0 color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)) 6%, transparent); transform: rotate(45deg); z-index: 2; }
.dd-clip { position: relative; overflow: hidden; background: var(--gray-0); border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)) 6%, transparent), var(--e3); }
.dd-alt { position: absolute; left: 0; right: 0; bottom: 0; background: var(--gray-20); }
.dd-sec { position: absolute; left: 0; top: 0; opacity: 0; max-width: calc(100cqw - 24px); }
.dd-in { padding: 26px 28px 22px; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; }
.dd-h { margin: 0 0 10px; font-size: 13px; font-weight: 550; color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); }
.dd-it { display: flex; gap: 12px; padding: 7px 0; align-items: flex-start; }
.dd-it .ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.dd-it .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-it b { display: block; font-size: 15px; font-weight: 550; color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); }
.dd-it span { display: block; font-size: 13px; color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); }
.dd-foot { padding: 16px 28px; font-size: 13px; font-weight: 550; color: color-mix(in oklab, color-mix(in oklab, var(--blue-810) 50%, var(--violet-810)) 30%, var(--gray-800)); display: flex; gap: 22px; }
.dd-foot span { color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); font-weight: 500; }
.code { background: color-mix(in oklab, color-mix(in oklab, var(--violet-860) 45%, var(--blue-860)) 40%, var(--gray-860)); color: color-mix(in oklab, color-mix(in oklab, var(--violet-200) 65%, var(--blue-150)) 35%, var(--gray-150)); border-radius: 8px; padding: 16px 18px; font: 12px/1.7 var(--font-mono); white-space: pre; overflow: hidden; }
.code .k { color: var(--violet-250); } .code .s { color: var(--aqua-200); } .code .n { color: color-mix(in oklab, var(--yellow-200) 60%, var(--orange-150)); } .code .c { color: color-mix(in oklab, color-mix(in oklab, var(--blue-450) 65%, var(--violet-450)) 20%, var(--gray-500)); }
.c-ind { color: color-mix(in oklab, color-mix(in oklab, var(--violet-500) 80%, var(--blue-450)) 85%, var(--gray-500)); background: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--violet-500) 80%, var(--blue-450)) 85%, var(--gray-500)) 12%, transparent); } .c-tea { color: var(--aqua-400); background: color-mix(in srgb, var(--aqua-400) 12%, transparent); }
.c-amb { color: color-mix(in oklab, color-mix(in oklab, var(--yellow-350) 75%, var(--orange-400)) 95%, var(--gray-400)); background: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--yellow-350) 75%, var(--orange-400)) 95%, var(--gray-400)) 13%, transparent); } .c-ros { color: color-mix(in oklab, var(--magenta-400) 70%, var(--red-450)); background: color-mix(in srgb, color-mix(in oklab, var(--magenta-400) 70%, var(--red-450)) 12%, transparent); }
.c-sky { color: var(--blue-400); background: color-mix(in srgb, var(--blue-400) 12%, transparent); } .c-sla { color: color-mix(in oklab, color-mix(in oklab, var(--blue-500) 90%, var(--violet-500)) 20%, var(--gray-550)); background: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--blue-500) 90%, var(--violet-500)) 20%, var(--gray-550)) 12%, transparent); }
@container (max-width: 700px) {
  .s1 .act, .s1 .hide-sm { display: none; }
  .s1 .nav { padding: 0 12px; } .s1 .logo { margin-right: 6px; } .s1 .logo b { display: none; }
  .s1 .trig, .s1 .plain { padding: 10px 9px; font-size: 13px; }
  .s1 .hero { grid-template-columns: 1fr; padding: 120px 16px 0; } .dash { display: none; }
  .dd-grid { grid-template-columns: 1fr; }
}