.reference-hero {
    --hero-navy: #071d42;
    --hero-blue: #075df2;
    --hero-green: #0aa256;
    --hero-copy: #304563;
    position: relative;
    min-height: clamp(720px, calc(100vh - 92px), 880px);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    padding: 62px 0 54px;
    background:
        radial-gradient(circle at 83% 40%, rgba(83, 137, 255, .17), transparent 410px),
        radial-gradient(circle at 52% 92%, rgba(188, 216, 255, .20), transparent 390px),
        linear-gradient(110deg, #fff 0%, #fcfdff 48%, #f5f9ff 100%);
}

.reference-hero__container {
    width: min(1410px, calc(100% - 72px));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(480px, .93fr) minmax(580px, 1.07fr);
    gap: clamp(28px, 3vw, 58px);
    align-items: center;
}

.reference-hero__content { position: relative; z-index: 5; padding-top: 4px; }
.reference-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 28px;
    color: #0756e8;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.reference-hero__eyebrow span { width: 32px; height: 1px; background: #afc8ff; }
.reference-hero__title {
    margin: 0;
    max-width: 660px;
    color: var(--hero-navy);
    font-size: clamp(54px, 4.65vw, 76px);
    font-weight: 800;
    letter-spacing: -.052em;
    line-height: 1.035;
}
.reference-hero__title > span { color: var(--hero-blue); }
.reference-hero__lead {
    max-width: 560px;
    margin: 28px 0 0;
    color: var(--hero-copy);
    font-size: clamp(17px, 1.18vw, 20px);
    line-height: 1.65;
}

.reference-hero__actions { display: flex; gap: 18px; margin-top: 34px; }
.reference-hero__button {
    min-width: 244px;
    min-height: 60px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1.5px solid var(--hero-blue);
    border-radius: 11px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.reference-hero__button:hover { transform: translateY(-2px); }
.reference-hero__button--primary {
    color: #fff;
    background: linear-gradient(135deg, #0862f5, #0551df);
    box-shadow: 0 14px 28px rgba(5, 83, 228, .20);
}
.reference-hero__button--primary:hover { color:#fff; box-shadow: 0 17px 34px rgba(5, 83, 228, .26); }
.reference-hero__button--secondary { color: var(--hero-blue); background: rgba(255,255,255,.82); }
.reference-hero__button--secondary:hover { color: var(--hero-blue); background: #fff; }
.reference-hero__button span:last-child { font-size: 22px; font-weight: 400; }

.reference-hero__benefits {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 0;
    margin-top: 66px;
    color: var(--hero-navy);
}
.reference-hero__benefits article {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border-right: 1px solid #c2ccdb;
}
.reference-hero__benefits article:first-child { padding-left: 0; }
.reference-hero__benefits article:last-child { padding-right: 0; border-right: 0; }
.reference-hero__benefits strong,
.reference-hero__benefits small { display: block; white-space: nowrap; }
.reference-hero__benefits strong { font-size: 14px; line-height: 1.25; }
.reference-hero__benefits small { margin-top: 5px; color: #536681; font-size: 12px; }
.reference-hero__benefit-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border-radius: 12px;
    background: #f1f5ff;
    color: var(--hero-blue);
}
.reference-hero__benefit-icon svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reference-hero__benefit-icon--flag { font-size: 25px; background: transparent; }

/* Compact visual: deliberately sized to match the approved reference rather than filling the column. */
.reference-hero__visual { position: relative; min-height: 560px; z-index: 2; }
.reference-dashboard {
    position: absolute;
    width: min(610px, 88%);
    left: 2%;
    top: 104px;
    display: grid;
    grid-template-columns: 58px 1fr;
    overflow: hidden;
    border: 1px solid rgba(56, 91, 159, .12);
    border-radius: 24px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 34px 62px rgba(49, 91, 176, .20), 0 8px 22px rgba(55, 86, 144, .08);
    transform: perspective(1200px) rotateY(-2.5deg) rotateZ(.8deg);
    transform-origin: center;
}
.reference-dashboard__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 22px 8px;
    color: white;
    background: linear-gradient(180deg, #092854, #061a3c);
}
.reference-dashboard__rail strong { margin-bottom: 7px; font-size: 16px; }
.reference-dashboard__rail span { opacity: .86; font-size: 14px; }
.reference-dashboard__main { padding: 20px 18px 21px; }
.reference-dashboard__main h2 { margin: 0 0 15px; color: #122240; font-size: 15px; }
.reference-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.reference-dashboard__card {
    min-height: 126px;
    padding: 14px;
    border: 1px solid #e8edf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(36,70,125,.06);
}
.reference-dashboard__card > small { color: #15223b; font-size: 10px; }
.reference-dashboard__number { margin-top: 21px; color: #0f2348; font-size: 25px; font-weight: 800; }
.reference-dashboard__number em { color: #657795; font-size: 10px; font-style: normal; font-weight: 500; }
.reference-dashboard__progress { height: 7px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: #edf1f7; }
.reference-dashboard__progress i { display:block; width:88%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#04b860,#0fc47a); }
.reference-dashboard__positive { display:block; margin-top:6px; color:var(--hero-green); text-align:right; font-size:9px; font-weight:700; }
.reference-dashboard__score-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.reference-dashboard__score-card > small { grid-column:1/-1; }
.reference-dashboard__score {
    display:grid; width:67px; height:67px; place-items:center; align-content:center;
    border-radius:50%; background:conic-gradient(#08a94f 0 92%,#dfe5ed 92% 100%); position:relative;
}
.reference-dashboard__score::before { content:""; position:absolute; inset:8px; border-radius:50%; background:white; }
.reference-dashboard__score strong,.reference-dashboard__score span { position:relative; z-index:1; }
.reference-dashboard__score strong { color:#08773b; font-size:22px; line-height:1; }
.reference-dashboard__score span { color:#08773b; font-size:8px; }
.reference-dashboard__score-card div:last-child > strong { font-size:10px; }
.reference-dashboard__score-card div:last-child > small { text-align:left; }
.reference-dashboard__apps { display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 17px; }
.reference-dashboard__apps span { display:grid; width:23px; height:23px; place-items:center; color:white; font-size:9px; font-weight:800; box-shadow:0 4px 8px rgba(0,0,0,.12); }
.app-word,.app-outlook{background:#075bd8}.app-excel{background:#07884a}.app-powerpoint{background:#e84c16}.app-teams{background:#4f55c7}.app-cloud{background:#168ef8;border-radius:50%}
.reference-dashboard__operational { color:#12213d; font-size:9px; }
.reference-dashboard__cloud-card strong,.reference-dashboard__cloud-card > span { display:block; }
.reference-dashboard__cloud { margin:12px 0 7px; color:#bdd6ff; font-size:51px; line-height:.8; text-shadow:0 9px 18px rgba(60,119,220,.18); }
.reference-dashboard__cloud-card strong { font-size:10px; }
.reference-dashboard__cloud-card > span { margin-top:5px; color:#788aa5; font-size:8px; }

.reference-float {
    position:absolute;
    z-index:4;
    border:1px solid rgba(75,100,150,.12);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 38px rgba(54,88,155,.14);
}
.reference-float--protection { right:1%; top:39px; width:190px; padding:17px; text-align:center; transform:rotate(4deg); }
.reference-float--protection small { display:block; text-align:left; color:#17233b; font-size:11px; font-weight:700; }
.reference-float__shield { display:grid; width:47px; height:54px; margin:15px auto 9px; place-items:center; color:white; font-size:19px; background:linear-gradient(145deg,#2ba9ff,#0065de); clip-path:polygon(50% 0,90% 18%,84% 74%,50% 100%,16% 74%,10% 18%); }
.reference-float--protection strong,.reference-float--protection span{display:block}.reference-float--protection strong{color:#078244;font-size:10px}.reference-float--protection span{margin-top:5px;color:#75849b;font-size:9px}
.reference-float--backup { right:-1%; bottom:72px; width:202px; padding:16px; transform:rotate(5deg); }
.reference-float--backup small { color:#12233f; font-size:11px; font-weight:700; }
.reference-float__backup-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.reference-float__ring { color:#168ff8; font-size:31px; }
.reference-float__backup-row strong,.reference-float__backup-row span{display:block}.reference-float__backup-row strong{font-size:10px}.reference-float__backup-row span{margin-top:3px;color:#078e4a;font-size:8px}
.reference-float--cloud,.reference-float--lock,.reference-float--m365 { display:grid; place-items:center; border-radius:50%; color:#086be8; }
.reference-float--cloud { right:-1%; top:260px; width:70px; height:70px; font-size:40px; background:rgba(255,255,255,.86); }
.reference-float--lock { right:17%; bottom:0; width:62px; height:70px; border-radius:18px; color:white; font-size:27px; background:linear-gradient(145deg,#1583ff,#0348cf); transform:rotate(8deg); }
.reference-float--m365 { left:26%; top:0; width:62px; height:62px; color:white; font-size:29px; background:linear-gradient(145deg,#08a1ff,#6526d8); box-shadow:0 14px 25px rgba(73,82,203,.19); }
.reference-hero__orbit { position:absolute; border:1px solid rgba(40,105,244,.24); border-radius:50%; }
.reference-hero__orbit--one { inset:54px -5px 26px 0; transform:rotate(-9deg); }
.reference-hero__orbit--two { inset:118px 31px 74px 26px; transform:rotate(15deg); }
.reference-hero__mesh { position:absolute; right:-8%; bottom:-13%; width:68%; height:55%; opacity:.18; z-index:-1; background-image:linear-gradient(rgba(34,97,222,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(34,97,222,.25) 1px,transparent 1px); background-size:28px 28px; transform:perspective(500px) rotateX(67deg) rotateZ(-8deg); mask-image:radial-gradient(ellipse,black,transparent 68%); }
.reference-hero__ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(30px); }
.reference-hero__ambient--one{width:330px;height:330px;right:7%;top:10%;background:rgba(77,125,255,.14)}
.reference-hero__ambient--two{width:420px;height:300px;left:30%;bottom:-14%;background:rgba(145,187,255,.11)}
.reference-hero__scroll { position:absolute; left:50%; bottom:15px; color:#56739f; font-size:32px; line-height:1; text-decoration:none; animation:hero-bounce 2.2s ease-in-out infinite; }
@keyframes hero-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

@media (max-width: 1220px) {
    .reference-hero__container { width:min(1160px,calc(100% - 40px)); grid-template-columns:minmax(420px,.92fr) minmax(500px,1.08fr); }
    .reference-hero__title { font-size:clamp(50px,5.3vw,68px); }
    .reference-hero__benefits { grid-template-columns:repeat(2,max-content); row-gap:18px; margin-top:48px; }
    .reference-hero__benefits article:nth-child(2) { border-right:0; }
    .reference-hero__benefits article:nth-child(3) { padding-left:0; }
    .reference-hero__visual { transform:scale(.92); transform-origin:center; }
}
@media (max-width: 980px) {
    .reference-hero { min-height:auto; padding:58px 0 44px; }
    .reference-hero__container { grid-template-columns:1fr; }
    .reference-hero__content { max-width:720px; }
    .reference-hero__visual { min-height:530px; margin-top:8px; transform:none; }
    .reference-dashboard { left:7%; }
}
@media (max-width: 680px) {
    .reference-hero { padding:42px 0 34px; }
    .reference-hero__container { width:calc(100% - 28px); }
    .reference-hero__eyebrow { font-size:11px; margin-bottom:20px; }
    .reference-hero__title { font-size:clamp(43px,12.5vw,58px); }
    .reference-hero__lead { font-size:16px; }
    .reference-hero__actions { display:grid; }
    .reference-hero__button { width:100%; min-width:0; }
    .reference-hero__benefits { grid-template-columns:1fr 1fr; width:100%; margin-top:42px; }
    .reference-hero__benefits article { min-width:0; padding:8px 5px; border:0; }
    .reference-hero__benefits article:nth-child(3){padding-left:5px}
    .reference-hero__benefits strong,.reference-hero__benefits small{white-space:normal}
    .reference-hero__visual { min-height:390px; }
    .reference-dashboard { width:92%; left:0; top:76px; grid-template-columns:42px 1fr; transform:scale(.72) rotateZ(.5deg); transform-origin:left top; }
    .reference-dashboard__rail { gap:15px; }
    .reference-float--protection { width:150px; right:-4px; top:25px; transform:scale(.76) rotate(4deg); transform-origin:top right; }
    .reference-float--backup { width:165px; right:-6px; bottom:18px; transform:scale(.74) rotate(5deg); transform-origin:bottom right; }
    .reference-float--cloud,.reference-float--m365 { display:none; }
    .reference-float--lock { transform:scale(.70) rotate(8deg); right:9%; }
    .reference-hero__scroll { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .reference-hero__scroll { animation:none; }
    .reference-hero__button { transition:none; }
}