/* TEC-03 北光软件 — bold software studio. Unbounded + Figtree, deep indigo + aurora gradient. */
.tpl-tec-03{
  --gut:clamp(20px,5vw,80px);--max:1240px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));
  --disp:"Unbounded","Noto Sans SC",system-ui,sans-serif;
  --sans:"Figtree","Noto Sans SC",system-ui,sans-serif;
  --r:28px;
  --a2:var(--accent);
  --grad:linear-gradient(120deg,var(--accent) 0%,var(--a2) 100%);
  --dock-bg:var(--soft);--dock-fg:var(--fg);
  font-family:var(--sans);font-size:16.5px;line-height:1.75;
}
@supports (color:oklch(from red l c h)){.tpl-tec-03{--a2:oklch(from var(--accent) l c calc(h + 58))}}
.tpl-tec-03 main{overflow-x:clip}
.tpl-tec-03 h1,.tpl-tec-03 h2,.tpl-tec-03 h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em}
:lang(zh-Hans) .tpl-tec-03 h1,:lang(zh-Hans) .tpl-tec-03 h2{font-weight:700;letter-spacing:.01em}
.tpl-tec-03 ::selection{background:var(--accent);color:var(--on-accent)}
.n3-main>section{padding:clamp(72px,9vw,136px) var(--pad-x)}

/* header */
.n3-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 28px;padding:18px var(--pad-x)}
.n3-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none}
.n3-brand:not(:has(img))::before{content:"";flex:none;width:20px;height:20px;border-radius:7px;background:var(--grad);transform:rotate(45deg) scale(.8)}
.n3-nav{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--soft) 70%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.n3-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--muted);transition:color .2s,background .2s}
.n3-nav a:hover{color:var(--fg);background:var(--bg)}

/* buttons */
.n3-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 14px;margin-top:clamp(30px,3vw,42px)}
.n3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 30px;border-radius:999px;background:var(--grad);color:var(--on-accent);font-weight:600;font-size:16px;text-decoration:none;text-align:center;box-shadow:0 18px 40px -20px var(--accent);transition:transform .25s,box-shadow .25s}
.n3-btn:hover{transform:translateY(-2px);box-shadow:0 22px 48px -18px var(--accent)}
.n3-btn--inv{background:var(--bg);color:var(--fg);box-shadow:none}
.n3-ghost{display:inline-flex;align-items:center;min-height:56px;padding:12px 28px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-weight:600;transition:background .2s}
.n3-ghost:hover{background:var(--soft)}

/* hero */
.n3-main>.n3-hero{position:relative;isolation:isolate;text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:clamp(48px,7vw,112px);padding-bottom:clamp(64px,8vw,120px)}
.n3-aurora{position:absolute;z-index:-1;inset:-120px 0 auto;height:min(820px,120vw);pointer-events:none;
  background:radial-gradient(40% 46% at 30% 30%,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),radial-gradient(36% 40% at 72% 24%,color-mix(in srgb,var(--a2) 32%,transparent),transparent 70%);filter:blur(30px);opacity:.9}
@media (prefers-reduced-motion:no-preference){.n3-aurora{animation:n3-drift 18s ease-in-out infinite alternate}}
@keyframes n3-drift{to{transform:translate3d(3%,2%,0) scale(1.06)}}
.n3-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--soft) 80%,transparent);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.n3-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
.n3-hero h1{font-size:clamp(40px,6.6vw,104px);line-height:1.04;max-width:13em}
:lang(zh-Hans) .n3-hero h1{font-size:clamp(38px,5.6vw,84px);line-height:1.22}
.n3-sub{margin-top:clamp(22px,2.4vw,30px);max-width:34em;font-size:clamp(16.5px,1.3vw,19px);color:var(--muted)}
.n3-sub p:last-child{margin:0}
.n3-stage{position:relative;width:100%;margin-top:clamp(56px,7vw,96px)}
.n3-frame{margin:0;padding:1.5px;border-radius:calc(var(--r) + 4px);background:linear-gradient(140deg,var(--accent),transparent 40%,transparent 60%,var(--a2));box-shadow:0 40px 90px -50px var(--accent)}
.n3-frame img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:calc(var(--r) + 2.5px)}
.n3-pills{position:absolute;z-index:1;left:50%;top:0;transform:translate(-50%,-50%);display:flex;flex-wrap:nowrap;gap:8px;max-width:calc(100% - 24px)}
.n3-pills li{flex:none;padding:10px 18px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 14px 30px -16px rgba(0,0,0,.4);font-size:14px;font-weight:600;white-space:nowrap}
.n3-pills li:first-child{background:var(--grad);color:var(--on-accent);box-shadow:none}

/* kickers + heads */
.n3-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.n3-kicker::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--grad)}
.n3-kicker--inv{color:var(--on-accent)}
.n3-kicker--inv::before{background:var(--on-accent)}
.n3-main h2{font-size:clamp(30px,3.8vw,56px);line-height:1.12}
:lang(zh-Hans) .n3-main h2{line-height:1.3}
.n3-sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.n3-sec-head--c{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.n3-intro{color:var(--muted);max-width:28em;justify-self:end}
.n3-intro p:last-child{margin:0}

/* about + track */
.n3-main>.n3-about{padding-top:0}
.n3-about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.n3-about-top--text{grid-template-columns:minmax(0,1fr);max-width:48rem}
.n3-about-body{margin-top:22px;color:var(--muted);font-size:17.5px;max-width:32em}
.n3-about-body p:last-child{margin:0}
.n3-about-ph{margin:0;overflow:hidden;border-radius:var(--r)}
.n3-about-ph img{width:100%;aspect-ratio:3/2;object-fit:cover}
.n3-track{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,88px);padding-top:34px}
.n3-track--2{--n:2}.n3-track--3{--n:3}.n3-track--5{--n:5}.n3-track--6{--n:3}
.n3-track::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--grad)}
.n3-track li{position:relative}
.n3-track li::before{content:"";position:absolute;left:0;top:-41px;width:17px;height:17px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 4px var(--accent)}
.n3-phase{display:block;margin-bottom:12px;font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.n3-track p{margin:0}
.n3-track strong{display:block;font-family:var(--disp);font-size:clamp(18px,1.5vw,22px);font-weight:600;line-height:1.35}
.n3-track-d{display:block;margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:20em}

/* bento */
.n3-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.n3-tile{position:relative;display:flex;flex-direction:column;min-height:240px;padding:clamp(26px,2.6vw,36px);border-radius:var(--r);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:transform .3s}
.n3-tile:hover{transform:translateY(-3px)}
.n3-tile:first-child{grid-column:span 2;background:var(--grad);color:var(--on-accent);box-shadow:none}
.n3-tile:first-child .n3-tile-d,.n3-tile:first-child .n3-ask,.n3-tile:first-child .n3-tile-n{color:var(--on-accent)}
.n3-tile:first-child:nth-last-child(3n)~.n3-tile:last-child{grid-column:span 3}
.n3-tile:first-child:nth-last-child(3n+1)~.n3-tile:last-child{grid-column:span 2}
.n3-tile-n{position:absolute;right:clamp(20px,2vw,30px);top:clamp(14px,1.6vw,22px);font-family:var(--disp);font-size:clamp(44px,4.6vw,72px);font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 30%,transparent)}
.n3-tile:first-child .n3-tile-n{-webkit-text-stroke:1px color-mix(in srgb,var(--on-accent) 55%,transparent)}
.n3-tile h3{margin-top:auto;padding-top:56px;font-size:clamp(19px,1.6vw,23px);line-height:1.35;margin-bottom:10px}
.n3-tile:first-child h3{font-size:clamp(24px,2.4vw,34px)}
.n3-tile-d{color:var(--muted);font-size:15.5px;max-width:30em}
.n3-tile-d p{margin:0}
.n3-tile-d p+p{margin-top:.6em}
.n3-price{margin:12px 0 0;font-family:var(--disp);font-size:15px}
.n3-ask{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--fg);text-decoration:none}
.n3-ask:hover{text-decoration:underline}

/* work strip */
.n3-main>.n3-work{padding-top:0}
.n3-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.n3-shot{margin:0}
.n3-shot:nth-child(even){margin-top:clamp(40px,6vw,96px)}
.n3-shot-ph{overflow:hidden;border-radius:var(--r);background:var(--soft)}
.n3-shot img{width:100%;aspect-ratio:4/3;object-fit:cover}
.n3-shot figcaption{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14.5px;font-weight:600}
.n3-shot figcaption::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--grad);transform:rotate(45deg)}

/* testimonials */
.n3-main>.n3-quotes{padding-top:0}
.n3-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.n3-quote-list figure{padding:clamp(26px,3vw,38px);border-radius:var(--r);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.n3-quote-list blockquote{font-size:clamp(17px,1.4vw,19.5px);line-height:1.65}
.n3-quote-list blockquote p:last-child{margin:0}
.n3-quote-list figcaption{margin-top:16px;font-size:14px;font-weight:700}
.n3-quote-list figcaption span{color:var(--muted);font-weight:400}

/* faq */
.n3-main>.n3-faq{padding-top:0}
.n3-faq-list{max-width:52rem;margin:0 auto;display:grid;gap:10px}
.n3-faq-list details{border-radius:22px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);padding:0 clamp(20px,2.6vw,30px)}
.n3-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:70px;padding:16px 0;font-size:clamp(16.5px,1.4vw,18.5px);font-weight:600;line-height:1.45}
.n3-faq-list summary::after{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:0;border-radius:50%;background:var(--grad);color:var(--on-accent);font-size:20px;line-height:1}
.n3-faq-list details p{margin:0 0 22px;color:var(--muted);max-width:40em}

/* contact panel */
.n3-main>.n3-contact{padding-top:0}
.n3-panel{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px clamp(40px,6vw,96px);align-items:center;padding:clamp(44px,7vw,104px) clamp(28px,6vw,88px);border-radius:calc(var(--r) + 8px);background:var(--grad);color:var(--on-accent)}
.n3-panel::before{content:"";position:absolute;z-index:-1;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--on-accent) 22%,transparent),transparent 65%)}
.n3-contact h2{font-size:clamp(32px,4.8vw,72px);line-height:1.08;margin-bottom:20px}
.n3-contact-intro{font-size:17.5px;max-width:28em;margin-bottom:32px;opacity:.92}
.n3-contact-intro p:last-child{margin:0}
.n3-contact-info{padding:6px clamp(22px,2.6vw,32px);border-radius:var(--r);background:var(--bg);color:var(--fg)}
.n3-contact-list li{padding:16px 0}
.n3-contact-list li+li{border-top:1px solid var(--line)}
.n3-contact-list .bc-k{color:var(--muted);opacity:1;font-size:11.5px;letter-spacing:.16em;margin-bottom:2px}
.n3-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;text-decoration:none;font-size:18px;font-weight:600}
.n3-contact-list span a{font-size:15px;color:var(--accent)}
.n3-social{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 0 12px;border-top:1px solid var(--line)}
.n3-social a{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:600;text-decoration:none}

/* footer */
.n3-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 24px;padding:8px var(--pad-x) 40px;font-size:14px;color:var(--muted)}
.n3-foot-brand{font-family:var(--disp);font-weight:600;color:var(--fg)}

@media (max-width:1000px){
  .n3-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n3-tile:first-child:nth-last-child(n)~.n3-tile:last-child{grid-column:auto}
  .n3-tile:first-child:nth-last-child(2n)~.n3-tile:last-child{grid-column:span 2}
  .n3-track,.n3-track--5{--n:2;row-gap:40px}
  .n3-track li::before{display:none}
}
@media (max-width:900px){
  .n3-sec-head,.n3-about-top,.n3-panel{grid-template-columns:minmax(0,1fr)}
  .n3-intro{justify-self:start}
  .n3-frame img{aspect-ratio:16/10}
  .n3-pills li:nth-child(n+3){display:none}
}
@media (max-width:700px){
  .tpl-tec-03{--r:22px}
  .n3-head{padding-block:12px 6px}
  .n3-nav{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .n3-nav a{flex:none;padding:0 12px;font-size:14px}
  .n3-actions{width:100%}
  .n3-actions>a{flex:1 1 100%}
  .n3-frame img{aspect-ratio:4/5}
  .n3-pills{top:auto;bottom:16px;transform:translateX(-50%)}
  .n3-pills li{padding:8px 14px;font-size:13px}
  .n3-track,.n3-track--5,.n3-track--6{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 0 28px}
  .n3-track::before{left:6px;right:auto;top:6px;bottom:6px;width:3px;height:auto;background:linear-gradient(180deg,var(--accent),var(--a2))}
  .n3-track li{padding-bottom:30px}
  .n3-track li:last-child{padding-bottom:0}
  .n3-track li::before{display:block;left:-29px;top:2px}
  .n3-bento{grid-template-columns:minmax(0,1fr)}
  .n3-tile:first-child,.n3-tile:first-child:nth-last-child(n)~.n3-tile:last-child{grid-column:auto}
  .n3-tile{min-height:0}
  .n3-tile h3{padding-top:44px}
  .n3-strip{grid-template-columns:minmax(0,1fr)}
  .n3-shot:nth-child(even){margin-top:0}
  .n3-main>.n3-contact{padding-inline:12px}
  .n3-panel{padding:40px 22px 24px}
}