/* 韵翔信科 v3 inner-page components. Loaded by services / solutions / about / contact / 404 only (not by
   index.html). New classes use the ip- prefix; existing components are only adjusted under a page scope. */

/* photos (S1 / S3 / S7): duotone baked at build time; frame keeps ratio, radius and clipping */
.ip-photo{margin:0}
.ip-photo__frame{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--brand-50);isolation:isolate;transform:translateZ(0)}
.ip-photo__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(14,47,82,.35))}
.section--dark .ip-photo__frame{background:var(--dark-800)}
.section--dark .ip-photo__frame::after{background:linear-gradient(180deg,transparent 50%,rgba(11,22,38,.45))}
.ip-photo__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ip-photo--wide .ip-photo__frame{aspect-ratio:16/7;border-radius:var(--r-xl)}
.ip-photo--split .ip-photo__frame{aspect-ratio:4/3}
.ip-photo--tall .ip-photo__frame{aspect-ratio:4/5}
.ip-photo__cap{padding:12px 4px 0;font-size:13px;line-height:1.6;color:var(--ink-800)}
.section--dark .ip-photo__cap{color:var(--on-dark-muted)}
@media (max-width:767.98px){.ip-photo--wide .ip-photo__frame{aspect-ratio:16/9;border-radius:var(--r-lg)}}
@media (max-width:1023.98px){.ip-photo--split{width:100%;max-width:640px;margin-inline:auto}.ip-photo--tall{width:100%;max-width:480px;margin-inline:auto}}
@media (min-width:1024px){.ip-photo--split{width:100%;max-width:600px;justify-self:end}.ip-photo--tall{width:360px}}
.js .ip-kb.is-in img{animation:ip-kb 24s ease-in-out infinite alternate}
@keyframes ip-kb{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,-1%)}}
[data-ip-parallax] img{transform:translate3d(0,var(--ip-py,0px),0) scale(1.08)}
.is-off,.is-off *{animation-play-state:paused!important}

/* line drawing, packets, pings, dashes */
.js [data-ip-draw] .ip-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out) calc(var(--i,0)*120ms)}
.js [data-ip-draw].is-in .ip-line{stroke-dashoffset:0}
.js [data-ip-draw] .ip-node{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out) calc(var(--i,0)*120ms),transform .6s var(--ease-out) calc(var(--i,0)*120ms)}
.js [data-ip-draw] .ip-fade{opacity:0;transition:opacity .5s ease 1.2s}
.js [data-ip-draw].is-in .ip-node{opacity:1;transform:none}
.js [data-ip-draw].is-in .ip-fade{opacity:1}
.ip-packet{animation:ip-packet 6s linear infinite;animation-delay:calc(var(--i,0)*-3s);offset-rotate:0deg}
@keyframes ip-packet{from{offset-distance:0%;left:0%}to{offset-distance:100%;left:100%}}
@supports not (offset-path:path('M0 0')){.ip-packet{display:none}}
.ip-ping{transform-box:fill-box;transform-origin:center;animation:ip-ping 3s ease-out infinite;animation-delay:calc(var(--i,0)*400ms)}
@keyframes ip-ping{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}
.ip-dash{stroke-dasharray:6 10;animation:ip-dash 1.4s linear infinite}
@keyframes ip-dash{to{stroke-dashoffset:-16}}

/* section building blocks */
.page-services main > .section h2,.page-solutions main > .section h2,.page-about main > .section h2{text-wrap:balance}
.ip-part{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-5);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--brand-700)}
.ip-part::before{content:"";flex:none;width:18px;height:2px;border-radius:2px;background:var(--brand-300)}
.section--dark .ip-part{color:var(--brand-300)}
.ip-gap{margin-top:var(--sp-8)}
.ip-sol-head{display:grid;gap:var(--sp-4);max-width:760px;margin-bottom:var(--sp-7)}
.ip-sol-head__num{font-family:var(--font-num);font-size:clamp(3rem,2rem + 3vw,5rem);font-weight:800;line-height:.9;letter-spacing:-.04em;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:768px){
  .ip-sol-head{grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-6)}
  .ip-sol-head__num{grid-column:1;grid-row:1 / span 3}
  .ip-sol-head > :not(.ip-sol-head__num){grid-column:2}
}
.ip-deliverables{display:grid;gap:var(--sp-2) var(--sp-3)}
@media (min-width:640px){.ip-deliverables{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ip-deliverables--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ip-deliverables li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-800);font-size:15px;font-weight:600;line-height:1.5}
.ip-deliverables li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--brand-500)}
.section--grey .ip-deliverables li{background:var(--surface)}
.ip-out{margin-top:var(--sp-1);font-size:14px;font-weight:600;color:var(--brand-700)}

/* numbered steps (virtualization, about) */
.ip-steps{display:grid;gap:var(--sp-4);counter-reset:ips}
.ip-steps li{position:relative;display:flex;align-items:center;gap:var(--sp-4);font-weight:600;line-height:1.5;color:var(--ink-900)}
.ip-steps li::before{counter-increment:ips;content:counter(ips,decimal-leading-zero);flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--brand-100);background:var(--surface);font-family:var(--font-num);font-size:14px;font-weight:700;color:var(--brand-700)}
.ip-steps--dark li{color:#fff}
.ip-steps--dark li::before{background:rgba(255,255,255,.04);border-color:rgba(90,186,214,.35);color:var(--brand-300)}
@media (min-width:1024px){
  .ip-steps{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-5)}
  .ip-steps li{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .ip-steps li:not(:last-child)::after{content:"";position:absolute;top:23px;left:60px;right:-12px;height:2px;background:linear-gradient(90deg,var(--brand-100),transparent)}
  .ip-steps--dark li:not(:last-child)::after{background:linear-gradient(90deg,rgba(90,186,214,.4),transparent)}
}

/* flow diagrams: S2 pipeline, S5 main chain, IC chain. One rail behind opaque marks (>=768) */
.ip-flowwrap{position:relative}
.ip-flow{position:relative;z-index:1;display:grid;gap:var(--sp-5)}
.ip-flow__step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--sp-4);align-content:start}
.ip-flow__step > :not(.ip-flow__mark){grid-column:2}
.ip-flow__mark{grid-row:1 / span 3;position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--surface);border:1px solid var(--brand-100);color:var(--brand-700)}
.ip-flow__mark svg{width:100%;height:100%}
.ip-flow__mark--icon svg{width:26px;height:26px}
.ip-flow__step:not(:last-child)::before{content:"";position:absolute;left:31px;top:72px;bottom:-16px;width:2px;background:var(--brand-100)}
.ip-flow__num{font-family:var(--font-num);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--brand-500);line-height:1.6}
.ip-flow__title{font-size:17px;font-weight:600;line-height:1.4;color:var(--ink-900)}
.ip-flow__text{font-size:14px;line-height:1.7;color:var(--ink-800)}
.ip-flowwrap .ip-rail,.ip-flowwrap .ip-rail-pk{display:none}
@media (min-width:768px){
  .ip-flow{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:24px}
  .ip-flow__step{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
  .ip-flow__step:not(:last-child)::before{display:none}
  .ip-flow__mark{width:96px;height:72px;margin-bottom:var(--sp-3)}
  .ip-flowwrap .ip-rail,.ip-flowwrap .ip-rail-pk{display:block;position:absolute;z-index:0;top:36px;left:calc((100% - (var(--n,5) - 1) * 24px) / (2 * var(--n,5)));width:calc(100% - (100% - (var(--n,5) - 1) * 24px) / var(--n,5));height:2px;overflow:visible}
  .ip-rail line{stroke:var(--brand-500);stroke-width:2}
  .ip-rail .ip-dash{stroke:var(--brand-700)}
  .ip-rail-pk{height:0}
  .ip-rail-pk .ip-packet{position:absolute;top:-4px;margin-left:-4px;width:9px;height:9px;border-radius:50%;background:var(--brand-300);box-shadow:0 0 0 4px rgba(90,186,214,.25)}
}
.section--dark .ip-flow__mark{background:var(--dark-800);border-color:rgba(90,186,214,.35);color:var(--brand-300)}
.section--dark .ip-flow__step::before{background:rgba(90,186,214,.3)}
.section--dark .ip-flow__num{color:var(--brand-300)}
.section--dark .ip-flow__title{color:#fff}
.section--dark .ip-rail line{stroke:var(--brand-300)}

/* code-drawn figures */
.ip-art{position:relative;margin:0;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.ip-art svg{display:block}
.ip-pipeline{padding:clamp(24px,4vw,48px)}
.ip-pipeline .ip-flow__mark{background:var(--brand-50)}
.ip-arch{display:grid;gap:var(--sp-5);padding:clamp(20px,3.5vw,40px)}
.ip-arch__in{display:grid;gap:var(--sp-3)}
@media (min-width:640px){.ip-arch__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ip-arch__box{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 16px;border-radius:var(--r-md);border:1px dashed var(--brand-300);background:var(--brand-50);font-size:15px;font-weight:600;color:var(--ink-900);line-height:1.5}
.ip-arch__tag{font-family:var(--font-num);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--brand-600)}
.ip-arch__down{display:block;width:2px;height:24px;margin:-8px auto;background:linear-gradient(var(--brand-300),var(--brand-700))}
.ip-arch__bus{justify-content:center;border-style:solid;border-color:var(--brand-100);background:var(--surface-2)}
.ip-arch .ip-flow__mark{border-color:var(--brand-300)}

/* code-drawn section backgrounds (S4, S6): >=1024 right-side background, 768-1023 full and faint, <768 card */
.ip-has-bg .container > :not(.ip-art--bg){position:relative;z-index:1}
.ip-art--bg{position:absolute;z-index:0;pointer-events:none;border:0;border-radius:0;background:none;box-shadow:none}
.ip-art--bg svg{width:100%;height:100%}
@media (min-width:1024px){
  .ip-art--bg{top:0;right:0;left:40%;height:min(100%,680px);opacity:.75;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .ip-art--bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--dark-900) 0,transparent 50%)}
  .ip-has-bg .ip-sol-head{max-width:700px}
}
@media (min-width:768px) and (max-width:1023.98px){.ip-art--bg{inset:0;opacity:.1}.ip-art--bg .ip-packet{display:none}}
@media (max-width:767.98px){.ip-art--bg{position:relative;aspect-ratio:4/3;margin-bottom:var(--sp-6);overflow:hidden;border-radius:var(--r-lg);background:var(--dark-800);border:1px solid rgba(255,255,255,.08)}}

/* about */
.ip-qa{display:grid;gap:var(--sp-1)}
.ip-qa dt{margin-top:var(--sp-3);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--brand-700)}
.ip-qa dd{margin:0;font-size:15px;line-height:1.75;color:var(--ink-800)}
.ip-values{display:grid;gap:var(--sp-7)}
.ip-values__main{display:grid;gap:var(--sp-7);align-content:start}
@media (min-width:1024px){
  .ip-values{grid-template-columns:minmax(0,1fr) 360px;gap:clamp(40px,5vw,72px);align-items:start}
  .page-about .ip-values .mini-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ip-biz{display:grid;gap:var(--sp-3)}
.ip-biz a{display:grid;gap:var(--sp-2);padding:var(--sp-5) clamp(20px,3vw,32px);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);color:var(--ink-800);text-decoration:none;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
.ip-biz a:hover{border-color:var(--brand-300);box-shadow:var(--shadow-md)}
.ip-biz__tag{font-family:var(--font-num);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--brand-600)}
.ip-biz__tag b{margin-right:10px;color:var(--brand-700)}
.ip-biz__name{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink-900)}
.ip-biz__scope{font-size:15px;line-height:1.7}
.ip-biz__go{font-weight:600;color:var(--brand-700)}
@media (min-width:1024px){.ip-biz a{grid-template-columns:200px 260px minmax(0,1fr) auto;align-items:center;gap:var(--sp-6)}}

/* next-page card (services -> solutions -> about -> services) */
.ip-next{position:relative;display:grid;gap:var(--sp-2);padding:var(--sp-6) clamp(24px,4vw,48px);border-radius:var(--r-lg);background:var(--surface-2);border:1px solid transparent;color:var(--ink-800);text-decoration:none;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
.ip-next:hover{border-color:var(--brand-300);box-shadow:var(--shadow-md)}
.ip-next__k{font-family:var(--font-num);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--brand-600)}
.ip-next__t{font-size:var(--fs-h3);font-weight:600;line-height:1.4;color:var(--ink-900)}
.ip-next__d{font-size:15px;line-height:1.7}
.ip-next__a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--brand-700);color:#fff;font-weight:600;transition:transform var(--dur-ui) ease}
.ip-next:hover .ip-next__a{transform:translateX(4px)}
@media (min-width:768px){.ip-next{grid-template-columns:120px minmax(0,1fr) auto;align-items:center;column-gap:var(--sp-6)}.ip-next__a{grid-column:3;grid-row:1 / span 2}.ip-next__k{grid-row:1 / span 2}}

/* contact */
.ip-contact{display:grid;gap:var(--sp-7);padding:clamp(28px,4.5vw,64px);border-radius:var(--r-xl);background:var(--surface-2)}
@media (min-width:1024px){.ip-contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8)}}
@media (max-width:639.98px){.ip-contact{border-radius:var(--r-lg)}}
.ip-contact__col{display:grid;gap:var(--sp-4);align-content:start;min-width:0}
.ip-contact__label{font-size:var(--fs-small);font-weight:600;color:var(--ink-500)}
.ip-contact__mail{font-size:clamp(1.5rem,1rem + 2vw,2.5rem);font-weight:600;line-height:1.3;color:var(--ink-900);overflow-wrap:anywhere}
.ip-contact__mail a{color:inherit;text-decoration:none}
.ip-contact__mail a:hover{color:var(--brand-700)}
.ip-contact__addr{font-size:clamp(1.125rem,1rem + .6vw,1.375rem);font-weight:600;line-height:1.6;color:var(--ink-900)}
.ip-copy[hidden]{display:none}
.page-contact .ip-contact .map-art{margin-top:var(--sp-2);box-shadow:none;border:1px solid var(--line)}
.page-contact .ip-contact .map-art svg{height:clamp(180px,18vw,240px)}

/* 404 entry cards */
.page-404 .error-hero__inner{max-width:720px}
.ip-404{display:grid;gap:var(--sp-3);width:100%;margin-top:var(--sp-6);text-align:left}
@media (min-width:640px){.ip-404{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ip-404 a{display:grid;gap:2px;height:100%;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);color:var(--ink-800);font-size:14px;line-height:1.6;text-decoration:none;transition:border-color var(--dur-ui) ease,box-shadow var(--dur-ui) ease}
.ip-404 a:hover{border-color:var(--brand-300);box-shadow:var(--shadow-md)}
.ip-404 b{font-size:16px;color:var(--ink-900)}

@media (prefers-reduced-motion:reduce){
  .js [data-ip-draw] .ip-line{stroke-dashoffset:0!important;transition:none!important}
  .js [data-ip-draw] .ip-node{opacity:1!important;transform:none!important;transition:none!important}
  .js [data-ip-draw] .ip-fade{opacity:1!important;transition:none!important}
  .ip-kb img{animation:none!important;transform:none!important}
  .ip-packet{display:none}
  .ip-ping,.ip-dash{animation:none!important}
  [data-ip-parallax] img{transform:none!important}
  .ip-next,.ip-next__a,.ip-biz a,.ip-404 a{transition:none}
}
@media print{
  .ip-art--bg,.ip-packet,.ip-rail-pk{display:none!important}
  .js [data-ip-draw] .ip-line{stroke-dashoffset:0!important}
  .js [data-ip-draw] .ip-node,.js [data-ip-draw] .ip-fade{opacity:1!important;transform:none!important}
}