:root{
  --color-bg:#0d1218;
  --color-surface:#161e27;
  --color-surface-2:#1b2731;
  --color-text:#f4f2ee;
  --color-muted:#bbc3cb;
  --color-faint:#9aa7b4;
  --color-border:rgb(220 235 248 / .14);
  --color-border-strong:rgb(220 235 248 / .27);
  --color-blue:#7db7ff;
  --color-teal:#6ad6c6;
  --radius-sm:5px;
  --radius-md:10px;
  --radius-lg:16px;
  --glass-border:rgb(221 236 255 / .22);
  --glass-shadow:0 24px 56px rgb(2 7 15 / .32),0 4px 12px rgb(2 7 15 / .2),inset 0 1px 0 rgb(255 255 255 / .14);
}
body{
  background:
    radial-gradient(ellipse 72% 650px at 94% 12%,rgb(53 88 126 / .13),transparent 75%),
    radial-gradient(ellipse 65% 580px at 0 5%,rgb(165 87 46 / .10),transparent 75%),
    var(--color-bg);
}
.header{
  position:relative;
  min-height:100px;
  border-bottom-color:rgb(221 236 255 / .18);
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgb(255 201 162 / .42),rgb(151 199 255 / .24),transparent);
  pointer-events:none;
}
nav .contact-link{
  padding-inline:var(--space-4);
  border:1px solid rgb(255 172 115 / .32);
  border-radius:var(--radius-sm);
  background:linear-gradient(155deg,rgb(255 188 141 / .045),rgb(255 133 62 / .02));
  box-shadow:inset 0 1px 0 rgb(255 225 202 / .1);
}
.hero-grid{
  opacity:.9;background-size:56px 56px;
  background-image:linear-gradient(to right,rgb(203 222 241 / .075) 1px,transparent 1px),linear-gradient(to bottom,rgb(203 222 241 / .075) 1px,transparent 1px);
}
.hero::before{
  content:"";position:absolute;inset:0 calc(-1 * var(--gutter)) 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 78% 44%,rgb(73 126 181 / .16),transparent 48%),
    radial-gradient(ellipse at 30% 32%,rgb(194 108 55 / .1),transparent 54%);
}
.hero h1 span{color:var(--color-text)}
.hero-copy>p{max-width:44ch}
.button{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid rgb(255 203 161 / .28);
  box-shadow:inset 0 1px 0 rgb(255 245 232 / .35),inset 0 -2px 0 rgb(146 57 13 / .28),0 4px 0 #88431f,0 7px 6px rgb(0 0 0 / .32),0 14px 30px rgb(255 123 48 / .16);
  transition:translate .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.button::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(165deg,rgb(255 255 255 / .08),transparent 50%);
}
.ghost,nav .contact-link{
  border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .15),inset 0 -1px 0 rgb(0 0 0 / .22),0 3px 0 #080e15,0 7px 12px rgb(0 0 0 / .22);
  transition:translate .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.button:hover,.button:focus-visible{
  translate:0 -2px;
  box-shadow:inset 0 1px 0 rgb(255 245 235 / .45),0 5px 0 #88431f,0 9px 7px rgb(0 0 0 / .26),0 17px 34px rgb(255 133 62 / .24);
}
.button:active{
  translate:0 3px;
  box-shadow:inset 0 2px 4px rgb(106 40 8 / .2),0 1px 0 #88431f,0 4px 10px rgb(0 0 0 / .2);
}
.ghost:hover,nav .contact-link:hover{translate:0 -1px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 4px 0 #080e15,0 10px 18px rgb(0 0 0 / .3)}
.ghost:active,nav .contact-link:active{translate:0 2px;box-shadow:inset 0 1px 4px rgb(0 0 0 / .25),0 1px 0 #080e15}

/* An illuminated schematic behind a fixed, lightly reflective glass cover. */
.schematic{
  isolation:isolate;border-radius:var(--radius-lg);
  border-color:var(--glass-border);
  background:
    radial-gradient(ellipse at 30% 25%,rgb(94 143 185 / .17),transparent 65%),
    linear-gradient(155deg,rgb(49 66 84 / .72),rgb(16 25 36 / .82) 60%,rgb(39 34 30 / .65));
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  box-shadow:var(--glass-shadow);
}
.schematic::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(152deg,rgb(255 255 255 / .135),rgb(255 255 255 / .045) 32%,rgb(255 255 255 / .085) 32.1%,transparent 32.5%,transparent 72%,rgb(255 207 167 / .045));
}
.schematic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 1px 0 0 rgb(226 240 255 / .16),inset 0 1px 0 rgb(240 248 255 / .2),inset 0 -1px 0 rgb(154 187 215 / .17);
}
.schematic-label{border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:rgb(255 255 255 / .025)}
.schematic-footer{border-radius:0 0 var(--radius-lg) var(--radius-lg);background:rgb(8 15 23 / .22)}
.schematic svg{filter:drop-shadow(0 8px 12px rgb(0 4 12 / .2))}
.schematic .marks{stroke:#92a4b6}
.schematic .dim-text,.schematic svg>g:last-child{fill:#b1bfcb}
.node{
  transform-box:fill-box;transform-origin:center;
  transition:transform .3s var(--ease),filter .3s var(--ease),opacity .3s var(--ease);
}
.node[data-node=web]{--node-accent:var(--color-blue);--node-rgb:87 156 255;--node-scale:1.025}
.node[data-node=app]{--node-accent:var(--color-teal);--node-rgb:69 199 184;--node-scale:1.065}
.node[data-node=tool]{--node-accent:var(--color-primary);--node-rgb:255 133 62;--node-scale:1.065}
.node .node-box{filter:drop-shadow(0 5px 5px rgb(0 0 0 / .35));transition:stroke .25s var(--ease),stroke-width .25s var(--ease),filter .25s var(--ease)}
.node:hover,.node:focus-visible,.node.is-active{
  transform:translateY(-5px) scale(var(--node-scale));
  filter:brightness(1.18) drop-shadow(0 9px 8px rgb(0 3 10 / .4));
}
.node:hover .node-box,.node:focus-visible .node-box,.node.is-active .node-box{
  stroke:var(--node-accent);stroke-width:1.8;
  filter:drop-shadow(0 0 6px rgb(var(--node-rgb) / .3));
}
.node:hover .node-tag,.node.is-active .node-tag{fill:var(--node-accent)}
.schematic.has-active .node:not(.is-active){opacity:.65}
.link.is-active{stroke-width:2;filter:drop-shadow(0 0 3px rgb(255 133 62 / .35))}
.node:active{transform:translateY(-1px) scale(1.015)}
.descriptor{margin-top:var(--space-2);border-color:rgb(220 235 248 / .16)}

/* Color stays inside service surfaces; content remains neutral and readable. */
#services>.stagger{display:grid;gap:var(--space-5)}
.service{
  --panel-rgb:87 156 255;
  --panel-color:var(--color-blue);
  padding:var(--space-8);gap:var(--space-8);
  border:1px solid rgb(var(--panel-rgb) / .29);border-radius:var(--radius-lg);
  isolation:isolate;
  background:
    radial-gradient(ellipse at 8% 30%,rgb(var(--panel-rgb) / .20),transparent 62%),
    linear-gradient(120deg,rgb(var(--panel-rgb) / .08),rgb(18 25 34 / .92) 78%);
  box-shadow:0 10px 30px rgb(2 7 15 / .18),inset 0 1px 0 rgb(255 255 255 / .13),inset 0 -1px 0 rgb(var(--panel-rgb) / .08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .3s var(--ease),background-color .25s var(--ease);
}
.service[data-node=app]{--panel-rgb:69 199 184;--panel-color:var(--color-teal)}
.service[data-node=tool]{--panel-rgb:255 133 62;--panel-color:var(--color-primary)}
.service::before{
  inset:0;width:auto;height:auto;border-radius:inherit;transform:none;
  background:linear-gradient(162deg,rgb(255 255 255 / .12),rgb(255 255 255 / .035) 36%,rgb(255 255 255 / .055) 36.1%,transparent 36.5%);
  pointer-events:none;z-index:-1;
  transition:opacity .3s var(--ease);
}
.service::after{
  content:"";position:absolute;top:-1px;left:var(--space-6);right:28%;height:1px;
  background:linear-gradient(90deg,transparent,rgb(var(--panel-rgb) / .72),transparent);
  pointer-events:none;
}
.service.is-hot,.service.is-flash{
  border-color:rgb(var(--panel-rgb) / .78);
  background-color:rgb(var(--panel-rgb) / .065);
  transform:translateY(-4px);
  box-shadow:0 20px 38px rgb(2 7 15 / .42),0 5px 8px rgb(0 0 0 / .2),0 0 32px rgb(var(--panel-rgb) / .12),inset 0 1px 0 rgb(255 255 255 / .34);
}
.service.reveal.is-in{clip-path:none}
.service.is-hot::before{
  background:linear-gradient(162deg,rgb(255 255 255 / .18),rgb(255 255 255 / .05) 36%,rgb(255 255 255 / .08) 36.1%,transparent 36.5%);
}
.service.is-flash{background-color:rgb(var(--panel-rgb) / .08)}
.service-name{flex-wrap:wrap;align-content:start;align-items:center;gap:var(--space-4)}
.service-name>.accent{color:var(--panel-color);font-size:var(--text-lg);letter-spacing:-.05em;text-shadow:0 2px 10px rgb(var(--panel-rgb) / .28)}
.service h3{flex:1;min-width:0}
.service-node{opacity:1;transform:none;flex-basis:100%;margin-left:0;color:var(--panel-color);font-size:var(--text-xs)}
.service.is-hot .service-node,.service.is-flash .service-node{color:var(--panel-color)}
.service p{color:#cbd3dc}
.tags{gap:var(--space-2)}
.tags span{border-color:rgb(var(--panel-rgb) / .18);background:rgb(6 13 22 / .18);border-radius:var(--radius-sm);color:#c3cdd7}

.process,.brief,.keys{
  border-radius:var(--radius-md);border-color:var(--glass-border);
  background:linear-gradient(135deg,rgb(52 66 80 / .62),rgb(21 30 40 / .84) 55%,rgb(25 34 43 / .80));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow);
}
.process{position:relative}
.process::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(170deg,rgb(255 255 255 / .08),rgb(255 255 255 / .015) 44%,transparent 44.3%);
}
.about{position:relative}
.about::after{
  content:"";position:absolute;top:0;left:34%;width:28%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(113 176 209 / .45),transparent);
}
.contact{
  position:relative;isolation:isolate;
  background:radial-gradient(ellipse 75% 480px at 95% 50%,rgb(180 98 47 / .10),transparent);
}
.brief{border-color:rgb(225 180 143 / .28)}
.brief-head{
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:linear-gradient(120deg,rgb(255 209 168 / .14),rgb(255 255 255 / .045));
}
.brief-start{background:rgb(255 196 142 / .055)}
.brief-contact{background:rgb(4 10 18 / .16);border-radius:0 0 var(--radius-md) var(--radius-md)}
.chip{
  border-radius:var(--radius-sm);
  background:linear-gradient(160deg,rgb(63 77 90 / .33),rgb(23 32 42 / .72));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 -1px 0 rgb(0 0 0 / .18),0 3px 0 #080e15,0 7px 12px rgb(0 0 0 / .18);
  transition:translate .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.chip:hover{translate:0 -1px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),0 4px 0 #080e15,0 10px 18px rgb(0 0 0 / .25)}
.chip:has(input:checked){
  background:linear-gradient(145deg,rgb(255 155 85 / .19),rgb(255 133 62 / .07));
  box-shadow:inset 0 1px 0 rgb(255 218 183 / .2),inset 0 2px 5px rgb(0 0 0 / .14),0 1px 0 #080e15,0 3px 7px rgb(0 0 0 / .18);
  translate:0 2px;
}
.chip:active{translate:0 3px;box-shadow:inset 0 2px 4px rgb(0 0 0 / .22),0 1px 0 #080e15}
.chip::before{align-self:center}
.chip>span{min-width:0}
.problem-group .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--space-4)}
.problem-group .chip{width:100%;min-height:80px;align-items:center;padding:var(--space-3) var(--space-4);line-height:1.5}
.field input,.field textarea,.brief-raw{
  border-radius:var(--radius-sm);background:rgb(9 16 24 / .62);
  box-shadow:inset 0 2px 5px rgb(0 0 0 / .13);
}
.revision{border-radius:var(--radius-sm);background:rgb(27 38 49 / .35)}
.rail-track span{border-radius:var(--radius-sm)}
.keys-close{min-height:44px;border-radius:var(--radius-sm)}
.rail-track a{min-height:32px}

@media(max-width:900px){
  .service{grid-template-columns:1fr 1.8fr;padding:var(--space-6);gap:var(--space-6)}
}
@media(max-width:650px){
  .header{min-height:88px}
  nav{gap:var(--space-3)}
  nav .contact-link{padding-inline:var(--space-2);gap:var(--space-2)}
  .service{grid-template-columns:1fr;padding:var(--space-6);gap:var(--space-5)}
  .service-name{flex-wrap:nowrap}
  .service-node{display:none}
  .service h3{font-size:var(--text-lg)}
  .schematic-label{font-size:var(--text-xs);gap:var(--space-2)}
  .schematic-footer{font-size:var(--text-xs)}
  .service::before{left:0}
  .problem-group .chips{grid-template-columns:1fr}
  .problem-group .chip{min-height:64px;font-size:var(--text-sm)}
  .hero::before{background:radial-gradient(ellipse at 90% 75%,rgb(73 126 181 / .16),transparent 55%),radial-gradient(ellipse at 15% 20%,rgb(194 108 55 / .09),transparent 50%)}
}
@media(prefers-reduced-motion:reduce){
  .node:hover,.node:focus-visible,.node.is-active,.node:active,.service.is-hot,.service.is-flash{transform:none}
  .button,.ghost,.chip,nav .contact-link{translate:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .schematic,.process,.brief,.keys,.service{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:#18232e}
}