@font-face {
    font-family: Inter;
    src: url('/fonts/filament/filament/inter/inter-latin-wght-normal-O25CN4JL.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --ink: #163b56;
    --muted: #526779;
    --paper: #f4f8fb;
    --line: #d8e3eb;
    --accent: #c6eaff;
    --white: #fff;
    --primary: #2a8fc7;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}
body {
    margin: 0;
    font-family: Inter,Arial,sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
}
a {
    color: inherit;
    text-decoration: none;
}
button,input,select {
    font: inherit;
}
button,a,input,select {
    -webkit-tap-highlight-color: transparent;
}
button,a {
    touch-action: manipulation;
}
button {
    cursor: pointer;
}
img {
    max-width: 100%;
}
svg {
    flex-shrink: 0;
}
h1,h2,h3,h4,p {
    margin: 0;
}
h1,h2,h3 {
    text-wrap: balance;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
    outline: 3px solid #1e6a94;
    outline-offset: 5px;
}
::selection {
    background: var(--accent);
    color: var(--ink);
}
[hidden] {
    display: none!important;
}
.container {
    max-width: 1280px;
    margin: auto;
}
.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 200;
    background: var(--accent);
    padding: 12px 24px;
}
.skip-link:focus {
    top: 12px;
}
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.header-container {
    max-width: 1440px;
    margin: auto;
    padding: 0 48px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.logo {
    width: 210px;
    height: 63px;
    object-fit: contain;
    filter: none;
}
.nav,.header-buttons {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-link {
    font-size: 13px;
    font-weight: 500;
    padding: 12px 0;
}
.nav-link:hover,.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}
.header-buttons {
    gap: 14px;
}
.btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 12px 23px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .2s,background-color .2s;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:active {
    transform: translateY(0);
}
.btn-primary {
    background: #1e6a94;
    color: var(--white);
}
.btn-primary:hover {
    background: #185575;
}
.btn-primary span {
    font-size: 21px;
    line-height: 1;
}
.btn-outline {
    border-color: var(--ink);
}
.btn-outline:hover {
    background: #e2f0f9;
}
.btn-ghost {
    padding-inline: 6px;
}
.mobile-menu-btn,.mobile-login {
    display: none;
}
.hero {
    overflow: hidden;
    padding: 38px 48px 0;
}
.hero-layout {
    position: relative;
}
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
}
.badge-dot {
    width: 7px;
    height: 7px;
    background: var(--ink);
    border-radius: 50%;
}
.edition {
    margin-left: auto;
    font-size: 9px;
    color: var(--muted);
}
.hero-copy {
    position: relative;
    z-index: 2;
    pointer-events: none;
    padding-top: 46px;
}
.hero-copy a {
    pointer-events: auto;
}
h1 {
    font-size: clamp(62px,7.6vw,108px);
    line-height: 1.02;
    letter-spacing: -6px;
    font-weight: 500;
    max-width: 900px;
}
h1 em {
    font-family: Georgia,serif;
    font-weight: 400;
}
.hero-intro {
    max-width: 390px;
    padding-top: 36px;
}
.hero-intro p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--muted);
}
.btn-hero {
    margin-top: 26px;
    background: #1e6a94;
    padding: 16px 26px;
}
.text-link {
    display: flex;
    gap: 24px;
    align-items: center;
    width: fit-content;
    margin-top: 20px;
    font-size: 12px;
}
.optical-stage {
    position: absolute;
    right: -16px;
    top: 112px;
    width: 55%;
    height: 440px;
    perspective: 900px;
}
.photo-lens {
    position: absolute;
    inset: 30px 18px 20px 24px;
    border-radius: 48% 49% 43% 46%;
    overflow: hidden;
    transform: rotate(-10deg);
    background: #386f8e;
    box-shadow: inset 0 0 0 1px #ffffff88,0 26px 42px -30px #163b5666;
}
.photo-lens img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1.15) rotate(10deg);
    filter: grayscale(1);
    mix-blend-mode: luminosity;
    opacity: .85;
}
.lens-reflection {
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg,transparent 40%,#ffffff55 47%,#ffffff0a 54%,transparent 60%);
    transform: translate(var(--lens-x,0px),var(--lens-y,0px));
    will-change: transform;
    transition: transform .12s linear;
    pointer-events: none;
}
.lens-orbit {
    position: absolute;
    inset: 6px 0;
    border: 1px solid #88b7d1;
    border-radius: 50%;
    transform: rotate(-22deg);
    pointer-events: none;
}
.orbit-two {
    inset: 24px -12px;
    transform: rotate(16deg);
    border-color: #b9d0df;
}
.lens-caption {
    color: var(--ink);
    position: absolute;
    right: 0;
    bottom: 22px;
    padding: 18px 24px;
    background: var(--accent);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    transform: rotate(-3deg);
    min-width: 220px;
}
.lens-caption-copy {
    display: grid;
    gap: 2px;
    min-height: 2.6em;
    transition: opacity .35s ease, transform .35s ease;
}
.lens-caption-copy.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}
.lens-caption-copy.is-entering {
    opacity: 0;
    transform: translateY(-6px);
}
.lens-caption-line {
    display: block;
}
.lens-caption strong,
.lens-caption-emphasis {
    display: block;
    font-size: 12px;
}
.caption-icon {
    font-size: 28px;
}
.lens-coordinate {
    position: absolute;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: var(--muted);
}
.coordinate-top {
    right: 8px;
    top: -14px;
}
.coordinate-bottom {
    left: 32px;
    bottom: -24px;
}
.hero-bottom {
    margin-top: 74px;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    gap: 30px;
}
.hero-bottom>p {
    font-size: 12px;
    color: var(--muted);
}
.hero-bottom>p strong {
    color: var(--ink);
    font-weight: 500;
}
.hero-stats {
    display: flex;
    gap: 62px;
}
.stat-number {
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -1px;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    min-width: 4.5ch;
    transition: color .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.stat-number.is-counted {
    color: var(--primary);
    transform: translateY(-2px) scale(1.04);
    transition: color .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: reduce) {
    .stat-number { transition: none; }
    .stat-number.is-counted { transform: none; }
}
.stat-label {
    font-size: 10px;
    color: var(--muted);
}
.scroll-cue {
    width: 46px;
    height: 46px;
    border: 1px solid #9db8ca;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
}
.expertise-strip {
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
    padding: 25px 24px;
    font-size: 14px;
}
.expertise-strip>span:first-child {
    font-size: 9px;
    letter-spacing: 1.3px;
    margin-right: 24px;
}
.expertise-strip i {
    color: var(--accent);
    font-size: 22px;
    font-style: normal;
}
.features,.about,.pricing,.contact-section {
    padding: 100px 48px;
}
.section-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 1.6px;
    font-weight: 600;
    margin-bottom: 22px;
}
.section-title {
    font-size: clamp(32px,4vw,52px);
    font-weight: 500;
    letter-spacing: -2px;
    line-height: 1.15;
    margin-bottom: 22px;
}
.gradient-text {
    color: #247cab;
}
.hero-rotating-word {
    display: contents;
    font-style: normal;
}
.hero-rotating-prefix {
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
}
.hero-rotating-noun {
    display: block;
    width: max-content;
    min-width: 12ch;
    line-height: .9;
    min-height: .9em;
    white-space: nowrap;
}
.hero-rotating-prefix.is-typing::after,
.hero-rotating-noun.is-typing::after {
    content: '';
    display: inline-block;
    width: .08em;
    height: .82em;
    margin-left: .04em;
    background: currentColor;
    vertical-align: -0.08em;
    animation: hero-caret 850ms steps(1, end) infinite;
}
@keyframes hero-caret {
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-rotating-prefix.is-typing::after,
    .hero-rotating-noun.is-typing::after {
        display: none;
    }
}
.section-description {
    font-size: 15px;
    color: var(--muted);
    max-width: 580px;
    margin: 0 0 48px;
}
.features .text-center {
    position: relative;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    counter-reset: features;
}
.feature-card {
    padding: 30px 24px 36px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    counter-increment: features;
}
.feature-card::after {
    content: '0' counter(features);
    position: absolute;
    top: 30px;
    right: 24px;
    font-size: 10px;
    color: var(--muted);
}
.feature-icon {
    width: 46px;
    height: 46px;
    background: #e1eff8;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 34px;
}
.feature-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--ink);
}
.feature-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: -.4px;
}
.feature-description {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
}
.about {
    background: #e8f1f7;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    align-items: center;
    gap: 80px;
}
.about-image {
    background: var(--ink);
    color: var(--paper);
    padding: 36px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}
.about-image>.section-badge {
    font-size: 9px;
    color: var(--accent);
}
.about-image>p {
    font-size: 13px;
    line-height: 1.8;
    position: relative;
}
.about-image>p strong {
    font-weight: 500;
}
.focus-diagram {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1.25;
    margin: -8px 0 14px;
}
.focus-ring {
    position: absolute;
    width: 85%;
    aspect-ratio: 1;
    border: 1px solid #88b7d166;
    border-radius: 50%;
}
.focus-ring.inner {
    width: 62%;
    border-color: #b3daee55;
}
.focus-diagram:before,.focus-diagram:after {
    content: '';
    position: absolute;
    background: #88b7d144;
}
.focus-diagram:before {
    width: 100%;
    height: 1px;
}
.focus-diagram:after {
    height: 100%;
    width: 1px;
}
.focus-diagram>strong {
    font-size: 95px;
    font-weight: 400;
    letter-spacing: -7px;
    z-index: 1;
    color: var(--accent);
}
.focus-diagram>strong span {
    font-family: Georgia,serif;
}
.focus-label {
    position: absolute;
    font-size: 8px;
    letter-spacing: 1.4px;
    background: var(--ink);
    padding: 6px;
}
.label-top {
    top: 3%;
    left: 41%;
}
.label-bottom {
    bottom: 3%;
    left: 43%;
}
.label-left {
    left: -3%;
    top: 44%;
}
.label-right {
    right: -3%;
    top: 44%;
}
.about-text {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 28px;
    line-height: 1.9;
}
.benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 32px;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
}
.benefit-check,.pricing-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.benefit-check svg,.pricing-check svg {
    width: 14px;
    height: 14px;
    stroke: var(--ink);
}
.pricing .text-center {
    text-align: center;
}
.pricing .section-description {
    margin: 0 auto 52px;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}
.pricing-card {
    border: 1px solid var(--line);
    padding: 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fcfdff;
}
.pricing-card--featured {
    background: #e1eff9;
    border-color: #75adcc;
}
.pricing-badge {
    position: absolute;
    top: -15px;
    left: 24px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    font-size: 10px;
    padding: 6px 14px;
}
.pricing-badge svg {
    width: 12px;
    height: 12px;
    fill: var(--accent);
}
.pricing-name {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 12px;
}
.pricing-desc {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}
.pricing-price {
    margin: 12px 0 24px;
}
.pricing-amount {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -2px;
}
.pricing-period,.pricing-currency {
    font-size: 12px;
    color: var(--muted);
}
.pricing-features {
    list-style: none;
    padding: 24px 0 0;
    margin: 0 0 28px;
    border-top: 1px solid var(--line);
    flex: 1;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    margin-bottom: 14px;
}
.pricing-check svg {
    stroke-width: 2;
}
.pricing-btn {
    width: 100%;
}
.contact-section {
    background: #e8f1f7;
    border-top: 1px solid var(--line);
}
.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start;
    margin-top: 40px;
}
.contact-card {
    display: flex;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid #c7dae7;
    padding: 24px 0;
}
.contact-card-icon {
    width: 44px;
    height: 44px;
    background: #d5e8f4;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.contact-card-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
}
.contact-card-label {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 3px;
}
.contact-card-value {
    font-size: 14px;
    overflow-wrap: anywhere;
}
.contact-card-value a:hover {
    text-decoration: underline;
}
.contact-form-box {
    padding: 36px;
    background: var(--paper);
    border: 1px solid var(--line);
}
.form-title {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.8px;
    margin-bottom: 12px;
}
.form-description {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}
.site-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.form-group--full {
    grid-column: 1/-1;
}
.form-label {
    font-size: 12px;
    font-weight: 500;
}
.form-input,.form-select {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid #b3c9d9;
    background: transparent;
    color: var(--ink);
    border-radius: 3px;
    font-size: 16px;
}
.form-input::placeholder {
    color: #627889;
    font-size: 13px;
}
.form-select {
    font-size: 14px;
    background-color: var(--paper);
}
.form-submit {
    width: 100%;
    margin-top: 24px;
}
.form-honeypot {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}
.contact-note {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    margin-top: 16px;
}
.form-error {
    color: #ae2828;
    font-size: 12px;
}
.form-alert {
    padding: 16px;
    font-size: 13px;
    margin-bottom: 22px;
    border: 1px solid;
}
.form-alert--success {
    background: #e4edd4;
    color: #234222;
}
.form-alert--error {
    background: #f9e8df;
    color: #942d22;
}
.footer {
    padding: 64px 48px 24px;
    background: var(--ink);
    color: var(--paper);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
    gap: 48px;
    padding-bottom: 48px;
}
.footer-brand {
    margin-bottom: 20px;
}
.footer .logo {
    width: 210px;
    height: 63px;
    filter: grayscale(1) brightness(0) invert(1);
}
.footer-about {
    max-width: 300px;
    font-size: 12px;
    color: #c4d6e3;
}
.footer-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--accent);
}
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li {
    margin-bottom: 10px;
}
.footer-links a,.contact-item {
    font-size: 12px;
    color: #c4d6e3;
}
.footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}
.contact-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.footer-bottom {
    border-top: 1px solid #ffffff25;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #c4d6e3;
    font-size: 10px;
}
.reveal-enter {
    animation: reveal .65s ease-out both;
}
@keyframes reveal {
    from {
        opacity: .25;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media(min-width:1500px) {
    .optical-stage {
        top: 132px;
    }
    .hero-copy {
        padding-top: 60px;
    }
    .hero-bottom {
        margin-top: 86px;
    }
}
@media(max-width:1100px) {
    .header-container {
        padding: 0 28px;
    }
    .nav {
        gap: 18px;
    }
    .header-buttons>.btn-primary {
        display: none;
    }
    .hero,.features,.about,.pricing,.contact-section {
        padding-left: 28px;
        padding-right: 28px;
    }
    h1 {
        letter-spacing: -4px;
        font-size: 80px;
    }
    .optical-stage {
        width: 53%;
        top: 140px;
        height: 360px;
    }
    .hero-intro {
        max-width: 340px;
    }
    .hero-bottom {
        margin-top: 56px;
    }
    .hero-stats {
        gap: 34px;
    }
    .expertise-strip {
        gap: 24px;
    }
    .expertise-strip>span:first-child {
        max-width: 140px;
        margin-right: 0;
    }
    .features-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .about-grid,.contact-grid {
        gap: 36px;
    }
    .about-image {
        padding: 24px;
        min-height: 420px;
    }
    .focus-diagram>strong {
        font-size: 76px;
    }
    .benefits-list {
        grid-template-columns: 1fr;
    }
    .pricing-card {
        padding: 28px 20px;
    }
    .footer-grid {
        gap: 28px;
    }
}
@media(max-width:760px) {
    html {
        scroll-padding-top: 90px;
    }
    .header-container {
        height: 72px;
        padding: 0 20px;
    }
    .logo { width: 175px; height: 52px; }
    .header-buttons {
        margin-left: auto;
    }
    .mobile-menu-btn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink);
        border-radius: 3px;
    }
    .mobile-menu-btn svg {
        height: 22px;
        width: 22px;
        stroke: currentColor;
    }
    .nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 72px;
        background: var(--paper);
        padding: 20px 24px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 15px 24px #163b5610;
        align-items: stretch;
        gap: 0;
    }
    .nav.is-open {
        display: flex;
        flex-direction: column;
    }
    .nav-link {
        min-height: 44px;
        padding: 12px;
    }
    .mobile-login {
        display: block;
    }
    .hero {
        padding: 28px 20px 0;
    }
    .hero-eyebrow {
        font-size: 8px;
        letter-spacing: 1px;
    }
    .edition {
        display: none;
    }
    .hero-copy {
        padding-top: 32px;
    }
    h1 {
        font-size: clamp(48px,10.3vw,76px);
        letter-spacing: -3px;
    }
    .hero-intro {
        padding-top: 24px;
        max-width: 460px;
    }
    .hero-intro p {
        font-size: 14px;
    }
    .btn-hero {
        margin-top: 22px;
    }
    .text-link {
        display: inline-flex;
        margin: 0 0 0 20px;
        font-size: 11px;
        gap: 12px;
    }
    .optical-stage {
        position: relative;
        right: auto;
        top: auto;
        width: min(100%,550px);
        height: auto;
        aspect-ratio: 1.4;
        margin: 48px auto 34px;
    }
    .photo-lens {
        inset: 16px 22px;
    }
    .lens-caption {
        right: 8px;
        bottom: 10px;
        padding: 14px 18px;
    }
    .coordinate-top {
        font-size: 7px;
        top: -12px;
    }
    .coordinate-bottom {
        font-size: 7px;
        bottom: -12px;
    }
    .hero-bottom {
        margin-top: 24px;
        padding: 22px 0;
        gap: 20px;
    }
    .hero-bottom>p,.scroll-cue {
        display: none;
    }
    .hero-stats {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }
    .stat-number {
        font-size: 24px;
    }
    .stat-label {
        font-size: 9px;
    }
    .expertise-strip {
        padding: 22px 20px;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 12px;
    }
    .expertise-strip>span:first-child {
        max-width: none;
        flex-basis: 100%;
        text-align: center;
        font-size: 8px;
    }
    .expertise-strip i {
        font-size: 15px;
    }
    .features,.about,.pricing,.contact-section {
        padding: 64px 20px;
    }
    .section-title {
        font-size: 36px;
        letter-spacing: -1.6px;
    }
    .section-description {
        font-size: 14px;
        margin-bottom: 32px;
    }
    .section-badge {
        font-size: 9px;
        margin-bottom: 18px;
    }
    .feature-card {
        padding: 24px 18px;
    }
    .feature-card::after {
        right: 18px;
        top: 24px;
    }
    .feature-icon {
        margin-bottom: 26px;
    }
    .feature-title {
        font-size: 14px;
    }
    .feature-description {
        font-size: 12px;
    }
    .about-grid,.contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .about-image {
        max-width: 500px;
        width: 100%;
        margin: auto;
        min-height: 0;
        padding: 28px;
    }
    .focus-diagram {
        max-width: 340px;
        margin: 0 auto 18px;
    }
    .focus-diagram>strong {
        font-size: 90px;
    }
    .benefits-list {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 480px;
        margin: auto;
    }
    .pricing-card {
        padding: 30px;
    }
    .contact-form-box {
        padding: 24px;
    }
    .contact-grid {
        margin-top: 24px;
    }
    .footer {
        padding: 48px 20px 24px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-grid>div:first-child {
        grid-column: 1/-1;
    }
    .footer-bottom {
        flex-direction: column;
        font-size: 10px;
    }
}
@media(max-width:380px) {
    .header-container {
        gap: 12px;
    }
    .header-buttons {
        display: none;
    }
    .mobile-menu-btn {
        margin-left: auto;
    }
    .text-link {
        margin: 18px 0 0;
        display: flex;
    }
    .hero-eyebrow {
        font-size: 7px;
    }
    .feature-card {
        padding: 20px 12px;
    }
    .benefits-list,.site-form-grid {
        grid-template-columns: 1fr;
    }
    .contact-form-box {
        padding: 20px;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
}
/* A short optical reveal; content remains readable without animation. */
.title-line {
    display: block;
    animation: title-focus .9s cubic-bezier(.2,.7,.2,1) both;
}
.title-line:nth-child(2) {
    animation-delay: .12s;
}
h1 em {
    position: relative;
    color: #247cab;
}
h1 em::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg,transparent 35%,#ffffff75 50%,transparent 65%);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    opacity: 0;
    animation: text-reflection 2.2s .7s ease-in-out;
}
.photo-lens {
    animation: lens-open 1.3s cubic-bezier(.2,.7,.2,1) both;
}
.lens-reflection {
    animation: lens-light 2.8s ease-out both;
}
.lens-caption {
    animation: caption-in .9s .35s ease-out both;
}
@keyframes title-focus {
    from {
        opacity: .2;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes lens-open {
    from {
        opacity: .25;
        transform: rotate(-16deg) scale(.92);
    }
    to {
        opacity: 1;
        transform: rotate(-10deg) scale(1);
    }
}
@keyframes lens-light {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes text-reflection {
    0% {
        opacity: 0;
        transform: translateX(-65%);
    }
    35% {
        opacity: .75;
    }
    100% {
        opacity: 0;
        transform: translateX(65%);
    }
}
@keyframes caption-in {
    from {
        opacity: 0;
        transform: translateY(15px) rotate(-3deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(-3deg);
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }
    *,*::before,*::after {
        animation: none!important;
        transition: none!important;
    }
    .lens-reflection {
        transform: none;
    }
}

/* Interactive optical demonstration. */
.lens-experience { padding: 94px 48px 36px; }
.experience-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 32px; }
.experience-heading .section-title { margin: 0; }
.experience-heading > p { max-width: 310px; font-size: 14px; color: var(--muted); }
.lens-lab { --rotation: 0deg; --glare-shift: 0%; --glare-opacity: .7; --scene-shift: 0px; position: relative; background: #eaf2f8; border: 1px solid #c9dce9; border-radius: 18px; overflow: hidden; }
.lab-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 28px; border-bottom: 1px solid #cfdfeb; }
.lab-heading { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; }
.lab-heading .badge-dot { background: #2a8fc7; }
.scene-switch { display: flex; padding: 4px; border: 1px solid #b7d0e1; border-radius: 8px; }
.scene-switch button { border: 0; background: transparent; color: var(--ink); border-radius: 4px; min-height: 40px; padding: 8px 20px; font-size: 12px; }
.scene-switch button[aria-pressed="true"] { background: #1e6a94; color: white; }
.scene-switch button:hover { box-shadow: inset 0 0 0 1px #1e6a94; }
.lab-instruction { text-align: center; margin: 28px 16px 8px; font-size: 12px; color: #416580; }
.lab-instruction > span:first-child { font-size: 20px; vertical-align: middle; margin-right: 6px; }
.lens-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px 58px 28px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; position: relative; }
.mount-toggle { display: none; align-items: center; gap: 8px; position: absolute; top: 14px; right: 58px; z-index: 12; pointer-events: auto; padding: 10px 14px; border: 1px solid #b9d4e5; border-radius: 8px; color: #1c4d6a; font-size: 13px; font-weight: 700; cursor: pointer; background: #f8fcff; }
.landscape-toggle { display: inline-flex; align-items: center; gap: 8px; position: absolute; top: 14px; left: 58px; z-index: 12; pointer-events: auto; padding: 10px 14px; border: 1px solid #b9d4e5; border-radius: 8px; color: #1c4d6a; font-size: 13px; font-weight: 700; cursor: pointer; background: #f8fcff; }
.lens-geometry-controls .landscape-toggle { position: static; z-index: auto; padding: 9px 12px; }
.lens-geometry-controls .mount-toggle { position: static; z-index: auto; padding: 9px 12px; }
.landscape-toggle input { accent-color: #1e7198; width: 16px; height: 16px; }
.lens-lab:is([data-scene="reading"],[data-scene="comparison"],[data-scene="treatments"],[data-scene="prescription"]) .landscape-toggle { display: none; }
.mount-toggle input { accent-color: #1e7198; width: 16px; height: 16px; }
.lens-lab[data-outline="cut"] .mount-toggle { display: inline-flex; }
.mount-rim { display: none; position: absolute; left: 17.5%; top: 50%; width: 65%; aspect-ratio: 1.35; z-index: 8; pointer-events: none; transform: translateY(-50%) rotateY(var(--rotation,30deg)) rotateX(var(--tilt,-7deg)) translateZ(42px); }
.lens-lab[data-outline="cut"][data-mount="true"] .mount-rim { display: block; }
.mount-rim::before { content: ''; position: absolute; inset: 3% 1%; border: 8px solid #151c23; border-radius: 43% 45% 39% 43% / 39% 42% 47% 44%; box-shadow: inset 0 0 0 2px #667780, 0 3px 8px #102b3a66; }
.mount-rim::after { content: ''; position: absolute; inset: 7% 5%; border: 1px solid #d5e7ed; border-radius: 40% 43% 37% 41% / 36% 40% 45% 42%; opacity: .85; }
@media (max-width: 760px) { .landscape-toggle { top: 10px; left: 12px; font-size: 11px; padding: 7px 9px; } .lens-lab[data-outline="cut"] .mount-toggle { top: 10px; right: 12px; font-size: 11px; padding: 7px 9px; } .mount-rim { left: 13%; width: 74%; } }
.lens-comparison.is-dragging { cursor: grabbing; }
.lens-sample { margin: 0; min-width: 0; padding: 20px 20px 16px; border: 1px solid #c9dce9; border-radius: 12px; background: #f5f9fc; overflow: hidden; }
.lens-sample--treated { background: #edf7fe; border-color: #7eb5d6; }
.sample-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.sample-heading > span:first-child { padding: 6px 12px; background: #e1eaf0; border: 1px solid #c8d6e0; border-radius: 30px; }
.lens-sample--treated .sample-heading > span:first-child { color: #fff; background: #1e6a94; border-color: #1e6a94; }
.sample-heading > span:last-child { color: #648298; font-size: 10px; font-weight: 400; }
.lens-display { position: relative; display: grid; place-items: center; aspect-ratio: 1.2; perspective: 850px; transform: scale(var(--lens-zoom, 1)); transition: transform .15s ease-out; }
.glass-disc { position: relative; width: 82%; aspect-ratio: 1; border-radius: 50%; transform-style: preserve-3d; transform: rotateY(var(--rotation)) rotateX(var(--tilt, -7deg)); }
.glass-back { position: absolute; inset: 0; border-radius: 50%; border: 7px solid #a9c4d4; background: #dbeaf3; transform: translateZ(-14px); box-shadow: 0 0 0 1px #719cb4, inset 0 0 16px #4d7b9566; }
.glass-scene { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; background: #d9eaf5; transform: translateZ(1px); }
.lens-landscape { position: absolute; width: 120%; max-width: none; height: 110%; left: -10%; top: -5%; object-fit: cover; object-position: 60% center; transform: translateX(var(--scene-shift)) scale(1.04); pointer-events: none; }
.lens-reading { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; background: #f8fbff; color: #163b56; transform: translateX(var(--scene-shift)) scale(1.04); opacity: 0; }
.lens-reading > span { font-size: 7px; letter-spacing: 1.8px; }
.lens-reading > strong { font-size: clamp(30px,4.2vw,62px); line-height: 1.05; font-weight: 500; letter-spacing: -2px; text-align: center; }
.lens-lab[data-scene="reading"] .lens-reading { opacity: 1; }
.lens-lab[data-scene="reading"] .lens-landscape { opacity: 0; }
.glass-surface { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ffffffc4; background: radial-gradient(ellipse at 28% 16%,#fff9,transparent 52%), linear-gradient(145deg,#ffffff30,transparent 44%,#b1cbd938); box-shadow: inset 5px 3px 9px #fff9,inset -6px -5px 14px #406b8c55,0 0 0 1px #789db380; transform: translateZ(5px); }
.glass-glint { position: absolute; inset: 5px; overflow: hidden; border-radius: 50%; transform: translateZ(6px); }
.glass-glint::before { content: ''; position: absolute; inset: -60%; background: linear-gradient(118deg,transparent 32%,#ffffff35 40%,#fffffff0 48%,#ffffffa0 54%,transparent 67%); transform: translateX(var(--glare-shift)); opacity: var(--glare-opacity); }
.lens-sample--treated .glass-glint::before { background: linear-gradient(118deg,transparent 35%,#61caff20 45%,#95ddff65 49%,#abcfff20 52%,transparent 59%); opacity: .6; }
.lens-sample--treated .glass-surface { background: linear-gradient(135deg,#66c9ff12,transparent 40%,#7bafff15); box-shadow: inset 3px 3px 7px #ffffffb0,inset -4px -4px 9px #247cab40,0 0 0 1px #539ac175; }
.glass-edge { position: absolute; inset: -1px; border-radius: 50%; border: 3px solid #e9f7ff9c; box-shadow: inset 0 0 0 1px #547c9560; transform: translateZ(8px); }
.lens-shadow { position: absolute; bottom: 5%; left: 20%; width: 60%; height: 9%; border-radius: 50%; background: #163b561b; filter: blur(10px); }
.sample-caption { text-align: center; font-size: 11px; color: #526f85; }
.lab-controls { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; align-items: center; padding: 26px 58px; border-top: 1px solid #cfdfeb; background: #f5f9fc; }
.lens-control { min-width: 0; }
.lens-control label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.lens-control output { font-variant-numeric: tabular-nums; color: #1e6a94; }
.lens-control input { width: 100%; height: 32px; margin: 7px 0 0; accent-color: #1e6a94; cursor: pointer; }
.lens-control > span { display: block; font-size: 10px; color: #526f85; }
.lens-reset { display: flex; align-items: center; gap: 18px; padding: 12px 16px; min-height: 44px; border: 1px solid #b7d0e1; border-radius: 5px; background: transparent; color: var(--ink); font-size: 12px; }
.lens-reset:hover { background: #e1eff8; }
.lens-reset span { font-size: 22px; }
.lens-position-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lens-position-presets button { border: 1px solid #b7d0e1; background: transparent; color: var(--ink); border-radius: 5px; padding: 9px 11px; cursor: pointer; font-size: 12px; font-weight: 600; }
.lens-position-presets button:hover,.lens-position-presets button:focus-visible { background: #e1eff8; color: #1e7198; }
.lab-note { font-size: 10px; color: #526f85; text-align: center; padding: 0 20px 20px; background: #f5f9fc; }
.experience-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; font-size: 12px; color: var(--muted); }
.experience-footer .text-link { margin: 0; flex-shrink: 0; color: var(--ink); }
@media (max-width: 1100px) {
    .lens-experience { padding-inline: 28px; }
    .lens-comparison { padding-inline: 28px; }
    .lab-controls { padding-inline: 28px; gap: 24px; }
}
@media (max-width: 760px) {
    .lens-experience { padding: 58px 20px 12px; }
    .experience-heading { display: block; }
    .experience-heading > p { margin-top: 22px; max-width: 420px; }
    .lab-toolbar { padding: 16px; flex-wrap: wrap; gap: 14px; }
    .lab-heading { font-size: 8px; letter-spacing: 1px; }
    .scene-switch button { padding: 7px 14px; }
    .lab-instruction { font-size: 10px; margin-top: 18px; }
    .desktop-hint { display: none; }
    .lens-comparison { gap: 10px; padding: 10px 12px 22px; }
    .lens-sample { padding: 10px 6px 14px; }
    .sample-heading { justify-content: center; font-size: 9px; }
    .sample-heading > span:first-child { padding: 4px 8px; }
    .sample-heading > span:last-child { display: none; }
    .lens-display { aspect-ratio: .9; }
    .glass-disc { width: 94%; }
    .glass-back { border-width: 4px; transform: translateZ(-9px); }
    .glass-edge { border-width: 2px; }
    .lens-reading { gap: 5px; }
    .lens-reading > span { font-size: 4px; letter-spacing: .8px; }
    .lens-reading > strong { font-size: clamp(19px,5vw,38px); letter-spacing: -.8px; }
    .sample-caption { font-size: 9px; padding: 0 3px; }
    .lab-controls { grid-template-columns: 1fr 1fr; padding: 20px 16px; gap: 20px 18px; }
    .lens-control label { font-size: 10px; }
    .lens-control > span { font-size: 9px; }
    .lens-reset { grid-column: 1/-1; justify-self: center; }
    .lab-note { font-size: 9px; }
    .experience-footer { display: block; font-size: 11px; }
    .experience-footer .text-link { margin-top: 12px; }
}

/* Separate front, rear and glass cross-sections retain volume through a full turn. */
 .glass-wall {
    position: absolute;
    left: 48.3%;
    top: calc(50% - 14px);
    width: 3.4%;
    height: 28px;
    background: linear-gradient(to bottom, #e2f0fa, hsl(205 25% var(--wall-light)) 22%, hsl(205 25% var(--wall-light)) 80%, #c5dbe9);
    transform: translateZ(-2px) rotateZ(var(--segment)) translateY(calc(-1 * var(--glass-radius, 160px))) rotateX(90deg);
}
.glass-back {
    transform: translateZ(-16px) rotateY(180deg);
    backface-visibility: hidden;
    background: radial-gradient(ellipse at 30% 20%, #eef7fc 0%, #b4cbdc 48%, #7896ad 100%);
    border: 2px solid #d9eaf5;
    box-shadow: inset 0 0 14px #53768c66, 0 0 0 1px #789db3;
}
.glass-back::after {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: linear-gradient(125deg, transparent 25%, #ffffff90 45%, transparent 62%);
    transform: translateX(var(--glare-shift));
    opacity: .45;
}
.glass-back { overflow: hidden; }
.glass-scene { transform: translateZ(9px); }
.glass-surface { transform: translateZ(10px); }
.glass-glint { transform: translateZ(11px); }
.glass-edge { transform: translateZ(12px); }
.glass-scene, .glass-surface, .glass-glint, .glass-edge { backface-visibility: hidden; }

.lens-mesh { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.has-lens-mesh .lens-mesh { display: block; }
.has-lens-mesh .glass-disc { visibility: hidden; }
.lens-geometry-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 58px 0; }
.lens-shape-switch { display: flex; gap: 8px; }
.lens-shape-switch button { min-height: 58px; padding: 10px 18px; color: var(--ink); background: #f5f9fc; border: 1px solid #b7d0e1; border-radius: 6px; text-align: left; font-size: 12px; font-weight: 600; }
.lens-shape-switch button span { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; }
.lens-shape-switch button[aria-pressed="true"] { border-color: #1e6a94; box-shadow: inset 0 0 0 1px #1e6a94; background: #dceef9; }
.lens-shape-switch button:hover { background: #dceef9; }
.lens-outline-group { display: flex; flex-direction: column; gap: 8px; }
.lens-outline-label { font-size: 11px; font-weight: 600; }
.lens-outline-switch { display: flex; gap: 8px; }
.lens-outline-switch button { min-height: 58px; padding: 10px 18px; color: var(--ink); background: #f5f9fc; border: 1px solid #b7d0e1; border-radius: 6px; text-align: left; font-size: 12px; font-weight: 600; }
.lens-outline-switch button span { display: block; font-size: 10px; font-weight: 400; margin-top: 3px; }
.lens-outline-switch button[aria-pressed="true"] { border-color: #1e6a94; box-shadow: inset 0 0 0 1px #1e6a94; background: #dceef9; }
.lens-outline-switch button:hover { background: #dceef9; }
.material-control { display: flex; align-items: center; gap: 14px; }
.material-control label { font-size: 11px; font-weight: 600; }
.material-control select { min-height: 44px; padding: 8px 12px; background: #f5f9fc; border: 1px solid #b7d0e1; color: var(--ink); border-radius: 5px; font-size: 16px; }
.sample-material-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px; }
.sample-material-control label { font-size: 11px; font-weight: 600; color: #526f85; }
.sample-material-control select { min-height: 38px; padding: 6px 10px; background: #fff; border: 1px solid #b7d0e1; color: var(--ink); border-radius: 5px; font-size: 14px; }
.lens-lab[data-scene="comparison"] .sample-material-control { display: none; }
@media(max-width:760px) {
    .lens-geometry-controls { padding: 18px 16px 0; flex-wrap: wrap; gap: 16px; }
    .lens-shape-switch { width: 100%; }
    .lens-shape-switch button { flex: 1; padding: 10px; font-size: 11px; }
    .lens-shape-switch button span { font-size: 9px; }
    .material-control { width: 100%; justify-content: space-between; }
    .scene-switch button { padding-inline: 10px; }
    .sample-material-control label { font-size: 10px; }
    .lens-outline-group { width: 100%; }
    .lens-outline-switch { width: 100%; }
    .lens-outline-switch button { flex: 1; padding: 10px; font-size: 11px; }
    .lens-outline-switch button span { font-size: 9px; }
}
.vision-map,.bifocal-segment,.treatment-label,.prescription-label{display:none;position:absolute;z-index:8;pointer-events:none}.lens-lab[data-scene="comparison"] .vision-map{display:flex}.vision-map{inset:18% 17%;flex-direction:column;justify-content:space-between;transform:translateZ(28px)}.vision-map span{display:grid;place-items:center;height:27%;border-top:1px dashed #fff;border-bottom:1px dashed #fff;color:#fff;text-shadow:0 1px 4px #163b56;font-size:clamp(9px,1.1vw,15px);font-weight:800;letter-spacing:1px}.lens-lab[data-scene="comparison"] .bifocal-segment{display:block;bottom:29%;left:24%;right:24%;padding:9px;border-top:2px solid #fff;border-bottom:1px dashed #fff;color:#fff;text-align:center;text-shadow:0 1px 3px #163b56;font-size:10px}.lens-lab[data-scene="comparison"] .lens-sample--standard .vision-map--progressive{display:flex}.lens-lab[data-scene="comparison"] .lens-sample--treated .vision-map--occupational{display:flex}.lens-lab[data-scene="reading"] .prescription-label{display:block;top:42%;left:36%;color:#fff;text-align:center;font-weight:800;text-shadow:0 1px 4px #163b56;font-size:15px}.lens-lab[data-scene="treatments"] .treatment-label{display:block;top:42%;left:20%;right:20%;padding:8px;border:1px solid #fff;border-radius:20px;color:#fff;text-align:center;font-size:10px;font-weight:800;text-shadow:0 1px 3px #163b56}.lens-lab[data-scene="treatments"] .lens-sample--treated .glass-surface{background:linear-gradient(135deg,#48a6e966,#b6edff22 45%,#6c7cff55)}.lens-lab[data-scene="treatments"] .lens-sample--standard .glass-surface{background:linear-gradient(135deg,#ffffff44,#e2b15d44 48%,#85ccff44)}.lens-lab[data-scene="treatments"] .treatment-label{content:attr(data-treatment)}.prescription-controls{display:grid;grid-template-columns:1fr 1fr 220px;gap:24px;padding:20px 58px;border-top:1px solid #cfdfeb;background:#f5f9fc}.prescription-controls label{font-size:11px;font-weight:600}.prescription-controls output{float:right;color:#1e6a94}.prescription-controls input{display:block;width:100%;accent-color:#1e6a94}.prescription-controls select{display:block;width:100%;min-height:34px;margin-top:6px;border:1px solid #b7d0e1;background:#fff;color:#163b56;border-radius:4px}@media(max-width:760px){.prescription-controls{grid-template-columns:1fr 1fr;padding:18px 16px;gap:15px}.prescription-controls label:last-child{grid-column:1/-1}.lens-lab[data-scene="comparison"] .vision-map{inset:19% 10%}.vision-map span{font-size:8px}}
.lens-lab[data-scene="prescription"] .prescription-label{display:block;top:42%;left:36%;color:#fff;text-align:center;font-weight:800;text-shadow:0 1px 4px #163b56;font-size:15px}
.lens-lab[data-treatment="blue"] .glass-surface{background:linear-gradient(135deg,#3e9cf644,#bceaff22 48%,#5572ff55)}.lens-lab[data-treatment="photo"] .glass-surface{background:linear-gradient(135deg,#ffffff22,#78899e99 52%,#273d5d99)}.lens-lab[data-treatment="polar"] .glass-surface{background:linear-gradient(125deg,#263c6188,#6bb9e666 50%,#163b5688)}.lens-lab[data-treatment="uv"] .glass-surface{background:linear-gradient(135deg,#fff8,#c7e8ff33 50%,#70b8dd44)}
.scene-switch{flex-wrap:wrap}.scene-switch button{white-space:nowrap}.lens-lab[data-scene="prescription"] .lens-reading{opacity:0}.lens-lab[data-scene="prescription"] .lens-landscape{opacity:.25}
.vision-map{transform:rotateY(var(--rotation,30deg)) rotateX(var(--tilt,-7deg)) translateZ(28px)}.lens-lab[data-treatment]:not([data-treatment="none"]) .lens-display::after{content:'';position:absolute;inset:10%;border-radius:50%;pointer-events:none;z-index:7;opacity:.32}.lens-lab[data-treatment="blue"] .lens-display::after{background:#4ebcff55}.lens-lab[data-treatment="photo"] .lens-display::after{background:#344b6b66}.lens-lab[data-treatment="polar"] .lens-display::after{background:#285b8c66}.lens-lab[data-treatment="uv"] .lens-display::after{background:#bceaff44}.lens-lab[data-treatment="ar"] .lens-display::after{background:linear-gradient(125deg,transparent 35%,#fff9 48%,transparent 60%)}
.lens-lab[data-scene="comparison"] .lens-sample--standard .sample-heading span:first-child{font-size:0}.lens-lab[data-scene="comparison"] .lens-sample--standard .sample-heading span:first-child::after{content:'PROGRESSIVA';font-size:10px}.lens-lab[data-scene="comparison"] .lens-sample--treated .sample-heading span:first-child{font-size:0}.lens-lab[data-scene="comparison"] .lens-sample--treated .sample-heading span:first-child::after{content:'OCUPACIONAL';font-size:10px}.lens-lab[data-scene="comparison"] .sample-caption{font-size:0}.lens-lab[data-scene="comparison"] .lens-sample--standard .sample-caption::after{content:'Longe • médio • perto';font-size:11px}.lens-lab[data-scene="comparison"] .lens-sample--treated .sample-caption::after{content:'Médio • perto';font-size:11px}
.lens-lab[data-scene="comparison"] .vision-map span{border-color:#d7f2ff;background:linear-gradient(90deg,#1e6a9466,#2a8fc733 50%,#1e6a9466);border-radius:45% 45% 10% 10%;height:25%}.lens-lab[data-scene="comparison"] .vision-map--progressive span:nth-child(1){clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}.lens-lab[data-scene="comparison"] .vision-map--progressive span:nth-child(2){clip-path:polygon(5% 0,95% 0,86% 100%,14% 100%)}.lens-lab[data-scene="comparison"] .vision-map--progressive span:nth-child(3){clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}.lens-lab[data-scene="comparison"] .vision-map--occupational span:first-child{height:37%;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}.lens-lab[data-scene="comparison"] .vision-map--occupational span:last-child{height:37%;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}.lens-lab[data-scene="comparison"] .lens-sample--standard .lens-display:before,.lens-lab[data-scene="comparison"] .lens-sample--treated .lens-display:before{position:absolute;top:8px;left:0;right:0;text-align:center;z-index:9;color:#fff;text-shadow:0 1px 4px #163b56;font-size:11px;font-weight:800;letter-spacing:1px}.lens-lab[data-scene="comparison"] .lens-sample--standard .lens-display:before{content:'PROGRESSIVA · 3 CAMPOS DE VISÃO'}.lens-lab[data-scene="comparison"] .lens-sample--treated .lens-display:before{content:'OCUPACIONAL · MÉDIO + PERTO'}