* { box-sizing: border-box; }
html, body {
margin: 0; min-height: 100%; font-family: Inter, Arial, sans-serif;
background: radial-gradient(circle at 20% 10%, rgba(24,169,184,.14) 0%, rgba(24,169,184,0) 32%), radial-gradient(circle at 80% 0%, rgba(77,193,203,.12) 0%, rgba(77,193,203,0) 22%), linear-gradient(180deg, #043f45 0%, #06282d 42%, #05171b 100%);
color: #f0f9fb; overflow-x: hidden;
}
a { text-decoration: none; } button { font: inherit; }
.page-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.10) 100%); }
.grid-noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at center, black 42%, transparent 100%); }
.site-header { pointer-events: auto; }
.header-shell { border: 1px solid rgba(178,228,232,.12); background: linear-gradient(180deg, rgba(6,24,28,.82) 0%, rgba(6,24,28,.72) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); padding-left: 16px; padding-right: 16px; }
.nav-link { color: rgba(240,249,251,.78); transition: color 180ms ease; } .nav-link:hover, .nav-link.active { color: #fff; }
.provider-trigger { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 9px 14px; color: #f0f9fb; background: rgba(24,169,184,.10); border: 1px solid rgba(77,193,203,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); cursor: pointer; }
.provider-menu { border: 1px solid rgba(178,228,232,.12); background: linear-gradient(180deg, rgba(8,25,30,.96) 0%, rgba(6,20,24,.96) 100%); backdrop-filter: blur(18px); box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.provider-item { display: block; padding: 12px 16px; font-size: 14px; color: rgba(240,249,251,.88); } .provider-item:hover { background: rgba(255,255,255,.04); color: #fff; }
.header-ghost-btn, .mobile-ghost-btn { border-radius: 14px; border: 1px solid rgba(178,228,232,.14); background: rgba(240,249,251,.04); color: rgba(240,249,251,.92); font-size: 14px; font-weight: 600; }
.header-ghost-btn { padding: 10px 16px; } .mobile-ghost-btn { display: block; padding: 13px 16px; text-align: center; }
.header-primary-btn, .mobile-primary-btn, .review-submit { border-radius: 14px; background: linear-gradient(180deg, #18a9b8 0%, #0c8a96 100%); color: #eafbfd; font-size: 14px; font-weight: 800; box-shadow: 0 14px 30px rgba(12,138,150,.28); border: none; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; }
.header-primary-btn { padding: 10px 16px; } .mobile-primary-btn { display: block; padding: 13px 16px; width: 100%; } .review-submit { width: 100%; padding: 15px 18px; font-size: 15px; } .review-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); } .review-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.burger-btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; width: 42px; border-radius: 14px; border: 1px solid rgba(178,228,232,.14); background: rgba(240,249,251,.04); color: rgba(240,249,251,.92); cursor: pointer; }
.mobile-shell { border: 1px solid rgba(178,228,232,.12); background: rgba(7,25,29,.72); backdrop-filter: blur(16px); border-radius: 18px; padding: 14px 16px; }
.mobile-menu-panel { border: 1px solid rgba(178,228,232,.12); background: linear-gradient(180deg, rgba(8,25,30,.96) 0%, rgba(6,20,24,.96) 100%); backdrop-filter: blur(16px); border-radius: 22px; box-shadow: 0 22px 60px rgba(0,0,0,.34); }
.mobile-link { display: block; border-radius: 14px; padding: 12px; color: rgba(240,249,251,.9); } .mobile-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.review-shell { position: relative; z-index: 1; min-height: calc(100vh - 260px); padding: 132px 0 56px; }
.review-card { width: min(680px, 100%); margin: 0 auto; border: 1px solid rgba(178,228,232,.12); background: linear-gradient(180deg, rgba(7,25,29,.88) 0%, rgba(5,17,21,.84) 100%); box-shadow: 0 24px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(18px); border-radius: 32px; padding: 32px; }
.review-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #4dc1cb; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 800; }
.review-eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #18a9b8); }
.review-title { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1; letter-spacing: -.055em; font-weight: 850; color: #f0f9fb; }
.review-copy { margin-top: 14px; color: rgba(240,249,251,.72); font-size: 15px; line-height: 1.75; }
.provider-pill { margin-top: 22px; display: flex; align-items: center; gap: 12px; border-radius: 20px; border: 1px solid rgba(178,228,232,.12); background: rgba(240,249,251,.04); padding: 14px; }
.provider-avatar { width: 46px; height: 46px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #63d9c7 0%, #18a9b8 100%); color: #04181c; font-weight: 950; }
.provider-label { color: rgba(240,249,251,.54); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .provider-name { margin-top: 3px; color: #fff; font-size: 18px; font-weight: 850; }
.review-form { margin-top: 24px; display: grid; gap: 16px; } .field { display: grid; gap: 8px; } .field label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,249,251,.74); }
.review-input, .review-textarea { width: 100%; border: 1px solid rgba(178,228,232,.12); background: rgba(240,249,251,.04); color: #f0f9fb; border-radius: 16px; padding: 14px; outline: none; font-size: 16px; }
.review-textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .review-input::placeholder, .review-textarea::placeholder { color: rgba(240,249,251,.38); } .review-input:focus, .review-textarea:focus { border-color: rgba(77,193,203,.46); box-shadow: 0 0 0 4px rgba(24,169,184,.12); } .invalid { border-color: rgba(255,111,111,.72) !important; box-shadow: 0 0 0 4px rgba(255,111,111,.10) !important; }
.review-file-input { width: 100%; border: 1px dashed rgba(178,228,232,.20); background: rgba(240,249,251,.035); color: rgba(240,249,251,.82); border-radius: 16px; padding: 14px; outline: none; font-size: 14px; }
.review-file-input::file-selector-button { margin-right: 12px; border: 1px solid rgba(178,228,232,.16); background: rgba(24,169,184,.16); color: #eafbfd; border-radius: 12px; padding: 9px 12px; font-weight: 800; cursor: pointer; }
.photo-helper { color: rgba(240,249,251,.55); font-size: 12px; line-height: 1.55; }
.photo-preview-row { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-preview-item { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.photo-preview { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(178,228,232,.14); background: rgba(240,249,251,.04); display: block; }
.photo-remove-btn { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(3,12,15,.88); color: #f0f9fb; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.32); }
.photo-remove-btn:hover, .photo-remove-btn:focus-visible { background: rgba(24,169,184,.95); outline: none; }
.star-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .star-btn { width: 46px; height: 46px; border-radius: 15px; border: 1px solid rgba(178,228,232,.14); background: rgba(240,249,251,.04); color: rgba(240,249,251,.36); font-size: 28px; line-height: 1; cursor: pointer; transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease; }
.star-btn:hover, .star-btn.active { color: #ffd54f; background: rgba(255,213,79,.08); border-color: rgba(255,213,79,.24); transform: translateY(-1px); }
.rating-helper { margin-left: 4px; color: rgba(240,249,251,.58); font-size: 13px; } .field-error { display: none; color: #ffb3b3; font-size: 12px; line-height: 1.45; } .field-error.show { display: block; }
.message-box { display: none; border-radius: 18px; padding: 14px 16px; font-size: 14px; line-height: 1.6; } .message-box.show { display: block; } .message-box.error { background: rgba(255,111,111,.08); border: 1px solid rgba(255,111,111,.18); color: #ffd8d8; } .message-box.success { background: rgba(99,217,199,.08); border: 1px solid rgba(99,217,199,.16); color: #dffcf8; } .message-box.info { background: rgba(255,213,79,.08); border: 1px solid rgba(255,213,79,.18); color: #fff4bf; }
.success-state { display: none; margin-top: 24px; } .success-state.show { display: block; } .success-heading-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .success-icon { width: 50px; height: 50px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(99,217,199,.10); border: 1px solid rgba(99,217,199,.18); color: #63d9c7; font-size: 28px; flex: 0 0 auto; } .success-heading { margin: 0; color: #ffffff; font-size: 24px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 900; } .success-copy { margin-top: 14px; }
.footer-shell { position: relative; z-index: 1; padding: 0 0 38px; } .footer-links-card { border: 1px solid rgba(178,228,232,.12); background: rgba(7,25,29,.52); border-radius: 24px; padding: 24px; color: rgba(240,249,251,.62); backdrop-filter: blur(14px); } .footer-brand-copy { color: rgba(240,249,251,.66); line-height: 1.75; font-size: 14px; max-width: 320px; } .footer-col-title { color: #f0f9fb; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; } .footer-link-list { display: grid; gap: 10px; font-size: 14px; } .footer-link-list a { color: rgba(240,249,251,.68); } .footer-link-list a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 22px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(240,249,251,.42); }
@media (max-width: 980px) { .site-header .header-shell { margin-top: 10px; } .review-card { padding: 22px; border-radius: 24px; } }
@media (max-width: 640px) { .review-shell { padding-top: 112px; } .star-btn { width: 42px; height: 42px; font-size: 25px; } .review-submit, .mobile-primary-btn, .mobile-ghost-btn, .header-primary-btn, .header-ghost-btn { min-height: 48px; } }
@media (max-width: 640px) {
.photo-preview-item, .photo-preview { width: 68px; height: 68px; }
.photo-remove-btn { width: 28px; height: 28px; top: -8px; right: -8px; }
}
@media (max-width: 640px) {
.success-heading-row { align-items: flex-start; }
.success-icon { width: 46px; height: 46px; border-radius: 16px; font-size: 26px; }
.success-heading { font-size: 22px; }
}
/* Mobile burger menu scroll fix: keep the overlay usable on short phone screens. */
#burgerOverlay > .relative {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#burgerOverlay .mobile-menu-panel {
max-height: calc(100dvh - 150px);
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#burgerOverlay .mobile-menu-panel::-webkit-scrollbar {
width: 6px;
}
#burgerOverlay .mobile-menu-panel::-webkit-scrollbar-thumb {
background: rgba(178, 228, 232, 0.22);
border-radius: 999px;
}