:root{
      --c900:#663d29;
      --c700:#9a674d;
      --c600:#b97c5d;
      --c500:#da926e;
      --c300:#b59d55;
      --c200:#e3c56b;

      --bg0:#06070a;
      --bg1:#0a0d12;
      --bg2:#0d121a;

      --ink:#f6f2ea;
      --muted: rgba(246,242,234,.74);
      --muted2: rgba(246,242,234,.58);

      --line: rgba(227,197,107,.16);
      --line2: rgba(227,197,107,.10);

      --glass: rgba(255,255,255,.06);
      --glass2: rgba(255,255,255,.08);

      --shadow: 0 22px 80px rgba(0,0,0,.58);
      --shadow2: 0 12px 34px rgba(0,0,0,.45);

      --radius: 20px;
      --radius2: 16px;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(900px 520px at 15% -10%, rgba(227,197,107,.22), transparent 58%),
        radial-gradient(860px 520px at 92% -10%, rgba(218,146,110,.16), transparent 60%),
        radial-gradient(920px 520px at 50% 118%, rgba(181,157,85,.12), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
    }

    /* Ambient grid + noise */
    .bg-grid{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .55;
      background:
        radial-gradient(circle at 18% 20%, rgba(227,197,107,.10), transparent 46%),
        radial-gradient(circle at 86% 24%, rgba(218,146,110,.08), transparent 46%),
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: auto, auto, 52px 52px, 52px 52px;
    }
    .bg-noise{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .10;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
    }

    .wrap{ position: relative; z-index: 1; }

    /* Buttons */
    .btn-lyren{
      --bs-btn-padding-x: 1.05rem;
      --bs-btn-padding-y: .74rem;
      --bs-btn-border-radius: 999px;
      --bs-btn-font-weight: 950;
      color: rgba(12,10,9,.98);
      border: 1px solid rgba(227,197,107,.38);
      background: linear-gradient(135deg, rgba(227,197,107,.98), rgba(218,146,110,.88));
      box-shadow: 0 18px 60px rgba(227,197,107,.12), 0 26px 70px rgba(0,0,0,.45);
    }
    .btn-lyren:hover{ filter: brightness(1.03); transform: translateY(-1px); }
    .btn-lyren-outline{
      --bs-btn-padding-x: 1.05rem;
      --bs-btn-padding-y: .74rem;
      --bs-btn-border-radius: 999px;
      --bs-btn-font-weight: 950;
      border: 1px solid rgba(227,197,107,.24);
      background: rgba(255,255,255,.06);
      color: rgba(246,242,234,.92);
      box-shadow: 0 14px 40px rgba(0,0,0,.35);
    }
    .btn-lyren-outline:hover{
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.96);
      transform: translateY(-1px);
    }

    /* Sections */
    .hero{ padding: 5.6rem 0 2.6rem; }
    .section{ padding: 3.4rem 0; }
    .anchor-offset{ scroll-margin-top: 92px; }

    /* Hero Card */
    .hero-card{
      border: 1px solid rgba(227,197,107,.16);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(900px 420px at 10% 0%, rgba(227,197,107,.20), transparent 62%),
        radial-gradient(850px 520px at 92% 12%, rgba(218,146,110,.14), transparent 60%),
        radial-gradient(700px 440px at 55% 112%, rgba(181,157,85,.10), transparent 62%);
      pointer-events:none;
    }
    .hero-inner{ position: relative; padding: 2.2rem; }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      font-weight: 950;
      font-size: .92rem;
      color: rgba(246,242,234,.90);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(227,197,107,.18);
      padding: .46rem .86rem;
      border-radius: 999px;
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
      flex-wrap: wrap;
    }
    .pulse{
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(227,197,107,1);
      box-shadow: 0 0 0 7px rgba(227,197,107,.12);
      display:inline-block;
    }

    h1{
      font-weight: 980;
      letter-spacing: -1.15px;
      margin-top: 1.05rem;
      color: rgba(255,255,255,.96);
      font-size: clamp(2.25rem, 3.35vw + 1rem, 3.65rem);
      line-height: 1.04;
    }
    .hero-lead{
      margin-top: .9rem;
      color: rgba(246,242,234,.74);
      font-size: 1.08rem;
      line-height: 1.64;
      max-width: 80ch;
      font-weight: 650;
    }

    /* Outcome chips */
    .value-strip{
      margin-top: 1.15rem;
      display:flex;
      gap:.55rem;
      flex-wrap: wrap;
      align-items:center;
    }
    .chip{
      border: 1px solid rgba(227,197,107,.14);
      background: rgba(255,255,255,.06);
      border-radius: 999px;
      padding: .46rem .74rem;
      box-shadow: 0 12px 26px rgba(0,0,0,.35);
      font-weight: 900;
      color: rgba(246,242,234,.78);
      font-size: .92rem;
    }
    .chip b{ color: rgba(227,197,107,.98); font-weight: 980; }

    /* Mini grid */
    .cap-grid{
      margin-top: 1.2rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: .8rem;
      max-width: 860px;
    }
    .cap{
      border: 1px solid rgba(227,197,107,.14);
      background: rgba(255,255,255,.06);
      border-radius: 18px;
      padding: .95rem .95rem;
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
      position: relative;
      overflow: hidden;
    }
    .cap:before{
      content:"";
      position:absolute; inset:-1px;
      background: radial-gradient(circle at 20% 20%, rgba(227,197,107,.10), transparent 58%);
      pointer-events:none;
    }
    .cap b{ color: rgba(255,255,255,.94); font-weight: 980; position: relative; }
    .cap small{
      display:block;
      color: rgba(246,242,234,.72);
      font-weight: 650;
      margin-top: .28rem;
      line-height: 1.28;
      position: relative;
    }

    /* Section headings */
    .section-title{
      text-align:center;
      font-weight: 980;
      letter-spacing: -.9px;
      color: rgba(255,255,255,.96);
      font-size: 2.15rem;
      margin: 0;
    }
    .section-sub{
      text-align:center;
      max-width: 105ch;
      margin: .65rem auto 0;
      color: rgba(246,242,234,.70);
      font-weight: 650;
      line-height: 1.55;
    }

    /* Cards */
    .cardx{
      border: 1px solid rgba(227,197,107,.14);
      border-radius: var(--radius);
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow2);
      overflow: hidden;
      height: 100%;
      position: relative;
    }
    .cardx:before{
      content:"";
      position:absolute; inset:-1px;
      background: radial-gradient(circle at 20% 20%, rgba(227,197,107,.08), transparent 60%);
      pointer-events:none;
    }
    .cardx-head{
      position: relative;
      padding: 1.05rem 1.15rem .9rem;
      border-bottom: 1px solid rgba(227,197,107,.10);
      background: rgba(255,255,255,.04);
    }
    .cardx-title{
      margin: 0;
      font-weight: 980;
      letter-spacing: -.4px;
      color: rgba(255,255,255,.93);
      font-size: 1.07rem;
    }
    .meta{
      margin-top: .55rem;
      display:flex;
      gap:.5rem;
      flex-wrap: wrap;
      align-items:center;
      position: relative;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-weight: 950;
      font-size: .82rem;
      color: rgba(246,242,234,.78);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(227,197,107,.14);
      padding: .28rem .62rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .pill strong{ color: rgba(227,197,107,.94); font-weight: 980; }
    .cardx-body{ position: relative; padding: 1.05rem 1.15rem 1.2rem; }

    .bullets{
      margin: .65rem 0 0;
      padding-left: 1.1rem;
      color: rgba(246,242,234,.74);
      font-weight: 650;
    }
    .bullets li{ margin: .45rem 0; }

    /* Showcase outputs */
    .showcase{
      border: 1px solid rgba(227,197,107,.16);
      border-radius: 26px;
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .showcase:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(900px 400px at 18% 10%, rgba(227,197,107,.10), transparent 62%),
        radial-gradient(800px 460px at 90% 18%, rgba(218,146,110,.08), transparent 60%);
      pointer-events:none;
    }
    .show-head{
      position: relative;
      padding: 1.05rem 1.15rem;
      border-bottom: 1px solid rgba(227,197,107,.12);
      background: rgba(255,255,255,.04);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
    }
    .show-title{
      font-weight: 980;
      letter-spacing: -.4px;
      color: rgba(255,255,255,.93);
      margin: 0;
      font-size: 1.05rem;
    }
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      font-weight: 950;
      font-size: .82rem;
      color: rgba(246,242,234,.78);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(227,197,107,.14);
      padding: .3rem .64rem;
      border-radius: 999px;
      white-space: nowrap;
    }
    .spark{
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(227,197,107,1);
      box-shadow: 0 0 0 6px rgba(227,197,107,.10);
      display:inline-block;
    }
    .show-body{ position: relative; padding: 1.1rem; }

    .out-grid{ display:grid; gap: .75rem; }
    .out{
      border: 1px solid rgba(227,197,107,.12);
      background: rgba(0,0,0,.18);
      border-radius: 18px;
      padding: .9rem .95rem;
      box-shadow: 0 16px 40px rgba(0,0,0,.40);
      position: relative;
      overflow: hidden;
    }
    .out:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(circle at 12% 18%, rgba(227,197,107,.12), transparent 62%);
      pointer-events:none;
    }
    .out-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 1rem;
      margin-bottom: .55rem;
      position: relative;
    }
    .out-k{
      display:flex;
      align-items:center;
      gap:.55rem;
      font-weight: 980;
      color: rgba(255,255,255,.92);
      letter-spacing: -.2px;
    }
    .out-k code{
      font-family: var(--mono);
      font-weight: 980;
      font-size: .82rem;
      color: rgba(227,197,107,.92);
      background: rgba(227,197,107,.10);
      border: 1px solid rgba(227,197,107,.16);
      padding: .14rem .45rem;
      border-radius: 999px;
    }
    .out-meta{
      font-weight: 850;
      color: rgba(246,242,234,.62);
      font-size: .86rem;
      position: relative;
    }
    .out-pre{
      margin: 0;
      white-space: pre-wrap;
      color: rgba(246,242,234,.78);
      font-weight: 650;
      line-height: 1.45;
      position: relative;
    }

    /* Process strip */
    .process{
      border: 1px solid rgba(227,197,107,.16);
      border-radius: 26px;
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .process:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(850px 420px at 10% 0%, rgba(227,197,107,.10), transparent 62%),
        radial-gradient(780px 460px at 90% 20%, rgba(218,146,110,.08), transparent 62%);
      pointer-events:none;
    }
    .process-inner{ position: relative; padding: 1.2rem; }
    .step{
      border: 1px solid rgba(227,197,107,.12);
      background: rgba(0,0,0,.18);
      border-radius: 18px;
      padding: .95rem;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      height: 100%;
    }
    .step h4{
      margin: 0;
      font-weight: 980;
      letter-spacing: -.3px;
      color: rgba(255,255,255,.92);
      font-size: 1.05rem;
    }
    .step p{
      margin: .55rem 0 0;
      color: rgba(246,242,234,.74);
      font-weight: 650;
      line-height: 1.55;
    }
    .step .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      margin-top: .7rem;
      font-weight: 950;
      font-size: .82rem;
      color: rgba(227,197,107,.92);
      background: rgba(227,197,107,.10);
      border: 1px solid rgba(227,197,107,.16);
      padding: .25rem .6rem;
      border-radius: 999px;
    }

    /* NEW: Automation highlight card */
    .auto-band{
      border: 1px solid rgba(227,197,107,.18);
      border-radius: 26px;
      background: linear-gradient(135deg, rgba(227,197,107,.10), rgba(218,146,110,.06));
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .auto-band:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(900px 420px at 12% 0%, rgba(227,197,107,.14), transparent 64%),
        radial-gradient(850px 520px at 92% 20%, rgba(218,146,110,.10), transparent 62%);
      pointer-events:none;
    }
    .auto-inner{ position: relative; padding: 1.25rem; }
    .auto-title{
      margin:0;
      font-weight: 980;
      letter-spacing: -.5px;
      color: rgba(255,255,255,.95);
      font-size: 1.25rem;
    }
    .auto-sub{
      margin:.55rem 0 0;
      color: rgba(246,242,234,.72);
      font-weight: 650;
      line-height: 1.6;
      max-width: 95ch;
    }
    .auto-list{
      margin: .85rem 0 0;
      padding-left: 1.15rem;
      color: rgba(246,242,234,.74);
      font-weight: 650;
    }
    .auto-list li{ margin: .42rem 0; }
    .auto-chip{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      margin-top: .85rem;
      padding: .35rem .7rem;
      border-radius: 999px;
      border: 1px solid rgba(227,197,107,.18);
      background: rgba(255,255,255,.06);
      color: rgba(246,242,234,.78);
      font-weight: 900;
      font-size: .86rem;
    }
    .auto-chip b{ color: rgba(227,197,107,.95); font-weight: 980; }

    /* CTA band */
    .cta{
      border: 1px solid rgba(227,197,107,.16);
      border-radius: 26px;
      background: linear-gradient(135deg, rgba(227,197,107,.12), rgba(218,146,110,.08));
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    .cta:before{
      content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(900px 420px at 12% 0%, rgba(227,197,107,.16), transparent 64%),
        radial-gradient(850px 520px at 92% 20%, rgba(218,146,110,.12), transparent 62%);
      pointer-events:none;
    }
    .cta-inner{ position: relative; padding: 1.6rem; }
    .cta h3{
      margin: 0;
      font-weight: 980;
      letter-spacing: -.6px;
      color: rgba(255,255,255,.94);
    }
    .cta p{
      margin: .55rem 0 0;
      color: rgba(246,242,234,.74);
      font-weight: 650;
      line-height: 1.6;
      max-width: 92ch;
    }

    .small-note{
      color: rgba(246,242,234,.64);
      font-size: .92rem;
      font-weight: 650;
      line-height: 1.45;
    }
    .small-note a{ color: rgba(227,197,107,.92); font-weight: 950; text-decoration: none; }
    .small-note a:hover{ text-decoration: underline; }

    @media (max-width: 991px){
      .hero-inner{ padding: 1.45rem; }
      .cap-grid{ grid-template-columns: 1fr; }
      .hero{ padding: 4.7rem 0 2.4rem; }
    }
    @media (prefers-reduced-motion: reduce){
      .btn-lyren, .btn-lyren-outline { transition: none !important; transform: none !important; }
    }