.home-hero {
  position: relative;
  overflow: hidden;
  color: #dce8f8;
  background:
    radial-gradient(circle at 78% 20%, rgba(21,184,212,.18), transparent 25rem),
    radial-gradient(circle at 18% 80%, rgba(22,119,255,.18), transparent 27rem),
    linear-gradient(135deg, #08101d 0%, #0e1d35 52%, #123b70 100%);
}
.home-hero::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to right, transparent, #000 30%, #000); }
.home-hero__grid { position: relative; z-index: 1; display: grid; min-height: min(720px, calc(100vh - 116px)); grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(4.75rem, 9vw, 8rem); }
.home-hero h1 { max-width: 800px; margin-bottom: .35em; color: #fff; font-size: clamp(2.75rem, 6.2vw, 5.35rem); letter-spacing: -.055em; }
.home-hero__lead { max-width: 680px; color: #c5d5e8; font-size: clamp(1.12rem, 2.15vw, 1.42rem); line-height: 1.5; }
.home-hero .button-group { margin-top: 1.8rem; }
.hero-fineprint { display: flex; gap: .5rem; align-items: center; margin: 1rem 0 0; color: #9fb1c8; font-size: .8rem; }
.hero-fineprint .jas-icon { color: #7fe3f1; }

.hero-visual { position: relative; min-height: 470px; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.hero-orbit--one { inset: 5% 2% 8% 8%; animation: jas-spin 28s linear infinite; }
.hero-orbit--two { inset: 17% 14% 18% 19%; border-style: dashed; animation: jas-spin 20s linear infinite reverse; }
.device-device { position: absolute; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 30px 70px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.device-phone { z-index: 3; top: 6%; right: 9%; width: 180px; height: 350px; padding: 9px; border-radius: 30px; background: linear-gradient(145deg, #1d2b42, #060a11); transform: rotate(8deg); animation: jas-float 6s ease-in-out infinite; }
.device-phone::before { content: ""; position: absolute; z-index: 2; top: 15px; left: 50%; width: 54px; height: 12px; border-radius: 999px; background: #05080e; transform: translateX(-50%); }
.device-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 23px; background: linear-gradient(145deg, #102b50, #1677ff 58%, #15b8d4); }
.device-phone__screen::before { content: ""; position: absolute; inset: 0; opacity: .55; background: radial-gradient(circle at 70% 20%, #8cecff, transparent 11rem); }
.device-phone__screen > span { position: relative; display: block; width: 68%; height: 10px; margin: 56px 0 -40px 18px; border-radius: 999px; background: rgba(255,255,255,.35); }
.device-phone__screen > span:nth-child(2) { width: 45%; background: rgba(255,255,255,.2); }
.device-phone__screen > span:nth-child(3) { width: 58%; background: rgba(255,255,255,.16); }
.device-wave { position: absolute; right: -20%; bottom: 10%; left: -20%; height: 45%; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.11); transform: rotate(-10deg); }
.device-laptop { z-index: 2; right: 24%; bottom: 8%; width: 330px; border-radius: 18px 18px 8px 8px; background: #101b2b; transform: rotate(-6deg); animation: jas-float 7s 1s ease-in-out infinite reverse; }
.device-laptop__screen { aspect-ratio: 16/10; margin: 9px; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg, #06111f, #0d3158); }
.device-laptop__base { position: absolute; top: 100%; left: -8%; width: 116%; height: 18px; border-radius: 2px 2px 14px 14px; background: linear-gradient(#9aa8b8, #5f6b7b); box-shadow: 0 12px 22px rgba(0,0,0,.3); }
.device-code { display: grid; gap: 13px; padding: 45px 35px; }
.device-code i { display: block; height: 7px; border-radius: 99px; background: linear-gradient(90deg, #15b8d4 0 28%, rgba(255,255,255,.13) 28% 80%, transparent 80%); }
.device-code i:nth-child(2) { width: 78%; margin-left: 12%; background: linear-gradient(90deg, #56d7a9 0 35%, rgba(255,255,255,.13) 35%); }
.device-code i:nth-child(3) { width: 88%; background: linear-gradient(90deg, #769cff 0 20%, rgba(255,255,255,.13) 20%); }
.device-code i:nth-child(4) { width: 60%; margin-left: 18%; }
.hero-chip { position: absolute; z-index: 5; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; color: #fff; background: rgba(13,27,50,.86); box-shadow: 0 15px 35px rgba(0,0,0,.25); }
.hero-chip--one { top: 17%; left: 8%; color: #7fe3f1; transform: rotate(-9deg); }
.hero-chip--two { right: 1%; bottom: 17%; color: #7ff0bf; transform: rotate(10deg); }
.hero-chip .jas-icon { width: 28px; height: 28px; }
.hero-status { position: absolute; z-index: 6; bottom: 0; left: 2%; display: flex; gap: .55rem; align-items: center; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: .8rem; color: #e8f1fc; background: rgba(7,16,29,.8); box-shadow: 0 16px 35px rgba(0,0,0,.25); font-size: .77rem; font-weight: 700; backdrop-filter: blur(10px); }
.hero-status span { width: 8px; height: 8px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 5px rgba(54,211,153,.15); }
@keyframes jas-float { 0%,100% { transform: translateY(0) rotate(var(--rotation, 0)); } 50% { transform: translateY(-12px) rotate(var(--rotation, 0)); } }
@keyframes jas-spin { to { transform: rotate(360deg); } }
.device-phone { --rotation: 8deg; }
.device-laptop { --rotation: -6deg; }

.trust-strip { border-bottom: 1px solid var(--jas-line); background: #fff; box-shadow: 0 8px 24px rgba(11,18,32,.045); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-strip__grid > div { display: flex; min-height: 94px; gap: .75rem; align-items: center; padding: 1rem; border-right: 1px solid var(--jas-line); }
.trust-strip__grid > div:last-child { border-right: 0; }
.trust-strip__grid .jas-icon { width: 1.55rem; height: 1.55rem; color: var(--jas-accent); }
.trust-strip__grid span { display: grid; line-height: 1.25; }
.trust-strip__grid strong { font-size: .88rem; }
.trust-strip__grid small { margin-top: .22rem; color: var(--jas-muted); font-size: .72rem; }

.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-card { position: relative; min-height: 245px; padding: 1.5rem; overflow: hidden; border: 1px solid var(--jas-line); border-radius: var(--jas-radius-lg); color: var(--jas-ink); background: #fff; box-shadow: var(--jas-shadow-sm); text-decoration: none; transition: transform .25s var(--jas-ease), box-shadow .25s var(--jas-ease), border-color .25s var(--jas-ease); }
.service-card::after { content: ""; position: absolute; right: -3rem; bottom: -4rem; width: 10rem; aspect-ratio: 1; border-radius: 50%; background: rgba(22,119,255,.06); transition: transform .35s var(--jas-ease); }
.service-card:hover { color: var(--jas-ink); border-color: rgba(22,119,255,.3); box-shadow: var(--jas-shadow); transform: translateY(-6px); }
.service-card:hover::after { transform: scale(1.3); }
.service-card > span:first-child { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; margin-bottom: 1.25rem; border-radius: .9rem; color: var(--jas-accent); background: #eaf4ff; }
.service-card > span .jas-icon { width: 1.65rem; height: 1.65rem; }
.service-card h3 { margin-bottom: .5rem; }
.service-card p { position: relative; z-index: 1; color: var(--jas-muted); }
.service-card b { position: absolute; z-index: 2; bottom: 1.4rem; display: inline-flex; gap: .4rem; align-items: center; color: var(--jas-accent-dark); font-size: .86rem; }
.service-card b .jas-icon { width: 1rem; }
.service-card--accent { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--jas-accent-dark), #0d438d); }
.service-card--accent:hover { color: #fff; }
.service-card--accent > span:first-child { color: #fff; background: rgba(255,255,255,.14); }
.service-card--accent h3 { color: #fff; }
.service-card--accent p { color: #d8e8fb; }
.service-card--accent b { color: #fff; }
.service-card--accent::after { background: rgba(255,255,255,.08); }

.difference-grid { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.difference-visual { position: relative; min-height: 470px; border-radius: 2rem; background: linear-gradient(145deg, #eef6ff, #dceaf8); }
.circuit-board { position: absolute; inset: 12%; overflow: hidden; border: 1px solid rgba(22,119,255,.22); border-radius: 1.5rem; background: #0c1a2d; box-shadow: var(--jas-shadow); }
.circuit-board::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: linear-gradient(rgba(127,227,241,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(127,227,241,.09) 1px, transparent 1px); background-size: 24px 24px; }
.circuit-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 110px; height: 110px; place-items: center; border: 1px solid #3d75b0; border-radius: 22px; color: #7fe3f1; background: #102844; box-shadow: 0 0 45px rgba(21,184,212,.3); transform: translate(-50%,-50%); }
.circuit-core .jas-icon { width: 55px; height: 55px; }
.circuit-line { position: absolute; z-index: 1; height: 2px; background: linear-gradient(90deg, transparent, #4bd4e8, transparent); }
.circuit-line--1 { top: 34%; left: 0; width: 42%; }
.circuit-line--2 { top: 65%; right: 0; width: 42%; }
.circuit-line--3 { top: 0; left: 38%; width: 2px; height: 35%; background: linear-gradient(transparent,#4bd4e8); }
.circuit-line--4 { right: 34%; bottom: 0; width: 2px; height: 38%; background: linear-gradient(#4bd4e8,transparent); }
.circuit-dot { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #4bd4e8; box-shadow: 0 0 14px #4bd4e8; }
.circuit-dot--1 { top: 32.8%; left: 17%; }
.circuit-dot--2 { right: 14%; bottom: 33.7%; }
.circuit-dot--3 { right: 32.9%; bottom: 14%; }
.diagnostic-card { position: absolute; right: 3%; bottom: 4%; display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; padding: 1rem; border: 1px solid var(--jas-line); border-radius: 1rem; background: #fff; box-shadow: var(--jas-shadow); }
.diagnostic-card > span { grid-row: 1/3; display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .75rem; color: #fff; background: var(--jas-green); }
.diagnostic-card strong, .diagnostic-card small { align-self: end; line-height: 1.2; }
.diagnostic-card small { align-self: start; color: var(--jas-muted); }

.home-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: var(--jas-radius-lg); background: rgba(255,255,255,.13); }
.home-process > div { padding: 1.5rem; background: #101b2d; }
.home-process span { display: inline-grid; width: 2.45rem; height: 2.45rem; place-items: center; margin-bottom: 1rem; border-radius: .75rem; color: #7fe3f1; background: rgba(21,184,212,.12); font-size: .8rem; font-weight: 800; }
.home-process h3 { font-size: 1.1rem; }
.home-process p { margin: 0; color: #9fb1c8; font-size: .9rem; }

.organisation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.organisation-card { position: relative; min-height: 360px; padding: clamp(1.6rem, 4vw, 2.6rem); overflow: hidden; border-radius: 1.6rem; color: #e8f1fc; background: linear-gradient(145deg, #10294d, #0b172a); box-shadow: var(--jas-shadow); text-decoration: none; }
.organisation-card::after { content: ""; position: absolute; top: -5rem; right: -5rem; width: 17rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.035), 0 0 0 6rem rgba(255,255,255,.02); }
.organisation-card:hover { color: #fff; transform: translateY(-4px); }
.organisation-card h2 { max-width: 520px; color: #fff; }
.organisation-card p:not(.eyebrow) { max-width: 540px; color: #bdcce0; }
.organisation-card .text-link { position: absolute; z-index: 2; bottom: 2.2rem; color: #fff; }
.organisation-card__icon { position: relative; z-index: 1; display: grid; width: 3.2rem; height: 3.2rem; place-items: center; margin-bottom: 1.4rem; border-radius: .95rem; color: #7fe3f1; background: rgba(255,255,255,.1); }
.organisation-card__icon .jas-icon { width: 1.7rem; height: 1.7rem; }
.organisation-card--green { background: linear-gradient(145deg, #0c4b3a, #08231d); }
.organisation-card--green .organisation-card__icon, .organisation-card--green .eyebrow { color: #89f0c5; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.proof-grid .review-summary { transform: rotate(1deg); }
.home-content { padding-top: 5rem; }

@media (max-width: 1000px) {
  .home-hero__grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { width: min(100%, 620px); min-height: 430px; margin-inline: auto; }
  .trust-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip__grid > div:nth-child(2) { border-right: 0; }
  .trust-strip__grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--jas-line); }
  .difference-grid, .proof-grid { grid-template-columns: 1fr; }
  .difference-visual { min-height: 430px; }
}
@media (max-width: 820px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .organisation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .home-hero__grid { padding-block: 4rem; }
  .hero-visual { min-height: 340px; }
  .device-phone { right: 2%; width: 135px; height: 270px; }
  .device-laptop { right: 17%; width: 245px; }
  .hero-chip--one { left: 0; }
  .hero-status { left: 0; }
  .trust-strip__grid { grid-template-columns: 1fr; }
  .trust-strip__grid > div { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--jas-line); }
  .service-cards, .home-process { grid-template-columns: 1fr; }
  .service-card { min-height: 230px; }
  .difference-visual { min-height: 330px; }
  .circuit-board { inset: 9%; }
  .diagnostic-card { right: 0; }
  .organisation-card { min-height: 400px; }
}