/* Public product modules and Cairn, Civzu's original site guide. */
.module-hero { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(36px,5vw,80px); align-items: center; min-height: 670px; padding-block: 88px 96px; }
.module-eyebrow, .module-intro span, .module-horizon span { display: block; color: #8cdef4; font-size: 10px; font-weight: 800; letter-spacing: .19em; }
.module-hero h1 { max-width: 850px; margin: 24px 0; color: #f3faff; font-size: clamp(62px,6.4vw,108px); line-height: .98; letter-spacing: -.065em; }
.module-hero h1 em, .module-intro h2 em, .module-horizon h2 em { color: #9cddf9; font-family: var(--serif); font-weight: 400; }
.module-hero-copy > p { max-width: 670px; color: #bbd5e1; font-size: 17px; line-height: 1.72; }
.module-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 30px; }
.module-hero-actions .text-link { color: #d7f3fd; }
.module-hero-art { position: relative; min-height: 520px; border: 1px solid #80bfe067; border-radius: 18px; background: linear-gradient(180deg,#09213620,#071a2a87), url('/assets/civzu-terrain-hero.webp') center / cover; box-shadow: 0 34px 75px #010d19a8, inset 0 1px #b8ebff4d; overflow: hidden; }
.module-hero-art::after { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at 62% 49%, transparent 0 22px, #a4e6f21c 23px 24px, transparent 25px 44px); mask-image: linear-gradient(90deg,transparent,#000); pointer-events: none; }
.module-hero-art > span { position: absolute; bottom: 18px; left: 20px; z-index: 1; padding: 9px 12px; border: 1px solid #86d1eb7f; background: #071f32dd; color: #d2f1fc; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.module-intro { display: grid; grid-template-columns: 1fr .8fr; gap: 60px; align-items: end; padding-block: 64px; border-top: 1px solid #67accc65; }
.module-intro h2, .module-horizon h2 { margin: 16px 0 0; font-size: clamp(48px,5vw,76px); line-height: 1.02; letter-spacing: -.055em; }
.module-intro p { max-width: 600px; margin: 0; color: #b9d1de; font-size: 15px; line-height: 1.8; }
.module-grid-section { padding-bottom: 115px; }
.module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.module-card { overflow: hidden; border: 1px solid #6caaca70; border-radius: 16px; background: linear-gradient(145deg,#123951,#09273d 72%); box-shadow: 0 24px 60px #010e1b63, inset 0 1px #d2f1fa1a; transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.module-card:hover { transform: translateY(-4px); border-color: #80d9f0; box-shadow: 0 29px 69px #010e1ba3; }
.module-card-art { position: relative; height: clamp(260px,28vw,360px); overflow: hidden; background: #071c2c; }
.module-card-art > img, .module-concept { width: 100%; height: 100%; display: block; object-fit: cover; }
.module-card-art > img { object-position: 50% 45%; }
.module-concept { background-image: url('/assets/civzu-module-atlas-v1.webp'); background-repeat: no-repeat; background-size: 200% 200%; }
.module-concept-atlas-survey { background-position: left top; }
.module-concept-atlas-drainage { background-position: right top; }
.module-concept-atlas-land { background-position: left bottom; }
.module-concept-atlas-automation { background-position: right bottom; }
.module-concept-existing-grading { background-image: url('/assets/civzu-workflow-atlas.webp'); background-position: left bottom; }
.module-card-art > span { position: absolute; left: 18px; bottom: 17px; padding: 8px 10px; border: 1px solid #9fdaeb85; border-radius: 3px; background: #071d30de; color: #d8f3fc; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.module-card-body { padding: 26px 30px 31px; }
.module-card-number { display: flex; justify-content: space-between; color: #8ad8ed; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.module-card-number span { color: #a9c6d7; }
.module-card h2 { margin: 19px 0 12px; color: #f0f9fe; font: 36px/1.12 var(--serif); }
.module-card p { min-height: 70px; margin: 0; color: #bbd4e0; font-size: 14px; line-height: 1.65; }
.module-card ul { display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 0 0; margin: 21px 0 0; list-style: none; border-top: 1px solid #81b6cd48; }
.module-card li { padding: 7px 9px; border: 1px solid #79b7d063; border-radius: 3px; color: #c8e6f1; font-size: 10px; }
.module-horizon { padding-block: 84px; border-block: 1px solid #81bdd067; background: radial-gradient(ellipse at 78% 10%,#1b5b825b,transparent 54%),#071b2b; }
.module-horizon-inner { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.module-horizon p { max-width: 690px; color: #bdd7e4; font-size: 15px; line-height: 1.75; }
.module-horizon .button-outline { flex: none; color: #e7f7ff; border-color: #7bcbe8; }

.cairn-guide { position: fixed; right: 20px; bottom: 18px; z-index: 95; font-family: var(--sans); }
.cairn-launch { position: relative; display: grid; place-items: center; width: 94px; height: 94px; padding: 0; border: 1px solid #80d4e8bd; border-radius: 26px; background: radial-gradient(circle at 50% 22%,#2c7da8,#0b3049 72%); box-shadow: 0 14px 34px #010d1bbc, inset 0 1px #c5f5ff91; cursor: pointer; }
.cairn-launch img { width: 82px; height: 100px; object-fit: contain; transform: translateY(-7px); filter: drop-shadow(0 4px 13px #35bff368); animation: cairn-float 4.6s ease-in-out infinite; }
.cairn-launch:hover, .cairn-launch[aria-expanded="true"] { border-color: #b9f3ff; box-shadow: 0 15px 40px #037cbd8a; }
.cairn-guide :is(button,a):focus-visible { outline: 2px solid #baf5ff; outline-offset: 3px; }
.cairn-panel { position: absolute; right: 0; bottom: 111px; width: min(355px,calc(100vw - 32px)); padding: 18px; border: 1px solid #83d2e8b0; border-radius: 16px; background: linear-gradient(155deg,#174563,#092538 74%); box-shadow: 0 25px 65px #000d1beb; color: #f2faff; }
.cairn-panel[hidden] { display: none; }
.cairn-panel-bar { display: flex; justify-content: space-between; align-items: center; color: #a3dded; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.cairn-close { width: 31px; height: 31px; padding: 0; border: 1px solid #8bbec875; border-radius: 5px; background: #0b2b40; color: #e5faff; font-size: 21px; line-height: 1; cursor: pointer; }
.cairn-intro { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin-top: 8px; }
.cairn-intro img { width: 76px; height: 94px; object-fit: contain; }
.cairn-intro h2 { margin: 0 0 5px; font: 26px/1.1 var(--serif); }
.cairn-intro p { margin: 0; color: #c4dce8; font-size: 12px; line-height: 1.55; }
.cairn-links { display: grid; gap: 6px; margin-top: 11px; }
.cairn-links a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid #87c6dd66; border-radius: 5px; background: #0b3048; color: #e4f5fd; font-size: 12px; font-weight: 650; }
.cairn-links a:hover { border-color: #a4e9f6; background: #155073; }
.cairn-note { margin: 12px 0 0; color: #9fc6d8; font-size: 10px; }
@keyframes cairn-float { 50% { transform: translateY(-12px); } }
@media (max-width: 900px) { .module-hero { grid-template-columns: 1fr; padding-top: 64px; } .module-hero-art { min-height: 400px; } .module-intro { grid-template-columns: 1fr; gap: 20px; } .module-horizon-inner { display: block; } .module-horizon .button { margin-top: 20px; } }
@media (max-width: 650px) { .module-hero { gap: 24px; padding-block: 58px 65px; } .module-hero h1 { font-size: clamp(52px,12vw,72px); } .module-hero-copy > p { font-size: 15px; } .module-hero-art { min-height: 340px; } .module-intro { padding-block: 55px; } .module-grid { grid-template-columns: 1fr; } .module-grid-section { padding-bottom: 75px; } .module-card-art { height: 260px; } .module-card-body { padding: 23px; } .module-card p { min-height: 0; } .module-card h2 { font-size: 31px; } .module-horizon { padding-block: 62px; } .cairn-guide { right: 13px; bottom: 13px; } .cairn-launch { width: 73px; height: 73px; border-radius: 20px; } .cairn-launch img { width: 65px; height: 82px; } .cairn-panel { bottom: 86px; } }
@media (prefers-reduced-motion: reduce) { .cairn-launch img, .module-card { animation: none; transition: none; } }