/* Connected by design — Kokantech's original visual identity. */
.header { height: 90px; }
.header .logo { width: 238px; }
.button { border-radius: 2px; }
.button-dot { width: 15px; height: 15px; border-radius: 0; background: transparent; position: relative; }
.button-dot::after { content: '↗'; position: absolute; inset: -4px 0 0; font-size: 19px; }
.connected-hero { background: #091b30; color: #fff; overflow: hidden; position: relative; }
.connected-hero::before { content: ''; position: absolute; width: 760px; height: 760px; top: -320px; right: -350px; border: 1px solid #ffffff09; border-radius: 50%; pointer-events: none; }
.connected-meta { display: flex; justify-content: space-between; gap: 24px; padding-block: 28px; border-bottom: 1px solid #ffffff17; color: #aebfd1; font-size: 10px; letter-spacing: .13em; }
.connected-meta>span:first-child { display: flex; align-items: center; gap: 11px; }
.connected-meta i { width: 6px; height: 6px; border-radius: 50%; background: #ff8745; box-shadow: 0 0 12px #f4510b70; }
.connected-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 22px; align-items: center; padding-block: 53px 47px; }
.connected-grid>* { min-width: 0; }
.connected-copy h1 { font-size: clamp(3.9rem,6.05vw,6rem); line-height: 1.07; letter-spacing: -.065em; font-weight: 500; }
.connected-copy h1>span { color: #ff8745; }
.connected-copy>p { color: #b7c5d6; font-size: 1.06rem; line-height: 1.85; max-width: 445px; margin-top: 29px; }
.connected-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.connected-actions .button { padding: 17px 22px; }
.connected-actions .button>span { font-size: 22px; line-height: 1; }
.connected-link { font-size: .88rem; display: inline-flex; gap: 16px; padding-block: 12px; border-bottom: 1px solid #64778b; }
.connected-link:hover { color: #ffac75; }
.connected-signoff { margin-top: 33px; font-size: .74rem; color: #a9bace; display: flex; gap: 11px; align-items: center; }
.connected-signoff>span { color: #ff8745; font-size: 24px; }
.connected-visual { position: relative; }
.signal-map { width: 100%; aspect-ratio: 600/460; position: relative; isolation: isolate; }
.signal-grid { position: absolute; inset: 0; background-image: radial-gradient(#8eb1cf35 .7px,transparent .7px); background-size: 21px 21px; mask-image: radial-gradient(ellipse,#000 15%,transparent 70%); }
.signal-halo { position: absolute; inset: 5%; background: radial-gradient(ellipse,#f4510b15,transparent 64%); }
.signal-circuit { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.signal-core { position: absolute; width: 25%; aspect-ratio: 1; left: 37.5%; top: 32.6%; display: grid; place-items: center; background: linear-gradient(140deg,#284258,#0d213d 65%); border: 1px solid #8aa1b86b; border-radius: 24%; transform: rotate(-9deg); box-shadow: 0 0 0 9px #12283d,0 0 0 10px #8ca1b126,0 24px 60px #0008,inset 0 1px 1px #ffffff60; }
.signal-core svg { width: 80%; transform: rotate(9deg); }
.signal-node { position: absolute; display: flex; align-items: center; gap: 9px; background: #10263c; border: 1px solid #3c5369; border-radius: 5px; padding: 10px 12px; color: #c4d1df; font-size: clamp(8px,.72vw,11px); letter-spacing: .06em; white-space: nowrap; box-shadow: 0 8px 20px #0002; transition: border-color .25s,background .25s,color .25s; }
.signal-node b { font-weight: 400; color: #91a7ba; font-size: 9px; }
.signal-node>span { color: #ffac75; font-size: 18px; line-height: 1; margin-left: 5px; }
.signal-node.is-active { border-color: #ff8745; background: #382a28; color: #fff; }
.node-software { left: 0; top: 18%; }.node-cloud { right: 0; top: 18%; }
.node-ai { left: 0; top: 45%; }.node-security { right: 0; top: 45%; }
.node-strategy { left: 0; top: 72%; }.node-support { right: 0; top: 72%; }
.signal-coordinate { position: absolute; bottom: 3%; left: 0; width: 100%; text-align: center; font-size: 9px; letter-spacing: .18em; color: #a1b3c5; }
.signal-pulses { animation: signal-flow 5s linear 1; }
@keyframes signal-flow { to { stroke-dashoffset: -550; } }
.signal-caption { border-left: 2px solid #f4510b; padding: 1px 0 1px 21px; max-width: 430px; margin: 0 auto; }
.signal-caption-label { color: #a7bacd; font-size: 9px; letter-spacing: .14em; }
.signal-caption h2 { font-size: 1.27rem; line-height: 1.3; letter-spacing: -.025em; margin-top: 7px; }
.signal-caption p { font-size: .82rem; line-height: 1.65; color: #aebfd1; margin-top: 8px; min-height: 44px; }
.signal-caption a { display: inline-flex; gap: 20px; align-items: center; font-size: .8rem; color: #ffac75; margin-top: 9px; }
.signal-caption a:hover { text-decoration: underline; text-underline-offset: 4px; }
.expertise-dock { display: flex; border-top: 1px solid #ffffff25; align-items: stretch; }
.dock-label { align-self: center; flex: 0 0 166px; font-size: 9px; letter-spacing: .08em; line-height: 1.9; color: #a7bacd; }
.dock-label strong { color: #e5edf5; font-weight: 500; }
.expertise-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); flex: 1; min-width: 0; }
.expertise-tabs button { border: 0; border-left: 1px solid #ffffff17; border-top: 2px solid transparent; margin-top: -1px; background: transparent; color: #c2cddd; font-size: .74rem; text-align: left; padding: 19px 16px 22px; position: relative; transition: background .2s,color .2s; }
.expertise-tabs button>span { display: block; color: #90a5bb; font-size: 9px; margin-bottom: 6px; }
.expertise-tabs button>b { position: absolute; top: 16px; right: 13px; font-size: 14px; font-weight: 400; color: #ff8745; opacity: 0; }
.expertise-tabs button[aria-selected=true] { background: #ffffff06; color: #fff; border-top-color: #ff8745; }
.expertise-tabs button[aria-selected=true]>b,.expertise-tabs button:hover>b { opacity: 1; }
.expertise-tabs button:hover { background: #ffffff0b; color: #fff; }
.connected-hero :focus-visible { outline: 2px solid #ffac75; outline-offset: 4px; }
.expertise-tabs button:focus-visible { outline-offset: -5px; }
.connection-strip { background: #edf1f4; border-bottom: 1px solid #dce3e9; }
.connection-strip>.container { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 29px; }
.connection-strip span { font-size: 9px; line-height: 1.7; letter-spacing: .08em; color: #59687b; }
.connection-strip p { display: flex; align-items: center; gap: 32px; color: #0d213d; font: 500 clamp(1rem,1.7vw,1.6rem)/1.4 var(--display); letter-spacing: -.04em; }
.connection-strip i { font-style: normal; color: #c53c00; font-size: 24px; }
.section-top h2 { font-weight: 500; letter-spacing: -.055em; }
.home-page #services { padding-block: 100px; }
.service-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 35px 32px; }
.service-card .service-icon { border: 0; background: transparent; border-radius: 0; width: 35px; height: 35px; }
.service-card .service-icon svg { width: 31px; height: 31px; }
.service-card .card-top { margin-bottom: 37px; }
.service-card .card-number { letter-spacing: .1em; }
.service-card .card-link { border: 0; padding-top: 5px; }
.service-card .card-link span { width: 34px; height: 34px; border: 1px solid #dfe5eb; background: transparent; }
.service-card:is(:hover,:focus-visible) { transform: none; box-shadow: inset 0 3px 0 #ff8745; }
.home-page .approach-section { margin-inline: 20px; background: #0c233a; }
.home-page .approach-section::before { width: 750px; height: 750px; border-color: #ffffff0b; box-shadow: 0 0 0 65px #ffffff03,0 0 0 130px #ffffff02; left: -420px; bottom: -400px; }
.home-page .approach-intro h2 { font-weight: 500; font-size: clamp(2.6rem,4.1vw,4rem); }
.principle>span { border: 1px solid #ffffff24; width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.industry-tabs { gap: 0; }
.industry-tabs button { flex: 1; border: 1px solid var(--line); border-right: 0; border-bottom: 0; padding-block: 21px; }
.industry-tabs button:last-child { border-right: 1px solid var(--line); }
.industry-tabs button[aria-selected=true] { background: #0d213d; color: #fff; border-color: #0d213d; box-shadow: inset 0 3px #f4510b; }
.industry-panel { border-radius: 0; background: #f3f6f9; padding-block: 48px; }
.process-number { font: 500 2rem var(--display); letter-spacing: -.04em; padding-top: 23px; }
.cta { border-radius: 0; padding-block: 68px; }
.cta::after { width: 520px; height: 520px; right: -140px; bottom: -320px; box-shadow: 0 0 0 35px #10244008,0 0 0 70px #10244008; }
.subhero { background: #0d213d; color: #fff; }
.subhero .intro,.subhero .eyebrow,.subhero .breadcrumb { color: #b7c5d6; }
.subhero h1 { font-weight: 500; }
.subhero .breadcrumb a:hover { color: #ffac75; }
.subhero :focus-visible { outline-color: #ffac75; }
@media(min-width:1600px) { .connected-grid { padding-block: 74px 65px; } }
@media(max-width:1150px) {
  .connected-copy h1 { font-size: clamp(3.5rem,6.2vw,5rem); }
  .connected-actions { gap: 17px; }.connected-actions .button { font-size: .83rem; padding-inline: 17px; gap: 16px; }.connected-link { font-size: .8rem; gap: 10px; }
  .dock-label { flex-basis: 140px; }.expertise-tabs button { padding-inline: 10px; font-size: .68rem; }
  .signal-node { gap: 5px; padding: 8px; }.signal-node>span { margin-left: 0; }
  .connection-strip p { gap: 23px; }
}
@media(max-width:940px) {
  .connected-grid { grid-template-columns: 1.1fr 1fr; padding-block: 44px; gap: 20px; }
  .connected-copy h1 { font-size: 3.5rem; }.connected-copy>p { font-size: .94rem; }.connected-actions { align-items: flex-start; flex-direction: column; gap: 13px; }
  .connected-meta { font-size: 9px; }.connected-meta>span:last-child { display: none; }
  .signal-node { font-size: 8px; padding: 7px; }.signal-node b { display: none; }
  .signal-caption { padding-left: 15px; }.signal-caption h2 { font-size: 1.1rem; }.signal-caption p { min-height: 65px; }
  .dock-label { display: none; }.expertise-tabs button { font-size: .75rem; padding: 17px 12px; }
  .connection-strip span { display: none; }.connection-strip p { width: 100%; justify-content: space-between; font-size: 1.3rem; }
}
@media(max-width:740px) {
  .header { height: 84px; }.header .logo { width: 225px; }
  .connected-grid { grid-template-columns: 1fr; gap: 30px; padding-block: 41px 34px; }
  .connected-copy h1 { font-size: clamp(3.3rem,9.9vw,4.9rem); }.connected-copy>p { max-width: 480px; margin-top: 22px; }
  .connected-actions { flex-direction: row; align-items: center; gap: 22px; margin-top: 24px; }.connected-signoff { margin-top: 21px; }
  .connected-visual { max-width: 540px; width: 100%; margin-inline: auto; }
  .signal-node { font-size: 10px; padding: 9px 12px; }.signal-node b { display: block; }
  .signal-caption { max-width: none; margin-top: 9px; }.signal-caption p { min-height: 0; }.signal-caption h2 { font-size: 1.2rem; }
  .expertise-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }.expertise-tabs button { border-bottom: 1px solid #ffffff17; padding: 13px 14px 16px; font-size: .77rem; }
  .expertise-tabs button>span { margin-bottom: 3px; }
  .connection-strip p { font-size: 1rem; gap: 10px; }.connection-strip i { font-size: 20px; }.connection-strip>.container { padding-block: 24px; }
  .home-page #services { padding-block: 65px; }.home-page .approach-section { margin-inline: 0; }
  .service-card { padding: 28px; }.service-card .card-top { margin-bottom: 24px; }
  .industry-tabs button { border-right: 1px solid var(--line); }.industry-panel { padding-block: 30px; }
}
@media(max-width:540px) {
  .header { height: 78px; }.header .logo { width: 205px; }.connected-meta { font-size: 8px; letter-spacing: .07em; padding-block: 20px; }
  .connected-copy h1 { font-size: clamp(2.75rem,10.8vw,3.85rem); }.connected-copy>p { font-size: .94rem; line-height: 1.8; }
  .connected-actions { gap: 18px; }.connected-actions .button { font-size: .79rem; padding: 14px; gap: 16px; }.connected-link { font-size: .77rem; }
  .connected-signoff { font-size: .65rem; gap: 7px; }.signal-node { font-size: 8px; padding: 7px; gap: 5px; }.signal-node b { font-size: 7px; }.signal-node>span { font-size: 16px; }
  .signal-core { box-shadow: 0 0 0 6px #12283d,0 0 0 7px #8ca1b126,0 15px 35px #0008; }.signal-coordinate { font-size: 7px; }
  .connection-strip p { font-size: .8rem; gap: 7px; }.connection-strip i { font-size: 16px; }
}
@media(max-width:370px) { .connected-actions { flex-direction: column; align-items: flex-start; gap: 10px; }.signal-node b { display: none; }.connection-strip p { flex-wrap: wrap; justify-content: center; column-gap: 12px; }.connection-strip i { font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { .signal-pulses { animation: none; } }
@media print { .connected-hero { background: #fff; color: #000; }.connected-visual,.expertise-dock,.connected-meta,.connection-strip { display: none; }.connected-grid { display: block; }.connected-copy>p { color: #333; }.subhero { background: #fff; color: #000; } }