:root{--dgc-bg:#14161a;--dgc-navy:#1d2a3a;--dgc-panel:#1e2127;--dgc-ink:#f4f1ea;--dgc-muted:#b8b2a4;--dgc-accent:#f2760a;--dgc-amber:#ffb03a;--dgc-line:#2e333d;--dgc-radius:14px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--dgc-bg);color:var(--dgc-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
a{color:var(--dgc-amber)}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--dgc-amber);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{position:sticky;top:0;background:rgba(20,22,26,.96);border-bottom:3px solid var(--dgc-accent);z-index:10}
.nav{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;min-height:44px;font-weight:900;letter-spacing:.03em;font-size:1.15rem;color:var(--dgc-ink);text-decoration:none;text-transform:uppercase}
.logo span{color:var(--dgc-accent)}
nav.main{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;align-items:center}
nav.main a{display:inline-flex;align-items:center;min-height:44px;padding:10px 2px;color:var(--dgc-ink);text-decoration:none;font-weight:700}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--dgc-amber);text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;padding:0;display:block}
.hero img{width:100%;height:52vh;min-height:340px;object-fit:cover;display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,20,28,.88) 30%,rgba(16,20,28,.25))}
.hero .inner{position:absolute;inset:0;display:flex;align-items:center}
.kicker{display:inline-block;background:var(--dgc-accent);color:#14100a;font-weight:900;padding:3px 12px;border-radius:4px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.hero h1{font-size:clamp(2.3rem,6.5vw,4.1rem);line-height:.98;margin:.3em 0;text-transform:uppercase;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--dgc-amber)}
.lede{font-size:clamp(1.02rem,2.4vw,1.28rem);color:#e8e2d4;max-width:46ch}
.cta{display:inline-block;background:var(--dgc-accent);color:#171106;font-weight:900;padding:14px 26px;border-radius:8px;text-decoration:none;text-transform:uppercase;letter-spacing:.05em}
.cta:hover{transform:translateY(-2px)}
.cta.ghost{background:transparent;color:var(--dgc-ink);border:2px solid #4a505c;margin-left:10px}
section{padding:44px 0}h2{font-size:clamp(1.5rem,4vw,2.25rem);text-transform:uppercase;margin:0 0 8px}
.sub{color:var(--dgc-muted);max-width:64ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px}
.card{background:var(--dgc-panel);border:1px solid var(--dgc-line);border-top:4px solid var(--dgc-accent);border-radius:var(--dgc-radius);padding:22px;color:var(--dgc-ink);text-decoration:none;display:block}
.card h3{margin:.2em 0;text-transform:uppercase}
.card p{color:var(--dgc-muted)}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#171106;background:var(--dgc-amber);padding:2px 8px;border-radius:4px}
.note{background:#0e1013;border:1px dashed #454b57;border-radius:10px;padding:14px 16px;color:var(--dgc-muted)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}
.step{background:var(--dgc-navy);border-radius:var(--dgc-radius);padding:22px}
.step b{color:var(--dgc-amber);font-size:1.6rem}
figure.shot{margin:0}figure.shot img{width:100%;border-radius:var(--dgc-radius);display:block}
figure.shot figcaption{color:var(--dgc-muted);font-size:.92rem;margin-top:8px}
footer.site{border-top:3px solid var(--dgc-accent);padding:32px 0;color:var(--dgc-muted);font-size:.95rem;background:#101216}
footer.site a{color:var(--dgc-muted)}
form.contact{display:grid;gap:12px;max-width:560px}form.contact label{font-weight:700}
form.contact input,form.contact textarea,form.contact select{background:#0e1013;border:1px solid #454b57;border-radius:8px;color:var(--dgc-ink);padding:12px}
form.contact button.send[type="submit"]{background:var(--dgc-accent)!important;color:#171106!important;border:0!important;border-radius:8px!important;font-weight:900;padding:13px 24px;min-height:48px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
/* --- PocketPapi MCP effect: gradient-mesh (Backgrounds, stageable) - palette adaptation --- */
[data-sc-effect="gradient-mesh"]{position:relative;isolation:isolate;overflow:hidden;background:#171d27}
[data-sc-effect="gradient-mesh"]::before{content:"";position:absolute;inset:-35%;z-index:-1;background:radial-gradient(circle at 20% 30%,#f2760a 0 10%,transparent 38%),radial-gradient(circle at 82% 72%,#31517a 0 10%,transparent 36%);filter:blur(30px);opacity:.38;animation:sc-mesh 16s ease-in-out infinite alternate}
@keyframes sc-mesh{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){[data-sc-effect="gradient-mesh"]::before{animation:none}}
/* --- PocketPapi MCP effect: fade-up-reveal (Scroll reveals, stageable) --- */
[data-sc-effect="fade-up"]{opacity:0;transform:translateY(18px);transition:opacity 600ms ease,transform 600ms ease}
[data-sc-effect="fade-up"].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-sc-effect="fade-up"]{opacity:1;transform:none;transition:none}}
/* --- PocketPapi MCP effect: staggered-list (Scroll reveals, stageable) --- */
[data-sc-effect="stagger"] [data-sc-stagger-item]{opacity:0;transform:translateY(12px);transition:opacity 450ms ease,transform 450ms ease;transition-delay:calc(var(--sc-index,0)*var(--sc-motion-stagger,70ms))}
[data-sc-effect="stagger"].is-visible [data-sc-stagger-item]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-sc-effect="stagger"] [data-sc-stagger-item]{opacity:1;transform:none;transition:none}}
/* --- PocketPapi MCP effect: hover-lift-card (Micro-interactions, stageable) --- */
[data-sc-effect="hover-lift"]{transition:transform 180ms ease,box-shadow 180ms ease}
[data-sc-effect="hover-lift"]:hover,[data-sc-effect="hover-lift"]:focus-visible{transform:translateY(-5px);box-shadow:0 16px 30px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){[data-sc-effect="hover-lift"]{transition:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta:hover{transform:none}}

/* --- Theme-collision hardening (2026-11-08 fix) ---
   /pocketpapi-theme.css loads AFTER this file and sets body/heading colors directly
   (html[data-site-theme="1"] rules). These overrides restore the authored palette. */
html[data-site-theme="1"] body{background:var(--dgc-bg)!important;color:var(--dgc-ink)!important}
html[data-site-theme="1"] :is(h1,h2,h3,h4,h5,h6){color:inherit}
.hero .lede{color:#e8e2d4}
html[data-site-theme="1"] :is(a,button,input,textarea,select):focus-visible{outline:3px solid var(--dgc-amber);outline-offset:2px}