/* ============================================================
   NNI Design Studio · Services subpages — Tech Gen-Z build
   Round 6 combined (Dev Mode + Glitch + Circuit + Boot)
   2026-09-10 · theme v7 palette · dark navy default
   ============================================================ */
:root{
  --tbg:#07071A; --tcard:#0D0B22; --tfg:#E9E7F7; --tmuted:#9A93C9; --tborder:#26234B;
  --tpink:#A78BFA; --tpurple:#7C3AED; --acc:#A78BFA;
  --tmono:ui-monospace,'Cascadia Code','Fira Code','JetBrains Mono',Consolas,monospace;
}
.tpage{background:var(--tbg);color:var(--tfg);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;position:relative}
.tpage a{color:inherit;text-decoration:none}
.tgrid-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(167,139,250,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.04) 1px,transparent 1px);background-size:44px 44px}
.tpage>section,.tpage>main>section{position:relative;z-index:1}

@keyframes tblink{50%{opacity:0}}
@keyframes tpulse{50%{opacity:.4}}
@keyframes tsweep{to{transform:rotate(360deg)}}
@keyframes tload{from{width:8%}to{width:100%}}
@keyframes tbar{from{width:34%}to{width:92%}}
@keyframes tgl1{0%,88%{transform:translate(0)}90%{transform:translate(-4px,2px)}94%{transform:translate(3px,-1px)}100%{transform:translate(0)}}
@keyframes tgl2{0%,84%{transform:translate(0)}86%{transform:translate(4px,-2px)}92%{transform:translate(-3px,1px)}100%{transform:translate(0)}}
@keyframes tmosh{0%{clip-path:inset(0)}33%{clip-path:inset(0 30% 0 10%)}66%{clip-path:inset(0 5% 0 55%)}100%{clip-path:inset(0)}}
@keyframes tmq{to{transform:translateX(-50%)}}
.blink{animation:tblink 1.1s steps(2) infinite}
.cursorblock{display:inline-block;width:9px;height:15px;background:var(--acc);vertical-align:-2px;animation:tblink 1s steps(2) infinite}

/* ---- hero ---- */
.thero{padding:64px 0 34px;position:relative}
.thero::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 0%,rgba(124,58,237,.25),transparent 70%),radial-gradient(500px 260px at 85% 20%,rgba(167,139,250,.14),transparent 70%);pointer-events:none}
.twrap{max-width:1080px;margin:0 auto;padding:0 20px}
.tround-tag{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--tmono);letter-spacing:.18em;color:var(--tpink);border:1px solid var(--tborder);background:var(--tcard);padding:8px 14px;border-radius:999px}
.tround-tag i{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:tpulse 1.6s infinite}
.thero h1{font-size:clamp(30px,5.4vw,54px);line-height:1.05;margin:18px 0 12px;letter-spacing:-.02em;font-weight:800}
.thero h1 span{background:linear-gradient(90deg,var(--tpink),var(--tpurple));-webkit-background-clip:text;background-clip:text;color:transparent}
.thero .tsub{color:var(--tmuted);max-width:680px;font-size:15px;line-height:1.65}
.thero .tbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---- section scaffolding ---- */
.tsec{padding:56px 0 6px}
.tsec-head{display:flex;align-items:center;gap:14px}
.tsec-num{font:800 44px/1 var(--tmono);-webkit-text-stroke:1.5px var(--acc);color:transparent}
.tsec-title{font-size:clamp(20px,3vw,28px);letter-spacing:-.01em}
.tsec-desc{color:var(--tmuted);font-size:14px;margin:8px 0 6px;max-width:720px;line-height:1.65}
.tstyle-label{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--tmono);letter-spacing:.16em;color:var(--acc);margin:36px 0 14px;padding:7px 12px;border:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);border-radius:8px}
.tstyle-label small{color:var(--tmuted);letter-spacing:.04em;font-weight:500}

/* ---- image placeholder block (swap for real asset later) ---- */
.imgblock{position:relative;border:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);border-radius:14px;overflow:hidden;background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(124,58,237,.03));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:230px;color:var(--tmuted)}
.imgblock::before,.imgblock::after{content:"+";position:absolute;font:300 22px/1 var(--tmono);color:color-mix(in srgb,var(--acc) 60%,transparent)}
.imgblock::before{top:10px;left:14px}
.imgblock::after{bottom:10px;right:14px}
.imgblock .ib-tag{font:700 10px/1 var(--tmono);letter-spacing:.2em;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);padding:6px 10px;border-radius:6px;background:rgba(7,7,26,.5)}
.imgblock .ib-hint{font:500 11px/1.5 var(--tmono);opacity:.75;text-align:center;padding:0 24px}
.two-col{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:stretch}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}

/* ---- 6.1 DEV MODE ---- */
.dev{background:#0A0918;border:1px solid var(--tborder);border-radius:14px;overflow:hidden;font-family:var(--tmono)}
.dev-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--tcard);border-bottom:1px solid var(--tborder)}
.dot{width:11px;height:11px;border-radius:50%}
.dev-filetabs{display:flex;gap:2px;margin-left:14px;font-size:11px}
.dev-ft{padding:6px 12px;color:var(--tmuted);border-radius:8px 8px 0 0}
.dev-ft.on{color:var(--acc);background:var(--tbg);border:1px solid var(--tborder);border-bottom-color:transparent}
.dev-body{padding:16px 0;font-size:12.5px;line-height:2.05}
.ln{display:grid;grid-template-columns:52px 1fr;padding-right:16px;white-space:pre;overflow-x:auto;transition:background .15s}
.ln:hover{background:rgba(167,139,250,.08)}
.no{color:#37325f;text-align:right;padding-right:18px;user-select:none;font-size:11px}
.kw{color:#C084FC}.str{color:var(--acc)}.fn{color:#7DD3FC}.cm{color:#565183;font-style:italic}.num{color:#FFB86C}.pn{color:#8f89c4}
.dev-status{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--tborder);font-size:10.5px;color:var(--tmuted);flex-wrap:wrap}
.dev-status .ok{color:#D4FF4F}

/* ---- 6.2 GLITCH PROTOCOL ---- */
.gwrap{position:relative;background:var(--tcard);border:1px solid var(--tborder);border-radius:14px;padding:30px 26px;overflow:hidden;height:100%;display:flex;flex-direction:column;justify-content:center}
.gwrap::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(167,139,250,.035) 3px 5px)}
.gl{font-family:var(--tmono);font-weight:800;font-size:clamp(20px,3vw,30px);letter-spacing:-.02em;display:inline-block;position:relative}
.gl::before,.gl::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.gl::before{color:#FF5CA8;clip-path:inset(20% 0 55% 0);animation:tgl1 2.4s infinite steps(2);mix-blend-mode:screen}
.gl::after{color:#5EEAFF;clip-path:inset(60% 0 12% 0);animation:tgl2 2.9s infinite steps(2);mix-blend-mode:screen}
.glitchwrap:hover .gl::before{animation-duration:.5s}
.glitchwrap:hover .gl::after{animation-duration:.6s}
.mosh{height:3px;background:linear-gradient(90deg,var(--acc),transparent,var(--acc));opacity:.7;margin:14px 0;animation:tmosh 3.2s steps(3) infinite}
.sig-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sig{font:600 10px/1 var(--tmono);letter-spacing:.12em;padding:7px 10px;border:1px solid var(--tborder);border-radius:6px;color:var(--tmuted);background:rgba(7,7,26,.6)}
.sig.hot{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 50%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 25%,transparent)}
.gtag{font:700 9px/1 var(--tmono);letter-spacing:.22em;color:var(--acc);opacity:.75;margin-bottom:10px}

/* ---- marquee ---- */
.marquee{overflow:hidden;border-top:1px solid var(--tborder);border-bottom:1px solid var(--tborder);margin:22px 0 0;padding:12px 0;background:rgba(13,11,34,.6)}
.mq-track{display:flex;gap:34px;width:max-content;animation:tmq 22s linear infinite;font:800 13px/1 var(--tmono);letter-spacing:.22em;color:var(--tmuted)}
.mq-track span i{color:var(--acc);font-style:normal;margin-right:10px}

/* ---- deliverable chips ---- */
.tchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.tchip{padding:14px 16px;border:1px solid var(--tborder);border-radius:12px;background:var(--tcard);font-size:13px;line-height:1.45;transition:.2s;position:relative}
.tchip:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tchip b{display:block;font:700 11px/1 var(--tmono);letter-spacing:.14em;color:var(--acc);margin-bottom:7px}
.tchip small{color:var(--tmuted);font-size:12px}

/* ---- process steps ---- */
.tsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:tst}
@media(max-width:900px){.tsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tsteps{grid-template-columns:1fr}}
.tstep{border:1px solid var(--tborder);border-radius:12px;background:var(--tcard);padding:18px 16px;position:relative;overflow:hidden;transition:.25s}
.tstep:hover{border-color:var(--acc);transform:translateY(-3px)}
.tstep::before{counter-increment:tst;content:"0" counter(tst);position:absolute;top:8px;right:12px;font:800 30px/1 var(--tmono);-webkit-text-stroke:1px var(--acc);color:transparent;opacity:.5}
.tstep b{font:700 12px/1.3 var(--tmono);letter-spacing:.1em;color:var(--acc);display:block;margin-bottom:8px}
.tstep p{color:var(--tmuted);font-size:12.5px;line-height:1.55}

/* ---- 6.3 NEON CIRCUIT ---- */
.circuit{position:relative;background:var(--tcard);border:1px solid var(--tborder);border-radius:14px;padding:30px 26px;overflow:hidden}
.circuit svg.traces{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.node{fill:var(--acc);animation:tpulse 2.4s infinite}
.node:nth-of-type(2){animation-delay:.5s}.node:nth-of-type(3){animation-delay:1s}.node:nth-of-type(4){animation-delay:1.5s}
.circuit h3{font-family:var(--tmono);font-size:clamp(19px,2.6vw,27px);position:relative}
.circuit h3 b{color:var(--acc)}
.holo{position:relative;margin-top:18px;display:grid;gap:10px}
.holo-chip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;background:linear-gradient(135deg,rgba(167,139,250,.07),rgba(124,58,237,.05));border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);font-size:13px;transition:.25s;position:relative;overflow:hidden}
.holo-chip::before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);transition:.5s}
.holo-chip:hover{transform:translateX(6px);border-color:var(--acc);box-shadow:0 0 22px color-mix(in srgb,var(--acc) 22%,transparent)}
.holo-chip:hover::before{left:120%}
.holo-chip .v{font:700 11px/1 var(--tmono);color:var(--acc);letter-spacing:.1em;white-space:nowrap}
.radar{position:absolute;bottom:-40px;right:-40px;width:170px;height:170px;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);opacity:.4;pointer-events:none}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);transform:scale(.62)}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 35%,transparent),transparent 70deg);animation:tsweep 3.4s linear infinite}
.tucgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:14px}
.tuc{border:1px dashed var(--tborder);border-radius:10px;padding:14px;font:600 11px/1.5 var(--tmono);letter-spacing:.08em;color:var(--tmuted);transition:.2s}
.tuc:hover{border-color:var(--acc);color:var(--tfg)}

/* ---- 6.4 BOOT SEQUENCE ---- */
.boot{background:#050510;border:1px solid var(--tborder);border-radius:14px;padding:24px 22px;font-family:var(--tmono);font-size:12.5px;position:relative;overflow:hidden}
.boot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--tpurple),var(--acc));animation:tload 2.6s ease infinite alternate}
.boot .bt{color:var(--tmuted);letter-spacing:.06em;line-height:2.1}
.boot .bt .t{color:#37325f;margin-right:10px}
.boot .ok{color:#D4FF4F;font-weight:700}.boot .hl{color:var(--acc)}.boot .warn{color:#FFB86C}
.boot-bar{margin:16px 0 10px;height:10px;border:1px solid var(--tborder);border-radius:6px;overflow:hidden;background:rgba(167,139,250,.05)}
.boot-bar i{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--tpurple),var(--acc));box-shadow:0 0 16px color-mix(in srgb,var(--acc) 60%,transparent);animation:tbar 2.4s ease infinite alternate}
.boot-ready{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed var(--tborder);gap:10px;flex-wrap:wrap}
.boot-ready .r{font-weight:800;color:var(--acc);letter-spacing:.14em;font-size:12px}
.boot-ready .k{color:var(--tmuted)}

/* ---- CTA ---- */
.tcta{margin-top:26px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:14px;padding:30px 26px;background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(167,139,250,.06));display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center}
@media(max-width:820px){.tcta{grid-template-columns:1fr}}
.tcta h3{font-size:clamp(19px,2.6vw,26px);letter-spacing:-.01em;margin-bottom:8px}
.tcta p{color:var(--tmuted);font-size:13.5px;line-height:1.6;margin-bottom:16px}
.tcta-btns{display:flex;gap:10px;flex-wrap:wrap}
.tbtn{font:700 12px/1 var(--tmono);letter-spacing:.1em;padding:14px 20px;border-radius:10px;transition:.2s;display:inline-block}
.tbtn-p{background:linear-gradient(90deg,var(--acc),var(--tpurple));color:#07071A;box-shadow:0 0 22px color-mix(in srgb,var(--acc) 35%,transparent)}
.tbtn-p:hover{transform:translateY(-2px);box-shadow:0 0 32px color-mix(in srgb,var(--acc) 55%,transparent)}
.tbtn-o{border:1px solid var(--tborder);color:var(--tfg)}
.tbtn-o:hover{border-color:var(--acc)}
.imgblock.filled{border-style:solid;border-color:color-mix(in srgb,var(--acc) 30%,transparent);min-height:0}
.imgblock.filled::before,.imgblock.filled::after{content:none}
.imgblock.filled img{width:100%;height:100%;object-fit:cover;display:block}