/* TEC-05 LIMEFIX 手机维修 — bold phone repair counter. Space Grotesk, near-black + lime.
   Accent is only used as a fill (text on it = on-accent), never as text colour. */
.tpl-tec-05{
  --gut:clamp(20px,5vw,80px);--max:1280px;--pad-x:max(var(--gut),calc((100% - var(--max))/2));
  --sans:"Space Grotesk","Noto Sans SC",system-ui,sans-serif;
  --r:28px;
  --dock-bg:var(--soft);--dock-fg:var(--fg);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
}
.tpl-tec-05 main{overflow-x:clip}
.tpl-tec-05 h1,.tpl-tec-05 h2,.tpl-tec-05 h3{font-family:var(--sans);font-weight:700;letter-spacing:-.035em}
:lang(zh-Hans) .tpl-tec-05 h1,:lang(zh-Hans) .tpl-tec-05 h2{letter-spacing:0}
.tpl-tec-05 ::selection{background:var(--accent);color:var(--on-accent)}
.m5-main>section{padding:clamp(72px,9vw,136px) var(--pad-x)}

/* header */
.m5-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 28px;padding:16px var(--pad-x)}
.m5-brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:19px;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.m5-brand:not(:has(img))::before{content:"";flex:none;width:14px;height:24px;border-radius:5px;background:var(--accent);box-shadow:inset 0 3px 0 -1px var(--on-accent)}
.m5-nav{display:flex;flex-wrap:wrap;gap:0 2px}
.m5-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;text-decoration:none;font-size:15px;color:var(--muted);transition:color .2s,background .2s}
.m5-nav a:hover{color:var(--on-accent);background:var(--accent)}

/* buttons */
.m5-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(30px,3vw,44px)}
.m5-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:12px 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:16.5px;text-decoration:none;text-align:center;transition:transform .25s}
.m5-btn::after{content:"→";transition:transform .25s}
.m5-btn:hover::after{transform:translateX(4px)}
.m5-btn--ink{background:var(--on-accent);color:var(--accent)}
.m5-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;color:var(--fg)}

/* hero */
.m5-main>.m5-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(40px,6vw,96px);align-items:center;padding-top:clamp(32px,5vw,80px);padding-bottom:clamp(56px,7vw,104px)}
.m5-hero--text{grid-template-columns:minmax(0,1fr)!important}
.m5-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;font-size:13.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.m5-eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.m5-hero h1{font-size:clamp(52px,8.4vw,136px);line-height:.96}
:lang(zh-Hans) .m5-hero h1{font-size:clamp(46px,7vw,112px);line-height:1.12}
.m5-sub{margin-top:clamp(24px,2.6vw,34px);max-width:30em;font-size:clamp(16.5px,1.3vw,19px);color:var(--muted)}
.m5-sub p:last-child{margin:0}
.m5-phone-wrap{position:relative;justify-self:center;width:min(100%,360px)}
.m5-phone-wrap::before{content:"";position:absolute;inset:6% -9% -4% 18%;border-radius:56px;background:var(--accent);transform:rotate(7deg)}
.m5-phone{position:relative;margin:0;padding:10px;border-radius:52px;background:var(--fg);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.m5-phone img{width:100%;aspect-ratio:9/17;object-fit:cover;border-radius:42px;background:var(--soft)}
.m5-island{position:absolute;left:50%;top:24px;width:30%;height:22px;margin-left:-15%;border-radius:999px;background:var(--fg)}
@media (prefers-reduced-motion:no-preference){.m5-phone-wrap::before{transition:transform .6s}.m5-phone-wrap:hover::before{transform:rotate(3deg)}}

/* ticker */
.m5-ticker{background:var(--accent);color:var(--on-accent);padding:18px 0;font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.01em}
.m5-ticker em{font-style:normal}
.m5-ticker i{font-style:normal;font-weight:400;opacity:.7}

/* kickers + heads */
.m5-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.m5-kicker::before{content:"";width:22px;height:10px;border-radius:999px;background:var(--accent)}
.m5-main h2{font-size:clamp(36px,5vw,76px);line-height:1.02}
:lang(zh-Hans) .m5-main h2{line-height:1.2}
.m5-sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.m5-intro{color:var(--muted);max-width:28em;justify-self:end}
.m5-intro p:last-child{margin:0}

/* about */
.m5-main>.m5-about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start}
.m5-about--text{grid-template-columns:minmax(0,1fr)!important}
.m5-about-body{margin-top:24px;color:var(--muted);font-size:18px;max-width:32em}
.m5-about-body p:last-child{margin:0}
.m5-steps{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.m5-steps li{display:grid;grid-template-columns:clamp(72px,8vw,120px) minmax(0,1fr);gap:16px;align-items:center;padding:clamp(18px,2vw,26px) 0;border-bottom:1px solid var(--line)}
.m5-step-n{font-size:clamp(40px,5vw,72px);font-weight:700;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--muted);transition:color .3s}
.m5-steps li:hover .m5-step-n{color:var(--fg);-webkit-text-stroke-color:var(--fg)}
.m5-steps p{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.45}
.m5-about-ph{position:sticky;top:24px;margin:0;overflow:hidden;border-radius:var(--r)}
.m5-about-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* services counter list */
.m5-main>.m5-services{background:var(--soft)}
.m5-list{border-top:1px solid var(--line)}
.m5-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.1fr) 56px;gap:8px clamp(20px,3vw,48px);align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--line);transition:padding .3s}
.m5-row-n{font-size:14px;font-weight:500;color:var(--muted)}
.m5-row h3{font-size:clamp(22px,2.2vw,32px);line-height:1.25}
.m5-row-d{color:var(--muted);font-size:15.5px}
.m5-row-d p{margin:0}
.m5-row-d p+p{margin-top:.5em}
.m5-price{color:var(--fg);font-weight:700}
.m5-ask{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);font-size:20px;text-decoration:none;color:var(--fg);transition:background .25s,color .25s,box-shadow .25s}
.m5-row:hover .m5-ask,.m5-ask:hover{background:var(--accent);color:var(--on-accent);box-shadow:none}

/* work tiles */
.m5-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.m5-tile{margin:0}
.m5-tile:nth-child(even){margin-top:clamp(32px,4vw,64px)}
.m5-tile-ph{overflow:hidden;border-radius:var(--r);background:var(--soft)}
.m5-tile img{width:100%;aspect-ratio:3/4;object-fit:cover}
.m5-tile figcaption{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:15px;font-weight:600}
.m5-tile figcaption span{font-size:12.5px;font-weight:500;color:var(--muted)}

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

/* faq */
.m5-main>.m5-faq{padding-top:0}
.m5-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.m5-faq-list details{border-radius:22px;background:var(--soft);padding:0 clamp(20px,2.4vw,28px)}
.m5-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:76px;padding:18px 0;font-size:clamp(17px,1.4vw,19.5px);font-weight:600;line-height:1.4}
.m5-faq-list summary::after{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px;line-height:1}
.m5-faq-list details p{margin:0 0 22px;color:var(--muted)}

/* contact */
.m5-main>.m5-contact{padding-top:0}
.m5-block{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px clamp(40px,6vw,96px);align-items:end;padding:clamp(44px,7vw,104px) clamp(28px,6vw,88px);border-radius:calc(var(--r) + 12px);background:var(--accent);color:var(--on-accent)}
.m5-block::after{content:"";position:absolute;z-index:-1;right:clamp(-60px,-3vw,-20px);bottom:-30%;width:min(30%,300px);aspect-ratio:9/17;border-radius:48px;border:10px solid color-mix(in srgb,var(--on-accent) 12%,transparent);transform:rotate(14deg)}
.m5-contact h2{font-size:clamp(40px,6.4vw,104px);line-height:1;margin-bottom:22px}
:lang(zh-Hans) .m5-contact h2{line-height:1.15}
.m5-contact-intro{font-size:18px;max-width:28em;margin-bottom:32px;font-weight:500}
.m5-contact-intro p:last-child{margin:0}
.m5-contact-info{padding:6px clamp(22px,2.6vw,32px);border-radius:var(--r);background:var(--on-accent);color:var(--accent)}
.m5-contact-list li{padding:16px 0}
.m5-contact-list li+li{border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.m5-contact-list .bc-k{font-size:11.5px;letter-spacing:.16em;margin-bottom:2px}
.m5-contact-list a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;text-decoration:none;font-size:19px;font-weight:700}
.m5-contact-list span a{font-size:15px;text-decoration:underline}
.m5-social{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 0 12px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.m5-social a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;text-decoration:none}

/* footer */
.m5-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)}
.m5-foot-brand{font-weight:700;color:var(--fg)}

@media (max-width:1000px){
  .m5-row{grid-template-columns:48px minmax(0,1fr) 56px;row-gap:6px}
  .m5-row-d{grid-column:2;grid-row:2}
  .m5-ask{grid-column:3;grid-row:1/span 2}
  .m5-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .m5-main>.m5-hero,.m5-main>.m5-about,.m5-sec-head,.m5-block{grid-template-columns:minmax(0,1fr)}
  .m5-intro{justify-self:start}
  .m5-phone-wrap{width:min(72%,320px);margin-top:12px}
  .m5-about-ph{position:static;max-width:480px}
  .m5-faq-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .tpl-tec-05{--r:22px}
  .m5-head{padding-block:12px 4px}
  .m5-nav{width:calc(100% + 16px);margin:0 -8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .m5-nav a{flex:none;padding:0 10px;font-size:14.5px}
  .m5-actions>.m5-btn{flex:1 1 100%}
  .m5-phone-wrap{width:min(76%,290px)}
  .m5-phone{padding:8px;border-radius:44px}
  .m5-phone img{border-radius:36px}
  .m5-island{top:20px;height:18px}
  .m5-ticker{padding:14px 0}
  .m5-steps li{grid-template-columns:64px minmax(0,1fr)}
  .m5-row{grid-template-columns:minmax(0,1fr) 52px;gap:6px 14px}
  .m5-row-n{grid-column:1/-1}
  .m5-row h3{grid-column:1}
  .m5-row-d{grid-column:1;grid-row:3}
  .m5-ask{grid-column:2;grid-row:2/span 2;width:52px;height:52px}
  .m5-tiles{gap:12px}
  .m5-main>.m5-contact{padding-inline:12px}
  .m5-block{padding:44px 22px 24px}
  .m5-block::after{width:46%;bottom:-18%}
}