/* ==========================================
   WHTNXT Exhibition Microsite — shared structural CSS
   Loaded before a theme's theme.css, which overrides the
   :root custom properties below (palette + radii) and adds
   its own Google Fonts. Structure/layout rules here are
   theme-agnostic and shared by every generated microsite.
========================================== */

:root{

    /* pastel surfaces */
    --bg:#FAFBFF;
    --surface:#FFFFFF;
    --surface-alt:#F1F5FF;
    --surface-lavender:#F5F1FF;

    /* accents */
    --sky:#A6C8FF;
    --sky-soft:#DCE7FF;
    --lavender:#C9B8FF;
    --lavender-soft:#EDE6FF;

    /* usable saturated accents (buttons, links, numbers) */
    --primary:#4D6FFF;
    --primary-dark:#3854D6;
    --accent:#9C7BF0;

    /* text */
    --heading:#1E2A3A;
    --text:#56677E;
    --text-soft:#8593A8;

    --border:rgba(30,42,58,.08);
    --shadow-sm:0 8px 24px -12px rgba(30,58,138,.12);
    --shadow-md:0 24px 60px -20px rgba(30,58,138,.18);

    --radius:22px;
    --radius-sm:14px;
    --transition:.35s cubic-bezier(.22,.61,.36,1);

}

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

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{

    font-family:var(--font-body, 'Inter'), Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--heading);
    line-height:1.6;

}

#scrollSentinel{
    position:absolute;
    top:0;
    left:0;
    width:1px;
    height:1px;
    pointer-events:none;
}

h1,h2,h3,h4{
    font-family:var(--font-heading, 'Plus Jakarta Sans'), var(--font-body, 'Inter'), Arial, sans-serif;
    color:var(--heading);
    letter-spacing:-.02em;
}

.container{

    width:90%;
    max-width:1320px;
    margin:auto;

}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

section{
    padding:110px 0;
    position:relative;
}

::selection{
    background:var(--lavender);
    color:var(--heading);
}

/* progressive-enhancement: hide reveal targets only once JS confirms it can animate them */
html.js-ready .reveal{
    opacity:0;
}

/*=========================================
HEADER
=========================================*/

.header{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    padding: 20px 0;

    z-index: 999;

    transition: var(--transition);

}

.header.scrolled{

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    padding: 14px 0;

}

.header .container{

    display: flex;
    align-items: center;
    justify-content: space-between;

}

.logo img{

    height: 42px;

}

.nav ul{

    display: flex;
    gap: 40px;

}

.nav a{

    color: var(--heading);
    font-weight: 600;
    font-size:15px;
    position:relative;
    transition: .3s;

}

.nav a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;

}

.nav a:hover{

    color: var(--primary);

}

.nav a:hover::after{
    width:100%;
}

.header-btns{

    display: flex;
    gap: 15px;

}

.btn{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    border-radius: 50px;

    font-weight: 600;
    font-size:15px;

    transition: var(--transition);
    cursor:pointer;
    border:none;

}

.btn-outline{

    border: 1.5px solid var(--border);

    color: var(--heading);

    background:var(--surface);

}

.btn-outline:hover{

    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);

}

.btn-primary{

    background: linear-gradient(135deg,var(--primary),var(--accent));

    color: #fff;

    box-shadow:0 12px 30px -10px rgba(77,111,255,.55);

}

.btn-primary:hover{

    transform:translateY(-2px);
    box-shadow:0 16px 36px -8px rgba(77,111,255,.65);

}

/*=========================================
HERO
=========================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:120px;

    background:
    radial-gradient(circle at 15% 20%,rgba(166,200,255,.55),transparent 40%),
    radial-gradient(circle at 85% 15%,rgba(201,184,255,.5),transparent 42%),
    radial-gradient(circle at 50% 100%,rgba(220,231,255,.6),transparent 50%),
    var(--bg);

}

.hero::before{

    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(30,42,58,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,42,58,.035) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(circle at 50% 30%, black, transparent 75%);
    pointer-events:none;

}

.hero-content{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:80px;

    align-items:center;

    position:relative;
    z-index:1;

}

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:9px 20px;

    border-radius:50px;

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--primary-dark);

    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;

    margin-bottom:28px;

    box-shadow:var(--shadow-sm);

}

.hero-badge::before{

    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--lavender-soft);

}

.hero h1{

    font-size:46px;
    font-weight:800;

    line-height:1.12;

    margin-bottom:25px;

}

.hero p{

    color:var(--text);

    font-size:18px;

    max-width:560px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:15px;

}
.hero-trust{

    display:flex;

    gap:28px;

    margin-top:38px;

    flex-wrap:wrap;

}

.hero-trust span{

    color:var(--text);
    font-weight:600;

    font-size:14px;

}

.hero-right{

    position:relative;

}

.hero-form{

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);

    border:1px solid rgba(255,255,255,.7);

    border-radius:var(--radius);

    padding:38px;

    box-shadow:var(--shadow-md);

}

.hero-form h3{

    font-size:24px;
    font-weight:800;

    margin-bottom:8px;

}

.hero-form > p{

    color:var(--text);

    font-size:14.5px;

    margin-bottom:26px;

}

.hero-form input,
.hero-form select{

    width:100%;

    padding:15px 16px;

    background:var(--surface-alt);

    border:1.5px solid var(--border);

    color:var(--heading);

    font-family:inherit;
    font-size:14.5px;

    border-radius:12px;

    margin-bottom:16px;

    transition:.25s;

}

.hero-form input::placeholder{

    color:var(--text-soft);

}

.hero-form input:focus,
.hero-form select:focus{

    outline:none;

    border-color:var(--primary);

    background:var(--surface);

}

.hero-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-bottom:16px;

}

.hero-form-row input{

    margin-bottom:0;

}

.hero-form button{

    width:100%;

    margin-top:6px;

}

.hero-form-trust{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-top:20px;

    flex-wrap:wrap;

}

.hero-form-trust span{

    color:var(--text-soft);

    font-size:12.5px;
    font-weight:600;

}

/*=========================================
TRUST SECTION / LOGO MARQUEE
=========================================*/

.trust{

    padding:64px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

    background:var(--surface);

}

.trust-title{

    text-align:center;

    color:var(--text-soft);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;
    font-weight:600;

    margin-bottom:40px;

}

.trust-logos{

    overflow:hidden;

    position:relative;

    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);

    transform:translateZ(0);

}

.marquee-track{

    display:flex;

    align-items:center;

    gap:80px;

    width:max-content;

    animation:marquee-scroll 26s linear infinite;

    will-change:transform;

}

.trust-logos:hover .marquee-track{

    animation-play-state:paused;

}

@keyframes marquee-scroll{

    from{ transform:translateX(0); }

    to{ transform:translateX(-50%); }

}

.trust-logos img{

    height:130px;
    width:300px;

    flex-shrink:0;

    object-fit:contain;

    opacity:.65;

    transition:opacity .3s, filter .3s;

    filter:grayscale(60%);

}

.trust-logos img:hover{

    opacity:1;

    filter:grayscale(0%);

}

@media (prefers-reduced-motion: reduce){

    .marquee-track{
        animation:none;
    }

}

/*=========================================
SECTION HEADING
=========================================*/

.section-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}

.section-heading span{

    display:inline-block;

    color:var(--primary-dark);

    background:var(--sky-soft);

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;
    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.section-heading h2{

    font-size:44px;
    font-weight:800;

    margin:20px 0 16px;

}

.section-heading p{

    color:var(--text);
    font-size:17px;

}

/*=========================================
ACHIEVEMENTS
=========================================*/

.stats{

    padding:110px 0;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.stat-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:42px 36px;

    text-align:center;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:var(--sky);

    box-shadow:var(--shadow-md);

}

.stat-card h3{

    font-size:52px;
    font-weight:800;

    background:linear-gradient(135deg,var(--primary),var(--accent));

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    margin-bottom:10px;

}

.stat-card p{

    color:var(--text);
    font-weight:600;

}

/*=========================================
AERO INDIA JOURNEY / ROADMAP
=========================================*/

.roadmap{

    background:var(--surface-lavender);

    position:relative;
    z-index:1;

    overflow:visible;

}

/* Clip the lavender background without clipping absolutely-positioned nodes */
.roadmap::before{

    content:"";
    position:absolute;
    inset:0;
    background:var(--surface-lavender);
    z-index:-1;

}

.roadmap-heading{

    margin-bottom:40px;

}

.roadmap-path{

    position:relative;

    max-width:1100px;

    margin:0 auto;

    aspect-ratio:1000/620;

    --c1:#6E8CFF; --c1-soft:#E4EAFF; --c1-text:#4552C4;
    --c2:#9C7BF0; --c2-soft:#F0E9FF; --c2-text:#7247D6;
    --c3:#3FB8AF; --c3-soft:#DBF6F3; --c3-text:#1B8A81;
    --c4:#F0855C; --c4-soft:#FFE8DD; --c4-text:#C1552C;
    --c5:#E0A925; --c5-soft:#FFF3D2; --c5-text:#9C7208;
    --c6:#E85D93; --c6-soft:#FFE0EC; --c6-text:#C13868;

}

.roadmap-svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

}

.roadmap-road{

    fill:none;

    stroke-width:8;

    stroke-linecap:round;

}

.roadmap-road.roadmap-c1{ stroke:var(--c1); }
.roadmap-road.roadmap-c2{ stroke:var(--c2); }
.roadmap-road.roadmap-c3{ stroke:var(--c3); }
.roadmap-road.roadmap-c4{ stroke:var(--c4); }
.roadmap-road.roadmap-c5{ stroke:var(--c5); }
.roadmap-road.roadmap-c6{ stroke:var(--c6); }

.roadmap-node{

    position:absolute;

    left:var(--x);
    top:var(--y);

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;

    z-index:1;

}

.roadmap-node::after{

    content:"";
    order:2;

    width:3px;
    height:9px;

    border-radius:2px;

    background:var(--border);

}

.roadmap-c1::after{ background:var(--c1); }
.roadmap-c2::after{ background:var(--c2); }
.roadmap-c3::after{ background:var(--c3); }
.roadmap-c4::after{ background:var(--c4); }
.roadmap-c5::after{ background:var(--c5); }
.roadmap-c6::after{ background:var(--c6); }

.roadmap-node-final::after{ background:var(--primary); }

.roadmap-dot{ order:1; }

.roadmap-node > .roadmap-stats{ order:3; }

.roadmap-node-label-top .roadmap-dot{ order:3; }

.roadmap-node-label-top > .roadmap-stats{ order:1; }

.roadmap-dot{

    width:62px;
    height:62px;

    border-radius:50%;

    background:var(--surface);

    border:3px solid var(--primary);

    color:var(--primary-dark);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    font-weight:800;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.roadmap-node:hover .roadmap-dot{

    transform:scale(1.12);

    border-color:var(--accent);

    box-shadow:var(--shadow-md);

}

.roadmap-stats{

    display:flex;
    flex-direction:column;

    gap:4px;

    padding:12px 18px;

    border-radius:12px;

    background:var(--surface);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    white-space:nowrap;

}

.roadmap-stats span{

    font-size:12.5px;
    font-weight:600;

    color:var(--text);

}

.roadmap-stats strong{

    font-size:17px;
    font-weight:800;

    color:var(--heading);

    margin-right:5px;

}

.roadmap-c1 .roadmap-stats{ background:var(--c1-soft); }
.roadmap-c1 .roadmap-stats strong{ color:var(--c1-text); }

.roadmap-c2 .roadmap-stats{ background:var(--c2-soft); }
.roadmap-c2 .roadmap-stats strong{ color:var(--c2-text); }

.roadmap-c3 .roadmap-stats{ background:var(--c3-soft); }
.roadmap-c3 .roadmap-stats strong{ color:var(--c3-text); }

.roadmap-c4 .roadmap-stats{ background:var(--c4-soft); }
.roadmap-c4 .roadmap-stats strong{ color:var(--c4-text); }

.roadmap-c5 .roadmap-stats{ background:var(--c5-soft); }
.roadmap-c5 .roadmap-stats strong{ color:var(--c5-text); }

.roadmap-c6 .roadmap-stats{ background:var(--c6-soft); }
.roadmap-c6 .roadmap-stats strong{ color:var(--c6-text); }

.roadmap-node-final .roadmap-dot{

    width:84px;
    height:84px;

    font-size:16px;

    background:linear-gradient(135deg,var(--primary),var(--accent));

    color:#fff;

    border-color:transparent;

    box-shadow:var(--shadow-md);

}

.roadmap-node-final .roadmap-stats{

    background:var(--surface);
    border:1.5px solid var(--primary);

    order:4;

}

.roadmap-node-final .roadmap-badge{ order:2; }

.roadmap-node-final::after{ order:3; }

.roadmap-node-final .roadmap-stats strong{

    color:var(--primary-dark);

}

.roadmap-badge{

    background:linear-gradient(135deg,var(--primary),var(--accent));

    color:#fff;

    font-size:9.5px;
    font-weight:700;

    letter-spacing:.5px;
    text-transform:uppercase;

    padding:3px 10px;

    border-radius:50px;

}

/*=========================================
WHY WHTNXT
=========================================*/

.why{

    background:var(--surface-alt);

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:60px;

}

.why-card{

    background:var(--surface);

    padding:38px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.why-card:hover{

    transform:translateY(-8px);

    border-color:var(--lavender);

    box-shadow:var(--shadow-md);

}

.icon{

    width:56px;

    height:56px;

    border-radius:16px;

    background:linear-gradient(135deg,var(--sky-soft),var(--lavender-soft));

    color:var(--primary-dark);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;
    font-size:16px;

    margin-bottom:26px;

}

.why-card h3{

    margin-bottom:14px;

    font-size:22px;
    font-weight:700;

}

.why-card p{

    color:var(--text);

}


/*=========================================
ABOUT AERO INDIA
=========================================*/

.about-event{

    padding:110px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    margin-top:60px;

}

.about-content p{

    color:var(--text);

    margin-bottom:22px;

    font-size:16.5px;

}

.about-image img{

    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;

    border-radius:var(--radius);

    box-shadow:var(--shadow-md);

}

/*=========================================
SERVICES
=========================================*/

.services{

    background:var(--surface-alt);

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:60px;

}

.service-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:38px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:var(--sky);

    box-shadow:var(--shadow-md);

}

.service-card h3{

    font-size:22px;
    font-weight:700;

    margin-bottom:14px;

    color:var(--heading);

}

.service-card p{

    color:var(--text);

    font-size:15.5px;

    line-height:1.7;

}

/*=========================================
AERO INDIA SUCCESS
=========================================*/

.success-story{

    padding:120px 0;

}

.success-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    margin-top:60px;

}

.success-item{

    display:flex;

    gap:25px;

    margin-bottom:32px;

    padding-bottom:28px;

    border-bottom:1px solid var(--border);

}

.success-item h3{

    font-size:50px;
    font-weight:800;

    color:var(--primary);

    min-width:110px;

}

.success-item h4{

    font-size:22px;
    font-weight:700;

    margin-bottom:8px;

}

.success-item p{

    color:var(--text);

    line-height:1.7;

}

.success-gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.success-gallery img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.success-gallery img:hover{

    transform:scale(1.04);

    box-shadow:var(--shadow-md);

}

/*=========================================
PROJECT PROCESS
=========================================*/

.process{

    background:var(--surface-alt);

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-top:60px;

}

.process-step{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:32px 28px;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.process-step:hover{

    transform:translateY(-8px);

    border-color:var(--lavender);

    box-shadow:var(--shadow-md);

}

.process-step span{

    display:inline-flex;

    width:46px;

    height:46px;

    border-radius:14px;

    background:linear-gradient(135deg,var(--sky-soft),var(--lavender-soft));

    color:var(--primary-dark);

    align-items:center;

    justify-content:center;

    font-weight:800;

    margin-bottom:22px;

}

.process-step h3{

    font-size:20px;
    font-weight:700;

    margin-bottom:12px;

}

.process-step p{

    color:var(--text);

    line-height:1.7;
    font-size:15px;

}

/*=========================================
FEATURED PROJECTS
=========================================*/

.featured-projects{

    padding:120px 0;

}

.projects-marquee{

    margin-top:60px;

    overflow:hidden;

    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);

    /* Establishes its own stable compositing layer — without this, Chrome can
       fail to repaint newly-scrolled-in tiles of a masked layer during a long
       animated transform, leaving later cards invisible until something else
       (e.g. a card :hover) forces a repaint. */
    transform:translateZ(0);

}

.projects-track{

    display:flex;

    gap:30px;

    width:max-content;

    animation:projects-scroll 100s linear infinite;

    will-change:transform;

}

.projects-marquee:hover .projects-track{

    animation-play-state:paused;

}

@keyframes projects-scroll{

    from{ transform:translateX(0); }

    to{ transform:translateX(-50%); }

}

@media (prefers-reduced-motion: reduce){

    .projects-track{ animation:none; }

}

.project-card{

    flex:0 0 320px;

    overflow:hidden;

    border-radius:var(--radius);

    background:var(--surface);

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-md);

}

.project-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.project-content{

    padding:30px;

}

.project-content span{

    color:var(--primary);

    text-transform:uppercase;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

}

.project-content h3{

    margin:14px 0;

    font-size:22px;
    font-weight:700;

}

.project-content p{

    color:var(--text);

}

/*=========================================
WHY BOOK EARLY
=========================================*/

.booking{

    padding:120px 0;

    background:var(--surface-lavender);

}

.booking-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.section-tag{

    display:inline-block;

    color:var(--primary-dark);

    background:var(--sky-soft);

    padding:8px 18px;

    border-radius:50px;

    text-transform:uppercase;

    letter-spacing:1.5px;

    font-size:13px;
    font-weight:700;

}

.booking h2{

    font-size:42px;
    font-weight:800;

    margin:22px 0;

}

.booking p{

    color:var(--text);

    margin-bottom:30px;

}

.booking-right{

    display:grid;

    gap:18px;

}

.booking-card{

    background:var(--surface);

    border:1px solid var(--border);

    padding:28px;

    border-radius:var(--radius-sm);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.booking-card:hover{

    border-color:var(--primary);

    transform:translateX(8px);

    box-shadow:var(--shadow-md);

}

.booking-card h3{

    margin-bottom:10px;
    font-size:17px;

}

/*=========================================
TESTIMONIALS
=========================================*/

.testimonials{

    padding:120px 0;

}

.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;

}

.testimonial-card{

    background:var(--surface);

    padding:38px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:var(--sky);

    box-shadow:var(--shadow-md);

}

.testimonial-card p{

    color:var(--text);

    line-height:1.8;

    margin-bottom:26px;

    font-size:15.5px;

}

.testimonial-card h4{

    font-size:18px;
    font-weight:700;

    margin-bottom:4px;

}

.testimonial-card span{

    color:var(--primary);

    font-size:14px;
    font-weight:600;

}

/*=========================================
FAQ
=========================================*/

.faq{

    padding:120px 0;

    background:var(--surface-alt);

}

.faq-list{

    max-width:1140px;

    margin:60px auto 0;

    display:grid;
    grid-template-columns:repeat(2,1fr);

    column-gap:60px;

}

.faq-item{

    border-bottom:1px solid var(--border);

}

.faq-question{

    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    background:none;

    border:none;

    color:var(--heading);

    text-align:left;

    padding:26px 4px;

    font-family:inherit;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

}

.faq-question .faq-icon{

    flex-shrink:0;

    width:34px;
    height:34px;

    border-radius:50%;

    background:var(--sky-soft);

    color:var(--primary-dark);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    font-weight:700;

    transition:transform var(--transition), background var(--transition);

}

.faq-item.active .faq-question .faq-icon{

    background:var(--primary);
    color:#fff;

    transform:rotate(45deg);

}

.faq-answer{

    overflow:hidden;

    height:0;

    opacity:0;

}

.faq-answer-inner{

    padding:0 4px 26px;

}

.faq-answer p{

    color:var(--text);

    line-height:1.8;

}

.faq-answer p a{

    color:var(--primary);

    text-decoration:underline;

}

/*=========================================
CONTACT
=========================================*/

.contact{

    padding:120px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-content span{

    display:inline-block;

    color:var(--primary-dark);

    background:var(--sky-soft);

    padding:8px 18px;

    border-radius:50px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    font-size:13px;
    font-weight:700;

}

.contact-content h2{

    font-size:44px;
    font-weight:800;

    margin:22px 0;

}

.contact-content p{

    color:var(--text);

    margin-bottom:35px;

}

.contact-highlights{

    display:grid;

    gap:15px;

}

.contact-highlights div{

    color:var(--heading);
    font-weight:600;

    display:flex;
    align-items:center;
    gap:10px;

}

.contact-highlights div::before{

    content:"✓";

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:22px;
    height:22px;

    border-radius:50%;

    background:var(--primary);
    color:#fff;

    font-size:12px;
    font-weight:800;

}

.contact-details{

    display:flex;
    flex-direction:column;

    gap:14px;

    margin-top:30px;

    padding-top:30px;

    border-top:1px solid var(--border);

}

.contact-details a{

    display:flex;
    align-items:center;
    gap:10px;

    color:var(--heading);
    font-weight:700;
    font-size:15.5px;

    transition:.3s;

}

.contact-details a:hover{

    color:var(--primary);

}

.contact-form{

    background:var(--surface);

    padding:42px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow-md);

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:18px;

}

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:15px 16px;

    background:var(--surface-alt);

    border:1.5px solid var(--border);

    color:var(--heading);

    font-family:inherit;
    font-size:14.5px;

    border-radius:12px;

    margin-bottom:18px;

    transition:.25s;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:var(--text-soft);

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    background:var(--surface);

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    width:100%;

}

/*=========================================
FORM FEEDBACK & HONEYPOT
=========================================*/

.hp-field{

    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    overflow:hidden;
    pointer-events:none;

}

.form-feedback{

    margin-top:14px;

    padding:13px 16px;

    border-radius:12px;

    font-size:14px;
    font-weight:600;

    line-height:1.5;

}

.form-feedback.is-success{

    background:var(--sky-soft);
    color:var(--primary-dark);
    border:1px solid var(--sky);

}

.form-feedback.is-error{

    background:#FDE7E7;
    color:#B23434;
    border:1px solid #F3B7B7;

}

.ajax-form.is-submitting button[type="submit"]{

    opacity:.7;
    pointer-events:none;

}

/*=========================================
FLOATING CONTACT BUTTONS
=========================================*/

.float-contact{

    position:fixed;

    right:22px;
    bottom:22px;

    z-index:900;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:12px;

}

/* Per-site alternate position: mirrors the whole cluster to the bottom-left
   and flips the tooltip side so it still opens away from the screen edge. */
.float-contact.float-contact-left{

    right:auto;
    left:22px;

    align-items:flex-start;

}

.float-contact-left .float-tooltip{

    right:auto;
    left:calc(100% + 12px);

    transform:translateY(-50%) translateX(-6px);

}

.float-contact-left .float-tooltip::after{

    left:auto;
    right:100%;

    border-left-color:transparent;
    border-right-color:var(--heading);

}

.float-contact-left .float-btn:hover .float-tooltip,
.float-contact-left .float-btn:focus-visible .float-tooltip{

    transform:translateY(-50%) translateX(0);

}

.float-btn{

    position:relative;

    width:46px;
    height:46px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-family:inherit;

    cursor:pointer;

    border:2.5px solid var(--surface);

    box-shadow:0 10px 26px -10px rgba(30,58,138,.35), 0 0 0 1px rgba(30,42,58,.05);

    transition:transform var(--transition), box-shadow var(--transition);

}

.float-btn svg{

    width:20px;
    height:20px;

    transition:transform var(--transition);

}

.float-btn:hover{

    transform:translateY(-3px) scale(1.08);

    box-shadow:0 18px 38px -12px rgba(30,58,138,.45), 0 0 0 1px rgba(30,42,58,.05);

}

.float-btn:hover svg{

    transform:scale(1.1);

}

.float-tooltip{

    position:absolute;

    right:calc(100% + 12px);
    top:50%;

    transform:translateY(-50%) translateX(6px);

    background:var(--heading);
    color:#fff;

    font-size:12.5px;
    font-weight:700;

    white-space:nowrap;

    padding:7px 14px;

    border-radius:8px;

    opacity:0;
    pointer-events:none;

    transition:opacity var(--transition), transform var(--transition);

    box-shadow:var(--shadow-sm);

}

.float-tooltip::after{

    content:"";
    position:absolute;

    left:100%;
    top:50%;

    transform:translateY(-50%);

    border:5px solid transparent;
    border-left-color:var(--heading);

}

.float-btn:hover .float-tooltip,
.float-btn:focus-visible .float-tooltip{

    opacity:1;

    transform:translateY(-50%) translateX(0);

}

.float-build{ background:linear-gradient(135deg,#3FB8AF,#1B8A81); }

.float-booking{ background:linear-gradient(135deg,#E0A925,#C1552C); }

.float-whatsapp{ background:linear-gradient(135deg,#34D399,#16A34A); }

.float-phone{ background:linear-gradient(135deg,var(--primary),var(--accent)); }

.float-email{ background:linear-gradient(135deg,#3B4B63,var(--heading)); }

@media (max-width:720px){

    .float-contact{

        right:14px;
        bottom:14px;

        gap:10px;

    }

    .float-contact.float-contact-left{

        right:auto;
        left:14px;

    }

    .float-btn{ width:40px; height:40px; border-width:2px; }

    .float-btn svg{ width:17px; height:17px; }

    .float-tooltip{ display:none; }

}

/*=========================================
GET FREE PROPOSAL POPUP MODAL
=========================================*/

body.modal-open{

    overflow:hidden;

}

.modal-overlay{

    position:fixed;
    inset:0;

    background:rgba(30,42,58,.6);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    z-index:2000;

    opacity:0;
    visibility:hidden;

    transition:opacity .3s ease, visibility 0s linear .3s;

}

.modal-overlay.is-open{

    opacity:1;
    visibility:visible;

    transition:opacity .3s ease, visibility 0s linear 0s;

}

.modal-box{

    position:relative;

    width:100%;
    max-width:600px;
    max-height:90vh;

    overflow-y:auto;

    transform:translateY(24px) scale(.97);

    transition:transform .3s ease;

}

.modal-overlay.is-open .modal-box{

    transform:translateY(0) scale(1);

}

.modal-box h3{

    font-size:24px;
    font-weight:800;

    margin-bottom:8px;
    padding-right:44px;

}

.modal-box > p{

    color:var(--text);
    font-size:14.5px;

    margin-bottom:26px;

}

.modal-box button.modal-close{

    position:absolute;

    top:20px;
    right:20px;

    width:36px;
    height:36px;

    border-radius:50%;

    border:1px solid var(--border);

    background:var(--surface-alt);

    color:var(--heading);

    font-size:20px;
    line-height:1;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.25s;

}

.modal-close:hover{

    background:var(--sky-soft);
    border-color:var(--primary);
    color:var(--primary-dark);

}

@media (max-width:720px){

    .modal-box{ padding:32px 24px; max-height:85vh; }

    .faq-list{ grid-template-columns:1fr; column-gap:0; }

}

/*=========================================
FINAL CTA
=========================================*/

.final-cta{

    padding:120px 0;

    background:linear-gradient(135deg,var(--primary),var(--accent));

    text-align:center;

    position:relative;
    overflow:hidden;

}

.final-cta::before{

    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%,rgba(255,255,255,.18),transparent 40%),
        radial-gradient(circle at 80% 70%,rgba(255,255,255,.14),transparent 42%);

}

.final-cta-content{

    max-width:900px;

    margin:auto;

    position:relative;
    z-index:1;

}

.final-cta span{

    color:#fff;

    background:rgba(255,255,255,.16);

    padding:8px 18px;

    border-radius:50px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    font-size:13px;
    font-weight:700;

}

.final-cta h2{

    font-size:50px;
    font-weight:800;

    color:#fff;

    line-height:1.2;

    margin:25px 0;

}

.final-cta p{

    max-width:760px;

    margin:0 auto 40px;

    color:rgba(255,255,255,.9);

    font-size:18px;

    line-height:1.8;

}

.final-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.final-cta .btn-primary{

    background:#fff;
    color:var(--primary-dark);
    box-shadow:0 12px 30px -10px rgba(0,0,0,.25);

}

.final-cta .btn-outline{

    border:1.5px solid rgba(255,255,255,.5);
    color:#fff;
    background:transparent;

}

.final-cta .btn-outline:hover{

    background:rgba(255,255,255,.14);
    border-color:#fff;

}


/*=========================================
FOOTER
=========================================*/

.footer{

    background:var(--surface-alt);

    border-top:1px solid var(--border);

    padding:70px 0 40px;

    text-align:center;

}

.footer img{

    height:38px;

    margin:0 auto 25px;

}

.footer-content{

    max-width:850px;

    margin:auto;

}

.footer p{

    color:var(--text);

    line-height:1.8;

}

.footer-contact{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:22px;

}

.footer-contact a{

    color:var(--primary-dark);
    font-weight:700;

    transition:.3s;

}

.footer-contact a:hover{

    color:var(--primary);

}

.footer-links{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

    margin:35px 0;

}

.footer-links a{

    color:var(--heading);
    font-weight:600;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

}

.footer-social{

    display:flex;

    justify-content:center;

    margin-top:6px;

}

.footer-social a{

    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border-radius:50%;

    background:var(--surface-alt);
    color:var(--heading);

    transition:.3s;

}

.footer-social a svg{

    width:18px;
    height:18px;

}

.footer-social a:hover{

    background:var(--primary);
    color:#fff;

    transform:translateY(-2px);

}

.copyright{

    margin-top:30px;

    font-size:14px;

    color:var(--text-soft);

}

.visitor-count{

    margin-top:10px;

    font-size:12.5px;

    color:var(--text-soft);

    opacity:.75;

}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width:1080px){

    .hero-content,
    .about-grid,
    .success-wrapper,
    .booking-wrapper,
    .contact-wrapper{

        grid-template-columns:1fr;

    }

    .hero-right{ margin-top:60px; }

    .stats-grid,
    .why-grid,
    .services-grid,
    .testimonial-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .process-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .hero h1{ font-size:36px; }

    .section-heading h2{ font-size:34px; }

    .roadmap-dot{ width:52px; height:52px; font-size:11.5px; }

    .roadmap-node-final .roadmap-dot{ width:70px; height:70px; font-size:14px; }

    .roadmap-stats{ padding:9px 14px; }

    .roadmap-stats span{ font-size:11px; }

    .roadmap-stats strong{ font-size:14.5px; }

}

@media (max-width:720px){

    .nav,
    .header-btns .btn-outline{

        display:none;

    }

    .hero{ padding-top:140px; }

    .hero h1{ font-size:30px; }

    .hero-buttons{ flex-direction:column; }

    .trust-logos img{ height:72px; width:170px; }

    .marquee-track{ gap:48px; }

    /* Mobile roadmap: a clean single-column list instead of the desktop
    S-curve — the winding path doesn't translate well to narrow screens. */
    .roadmap-path{

        aspect-ratio:auto;
        max-width:400px;

        display:flex;
        flex-direction:column;

    }

    .roadmap-svg{ display:none; }

    .roadmap-node{

        position:relative;
        left:auto;
        top:auto;

        transform:none;

        flex-direction:row;
        justify-content:flex-start;
        gap:14px;

        padding:12px 0;

    }

    .roadmap-node::after{

        content:"";
        position:absolute;
        top:-12px;
        left:20px;

        order:0;

        width:9px;
        height:12px;

        border-radius:2px;

    }

    .roadmap-node:first-child::after{ content:none; }

    .roadmap-dot,
    .roadmap-node-label-top .roadmap-dot{ order:1; width:50px; height:50px; font-size:11px; flex-shrink:0; }

    .roadmap-node-final .roadmap-dot{ width:60px; height:60px; font-size:12.5px; }

    .roadmap-node > .roadmap-stats,
    .roadmap-node-label-top > .roadmap-stats{ order:2; }

    .roadmap-stats{ flex:1; padding:10px 14px; }

    .roadmap-stats span{ font-size:11.5px; }

    .roadmap-stats strong{ font-size:15px; }

    .roadmap-node-final{ flex-wrap:wrap; }

    .roadmap-node-final .roadmap-badge{ order:3; align-self:center; }

    .roadmap-node-final .roadmap-stats{ order:4; flex-basis:100%; margin-left:58px; margin-top:-4px; }

    .hero-buttons .btn{ width:100%; }

    .stats-grid,
    .why-grid,
    .services-grid,
    .testimonial-grid,
    .process-grid,
    .form-grid{

        grid-template-columns:1fr;

    }

    .project-card{ flex-basis:260px; }

    .project-card img{ height:180px; }

    .hero-form{ padding:28px; }

    .hero-form-row{ grid-template-columns:1fr; }

    .final-cta h2{ font-size:34px; }

    .section-heading h2{ font-size:30px; }

}

@media (prefers-reduced-motion: reduce){

    html.js-ready .reveal{
        opacity:1 !important;
        transform:none !important;
    }

}

/* ==========================================
   Admin-panel-generated extras: text-only logo fallback (when a site has
   no uploaded logo yet) and the draft-preview banner shown to admins only.
========================================== */

.logo-text{
    font-family:var(--font-heading, 'Plus Jakarta Sans'), var(--font-body, 'Inter'), Arial, sans-serif;
    font-weight:800;
    font-size:22px;
    color:var(--heading);
}

.preview-banner{
    position:sticky;
    top:0;
    z-index:999;
    background:var(--heading);
    color:#fff;
    text-align:center;
    font-size:13px;
    font-weight:600;
    letter-spacing:.02em;
    padding:8px 16px;
}