/* NordStack / code studio */
/* Motion is decorative, pointer-transparent and disabled for reduced motion. */
:root{--bg:#f1f4f8;--surface:#fbfcfe;--soft:#e7edf5;--ink:#101e34;--muted:#54647a;--line:#cbd5e4;--blue:#0059e8;--accent:#0059e8;--header:#f1f4f8ed}
[data-theme=dark]{--bg:#070b12;--surface:#0d1420;--soft:#121e2e;--ink:#eaf1ff;--muted:#96a8c2;--line:#24344a;--blue:#5599ff;--accent:#84b7ff;--header:#070b12e8}
.site-header{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent);height:82px}
.nav a{font:12px var(--mono);position:relative}
.nav a:before{content:"/";color:var(--blue);margin-right:7px}
.brand-name{letter-spacing:-1.4px;font-size:26px}
.button{border-radius:3px;background:#075ce8;border-color:#2877f3;box-shadow:inset 0 1px 0 #ffffff20;position:relative;overflow:hidden}
.button:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#ffffff18,transparent 80%);transform:translateX(-110%);transition:transform .5s}
.button:hover:after{transform:translateX(110%)}
.button:hover{box-shadow:0 6px 30px #086bff26}
.icon-button,.lang-button,.menu-button{border-radius:4px}
.hero{padding-top:150px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:42px 52px}
.hero h1{font-size:clamp(66px,7.2vw,104px);line-height:1.02;letter-spacing:-.075em;margin:30px 0}
.hero h1 em{color:var(--blue);position:relative}
.hero-copy>p{font-size:17px;max-width:490px}
.hero .eyebrow{font-size:11px;letter-spacing:.045em}
.hero .eyebrow>span:first-child{width:18px;height:8px;background:transparent;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:skewY(-25deg)}
.hero-tags{margin-top:28px}
.hero-paths{border-block:0;gap:12px;margin-top:26px}
.hero-paths>a,.hero-paths>a:first-child{padding:25px 35px 25px 24px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 85%,transparent);border-radius:4px;transition:background .2s,border-color .2s,transform .2s}
.hero-paths>a:hover{border-color:var(--blue);background:var(--surface);transform:translateY(-3px)}
.hero-paths strong{font-size:17px}
.hero-paths b{transition:transform .2s}
.hero-paths>a:hover b{transform:translate(2px,-2px)}
.studio-stage{background:#0d1420;color:#eaf1ff;padding:0;border:1px solid #2c4261;border-radius:8px;transform:none;box-shadow:0 24px 70px #06152c26;position:relative;overflow:hidden}
.studio-stage:hover{transform:none}
[data-theme=dark] .studio-stage{box-shadow:0 20px 80px #0008,0 0 65px #126bff0a}
.stage-top{background:#111d2d;margin:0;padding:15px 18px;border-bottom:1px solid #26364e;color:#9aaec9;letter-spacing:.025em}
.terminal-dots{color:#476184;font-size:8px;letter-spacing:4px;display:inline-block;margin-right:15px}
.stage-corner{font:16px var(--mono);color:#7399ca}
.stage-tabs{margin:0;padding:0 16px;border-bottom:1px solid #26364e;background:#0b121e;gap:0}
.stage-tabs button{color:#a9b9d0;padding:14px 8px;position:relative}
.stage-tabs button[aria-selected=true]{background:#15253b;border-color:#4f97ff;color:#a4caff}
.stage-tabs button:hover{color:#fff}
.stage-tabs button span{color:#6e8aaa}
.stage-panels{margin:16px 16px 0;border-radius:4px;background:#111e2d;border:1px solid #26364e}
.stage-panels .image-preview{aspect-ratio:1.62}
.stage-panels .image-preview img{height:100%;width:100%;object-fit:contain}
.code-console{display:flex;align-items:center;gap:16px;padding:17px 20px 20px;font:12px/1.8 var(--mono);color:#bdcee6;position:relative}
.console-gutter{color:#425b7a;user-select:none;text-align:right}
.code-console pre{margin:0;font:inherit;white-space:pre-wrap}
.syntax-key{color:#96a7ff}.syntax-name{color:#79b8ff}.syntax-string{color:#85d8c9}.console-caret{color:#7fb1ff;animation:cursor-blink 1.2s step-end infinite}
.console-signature{margin-left:auto;align-self:flex-end;font:12px var(--mono);color:#405b7e}
@keyframes cursor-blink{50%{opacity:0}}
.trust-strip{font-family:var(--mono);padding-top:18px}
.trust-strip p{font-size:12px}.trust-strip b{font-size:12px;font-weight:400}
.kicker{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.1em}
.kicker:before{content:"//";color:var(--blue);font-size:14px}
.section-intro h2{font-weight:600}
.work{border-top:1px solid var(--line);margin-top:15px}
.concept-heading h3{font-size:29px;font-weight:600}
.concept-image{border-radius:5px;padding:10px;background:#e4e9f1;box-shadow:0 14px 40px #06152c08}
.concept-card:nth-child(2) .concept-image{background:#121a25}
.concept-image img{border-radius:2px}
.concept-open{border-radius:3px;right:20px;bottom:20px;font-size:23px;background:#075ce8;color:#fff}
.concept-image:hover .concept-open{transform:translate(2px,-2px)}
.concept-heading>span{font-family:var(--mono);font-size:10px}
.case-card,.app-concept,.idea-grid>a,.quote-form{border-radius:5px}
.case-card{transition:border-color .25s}
.case-card:hover{border-color:var(--blue)}
.case-tags span{font-family:var(--mono);font-size:11px;border-radius:2px}
.systems-heading,.new-concepts{position:relative}
.systems-heading:before,.new-concepts:before{content:"";position:absolute;top:-1px;left:0;width:65px;border-top:2px solid var(--blue)}
.solution-statement{background:#101f35;color:#eaf1ff;border:1px solid #2d4b75;border-radius:5px;position:relative}
.solution-icon{font-family:var(--mono);font-size:28px;color:#77adff}
.solution-statement>a{color:#8bbaff}
.services-wrap{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.service-row{border-color:var(--line)}
.service-row h3{font-weight:500}
.service-toggle:after{font-size:22px}
.service-num,.step>span{font-size:12px;border:1px solid var(--line);display:grid;place-items:center;width:34px;height:34px;padding:0;align-self:center;border-radius:3px}
.step>span{width:40px;height:40px;align-self:start}
.step{position:relative}
.step h3{margin-top:28px}
.quote-form{border-top:2px solid var(--blue);box-shadow:0 22px 70px #06152c08}
.quote-form input,.quote-form textarea,.quote-form select{border-radius:3px}
.quote-point>span{font-family:var(--mono)}
footer{background:#060a10}
.footer-brand .brand-name{font-size:32px}
.success-card{border-radius:6px;border-top:2px solid var(--blue);box-shadow:0 20px 70px #06152c12}
.success-mark{border-radius:4px;font-family:var(--mono)}
.reading-progress{position:fixed;z-index:50;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--blue);pointer-events:none}
.ambient-grid{background-size:96px 96px;opacity:.09}
.code-field{position:absolute;inset:-32px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));align-items:center;justify-items:center;color:var(--blue);font:12px var(--mono);opacity:0;mask-image:radial-gradient(ellipse 265px 235px at var(--code-x,70%) var(--code-y,30%),#000 0%,#0009 28%,transparent 78%);transition:opacity .7s;transform:translate3d(var(--grid-x,0px),var(--grid-y,0px),0)}
.ambient-field.is-active .code-field{opacity:.18}
[data-theme=dark] .ambient-field.is-active .code-field{opacity:.23}
.ambient-glow{background:radial-gradient(circle,#176eff08,transparent 66%)}
[data-theme=dark] .ambient-glow{background:radial-gradient(circle,#176eff0d,transparent 66%)}
@media(max-width:1100px){.hero{gap:35px 30px}.hero h1{font-size:clamp(60px,7.5vw,82px)}.hero-copy>p{font-size:16px}.hero-paths>a,.hero-paths>a:first-child{padding:22px 30px 22px 18px}.hero-paths strong{font-size:15px}.hero .eyebrow{font-size:10px}.code-console{font-size:11px}.stage-top{font-size:10px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:127px}.hero h1{font-size:clamp(64px,11vw,84px)}.hero-copy>p{max-width:590px}.studio-stage{width:min(660px,100%)}.hero .eyebrow{font-size:11px}.hero-paths{margin-top:10px}.console-signature{font-size:12px}}
@media(max-width:600px){.site-header{height:74px}.brand-name{font-size:21px}.hero{padding-top:112px;gap:28px}.hero h1{font-size:clamp(55px,14.3vw,76px);line-height:1.03;margin:23px 0}.hero-copy>p{font-size:16px}.hero .eyebrow{font-size:10px}.hero-paths{grid-template-columns:1fr;gap:9px}.hero-paths>a,.hero-paths>a:first-child{padding:18px 34px 18px 18px}.hero-paths strong{font-size:17px}.stage-top{padding:12px 13px}.stage-tabs{padding:0 8px}.stage-tabs button{padding:12px 3px;font-size:12px}.stage-panels{margin:10px 10px 0}.code-console{padding:12px 14px 14px;font-size:10px;gap:12px;line-height:1.7}.console-signature{font-size:10px}.concept-image{padding:6px}.concept-open{right:15px;bottom:15px;width:37px;height:37px;font-size:21px}.concept-heading h3{font-size:25px}.concept-heading>span{font-size:9px}.trust-strip{padding-top:5px}.trust-strip p{font-size:11px}.trust-strip b{font-size:10px}.service-num{width:24px;height:28px;font-size:10px}.work{padding-top:55px}.code-field{display:none}.footer-brand .brand-name{font-size:26px}}
@media(max-width:360px){.brand-name{font-size:18px}.hero h1{font-size:52px}.hero .eyebrow{font-size:9px}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.code-field{display:none}}
@media(prefers-reduced-motion:reduce){.console-caret{animation:none}.reading-progress{display:none}.button:after{display:none}}

.quote-form{padding-top:0;overflow:hidden}
.form-titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -32px 30px;padding:18px 32px;background:var(--soft);border-bottom:1px solid var(--line);font:11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.form-titlebar .terminal-dots{margin-right:auto}
.form-titlebar>span:last-child{color:var(--blue);font-size:20px;margin-left:auto}
.quote-form label>span:first-child{font-size:13px;font-weight:600}
.project-infrastructure{margin:4px 0 23px;padding:18px 18px 0;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--soft) 35%,transparent);min-width:0}
.project-infrastructure legend{padding:0 8px;font:12px var(--mono);color:var(--blue)}
.project-infrastructure>p{font-size:13px;color:var(--muted);margin:0 0 18px}
.project-infrastructure .form-row{grid-template-columns:1fr}
.project-infrastructure select{font-size:14px;width:100%;max-width:100%}
.quote-form .form-submit{margin-top:5px}
@media(max-width:600px){.quote-form{padding-top:0}.form-titlebar{margin-inline:-22px;padding:15px 22px;font-size:10px}.project-infrastructure{padding:15px 12px 0}.project-infrastructure select{font-size:16px}.project-infrastructure legend{font-size:11px}}