/* =============================================================================
   optimal-custom.css — Papildomi stiliai optimal.lt svetainei
   ============================================================================= */

/* ─── Navigation ────────────────────────────────────────────────────────────── */
/* The logos carry width/height attributes (against layout shift); max-width scales them, so keep the ratio. */
.logo img.svg-logo,
.footer-logo img {
    height: auto;
}
.pxp-nav > li.list-inline-item:not(.pxp-is-last) {
    margin-right: 2.4rem;
}

/* ─── Hero ──────────────────────────────────────────────────────────────────── */

/* WebP with a JPEG fallback; phones get a 640px-wide portrait crop instead of the 1920px photo.
   The front page preloads the same files (optimal_preload_hero in functions.php). */
.opt-hero-bg {
    background-image: url(../images/header/programuotojas-dirba-1920x1100.jpg);
    background-image: image-set(url(../images/header/programuotojas-dirba-1920x1100.webp) type("image/webp"), url(../images/header/programuotojas-dirba-1920x1100.jpg) type("image/jpeg"));
}
@media (max-width: 767px) {
    .opt-hero-bg {
        background-image: url(../images/header/programuotojas-dirba-640x1100.jpg);
        background-image: image-set(url(../images/header/programuotojas-dirba-640x1100.webp) type("image/webp"), url(../images/header/programuotojas-dirba-640x1100.jpg) type("image/jpeg"));
    }
}

/* Richer directional gradient — lets the photo breathe on the right */
.opt-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(8, 18, 36, 0.78) 0%,
        rgba(8, 18, 36, 0.55) 55%,
        rgba(8, 18, 36, 0.18) 100%
    );
}

/* Eyebrow badge */
.opt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50px;
    padding: 7px 20px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 28px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.opt-hero-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1a5fa5;
    flex-shrink: 0;
    animation: opt-pulse 2.2s ease-in-out infinite;
}
@keyframes opt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.65); }
}

/* Main heading */
.opt-hero-h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    margin-bottom: 0 !important;
    min-height: 1.2em; /* stabilise layout during typed animation */
}

/* Typed cursor accent */
.typed-cursor {
    color: #1a5fa5;
    font-weight: 300;
    opacity: 1;
    animation: opt-blink 0.75s step-start infinite;
}
@keyframes opt-blink {
    50% { opacity: 0; }
}

/* Subtitle */
.opt-hero-sub {
    font-size: 1.1rem;
    opacity: 0.82;
    max-width: 540px;
    line-height: 1.8;
    margin: 22px auto 0;
}

/* CTA row */
.opt-hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 36px;
}

/* Primary filled button */
.opt-btn-primary {
    display: inline-block;
    padding: 14px 38px;
    background: #1a5fa5;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 22px rgba(26, 95, 165, 0.38);
}
.opt-btn-primary:hover {
    background: #15508f;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(26, 95, 165, 0.52);
    color: #fff !important;
}

/* Ghost / outline button */
.opt-btn-ghost {
    display: inline-block;
    padding: 13px 32px;
    background: transparent;
    color: rgba(255, 255, 255, 0.90) !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.40);
    text-decoration: none !important;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}
.opt-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.10);
    color: #fff !important;
    transform: translateY(-2px);
}

/* Scroll indicator */
.opt-hero-scroll-hint {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.50);
    transition: color 0.3s ease;
    pointer-events: auto;
}
.opt-hero-scroll-hint:hover {
    color: rgba(255, 255, 255, 0.90);
}
.opt-scroll-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.opt-scroll-arrow {
    font-size: 0.85rem;
    animation: opt-bounce 2s ease-in-out infinite;
}
@keyframes opt-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(5px); }
}

/* Phones: let the hero grow with its content instead of a fixed 600px box */
@media (max-width: 767px) {
    .pxp-hero.opt-hero-wrap {
        height: auto !important;
        min-height: 100vh;
        padding: 120px 0 150px;
    }
    .opt-hero-wrap .pxp-hero-caption {
        position: relative;
        top: auto;
        transform: none;
    }
    .opt-hero-scroll-hint { display: none; }
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .opt-hero-badge   { font-size: 0.68rem; padding: 6px 15px; margin-bottom: 20px; }
    .opt-hero-h1      { min-height: 2.2em; } /* longer phrases wrap to 2 lines — avoid layout jumps */
    .opt-hero-sub     { font-size: 1rem; }
    .opt-hero-ctas    { flex-direction: column; gap: 10px; }
    .opt-btn-primary,
    .opt-btn-ghost    { width: 100%; text-align: center; }
}

/* ─── Shared section utilities ──────────────────────────────────────────────── */
.opt-section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1a5fa5;
    margin-bottom: 14px;
}
.opt-section-header {
    margin-bottom: 52px;
}
.opt-section-header h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 12px;
}
.opt-section-sub {
    font-size: 1rem;
    opacity: 0.65;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ─── Services section ───────────────────────────────────────────────────────── */

.opt-services-section {
    padding: 100px 0;
    position: relative;
    z-index: 2;
}
.opt-services-light {
    background: #fff;
}
.opt-services-light .opt-section-header h2 {
    color: #0f1f36;
}
.opt-services-light .opt-section-sub {
    color: #555;
    opacity: 1;
}

/* Service cards — flat white at rest, border+lift on hover, matches pxp-plans feel */
.opt-svc-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.10);
    padding: 48px 28px 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s ease-in-out;
}
.opt-svc-card:hover {
    box-shadow: 0px 20px 45px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}
/* Icon — open circle, large, no fill */
.opt-svc-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(26, 95, 165, 0.18);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #1a5fa5;
    margin-bottom: 28px;
    flex-shrink: 0;
    transition: all 0.4s ease-in-out;
}
.opt-svc-card:hover .opt-svc-icon-wrap {
    border-color: #1a5fa5;
    background: #1a5fa5;
    color: #fff;
    transform: scale(0.9);
}
.opt-svc-title {
    color: #1a2332;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 12px;
    transition: all 0.4s ease-in-out;
}
.opt-svc-text {
    color: #555;
    font-size: 0.875rem;
    line-height: 1.75;
    flex: 1;
    margin-bottom: 24px;
    transition: all 0.4s ease-in-out;
}
.opt-svc-link {
    color: #1a5fa5;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: auto;
}
.opt-svc-link:hover {
    color: #15508f;
    text-decoration: none;
}

/* Portfolio spacing — sits cleanly after services */
.opt-projektai-section {
    padding-top: 60px;
    padding-bottom: 80px;
}

/* ─── Stats ─────────────────────────────────────────────────────────────────── */
.opt-stats {
    background: #1a2332;
    color: #fff;
}
.opt-stats .container {
    padding-top: 20px;
    padding-bottom: 20px;
}
.opt-stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.opt-stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.65;
    margin-top: 0.5rem;
}
@media (max-width: 767px) {
    .opt-stats [class*="col-6"] { margin-bottom: 1.5rem; }
}
@media (max-width: 575px) {
    .opt-stat-number { font-size: 2rem; }
    .opt-stats { padding-top: 40px; padding-bottom: 40px; }
}

/* ─── CTA band (brand colour, replaces the repeated hero photo) ─────────────── */
.opt-cta-band {
    background: linear-gradient(120deg, #15508f 0%, #1a5fa5 55%, #2a78c4 100%);
    color: #fff;
    padding: 80px 0;
}
.opt-cta-band-title {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    margin-bottom: 12px;
}
.opt-cta-band-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 620px;
}
.opt-btn-light {
    display: inline-block;
    padding: 15px 38px;
    background: #fff;
    color: #1a5fa5 !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none !important;
    box-shadow: 0 6px 24px rgba(8, 18, 36, 0.25);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.opt-btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(8, 18, 36, 0.35);
}

/* ─── Project Cards ─────────────────────────────────────────────────────────── */
.opt-project-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-decoration: none !important;
    color: #1a2332;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.opt-project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.13);
    color: #1a2332;
}
/* Projects slider — equal-height slides, room for card shadows, brand nav */
/* Owl clips at .owl-stage-outer (overflow: hidden), so pad it on every side for the hover lift
   and shadow, and pull it back with negative margins so the cards stay aligned. The side room
   stays below the 30px slide margin (no peeking neighbour) and within the container gutter on
   phones (no horizontal scroll). */
.opt-projects-carousel .owl-stage-outer {
    padding: 20px 15px 44px;
    margin: -10px -15px -10px;
}
@media (min-width: 992px) {
    .opt-projects-carousel .owl-stage-outer {
        padding-left: 28px;
        padding-right: 28px;
        margin-left: -28px;
        margin-right: -28px;
    }
}
.opt-projects-carousel .owl-stage {
    display: flex;
}
/* Off-screen slides would show a sliver of shadow inside that side padding. */
.opt-projects-carousel .owl-item:not(.active) .opt-project-card {
    box-shadow: none;
}
.opt-projects-carousel .owl-item {
    display: flex;
}
.opt-project-slide {
    display: flex;
    width: 100%;
}
.opt-projects-carousel .owl-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}
.opt-projects-carousel .owl-nav button.owl-prev,
.opt-projects-carousel .owl-nav button.owl-next {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #1a5fa5;
    background: #fff;
    color: #1a5fa5;
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.opt-projects-carousel .owl-nav button.owl-prev:hover,
.opt-projects-carousel .owl-nav button.owl-next:hover {
    background: #1a5fa5;
    color: #fff;
}
.opt-projects-carousel .owl-nav button.disabled {
    opacity: 0.35;
    cursor: default;
}
.opt-projects-carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.opt-projects-carousel .owl-dots button.owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd8e3;
    transition: background 0.2s ease, width 0.2s ease;
}
.opt-projects-carousel .owl-dots button.owl-dot.active span {
    width: 26px;
    border-radius: 5px;
    background: #1a5fa5;
}
/* thumbnail */
.opt-project-card-thumb {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
    object-position: center top;
    background-color: #e8edf2;
    flex-shrink: 0;
    transition: transform 0.4s ease;
    overflow: hidden;
}
.opt-project-card:hover .opt-project-card-thumb {
    transform: scale(1.03);
}
/* body */
.opt-project-card-body {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.opt-project-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.opt-project-card-badge {
    display: inline-block;
    background: rgba(26,95,165,0.09);
    color: #1a5fa5;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 0.70rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: flex-start;
}
/* standalone badge (cards without meta wrapper) */
.opt-project-card-body > .opt-project-card-badge {
    margin-bottom: 10px;
}
.opt-project-card-press-chip {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #d0dce8;
    border-radius: 20px;
    font-size: 0.70rem;
    font-weight: 600;
    color: #767676;
    text-decoration: none !important;
    letter-spacing: 0.04em;
    transition: border-color 0.2s, color 0.2s;
}
.opt-project-card-press-chip::after {
    content: "\f08e";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 0.65rem;
}
.opt-project-card-press-chip:hover {
    color: #1a5fa5;
    border-color: #1a5fa5;
}
.opt-project-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a2332;
    margin-bottom: 8px;
    line-height: 1.3;
}
.opt-project-card-desc {
    font-size: 0.84rem;
    line-height: 1.6;
    color: #555;
    flex: 1;
    margin-bottom: 16px;
}
.opt-project-card-cta {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a5fa5;
    transition: opacity 0.2s;
}
.opt-project-card:hover .opt-project-card-cta {
    opacity: 0.75;
}
a.opt-project-card-cta {
    color: #1a5fa5;
    text-decoration: none !important;
}
.opt-project-card-press {
    margin-bottom: 16px;
}
.opt-project-card-press-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #767676;
    margin-bottom: 6px;
}

/* ─── Pricing — keep pxp animations, fix colors to match brand ──────────────── */
.opt-kainos-section {
    padding-top: 80px;
    padding-bottom: 80px;
}
/* Brand-blue hover border instead of harsh #333 */
.pxp-plans-1-item:hover {
    border: 2px solid #1a5fa5 !important;
}
/* Popular label — brand blue instead of black */
.pxp-plans-1-item-label {
    background-color: #1a5fa5 !important;
}
/* Popular plan stands out: brand border + slight lift on desktop */
.pxp-plans-1-item.pxp-is-popular {
    border: 2px solid #1a5fa5;
    box-shadow: 0 20px 45px rgba(26, 95, 165, 0.18);
}
@media (min-width: 992px) {
    .pxp-plans-1-item.pxp-is-popular { transform: scale(1.04); }
}
/* Touch tablets have no hover: show the CTA permanently and make room for it */
@media (hover: none) and (min-width: 768px) {
    .pxp-plans-1-item { padding-bottom: 100px; }
    .pxp-plans-1-item-cta {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* Phones: the template forces the hover state (dark borders, hidden label).
   Use a calm static layout instead. */
@media (max-width: 767px) {
    .pxp-plans-1-item,
    .pxp-plans-1-item:hover {
        padding: 40px 28px;
        border: 1px solid #dde3ea !important;
    }
    .pxp-plans-1-item.pxp-is-popular,
    .pxp-plans-1-item.pxp-is-popular:hover {
        border: 2px solid #1a5fa5 !important;
    }
    .pxp-plans-1-item .pxp-plans-1-item-fig,
    .pxp-plans-1-item:hover .pxp-plans-1-item-fig,
    .pxp-plans-1-item .pxp-plans-1-item-title,
    .pxp-plans-1-item:hover .pxp-plans-1-item-title,
    .pxp-plans-1-item .pxp-plans-1-item-features,
    .pxp-plans-1-item:hover .pxp-plans-1-item-features,
    .pxp-plans-1-item .pxp-plans-1-item-price,
    .pxp-plans-1-item:hover .pxp-plans-1-item-price,
    .pxp-plans-1-item .pxp-plans-1-item-label,
    .pxp-plans-1-item:hover .pxp-plans-1-item-label,
    .pxp-plans-1-item:hover .opt-pricing-extra {
        transform: none;
        opacity: 1;
    }
    .pxp-plans-1-item .pxp-plans-1-item-fig { margin-top: 0; margin-bottom: 1.2rem; }
    .pxp-plans-1-item-fig img { height: 72px; }
    .opt-pricing-extra { margin-top: 4px; }
    .pxp-plans-1-item .pxp-plans-1-item-cta,
    .pxp-plans-1-item:hover .pxp-plans-1-item-cta {
        position: static;
        display: inline-block;
        transform: none;
        opacity: 1;
        margin-top: 8px;
    }
}
/* CTA link — brand blue */
.pxp-plans-1-item-cta {
    color: #1a5fa5 !important;
}
/* Checkmark — brand blue */
.opt-feat-yes {
    color: #1a5fa5;
}
.opt-feat-no {
    color: #ccc;
}
.opt-feat-dim {
    color: #767676;
}
/* Extra line below price */
.opt-pricing-extra {
    font-size: 0.78rem;
    color: #767676;
    margin-top: -8px;
    margin-bottom: 12px;
    transition: all .4s ease-in-out;
}
.pxp-plans-1-item:hover .opt-pricing-extra {
    transform: translateY(-42px);
    transition-delay: .3s;
}

/* ─── Contact form ──────────────────────────────────────────────────────────── */
/* Floating labels: the label sits in the field and moves onto the border on focus or once the
   field has a value (placeholder=" " makes :placeholder-shown mean "empty"), so it never
   disappears while typing. Validation (inline script in front-page.php) runs when a field is
   left, not while typing, and clears as soon as the value is fixed. */
.opt-contact-sub {
    margin: 0;
}
.opt-contact-form-wrap {
    position: relative;
    background: #fff;
    border: 1px solid #e6e9ee;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(26, 35, 50, 0.08);
    padding: 40px;
}
.opt-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.opt-field-wide {
    grid-column: 1 / -1;
}
.opt-field {
    position: relative;
    margin-bottom: 22px;
    scroll-margin-top: 110px; /* focusing an invalid field must not hide it under the fixed header */
}
.opt-field input,
.opt-field textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: #1a2332;
    background: #fff;
    border: 1.5px solid #d5dae1;
    border-radius: 6px;
    padding: 22px 44px 8px 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.opt-field textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.55;
    padding-top: 26px;
}
.opt-field input:hover,
.opt-field textarea:hover {
    border-color: #b9c1cc;
}
.opt-field input:focus,
.opt-field textarea:focus {
    outline: none;
    border-color: #1a5fa5;
    box-shadow: 0 0 0 4px rgba(26, 95, 165, 0.12);
}
.opt-field label {
    position: absolute;
    left: 17px;
    top: 17px;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #6b7380;
    pointer-events: none;
    transform-origin: left top;
    transition: transform .2s ease, color .2s ease;
}
.opt-field input:focus + label,
.opt-field input:not(:placeholder-shown) + label,
.opt-field textarea:focus + label,
.opt-field textarea:not(:placeholder-shown) + label {
    transform: translateY(-10px) scale(.78);
    font-weight: 600;
    color: #4a5260;
}
.opt-field input:focus + label,
.opt-field textarea:focus + label {
    color: #1a5fa5;
}
.opt-req {
    color: #c0392b;
}
.opt-optional {
    color: #8a93a0;
    font-weight: 400;
}
.opt-field-hint {
    margin: 6px 2px 0;
    font-size: 0.82rem;
    color: #8a93a0;
}
.opt-field-error {
    margin: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 0.82rem;
    color: #c0392b;
    transition: max-height .2s ease, margin .2s ease;
}
/* Status icon at the right edge of the field */
.opt-field::after {
    position: absolute;
    right: 16px;
    top: 18px;
    font-family: FontAwesome;
    font-size: 1rem;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
}
.opt-field.is-valid::after {
    content: "\f00c";
    color: #1e8e5a;
    opacity: 1;
    transform: scale(1);
}
.opt-field.is-invalid::after {
    content: "\f071";
    color: #c0392b;
    opacity: 1;
    transform: scale(1);
}
.opt-field.is-invalid input,
.opt-field.is-invalid textarea {
    border-color: #c0392b;
}
.opt-field.is-invalid input:focus,
.opt-field.is-invalid textarea:focus {
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}
.opt-field.is-invalid label {
    color: #c0392b;
}
.opt-field.is-invalid .opt-field-error {
    max-height: 3em;
    margin-top: 6px;
}
.opt-field.is-invalid.opt-shake {
    animation: opt-shake .35s ease;
}
@keyframes opt-shake {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.opt-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 4px;
}
#opt-contact-submit .fa-paper-plane {
    margin-left: 8px;
    transition: transform .25s ease;
}
#opt-contact-submit:hover .fa-paper-plane {
    transform: translate(3px, -2px);
}
#opt-contact-submit:disabled {
    opacity: .75;
    cursor: wait;
    transform: none;
}
.opt-form-privacy {
    flex: 1 1 220px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6b7280;
}
.opt-form-privacy a {
    color: inherit;
    text-decoration: underline;
}
#opt-contact-response {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 6px;
    background: #fdecea;
    color: #8e2a1f;
    font-size: 0.9rem;
}
/* Success state replaces the form */
.opt-form-success {
    text-align: center;
    padding: 30px 10px;
    animation: opt-fade-up .45s ease both;
    outline: none;
}
.opt-success-check {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
}
.opt-success-check circle {
    stroke: #1e8e5a;
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: opt-draw .6s ease forwards;
}
.opt-success-check path {
    stroke: #1e8e5a;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: opt-draw .35s .5s ease forwards;
}
.opt-success-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a2332;
    margin-bottom: 8px;
}
.opt-success-text {
    color: #6b7280;
    margin-bottom: 26px;
}
#opt-contact-again {
    background: transparent;
    cursor: pointer;
}
#opt-contact-again:hover {
    background: #1a5fa5;
}
@keyframes opt-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes opt-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
    .opt-contact-form-wrap {
        padding: 26px 20px;
    }
    .opt-form-grid {
        grid-template-columns: 1fr;
    }
    #opt-contact-submit {
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .opt-field label,
    .opt-field::after,
    .opt-field-error,
    .opt-form-success,
    #opt-contact-submit .fa-paper-plane {
        transition: none;
        animation: none;
    }
    .opt-field.is-invalid.opt-shake {
        animation: none;
    }
    .opt-success-check circle,
    .opt-success-check path {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ─── Contact details ───────────────────────────────────────────────────────── */
.opt-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.opt-contact-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #1a2332;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.opt-contact-item-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}
.opt-contact-item-text strong {
    display: block;
    color: #222;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.opt-contact-item-text a {
    color: #333;
    text-decoration: none;
}
.opt-contact-item-text a:hover { text-decoration: underline; }

/* ─── Utilities ─────────────────────────────────────────────────────────────── */
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }

/* ─── About — Kas dirbs su jumis ────────────────────────────────────────────── */
.opt-about-section {
    padding: 90px 0;
    background: #f5f8fb;
}
.opt-about-photo {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 45px rgba(15, 31, 54, 0.15);
}
.opt-about-name {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #0f1f36;
    margin-bottom: 4px;
}
.opt-about-role {
    color: #1a5fa5;
    font-weight: 700;
    margin-bottom: 20px;
}
.opt-about-text {
    color: #444;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.opt-about-points li,
.opt-choice-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: #444;
    line-height: 1.6;
}
.opt-about-points .fa,
.opt-choice-list .fa {
    position: absolute;
    left: 0;
    top: 4px;
    color: #1a5fa5;
}

/* ─── Pricing — monthly plans and hourly help ───────────────────────────────── */
.opt-choice-badge {
    display: inline-block;
    background: #1a5fa5;
    color: #fff;
    border-radius: 50px;
    padding: 4px 11px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.opt-choice-list {
    margin-bottom: 26px;
    flex: 1;
}
.opt-btn-outline {
    display: inline-block;
    padding: 13px 34px;
    border: 2px solid #1a5fa5;
    border-radius: 4px;
    color: #1a5fa5 !important;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.25s ease, color 0.25s ease;
}
.opt-btn-outline:hover {
    background: #1a5fa5;
    color: #fff !important;
}
.opt-plans-subtitle {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f1f36;
    margin: 0 0 10px;
    scroll-margin-top: 100px;
}
.opt-plans-intro {
    max-width: 560px;
    margin: 0 auto 40px;
    color: #555;
    line-height: 1.7;
}

/* Plan cards — same rows in the same order in every card, so plans compare row by row */
.opt-plans {
    padding-top: 14px; /* room for the "Populiariausias" label */
}
.opt-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 34px 30px 30px;
}
.opt-plan-popular {
    border: 2px solid #1a5fa5;
    box-shadow: 0 20px 45px rgba(26, 95, 165, 0.14);
}
.opt-plan-label {
    position: absolute;
    top: -13px;
    left: 30px;
    background: #1a5fa5;
    color: #fff;
    border-radius: 50px;
    padding: 5px 13px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.opt-plan-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f1f36;
    margin-bottom: 4px;
}
.opt-plan-for {
    font-size: 0.9rem;
    color: #767676;
    margin-bottom: 18px;
}
.opt-plan-price {
    font-size: 2.3rem;
    font-weight: 900;
    color: #0f1f36;
    line-height: 1.2;
    margin-bottom: 18px;
}
.opt-plan-price small {
    font-size: 0.85rem;
    font-weight: 400;
    color: #767676;
}
.opt-plan-rows {
    margin: 0 0 26px;
    flex: 1;
}
.opt-plan-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid #edf0f4;
}
.opt-plan-row dt {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f1f36;
    margin: 0;
}
.opt-plan-row dt span {
    display: block;
    font-size: 0.76rem;
    font-weight: 400;
    color: #767676;
    line-height: 1.45;
    margin-top: 2px;
}
.opt-plan-row dd {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f1f36;
    text-align: right;
    max-width: 45%;
}
.opt-plan-row dd s {
    display: block;
    font-weight: 400;
    font-size: 0.78rem;
    color: #999;
}
.opt-plan-row dd .fa-check {
    color: #1a5fa5;
}
.opt-plan-cta {
    text-align: center;
}
.opt-plans-fit {
    color: #555;
    margin: 6px 0 22px;
}

/* Terms — normal-size facts right under the plans, not fine print */
.opt-plan-terms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
    margin: 0 0 60px;
    font-size: 0.9rem;
    color: #333;
}
.opt-plan-terms .fa {
    color: #1a5fa5;
    margin-right: 6px;
}

/* Hourly help — a separate, lighter band so it reads as a different kind of offer */
.opt-hourly {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 1.4fr auto;
    align-items: center;
    gap: 20px 40px;
    background: #f5f8fb;
    border-radius: 10px;
    padding: 34px 40px;
}
.opt-hourly-q {
    display: block;
    color: #767676;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.opt-hourly-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f1f36;
    margin-bottom: 4px;
}
.opt-hourly-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0f1f36;
    line-height: 1.2;
}
.opt-hourly-price small {
    font-size: 0.85rem;
    font-weight: 400;
    color: #767676;
}
.opt-hourly-list {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
}
.opt-hourly-list li {
    padding: 4px 0;
}
.opt-hourly-list .fa {
    color: #1a5fa5;
    margin-right: 8px;
}
.opt-audit-note {
    max-width: 760px;
    margin: 28px auto 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #767676;
}
@media (max-width: 991px) {
    .opt-hourly {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    .opt-hourly-cta { justify-self: start; }
}
@media (max-width: 767px) {
    .opt-plan-terms {
        flex-direction: column;
        align-items: flex-start;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 575px) {
    .opt-plan { padding: 30px 22px 24px; }
    .opt-hourly { padding: 26px 22px; }
    .opt-hourly-cta { justify-self: stretch; text-align: center; }
}

/* ─── New websites ──────────────────────────────────────────────────────────── */
.opt-sites-section {
    background: #f5f8fb;
    padding: 90px 0;
}
.opt-site-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 10px;
    padding: 32px;
}
.opt-site-featured {
    border: 2px solid #1a5fa5;
    box-shadow: 0 20px 45px rgba(26, 95, 165, 0.14);
}
.opt-site-featured .opt-choice-badge {
    margin-bottom: 12px;
}
.opt-site-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f1f36;
    margin-bottom: 8px;
}
.opt-site-price {
    font-size: 1.8rem;
    font-weight: 900;
    color: #0f1f36;
    line-height: 1.2;
}
.opt-site-price small {
    font-size: 0.85rem;
    font-weight: 400;
    color: #767676;
}
.opt-site-note {
    font-size: 0.85rem;
    color: #767676;
    margin: 4px 0 20px;
}
.opt-site-card .opt-choice-list {
    margin-bottom: 0;
}

/* ─── FAQ ───────────────────────────────────────────────────────────────────── */
.opt-faq-section {
    padding-top: 90px;
}
.opt-faq {
    max-width: 760px;
    margin: 0 auto;
}
.opt-faq details {
    border-bottom: 1px solid #e3e8ee;
    padding: 18px 0;
}
.opt-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f1f36;
    position: relative;
    padding-right: 32px;
}
.opt-faq summary::-webkit-details-marker { display: none; }
.opt-faq summary::after {
    content: "\f067";
    font-family: FontAwesome;
    position: absolute;
    right: 4px;
    top: 2px;
    font-size: 0.85rem;
    color: #1a5fa5;
}
.opt-faq details[open] summary::after { content: "\f068"; }
.opt-faq details p {
    margin: 12px 0 0;
    color: #555;
    line-height: 1.75;
}

@media (max-width: 575px) {
    .opt-site-card { padding: 28px 22px; }
    .opt-about-section, .opt-sites-section { padding: 60px 0; }
}

/* ─── Legal pages (Privatumo politika) ──────────────────────────────────────── */
.opt-legal {
    max-width: 880px;
    padding-top: 150px;
    padding-bottom: 90px;
    color: #4a5260;
    font-size: 1rem;
    line-height: 1.7;
}
.opt-legal h1 {
    margin-bottom: 8px;
}
.opt-legal-meta {
    color: #6b7280;
    font-size: 0.9rem;
}
.opt-legal-meta a,
.opt-legal section a {
    color: #1a5fa5;
}
.opt-legal h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2332;
    margin: 48px 0 14px;
}
.opt-legal h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2332;
    margin: 28px 0 10px;
}
.opt-legal ul {
    padding-left: 1.2rem;
}
.opt-legal-summary {
    background: #f3f7fb;
    border-left: 4px solid #1a5fa5;
    border-radius: 4px;
    padding: 20px 24px 8px;
    margin-top: 32px;
}
.opt-legal-summary h2 {
    margin-top: 0;
    font-size: 1.1rem;
}
.opt-legal-toc {
    margin-top: 32px;
    font-size: 0.95rem;
}
.opt-legal-toc ol {
    columns: 2;
    column-gap: 40px;
    padding-left: 1.2rem;
    margin: 0;
}
.opt-legal-toc a {
    color: #1a5fa5;
}
.opt-legal section {
    scroll-margin-top: 100px;
}
.opt-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 8px 0 16px;
}
.opt-legal-table th,
.opt-legal-table td {
    border: 1px solid #e2e5ea;
    padding: 10px 12px;
    vertical-align: top;
    text-align: left;
}
.opt-legal-table th {
    background: #f8f9fb;
    color: #1a2332;
    font-weight: 700;
}
.opt-legal-changes td:first-child {
    white-space: nowrap;
}
@media (max-width: 767px) {
    .opt-legal {
        padding-top: 110px;
    }
    .opt-legal-toc ol {
        columns: 1;
    }
    /* Tables become stacked cards, each cell labelled from data-label. */
    .opt-legal-table thead {
        display: none;
    }
    .opt-legal-table,
    .opt-legal-table tbody,
    .opt-legal-table tr,
    .opt-legal-table td {
        display: block;
        width: 100%;
    }
    .opt-legal-table tr {
        border: 1px solid #e2e5ea;
        border-radius: 4px;
        margin-bottom: 12px;
    }
    .opt-legal-table td {
        border: 0;
        border-bottom: 1px solid #eef0f3;
    }
    .opt-legal-table td:last-child {
        border-bottom: 0;
    }
    .opt-legal-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #8a93a0;
        margin-bottom: 2px;
    }
}

/* ─── Mobile menu ───────────────────────────────────────────────────────────── */
/* The open menu has a white background (a white bar at z-index 1040 covers the header):
   lift the logo above it and show it dark, like the sticky header does. */
.pxp-header.pxp-mobile .logo {
    position: relative;
    z-index: 1050;
}
.pxp-header.pxp-mobile .logo img {
    filter: invert(100%);
}