/* Obsidian theme — dark evidence surface.
   Third theme layer over home.css and home-refine.css. Colour, texture, radius
   and motion only: layout, type scale and the Japanese phrase rules are left to
   home-refine.css so the recorded 320-1440 checks stay comparable.
   Reference: obsidianui.dev (dark glass, spotlight cards, dotted grid, glow
   scroll indicator, magnetic tabs). Principles only; no code, asset or font. */
:root{
  --paper:#07080b;--surface:#0c0e13;--raised:#11141b;--ink:#eef1f6;--muted:#98a1b2;
  --line:#1d212b;--edge:#272c38;--soft:#12151c;
  --navy:#090b10;--navy-2:#11141b;
  --green:#54e0b2;--green-deep:#1d8f72;--green-soft:#0f2a24;
  --red:#ff7a7a;--red-soft:#2a1416;--amber:#f5c26b;--amber-soft:#2a2013;
  --glow:rgba(84,224,178,.16);--dot:rgba(148,163,184,.13);
  --radius:16px;--radius-s:10px;
  color-scheme:dark
}

/* Page ground: obsidian with a dotted grid that fades out of the fold. */
body{background:var(--paper);color:var(--ink)}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(var(--dot) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0,#000 8%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 0,#000 8%,transparent 72%)
}
.site-header,main,.footer,.skip{position:relative;z-index:1}
::selection{background:rgba(84,224,178,.24);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.skip{background:var(--raised);color:var(--ink);border:1px solid var(--edge);border-radius:var(--radius-s)}

/* Glowing scroll indicator, above the sticky header. */
.scroll-glow{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;background:transparent}
.scroll-glow i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  box-shadow:0 0 12px rgba(84,224,178,.75),0 0 3px rgba(84,224,178,.9)
}

/* Header: dark glass instead of a paper rule. */
.site-header{background:rgba(7,8,11,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.brand{color:var(--ink)}
.brand-mark{background:linear-gradient(145deg,var(--green),var(--green-deep));color:#04120d;border-radius:8px;font-weight:800}
.desktop-nav a{color:var(--muted)}
.desktop-nav a:hover,.text-link:hover{color:var(--green)}
.nav-git{border:1px solid var(--edge);border-radius:var(--radius-s);color:var(--ink)!important;background:var(--raised)}
.nav-git:hover{border-color:var(--green-deep)}
.mobile-nav summary{border:1px solid var(--edge);border-radius:var(--radius-s);background:var(--raised);color:var(--ink)}
.mobile-nav>div{background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius-s);box-shadow:0 24px 60px rgba(0,0,0,.6)}

/* Eyebrow and buttons: arrow-fill primary, quiet outline secondary. */
.eyebrow{color:var(--green)}
.eyebrow>span{background:var(--green);box-shadow:0 0 8px var(--green)}
.button{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:var(--radius-s);background:var(--raised);color:var(--ink);isolation:isolate}
.button:hover{border-color:var(--green-deep)}
.button.primary{background:linear-gradient(140deg,#1a5f4e,#0d2a24);border-color:#2d7563;color:#f2fffb;box-shadow:0 10px 30px rgba(10,60,48,.45)}
.button.primary span{color:var(--green);display:inline-block}
.button::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(120deg,transparent,rgba(84,224,178,.22),transparent);
  transform:translateX(-100%)
}
.text-link{color:var(--ink);text-decoration-color:var(--edge)}

/* Hero: aurora bloom behind the real workbench capture. */
.hero{background:transparent;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-40% -10% auto -10%;height:120%;pointer-events:none;
  background:radial-gradient(52% 44% at 22% 8%,rgba(84,224,178,.16),transparent 68%),
             radial-gradient(44% 40% at 88% 0,rgba(96,130,255,.12),transparent 70%)
}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--ink)}
.hero h1 em{background:linear-gradient(100deg,var(--green),#8fe8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note,.lead{color:var(--muted)}

/* Product captures are light images: frame them, never recolour them. */
.product-shot{border-top:0}
.shot-chrome{border-bottom:1px solid var(--line);color:var(--muted);background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;border:1px solid var(--edge);border-bottom:1px solid var(--line)}
.shot-window{border:1px solid var(--edge);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:var(--surface);box-shadow:0 30px 70px rgba(0,0,0,.55)}
/* The capture is a bright object on a dark page: seat it with a soft halo. */
.hero-shot .shot-window,.workbench-shot .shot-window{box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 90px -34px rgba(84,224,178,.45)}
.product-actual{background:var(--surface)}
.product-shot figcaption{color:var(--muted)}

/* Signature moment: the one decision that moves through the system. */
.signature-section{background:var(--navy);color:var(--ink);border-block:1px solid var(--line)}
.signature-section .signature-head .eyebrow{color:var(--green)}
.signature-section .signature-head h2{color:#fff}
.signature-section .signature-head p:last-child{color:var(--muted)}
.signature-moment{border:1px solid var(--edge);border-radius:var(--radius);background:var(--edge);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sig-step{background:var(--raised);color:var(--ink);border-right:1px solid var(--line)}
.sig-step.verdict{background:linear-gradient(160deg,#1d1216,#120d10)}
.sig-no,.sig-label{color:var(--green)}
.verdict .sig-label{color:var(--red)}
.sig-step strong{color:#fff}
.sig-step small{color:var(--muted)}
.verdict small{color:#d7a9a9}
.signature-line{background:var(--edge)}
.signature-line i{background:var(--green);box-shadow:0 0 10px rgba(84,224,178,.8)}
@keyframes trust-pass{0%{width:0;background:var(--green)}70%{width:68%;background:var(--green)}100%{width:100%;background:var(--red)}}
@keyframes trust-pass-mobile{0%{height:0;background:var(--green)}70%{height:68%;background:var(--green)}100%{height:100%;background:var(--red)}}
.signature-outcome{color:var(--muted)}
.signature-outcome strong{color:#fff}
.signature-outcome code{color:var(--green)}

/* Records: glass panels on the obsidian ground. */
.section{border-top:1px solid var(--line)}
.story,.workbench,.faq{background:var(--surface)}
.examples,.start{background:var(--navy-2)}
.scope{background:transparent}
.story-row+.story-row{border-top:1px solid var(--line)}
.story-copy h2,.sample-copy h2,.workbench-copy h2,.scope-grid h2,.start-grid h2,.faq-grid h2,.film-grid h2{color:var(--ink)}
.product-crop{border:1px solid var(--edge);border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 56px rgba(0,0,0,.45)}
.decision-proof{border:1px solid #3a2226;border-radius:var(--radius);background:linear-gradient(165deg,#181014,#0d0b0e)}
.proof-top{border-bottom:1px solid #332124;color:var(--muted)}
.proof-top b{color:var(--red)}
.decision-proof h3{color:#fff}
.decision-proof>p{color:#c9b6b8}
.decision-proof dl{border-top:1px solid #332124}
.decision-proof dt,.decision-proof dd{border-bottom-color:#2a1c1f}
.decision-proof dt{color:var(--muted)}
.decision-proof dd{color:#f0dede}
.decision-proof small{color:#a58a8d}

/* Decision samples: magnetic tab rail over a glass panel. */
.sample-legend{border:1px solid var(--edge);border-radius:var(--radius-s);overflow:hidden}
.sample-legend span{border-right:1px solid var(--edge);color:var(--muted)}
.preview{background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius);box-shadow:0 26px 60px rgba(0,0,0,.45)}
.sample-tabs{position:relative;background:var(--surface);border-bottom:1px solid var(--line)}
.sample-tabs button{position:relative;z-index:1;border-right:1px solid var(--line);color:var(--muted);background:transparent}
.sample-tabs button:hover{color:var(--ink)}
/* Without the rail (no JS) the selected tab stays legible on its own. */
.sample-tabs button[aria-selected=true]{background:var(--green-soft);color:var(--green);border-color:var(--line)}
/* With the rail, the dividers give way to a floating pill. */
.sample-tabs.has-glide{padding:6px;gap:4px}
.sample-tabs.has-glide button{border:0;border-radius:8px}
.sample-tabs.has-glide button[aria-selected=true]{background:transparent;color:#04120d}
.tab-glide{
  position:absolute;top:0;left:0;width:0;height:0;z-index:0;pointer-events:none;opacity:0;border-radius:8px;
  background:linear-gradient(140deg,var(--green),var(--green-deep));
  box-shadow:0 0 22px rgba(84,224,178,.35)
}
.sample-panel h3{color:#fff}
.sample-kicker{color:var(--muted)}
.status{border-radius:6px;background:var(--red-soft);color:var(--red);border:1px solid #452226}
.sample-panel[data-decision=review] .status{background:var(--amber-soft);color:var(--amber);border-color:#453718}
.sample-panel[data-decision=allow] .status{background:var(--green-soft);color:var(--green);border-color:#1b4a3e}
.reason{border-left:2px solid var(--green)}
.reason b{color:var(--ink)}
.technical{border-top:1px solid var(--line);color:var(--muted)}
.technical dt,.technical dd{border-bottom-color:var(--line)}
.technical dd{color:var(--ink)}
.sample-disclosure,.execution,.micro{color:var(--muted)}
.sample-disclosure a{color:var(--green)}

/* Film and code: already dark, retuned to the same obsidian family. */
.workbench-shot{border-top:0}
.film-section{background:var(--navy);border-top:1px solid var(--line)}
.film-grid .eyebrow{color:var(--green)}
.film-grid h2{color:#fff}
.film-grid>div>p:not(.eyebrow),.transcript p{color:var(--muted)}
.film-card{background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden}
.film-stage video{background:var(--navy)}
.film-splash span{background:rgba(7,8,11,.82);color:#fff;border:1px solid var(--edge);border-radius:var(--radius-s);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.film-card figcaption{border-top:1px solid var(--line);color:var(--muted)}
.code-box{background:var(--raised);border:1px solid var(--edge);border-radius:var(--radius);color:var(--ink);overflow:hidden}
.code-bar{border-bottom:1px solid var(--line);color:var(--muted)}
.copy{border:1px solid var(--edge);background:var(--surface);color:var(--ink);border-radius:8px}
.copy:hover{border-color:var(--green-deep);color:var(--green)}
.code-box pre{color:#b7f0d9}
.copy-status{color:var(--muted)}

/* Scope: covered and not-yet-verified stay equally legible. */
.scope-columns{border-color:var(--line)}
.scope-columns article+article{border-left-color:var(--line)}
.scope-icon{border-radius:8px}
.scope-icon.good{background:var(--green-soft);color:var(--green);border:1px solid #1b4a3e}
.scope-icon.info{background:#111a2b;color:#8fb6ff;border:1px solid #23314d}
.scope-columns h3{color:var(--ink)}
.scope-columns ul{color:var(--muted)}

/* FAQ, contact and footer. */
.faq-grid details{border-color:var(--line)}
.faq-grid summary{color:var(--ink)}
.faq-grid summary:after{color:var(--green)}
.faq-grid details p{color:var(--muted)}
.contact-band{background:var(--navy-2);color:var(--ink);border-top:1px solid var(--line)}
.contact-band .portfolio-contact>p:first-child{color:var(--green)}
.contact-band .portfolio-contact h2{color:#fff}
.contact-band .contact-intro,.contact-band .privacy{color:var(--muted)}
.portfolio-contact details{border-color:var(--line)}
.contact-band .portfolio-contact summary{background:var(--raised);color:var(--ink);border:1px solid var(--edge);border-radius:var(--radius-s)}
.contact-band .portfolio-contact input:not([type=checkbox]),.contact-band .portfolio-contact textarea{background:var(--surface);color:var(--ink);border:1px solid var(--edge);border-radius:var(--radius-s)}
.contact-band .portfolio-contact button{background:linear-gradient(140deg,#1a5f4e,#0d2a24);color:#f2fffb;border:1px solid #2d7563;border-radius:var(--radius-s)}
.portfolio-contact :focus-visible{outline-color:var(--green)}
.footer{background:var(--navy)!important;color:var(--muted)!important;border-top:1px solid var(--line)!important}
.footer .brand{color:var(--ink)}
.footer nav{color:var(--muted)}
.footer nav a:hover{color:var(--green)}

/* Spotlight cards: the pointer lights the panel it is over (JS sets --mx/--my). */
.spot{position:relative}
.spot::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 72%)
}
.spot.is-lit::after{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .button::before{transition:transform .5s cubic-bezier(.22,.8,.32,1),opacity .3s}
  .button:hover::before{opacity:1;transform:translateX(100%)}
  .button.primary span{transition:transform .3s cubic-bezier(.22,.8,.32,1)}
  .button.primary:hover span{transform:translateX(4px)}
  .scroll-glow i{transition:transform .12s linear}
  .tab-glide{transition:transform .42s cubic-bezier(.22,.9,.28,1),width .42s cubic-bezier(.22,.9,.28,1),opacity .2s}
  .spot::after{transition:opacity .38s ease}
  .sample-tabs button,.desktop-nav a,.copy,.button,.nav-git{transition:color .22s ease,border-color .22s ease,background-color .22s ease}
  .product-crop,.preview,.film-card,.code-box,.decision-proof{transition:transform .5s cubic-bezier(.22,.8,.32,1),box-shadow .5s ease}
  .product-crop:hover,.preview:hover,.film-card:hover,.code-box:hover,.decision-proof:hover{transform:translateY(-3px)}
  /* Flow-scroll reveal. Applied by JS only, so no-JS and reduced motion render flat. */
  .rise{opacity:0;transform:translateY(22px)}
  .rise.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.32,1)}
}

@media (max-width:820px){
  .sample-tabs:not(.has-glide) button:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sig-step{border-right:0;border-bottom:1px solid var(--line)}
  .sig-step:last-child{border-bottom:0}
}
@media (max-width:600px){
  body::before{background-size:22px 22px}
  .spot::after{background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 72%)}
}

/* Hero facts: four measured numbers, not adjectives. */
.hero-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;margin:26px 0 0;padding:0;max-width:34em}
.hero-facts li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);line-height:1.5}
.hero-facts b{font:700 20px/1.2 ui-monospace,monospace;color:var(--green);letter-spacing:-.02em}

/* The hero visual is the real recording, framed like the workbench capture. */
.hero-film .film-stage{position:relative;border:1px solid var(--edge);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);overflow:hidden;background:var(--navy);
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 90px -34px rgba(84,224,178,.45)}
.hero-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--navy)}
.hero-film .film-splash{position:absolute;inset:0;border:0;padding:0;background:none;cursor:pointer}
.hero-film .film-splash img{width:100%;height:100%;object-fit:cover}
.hero-film .film-splash span{position:absolute;left:20px;bottom:20px;background:rgba(7,8,11,.82);
  color:var(--ink);border:1px solid var(--edge);border-radius:var(--radius-s);padding:11px 16px;
  font-size:13px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-film figcaption{margin-top:10px}

/* Measurement block: the weak numbers get the same weight as the good ones. */
.proof-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--edge);border-radius:var(--radius);overflow:hidden}
.proof-metrics article{background:var(--raised);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.proof-metrics b{font:700 40px/1 ui-monospace,monospace;color:var(--green);letter-spacing:-.03em}
.proof-metrics span{font-size:13px;line-height:1.7;color:var(--muted)}
.proof-metrics .zero{grid-column:1/-1}
.proof-metrics .zero b{color:var(--red)}
.film-section .sample-disclosure{margin-top:18px;font-size:13px}
.film-section .sample-disclosure a{color:var(--green);text-decoration:underline;text-underline-offset:4px}

@media(max-width:820px){
  .proof-metrics{grid-template-columns:1fr 1fr}
  .proof-metrics .zero{grid-column:1/-1}
  .hero-facts{gap:12px 20px}
}
@media(max-width:600px){
  .proof-metrics{grid-template-columns:1fr}
  .proof-metrics b{font-size:34px}
  .hero-facts li{font-size:12px}
  .hero-facts b{font-size:18px}
}