:root {
  --navy: #07142f;
  --navy-2: #0b1e46;
  --blue: #136be7;
  --cyan: #18b8ef;
  --pink: #ed1371;
  --ink: #0c1b35;
  --muted: #647089;
  --line: #dfe5ee;
  --light: #f6f8fb;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(7, 20, 47, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: -9999px; top: 10px; z-index: 1000; background: #fff; padding: 10px 14px; }
.skip-link:focus { left: 10px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7,20,47,.07);
}
.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; width: 190px; height: 72px; overflow: hidden; }
.brand img { width: 250px; max-width: none; transform: translate(-28px, 0); }
.nav { display: flex; gap: 34px; align-items: center; font-size: 14px; font-weight: 600; }
.nav a { transition: .2s ease; }
.nav a:hover { color: var(--blue); }
.nav-cta { background: var(--navy); color: #fff !important; padding: 12px 18px; border-radius: 999px; }
.nav-cta:hover { background: var(--blue); }
.nav-toggle { display:none; border:0; background:transparent; padding:8px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--navy); margin:5px 0; }

.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%); }
.hero::before { content:""; position:absolute; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle, rgba(19,107,231,.11), transparent 68%); right:-120px; top:-180px; }
.hero::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(237,19,113,.08), transparent 68%); left:-180px; bottom:-150px; }
.hero-grid { min-height: 680px; display:grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items:center; position:relative; z-index:2; }
.eyebrow { display:flex; align-items:center; gap:10px; text-transform:uppercase; letter-spacing:.15em; font-size:12px; font-weight:800; color:var(--blue); margin-bottom:18px; }
.eyebrow span { display:block; width:28px; height:2px; background:linear-gradient(90deg,var(--pink),var(--blue)); }
.eyebrow.light { color:#88b8ff; }
.hero h1, .section h2, .cta-box h2 { margin:0; letter-spacing:-.045em; line-height:1.04; }
.hero h1 { font-size: clamp(46px, 6vw, 76px); max-width: 760px; }
.hero-lead { color:var(--muted); font-size:19px; max-width:680px; margin:24px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border-radius:10px; font-weight:700; border:1px solid transparent; transition:.2s ease; cursor:pointer; }
.btn-primary { background:linear-gradient(135deg,var(--blue),#0555c8); color:#fff; box-shadow:0 12px 30px rgba(19,107,231,.23); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(19,107,231,.30); }
.btn-secondary { background:#fff; border-color:var(--line); color:var(--navy); }
.btn-secondary:hover { border-color:#b9c4d5; transform:translateY(-2px); }
.hero-points { display:flex; gap:34px; margin-top:40px; padding-top:25px; border-top:1px solid var(--line); }
.hero-points div { display:flex; flex-direction:column; }
.hero-points strong { font-size:15px; }
.hero-points span { font-size:12px; color:var(--muted); }
.hero-visual { display:flex; align-items:center; justify-content:center; min-height:500px; }
.signal-card { width:min(440px, 90vw); aspect-ratio:1; position:relative; border-radius:40px; background:radial-gradient(circle at 45% 40%, #173870 0%, #0b204b 44%, #07142f 100%); box-shadow:0 35px 85px rgba(7,20,47,.28); overflow:hidden; }
.signal-card::before { content:""; position:absolute; inset:10%; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.signal-orbit { position:absolute; border-radius:50%; border:3px solid transparent; }
.orbit-one { inset:12%; border-left-color:#1d85f3; border-top-color:#20c7f5; transform:rotate(28deg); }
.orbit-two { inset:20%; border-right-color:var(--pink); border-bottom-color:#b615ae; transform:rotate(-24deg); }
.signal-node { position:absolute; width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 7px rgba(255,255,255,.08); }
.node-one { background:var(--cyan); top:18%; right:24%; }
.node-two { background:var(--pink); bottom:18%; left:27%; }
.signal-core { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; }
.core-mark { font-size:72px; font-weight:800; letter-spacing:-.07em; }
.signal-core small { text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:#aebbd6; }
.hero-wave { height:7px; background:linear-gradient(90deg,var(--pink),var(--blue),var(--cyan)); }

.trust-strip { background:var(--navy); color:#dbe7ff; }
.trust-grid { min-height:78px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; text-align:center; font-size:13px; font-weight:700; letter-spacing:.03em; }
.trust-grid span + span { border-left:1px solid rgba(255,255,255,.12); }

.section { padding:110px 0; }
.section-heading { max-width:740px; margin-bottom:46px; }
.section h2 { font-size:clamp(38px,5vw,58px); }
.section-heading p, .about-copy p, .split-copy p, .contact-copy p { color:var(--muted); font-size:17px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px 28px; min-height:270px; transition:.25s ease; }
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:#cbd5e5; }
.icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(145deg,#edf5ff,#fff0f7); color:var(--blue); font-weight:800; font-size:13px; }
.service-card h3 { font-size:20px; line-height:1.25; margin:28px 0 12px; }
.service-card p { color:var(--muted); font-size:14px; margin:0; }

.section-dark { background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.section-dark::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.06); border-radius:50%; right:-180px; top:-120px; box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.015); }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; position:relative; z-index:2; }
.split-copy p { color:#aebbd4; }
.text-link { color:#fff; font-weight:700; display:inline-flex; gap:8px; align-items:center; margin-top:10px; }
.text-link span { color:var(--pink); font-size:24px; }
.benefit-list { display:flex; flex-direction:column; }
.benefit { display:grid; grid-template-columns:65px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.benefit:first-child { padding-top:0; }
.benefit > span { color:#72a9ff; font-size:12px; font-weight:800; }
.benefit h3 { margin:0 0 6px; font-size:19px; }
.benefit p { margin:0; color:#aebbd4; font-size:14px; }

.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-panel { position:relative; min-height:430px; background:linear-gradient(145deg,#f5f8fd,#fff); border:1px solid var(--line); border-radius:28px; padding:50px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.about-panel::after { content:""; width:270px; height:270px; border-radius:50%; border:30px solid rgba(19,107,231,.06); position:absolute; right:-80px; top:-70px; }
.connection-line { position:absolute; left:66px; top:78px; bottom:78px; width:2px; background:linear-gradient(var(--cyan),var(--blue),var(--pink)); }
.about-stat { position:relative; z-index:2; padding-left:54px; display:flex; flex-direction:column; }
.about-stat::before { content:""; position:absolute; left:9px; top:14px; width:14px; height:14px; border-radius:50%; background:#fff; border:4px solid var(--blue); }
.about-stat strong { font-size:33px; letter-spacing:-.04em; }
.about-stat span { color:var(--muted); font-size:13px; }
.about-copy p + p { margin-top:20px; }

.cta-section { padding:0 0 110px; }
.cta-box { background:linear-gradient(110deg,#0a2454 0%,#0c3d86 55%,#1268d8 100%); color:#fff; border-radius:28px; padding:50px 55px; display:flex; align-items:center; justify-content:space-between; gap:35px; box-shadow:0 25px 70px rgba(11,45,100,.20); }
.cta-kicker { display:block; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; color:#9ec4ff; margin-bottom:10px; }
.cta-box h2 { font-size:clamp(32px,4vw,48px); }
.btn-white { background:#fff; color:var(--navy); flex:0 0 auto; }
.btn-white:hover { transform:translateY(-2px); }

.contact-section { background:var(--light); }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.contact-copy { position:sticky; top:130px; }
.contact-note { margin-top:30px; padding:22px; border-radius:14px; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; }
.contact-note strong { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.contact-note span { font-size:22px; font-weight:800; margin-top:4px; }
.contact-note small { color:#8b5a00; margin-top:8px; line-height:1.4; }
.contact-form { background:#fff; border:1px solid var(--line); padding:34px; border-radius:22px; box-shadow:var(--shadow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; font-size:13px; font-weight:700; }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; border:1px solid #cfd7e4; border-radius:9px; padding:13px 14px; outline:none; background:#fff; color:var(--ink); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(19,107,231,.10); }
.consent { flex-direction:row !important; align-items:flex-start; font-weight:500 !important; color:var(--muted); }
.consent input { width:auto; margin-top:4px; }
.submit-btn { border:0; width:100%; }
.form-status { margin:12px 0 0; font-size:13px; color:var(--muted); }

.footer { background:#050d1e; color:#98a7c2; padding:58px 0; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:40px; align-items:start; }
.footer-brand { color:#fff; font-weight:800; font-size:25px; letter-spacing:.05em; }
.footer-brand span { color:var(--pink); }
.footer p { margin:8px 0 0; font-size:13px; }
.footer-links { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.footer-links a:hover { color:#fff; }
.footer-meta { display:flex; flex-direction:column; gap:6px; font-size:12px; text-align:right; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .nav-toggle { display:block; }
  .nav { position:absolute; top:88px; left:20px; right:20px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:18px; flex-direction:column; align-items:stretch; gap:8px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s; }
  .nav.open { opacity:1; visibility:visible; transform:none; }
  .nav a { padding:10px 12px; }
  .nav-cta { text-align:center; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; padding:80px 0; }
  .hero-visual { min-height:auto; }
  .signal-card { width:380px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .split, .about-grid, .contact-grid { grid-template-columns:1fr; gap:50px; }
  .contact-copy { position:static; }
  .cta-box { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 640px) {
  .container { width:min(100% - 28px, 1160px); }
  .nav-wrap { height:76px; }
  .brand { width:170px; height:62px; }
  .brand img { width:220px; transform:translate(-24px,0); }
  .nav { top:76px; }
  .hero-grid { padding:62px 0; gap:40px; }
  .hero h1 { font-size:44px; }
  .hero-lead { font-size:17px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .hero-points { gap:16px; justify-content:space-between; }
  .hero-points span { font-size:11px; }
  .signal-card { width:100%; border-radius:28px; }
  .trust-grid { grid-template-columns:1fr 1fr; padding:16px 0; }
  .trust-grid span { padding:10px 8px; }
  .trust-grid span + span { border-left:0; }
  .section { padding:78px 0; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:auto; }
  .about-panel { min-height:360px; padding:35px 25px; }
  .connection-line { left:41px; }
  .cta-section { padding-bottom:78px; }
  .cta-box { padding:34px 26px; border-radius:20px; }
  .btn-white { width:100%; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .contact-form { padding:24px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-meta { text-align:left; }
}

/* Four-part circular services */
.services-wheel{width:min(860px,92vw);aspect-ratio:1;margin:42px auto 10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;position:relative;border-radius:50%;overflow:hidden;background:#fff;border:1px solid #dce6f4;box-shadow:0 24px 70px rgba(7,20,47,.12)}
.wheel-segment{display:flex;align-items:center;justify-content:center;padding:64px 68px;position:relative}
.wheel-1{background:linear-gradient(145deg,#fbfdff,#e8f3ff);border-right:4px solid #fff;border-bottom:4px solid #fff}
.wheel-2{background:linear-gradient(215deg,#fffafd,#f8e9f5);border-bottom:4px solid #fff}
.wheel-3{background:linear-gradient(325deg,#fbfaff,#eee9ff);border-left:4px solid #fff}
.wheel-4{background:linear-gradient(35deg,#f9feff,#e2f8ff);border-right:4px solid #fff}
.wheel-content{max-width:280px;position:relative;z-index:2}
.wheel-1 .wheel-content,.wheel-4 .wheel-content{transform:translateX(-20px)}
.wheel-2 .wheel-content,.wheel-3 .wheel-content{transform:translateX(20px)}
.wheel-number{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:42px;padding:0 11px;border-radius:12px;background:rgba(255,255,255,.72);color:#1167e8;font-weight:800;font-size:14px}
.wheel-icon{display:inline-flex;margin-left:12px;color:#07142f;font-size:28px;font-weight:800}
.wheel-segment h3{margin:18px 0 12px;color:#07142f;font-size:26px;line-height:1.08}
.wheel-segment p{margin:0;color:#62708b;font-size:15px;line-height:1.58}
.wheel-hub{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;background:#fff;border:5px solid #edf3fb;box-shadow:0 10px 34px rgba(7,20,47,.14);display:flex;align-items:center;justify-content:center}
.wheel-hub img{width:76%;height:76%;object-fit:contain}
@media(max-width:760px){.services-wheel{width:min(620px,96vw)}.wheel-segment{padding:30px 24px}.wheel-content{max-width:190px}.wheel-1 .wheel-content,.wheel-4 .wheel-content{transform:translateX(-7px)}.wheel-2 .wheel-content,.wheel-3 .wheel-content{transform:translateX(7px)}.wheel-number{min-width:36px;height:32px;font-size:11px}.wheel-icon{font-size:19px;margin-left:6px}.wheel-segment h3{font-size:clamp(14px,3.8vw,19px);margin:10px 0 7px}.wheel-segment p{font-size:clamp(10px,2.6vw,13px);line-height:1.38}.wheel-hub{width:25%;border-width:3px}}
@media(max-width:480px){.wheel-segment{padding:22px 13px}.wheel-content{max-width:145px}.wheel-segment h3{font-size:14px}.wheel-segment p{font-size:10px}.wheel-icon{display:none}.wheel-hub{width:23%}}


/* ===== FINAL SERVICES WHEEL FIT FIX =====
   Smaller wheel with safe inner spacing so nothing is clipped. */
.services-wheel{
  width:min(600px,68vw) !important;
  max-width:600px !important;
  aspect-ratio:1 / 1 !important;
  margin:42px auto 42px !important;
  overflow:hidden !important;
}
.wheel-segment{
  padding:42px 46px !important;
  overflow:hidden !important;
}
.wheel-content{
  width:auto !important;
  max-width:185px !important;
}
.wheel-1 .wheel-content{
  transform:translate(22px,18px) !important;
}
.wheel-2 .wheel-content{
  transform:translate(-22px,18px) !important;
}
.wheel-3 .wheel-content{
  transform:translate(22px,-18px) !important;
}
.wheel-4 .wheel-content{
  transform:translate(-22px,-18px) !important;
}
.wheel-number{
  min-width:38px !important;
  height:32px !important;
  font-size:11px !important;
}
.wheel-icon{
  font-size:18px !important;
  margin-left:7px !important;
}
.wheel-segment h3{
  font-size:18px !important;
  line-height:1.05 !important;
  margin:10px 0 7px !important;
}
.wheel-segment p{
  font-size:11px !important;
  line-height:1.42 !important;
  margin:0 !important;
}
.wheel-hub{
  width:24% !important;
  box-shadow:0 10px 30px rgba(11,31,66,.10) !important;
}
.wheel-hub img{
  width:72% !important;
  height:72% !important;
  object-fit:contain !important;
}

@media(max-width:900px){
  .services-wheel{
    width:min(560px,76vw) !important;
    max-width:560px !important;
  }
  .wheel-segment{padding:38px 38px !important;}
  .wheel-content{max-width:170px !important;}
  .wheel-segment h3{font-size:17px !important;}
  .wheel-segment p{font-size:10.5px !important;}
}
@media(max-width:700px){
  .services-wheel{
    width:min(500px,88vw) !important;
    max-width:500px !important;
  }
  .wheel-segment{padding:30px 24px !important;}
  .wheel-content{max-width:145px !important;}
  .wheel-1 .wheel-content{transform:translate(14px,12px) !important;}
  .wheel-2 .wheel-content{transform:translate(-14px,12px) !important;}
  .wheel-3 .wheel-content{transform:translate(14px,-12px) !important;}
  .wheel-4 .wheel-content{transform:translate(-14px,-12px) !important;}
  .wheel-segment h3{font-size:15px !important;}
  .wheel-segment p{font-size:9.5px !important;}
}
@media(max-width:480px){
  .services-wheel{
    width:90vw !important;
    max-width:390px !important;
  }
  .wheel-segment{padding:20px 12px !important;}
  .wheel-content{max-width:112px !important;}
  .wheel-1 .wheel-content{transform:translate(8px,8px) !important;}
  .wheel-2 .wheel-content{transform:translate(-8px,8px) !important;}
  .wheel-3 .wheel-content{transform:translate(8px,-8px) !important;}
  .wheel-4 .wheel-content{transform:translate(-8px,-8px) !important;}
  .wheel-number{min-width:28px !important;height:24px !important;font-size:9px !important;}
  .wheel-icon{font-size:13px !important;}
  .wheel-segment h3{font-size:11.5px !important;margin:6px 0 4px !important;}
  .wheel-segment p{font-size:7.8px !important;line-height:1.28 !important;}
  .wheel-hub{width:22% !important;}
}


/* ===== Interactive puzzle-style service wheel ===== */
.services-wheel{
  overflow:visible !important;
  isolation:isolate;
}

.wheel-segment{
  cursor:pointer;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    filter .28s ease,
    box-shadow .28s ease;
  transform-origin:center center;
  will-change:transform;
}

/* Keep all four pieces in their normal positions until hovered. */
.wheel-1,.wheel-2,.wheel-3,.wheel-4{
  z-index:1;
}

/* Hovered quarter grows and lifts like a puzzle piece. */
.wheel-segment:hover{
  z-index:10;
  filter:saturate(1.08) brightness(1.015);
  box-shadow:0 18px 42px rgba(7,20,47,.18);
}

/* Each piece expands slightly away from the centre. */
.wheel-1:hover{ transform:translate(-10px,-10px) scale(1.075); }
.wheel-2:hover{ transform:translate(10px,-10px) scale(1.075); }
.wheel-3:hover{ transform:translate(-10px,10px) scale(1.075); }
.wheel-4:hover{ transform:translate(10px,10px) scale(1.075); }

/* The text itself gets a subtle emphasis as the piece opens. */
.wheel-segment:hover h3{
  color:#075fd8;
}
.wheel-segment h3{
  transition:color .25s ease;
}

/* Keep the centre logo above the pieces. */
.wheel-hub{
  z-index:20 !important;
  pointer-events:none;
}

/* Keyboard users get the same visual interaction. */
.wheel-segment:focus-within{
  z-index:10;
  filter:saturate(1.08) brightness(1.015);
}

/* No hover animation on touch-first devices. */
@media (hover:none){
  .wheel-segment:hover{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   ONE TELECOM — ROUND 4-PIECE JIGSAW
   Keeps the approved wheel size and hover interaction.
   ========================================================= */

.services-wheel{
  border-radius:50% !important;
  overflow:visible !important;
  isolation:isolate !important;
  background:transparent !important;
  box-shadow:0 20px 55px rgba(7,20,47,.10) !important;
}

/* Each quadrant remains part of one perfect outer circle. */
.wheel-segment{
  border:3px solid #fff !important;
  overflow:visible !important;
  position:relative !important;
}

/* Exact outer circular corners */
.wheel-1{border-radius:100% 0 0 0 !important;}
.wheel-2{border-radius:0 100% 0 0 !important;}
.wheel-3{border-radius:0 0 0 100% !important;}
.wheel-4{border-radius:0 0 100% 0 !important;}

/* Remove any older pseudo-puzzle shapes first */
.wheel-segment::before,
.wheel-segment::after{
  content:"" !important;
  position:absolute !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  z-index:2 !important;
  box-sizing:border-box !important;
  border:3px solid #fff !important;
}

/* 01: right-facing tab + lower socket */
.wheel-1::before{
  right:-24px !important;
  top:34% !important;
  background:#eef6ff !important;
}
.wheel-1::after{
  left:35% !important;
  bottom:-24px !important;
  background:#fff !important;
}

/* 02: lower tab + left socket */
.wheel-2::before{
  right:34% !important;
  bottom:-24px !important;
  background:#faedf7 !important;
}
.wheel-2::after{
  left:-24px !important;
  top:34% !important;
  background:#fff !important;
}

/* 03: upper tab + right socket */
.wheel-3::before{
  left:34% !important;
  top:-24px !important;
  background:#f1edff !important;
}
.wheel-3::after{
  right:-24px !important;
  bottom:34% !important;
  background:#fff !important;
}

/* 04: left tab + upper socket */
.wheel-4::before{
  left:-24px !important;
  bottom:34% !important;
  background:#eafaff !important;
}
.wheel-4::after{
  right:34% !important;
  top:-24px !important;
  background:#fff !important;
}

/* Keep the content and centre badge visually above the puzzle joins. */
.wheel-content{z-index:5 !important;}
.wheel-hub{
  z-index:30 !important;
  background:#fff !important;
  border:4px solid #edf3fb !important;
  box-shadow:0 10px 30px rgba(7,20,47,.13) !important;
}

/* Hover: pull the selected circular puzzle piece outward. */
.wheel-segment{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),
             filter .28s ease,
             box-shadow .28s ease !important;
}
.wheel-1:hover{transform:translate(-10px,-10px) scale(1.075) !important;}
.wheel-2:hover{transform:translate(10px,-10px) scale(1.075) !important;}
.wheel-3:hover{transform:translate(-10px,10px) scale(1.075) !important;}
.wheel-4:hover{transform:translate(10px,10px) scale(1.075) !important;}
.wheel-segment:hover{
  z-index:20 !important;
  filter:saturate(1.08) brightness(1.015) !important;
  box-shadow:0 18px 42px rgba(7,20,47,.18) !important;
}

/* Responsive puzzle tabs */
@media(max-width:700px){
  .wheel-segment::before,.wheel-segment::after{
    width:34px !important;height:34px !important;
  }
  .wheel-1::before{right:-19px !important}.wheel-1::after{bottom:-19px !important}
  .wheel-2::before{bottom:-19px !important}.wheel-2::after{left:-19px !important}
  .wheel-3::before{top:-19px !important}.wheel-3::after{right:-19px !important}
  .wheel-4::before{left:-19px !important}.wheel-4::after{top:-19px !important}
}
@media(max-width:480px){
  .wheel-segment::before,.wheel-segment::after{
    width:26px !important;height:26px !important;
  }
  .wheel-1::before{right:-15px !important}.wheel-1::after{bottom:-15px !important}
  .wheel-2::before{bottom:-15px !important}.wheel-2::after{left:-15px !important}
  .wheel-3::before{top:-15px !important}.wheel-3::after{right:-15px !important}
  .wheel-4::before{left:-15px !important}.wheel-4::after{top:-15px !important}
}
@media(hover:none){
  .wheel-segment:hover{transform:none !important;box-shadow:none !important;}
}


/* ===== Puzzle click navigation ===== */
html{scroll-behavior:smooth;}
.wheel-segment[data-target]{cursor:pointer;}
.wheel-segment[data-target]:focus-visible{
  outline:3px solid #1877f2 !important;
  outline-offset:5px !important;
}
.scroll-anchor{
  display:block;
  position:relative;
  top:-90px;
  visibility:hidden;
}
.jump-highlight{
  animation:oneTelecomJumpHighlight 1.35s ease;
}
@keyframes oneTelecomJumpHighlight{
  0%,100%{box-shadow:none;}
  22%,70%{box-shadow:0 0 0 2px rgba(55,143,255,.65),0 0 30px rgba(55,143,255,.22);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .jump-highlight{animation:none;}
}


/* IV puzzle destination: land directly on the visible Contact section */
#contact-IV{
  scroll-margin-top:90px !important;
}
.contact-target{
  display:block;
  scroll-margin-top:90px;
}