/* ==========================================================================
   DATA CONSULTANCY — page layer over the golden system (body.dc).
   A generated glass film plays behind the page as you scroll (dc-film.js);
   the left of every frame is dark by design, so reading panels sit left and
   the film carries the right. Panels are opaque glass: no backdrop blur over
   a moving film (it would re-blur every frame). One infinite animation only
   (the scroll cue).
   ========================================================================== */
body.dc{ background:#05080F; }

/* ---- the film stage ---- */
.dc-film{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#05080F; }
.dc-film picture{ display:contents; }
.dc-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:70% 50%;
  opacity:0; transition:opacity .9s ease;
}
.dc-poster.on{ opacity:1; }
.dc-film #treeCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:auto; }
.dc-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,8,15,.78) 0%, rgba(5,8,15,.46) 36%, rgba(5,8,15,.08) 62%, rgba(5,8,15,0) 78%),
    radial-gradient(120% 90% at 70% 50%, transparent 55%, rgba(3,5,10,.55) 100%);
}
/* the page's sections float over the film: no slab, no scrim */
body.dc .section::before{ display:none; }
body.dc .band-blue, body.dc .band-deep{ border:0; }
body.dc main, body.dc section, body.dc .footer{ position:relative; z-index:1; }

/* ---- reading panels ---- */
body.dc .jpanel{
  background:linear-gradient(160deg, rgba(10,12,20,.84), rgba(6,8,14,.78));
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--gold-line);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,233,184,.06);
}
body.dc .jpanel-hero{ background:transparent; border:0; box-shadow:none; }
.dc-panel{ max-width:640px; }
.dc-wide{ max-width:880px; }
body.dc .dc-panel .jh2{ margin-top:10px; }
body.dc .section{ padding:clamp(80px,12vh,140px) 0; }
body.dc .scene{ min-height:100vh; }
body.dc .scene > .container{ width:100%; }   /* panels sit left; the film carries the right */

/* ---- hero ---- */
.dc-hero .jh1{ font-size:clamp(2.5rem,5.6vw,4.8rem); max-width:13ch; }
.dc-proof{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; }
.dc-proof li{ color:#D9CFB2; font-size:.92rem; letter-spacing:.02em; display:flex; align-items:center; gap:8px; text-shadow:0 1px 12px rgba(4,5,10,.9); }
.dc-star{ color:var(--gold); font-size:.8rem; filter:drop-shadow(0 0 6px rgba(255,215,122,.6)); }

/* ---- pains ---- */
.dc-pain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; }
.dc-pain{ padding:18px 20px; border-radius:16px; background:rgba(255,233,184,.04); border:1px solid var(--gold-line); }
.dc-pain i{ font-style:normal; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.24em; color:var(--gold-deep); display:block; margin-bottom:6px; }
.dc-pain b{ display:block; color:var(--gold-soft); font-weight:600; margin-bottom:4px; }
.dc-pain span{ color:#A79F88; font-size:.92rem; line-height:1.55; }

/* ---- the four stages: glass cards on the spiral wheel ---- */
.dc-anchor{ position:absolute; top:0; scroll-margin-top:0; }
body.dc .scene-deck{ height:400vh; }
body.dc .tile.dc-tile{
  aspect-ratio:auto; height:min(440px,64vh);
  background:linear-gradient(160deg, rgba(14,14,22,.93), rgba(7,8,14,.9));
}
body.dc .tile.dc-tile::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 60% at 100% 0%, rgba(255,215,122,.10), transparent 60%);
}
.dc-tile .tile-txt{ position:absolute; inset:30px 32px 26px; display:flex; flex-direction:column; justify-content:flex-end; }
.dc-tile .tile-txt b{ margin-bottom:10px; }
.dc-tile .tile-txt span{ max-width:none; }
.dc-tile ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:6px; }
.dc-tile li{ color:#D2C8AB; font-size:.9rem; padding-left:22px; position:relative; }
.dc-tile li::before{ content:'\2726'; position:absolute; left:0; top:0; color:var(--gold); font-size:.8rem; }
.dc-price{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--gold-line);
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; color:var(--gold);
}
.dc-price small{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#8d8468; margin-left:6px; }
.dc-price em{ display:block; font-style:normal; font-family:Inter,sans-serif; font-weight:600; font-size:.86rem; color:#CFC3A0; margin-top:4px; }

/* ---- price table ---- */
.dc-table{ margin:26px 0 28px; border-top:1px solid var(--gold-line-strong); }
.dc-tr{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:16px; padding:16px 4px; border-bottom:1px solid var(--gold-line); align-items:center; }
.dc-tr > span{ color:var(--gold-soft); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.02rem; }
.dc-tr > span:first-child{ font-family:Inter,sans-serif; }
.dc-tr b{ display:block; color:#F5E9CB; font-weight:600; }
.dc-tr small{ display:block; color:#948C74; font-family:Inter,sans-serif; font-weight:400; font-size:.84rem; margin-top:2px; }
.dc-tr .dc-none{ color:#6f6852; }
.dc-th > span{ font:600 .7rem/1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep) !important; }

/* ---- MCP servers + AI supercomputers: feature grids inside a panel ---- */
.dc-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0 22px; }
.dc-feat{ padding:18px 18px 20px; border-radius:16px; background:rgba(255,233,184,.04); border:1px solid var(--gold-line); display:grid; gap:6px; align-content:start; min-width:0; }
.dc-feat .dc-ico{ margin-bottom:6px; }
.dc-feat b{ color:#F5E9CB; font-weight:600; }
.dc-feat span:not(.dc-ico){ color:#A79F88; font-size:.9rem; line-height:1.55; }
.dc-feat-6 .dc-feat b::before{ content:'\2726'; color:var(--gold); font-size:.8rem; margin-right:8px; }
body.dc .tlink{ color:var(--gold); font-weight:600; text-decoration:none; }
body.dc .tlink:hover{ text-decoration:underline; }

/* ---- credential row (the seal + tools), under the promises ---- */
.dc-cred{
  margin-top:18px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  padding:24px 26px; border-radius:18px; border:1px solid var(--gold-line-strong);
  background:linear-gradient(160deg, rgba(12,12,20,.9), rgba(6,8,14,.84));
}
.dc-seal{ width:132px; height:132px; filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,215,122,.16)); }
.dc-cred-txt{ display:grid; gap:6px; min-width:0; }
.dc-cred-txt > b{ color:#F5E9CB; font-size:1.08rem; }
.dc-cred-txt > span{ color:#A79F88; font-size:.94rem; line-height:1.6; max-width:62ch; }
.dc-skills{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.dc-skills li{ font-size:.8rem; font-weight:600; padding:.45em .95em; border-radius:999px; color:var(--gold-soft); border:1px solid var(--gold-line); background:rgba(255,233,184,.05); }

/* ---- promises ---- */
.dc-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dc-sym{
  padding:26px 22px; border-radius:18px; text-align:left;
  background:linear-gradient(160deg, rgba(10,12,20,.86), rgba(6,8,14,.8));
  border:1px solid var(--gold-line);
}
.dc-ico{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin-bottom:16px;
  color:var(--gold); border:1px solid var(--gold-line-strong); background:radial-gradient(circle, rgba(255,215,122,.16), transparent 70%); }
.dc-ico svg{ width:22px; height:22px; }
.dc-sym b{ display:block; color:#F5E9CB; font-size:1.05rem; margin-bottom:6px; }
.dc-sym span{ color:#A79F88; font-size:.92rem; line-height:1.55; }
body.dc .sec .jh2{ margin:10px 0 0; }

/* ---- FAQ ---- */
.dc-faq-col{ max-width:760px; }
body.dc details.faq{ background:rgba(8,10,17,.84); border-color:var(--gold-line); box-shadow:none; }
body.dc details.faq summary::after{ color:var(--gold); }

/* ---- the form ---- */
.dc-form-wrap{ max-width:820px; }
.dc-form{ margin-top:24px; }
.dc-form .full{ grid-column:1/-1; }
.dc-chips{ border:0; padding:0; margin:0; display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; }
.dc-chips legend{ font-size:.82rem; font-weight:700; color:var(--t-hi); margin-bottom:10px; padding:0; }
.dc-chips label{ position:relative; cursor:pointer; }
.dc-chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.dc-chips span{
  display:inline-block; padding:.6em 1.15em; border-radius:999px; font-size:.88rem; font-weight:600;
  color:var(--gold-soft); border:1px solid var(--gold-line-strong); background:rgba(255,233,184,.04);
  transition:background .2s, color .2s, border-color .2s;
}
.dc-chips input:checked + span{ background:linear-gradient(120deg,#C98A3E,#FFD77A 60%,#FFE9B8); color:#241804; border-color:transparent; }
.dc-chips input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:3px; }
.dc-form small{ font-weight:400; color:var(--t-mute); }
.dc-form textarea{ min-height:96px; }
.dc-submit{ flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
.dc-fine{ margin:0; font-size:.82rem; color:var(--t-mute); }
.dc-fine a{ color:var(--gold); }

/* ---- small screens: the film centres, panels take the width ---- */
@media (max-width:900px){
  .dc-trust-grid{ grid-template-columns:1fr 1fr; }
  .dc-feat-grid{ grid-template-columns:1fr 1fr; }
  body.dc .scene-deck{ height:340vh; }
  body.dc .tile.dc-tile{ height:auto; min-height:420px; }
  .dc-tile .tile-txt{ inset:24px 22px 22px; }
}
@media (max-width:760px){
  .dc-poster{ object-position:50% 50%; }
  .dc-shade{ background:linear-gradient(180deg, rgba(5,8,15,.55), rgba(5,8,15,.35) 40%, rgba(5,8,15,.6)); }
  .dc-pain-grid{ grid-template-columns:1fr; }
  .dc-tr{ grid-template-columns:1fr 1fr; }
  .dc-tr > span:first-child{ grid-column:1/-1; }
  .dc-th{ display:none; }
  .dc-form.two{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .dc-trust-grid{ grid-template-columns:1fr; }
  .dc-feat-grid{ grid-template-columns:1fr; }
  .dc-cred{ grid-template-columns:1fr; justify-items:start; }
}
@media (prefers-reduced-motion:reduce){
  .dc-poster{ transition:none; }
}