﻿/* ============================================================
   SKYTEX IDEAL — NEW REMAINDER SECTIONS (after locked #galimybes)
   Continues the locked white / navy / blue Skytex design system.
   No frameworks, no third-party runtime dependencies.
   ============================================================ */

/* ---- Integrations band ---- */
.integ-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    max-width: 1000px;
    margin: 0 auto;
}
.integ-panel {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}
.integ-panel__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-gray-900);
    margin-bottom: var(--sp-4);
    line-height: 1.3;
}
.integ-panel__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-brand-light);
    color: var(--c-brand);
    border-radius: var(--radius-sm);
}
.integ-panel__icon svg { width: 19px; height: 19px; }
.integ-panel__text {
    font-size: var(--fs-base);
    color: var(--c-gray-600);
    line-height: 1.7;
}
.integ-note {
    max-width: 840px;
    margin: var(--sp-6) auto 0;
    font-size: var(--fs-sm);
    color: var(--c-gray-400);
    text-align: center;
    line-height: 1.6;
}
.integ-cta { text-align: center; margin-top: var(--sp-8); }

/* ---- Proof / real customer testimonials ---- */
.proof-stats {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sp-12);
    flex-wrap: wrap;
    margin-bottom: var(--sp-12);
    text-align: center;
}
.proof-stats__num {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--c-brand-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.proof-stats__label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--c-gray-500);
    font-weight: 500;
    max-width: 220px;
    margin: var(--sp-2) auto 0;
    line-height: 1.5;
}
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    max-width: 1080px;
    margin: 0 auto;
}
.tquote {
    background: var(--c-white);
    border: none;
    border-radius: 16px;
    padding: var(--sp-8);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 10px 24px rgba(15, 23, 42, 0.08),
        0 18px 36px rgba(26, 54, 93, 0.06);
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.tquote:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 16px 32px rgba(15, 23, 42, 0.12);
}
.tquote__text {
    font-size: var(--fs-base);
    color: var(--c-gray-600);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
    margin: 0;
}
.tquote__text p { margin: 0; }
.tquote__author {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c-brand-dark);
    letter-spacing: 0.02em;
    margin-top: var(--sp-6);
}

/* ---- Steps section micro note ---- */
.steps-note {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-gray-500);
    margin-top: var(--sp-8);
    line-height: 1.6;
}

/* ---- Overflow insurance at narrow widths ---- */
/* The long phone text on the full-width ghost button must wrap instead of
   forcing horizontal scroll below ~340px (the base .btn is white-space:nowrap). */
.pricing-card__cta .btn--ghost {
    white-space: normal;
    line-height: 1.45;
    text-align: center;
}

/* ---- Responsive (keeps 320px width safe, no horizontal overflow) ---- */
@media (max-width: 980px) {
    .proof-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
    .integ-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}
@media (max-width: 768px) {
    .proof-stats { gap: var(--sp-8); }
    .proof-stats__num { font-size: var(--fs-2xl); }
    .integ-panel { padding: var(--sp-6); }
}

/* ---- Ads door (/en/start.html + /lt/start.html) ---- */
.nav--door .nav__cta { display: flex; }
.nav--door .nav__burger { display: none; }
.nav--door .nav__links { flex: 0 0 auto; justify-content: flex-end; gap: var(--sp-4); }
@media (max-width: 768px) {
    .nav--door .nav__cta,
    .nav--door .nav__cta.is-visible { display: flex !important; }
    .nav--door .nav-btn { padding: 0.45rem 0.9rem; font-size: var(--fs-sm); }
}

.door {
    padding: calc(78px + var(--sp-10)) var(--sp-6) var(--sp-16);
    text-align: center;
}
.door__inner { max-width: 720px; margin: 0 auto; }
.door__kicker {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-bottom: var(--sp-4);
}
.door__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--c-gray-900);
    margin-bottom: var(--sp-4);
    line-height: 1.2;
}
.door__sub {
    font-size: var(--fs-md);
    color: var(--c-gray-600);
    margin-bottom: var(--sp-6);
    line-height: 1.6;
}
.door__pricechip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    background: var(--c-brand-light);
    color: var(--c-brand-deeper);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    margin-bottom: var(--sp-8);
}
.door__pricechip strong { font-size: var(--fs-lg); }
.door__ctas { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.door__note { font-size: var(--fs-sm); color: var(--c-gray-500); }

.door-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    max-width: 1000px;
    margin: 0 auto;
}
.door-step {
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.door-step__n {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: var(--sp-3);
}
.door-step__title { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.door-step__text { font-size: var(--fs-sm); color: var(--c-gray-600); line-height: 1.6; }
.door-step__quote {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    color: var(--c-gray-800);
    font-style: italic;
}
.door-step img {
    margin-top: var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-gray-200);
}

.door-trust {
    display: flex;
    justify-content: center;
    gap: var(--sp-10);
    flex-wrap: wrap;
    text-align: center;
}
.door-trust__n { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--c-brand-dark); }
.door-trust__l { display: block; font-size: var(--fs-sm); color: var(--c-gray-500); max-width: 16rem; }

.door-foot {
    padding: var(--sp-10) var(--sp-6) var(--sp-16);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-gray-500);
}
.door-foot a { color: var(--c-gray-600); }
.door-sticky {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--c-gray-200);
    box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
    .door-steps { grid-template-columns: 1fr; }
    .door { padding-bottom: 5.5rem; }
    .door-sticky { display: block; }
    .door-sticky .btn { width: 100%; }
}

.reg {
    max-width: 28rem;
    margin: 0 auto;
    text-align: left;
    background: var(--c-white);
    border: 1px solid var(--c-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}
.reg label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-gray-800);
    margin-bottom: var(--sp-2);
}
.reg label + label,
.reg .reg__row { margin-top: var(--sp-5); }
.reg input,
.reg select {
    width: 100%;
    font: inherit;
    font-size: var(--fs-base);
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--c-gray-300);
    border-radius: var(--radius-sm);
    color: var(--c-gray-900);
    background: var(--c-white);
}
.reg input:focus,
.reg select:focus {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
    border-color: var(--c-brand);
}
.reg__hint { font-size: var(--fs-xs); color: var(--c-gray-500); font-weight: 400; margin-top: var(--sp-1); }
.reg__check { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); font-size: var(--fs-sm); font-weight: 400; color: var(--c-gray-700); }
.reg__check input { width: auto; margin-top: 0.2rem; }
.reg button { margin-top: var(--sp-6); }
.reg__err, .reg__refuse { display: none; font-size: var(--fs-sm); color: #b42318; margin-top: var(--sp-3); }
.reg__ok { display: none; font-size: var(--fs-sm); color: var(--c-gray-700); line-height: 1.6; margin-top: var(--sp-4); }
.reg.is-refused .reg__refuse { display: block; }
.reg.is-ok form { display: none; }
.reg.is-ok .reg__ok { display: block; }