/* Reference 05. Desktop composition; homepage spacing/responsive pass deferred. */
.gh-web-reference { color: #0b1730; font-family: var(--gh-font-family); position: relative; }
.gh-web-reference * { box-sizing: border-box; }
.gh-web-design { padding: 36px 0 42px; background: radial-gradient(ellipse at 0 90%,#eaf7ff,transparent 50%),radial-gradient(ellipse at 110% 110%,#fff1d9,transparent 24%),#fff; }
.gh-web-design-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,4.2vw,86px); align-items: center; padding-inline: clamp(0px,2.8vw,58px); }
.gh-web-reference h2 { font-size: clamp(30px,2.65vw,54px); letter-spacing: -.045em; font-weight: 900; line-height: 1.15; color: #0b1730; margin: 0 0 14px; }
.gh-web-reference h2 em { color: #0874ff; font-style: normal; }
.gh-web-eyebrow { display: block; margin-bottom: 14px; text-transform: uppercase; color: #006aff; font-size: 13px; letter-spacing: .09em; font-weight: 700; }
.gh-web-intro { color: #536d91; font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
.gh-web-photo { position: relative; border-radius: 18px; overflow: hidden; isolation: isolate; background: #dfebf3; aspect-ratio: 1.48; }
.gh-web-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: -1; }
.gh-web-photo-badge { position: absolute; display: flex; align-items: center; gap: 17px; background: #fff; color: #0b1730; border-radius: 13px; padding: 17px 20px; box-shadow: 0 5px 18px #10274025; }
.gh-web-photo-badge > i { color: #0874ff; font-size: 25px; }
.gh-web-photo-badge strong { display: block; font-size: 12px; font-weight: 700; }
.gh-web-photo-badge small { display: block; font-size: 10px; color: #647fa3; margin-top: 4px; }
.gh-web-modern { left: 4.5%; top: 12%; }
.gh-web-conversion { right: 2.5%; bottom: 27%; }
.gh-web-handnote { font-family: 'Segoe Print','Bradley Hand',cursive; font-style: italic; font-size: 17px; line-height: 1.35; transform: rotate(-5deg); }
.gh-web-design-note { position: absolute; bottom: 3%; left: 12%; padding: 5px 14px; background: #ffffff9c; border-radius: 12px; }
.gh-web-design-note > span { position: absolute; right: 100%; top: 0; font-size: 38px; }
.gh-web-design-details { display: grid; grid-template-columns: minmax(0,1fr) 185px; gap: 24px; align-items: center; }
.gh-web-benefits { display: grid; gap: 14px; margin-bottom: 25px; }
.gh-web-benefits > div { display: flex; gap: 18px; align-items: center; }
.gh-web-benefits > div > i { display: grid; place-items: center; flex: 0 0 47px; height: 47px; font-size: 23px; border-radius: 12px; background: #eaf6ff; color: #0874ff; }
.gh-web-benefits > div:nth-child(2) > i { color: #0cc48b; background: #e5fbf3; }
.gh-web-benefits > div:nth-child(3) > i { color: #8544ff; background: #f2eaff; }
.gh-web-benefits strong { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.025em; margin-bottom: 4px; }
.gh-web-benefits small { display: block; color: #647fa3; font-size: 14px; line-height: 1.5; }
.gh-web-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gh-web-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 13px 20px; border-radius: 9px; background: #006bff; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 5px 12px #1782ff15; }
.gh-web-button:hover { background: #0058d7; color: #fff; text-decoration: none; }
.gh-web-text-link { color: #006bff; font-size: 15px; font-weight: 600; text-decoration: none; }
.gh-web-text-link:hover { color: #004cb8; text-decoration: underline; }
.gh-web-reference a:focus-visible { outline: 3px solid #ff9200; outline-offset: 4px; }
.gh-web-growth { padding: 15px 18px 22px; border: 1px solid #dfebf7; border-radius: 13px; background: #f7fbffb3; }
.gh-web-growth > i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #0874ff; background: #e5f2ff; font-size: 24px; margin-bottom: 13px; }
.gh-web-growth h3 { font-size: 18px; line-height: 1.3; font-weight: 800; letter-spacing: -.035em; color: #0b1730; margin: 0 0 18px; }
.gh-web-growth ul { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; }
.gh-web-growth li { display: flex; gap: 10px; align-items: center; color: #355278; font-size: 12px; }
.gh-web-growth li i { color: #0874ff; }
.gh-web-security { padding: 52px 0 46px; background: radial-gradient(ellipse at 80% 40%,#dfedff,transparent 62%),linear-gradient(120deg,#fff,#f0faff); }
.gh-web-security-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(40px,5.7vw,116px); align-items: center; padding-inline: clamp(0px,6.5vw,135px); }
.gh-web-security-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.gh-web-security-cards article { padding: 13px 15px; border: 1px solid #e0ecf9; border-radius: 12px; background: #ffffffc9; }
.gh-web-security-cards article > i { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #fff0f3; color: #ff1645; font-size: 22px; margin-bottom: 8px; }
.gh-web-security-cards h3 { font-size: 15px; font-weight: 800; letter-spacing: -.04em; color: #0b1730; margin: 0 0 6px; }
.gh-web-security-cards p { color: #647fa3; font-size: 14px; line-height: 1.4; margin: 0; }
.gh-web-protection-note { position: absolute; top: 10%; right: 7%; color: #fff; text-shadow: 0 2px 6px #031127; }
.gh-web-protection-note span { position: absolute; top: 28px; right: 100%; font-size: 37px; }
.gh-web-security-checklist { position: absolute; top: 32%; right: 27%; display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; transform: rotate(-5deg); }
.gh-web-security-checklist li { display: flex; gap: 11px; align-items: center; text-transform: uppercase; color: #fff; background: #1322348a; padding: 5px 10px; border-radius: 5px; font-size: 14px; }
.gh-web-security-checklist i { color: #39edb5; font-size: 21px; }
.gh-web-protected-strip { position: absolute; bottom: 3.5%; left: 4%; right: 4%; display: flex; gap: 14px; align-items: center; padding: 15px 18px; border-radius: 13px; color: #fff; background: #10223bec; }
.gh-web-protected-label { display: block; color: #00e6a1; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.gh-web-protected-strip strong { display: block; font-size: 20px; letter-spacing: -.04em; line-height: 1.25; }
.gh-web-protected-tagline { font-size: 12px; line-height: 1.4; margin-left: auto; white-space: nowrap; }
.gh-web-protected-strip > i { color: #b0d6e4; font-size: 25px; }
body.gh-dark-mode .gh-web-reference { background: #0e1b30; color: #eef5ff; }
body.gh-dark-mode .gh-web-reference h2,body.gh-dark-mode .gh-web-reference h3 { color: #eef5ff; }
body.gh-dark-mode .gh-web-intro,body.gh-dark-mode .gh-web-benefits small,body.gh-dark-mode .gh-web-security-cards p,body.gh-dark-mode .gh-web-growth li { color: #adc2dd; }
body.gh-dark-mode .gh-web-growth,body.gh-dark-mode .gh-web-security-cards article { background: #15283f; border-color: #29405c; }