/* ── 1. Morphing dropdown ─────────────────────────────── */
.s1 { height: 600px; background: var(--gray-0); color: 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.022em; 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: 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: var(--gray-500); }
.s1 .items .trig:is(:hover, [data-hover]), .s1 .items .trig[aria-expanded="true"], .s1 .items .plain:is(:hover, [data-hover]) { color: var(--gray-800); }
.s1 .act { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 550; }
.s1 .cta { background: 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.022em; font-weight: 550; max-width: 13ch; }
.s1 .hero p { margin: 18px 0 0; font-size: 17px; color: 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: var(--gray-800); color: var(--gray-0); }
.s1 .hero .btns span + span { background: var(--gray-50); color: var(--gray-800); }
.dash { align-self: start; background: var(--gray-0); border-radius: 12px; border: 1px solid var(--gray-70); padding: 18px; box-shadow: var(--e3); }
.dash .k { font-size: 12px; color: 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: var(--violet-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, 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, 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: 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: var(--gray-800); }
.dd-it span { display: block; font-size: 13px; color: var(--gray-500); }
.dd-foot { padding: 16px 28px; font-size: 13px; font-weight: 550; color: var(--gray-800); display: flex; gap: 22px; }
.dd-foot span { color: var(--gray-500); font-weight: 500; }
.code { background: var(--gray-860); color: 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: var(--yellow-200); } .code .c { color: var(--gray-500); }
.c-ind { color: var(--violet-500); background: color-mix(in srgb, var(--violet-500) 12%, transparent); } .c-tea { color: var(--aqua-400); background: color-mix(in srgb, var(--aqua-400) 12%, transparent); }
.c-amb { color: var(--yellow-350); background: color-mix(in srgb, var(--yellow-350) 13%, transparent); } .c-ros { color: var(--magenta-400); background: color-mix(in srgb, var(--magenta-400) 12%, transparent); }
.c-sky { color: var(--blue-400); background: color-mix(in srgb, var(--blue-400) 12%, transparent); } .c-sla { color: var(--gray-550); background: color-mix(in srgb, 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; }
}