/* DCDG company site. Concept A, Beacon: graphite stage, one amber light.
   Tokens first, then base, then components. Transform and opacity only in motion. */

/* 1. Tokens */
:root{
  --bg:#0B0F14;--surface:#141A22;--surface-2:#1B2330;--border:#243041;
  --text:#E8ECF1;--muted:#9AA6B5;--accent:#F2A33C;--accent-text:#F2A33C;--accent-ink:#0F1114;
  --ok:#3DDC97;--warn:#EF5A5A;
  --copper:#C57B3A;--blue:#5B9CFF;--green:#3DDC97;--amber:#F2A33C;
  --glass:rgba(20,26,34,.78);--shadow:0 24px 60px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4);
  --device-bezel:#0a0d12;--device-edge:#2a3342;--device-back:#05070a;
  --font-display:"Space Grotesk",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;
  --t-micro:150ms;--t-icon:280ms;--t-reveal:500ms;--t-idle:2000ms;--t-rest:1000ms;
  --ease-in:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.4,0,1,1);
  --parallax-max:80px;--tilt-max:15deg;--reveal-y:16px;
  --radius:16px;--radius-s:10px;
  --container:1200px;--gutter:24px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#F6F7F9;--surface:#FFFFFF;--surface-2:#EEF1F5;--border:#D9DEE5;
  --text:#0F1114;--muted:#4B5663;--accent-text:#9A5B0F;--ok:#0E7C5B;--warn:#B42323;
  --copper:#9A5B0F;--blue:#2457C5;--green:#0E7C5B;
  --glass:rgba(255,255,255,.8);--shadow:0 24px 60px rgba(15,17,20,.18),0 2px 6px rgba(15,17,20,.12);
  color-scheme:light;
}
@media (max-width:640px){:root{--parallax-max:24px;--gutter:20px}}
html[data-motion="reduced"]{--t-reveal:200ms;--parallax-max:0px;--tilt-max:0deg;--reveal-y:8px}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
html[data-motion="reduced"]{scroll-behavior:auto}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
@media (max-width:640px){body{font-size:16px}}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--accent)}
p{margin:0 0 1em;max-width:64ch}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;margin:0 0 .4em;letter-spacing:-.01em;text-wrap:balance}
h1{font-weight:700;font-size:clamp(40px,5.2vw,64px);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.6vw,40px);line-height:1.1}
h3{font-size:clamp(20px,2vw,24px);line-height:1.25}
h4{font-size:17px;line-height:1.3}
ul,ol{margin:0 0 1em;padding-left:1.2em}
small,.small{font-size:14px;line-height:1.5}
code,.mono{font-family:var(--font-mono);font-size:.92em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--accent);color:var(--accent-ink);border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section--tight{padding:clamp(40px,6vw,72px) 0}
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.section-head p{font-size:clamp(17px,1.4vw,20px);color:var(--muted)}
.lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted);line-height:1.55}
.label{font-family:var(--font-mono);font-size:13px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 18px}
.label::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:2px;flex:none}
.label--plain::before{display:none}
.muted{color:var(--muted)}
.accent{color:var(--accent-text)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
hr.rule{border:0;border-top:1px solid var(--border);margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:600;font-size:16px;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);transition:transform var(--t-micro) var(--ease-in),background-color var(--t-micro),border-color var(--t-micro),color var(--t-micro);white-space:nowrap}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:color-mix(in srgb,var(--accent) 88%,white)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-text)}
.btn--small{padding:9px 14px;font-size:14px}
.btn .ui{width:18px;height:18px}
.btn:hover .ui--arrow{transform:translateX(4px)}
.btn .ui--arrow{transition:transform var(--t-micro) var(--ease-in)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* UI icons */
.ui{display:inline-block;vertical-align:middle;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 3. Demo banner, header, nav */
.demo-banner{background:var(--surface-2);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:center;padding:7px var(--gutter)}
.demo-banner b{color:var(--accent-text);font-weight:500}
.demo-banner b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.header{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand .wordmark{height:22px;width:auto}
@media (max-width:640px){.brand .wordmark{height:19px}}
.brand__desc{font-size:12px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
@media (max-width:900px){.brand__desc{display:none}}
.wordmark{overflow:visible}
.wordmark .wm{stroke:currentColor;fill:none;stroke-width:16;stroke-linejoin:miter;stroke-linecap:butt}
.wordmark .wm-mark{fill:var(--accent)}
.wordmark .wm-cursor{fill:var(--accent);opacity:1}
html.js:not([data-motion="reduced"]) .header .wordmark .wm{stroke-dasharray:1;stroke-dashoffset:1;animation:wm-draw 700ms var(--ease-in) forwards}
html.js:not([data-motion="reduced"]) .header .wordmark .wm:nth-child(2){animation-delay:120ms}
html.js:not([data-motion="reduced"]) .header .wordmark .wm:nth-child(3){animation-delay:240ms}
html.js:not([data-motion="reduced"]) .header .wordmark .wm:nth-child(4){animation-delay:360ms}
html.js:not([data-motion="reduced"]) .header .wordmark .wm-mark{opacity:0;animation:fade-in 300ms var(--ease-in) 700ms forwards}
html.js:not([data-motion="reduced"]) .header .wordmark .wm-cursor{animation:cursor-blink 180ms steps(1) 900ms 4 alternate}
@keyframes wm-draw{to{stroke-dashoffset:0}}
@keyframes fade-in{to{opacity:1}}
@keyframes cursor-blink{from{opacity:1}to{opacity:0}}

.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);transition:color var(--t-micro),background-color var(--t-micro)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]{background:var(--surface-2)}
.nav .btn{margin-left:10px}
.nav a.btn--primary{color:var(--accent-ink)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px;cursor:pointer;line-height:0}
.nav-toggle .ui{width:22px;height:22px}
.nav-toggle .ui-close{display:none}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 100%);height:calc(100dvh - 100%);overflow:auto;z-index:60;background:var(--bg);border-top:1px solid var(--border);flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:40px var(--gutter);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--t-icon) var(--ease-in),transform var(--t-icon) var(--ease-in),visibility 0s var(--t-icon)}
  .nav a{font-family:var(--font-display);font-size:30px;padding:14px 8px;color:var(--text);border-bottom:1px solid var(--border);border-radius:0}
  .nav a[aria-current="page"]{background:none;color:var(--accent-text)}
  .nav .btn{margin:24px 0 0;justify-content:center;font-size:18px;border-bottom:0}
  html.nav-open .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  html.nav-open{overflow:hidden}
  html.nav-open .header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  html.nav-open .nav-toggle .ui-menu{display:none}
  html.nav-open .nav-toggle .ui-close{display:block}
}

/* 4. Reveal and parallax */
html.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--t-reveal) var(--ease-in),transform var(--t-reveal) var(--ease-in);transition-delay:calc(var(--i,0) * 60ms)}
html.js [data-reveal="left"]{transform:translateX(-24px)}
html.js [data-reveal="right"]{transform:translateX(24px)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js[data-motion="reduced"] [data-reveal]{transition-delay:0ms;transform:translateY(8px)}
[data-depth]{will-change:transform}
html[data-motion="reduced"] [data-depth]{transform:none!important}

/* 5. Hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);min-height:min(calc(100vh - 100px),880px);display:flex;align-items:center;perspective:1400px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 70% 40%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%);pointer-events:none}
.hero .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative}
@media (max-width:980px){.hero .container{grid-template-columns:1fr}.hero{min-height:0}}
.hero__copy{position:relative;z-index:2}
.hero h1{margin-bottom:.5em}
.hero .lead{margin-bottom:1.6em}
.hero__stage-wrap{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;transform:perspective(1400px) rotateX(calc(var(--tilt-max) * var(--hero-p,0))) scale(calc(1 - .1 * var(--hero-p,0)));opacity:calc(1 - .6 * var(--hero-p,0));will-change:transform,opacity}
html[data-motion="reduced"] .hero__stage-wrap{transform:none;opacity:1}
.stage{position:relative;aspect-ratio:11/9;transform-style:preserve-3d;perspective:1200px}
@media (max-width:980px){.stage{aspect-ratio:12/9;max-width:620px;margin:0 auto}.stage__phone{left:2%}}
.stage__floor{position:absolute;left:-10%;right:-10%;bottom:-6%;height:70%;transform-origin:50% 100%;transform:rotateX(62deg);background-image:linear-gradient(color-mix(in srgb,var(--border) 90%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 90%,transparent) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(70% 90% at 50% 100%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 90% at 50% 100%,#000 30%,transparent 100%);pointer-events:none}
.stage__beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stage__beam path{fill:none;stroke:var(--accent);stroke-width:.4;stroke-linecap:round}
.stage__beam .beam-glow{stroke-width:2.4;opacity:.18}
html.js:not([data-motion="reduced"]) .stage__beam path{stroke-dasharray:1;stroke-dashoffset:1;animation:beam-draw 1800ms var(--ease-in) 500ms forwards,beam-pulse var(--t-idle) ease-in-out 2300ms infinite alternate}
@keyframes beam-draw{to{stroke-dashoffset:0}}
@keyframes beam-pulse{from{opacity:1}to{opacity:.7}}
html.js:not([data-motion="reduced"]) .stage__beam .beam-glow{animation:beam-draw 1800ms var(--ease-in) 500ms forwards,beam-pulse-glow var(--t-idle) ease-in-out 2300ms infinite alternate}
@keyframes beam-pulse-glow{from{opacity:.22}to{opacity:.1}}
.stage__laptop{position:absolute;left:8%;right:4%;top:6%;transform:translateZ(10px);transform-style:preserve-3d}
.stage__phone{position:absolute;left:-2%;bottom:0;width:26%;transform:translateZ(70px);transform-style:preserve-3d}
.stage__tag{position:absolute;right:2%;bottom:14%;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--glass);border:1px solid var(--border);padding:8px 12px;border-radius:8px;transform:translateZ(40px);backdrop-filter:blur(8px)}
.stage__tag b{color:var(--ok);font-weight:500}
.stage__tag b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
@media (max-width:480px){.stage__tag{display:none}}

/* 6. Devices (CSS 3D frames holding real screenshots) */
.device{position:relative;transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 600ms var(--ease-in);will-change:transform}
html[data-motion="reduced"] .device{transform:none!important;transition:none}
.device img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;background:#0e1116}
.device__screen{position:relative;overflow:hidden;background:#0e1116}
.device__screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 35%,transparent 55%);pointer-events:none}
/* phone */
.phone{aspect-ratio:390/844;background:var(--device-bezel);border-radius:14% / 6.5%;padding:3.2%;box-shadow:var(--shadow),inset 0 0 0 1px var(--device-edge)}
.phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--device-back);transform:translateZ(-8px) scale(1.01);box-shadow:0 0 0 1px var(--device-edge)}
.phone .device__screen{height:100%;border-radius:11% / 5.2%}
.phone__notch{position:absolute;top:2.4%;left:50%;width:34%;height:3.2%;background:#000;border-radius:999px;transform:translateX(-50%);z-index:2}
/* laptop */
.laptop{transform-style:preserve-3d}
.laptop__screen{background:var(--device-bezel);border-radius:14px 14px 3px 3px;padding:12px 12px 16px;box-shadow:var(--shadow),inset 0 0 0 1px var(--device-edge);position:relative}
.laptop__screen::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--device-back);transform:translateZ(-8px) scale(1.005);box-shadow:0 0 0 1px var(--device-edge)}
.laptop__screen .device__screen{aspect-ratio:16/10;border-radius:6px 6px 2px 2px}
.laptop__cam{position:absolute;top:5px;left:50%;width:5px;height:5px;border-radius:50%;background:#1f2631;transform:translateX(-50%)}
.laptop__base{height:120px;margin:0 -3%;transform-origin:50% 0;transform:rotateX(-84deg);background:linear-gradient(180deg,#2b3340 0,#1a2029 12px,#13181f 100%);border-radius:0 0 18px 18px;box-shadow:0 60px 40px -20px rgba(0,0,0,.5);position:relative}
.laptop__base::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(180deg,#3a4454,#232a35);border-radius:2px}
.laptop__base::after{content:"";position:absolute;left:38%;right:38%;top:38%;height:40%;border-radius:6px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.laptop__lip{height:8px;margin:0 -1.5%;background:linear-gradient(180deg,#3a4454,#1a2029);border-radius:0 0 10px 10px;transform:translateZ(1px)}
/* tablet */
.tablet{aspect-ratio:16/10.6;background:var(--device-bezel);border-radius:4% / 6%;padding:3.5% 3.2%;box-shadow:var(--shadow),inset 0 0 0 1px var(--device-edge)}
.tablet::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--device-back);transform:translateZ(-8px) scale(1.01);box-shadow:0 0 0 1px var(--device-edge)}
.tablet .device__screen{height:100%;border-radius:1.4% / 2.2%}
.tablet__cam{position:absolute;top:50%;left:1.2%;width:6px;height:6px;border-radius:50%;background:#1f2631;transform:translateY(-50%)}
.device-scene{perspective:1400px;position:relative}
.device-caption{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:16px}

/* 7. Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(22px,2.4vw,30px);position:relative;transition:transform var(--t-icon) var(--ease-in),border-color var(--t-micro)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
html[data-motion="reduced"] .card:hover{transform:none}
.card h3{margin-top:14px}
.card p:last-child{margin-bottom:0}
.card .label{margin-bottom:12px}
.card--link{text-decoration:none;display:block}
.card__more{display:inline-flex;align-items:center;gap:8px;color:var(--accent-text);font-weight:600;margin-top:12px;font-size:15px}
.card__more .ui{width:16px;height:16px;transition:transform var(--t-micro) var(--ease-in)}
.card:hover .card__more .ui{transform:translateX(4px)}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)}
.status .dot--amber{background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
.status .dot--muted{background:var(--muted);box-shadow:none}
html.js:not([data-motion="reduced"]) .is-in .status .dot{animation:dot-pulse 400ms var(--ease-in) 300ms 1}
@keyframes dot-pulse{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}

/* Brand cards */
.brand-card{display:grid;grid-template-rows:auto 1fr;gap:18px;overflow:hidden}
.brand-card__media{position:relative;border-radius:var(--radius-s);background:var(--surface-2);border:1px solid var(--border);padding:7% 8% 0;overflow:hidden;perspective:900px;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:center}
.brand-card__media .laptop{width:96%;margin-bottom:-2%}
.brand-card__media .laptop__base{height:60px}
.brand-card__media .tablet{width:92%;margin-bottom:-6%}
.brand-card__media .phone{width:38%;margin-bottom:-18%}
.brand-card__media--sketch{align-items:center;padding:10%}
.brand-card .btn{margin-top:auto;align-self:flex-start}
.brand-card__body{display:flex;flex-direction:column;gap:4px}

/* Service list */
.service-item{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--border);text-decoration:none;color:inherit;transition:transform var(--t-icon) var(--ease-in)}
.service-item:last-child{border-bottom:1px solid var(--border)}
.service-item:hover{transform:translateX(4px)}
html[data-motion="reduced"] .service-item:hover{transform:none}
.service-item h3{margin:4px 0 6px;font-size:20px}
.service-item p{margin:0;color:var(--muted);max-width:60ch}
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}
@media (max-width:820px){.services-grid{grid-template-columns:1fr}}
.service-item .icon{width:44px;height:44px}

/* Steps (how we work) with the route line */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:28px}}
.route{position:absolute;left:0;right:0;top:22px;height:2px;pointer-events:none}
@media (max-width:760px){.route{display:none}}
.route svg{width:100%;height:14px;overflow:visible}
.route line{stroke:var(--border);stroke-width:2}
.route .route-draw{stroke:var(--accent)}
html.js:not([data-motion="reduced"]) .route .route-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease-in) 200ms}
html.js:not([data-motion="reduced"]) .is-in .route .route-draw{stroke-dashoffset:0}
.route rect{fill:var(--bg);stroke:var(--accent);stroke-width:2}
.route rect:nth-of-type(2){fill:var(--copper);stroke:var(--copper)}
.route rect:nth-of-type(3){fill:var(--blue);stroke:var(--blue)}
.route rect:nth-of-type(4){fill:var(--green);stroke:var(--green)}
.step{position:relative;padding-top:0}
.step__num{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);margin-bottom:18px;position:relative;z-index:1}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);margin:0}
.closing-line{margin-top:48px;padding:26px 0 0;border-top:1px solid var(--border);font-family:var(--font-display);font-size:clamp(20px,2.2vw,26px);line-height:1.3;color:var(--text)}
.closing-line span{color:var(--accent-text)}

/* Areas grid */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.areas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.areas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.areas{grid-template-columns:1fr}}
@media (min-width:1101px){.areas .area:first-child{grid-column:span 2}.areas .area:first-child p{max-width:46ch}}
.area{--icon-accent:var(--accent)}
.area[data-tone="copper"]{--icon-accent:var(--copper)}
.area[data-tone="blue"]{--icon-accent:var(--blue)}
.area[data-tone="green"]{--icon-accent:var(--green)}
.area .icon{width:48px;height:48px}
.area h3{font-size:19px;margin-top:18px}
.area p{color:var(--muted);font-size:15px}

/* Animated icon system. Stroke draw on scroll-in, subtle idle loops. Transform, opacity and stroke-dashoffset only. */
.icon{width:40px;height:40px;overflow:visible;--icon-accent:var(--accent);color:var(--text)}
.icon .d{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon .a{fill:var(--icon-accent);stroke:none;transform-box:fill-box;transform-origin:center}
.icon .as{fill:none;stroke:var(--icon-accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon .soft{opacity:.55}
.icon .led{fill:currentColor;stroke:none}
.icon .ds{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-dasharray:.1 .08;opacity:.6}
.icon .ck{fill:none;stroke:#0F1114;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.js .icon[data-state="off"] .f{opacity:0}
html.js .icon[data-state="in"] .f{opacity:0;animation:fade-in 300ms var(--ease-in) 500ms forwards}
html[data-motion="reduced"] .icon .f{opacity:1!important}
.icon g{transform-box:fill-box;transform-origin:center}
html.js .icon[data-state="off"] .d,html.js .icon[data-state="off"] .as{stroke-dasharray:1;stroke-dashoffset:1}
html.js .icon[data-state="off"] .a{opacity:0}
html.js .icon[data-state="in"] .d,html.js .icon[data-state="in"] .as{stroke-dasharray:1;stroke-dashoffset:1;animation:icon-draw 700ms var(--ease-in) forwards}
html.js .icon[data-state="in"] .d:nth-of-type(2){animation-delay:80ms}
html.js .icon[data-state="in"] .d:nth-of-type(3){animation-delay:160ms}
html.js .icon[data-state="in"] .d:nth-of-type(4){animation-delay:240ms}
html.js .icon[data-state="in"] .d:nth-of-type(5){animation-delay:320ms}
html.js .icon[data-state="in"] .d:nth-of-type(n+6){animation-delay:400ms}
html.js .icon[data-state="in"] .a{opacity:0;transform:scale(.6);animation:icon-pop var(--t-icon) var(--ease-in) 600ms forwards}
@keyframes icon-draw{to{stroke-dashoffset:0}}
@keyframes icon-pop{to{opacity:1;transform:scale(1)}}
html[data-motion="reduced"] .icon .d,html[data-motion="reduced"] .icon .as{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
html[data-motion="reduced"] .icon .a{opacity:1!important;transform:none!important;animation:none!important}
html[data-motion="reduced"] .icon *{animation:none!important}
/* Idle loops, only in data-state="idle" */
.icon[data-state="idle"] .i-merge-l{animation:merge-l var(--t-idle) ease-in-out infinite}
.icon[data-state="idle"] .i-merge-r{animation:merge-r var(--t-idle) ease-in-out infinite}
@keyframes merge-l{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes merge-r{0%,20%{transform:translateX(0)}50%,70%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.icon[data-state="idle"] .i-card{animation:card-queue calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
@keyframes card-queue{0%{transform:translateX(-6px);opacity:0}25%{transform:translateX(0);opacity:1}66%{transform:translateX(0);opacity:1}80%{opacity:0}100%{transform:translateX(-6px);opacity:0}}
.icon[data-state="idle"] .i-page{animation:page-scroll calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
@keyframes page-scroll{0%,30%{transform:translateY(0)}55%,75%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.icon[data-state="idle"] .i-arc1{animation:arc-pulse calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
.icon[data-state="idle"] .i-arc2{animation:arc-pulse calc(var(--t-idle) + var(--t-rest)) ease-in-out 300ms infinite}
.icon[data-state="idle"] .i-arc3{animation:arc-pulse calc(var(--t-idle) + var(--t-rest)) ease-in-out 600ms infinite}
.icon[data-state="idle"] .i-plug{animation:plug-light calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
@keyframes arc-pulse{0%,10%{opacity:.35}25%{opacity:1}45%,100%{opacity:.35}}
@keyframes plug-light{0%,35%{opacity:.35}50%,70%{opacity:1}100%{opacity:.35}}
.icon[data-state="idle"] .i-led1{animation:led 1200ms steps(1) infinite}
.icon[data-state="idle"] .i-led2{animation:led 1200ms steps(1) 400ms infinite}
.icon[data-state="idle"] .i-led3{animation:led 1200ms steps(1) 800ms infinite}
@keyframes led{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
.icon[data-state="idle"] .i-block{animation:block-join calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
.icon[data-state="idle"] .i-stamp{animation:stamp calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
@keyframes block-join{0%{opacity:0;transform:translateX(-4px)}30%,100%{opacity:1;transform:translateX(0)}}
@keyframes stamp{0%,35%{opacity:0;transform:scale(.4)}50%,100%{opacity:1;transform:scale(1)}}
.icon[data-state="idle"] .i-dash{animation:dash-scroll 1500ms linear infinite}
@keyframes dash-scroll{from{stroke-dashoffset:0}to{stroke-dashoffset:-.3}}
.icon[data-state="idle"] .i-marker{animation:marker-move 3000ms linear infinite}
@keyframes marker-move{0%{transform:translateY(0) scale(1);opacity:1}85%{opacity:1}100%{transform:translateY(-12px) scale(.3);opacity:0}}
.icon[data-state="idle"] .i-tile{animation:tile-blink calc(var(--t-idle) + var(--t-rest)) ease-in-out infinite}
@keyframes tile-blink{0%,40%{opacity:1}55%{opacity:.4}70%,100%{opacity:1}}
.icon[data-state="idle"] .i-pin{animation:pin-bob var(--t-idle) ease-in-out infinite}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.icon[data-state="idle"] .i-link{animation:link-pulse var(--t-idle) ease-in-out infinite}
@keyframes link-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.icon[data-state="idle"] .i-sensor{animation:sensor-ping calc(var(--t-idle) + var(--t-rest)) ease-out infinite}
@keyframes sensor-ping{0%{transform:scale(1);opacity:1}60%{transform:scale(1.8);opacity:0}100%{transform:scale(1.8);opacity:0}}
.icon[data-state="idle"] .i-doc{animation:doc-shift var(--t-idle) ease-in-out infinite}
@keyframes doc-shift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.icon[data-state="idle"] .i-power{animation:led 2000ms ease-in-out infinite}

/* Proof cards */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:800px){.proof{grid-template-columns:1fr}}
.proof-card{overflow:hidden}
.proof-card .icon{width:40px;height:40px}
.proof-card__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.proof-card__head h3{margin:0}
.readings{list-style:none;padding:0;margin:16px 0 0;font-family:var(--font-mono);font-size:13.5px;line-height:1.5;color:var(--muted);display:grid;gap:6px}
.readings li{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:6px}
.readings li b{color:var(--text);font-weight:400;text-align:right}
html.js .readings li{opacity:0;transform:translateY(8px);transition:opacity 400ms var(--ease-in),transform 400ms var(--ease-in);transition-delay:calc(var(--i,0) * 40ms + 200ms)}
html.js .is-in .readings li{opacity:1;transform:none}
.proof-card--photo{background-size:cover;background-position:center;isolation:isolate}
.proof-card--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,transparent),color-mix(in srgb,var(--surface) 96%,transparent));z-index:-1;border-radius:inherit}

/* Photo bands (parallax backgrounds at depth .3) */
.band{position:relative;overflow:hidden;isolation:isolate;color:#E8ECF1}
.band__bg{position:absolute;inset:-12% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
html[data-motion="reduced"] .band__bg{inset:0}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,20,.78),rgba(11,15,20,.88))}
.band--road::before{background:linear-gradient(90deg,rgba(11,15,20,.92) 0%,rgba(11,15,20,.75) 60%,rgba(11,15,20,.55) 100%)}
.band .muted{color:#9AA6B5}
.band .card{background:rgba(20,26,34,.7);border-color:#243041;color:#E8ECF1;backdrop-filter:blur(6px)}
.band .label{color:#9AA6B5}

/* Band photos: 800px files on phones, 1600px above 760px */
.bg-road{background-image:url(../assets/img/backgrounds/road-dusk-800.webp)}
.bg-fog{background-image:url(../assets/img/backgrounds/fog-valley-800.webp)}
.bg-field{background-image:url(../assets/img/backgrounds/field-morning-800.webp)}
.bg-tree{background-image:url(../assets/img/backgrounds/tree-sunrise-800.webp)}
@media (min-width:761px){
  .bg-road{background-image:url(../assets/img/backgrounds/road-dusk-1600.webp)}
  .bg-fog{background-image:url(../assets/img/backgrounds/fog-valley-1600.webp)}
  .bg-field{background-image:url(../assets/img/backgrounds/field-morning-1600.webp)}
  .bg-tree{background-image:url(../assets/img/backgrounds/tree-sunrise-1600.webp)}
}

/* Company strip */
.strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.strip .container{display:grid;grid-template-columns:1.2fr 1fr auto;gap:32px;align-items:center;padding-top:36px;padding-bottom:36px}
@media (max-width:900px){.strip .container{grid-template-columns:1fr;gap:20px}}
.nap{font-family:var(--font-mono);font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}
.nap b{font-weight:400;color:var(--text)}
.nap .todo{color:var(--accent-text)}

/* CTA */
.cta{text-align:center}
.cta h2{margin-bottom:.4em}
.cta p{margin:0 auto 1.6em}
.cta .btn-row{justify-content:center}
.placeholder{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;color:var(--accent-text);border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);border-radius:8px;padding:8px 12px;background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* Page hero (inner pages) */
.page-hero{padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,56px)}
.page-hero h1{font-size:clamp(36px,4.6vw,58px)}
.page-hero .lead{max-width:62ch}

/* Work page */
.work-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--border)}
.work-block:first-of-type{border-top:0}
@media (max-width:900px){.work-block{grid-template-columns:1fr}}
.work-block--flip .work-block__media{order:-1}
@media (max-width:900px){.work-block--flip .work-block__media{order:0}}
.work-block__media{position:relative;perspective:1400px}
.work-block__media .laptop{width:100%}
.work-block__media .laptop__base{height:90px}
.work-block__media .phone{position:absolute;width:26%;left:-4%;bottom:-6%;transform:translateZ(60px)}
.work-block__media .tablet{width:100%}
.work-block__media .icon{width:64px;height:64px}
.work-block ul{color:var(--muted);padding-left:1.1em}
.work-block li{margin-bottom:.3em}
.lesson{border-left:2px solid var(--accent);padding-left:16px;margin:20px 0;color:var(--text);font-family:var(--font-display);font-size:19px;line-height:1.35}
.lesson small{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.flat-img{border-radius:var(--radius-s);border:1px solid var(--border);overflow:hidden;background:var(--surface-2)}
.flat-img img{width:100%;height:auto}

/* Services page */
.services-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.services-layout{grid-template-columns:1fr}}
.index{position:sticky;top:96px;list-style:none;padding:0;margin:0;display:grid;gap:4px}
@media (max-width:900px){.index{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}}
.index a{display:block;padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:15px;opacity:.7;transition:opacity var(--t-micro),color var(--t-micro),background-color var(--t-micro)}
.index a.is-current{opacity:1;color:var(--text);background:var(--surface)}
@media (max-width:900px){.index a{border:1px solid var(--border);font-size:14px}}
.service-block{padding:clamp(32px,4vw,56px) 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.service-block:first-child{border-top:0;padding-top:0}
.service-block__head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.service-block__head .icon{width:48px;height:48px}
.service-block__head h2{margin:0;font-size:clamp(24px,2.6vw,32px)}
.service-block dl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 0}
@media (max-width:760px){.service-block dl{grid-template-columns:1fr}}
.service-block dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.service-block dd{margin:0;color:var(--muted);font-size:16px}
.service-block__intro{max-width:64ch;color:var(--text)}

/* AI page */
.ai-hero-icon{width:120px;height:120px;margin-bottom:24px}
.ai-hero-icon .icon{width:100%;height:100%}
.blocks{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:800px){.blocks{grid-template-columns:1fr}}

/* Company page */
.facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;font-family:var(--font-mono);font-size:13.5px;line-height:1.5}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
@media (max-width:420px){.facts li{grid-template-columns:1fr;gap:2px}}
.facts li > span:first-child{color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.04em;padding-top:2px}
.facts .todo{color:var(--accent-text)}
.wont{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:800px){.wont{grid-template-columns:1fr}}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.contact-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;padding:16px 0;border-top:1px solid var(--border)}
.contact-list li:last-child{border-bottom:1px solid var(--border)}
.contact-list .ui{margin-top:3px;color:var(--accent-text)}
.contact-list b{display:block;font-weight:600;margin-bottom:2px}
.form-placeholder{border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--border));border-radius:var(--radius);padding:clamp(24px,3vw,40px);background:var(--surface);text-align:center}
.form-placeholder .icon{width:56px;height:56px;margin:0 auto 16px}
.form-placeholder h3{margin-bottom:8px}
.form-placeholder p{margin:0 auto;color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--border);background:var(--surface);padding:clamp(48px,6vw,72px) 0 32px;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:14px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer a{text-decoration:none;color:var(--text);font-size:15px}
.footer a:hover{color:var(--accent-text)}
.footer .brand{margin-bottom:14px}
.footer .brand .wordmark{height:22px}
.footer__tag{color:var(--muted);font-size:15px;max-width:34ch}
.footer__ext{display:inline-flex;align-items:center;gap:6px}
.footer__ext .ui{width:14px;height:14px}
.switches{display:grid;gap:12px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.switch label,.switch .switch__label{font-size:14px;color:var(--text)}
.switch select{font:inherit;font-size:14px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:5px 8px}
.toggle{appearance:none;width:42px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);position:relative;cursor:pointer;margin:0;flex:none;transition:background-color var(--t-micro)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform var(--t-micro) var(--ease-in),background-color var(--t-micro)}
.toggle:checked{background:color-mix(in srgb,var(--accent) 30%,var(--surface-2));border-color:var(--accent)}
.toggle:checked::after{transform:translateX(18px);background:var(--accent)}
.footer__legal{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
.footer__legal a{font-size:12.5px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--border)}
.footer__legal .place{letter-spacing:.08em;text-transform:uppercase}

/* Wireframe sketch (abstract, not a screenshot) used on the websites brand card */
.sketch{width:46%;max-width:150px;overflow:visible}
.sketch .d{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sketch .a{fill:var(--accent)}
html.js:not([data-motion="reduced"]) .is-in .sketch .d{stroke-dasharray:1;stroke-dashoffset:1;animation:icon-draw 900ms var(--ease-in) forwards}
html.js:not([data-motion="reduced"]) .is-in .sketch .d:nth-of-type(2){animation-delay:200ms}
html.js:not([data-motion="reduced"]) .is-in .sketch .d:nth-of-type(3){animation-delay:400ms}
html.js:not([data-motion="reduced"]) .is-in .sketch .d:nth-of-type(4){animation-delay:600ms}
html.js:not([data-motion="reduced"]) .is-in .sketch .a{opacity:0;animation:fade-in 300ms var(--ease-in) 1000ms forwards}

/* 404 */
.notfound{text-align:center;padding:clamp(80px,12vw,160px) 0}
.notfound .mono{color:var(--accent-text);font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* Reduced motion: system setting. The footer switch sets the same attribute via JS. */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="full"]){--t-reveal:200ms;--parallax-max:0px;--tilt-max:0deg;--reveal-y:8px;scroll-behavior:auto}
  html:not([data-motion="full"]) .device{transform:none!important;transition:none}
  html:not([data-motion="full"]) .hero__stage-wrap{transform:none;opacity:1}
  html:not([data-motion="full"]) [data-depth]{transform:none!important}
  html:not([data-motion="full"]) .icon *{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}
  html:not([data-motion="full"]) .stage__beam path,html:not([data-motion="full"]) .header .wordmark *{animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;opacity:1!important}
  html:not([data-motion="full"]) .stage__beam .beam-glow{opacity:.18!important}
  html:not([data-motion="full"]) .route .route-draw{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none}
  html:not([data-motion="full"]) .card:hover,html:not([data-motion="full"]) .service-item:hover{transform:none}
  html:not([data-motion="full"]) .sketch .d,html:not([data-motion="full"]) .sketch .a{animation:none!important;stroke-dasharray:none!important;opacity:1!important}
  html:not([data-motion="full"]) .status .dot{animation:none!important}
  html:not([data-motion="full"]) [data-reveal]{transition-delay:0ms!important}
  html:not([data-motion="full"]) .band__bg{inset:0}
}
@media print{.demo-banner,.header,.footer .switches,.skip{display:none}body{background:#fff;color:#000}}