:root {
    --coral: #FC8484;
    --coral-d: #FC8484;
    --coral-l: #fde8e7;
    --dark: #2b2b2b;
    --mid: #555;
    --light: #f9f9f9;
    --white: #ffffff;
    --purple: #7b5ea7;
    --radius: 14px;
    --orange: #FF8127;
    --orange-l: #ffe8de;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Geologica', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

.js-animations [data-animate] {
    opacity: 0;
}

.js-animations [data-animate].animate__animated {
    opacity: 1;
    animation-delay: var(--animate-delay, 0s);
    animation-duration: var(--animate-duration, 0.85s);
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
    .js-animations [data-animate] {
        opacity: 1;
    }

    .js-animations [data-animate].animate__animated {
        animation: none !important;
    }
}

/* Round 2 (09/09): διακριτικό scroll-reveal για μεγάλα mockup μπλοκ (kiosk) —
   μικρή άνοδος 40px + fade, αντί για τα ολόσωμα animate.css (backIn/fadeIn) που
   σε στήλες 400-500px μετακινούν το στοιχείο κατά όλο του το μέγεθος και
   φαίνονταν άγαρμπα στο σκρολάρισμα. Το main.js δίνει .gr-in όταν το στοιχείο
   γίνει ~25% ορατό. Το κρύψιμο ισχύει ΜΟΝΟ με ενεργό JS (.js-animations). */
.js-animations .gr-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s ease-out, transform .7s ease-out;
}

.js-animations .gr-reveal.gr-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-animations .gr-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Geologica', sans-serif;
}
.text-orange {
    color: var(--orange)!important;
}

.bg-orange {
    background: var(--orange)!important;
}

/* ─── NAVBAR ─── */
.navbar-brand span {
    color: var(--coral);
    font-weight: 900;
    font-size: 1.4rem;
}

.navbar {
    padding: 14px 0;
    background: var(--white) !important;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, .06); */
}

.nav-link {
    font-weight: 400;
    color: var(--dark) !important;
    font-size: .93rem;
}

.nav-link:hover {
    color: var(--coral) !important;
}

.btn-orange {
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 25px !important;
    font-weight: 400;
    font-size: .88rem;
    transition: background .2s, transform .15s;
}

.btn-orange:hover {
    background: var(--orange);
    color: #fff;
    transform: translateY(-1px);
}


.btn-coral {
    background: var(--coral);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 25px !important;
    font-weight: 400;
    font-size: .88rem;
    transition: background .2s, transform .15s;
}

.btn-coral:hover {
    background: var(--coral-d);
    color: #fff;
    transform: translateY(-1px);
}

.btn-coral-outline {
    border: 2px solid var(--coral);
    color: var(--coral);
    background: transparent;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 400;
    font-size: .88rem;
    transition: all .2s;
}

.btn-coral-outline:hover {
    background: var(--coral);
    color: #fff;
}

.btn-orange-outline {
    border: 2px solid var(--orange);
    color: var(--orange);
    background: transparent;
    border-radius: 50px;
    padding: 8px 22px;
    font-weight: 400;
    font-size: .88rem;
    transition: all .2s;
}

.btn-orange-outline:hover {
    background: var(--orange);
    color: #fff;
}

.mobile-nav-modal .modal-dialog {
    max-width: auto;
}

.mobile-nav-modal .modal-content {
    background: #f3f5f7;
    border: 0;
    border-radius: 10px;
    padding: 8px 10px 14px;
    box-shadow: 0 24px 56px rgba(10, 14, 27, .3);
}

.mobile-nav-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -8px;
}

.mobile-nav-close {
    border: 0;
    background: transparent;
    color: #8a8f98;
    font-size: 1.55rem;
    line-height: 1;
    padding: 4px;
}

.mobile-nav-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 10px 18px;
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-link {
    text-decoration: none;
    color: var(--dark);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
}

.mobile-nav-link:hover {
    color: var(--dark);
}

.mobile-nav-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}

.mobile-nav-toggle i {
    font-size: 1rem;
    color: #7b8292;
    transition: transform .2s ease;
}

.mobile-nav-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

#mobileServicesMenu {
    margin-top: 4px;
}

#mobileServicesMenu.collapse.show,
#mobileServicesMenu.collapsing {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

#mobileServicesMenu.collapsing {
    overflow: hidden;
}

#mobileServicesMenu .mobile-nav-sublink {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .24s ease, transform .24s ease;
}

#mobileServicesMenu.show .mobile-nav-sublink,
#mobileServicesMenu.collapsing .mobile-nav-sublink {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-sublink {
    text-decoration: none;
    color: #4c5b73;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    padding-left: 12px;
}

.mobile-nav-sublink:hover {
    color: #153f95;
}

.mobile-nav-footer {
    padding: 0 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* ίδιο μέγεθος και για τα δύο κουμπιά του mobile menu */
.mobile-nav-footer > div {
    width: auto !important;
}

.mobile-nav-footer .btn {
    width: 220px !important;
}

.mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6a34bb 0%, #3b3ab4 100%);
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
}

.mobile-nav-cta:hover {
    color: #fff;
}

@media (min-width: 992px) {
    .mobile-nav-modal {
        display: none !important;
    }
}

/* ─── HERO ─── */
.hero {
    /* min-height: 88vh; */
    /* background: linear-gradient(135deg, #fff6f5 0%, #fff 60%); */
    display: flex;
    align-items: center;
    padding: 0px;
}

.hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--dark);
}

.hero h1 span.gradient {
    background: linear-gradient(90deg, var(--coral), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero h1 span {
    color: var(--coral);
}

.hero p {
    color: var(--mid);
    font-size: 1.35rem;
    line-height: 1.7;
    max-width: 480px;
    font-weight: 100;
}

.hero a.btn-coral{
    font-size: 1rem;
}

.hero .badge-pill {
    display: inline-block;
    background: var(--coral-l);
    color: var(--coral);
    border-radius: 50px;
    padding: 5px 16px;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: .5px;
}

.hero-mockup {        
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--coral);
    font-weight: 700;
    margin: auto;
}

.hero-mockup i {
    font-size: 3rem;
    display: block;
    margin-bottom: 8px;
}

/* ─── SECTION LABELS ─── */
.section-label {
    font-size: .78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--coral);
    font-weight: 800;
    margin-bottom: 6px;
}

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 300;
}

.section-title strong {
    color: var(--coral);
    font-weight: 600!important;
}

.section-title span {
    color: var(--coral);
    font-weight: 400;
}

.section-sub {
    color: var(--mid);
    font-size: .97rem;
    line-height: 1.7;
    font-weight: 200;
}

/* ── QR CTA Card (index5) ── */
.qr-cta-section {
    padding: 80px 0;
    background: var(--white);
}

.qr-cta-card {
    border: 1.5px solid #e4e4e4;
    border-radius: 24px;
    padding: 60px 50px;
}

.qr-cta-mockup {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--coral);
}

.qr-cta-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 500;
    color: var(--dark);
    line-height: 1.4;
}

.qr-cta-badge {
    display: inline-block;
    background: var(--coral);
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: .5em;
}

.qr-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.qr-cta-feat h6 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.qr-cta-feat p {
    font-size: 0.85rem;
    color: var(--mid);
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .qr-cta-card { padding: 40px 24px; }
    .qr-cta-mockup { width: 180px; height: 180px; }
}

@media (max-width: 575px) {
    .qr-cta-grid { grid-template-columns: 1fr; }
}

/* ── QR CTA Card (index5) ── */
.qr-cta-section {
    padding: 80px 0;
    background: var(--white);
}

.qr-cta-card {
    border: 1.5px solid #e4e4e4;
    border-radius: 24px;
    padding: 60px 50px;
}

.qr-cta-mockup {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--coral);
}

.qr-cta-title {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 500;
    color: var(--dark);
    line-height: 1.4;
}

.qr-cta-badge {
    display: inline-block;
    background: var(--coral);
    color: #fff;
    font-weight: 500;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 1.7em;
    /* margin-top: 8px; */
}

.qr-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.qr-cta-icon {
    font-size: 2rem;
    color: var(--coral);
    margin-bottom: 12px;
}

.qr-cta-feat h6 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.qr-cta-feat p {
    font-size: 0.85rem;
    color: var(--mid);
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .qr-cta-card { padding: 40px 24px; }
    .qr-cta-mockup { width: 180px; height: 180px; }
}

@media (max-width: 575px) {
    .qr-cta-grid { grid-template-columns: 1fr; }
}

/* ── QR Features Section (index5) ── */
.qr-features-section {
    padding: 90px 0;
    background: var(--white);
}

.qr-features-title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--dark);
}

.qr-features-title span {
    color: var(--coral);
}

.qr-feature-list {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.qr-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.qr-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

.qr-feature-item h6 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}

.qr-feature-item p {
    font-size: 1.1rem;
    color: var(--mid);
    line-height: 1.65;
    margin-bottom: 0;
    font-weight:200;
}

@media (max-width: 991px) {
    .qr-features-section { padding: 60px 0; }
    .qr-features-title { font-size: 2.2rem; }
}

/* ── QR Flow Cards (index5) ── */
.qr-flow-section {
    padding: 80px 0;
    background: var(--white);
}

.qr-flow-card {
    background: var(--coral);
    border-radius: 20px;
    padding: 36px 28px;
    color: #fff;
    height: 100%;
}

.qr-flow-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.9;
}

.qr-flow-card h5 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #fff;
}

.qr-flow-card p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .qr-flow-section { padding: 60px 0; }
}

/* ─── HOW IT WORKS ─── */
.how-section {
    background: var(--white);
    padding: 0px 0px 60px 0px;
}

/* ── POS Showcase ── */
.pos-showcase {
    position: relative;
    min-height: 420px;
}

.pos-device img {
    display: block;
}

.pos-device-1 {
    position: absolute;
    left: 0;
    top: -35%;
    width: 100%;
    z-index: 1;
}

.pos-device-2 {
    position: absolute;
    right: 10%;
    top: 10%;
    width: 48%;
    z-index: 2;
}

.pos-cta-text {
    font-size: 1.2rem;
    color: var(--dark);  
    font-weight: 200;  
}

.pos-cta-text strong {
    color: var(--coral);
    font-size: 1.3rem;
    font-weight: 600;
}

.pos-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pos-feature-card {
    display: flex;
    gap: 16px;
    padding: 28px 24px;
    border: 1px solid #eee;
    /* border-bottom: none; */
    background: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

.pos-feature-card {
    border-radius: var(--radius);
}


.pos-feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.pos-feature-icon i {
    color: var(--coral);
    font-size: 1.2rem;
}

.pos-feature-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 8px;
}

.pos-feature-card p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.6;
    margin: 0;
    font-weight: 200;
}

@media (max-width: 991.98px) {
    .pos-showcase {
        min-height: 300px;
        /* margin-bottom: 40px; */
    }

    .pos-cta-text{
        margin-top:0px!important;
    }

    .how-section .section-title {
        line-height: 30px!important;
    }

    .steps-section .g-4{
        gap: 3rem !important;
    }

    .ideal-section{
        padding: 40px 0!important;
    }

    .ideal-section .section-title{
        text-align: center;
        margin-bottom: 40px;
    }

    .clearfix{
        height: 15vh;
    }

    .einvoice-section{
        padding: 50px 0px 0px 0px!important;
    }

    .einvoice-section img{
        width: 100%;
        height: auto;
    }

    .einvoice-carousel .owl-nav{
        left: 38% !important;
        right: 35% !important;
        top:90%!important;
    }
    .einvoice-carousel .owl-nav button{
        background-color: var(--orange)!important;
        color: var(--white)!important;
        border-radius: 50px!important;
        width: 36px!important;
        height: 36px!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
        font-size: 1.2rem!important;
    }

    .einvoice-carousel .owl-nav button:hover, .einvoice-carousel .owl-nav button:focus{
        background-color: var(--orange)!important;
        color: var(--white)!important;
    }

    .kiosk-stat-lbl{
        font-size: 1.1rem!important;
    }

    .kiosk-stat-num{
        font-size: 2.5rem!important;
    }

    .kds-section{
        padding: 0px 0!important;
    }

    .realtime-section{
        padding: 90px 0 0px!important;
    }

    .qr-features-title{
        text-align: center;
        margin-bottom: 40px;
    }

    .qr-cta-title{
        margin-bottom: -10px;
    }

    .stats-section{
        padding: 0px 0!important;
    }

    .stats-section .section-sub{
        margin-top: 3.5rem!important;
    }

    .solutions-section, .semantic-section{
        padding: 0px 0px 80px 0px!important;
    }

    .how-section{
        padding: 40px 0px 40px 0px!important;
    }

    .feature-section .row{
        padding: 0px 15px!important;
    }

    .feature-section img{
        height:400px;
    }
}

/* ── How It Works Steps ── */
.steps-section {
    padding: 60px 0 80px;
    background: var(--white);
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-text h6 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.step-text p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.5;
    margin: 0;
}

/* ── Ideal For Section ── */
.ideal-section {
    padding: 80px 0;
    background: var(--white);
}

.ideal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ideal-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 0;
}

.ideal-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--coral);
    font-size: 1.1rem;
}

.ideal-item h6 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 4px;
}

.ideal-item p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.5;
    margin: 0;
}

/* ── Curved Flow Timeline ── */
.flow-section {
    background: #fff;
    padding: 108px 0;
    overflow: hidden;
}

.flow-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

.flow-title-col h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    font-weight: 600;
    color: #101014;
    margin: 0;
}

.flow-track {
    position: relative;
    min-height: 420px;
}

.flow-line {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100%;
    left: -100px;
    top: 0;
}

.flow-step {
    position: absolute;
    width: 35%;
    max-width: 290px;
    z-index: 1;
}

.flow-step h3 {
    position: relative;
    z-index: 1;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--orange);
    margin: 0 0 10px;
    font-weight: 600;
    margin-top: 25px;
}

.flow-step p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .83rem;
    line-height: 1.5;
    color: #70747f;
    font-weight: 300;
}

.flow-dot {
    position: absolute;
    top: -44px;
    left: 12px;
    width: 30px;
    height: 30px;
    padding: 20px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}

.flow-dot-inner{
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: var(--orange);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flow-number {
    position: absolute;
    right: 48px;
    top: -47px;
    font-size: clamp(4.9rem, 10vw, 8rem);
    line-height: 1;
    font-weight: 700;
    color: rgba(16, 16, 20, .055);
    z-index: 0;
    pointer-events: none;
}

.flow-step-1 {
    left: 1.8%;
    top: 376px;
}

.flow-step-2 {
    left: 44.3%;
    top: 265px;
}

.flow-step-3 {
    left: 80.2%;
    top: 31px;
}

@media (max-width: 1199.98px) {
    .flow-shell {
        grid-template-columns: 180px 1fr;
        gap: 20px;
    }

    .flow-step {
        width: 32%;
    }

    .flow-step h3 {
        font-size: 1rem;
    }

    .flow-step p {
        font-size: .98rem;
    }
}

@media (max-width: 991.98px) {
    .flow-section {
        padding: 70px 0;
    }

    .flow-shell {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .flow-track {
        min-height: auto;
        padding-left: 60px;
    }

    .flow-track::before {
        content: "";
        position: absolute;
        left: 37px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: linear-gradient(to bottom, rgba(255, 129, 39, .95), rgba(255, 129, 39, .45));
    }

    .flow-line {
        display: none;
    }

    .flow-step {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: none;
        padding: 0 0 0 18px;
        margin-bottom: 34px;
    }

    .flow-step:last-child {
        margin-bottom: 0;
    }

    .flow-dot {
        left: -42px;
        top: 8px;
    }

    .flow-number {
        right: 0;
        top: -20px;
        font-size: 4rem;
        display: none;
    }
}

/* ── E-Invoicing Section ── */
.einvoice-section {
    padding: 80px 0;
    background: var(--white);
}

.einvoice-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.einvoice-checklist li {
    padding: 5px 0;
    font-size: .9rem;
    color: var(--dark);
}

.einvoice-checklist li i {
    color: var(--coral);
    margin-right: 8px;
}

.einvoice-circle {
    /* width: 380px;
    height: 380px; */
    /* border-radius: 50%;
    background: var(--coral); */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.einvoice-circle-orange {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.einvoice-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .einvoice-circle {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }
}

/* ── Stats Section ── */
.stats-section {
    background: var(--white);
    padding: 80px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 380px;
}

.stats-grid .stat-card:nth-child(2) {
    margin-top: -30px;
}

.stats-grid .stat-card:nth-child(3) {
    margin-bottom: -30px;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--coral);    
}

.stat-label {
    font-size: .9rem;
    color: var(--mid);
    margin-top: 4px;
}

@media (max-width: 991.98px) {
    .stats-grid {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ── Logo Carousel ── */
.logo-carousel .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0 10px;
}

.logo-carousel .logo-item img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.logo-carousel .logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.logo-carousel .logo-item img[src*="aek.png"] {
    max-height: unset;
    width: 65%;
}

.logo-carousel .logo-item img[src*="mezen.png"] {
    max-height: unset;
    width: 65%;
}

.logo-carousel .logo-item img[src*="almyra.png"] {
    max-height: unset;
    width: 100%;
}

.step-card {
    text-align: center;
    padding: 32px 24px;
    border-radius: var(--radius);
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--white);
    background-color: var(--coral);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.step-card h5 {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 8px;
}

.step-card p {
    font-size: .88rem;
    color: var(--mid);
    font-weight: 200;
}

.how-steps .step-col {
  position: relative;
}

@media (min-width: 768px) {
  .how-steps .step-col:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 52px;
    left: calc(50% + 34px);
    width: calc(100% - 68px);
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      rgba(252, 132, 132, .8) 0 5px,
      transparent 5px 11px
    );
  }

  .how-steps .step-icon {
    position: relative;
    z-index: 1;
  }
}

/* ── KDS Section ── */
.kds-section {
    padding: 90px 0;
    background: var(--white);
}

.kds-title {
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--dark);
}

.kds-title span {
    color: var(--orange);
}

.kds-sub {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--mid);
    font-weight: 200;
    max-width: 440px;
}

.kds-sub strong {
    color: var(--dark);
    font-weight: 600;
}

.kds-mockups {
    position: relative;
    min-height: 430px;
}

.kds-card {
    position: absolute;    
    overflow: hidden;
    width: 58%;
}

.kds-card img {
    width: 80%;
    display: block;
}

.kds-card-label {
    padding: 0px 18px;
    font-size: 1.2rem;
    color: var(--mid);
    font-weight: 400;
    width: fit-content;
}

.kds-card-label strong {
    color: var(--orange);
    font-weight: 500;
    font-size: 1.8rem;
}

.kds-card-kitchen {
    left: 0;
    top: 20px;
    z-index: 1;
}

.kds-card-bar {
    right: -30px;
    top: 100px;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .kds-mockups {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .kds-card {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
    }
}

/* ── Real Time Section ── */
.realtime-section {
    padding: 90px 0;
    background: var(--white);
}

.realtime-mockups {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.realtime-card {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
}

.realtime-card img {
    width: 100%;
    display: block;
}

.realtime-card-back {
    width: 56%;
    top: 0;
    left: 75px;
    z-index: 1;
}

.realtime-card-front {
    width: 56%;
    bottom: 12%;
    right: 15%;
    z-index: 2;
}

.realtime-title {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--dark);
}

.realtime-title span {
    color: var(--orange);
}

.realtime-sub {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--mid);
    font-weight: 200;
    max-width: 420px;
}

.realtime-sub strong {
    color: var(--dark);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .realtime-mockups {
        min-height: 320px;
        margin-bottom: 20px;
    }

    .realtime-card-back,
    .realtime-card-front {
        width: 55%;
    }

    .realtime-card-back img:first-child {
        width: 100%!important;
    }
    
    .realtime-card-front img {
        width: 90%!important;
    }


}

/* ── Kiosk Stats Bar (index4 only) ── */
.kiosk-stats-section {
    padding: 60px 0;
    background: var(--white);
}

.kiosk-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.kiosk-stat-item {
    flex: 1;
    text-align: center;
    padding: 0 40px;
}

.kiosk-stats-divider {
    width: 1px;
    height: 60px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.kiosk-stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--orange);
    line-height: 1;
}

.kiosk-stat-lbl {
    font-size: 0.9rem;
    color: var(--mid);
    margin-top: 10px;
    line-height: 1.45;
    font-weight:200;
}

@media (max-width: 767px) {
    .kiosk-stats-bar {
        flex-direction: column;
        gap: 32px;
    }
    .kiosk-stats-divider {
        width: 60px;
        height: 1px;
    }
    .kiosk-stat-item {
        padding: 0;
    }
}

/* ── Value / Analytics Section ── */
.value-section {
    padding: 90px 0;
    background: var(--white);
}

.value-title {
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--dark);
}

.value-title strong {
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--orange);
}

.value-sub {
    font-size: 1.1rem;
    color: var(--mid);
    line-height: 1.7;
    font-weight: 200;
}

.value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.value-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 500;
}

.value-list li i {
    color: var(--orange);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.value-img {
    max-width: 460px;
    width: 100%;
    border-radius: var(--radius);
}

@media (max-width: 991px) {
    .value-section { padding: 0px 0; }
    .value-img { max-width: 100%; }
}

/* ── KDS Section ── */
.kds-section {
    padding: 90px 0;
    background: var(--white);
}

.kds-title {
    font-size: clamp(1.9rem, 3.5vw, 2.7rem);
    font-weight: 500;
    line-height: 1.18;
    color: var(--dark);
}

.kds-title span {
    color: var(--orange);
}

.kds-sub {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--mid);
    font-weight: 200;
    max-width: 440px;
}

.kds-sub strong {
    color: var(--dark);
    font-weight: 600;
}

.kds-mockups {
    position: relative;
    min-height: 430px;
}

.kds-card {
    position: absolute;
    overflow: hidden;
    width: 58%;
}

.kds-card img {
    width: 80%;
    display: block;
}

.kds-card-label {
    padding: 00px 18px;
    font-size: 1.2rem;
    color: var(--mid);
    font-weight: 400;
    width: fit-content;
}

.kds-card-label strong {
    color: var(--orange);
    font-weight: 600;
    font-size: 1.8rem;
}

.kds-card-kitchen {
    left: 0;
    top: 20px;
    z-index: 1;
}

.kds-card-bar {
    right: -30px;
    top: 120px;
    z-index: 2;    
}

@media (max-width: 991.98px) {
    .kds-mockups {
        min-height: auto;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .kds-card {
        position: relative;
        width: 100%;
        top: auto;
        left: auto;
        right: auto;
        display: flex;
        flex-direction: column;
    }

    .kds-card img{
        width: 100%!important;
    }

    .kds-card-label{
        font-size: 1rem;
    }

}

/* ─── FEATURE ROWS ─── */
.feature-section {
    padding: 80px 0;
}

.feature-section p{
    font-weight: 200;
}
.feature-section.alt {
    background: var(--light);
}

.feature-img {    
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: var(--coral);
    font-weight: 700;
    text-align: center;
    max-width: 380px;
    margin: auto;
}

.feature-img i {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.feature-list li {
    padding: 6px 0 6px 28px;
    position: relative;
    font-size: .93rem;
    color: var(--mid);
}

.feature-list li::before {
    content: '\f058'; /* circle-check */
    font-family: 'Font Awesome 7 Pro';
    font-weight: 400;
    color: var(--coral);
    position: absolute;
    left: 0;
    top: 6px;
}

.feature-scroll-lines .scroll-line-list li {
  padding: 8px 0 8px 22px;
  font-weight: 200;
  color: #1f2024;
  transition: color .3s ease, font-weight .3s ease;
}

.feature-scroll-lines .scroll-line-list li::before {
  content: "";
  width: 2px;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: #d6d7dc;
  position: absolute;
  left: 0;
  top: 5px;
  transition: background-color .25s ease;
}

.feature-scroll-lines .scroll-line-list li.is-active-line::before {
  background: var(--coral);
}

.feature-scroll-lines .scroll-line-list li.is-active-line {
  font-weight: 500;
  color: var(--coral);
}

@media (min-width: 992px) {
  .feature-scroll-lines {
    min-height: var(--feature-lock-height, 220vh);
    padding-top: 0;
    padding-bottom: 0;
  }

  .feature-scroll-lines .feature-scroll-stage {
    position: sticky;
    top: 84px;
    min-height: calc(100vh - 84px);
    display: flex;
    align-items: center;
    background: var(--white);
    z-index: 2;
  }

  .feature-scroll-lines .feature-scroll-stage .row {
    width: 100%;
    min-height: calc(100vh - 84px);
    align-items: center;
  }

  .feature-scroll-lines .feature-scroll-panel {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding-right: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 132, 132, .45) transparent;
  }

  .feature-scroll-lines .feature-scroll-panel::-webkit-scrollbar {
    width: 6px;
  }

  .feature-scroll-lines .feature-scroll-panel::-webkit-scrollbar-thumb {
    background: rgba(252, 132, 132, .45);
    border-radius: 999px;
  }

  .feature-scroll-lines .feature-scroll-panel::-webkit-scrollbar-track {
    background: transparent;
  }
}

@media (max-width: 991.98px) {
  .feature-scroll-lines {
    min-height: auto;
  }

  .feature-scroll-lines .feature-scroll-stage {
    position: static;
  }

  .feature-scroll-lines .feature-scroll-panel {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

.feature-tag {
    display: inline-block;
    background: var(--coral-l);
    color: var(--coral);
    border-radius: 50px;
    padding: 3px 14px;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ─── Solutions Carousel ─── */
.solutions-section {
    padding: 80px 0;
    background: var(--white);
}

.solutions-section .badge-coral {
    background: var(--coral);
    color: var(--white);
    font-size: inherit;
    font-weight: inherit;
    padding: 10px 18px;
    border-radius: 30px;
    display: inline-block;
}

.solution-card {
    background: var(--coral);
    color: var(--white);
    border-radius: var(--radius);
    padding: 32px 28px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.solution-card h5 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.solution-card p {
    font-size: .9rem;
    font-weight: 200;
    line-height: 1.6;
    margin: 0;
}

/* Owl dots styling for solutions */
.solutions-carousel .owl-dots {
    text-align: left;
    margin-top: 30px !important;
}

.solutions-carousel .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #d6d7dc;
}

.solutions-carousel .owl-dots .owl-dot.active span {
    width: 32px;
    border-radius: 10px;
    background: var(--coral);
}

/* Owl nav arrows for solutions */
.solutions-carousel .owl-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
}

.owl-dots {
    z-index: -1!important;
    position: relative!important;
}

.solutions-carousel .owl-nav button.owl-prev,
.solutions-carousel .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d6d7dc !important;
    background: var(--white) !important;
    color: var(--dark) !important;
    font-size: 1rem;
    margin-left: 8px;
    transition: border-color .2s ease;
}

.solutions-carousel .owl-nav button.owl-prev:hover,
.solutions-carousel .owl-nav button.owl-next:hover {
    border-color: var(--coral) !important;
    color: var(--coral) !important;
}

.solutions-section .owl-stage-outer {
    overflow: visible;
}

.solutions-section .owl-carousel {
    overflow: hidden;
}

/* ─── Semantic Support Section ─── */
.semantic-section {
    padding: 80px 0;
    background: var(--white);
}

.semantic-section h2{
    font-weight: 600;
}

.semantic-images {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sem-img {
    border-radius: var(--radius);
    overflow: hidden;
}

.sem-img img {
    width: 70%;
    display: block;
}

.sem-img-1 {
    width: 55%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.sem-img-2 {
    width: 60%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.semantic-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.semantic-checklist li {
    padding: 6px 0;
    font-size: .95rem;
    color: var(--dark);
}

.semantic-checklist li i {
    color: var(--coral);
    margin-right: 10px;
    font-size: 1rem;
}

.semantic-stats {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e8e8e8;
    padding-top: 40px;
    margin-top: 20px;
}

.sem-stat {
    text-align: center;
    flex: 1;
}

.sem-stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
}

.sem-stat-label {
    font-size: .85rem;
    color: var(--mid);
    margin-top: 4px;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .semantic-images {
        min-height: 280px;
        margin-bottom: 20px;
    }

    .semantic-stats {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .sem-stat {
        flex: 0 0 40%;
    }
}

/* ─── SMART FEATURES GRID ─── */
.smart-section {
    padding: 80px 0;
}

.smart-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 12px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.smart-card:hover {
    border-color: var(--coral-l);
    box-shadow: 0 8px 28px rgba(244, 117, 107, .12);
    transform: translateY(-3px);
}

.smart-card .icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--white);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.smart-card h6 {
    font-size: 20px;
    margin-bottom: 6px;
    font-weight: 400;
}

.smart-card p {
    font-size: .95rem;
    color: var(--mid);
    font-weight: 200;
}

/* ── Simplify Grid ── */
.simplify-section {
    padding: 40px 0 100px;
    background: var(--white);
}

.simplify-card {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 40px 28px;
    text-align: center;
    height: 100%;
}

.simplify-card-orange {
    background: var(--white);
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: 40px 28px;
    text-align: center;
    height: 100%;
}

.simplify-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--coral-l);
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 18px;
}

.simplify-card h6 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--coral);
    margin-bottom: 10px;
}

.simplify-icon-orange {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--orange-l);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 18px;
}

.simplify-card-orange h6 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--orange);
    margin-bottom: 10px;
}

.simplify-card p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.6;
    margin: 0;
    font-weight: 200;
}

.simplify-card-orange p {
    font-size: .85rem;
    color: var(--mid);
    line-height: 1.6;
    margin: 0;
    font-weight: 200;
}

/* ─── PRICING BANNER ─── */
.pricing-banner {
    background: linear-gradient(135deg, var(--coral) 0%, #f0877d 100%);
    border-radius: 24px;
    padding: 10px 100px 0px 100px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.pricing-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.pricing-banner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.pricing-banner h2 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.pricing-banner h2 span {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
}

.pricing-banner p{
    color: rgba(255, 255, 255, .9);
    font-size: 1.45rem;
    font-weight: 200;
}

.pricing-banner p b{    
    font-weight: 600;
}

.pricing-banner .price {
    font-size: 2.2rem;
    font-weight: 900;
}

.pricing-banner .price small {
    font-size: 1rem;
    font-weight: 600;
    opacity: .85;
}

.btn-white {
    background: #fff;
    color: var(--coral);
    border: none;
    border-radius: 50px;
    padding: 12px 32px;
    font-weight: 800;
    font-size: .95rem;
    transition: transform .15s, box-shadow .15s;
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    color: var(--coral-d);
}

/* ─── Pricing Highlight (index2) ─── */
.pricing-highlight-section {
    padding: 80px 0;
}

.pricing-banner-app {
    position: relative;
    background: #ef7d83;
    border-radius: 25px;
    min-height: 320px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.pricing-banner-copy {
    max-width: 430px;
    color: #fff;
    text-align: left;
}

.pricing-banner-copy h3 {
    font-size: clamp(1.8rem, 3vw, 1.5rem);
    line-height: 1.2;
    margin-bottom: 10px;
    font-weight: 700;
}

/* Round 2 (09/09, κατά το figma): πιο λεπτό το κείμενο του pricing banner
   («Ξεκίνα σήμερα με…»), πιο έντονα τα ποσά, μικρότερο κάθετο κενό γραμμών.
   Κοινό component — ισχύει σε ordering ΚΑΙ cloudTamiaki (ίδιο banner design). */
.pricing-banner-copy p {
    margin-bottom: 20px;
    font-size: 1.55rem;
    font-weight: 100;
    line-height: 1.25;
    color: rgba(255, 255, 255, .95);
}

.pricing-banner-copy p b {
    font-weight: 700;
}

.pricing-banner-phone {
    position: absolute;
    left: 75%;
    top: 22px;
    transform: translateX(-50%);
    width: min(24vw, 235px);
    z-index: 2;
}

.pricing-banner-phone img {
    width: 100%;
    height: auto;
}

.playstore-card {
    position: absolute;
    right: -50px;
    top: 61%;
    /* transform: translateY(0); */
    width: 120px;
    background: #fff;
    border-radius: 30px;
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 35px rgba(26, 31, 44, .14);
    z-index: 3;
    height: 200px;
    justify-content: space-around;
}


.playstore-label {
    font-size: .73rem;
    font-weight: 500;
    color: #2b2b2b;
    letter-spacing: .3px;
}

.playstore-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.playstore-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #ef7d83;
    border: 1px solid #f4b8bc;
    border-radius: 18px;
    min-height: 45px;
    padding: 6px 8px;
    width: 100%;
    font-size: .8rem;
    line-height: 1.15;
    font-weight: 600;
}

.playstore-download:hover {
    color: #fff;
    background: #e97379;
}

.pricing-highlight-mobile {
    padding: 34px 0 28px;
}

.pricing-mobile-shell {
    position: relative;
    padding-top: 28px;
}

.pricing-mobile-phone {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    margin-bottom: -90px;
}

.pricing-mobile-phone img {
    width: min(50vw, 180px);
}

.pricing-mobile-card {
    position: relative;
    background: #ef7d83;
    border-radius: 36px;
    padding: 64px 22px 78px;
    min-height: 360px;
}

.pricing-mobile-copy {
    max-width: 260px;
    margin: 0 auto;
    text-align: left;
    color: #fff;
}

.pricing-mobile-copy h3 {
    font-size: 2.05rem;
    line-height: 1.12;
    font-weight: 700;
    margin-bottom: 14px;
}

.pricing-mobile-copy p {
    font-size: 1.65rem;
    line-height: 1.25;
    font-weight: 200;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .95);
}

.pricing-mobile-copy p b {
    font-weight: 700;
}

.pricing-mobile-copy .btn {
    border-width: 2px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 10px 18px !important;
}

.pricing-mobile-playstore {
    position: absolute;
    right: 12px;
    bottom: -72px;
    width: 132px;
    border-radius: 24px;
    padding: 12px 10px 10px;
    height: 186px;
    z-index: 4;
}

@media (min-width: 992px) {
    .pricing-highlight-mobile {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .pricing-highlight-mobile {
        padding: 44px 0 40px;
    }

    .pricing-mobile-phone {
        margin-bottom: -56px;
    }

    .pricing-mobile-phone img {
        width: min(40vw, 280px);
    }

    .pricing-mobile-card {
        min-height: 420px;
        padding: 82px 36px 88px;
    }

    .pricing-mobile-copy {
        max-width: 420px;
    }

    .pricing-mobile-copy h3 {
        font-size: 2.35rem;
    }

    .pricing-mobile-copy p {
        font-size: 1.9rem;
    }

    .pricing-mobile-playstore {
        width: 148px;
        height: 204px;
        right: 24px;
        bottom: -76px;
    }
}

@media (max-width: 420px) {
    .pricing-mobile-copy h3 {
        font-size: 1.8rem;
    }

    .pricing-mobile-copy p {
        font-size: 1.45rem;
    }

    .pricing-mobile-playstore {
        width: 118px;
        right: 10px;
    }
}

@media (max-width: 1199.98px) {
    .pricing-banner-phone {
        left: 63%;
        width: min(32vw, 280px);
    }
}

@media (max-width: 991.98px) {
    .pricing-banner-app {
        padding: 34px 24px 28px;
        border-radius: 28px;
        text-align: center;
    }

    .pricing-banner-copy {
        max-width: none;
    }

    .pricing-banner-copy p {
        font-size: 1.25rem;
    }

    .pricing-banner-phone {
        position: static;
        transform: none;
        width: min(76vw, 290px);
        margin: -110px auto 8px;
    }

    .playstore-card {
        position: absolute;
        transform: none;
        margin: 6px auto 0;
        width: 120px;
        top:70%;
    }

    .pricing-mobile-card{
        display: flex;
    }

    .pricing-mobile-copy {
        margin: unset !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: end;
    }

    .pricing-mobile-copy h3{
        font-size: 1.5rem;
    }

    .pricing-mobile-copy p{
        font-size: 1.15rem;
    }

    .pricing-mobile-copy .btn {
        font-size: .95rem;
    }


    .hero{
        min-height: 88vh!important;
    }

    .sem-img img{
        width: 100%;
        height: auto;
    }

    .payments-section .flex-lg-row-reverse{
        padding: 0px!important;
    }

    .payments-section img{        
        width: 80%;
        height: auto;
    }

    .payments-section{
        padding: 100px 0!important;
    }
}

/* ─── PAYMENTS ─── */
.payments-section {
    padding: 80px 0;
}

.payments-section .col-lg-7{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.payments-section h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
}

.payments-section h2 span:first-child {
    background: linear-gradient(90deg, #6D15C0, #0C1296);    
    color: white;
    border-radius: 50px;
    padding: 8px 15px;
}

.payments-section p {
    font-weight: 200;
}

.payments-section p b {
    font-weight: 600;
}

.payments-mockup {        
    /* aspect-ratio: 9 / 16; */
    /* max-width: 260px; */
    display: flex;
    align-items: center;
    font-size: .85rem;
    color: rgba(255, 255, 255, .8);
    font-weight: 700;
    text-align: center;
    /* margin: auto; */
}

.payments-mockup i {
    font-size: 3rem;
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.powered-by {
    font-size: .8rem;
    color: var(--mid);
}

.powered-by strong {
    color: var(--purple);
}

/* ─── FAQ ─── */
.faq-section {
    padding: 80px 0;
    background: var(--light);
}

.accordion-button:not(.collapsed) {
    color: var(--coral);
    background: var(--coral-l);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #ececec;
    border-radius: 0 !important;
}

.accordion-button {
    font-weight: 600;
    font-size: .95rem;
}

/* ─── Case Studies ─── */
.case-studies-section {
    padding: 80px 0;
    background: var(--white);
}

.case-card {
    padding: 0;
    transition: transform .28s ease, box-shadow .28s ease;
}

.case-img {
    position: relative;
    background: #e4e4e4;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.vikoscola{
    background-color: #D72630;
}
.vromiara{
    background-color: #000;
}
.seajets{
    background-color: #013258;
}
.aek{
    background-color: #FCD20F;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: none;
}

.case-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--white);
    color: var(--dark);
    font-size: .75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 1;
}

.case-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--mid);
}

.case-author {
    font-weight: 700;
    color: var(--dark);
}

.case-meta .case-date::before {
    content: "·";
    margin-right: 8px;
}

.case-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 8px;
    margin-bottom: 4px;
}

.case-modal-trigger {
    cursor: pointer;
}

.case-modal-trigger:hover {
    transform: translateY(-6px);
}

.case-modal-trigger:hover .case-img img {
    transform: scale(1.04);
}

.case-modal-trigger:focus-visible {
    outline: 3px solid rgba(252, 132, 132, .45);
    outline-offset: 6px;
    border-radius: calc(var(--radius) + 4px);
}

.case-img img {
    transition: transform .4s ease;
}

.case-study-modal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(21, 26, 38, .28);
}

.case-study-modal .modal-body {
    padding: 28px 30px 34px;
}

.case-modal-close {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 4;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 50%;
    width: 34px;
    height: 34px;
}

.case-modal-header {
    --case-color: #1f2937;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--case-color);
}

.case-modal-logo-wrap {
    width: min(72%, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-modal-header img {
    width: 100%;
    max-height: 170px;
    object-fit: contain;   
}

.case-study-modal .modal-body .case-badge {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
    background: var(--coral-l);
    color: var(--dark);
}

.case-modal-title {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--dark);
}

.case-modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    color: var(--mid);
    margin-bottom: 16px;
}

.case-modal-meta #caseModalDate::before {
    content: "·";
    margin-right: 8px;
}

.case-modal-content h6 {
    font-size: .98rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
}

.case-modal-content p {
    margin-bottom: 16px;
    color: var(--mid);
    line-height: 1.65;
}

.case-modal-content ul {
    margin-bottom: 18px;
    padding-left: 18px;
}

.case-modal-content li {
    margin-bottom: 6px;
    color: var(--mid);
}

@media (max-width: 575.98px) {
    .case-study-modal .modal-body {
        padding: 22px 18px 26px;
    }

    .case-modal-header {
        min-height: 190px;
    }

    .case-modal-logo-wrap {
        width: min(78%, 300px);
    }

    .case-modal-title {
        font-size: 1.28rem;
    }

    .case-modal-meta {
        font-size: .86rem;
    }
}

.case-excerpt {
    font-size: .85rem;
    color: var(--mid);
    margin: 0;
}

/* ─── DEMO CTA ─── */
.demo-section {
    padding: 80px 0;
    text-align: center;
}

.demo-section h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 500;
}

.demo-section p {
    color: var(--mid);
    max-width: 500px;
    margin: 0 auto 28px;
    font-weight: 200;
}

.demo-section input{
    border-radius: 18px;
}

.demo-section strong{
    color: var(--coral);
    font-weight: 600;
}

.demo-form {
    max-width: 620px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 999px;
    padding: 8px;
    box-shadow: 0 10px 28px rgba(43, 43, 43, .08);
    border: 1px solid #eceef3;
}

.demo-form .form-control {
    border: none;
    box-shadow: none;
    font-size: 1rem;
    color: #676b79;
    border-radius: 999px;
    padding: 14px 24px;
    background: transparent;
    font-weight: 300;
}

.demo-form .form-control::placeholder {
    color: #8a8ea0;
    opacity: 1;
}

.demo-form .form-control:focus {
    border: none;
    box-shadow: none;
    background: transparent;
}

.demo-submit {
    border: none;
    background: var(--coral);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 800;
    min-width: 145px;
    padding: 14px 28px;
    transition: background .2s ease, transform .15s ease;
    border-top-left-radius: 999px!important;
    border-bottom-left-radius: 999px!important;
}

.demo-submit:hover,
.demo-submit:focus {
    background: #ea6e6f;
    color: #ffffff;
    transform: translateY(-1px);
}

.demo-submit-orange {
    border: none;
    background: var(--orange);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 600;
    min-width: 145px;
    padding: 14px 28px;
    transition: background .2s ease, transform .15s ease;
    border-top-left-radius: 999px!important;
    border-bottom-left-radius: 999px!important;
}

.demo-submit-orange:hover,
.demo-submit-orange:focus {
    background: #ff7f50;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .demo-form {
        padding: 6px;
    }

    .demo-form .form-control {
        font-size: 1rem;
        padding: 11px 14px;
    }

    .demo-submit {
        min-width: 118px;
        padding: 11px 18px;
        font-size: .95rem;
    }
}
/* ========================================
   FOOTER
======================================== */

.main-footer {
  background: var(--coral);
  color: white;
  padding: 80px 5% 40px;
}

.main-footer-orange {
  background: var(--orange);
  color: white;
  padding: 80px 5% 40px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: flex-start;
  gap: 60px;
  max-width: 1300px;
  margin: auto;
}

/* logo */

.footer-logo {
  width: 220px;
  margin-bottom: 30px;
}

/* links */

.footer-links {
  display: flex;
  gap: 60px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  opacity: 0.9;
  font-size: 0.9rem;
}

.footer-links a:hover {
  opacity: 1;
}

/* contact */

.footer-contact h3 {
  font-size: 1.4rem;
  margin-bottom: 25px;
}

.footer-contact-grid {
  display: flex;
  gap: 60px;
  margin-bottom: 25px;
}

.footer-contact-grid span {
  display: block;
  font-size: 0.85rem;
  opacity: 0.8;
}

.footer-contact-grid strong {
  font-size: 1.1rem;
}

/* offices */

.footer-offices {
  margin-bottom: 25px;
}

.footer-offices span {
  display: block;
  margin-bottom: 10px;
  opacity: 0.9;
}

.footer-offices-grid {
  display: flex;
  gap: 40px;
}

.footer-offices-grid strong {
  display: block;
}

/* social */

.footer-social {
  margin-top: 10px;
}

.social-icons {
  margin-top: 8px;
  display: flex;
  gap: 14px;
  font-size: 20px;
}

.social-icons i {
  cursor: pointer;
  opacity: 0.9;
}

.social-icons i:hover {
  opacity: 1;
}

/* copyright */

.footer-bottom {
  text-align: center;
  margin-top: 50px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.semantic-i {
  color: var(--danger);
}

.semantic-i {
  color: var(--danger);
  font-weight: 800;
}


/* ─── UTILS ─── */
.text-coral {
    color: var(--coral) !important;
}

.bg-coral-light {
    background: var(--coral-l);
}


.faq-wrapper {
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* card */

.faq-card {
  background: var(--surface-light);
  border-radius: 40px;
  padding: 10px 24px;
  transition: box-shadow 0.2s ease;
}

.faq-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* header */

.faq-header {
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.05rem;
  font-weight: 600;
  color: #252b42;
  padding: 18px 10px;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* toggle button */

.faq-toggle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.25s ease-in-out, background-color 0.25s ease;
}

/* content */

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, 
              padding 0.3s ease-in-out,
              opacity 0.25s ease-in-out;
  color: #555;
  line-height: 1.7;
  padding: 0 10px;
  opacity: 0;
}

.faq-card.active .faq-content {
  max-height: 500px;
  padding: 10px 10px 20px;
  opacity: 1;
}

.faq-card.active .faq-toggle {
  background: var(--accent-purple);
  /* transform: rotate(45deg); */
}



/* Main FAQ card */
.faq-item {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(45, 83, 243, 0.08); 
  margin-bottom: 20px;
  overflow: hidden;
  text-align: left;
}

/* Question row */
.faq-question {
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(45, 83, 243, 0.08);
  color: #1a1a3c;
  font-size: 17px;
  font-weight: 600;
  padding: 20px 24px;
  margin: 10px 10px 20px 20px;
  width: 95%;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.faq-question span {
  flex: 1;
  text-align: left;
}

/* Icon styling */
.faq-question i {
  font-size: 14px;
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 27px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  line-height: 1;
  transition: all 0.3s ease;
  background-color: var(--orange);
}

.faq-question i:not(.coral) {
  background-color: var(--coral);
}

.faq-question i {
  transition: transform 0.8s ease; /* ← controls rotation speed */
}
.faq-item.open .faq-question i {
    transform: rotate(45deg);

}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 24px;
  font-weight: 200;
}


.faq-answer.closing {
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
}
.faq-question i {
  font-size: 14px;
  transition: transform 0.4s ease;
}

.faq-question i.rotate {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    opacity: 1;
 
}

.faq-answer.open {
  max-height: fit-content!important;
  /* opacity: 1;
  padding: 16px 24px; */
}



/* Answer area */
.faq-answer {
  padding: 0 50px;
  font-size: 16px;
  color: #292929;
  line-height: 1.6;
  text-align: left;
  max-height: 0;
  text-align: left;
  overflow: hidden;
    max-height: 0; /* OK */
  opacity: 0;
  transition: max-height 1.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 600px;
  opacity: 1;


}
.faq-answer,
.faq-answer.open {
    background-color: transparent !important;
    box-shadow: none;
}
.faq-item {
    background-color: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 912px) { 
  .faq-question {
    width: 93%;
    margin: 10px;
    text-align: left;
    font-size: 16px;
    align-items: flex-start;
  }

  .faq-question i {
    margin-top: 2px;
  }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 900px) { 
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}


/* Coral */
.btn-coral.active,
.btn-coral.show,
.btn-coral:active,
.btn-check:checked + .btn-coral {
    background: var(--coral) !important;
    color: #fff !important;
    border-color: var(--coral) !important;
}

/* Coral Outline */
.btn-coral-outline.active,
.btn-coral-outline.show,
.btn-coral-outline:active,
.btn-check:checked + .btn-coral-outline {
    background: var(--coral) !important;
    color: #fff !important;
    border-color: var(--coral) !important;
}

/* Orange */
.btn-orange.active,
.btn-orange.show,
.btn-orange:active,
.btn-check:checked + .btn-orange {
    background: var(--orange) !important;
    color: #fff !important;
    border-color: var(--orange) !important;
}

.dropdown-item.active, .dropdown-item:active{
    background: var(--coral);
    color: #fff;
}

.solutions-carousel .owl-dots{
    opacity: 0;
    cursor:pointer;
}

.einvoice-slide{
    text-align: center;
}

.navbar-toggler-icon{
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar-toggler{
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: transparent;
    border: 0px!important;
    border-radius: 0px!important;
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler:focus{
        box-shadow: unset!important;
}

.social-icons-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.btn-play{
    display: flex;
    align-items: center;
    justify-content: center;
}

#demoVideoModal {
    background: rgba(0,0,0,.9);
}

.video-modal-content {
    background: transparent;
    border: 0;
}

.short-video-container {
    width: 100%;
    max-width: 430px;
    aspect-ratio: 9/16;
}

.short-video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
}

.video-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 20px;
}

#mobileNavModal .modal-dialog {
    margin-top: 20%;
}

.border-coral {
  border: 2px solid var(--coral);
}


.button-coral {
  background-color: var(--coral);
  border-color: var(--coral);
}

.button-coral:hover{
    border-color: var(--coral) !important;
    background-color: var(--coral);
}

div:where(.swal2-icon).swal2-info{
    border-color: var(--coral) !important;
    color: var(--coral) !important;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):hover{
    background-color: var(--coral) !important;
    border-color: var(--coral) !important;
    border-radius: 999px;
}

.swal2-confirm{
    background-color: var(--coral) !important;
    border-color: var(--coral) !important;
    border-radius: 999px;
}

.js-animations .animate-on-scroll,
.js-animations .animate-on-scroll-late,
.js-animations [data-animate] {
    opacity: 0;
}

.js-animations .animate-on-scroll.animate__animated,
.js-animations .animate-on-scroll-late.animate__animated,
.js-animations [data-animate].animate__animated {
    opacity: 1;
}

/* Mobile: cap company/feature image height */
@media (max-width: 991.98px) {
    .feature-section .col-lg-4 img.img-fluid {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        object-position: center 30%;
    }
}

/* Ίσα ύψη στις κάρτες λύσεων σε κάθε πλάτος: το owl-stage γίνεται flex
   ώστε κάθε κάρτα να τεντώνει στο ύψος της ψηλότερης */
.solutions-carousel .owl-stage {
    display: flex;
}

.solutions-carousel .owl-item {
    display: flex;
}

.solutions-carousel .owl-item .solution-card {
    width: 100%;
    height: 100%;
}

/* Κάρτες επιχειρήσεων: οι παράγραφοι ξεκινούν από το ίδιο ύψος —
   στα 992-1200 οι τίτλοι σπάνε σε 2-3 γραμμές (br μόνο σε lg),
   οπότε κρατούν όλοι χώρο 3 γραμμών για να ευθυγραμμίζονται */
/* Round 2 (doc Βίκυς 08/09, desktop): και σε ≥1200 οι μεγάλοι τίτλοι
   («Ξενοδοχεία & Τουριστικά Καταλύματα», «Beach Bars & Χώρους Διασκέδασης»)
   αναδιπλώνουν σε 2 γραμμές ενώ τα «Κρουαζιερόπλοια & Πλοία» χωρούν σε μία —
   οι τίτλοι κρατούν χώρο 2 γραμμών ώστε οι περιγραφές να είναι στην ίδια ευθεία. */
@media (min-width: 1200px) {
    .feature-section .col-lg-4 h3 {
        min-height: 2.4em;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .feature-section .col-lg-4 h3 {
        min-height: 3.6em;
    }

    /* Semantic: η εικόνα κεντραρισμένη και λίγο μεγαλύτερη */
    .semantic-images {
        display: flex;
        justify-content: center;
    }

    .semantic-images .sem-img {
        width: 100%;
        text-align: center;
    }

    .semantic-images .sem-img img {
        width: 95%;
        display: block;
        margin: 0 auto;
    }

    /* case studies: οι στενές κάρτες σπάνε το meta — τρεις γραμμές όπως στα κινητά */
    .case-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .case-meta .case-date::before {
        content: none;
        margin-right: 0;
    }

    .case-title {
        margin-top: 4px;
    }

    /* hero στο 1024: κενό πάνω, μικρότερος τίτλος, κείμενο και κουμπιά */
    .hero {
        padding-top: 32px;
    }

    .hero h1 {
        font-size: 2.4rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero .btn-lg {
        font-size: 1rem;
        padding: 10px 20px;
    }

    /* feature mockups: κοινό ύψος ώστε όλα τα κινητά να είναι ίσα */
    .feature-section .feature-img img {
        max-height: 420px;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    /* smart cards: πιο φαρδιές ώστε το κείμενο να μη σπάει σε πολλές γραμμές */
    .smart-section .col-lg-3 {
        flex: 0 0 auto;
        width: 33.3333%;
    }

    /* pricing banner: το κινητό πιο αριστερά — κενό από το κουτί PLAY STORE */
    .pricing-banner-phone {
        transform: translateX(-30px);
    }
}

/* iPad PRO οριζόντια / μικρό desktop (1200-1400): κενό στο hero
   και ελαφρώς μικρότερα feature mockups */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hero {
        padding-top: 24px;
    }

    .feature-section .feature-img img {
        max-height: 460px;
        width: auto;
        margin: 0 auto;
        display: block;
    }
}

/* smart cards σε tablet: μία κάτω από την άλλη, κεντραρισμένες */
@media (min-width: 768px) and (max-width: 991.98px) {
    .smart-section .col-md-5 {
        flex: 0 0 auto;
        width: 60%;
    }

    /* payments: μικρότερο το mockup viva (τηλέφωνο + κάρτα) */
    .payments-section img[src*="viva.png"] {
        max-height: 320px !important;
        width: auto !important;
        display: block;
        margin: 0 auto;
    }

    /* βήματα «Πώς λειτουργεί;»: τα κείμενα ξεκινούν από την ίδια ευθεία */
    .how-steps .step-card h5 {
        min-height: 3.6em;
    }
}

/* «Πώς λειτουργεί;»: κενό από το πάνω section — σε όλα τα πλάτη.
   Το font-weight:700 του τίτλου ΜΕΤΑΦΕΡΘΗΚΕ page-scoped στην ordering.php:
   εδώ (κοινό CSS) έπιανε και το «Μας εμπιστεύονται 600+» της αρχικής, που είναι
   κι αυτό .how-section .section-title — παρατήρηση Βίκυς, doc responsive 08/09. */
.how-section {
    padding-top: 56px;
}

/* Round 2 (09/09): μόνο το κοραλί «600+» του τίτλου της αρχικής πιο έντονο —
   ο τίτλος γύρω του μένει στο ελαφρύ βάρος. Στην Ταμειακή το span του
   how-section τίτλου έχει inline font-weight:200 που υπερισχύει (ανεπηρέαστο),
   και το «Πώς λειτουργεί;» της ordering δεν έχει span. */
.how-section .section-title span {
    font-weight: 600;
}

/* Κενό ανάμεσα στο pricing banner και το επόμενο section (π.χ. Συχνές Ερωτήσεις) */
.pricing-banner-app {
    margin-bottom: 72px;
}

.pricing-mobile-shell {
    margin-bottom: 72px;
}

/* «Πιστοποιημένος Πάροχος» (einvoice): κείμενο-εικόνα πιο κοντά με ίσα
   πλαϊνά κενά, και ελαφρώς μεγαλύτερα τίτλος/κείμενο/bullets */
@media (min-width: 992px) {
    .einvoice-section .row {
        justify-content: center;
    }

    .einvoice-section .col-lg-6 {
        flex: 0 0 auto;
        width: 44%;
    }

    .einvoice-section .section-title {
        font-size: 2.2rem !important;
    }

    .einvoice-section p,
    .einvoice-section .einvoice-checklist li {
        font-size: 1.05rem !important;
    }
}

/* Pricing banner (mobile εκδοχή) σε tablet: μικρότερο κινητό, πιο κάτω στη ροζ κάρτα */
@media (min-width: 576px) and (max-width: 991.98px) {
    .pricing-mobile-phone img {
        width: 220px !important;
    }

    .pricing-mobile-phone {
        transform: translateY(60px);
    }

    /* πιο κοντή η φόρμα «Συμπλήρωσε το τηλέφωνο» */
    .demo-form {
        max-width: 480px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* einvoice: μικρότερη εικόνα με ανάσα κάτω από αυτήν */
    .einvoice-section img {
        max-height: 380px;
        width: auto !important;
        display: block;
        margin: 0 auto 28px;
    }

    /* SUNMI showcase: το mockup σε κανονική ροή (τέλος το overlap),
       μικρότερο και κεντραρισμένο, με μικρότερο CTA κείμενο */
    .pos-showcase {
        min-height: auto !important;
    }

    .pos-device-1 {
        position: static !important;
        width: 70% !important;
        margin: 0 auto;
    }

    .pos-cta-text {
        font-size: 1rem !important;
        text-align: center;
        margin-top: 8px !important;
    }
}

/* Ταμειακή «απλοποιεί την καθημερινότητα»: κενό πάνω από τον τίτλο σε tablet/κινητά */
@media (max-width: 991.98px) {
    .simplify-section {
        padding-top: 64px !important;
    }
}

/* Βήματα «Πώς λειτουργεί;» (steps-section) σε tablet: το ένα κάτω από το άλλο */
@media (min-width: 768px) and (max-width: 991.98px) {
    .steps-section .col-md-4 {
        flex: 0 0 auto;
        width: 60%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
}

/* Ταμειακή «ιδανική λύση για»: μοιρασιά 50/50 — η λίστα με τα icons
   ξεκινάει από το κέντρο της σελίδας */
@media (min-width: 992px) {
    .row:has(> .col-lg-8 .ideal-list) > .col-lg-4 {
        flex: 0 0 auto;
        width: 50%;
    }

    .row:has(> .col-lg-8 .ideal-list) > .col-lg-8 {
        flex: 0 0 auto;
        width: 50%;
        justify-content: flex-start !important;
    }
}

/* reCAPTCHA badge πάνω από το chat bubble για να μην κρύβεται */
.grecaptcha-badge {
    bottom: 90px !important;
    transform: translateX(-15px) !important;
}

/* Checklist: hanging indent — οι αναδιπλωμένες γραμμές ξεκινούν κάτω από
   το κείμενο και όχι κάτω από το εικονίδιο, με τα τικ σε ενιαία στήλη */
.semantic-checklist li {
    padding-left: 26px;
    text-indent: -26px;
}

.semantic-checklist li i {
    display: inline-block;
    width: 16px;
    text-align: center;
    text-indent: 0;
}

/* Tablet/mobile hero: κενό πάνω από τον τίτλο και μικρότερο mockup */
@media (max-width: 991.98px) {
    .hero {
        padding-top: 36px;
    }

    .hero-mockup img {
        max-height: 420px;
        width: auto;
    }

    /* κενό πάνω από το «Μας εμπιστεύονται» */
    .how-section {
        padding-top: 48px;
    }

    /* κενό κάτω από τα λογότυπα */
    .how-section .logo-carousel {
        margin-bottom: 32px;
    }

    /* λίγο κενό πάνω από τα κουτάκια των stats */
    .stats-section .stats-grid {
        margin-top: 24px;
    }
}

/* Μικρά κινητά: πιο κάτω και λίγο πιο μικρός ο τίτλος του hero */
@media (max-width: 575.98px) {
    .hero {
        padding-top: 48px;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    /* κενό πάνω από «Μας εμπιστεύονται» και «Απλοποίησε» */
    .how-section {
        padding-top: 56px;
    }

    .stats-section {
        padding-top: 56px;
    }

    /* μεγαλύτερα logo (προβάλλονται ένα-ένα, βλ. owl config στο index.php) */
    /* Round 2 (αναφορά Δημήτρη 09/09): το σήμα της ΑΕΚ κοβόταν πάνω-κάτω — τα
       τετράγωνα logos (aek/mezen/almyra, 500×500) είχαν width:65% με ξεκλείδωτο
       ύψος και ξεχείλιζαν το κουτί των 110px. Το κουτί ανέβηκε στα 160px και τα
       τετράγωνα κλιμακώνονται πλέον με βάση το ύψος (ολόκληρα)· τα οριζόντια
       logos μένουν στο ίδιο μέγεθος (max-height 110), απλώς με λίγο αέρα. */
    .logo-carousel .logo-item {
        height: 160px;
    }

    .logo-carousel .logo-item img {
        max-height: 110px;
    }

    .logo-carousel .logo-item img[src*="aek.png"],
    .logo-carousel .logo-item img[src*="mezen.png"],
    .logo-carousel .logo-item img[src*="almyra.png"] {
        max-height: 160px;
        max-width: 100%;
        width: auto;
    }

    /* footer: το «Τηλεφωνικό κέντρο:» σε μία γραμμή — μικρότερο κενό στηλών */
    .mobile-footer-contact > div:first-child {
        margin-right: 1.25rem !important;
    }

    .mobile-footer-contact p {
        white-space: nowrap;
    }

    /* λιγότερο κενό πάνω/κάτω από τα mockups των feature ενοτήτων */
    .feature-section {
        padding: 40px 0 24px;
    }

    .feature-section .feature-img {
        margin-bottom: 0;
    }

    /* βήματα 1-2-3: μαζεμένα κενά κάτω από τα κειμενάκια */
    .how-steps .step-card {
        padding-top: 12px;
        padding-bottom: 4px;
    }

    .how-steps {
        --bs-gutter-y: .75rem;
    }

    /* το κινητό του pricing banner εντός της ροζ κάρτας */
    .pricing-mobile-phone img {
        width: min(50vw, 180px) !important;
    }

    /* case studies: τίτλος / ημερομηνία / πελάτης σε τρεις γραμμές */
    .case-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .case-meta .case-date::before {
        content: none;
        margin-right: 0;
    }

    .case-title {
        margin-top: 4px;
    }
}

/* Κινητά: μικρότερο κείμενο στη φόρμα ώστε να φαίνεται όλο το
   «Συμπλήρωσε το τηλέφωνο σου...» */
@media (max-width: 575.98px) {
    .demo-form .form-control {
        font-size: .8rem;
        padding-left: 14px;
    }

    .demo-form .form-control::placeholder {
        font-size: .8rem;
    }

    /* SUNMI: κενό ανάμεσα στον τίτλο και το mockup */
    .pos-showcase {
        margin-top: 60px !important;
    }
}

/* Πολύ στενές οθόνες: μικρότερος τίτλος einvoice ώστε το
   «Ηλεκτρονικής Τιμολόγησης» να χωράει σε μία γραμμή */
@media (max-width: 400px) {
    .einvoice-section .section-title {
        font-size: 1.35rem !important;
    }
}

/* Kiosk flow σε tablet/κινητά: τα κείμενα των βημάτων τυλίγουν
   σε κοινό δεξί όριο (η «κίτρινη γραμμή» του review) */
@media (max-width: 991.98px) {
    .flow-step p {
        max-width: 440px;
    }

    .flow-step h3 {
        max-width: 440px;
    }

    /* realtime: το δημιουργικό κατεβαίνει να μην πατάει το κείμενο */
    .realtime-mockups {
        margin-top: 40px !important;
    }

    /* value section: κενό πάνω από τον τίτλο, μικρότερη κάρτα στατιστικών */
    .value-section {
        padding-top: 56px !important;
    }

    .value-img {
        max-width: 60% !important;
        height: auto;
    }

}

/* kiosk stats ΜΟΝΟ σε tablet (οριζόντια μπάρα): αριθμοί στην ίδια ευθεία —
   κάτω από 768 η μπάρα γίνεται στήλη και το flex-start θα τη στοίχιζε αριστερά */
@media (min-width: 768px) and (max-width: 991.98px) {
    .kiosk-stats-bar {
        align-items: flex-start !important;
    }

    .kiosk-stat-lbl {
        font-size: .95rem !important;
    }

    .kiosk-stats-bar .kiosk-stat-item:nth-of-type(2) {
        padding: 0 8px !important;
    }
}

/* Kiosk hero σε tablet: τα δύο κιοσκ αρκετά μικρότερα */
@media (min-width: 576px) and (max-width: 991.98px) {
    .hero-mockup img[src*="hero-4"] {
        max-height: 380px !important;
    }

    /* kiosk carousel: το κείμενο μαζεμένο και τα βέλη στα πλάγιά του */
    .einvoice-carousel .einvoice-slide p {
        max-width: 68%;
        margin-left: auto;
        margin-right: auto;
    }

    .einvoice-carousel .owl-nav {
        left: 6% !important;
        right: 6% !important;
        top: 45% !important;
    }
}

/* Kiosk carousel (Έξυπνο Upselling κ.λπ.) στο 1024: το κείμενο μαζεύει
   από δεξιά, τίτλος στο ίδιο κουτί, το δεξί βέλος ακολουθεί */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .einvoice-carousel .einvoice-slide p {
        font-size: .95rem;
        max-width: 82%;
        margin-left: 0;
        margin-right: auto;
    }

    .einvoice-carousel .einvoice-slide .section-title {
        max-width: 82%;
        margin-left: 0;
        margin-right: auto;
    }

    .einvoice-carousel .owl-nav {
        right: 9% !important;
    }
}

/* Kiosk flow «Πώς λειτουργεί;»: το γραφιστικό πιο αριστερά ώστε να μην
   κόβεται το «3» — ο τίτλος μένει στη θέση του */
@media (min-width: 992px) {
    .flow-track {
        transform: translateX(-70px);
    }

    /* η οθόνη του kiosk χωράει ολόκληρη σε ένα frame */
    .einvoice-section img[src*="hero-4-2"] {
        max-height: 75vh;
        width: auto !important;
    }

    /* απόσταση ανάμεσα στο flow 1-2-3 και το kiosk section από κάτω */
    .flow-section {
        margin-bottom: 80px;
    }
}

/* Mobile S: το playstore κουμπί μικρότερο, πιο κάτω και πιο δεξιά —
   να μην πέφτει πάνω στο «Δες περισσότερα» */
@media (max-width: 400px) {
    .pricing-mobile-playstore {
        width: 110px !important;
        bottom: -80px !important;
        right: -12px !important;
    }
}

/* πολύ στενές οθόνες (Mobile S): ελαφρώς μικρότερη γραμματοσειρά για να χωράει */
@media (max-width: 360px) {
    .mobile-footer-contact p {
        font-size: .9rem;
    }

    .mobile-footer-contact > div:first-child {
        margin-right: 1rem !important;
    }
}

/* Footer διευθύνσεις: κάθε γραμμή μονοκόμματη ώστε το «Συν/χου Δαβάκη 17»
   να μη σπάει — οι στήλες των πόλεων ανοίγουν με ίδια δομή και στις τρεις */
.footer-adress > div p {
    white-space: nowrap;
}

.footer-adress > div {
    margin-right: 2rem !important;
}