html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: hidden; }
:target { scroll-margin-top: 7.5rem; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: .75rem; background: #fff; color: #0f172a; box-shadow: 0 8px 24px rgba(15,23,42,.16); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid #3b82f6; outline-offset: 4px; }
.header-logo { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.hero-logo { width: 92px; height: 92px; object-fit: contain; margin: 0 0 1.25rem; }
.footer-logo { width: 78px; height: 78px; object-fit: contain; }
.contact-logo { width: 150px; height: 150px; object-fit: contain; margin-bottom: 1.25rem; }
.hero-service-visual { position: relative; background-image: linear-gradient(rgba(255,255,255,.84),rgba(248,250,252,.9)), url('tech-repair-workshop.jpg'); background-size: cover; background-position: center; }
.service-photo { width: calc(100% + 3rem); height: 9rem; margin: -1.5rem -1.5rem 1.25rem; object-fit: cover; border-radius: 1rem 1rem .7rem .7rem; border-bottom: 1px solid rgba(226,232,240,.95); }
.why-service-visual { position: relative; overflow: hidden; }
.why-photo { width: 100%; height: 12rem; object-fit: cover; border-radius: 1.25rem; margin-bottom: 1.5rem; opacity: .96; }
.contact-copy, .contact-form-shell { border: 1px solid rgba(255,255,255,.96); border-radius: 2rem; padding: 2rem; background: rgba(255,255,255,.72); box-shadow: 0 18px 42px -30px rgba(15,23,42,.38), inset 0 1px 0 white; }
.contact-copy { position: relative; overflow: hidden; }
.contact-copy::after { content: ''; position: absolute; right: -6rem; bottom: -7rem; width: 15rem; height: 15rem; border-radius: 999px; background: rgba(191,219,254,.36); filter: blur(3rem); pointer-events: none; }
.contact-copy > * { position: relative; z-index: 1; }
.contact-action, .form-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .7rem 1rem; font-size: .8125rem; color: #2563eb; background: rgba(239,246,255,.86); border: 1px solid #dbeafe; box-shadow: inset 0 1px 0 white; transition: transform .3s ease, background .3s ease; }
.contact-action:hover, .form-submit:hover { transform: translateY(-2px); background: #fff; }
.review-panel { margin-top: 1.5rem; padding: 1.25rem; border-radius: 1.25rem; border: 1px solid #dbeafe; background: linear-gradient(#eff6ff,#fff); }
.review-panel .contact-action { margin-top: 1rem; }
.service-form label { display: block; color: #334155; font-size: .8125rem; font-weight: 400; }
.service-form input:not([type='checkbox']), .service-form select, .service-form textarea { display: block; width: 100%; margin-top: .45rem; padding: .75rem .85rem; color: #0f172a; border: 1px solid #cbd5e1; border-radius: .8rem; background: rgba(255,255,255,.94); box-shadow: inset 0 1px 0 white; }
.service-form textarea { resize: vertical; min-height: 8rem; }
.service-form :is(input,select,textarea):focus { border-color: #3b82f6; outline: 2px solid rgba(59,130,246,.18); outline-offset: 1px; }
.consent-line { display: flex !important; gap: .65rem; align-items: flex-start; margin: 1.5rem 0; }
.consent-line input { width: 1rem; height: 1rem; margin-top: .12rem; accent-color: #2563eb; flex: none; }
.form-submit { width: 100%; margin-top: 1rem; color: #fff; border-color: #1d4ed8; background: linear-gradient(#3b82f6,#2563eb); box-shadow: 0 10px 24px rgba(59,130,246,.26), inset 0 1px 0 rgba(255,255,255,.35); }
.form-submit:hover { background: linear-gradient(#60a5fa,#3b82f6); }
.enquiry-summary { margin-top: 1.25rem; padding: 1rem; border-radius: 1rem; background: #f8fafc; border: 1px solid #dbeafe; color: #475569; font-size: .8125rem; line-height: 1.65; white-space: pre-line; }
.reveal-on-scroll, .reveal-left, .reveal-right, .reveal-scale, .reveal-card { transition: opacity 850ms cubic-bezier(.16,1,.3,1), transform 850ms cubic-bezier(.16,1,.3,1); }
.reveal-ready .reveal-on-scroll, .reveal-ready .reveal-left, .reveal-ready .reveal-right, .reveal-ready .reveal-scale, .reveal-ready .reveal-card { opacity: 0; }
.reveal-ready .reveal-on-scroll { transform: translateY(28px); }
.reveal-ready .reveal-left { transform: translateX(-24px); }
.reveal-ready .reveal-right { transform: translateX(24px); }
.reveal-ready .reveal-scale { transform: scale(.97); }
.reveal-ready .reveal-on-scroll.is-revealed, .reveal-ready .reveal-left.is-revealed, .reveal-ready .reveal-right.is-revealed, .reveal-ready .reveal-scale.is-revealed, .reveal-ready .reveal-card.is-revealed { opacity: 1; transform: none; }
@media (max-width: 767px) { .hero-logo { width: 72px; height: 72px; margin-left: auto; margin-right: auto; } .header-logo { width: 42px; height: 42px; } .contact-copy, .contact-form-shell { padding: 1.35rem; } .service-photo { height: 8rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-on-scroll, .reveal-left, .reveal-right, .reveal-scale, .reveal-card, .reveal-ready .reveal-on-scroll, .reveal-ready .reveal-left, .reveal-ready .reveal-right, .reveal-ready .reveal-scale, .reveal-ready .reveal-card { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Final responsive layout: keep text within its own space on every screen. */
iconify-icon { display: none; }
#home { padding-top: clamp(7rem, 11vw, 10rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
#home > div { align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
#home h1 { font-size: clamp(2.7rem, 5.2vw, 5.5rem) !important; line-height: 1.02 !important; letter-spacing: -.06em !important; }
#home h1 br + span { display: inline-block; margin-top: .25em; color: #2563eb; }
#home h1 span { white-space: normal !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#home h1 + p { max-width: 38rem; }
#home .hero-logo { width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px); }
.hero-service-visual, #home .aura-float-bubble, #home .absolute.-inset-8 { display: none !important; }
.hero-media { position: relative; overflow: visible; border-radius: 2rem; background: #fff; border: 1px solid rgba(255,255,255,.95); box-shadow: 0 24px 55px -30px rgba(15,23,42,.4); }
.hero-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2rem 2rem 0 0; }
.hero-media > div { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.15rem; color: #0f172a; background: rgba(255,255,255,.94); border-radius: 0 0 2rem 2rem; }
.hero-media span { color: #64748b; font-size: .875rem; }
#home > div > div:last-child { padding-bottom: 4.25rem; }
.hero-float-links { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-float-links a { position: absolute; display: flex; align-items: center; gap: .65rem; min-width: 10.5rem; padding: .7rem .85rem; border: 1px solid rgba(255,255,255,.95); border-radius: 1rem; background: rgba(255,255,255,.94); color: #0f172a; box-shadow: 0 16px 32px -20px rgba(15,23,42,.5); backdrop-filter: blur(10px); pointer-events: auto; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; animation: hero-float 4.5s ease-in-out infinite; }
.hero-float-icon { display: inline-grid; place-items: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: .7rem; color: #2563eb !important; background: #eff6ff; font: 700 1.2rem/1 Inter, sans-serif !important; }.hero-float-copy { display: grid; gap: .16rem; min-width: 0; }.hero-float-links strong { font-size: .8rem; font-weight: 600; line-height: 1.2; }.hero-float-links .hero-float-copy > span { color: #64748b; font-size: .7rem; line-height: 1.25; }
.hero-float-links a:hover, .hero-float-links a:focus-visible { background: #fff; box-shadow: 0 20px 36px -18px rgba(15,23,42,.48); transform: translateY(-3px); }
.hero-float-repair { top: -1.1rem; right: -2rem; }.hero-float-build { top: 42%; right: -.5rem; animation-delay: -.9s !important; }.hero-float-digital { bottom: -3.2rem; right: -1.4rem; animation-delay: -1.8s !important; }.hero-float-whatsapp { bottom: -4rem; left: 1.4rem; animation-delay: -2.6s !important; }
@keyframes hero-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

#services .grid > div { display: flex; flex-direction: column; min-width: 0; }
#services > div > div:nth-child(3) { display: none; }
#services .service-photo { width: 100%; height: clamp(12rem, 18vw, 15rem); margin: 0 0 1rem; border-radius: 1.15rem; object-fit: cover; }
#services .grid > div > div:first-of-type { justify-content: flex-end; min-height: 1.75rem; }
#services .grid > div > div:first-of-type > div { display: none; }
#services h3, #services p { overflow-wrap: anywhere; }
#services .grid > div { padding: 1.25rem !important; }
#services .grid > div > div:first-of-type { min-height: 0; margin-bottom: .35rem; }

#digital-solutions { padding-block: clamp(4rem, 8vw, 7rem); }
.section-heading { max-width: 48rem; margin: 0 auto clamp(2rem, 5vw, 4rem); text-align: center; }
.section-heading > p:first-child, .why-layout > div > p:first-child { margin-bottom: 1rem; color: #2563eb; font: 600 .75rem/1.3 'JetBrains Mono', monospace; letter-spacing: .02em; }
.section-heading h2 { margin: 0; color: #0f172a; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.04; letter-spacing: -.055em; }
.section-heading h2 + p { margin: 1.35rem auto 0; max-width: 39rem; color: #64748b; line-height: 1.7; }
.digital-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.digital-grid article { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.15rem, 2vw, 1.5rem); border: 1px solid rgba(255,255,255,.98); border-radius: 1.5rem; background: rgba(255,255,255,.73); box-shadow: 0 14px 35px -28px rgba(15,23,42,.3); overflow: hidden; }
.digital-grid article img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 1rem; margin-bottom: 1.2rem; }
.digital-grid h3 { margin: 0; color: #0f172a; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.2; overflow-wrap: anywhere; }
.digital-grid p { margin: .9rem 0 0; color: #64748b; font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }
.digital-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.5rem; color: #fff; background: linear-gradient(135deg, #17263e, #243b61); }
.digital-cta div { display: grid; gap: .3rem; }.digital-cta span { color: #cbd5e1; font-size: .9rem; }
.digital-cta a, .why-layout a { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1rem; border-radius: 999px; background: #fff; color: #1d4ed8; font-size: .85rem; }

#why-us { padding-block: clamp(4rem, 8vw, 7rem); }
.why-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid rgba(255,255,255,.95); border-radius: 2rem; background: rgba(255,255,255,.65); box-shadow: 0 22px 55px -38px rgba(15,23,42,.35); }
.why-layout h2 { margin: 0; color: #0f172a; font-size: clamp(2.25rem, 5vw, 4.7rem); line-height: 1.04; letter-spacing: -.06em; }
.why-layout h2 + p { margin: 1.25rem 0 1.5rem; color: #64748b; font-size: 1rem; line-height: 1.7; max-width: 35rem; }
.why-points { display: grid; gap: .85rem; }.why-points article { padding: 1.25rem; border: 1px solid #dbeafe; border-radius: 1.25rem; background: linear-gradient(135deg, #eff6ff, #fff); }.why-points h3 { margin: 0; color: #0f172a; font-size: 1rem; }.why-points p { margin: .45rem 0 0; color: #64748b; font-size: .9rem; line-height: 1.55; }
#process .grid > .group { display: block; }
#process .grid > .group > .mt-4 { display: flex !important; flex-direction: column; align-items: stretch; min-height: 15rem !important; height: 15rem; }
#process .grid > .group > .mt-4 > .mt-5 { margin-top: auto !important; align-self: center; }

@media (max-width: 1100px) { #home > div, .why-layout { grid-template-columns: 1fr !important; } #home > div > div:last-child { max-width: 42rem; width: 100%; margin-inline: auto; } .digital-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #process .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { #home { padding-inline: 1.25rem; } #home .text-center { text-align: center; } #home h1 { font-size: clamp(2.45rem, 12vw, 3.8rem) !important; } #home .mt-10 { margin-top: 2rem; } #home .mt-8 { margin-top: 1.5rem; } #home .hero-logo { margin-inline: auto; } #home > div > div:last-child { padding-bottom: 0; } .hero-media { border-radius: 1.4rem; }.hero-media img { aspect-ratio: 16 / 11; } .hero-float-links { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; padding: .85rem; background: rgba(255,255,255,.94); }.hero-float-links a { position: static; min-width: 0; padding: .7rem; animation: none; border-radius: .8rem; }.hero-float-links strong { font-size: .72rem; }.hero-float-links .hero-float-copy > span { font-size: .65rem; } #services, #digital-solutions, #why-us { padding-inline: 1.25rem;}.digital-grid { grid-template-columns: 1fr; }.digital-grid article { padding: 1rem; }.digital-grid article img { margin-bottom: 1rem; }.digital-cta { align-items: flex-start; flex-direction: column; }.digital-cta a { width: 100%; }.why-layout { padding: 1.35rem; border-radius: 1.5rem; }.section-heading h2 br { display: none; } #process .grid { grid-template-columns: 1fr !important; } }
@media (max-width: 420px) { #home .inline-flex { max-width: 100%; } #home .mt-10 a { width: 100%; } .hero-media > div { padding: .9rem 1rem; } }