:root{
      --bg:#1e1e1e;
      --text:#f3f5f7;
      --muted:#9aa4af;
      --gold:#c9a227;

      --r:18px;
      --r2:26px;

      --max:1240px;
      --app:430px;

      --line:rgba(255,255,255,.10);
      --soft:rgba(255,255,255,.06);
      --soft2:rgba(255,255,255,.03);

      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --shadow2: 0 10px 34px rgba(0,0,0,.42);
      --shadow3: 0 8px 24px rgba(0,0,0,.36);
    }

    /* Croogla 4F (optional) */
    @font-face{
      font-family:"Croogla 4F";
      src:url("Croogla4F.woff2") format("woff2");
      font-weight:100 900;
      font-style:normal;
      font-display:swap;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Croogla 4F", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font-family:inherit}
    img{max-width:100%;height:auto;display:block}
    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);border:0;
    }

    /* Luxury-tech noise overlay */
    .noise{
      pointer-events:none;
      position:fixed; inset:0;
      opacity:.10;
      mix-blend-mode:overlay;
      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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      background-size:180px 180px;
      z-index:2;
    }

    /* Mobile app frame (PDF will be used on mobile) */
    .appFrame{
      min-height:100%;
      position:relative;
      isolation:isolate;
    }
    @media (max-width: 900px){
      body{background:#141414;}
      .appFrame{
        width:min(100%, var(--app));
        margin:0 auto;
        background:var(--bg);
        box-shadow: var(--shadow);
        border-left:1px solid rgba(255,255,255,.08);
        border-right:1px solid rgba(255,255,255,.08);
      }
    }

    .wrap{
      width:min(100%, var(--max));
      margin:0 auto;
      padding:0 18px;
    }
    @media (max-width: 900px){ .wrap{padding:0 14px;} }

    /* Glass container (everything inside glass) */
    .glass{
      border-radius: var(--r2);
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(1200px 500px at 18% 0%, rgba(201,162,39,.10), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
    }
    .glass::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(800px 340px at 70% 10%, rgba(201,162,39,.10), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }
    .glass > *{ position:relative; z-index:1; }

    /* ===== Screen-only Export Bar (hidden in PDF) ===== */
    .exportBar{
      position:sticky;
      top:0;
      z-index:70;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(30,30,30,.88), rgba(30,30,30,.38));
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .exportRow{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding:12px 0;
    }
    .brandSlot{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .brivoxLogo{
      width:130px;
      height:31px;
      object-fit:contain;
      filter: drop-shadow(0 12px 20px rgba(0,0,0,.55));
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      border-radius: 16px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      color: rgba(243,245,247,.95);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
      box-shadow: 0 10px 26px rgba(0,0,0,.35);
      user-select:none;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.32); background: rgba(0,0,0,.20); }
    .btn.primary{
      background: linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.06));
      border-color: rgba(201,162,39,.35);
    }
    .btn.ghost{ background: rgba(0,0,0,.10); }
    .btn .lucide{ width:18px; height:18px; color: rgba(243,245,247,.95); }
    .btn.primary .lucide{ color: rgba(201,162,39,.95); }

    .doc{ padding:14px 0 18px; }

    /* ===== Pages ===== */
    .page{
      margin: 14px 0;
      padding: 14px;
      break-after: page;
      page-break-after: always;
    }

    /* ===== Per-Page Header ===== */
    .pageTop{
      display:grid;
      grid-template-columns: auto 1fr auto;
      align-items:center;
      gap:10px;
      padding:12px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.10);
    }

    .pageBrand{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .pageBrand img{
      width:130px;
      height:31px;
      object-fit:contain;
    }

    .pageBadge{
      justify-self:center;
      display:inline-flex;
      align-items:center;
      gap:10px;
      border-radius:999px;
      padding:9px 12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      color: rgba(243,245,247,.94);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .pageBadge .lucide{ width:16px;height:16px;color: rgba(201,162,39,.92); }

    .pageContact{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-end;
      flex-wrap:wrap;
      text-align:right;
      color: rgba(154,164,175,.92);
      font-size:12px;
      letter-spacing:.04em;
      white-space:nowrap;
    }
    .pageContact a{ color: rgba(243,245,247,.92); opacity:.92; }
    .pageContact a:hover{ opacity:1; color: rgba(201,162,39,.95); }
    .iconInline{
      display:inline-flex; align-items:center; gap:8px;
    }
    .iconInline .lucide{ width:16px; height:16px; color: rgba(201,162,39,.92); }

    @media (max-width: 520px){
      .pageTop{
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "logo contact"
          "badge badge";
        row-gap:10px;
      }
      .pageBrand{ grid-area:logo; }
      .pageContact{ grid-area:contact; justify-content:flex-end; }
      .pageBadge{ grid-area:badge; justify-self:start; }
    }

    /* ===== Per-Page Footer ===== */
    .pageBottom{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding:12px 12px;
      border-top:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.10);
      margin-top:14px;
      color: rgba(154,164,175,.90);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
      flex-wrap:wrap;
    }
    .metaLine{
      display:flex; align-items:center; gap:10px;
      white-space:nowrap;
    }
    .metaLine .sep{
      width:5px;height:5px;border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 0 6px rgba(201,162,39,.10);
      display:inline-block;
    }

    .pageBody{ padding:14px 12px 2px; }

    /* Typography */
    .kicker{
      display:flex; align-items:center; gap:10px;
      color: rgba(154,164,175,.92);
      font-size:12px;
      letter-spacing:.10em;
      text-transform:uppercase;
      margin:0 0 10px;
    }
    .kDot{
      width:8px;height:8px;border-radius:999px;
      background: var(--gold);
      box-shadow: 0 0 0 6px rgba(201,162,39,.12);
    }

    .h1{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      font-weight:900;
      letter-spacing:.02em;
      font-size: clamp(28px, 4.8vw, 46px);
      line-height:1.02;
      text-transform:uppercase;
    }
    .h1 .gold{ color:var(--gold); }

    .sub{
      margin:10px 0 0;
      color: rgba(154,164,175,.92);
      font-size:14px;
      line-height:1.6;
      max-width: 78ch;
    }

    .sectionTitle{
      margin:0 0 8px;
      font-family: system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:14px;
      color: rgba(243,245,247,.92);
      display:flex; align-items:center; gap:10px;
    }
    .sectionTitle .lucide{ width:18px;height:18px;color: rgba(201,162,39,.92); }

    .p{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.65;
    }

    /* Layout blocks */
    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
      margin-top:12px;
    }
    @media (min-width: 720px){
      .grid.two{ grid-template-columns: 1fr 1fr; }
      .grid.three{ grid-template-columns: repeat(3, 1fr); }
    }

    .card{
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.14);
      padding:12px;
      overflow:hidden;
    }

    .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
    .chip{
      border-radius:999px;
      padding:7px 10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.12);
      color: rgba(243,245,247,.92);
      font-size:12px;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .chip.gold{
      background: rgba(201,162,39,.12);
      border-color: rgba(201,162,39,.25);
    }

    .timeline{ display:flex; flex-direction:column; gap:10px; }
    .step{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.12);
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .step .n{
      width:34px;height:34px;border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.16);
      display:grid;place-items:center;
      flex:0 0 auto;
      color: rgba(243,245,247,.92);
      font-weight:900;
      letter-spacing:.06em;
    }
    .step .t{
      margin:0 0 4px;
      color: rgba(243,245,247,.92);
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:12px;
    }
    .step .d{
      margin:0;
      color: rgba(154,164,175,.92);
      font-size:13px;
      line-height:1.55;
    }

    .figure{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.10);
    }
    .figure img{
      width:100%;
      height:auto !important;
      opacity:1 !important;
      filter:none !important;
      object-fit:contain !important;
      transform:none !important;
    }

    .callout{
      border-radius: 18px;
      border:1px solid rgba(201,162,39,.25);
      background: rgba(201,162,39,.10);
      padding:12px;
    }
    .callout .t{
      margin:0 0 6px;
      color: rgba(243,245,247,.95);
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      font-size:12px;
      display:flex; align-items:center; gap:10px;
    }
    .callout .t .lucide{ width:18px;height:18px;color: rgba(201,162,39,.92); }
    .callout p{ margin:0; color: rgba(154,164,175,.92); font-size:13px; line-height:1.6; }

    @media print{
      html,body{
        background: var(--bg) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .no-print, .noise{ display:none !important; }
      .appFrame{ width:100% !important; margin:0 !important; box-shadow:none !important; border:none !important; }
      .wrap{ width:100% !important; padding:0 !important; }
      .page{ margin:0; padding:10mm; break-after: page; page-break-after: always; }
    }