/* ==========================================================================
   dulus.online — site.css
   The control room. Signal colour: gold accent, enterprise blue signal.

   Editing this file cannot affect dulus.ai, dulus.work, the API, the control
   plane or Fuel. There is no shared runtime between them.

   Everything raised on this page is the `.glass` material from core.css,
   driven through the same four variables (--glass-fill, --glass-rim,
   --lg-lift, --lg-sheen). Nothing here re-implements the material.
   ========================================================================== */

@layer site {
  :root {
    --accent: var(--dulus-gold);
    --accent-soft: var(--dulus-orange);
    --signal: var(--dulus-blue);
    --nav-h: 80px;
  }

  [data-theme="dark"] {
    --mesh-1: rgba(255, 194, 51, 0.15);
    --mesh-2: rgba(77, 171, 247, 0.11);
    --mesh-3: rgba(167, 139, 250, 0.08);
  }
  [data-theme="light"] {
    --mesh-1: rgba(255, 159, 67, 0.15);
    --mesh-2: rgba(77, 171, 247, 0.12);
    --mesh-3: rgba(167, 139, 250, 0.09);
  }

  /* The pre-relaunch hero is still in the markup as a no-JS-safe fallback for
     crawlers; the control-room hero below replaces it visually. */
  .hero--legacy {
    display: none !important;
  }

  /* ======================================================================
     CONTROL ROOM HERO
     ====================================================================== */

  .control-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* core.css pulls <main> up under the floating nav capsule; this gives the
       height back so the copy starts where it always did. */
    padding-block: calc(var(--nav-h) + clamp(58px, 7vw, 104px))
      clamp(48px, 6vw, 84px);
    border-bottom: var(--bw) solid var(--line);
    background:
      radial-gradient(
        circle at 82% 16%,
        color-mix(in oklab, var(--signal) 15%, transparent),
        transparent 32%
      ),
      radial-gradient(
        circle at 12% 78%,
        color-mix(in oklab, var(--dulus-green) 8%, transparent),
        transparent 34%
      ),
      linear-gradient(180deg, var(--hero-wash), var(--bg));
  }

  .control-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(38px, 6vw, 76px);
    align-items: center;
  }
  .control-hero__grid > *,
  .control-hero__copy,
  .control-hero__visual {
    min-width: 0;
  }
  @media (min-width: 1040px) {
    .control-hero__grid {
      grid-template-columns: minmax(0, 0.82fr) minmax(550px, 1.18fr);
    }
  }

  .control-hero__copy {
    display: grid;
    gap: var(--s-5);
  }

  .control-hero__title {
    display: grid;
    gap: 3px;
    margin-top: var(--s-2);
    font-size: clamp(2.8rem, 5.8vw, 5.2rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 0.97;
  }
  .control-hero__title > span {
    display: block;
  }
  .control-hero__copy .lede {
    max-width: 59ch;
  }
  .control-hero__cta {
    gap: var(--s-3);
  }

  .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--dulus-green);
    box-shadow:
      0 0 0 5px rgba(0, 255, 163, 0.08),
      0 0 18px rgba(0, 255, 163, 0.45);
    animation: dulus-pulse 2.4s var(--ease) infinite;
  }

  .control-hero__status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: var(--ink-3);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .control-hero__status span:first-child i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--dulus-green);
    box-shadow: 0 0 10px currentColor;
  }

  .control-hero__visual {
    position: relative;
    padding: 34px 0 42px;
  }

  .control-hero__bird {
    position: absolute;
    z-index: -1;
    width: min(43%, 280px);
    top: -14%;
    right: -1%;
    opacity: 0.34;
    filter: drop-shadow(0 18px 40px rgba(255, 144, 26, 0.22));
    animation: dulus-float 14s var(--ease) infinite;
  }

  /* The product window is deliberately near-opaque: it holds a real UI
     screenshot, and blurring the page through it would fight the pixels. The
     glass reads at the frame instead — rim, edge light and cast shadow.

     It also stays dark in the light theme on purpose. It is a bezel around a
     dark-mode application, exactly like `.terminal`; recolouring the frame
     while the pixels inside stay dark would look broken, not light. */
  .product-window {
    overflow: hidden;
    margin: 0;
    border-radius: var(--r-xl);
    background: #060608;
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px color-mix(in oklab, var(--signal) 20%, transparent),
      0 36px 96px -30px rgba(0, 0, 0, 0.95);
    transform: perspective(1400px) rotateY(3.5deg) rotateX(1deg);
    transition: transform var(--dur-4) var(--ease-out);
  }
  .control-hero__visual:hover .product-window {
    transform: perspective(1400px) rotateY(1.2deg) rotateX(0.3deg);
  }

  /* Pinned dark alongside the frame it belongs to — a light titlebar above a
     dark screenshot reads as a rendering fault, not as a light theme. */
  .product-window__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.035);
    font-size: 10px;
  }
  .product-window img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8.4;
    object-fit: cover;
    object-position: top left;
  }

  .control-hero__float {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: min(270px, 70%);
    display: grid;
    gap: 3px;
    padding: 15px 17px;
    border-radius: var(--r-md);
    background: linear-gradient(
        color-mix(in oklab, var(--dulus-green) 9%, var(--glass-tint)),
        transparent
      ),
      var(--glass);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
      inset 0 0 0 1px rgba(0, 255, 163, 0.22),
      0 22px 58px -26px rgba(0, 255, 163, 0.34);
    animation: dulus-float 10s var(--ease) infinite;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .control-hero__float {
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      backdrop-filter: blur(24px) saturate(180%);
    }
  }
  .control-hero__float > span {
    color: var(--green-ink);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .control-hero__float strong {
    color: var(--ink);
    font-size: var(--t-sm);
  }
  .control-hero__float small {
    color: var(--ink-3);
    font-size: 9px;
  }

  /* ======================================================================
     SURFACE RAIL — the real product surfaces, one cell each
     ====================================================================== */

  .surface-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(42px, 6vw, 78px);
    padding: 1px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--line);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  .surface-rail li {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 14px 15px;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    transition: background var(--dur-2) var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .surface-rail li {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .surface-rail li:hover {
    background: linear-gradient(var(--glass-tint-hi), transparent),
      var(--glass);
  }
  .surface-rail li span {
    color: var(--accent);
    font: 700 9px/1 var(--font-mono);
  }
  .surface-rail li strong {
    overflow: hidden;
    color: var(--ink-2);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ======================================================================
     LEGACY HERO PRIMITIVES (kept for the hidden fallback markup)
     ====================================================================== */

  .hero {
    position: relative;
    padding-block: clamp(56px, 9vw, 112px) clamp(64px, 9vw, 120px);
    overflow: clip;
  }
  .hero__inner {
    display: grid;
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
    grid-template-columns: 1fr;
  }
  @media (min-width: 1040px) {
    .hero__inner {
      grid-template-columns: 0.95fr 1.05fr;
    }
  }
  .hero__copy {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }
  .hero__title {
    margin-top: var(--s-2);
    letter-spacing: -0.045em;
    line-height: 1;
  }
  .hero__cta {
    gap: var(--s-3);
  }
  .hero__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-5);
    margin-top: var(--s-2);
    padding-top: var(--s-5);
    border-top: var(--bw) solid var(--line);
  }
  @media (min-width: 620px) {
    .hero__proof {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .hero__proof li {
    display: grid;
    gap: 2px;
  }
  .hero__proof strong {
    font-family: var(--font-display);
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .hero__proof span {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ======================================================================
     MISSION CONSOLE
     ====================================================================== */

  .console {
    border-radius: var(--r-xl);
    overflow: hidden;
    background: radial-gradient(
        120% 90% at 100% 0%,
        color-mix(in oklab, var(--accent) 11%, transparent) 0%,
        transparent 60%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-3);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .console {
      -webkit-backdrop-filter: blur(26px) saturate(180%);
      backdrop-filter: blur(26px) saturate(180%);
    }
  }

  .console__bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 14px 17px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .console__title {
    margin-inline: auto;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .console__objective {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 21px 21px 16px;
  }
  .console__label {
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .console__obj {
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 4px;
  }
  .console__pct {
    font-family: var(--font-display);
    font-size: var(--t-2xl);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .console__roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 0 21px 18px;
  }

  .role {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  .role div {
    display: grid;
    gap: 0;
    min-width: 0;
  }
  .role strong {
    font-size: var(--t-sm);
    font-weight: 600;
  }
  .role span {
    font-size: var(--t-xs);
  }

  .role__badge {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 700;
    color: #12100e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .role__badge--n {
    background: var(--dulus-amber);
  }
  .role__badge--o {
    background: var(--dulus-blue);
  }
  .role__badge--a {
    background: #a78bfa;
  }

  .console__steps {
    display: grid;
    gap: 8px;
    padding: 0 21px 18px;
    min-height: 236px;
    align-content: start;
  }

  .step {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-size: var(--t-sm);
  }
  html.js .step {
    animation: step-in 0.42s var(--ease-out) both;
  }
  .step__n {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-4);
  }
  .step__txt {
    color: var(--ink-2);
    min-width: 0;
  }
  .step__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    white-space: nowrap;
  }
  .step__tag--plan {
    background: color-mix(in oklab, var(--dulus-blue) 18%, transparent);
    color: var(--dulus-blue);
  }
  .step__tag--code {
    background: color-mix(in oklab, #a78bfa 20%, transparent);
    color: #a78bfa;
  }
  .step__tag--review {
    background: color-mix(in oklab, var(--dulus-orange) 20%, transparent);
    color: var(--dulus-orange);
  }
  .step__tag--active,
  .step__tag--done {
    background: color-mix(in oklab, var(--dulus-green) 16%, transparent);
    color: var(--green-ink);
  }

  .step--active {
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--dulus-green) 42%, transparent);
  }

  @keyframes step-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .console__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 15px 21px;
    border-top: var(--bw) solid var(--line);
    background: var(--glass-tint);
    font-size: var(--t-xs);
  }

  /* ======================================================================
     STRIP + LOOP
     ====================================================================== */

  .strip__label {
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--s-5);
  }

  .loop {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .loop__step {
    position: relative;
    gap: var(--s-3);
  }
  .loop__n {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    color: var(--accent);
  }

  .note {
    padding: 13px 15px;
    border-left: 2px solid var(--dulus-yellow);
    background: color-mix(in oklab, var(--dulus-yellow) 9%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--t-sm);
    color: var(--ink-2);
  }

  /* ======================================================================
     PLANS
     ====================================================================== */

  .plans {
    display: grid;
    gap: var(--s-4);
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .plan {
    position: relative;
    gap: var(--s-4);
  }
  .plan--hi {
    --glass-fill: color-mix(in oklab, var(--accent) 10%, var(--glass-tint));
    background: radial-gradient(
        130% 108% at 100% 0%,
        color-mix(in oklab, var(--accent) 15%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(var(--glass-fill), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent),
      0 20px 60px -28px rgba(255, 194, 51, 0.45);
  }

  .plan__tag {
    position: absolute;
    top: -1px;
    right: 20px;
    transform: translateY(-50%);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(
      165deg,
      color-mix(in oklab, var(--accent) 60%, white 8%),
      var(--accent-soft)
    );
    box-shadow: 0 8px 22px -10px rgba(255, 194, 51, 0.85);
    color: #12100e;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .plan__head {
    display: grid;
    gap: 8px;
    justify-items: start;
  }
  .plan__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .plan__price--custom {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  }
  .plan__unit {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-2);
  }
  .plan__per {
    font-family: var(--font-mono);
    font-size: var(--t-md);
    font-weight: 500;
    color: var(--ink-4);
    letter-spacing: 0;
  }
  .plan__usd {
    font-size: var(--t-xs);
    color: var(--ink-2);
  }
  .plan__offer {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--signal) 11%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 36%, transparent);
    font-size: var(--t-xs);
    color: var(--signal-ink);
  }
  .plan__offer strong {
    font-size: var(--t-sm);
  }
  .plan__pitch {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }
  .plan__fuel {
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
  }

  .plan__list {
    margin-block: 0 auto;
  }
  .plan__list li {
    font-size: var(--t-xs);
  }

  .plans__note {
    margin-top: var(--s-6);
    font-size: var(--t-xs);
    max-width: 74ch;
    margin-inline: auto;
  }

  /* ======================================================================
     CTA + FOOTER
     ====================================================================== */

  .cta {
    position: relative;
    overflow: hidden;
    border-top: var(--bw) solid var(--line);
  }
  .cta__title {
    margin-bottom: var(--s-4);
  }
  .cta__row {
    justify-content: center;
    margin-top: var(--s-6);
  }

  .footer__blurb {
    margin-block: var(--s-4);
    max-width: 42ch;
  }
  .footer__social {
    gap: var(--s-2);
  }

  /* ======================================================================
     NARROW VIEWPORTS
     ====================================================================== */

  @media (max-width: 760px) {
    .control-hero {
      /* Still has to clear the floating capsule that <main> is pulled under. */
      padding-top: calc(var(--nav-h) + 22px);
    }
    .control-hero__title {
      font-size: clamp(2.45rem, 12.5vw, 3.7rem);
    }
    .control-hero__cta .btn {
      width: 100%;
    }
    .control-hero__visual {
      padding-top: 54px;
      padding-bottom: 0;
    }
    .product-window,
    .control-hero__visual:hover .product-window {
      transform: none;
    }
    .control-hero__float {
      position: relative;
      right: auto;
      width: calc(100% - 24px);
      margin: -17px 12px 0;
      animation: none;
    }
    .surface-rail {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 380px) {
    .control-hero__title {
      font-size: 2.42rem;
    }
    .product-window__bar .mono {
      max-width: 148px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}