/* HABITVS immersive layer, loaded after site.css.
   Every page lives in one continuous dark space over a field of points (js/immersive.js). One material for
   everything above it: dark glass with a hairline edge. Rules are drawn as points, like the field; the field
   changes its mood with each section and the elements ride its waves. Delete this file and its link to
   return to the light site. */

body {
  --ink:#eceef1;
  --muted:#a1a7af;
  --faint:#7d848d;
  --paper:#060709;
  --soft:#0b0c0f;
  --line:#ffffff1c;
  --glass:rgba(18,19,23,.52);
  --glass-strong:rgba(20,21,25,.72);
  --glass-edge:rgba(255,255,255,.1);
  --panel:#ffffff05;
  --dots:radial-gradient(circle,#ffffff4d 0 .7px,transparent 1px) 0 50%/7px 3px repeat-x;
  background:#060709;
  color:var(--ink);
}

/* ---------- Backdrop ---------- */
.field {position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;pointer-events:none}
html:not(.has-field) body {background:radial-gradient(ellipse 120% 70% at 50% 110%,#1a1c21 0%,#060709 60%) fixed}
body::before {content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 90% 60% at 50% 0%,#ffffff09,transparent 70%)}
.cursor-light {
  position:fixed;left:0;top:0;z-index:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle,rgba(255,255,255,.045) 0%,rgba(255,255,255,.015) 35%,transparent 68%);
  mix-blend-mode:screen;will-change:transform;
}
.cursor-light.is-on {opacity:1}

/* ---------- One continuous space: no bands between sections ---------- */
.home-hero,.page-hero,.closing,.muted,.footer {background:transparent;border:0}
.hero-grid {display:none}
.hero-vig {background:radial-gradient(ellipse at 50% 55%,transparent 35%,#06070999 100%)}
.page-hero {color:#fff}
.footer {position:relative}
.footer::before {content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:3px;background:var(--dots)}
.footer-bottom {border-top:0;background:var(--dots);background-position:0 0}
.skip-link {background:#fff;color:#111}
::selection {background:#e9ebee;color:#0b0c0e}

/* Rules are rows of points, like the field. */
.editorial-row::before,.portfolio-item::before,.faq-item::before {height:3px;top:-1px;background:var(--dots)}
.editorial-row:last-child,.faq-item:last-child {border-bottom:0;background:var(--dots);background-position:0 100%}
.plain-list li,.document-example>div,.technology-controls,.ai-thread-head,.case-summary,.comparison>div,.form-more {border-color:#ffffff14}

/* Headlines catch the light: a soft sheen across the emphasis. */
.is-immersive h1 em,.is-immersive .section-heading h2 em,.is-immersive .closing h2 em {
  background:linear-gradient(100deg,#9aa0a8 0%,#e9ebee 55%,#a7adb5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;
}
.is-immersive h1 em *,.is-immersive .section-heading h2 em *,.is-immersive .closing h2 em * {color:transparent}

/* ---------- Buttons ---------- */
.page-hero .button,.button:not(.button-ghost) {background:#f3f4f6;color:#0b0c0e;border-color:#f3f4f6}
.button,.button-ghost {transition:background .2s,color .2s,border-color .2s,box-shadow .35s}

/* ---------- Navigation: always dark glass ---------- */
.site-header.on-light,.site-header.menu-open {background:rgba(14,15,18,.62);color:#fff;border-color:rgba(255,255,255,.12);box-shadow:0 10px 40px #00000066,inset 0 1px 0 #ffffff14}
.site-header.on-light .menu-toggle,.site-header.menu-open .menu-toggle {border-color:#ffffff26;background:#ffffff0c}
.site-header .nav-links {background:rgba(14,15,18,.94);color:#fff;border-color:#ffffff1f;box-shadow:0 18px 60px #000000a0}
.site-header .nav-links li:last-child a {border-color:#ffffff40}
@media(min-width:901px) {.site-header .nav-links {background:transparent;border:0;box-shadow:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {.site-header.on-light,.site-header.menu-open {background:#141518}}
@media(prefers-reduced-transparency:reduce) {.site-header.on-light,.site-header.menu-open {background:#141518}}

/* ---------- One material: dark glass ---------- */
.technology-demo,.document-example,.audit-example,.ai-screen,.ai-index a,.contact-form,.sector-grid a,.dot-hub li,.guarantee-grid article {
  background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 90px -30px #000000cc,inset 0 1px 0 #ffffff12;
}
.technology-demo,.ai-screen,.document-example,.audit-example {border-radius:16px}
.ai-index .ai-own {background:var(--glass-strong);border-color:#ffffff4d;color:var(--ink)}
.ai-index .ai-own p {color:var(--muted)}
.depth-card {position:relative;transition:box-shadow .4s ease,border-color .3s ease;will-change:rotate}
.depth-card::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 45%);
}
.depth-card:hover::after {opacity:1}
.depth-card:hover {border-color:#ffffff33}
.tag {border-color:#ffffff33}
.editorial-row .deliverable {color:var(--faint)}

/* Inside the screens: surfaces one step lighter than the glass, text in greys. */
.ai-bar {background:#ffffff06}
.ai-panel {background:#ffffff05}
.demo-label,.timeline span,.technology-node p,.ai-meta,.ai-thinking,.ai-fields dt,.ai-docs small,.ai-excerpt cite,.ai-inbox small,.ai-preview,.ai-extract li>span,.ai-log time,.ai-legend,.ai-note,.ai-docs li,.ai-funnel li,.ai-handoff {color:var(--muted)}
.status {border-color:#ffffff33;color:var(--ink)}
.source-chip,.ai-inbox li.is-current {background:#ffffff0a}
.timeline {border-left-color:#ffffff33}
.timeline li:before {background:var(--ink)}
.technology-port {background:#5d636b}
.technology-node.is-active {border-color:var(--ink)}
.technology-node.is-active .technology-port {background:var(--ink);box-shadow:0 0 0 5px #ffffff1a,0 0 18px #ffffff66}
.ai-msg.is-in,.ai-action,.ai-send,.ai-lead {color:#0b0c0e}
.ai-msg.is-in .ai-meta {color:#5a6068}
.ai-msg.is-ai {background:#ffffff0c;border-color:#ffffff17}
.ai-chip {background:#ffffff0a;border-color:#ffffff24;color:#d5d8dc}
.ai-card,.ai-funnel li,.ai-preview-doc,.ai-node,.ai-log li,.ai-excerpt,.ai-docs li[data-state=selected] {background:#ffffff08}
.ai-log li,.ai-extract li {border-color:#ffffff14}
.ai-input {background:#ffffff06;border-color:#ffffff24;color:var(--faint)}
.ai-scan {background:#ffffff12}
.ai-excerpt mark {background:linear-gradient(#ffffff26,#ffffff26) no-repeat 0 0/100% 100%}
.ai-slot {border-color:#ffffff1f}
.ai-preview-doc i,.ai-track {background:#ffffff14}
.ai-doc-total {border-top-color:#ffffff1a}
.ai-scanline {box-shadow:0 0 0 4px #ffffff14,0 0 16px #ffffffaa}
.ai-node::before {background:#0d0e11;border-color:#ffffff40}
.ai-pulse {box-shadow:0 0 0 5px #ffffff22,0 0 14px #ffffffaa}
.ai-bars .is-below .ai-fill {background:#5d636b}
.ai-steps li[data-state=idle] {color:var(--faint)}
.ai-steps li[data-state=idle]::before {background:#3c4148}
.ai-steps li[data-state=active]::before {box-shadow:0 0 0 5px #ffffff1f,0 0 14px #ffffff88}
.ai-handoff {border-color:#ffffff33}

/* ---------- Hero brand mark: floats on the wave and turns toward the cursor ---------- */
.brand-emblem,.page-delta {transform-style:preserve-3d;transform:perspective(900px) translate3d(0,var(--ride,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.brand-emblem .delta-mark {filter:drop-shadow(0 0 28px #ffffff1f)}
.page-delta {color:#ffffff14}

/* ---------- Contact form and dialog ---------- */
.contact-form {border-radius:20px;padding:clamp(22px,4vw,40px)}
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea {background:#ffffff08;color:var(--ink);border-color:#ffffff2e}
.contact-form select option {background:#141518;color:#eceef1}
.contact-form ::placeholder {color:var(--faint)}
.field-hint,.optional,.contact-help,.contact-form label.consent {color:var(--muted)}
.consent input {accent-color:#eceef1}
.form-error {color:#ff9b9b}
.contact-form [aria-invalid=true] {border-color:#ff8080!important}
.contact-form [role=status].is-error {border-color:#ff8080;color:#ffb3b3}
.contact-dialog,.dialog-header {background:#0e0f12;color:var(--ink)}
.contact-dialog {border:1px solid var(--glass-edge)}
.dialog-close {background:transparent;color:var(--ink);border-color:#ffffff2e}

@media (hover:hover) and (pointer:fine) {
  .contact-form input:not([type=checkbox]):hover,.contact-form select:hover,.contact-form textarea:hover {border-color:#ffffff5c}
  .button:not(.button-ghost):hover,.page-hero .button:hover {background:#fff;color:#0b0c0e;border-color:#fff;box-shadow:0 0 40px -6px #ffffff66}
  .button-ghost:hover {background:#ffffff14;border-color:#ffffff66}
  .ai-index a:hover,.sector-grid a:hover {border-color:#ffffff40}
  .dialog-close:hover {background:#ffffff14}
}

@media (prefers-reduced-motion: reduce) {
  .cursor-light {display:none}
}
@media print {
  .field,.cursor-light,body::before {display:none}
  body {background:#fff;color:#111}
}

/* Story on the home page: the active step leads, the screen glows faintly while it changes. */
.story-device .ai-screen {box-shadow:0 40px 120px -40px #000000e6,inset 0 1px 0 #ffffff12,0 0 0 1px #ffffff0d}
.dot-hub-base {background:var(--glass-strong);border-color:#ffffff40}
.dot-node {box-shadow:0 0 0 6px #ffffff14,0 0 18px #ffffff40}
/* Keyboard focus in the brand's own light, clearly visible on the dark space. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {outline-color:#e9ebee}