:root{
    --soft-white:#F8FAFC;
    --pure-white:#FFFFFF;
    --ocean-blue:#0E7DB8;
    --sky-blue:#12B5E5;
    --cyan-accent:#00C2D7;
    --dark-slate:#183B56;
    --light-gray:#E2E8F0;
    --radius:16px;
    --transition: all .35s cubic-bezier(.25,.8,.25,1);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    font-family:'Inter', sans-serif;
    color:var(--dark-slate);
    background:var(--soft-white);
    line-height:1.7;
}

h1,h2,h3,h4,h5,.display-font{
    font-family:'Plus Jakarta Sans', sans-serif;
    color:var(--dark-slate);
    letter-spacing:-0.02em;
}

a{text-decoration:none;}

.text-gradient{
    background:linear-gradient(90deg, var(--ocean-blue), var(--cyan-accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.bg-ocean-gradient{
    background:linear-gradient(135deg, var(--ocean-blue) 0%, var(--sky-blue) 55%, var(--cyan-accent) 100%);
}

.section-eyebrow{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.78rem;
    font-weight:700;
    color:var(--ocean-blue);
}

.section-pad{ padding:6rem 0; }
@media (max-width:768px){ .section-pad{ padding:4rem 0; } }

/* ===== Navbar ===== */
.navbar{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:var(--transition);
    border-bottom:1px solid transparent;
}
.navbar.scrolled{
    box-shadow:0 8px 30px rgba(14,125,184,.1);
    border-bottom:1px solid var(--light-gray);
}
.navbar-brand{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:800;
    font-size:1.2rem;
    color:var(--dark-slate) !important;
}
.navbar-brand .brand-accent{ color:var(--ocean-blue); }
.navbar-brand .brand-icon{
    width:42px;height:42px;border-radius:12px;
    background:linear-gradient(135deg,var(--ocean-blue),var(--cyan-accent));
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-size:1.2rem;margin-right:.55rem;
}
.nav-link{
    font-weight:600;
    color:var(--dark-slate) !important;
    position:relative;
    margin:0 .45rem;
    padding:.5rem .2rem !important;
}
.nav-link::after{
    content:'';
    position:absolute;left:0;bottom:0;
    width:0;height:2px;
    background:linear-gradient(90deg,var(--ocean-blue),var(--cyan-accent));
    transition:var(--transition);
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.btn-gradient{
    background:linear-gradient(90deg, var(--ocean-blue), var(--cyan-accent));
    color:#fff;
    border:none;
    border-radius:50px;
    padding:.65rem 1.6rem;
    font-weight:700;
    transition:var(--transition);
    box-shadow:0 8px 20px rgba(14,125,184,.25);
}
.btn-gradient:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(14,125,184,.35);
    color:#fff;
}
.btn-outline-ocean{
    border:2px solid var(--ocean-blue);
    color:var(--ocean-blue);
    border-radius:50px;
    padding:.6rem 1.5rem;
    font-weight:700;
    background:transparent;
    transition:var(--transition);
}
.btn-outline-ocean:hover{
    background:var(--ocean-blue);
    color:#fff;
    transform:translateY(-3px);
}

/* ===== Hero ===== */
.hero{
    position:relative;
    overflow:hidden;
    padding:8.5rem 0 6rem;
    background:
            radial-gradient(circle at 85% 15%, rgba(0,194,215,.18), transparent 45%),
            radial-gradient(circle at 10% 90%, rgba(14,125,184,.15), transparent 45%),
            var(--soft-white);
}
.hero::before{
    content:'';
    position:absolute; inset:0;
    background-image:
            linear-gradient(rgba(14,125,184,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(14,125,184,.05) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, black, transparent 75%);
    pointer-events:none;
}
.hero .badge-soft{
    background:rgba(14,125,184,.08);
    color:var(--ocean-blue);
    border:1px solid rgba(14,125,184,.2);
    border-radius:50px;
    padding:.45rem 1rem;
    font-weight:700;
    font-size:.82rem;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
}
.hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.6rem);
    font-weight:800;
    line-height:1.12;
}
.hero-visual{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 60px -15px rgba(14,125,184,.35);
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-float-card{
    position:absolute;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.6);
    border-radius:16px;
    padding:1rem 1.25rem;
    box-shadow:0 18px 40px rgba(24,59,86,.18);
    animation:floatY 4.5s ease-in-out infinite;
}
.hero-float-card.card-1{ bottom:-20px; left:-25px; }
.hero-float-card.card-2{ top:-20px; right:-20px; animation-delay:1.4s; }
@keyframes floatY{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
}

/* ===== Stats ===== */
.stats-section{
    background:var(--dark-slate);
    position:relative;
    overflow:hidden;
}
.stats-section::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(14,125,184,.25), rgba(0,194,215,.12));
}
.stat-item{ position:relative; z-index:1; }
.stat-number{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:800;
    font-size:clamp(2rem, 3.6vw, 2.9rem);
    color:#fff;
}
.stat-label{ color:rgba(255,255,255,.75); font-weight:500; font-size:.95rem; }

/* ===== Glass cards ===== */
.glass-card{
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(24,59,86,.08);
    transition:var(--transition);
    height:100%;
}
.glass-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 45px rgba(14,125,184,.18);
    border-color:rgba(14,125,184,.3);
}

/* ===== Service cards ===== */
.service-card{ padding:2.2rem 1.8rem; text-align:left; }
.service-icon{
    width:62px;height:62px;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--ocean-blue), var(--cyan-accent));
    color:#fff;font-size:1.6rem;
    margin-bottom:1.3rem;
    transition:var(--transition);
}
.service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.08); }
.service-card .arrow-link{
    color:var(--ocean-blue);
    font-weight:700;
    font-size:.9rem;
    display:inline-flex; align-items:center; gap:.35rem;
}
.service-card .arrow-link i{ transition:var(--transition); }
.service-card:hover .arrow-link i{ transform:translateX(5px); }

/* ===== Product cards ===== */
.product-card{ overflow:hidden; }
.product-img-wrap{ overflow:hidden; border-radius:16px 16px 0 0; height:220px; }
.product-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.product-card:hover .product-img-wrap img{ transform:scale(1.08); }
.product-body{ padding:1.6rem; }
.product-tag{
    background:rgba(0,194,215,.12);
    color:var(--ocean-blue);
    border-radius:50px;
    padding:.2rem .75rem;
    font-size:.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.view-details-btn{
    color:var(--dark-slate);
    font-weight:700;
    font-size:.9rem;
    display:inline-flex;align-items:center;gap:.4rem;
    border-bottom:2px solid var(--cyan-accent);
    padding-bottom:2px;
    transition:var(--transition);
}
.view-details-btn:hover{ color:var(--ocean-blue); gap:.6rem; }

/* ===== Why choose us ===== */
.feature-mini{
    display:flex; gap:1rem; align-items:flex-start;
    padding:1.4rem;
    border-radius:14px;
    transition:var(--transition);
}
.feature-mini:hover{ background:rgba(14,125,184,.06); transform:translateX(4px); }
.feature-mini .icon-box{
    min-width:50px; height:50px; border-radius:12px;
    background:var(--soft-white);
    border:1px solid var(--light-gray);
    display:flex; align-items:center; justify-content:center;
    color:var(--ocean-blue); font-size:1.3rem;
}

/* ===== About ===== */
.about-img-wrap{
    position:relative; border-radius:24px;
    box-shadow:0 25px 50px -10px rgba(24,59,86,.25);
}
.about-img-wrap img{ width:100%; display:block; }
.about-badge{
    position:absolute; bottom:-25px; right:-15px;
    background:#fff;
    border-radius:16px;
    padding:1.1rem 1.4rem;
    box-shadow:0 20px 40px rgba(24,59,86,.18);
}

/* ===== CTA banner ===== */
.cta-banner{
    border-radius:28px;
    overflow:hidden;
    position:relative;
    padding:4rem 3rem;
}
.cta-banner::before{
    content:'';
    position:absolute; inset:0;
    background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.12), transparent 45%);
}

/* ===== Contact ===== */
.contact-info-card{
    background:var(--dark-slate);
    border-radius:var(--radius);
    color:#fff;
    padding:2.5rem;
}
.contact-info-card .info-row{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.6rem; }
.contact-info-card .info-row .ic{
    width:46px;height:46px;border-radius:12px;
    background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    color:var(--cyan-accent); font-size:1.15rem; flex-shrink:0;
}
.form-control{
    border-radius:12px;
    border:1px solid var(--light-gray);
    padding:.8rem 1rem;
    background:var(--pure-white);
}
.form-control:focus{
    border-color:var(--ocean-blue);
    box-shadow:0 0 0 .2rem rgba(14,125,184,.15);
}

/* ===== Footer ===== */
footer{ background:var(--dark-slate); color:rgba(255,255,255,.75); }
footer h6{ color:#fff; font-weight:700; margin-bottom:1.2rem; }
footer a{ color:rgba(255,255,255,.65); transition:var(--transition); }
footer a:hover{ color:var(--cyan-accent); }
.social-icon{
    width:40px;height:40px;border-radius:10px;
    background:rgba(255,255,255,.08);
    display:inline-flex;align-items:center;justify-content:center;
    color:#fff; transition:var(--transition);
}
.social-icon:hover{ background:linear-gradient(135deg,var(--ocean-blue),var(--cyan-accent)); transform:translateY(-4px); }

/* ===== Scroll reveal ===== */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .hero-float-card{ animation:none; }
}

/* Back to top */
#backToTop{
    position:fixed; bottom:25px; right:25px;
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(135deg,var(--ocean-blue),var(--cyan-accent));
    color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 25px rgba(14,125,184,.35);
    opacity:0; visibility:hidden; transform:translateY(15px);
    transition:var(--transition); z-index:1000; border:none;
}
#backToTop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ============================================================
    PAGE HERO — compact variant (same visual language)
 ============================================================ */
.page-hero{
    position:relative;
    overflow:hidden;
    padding:9rem 0 4.5rem;
    background:
            radial-gradient(circle at 80% 20%, rgba(0,194,215,.18), transparent 45%),
            radial-gradient(circle at 10% 85%, rgba(14,125,184,.14), transparent 45%),
            var(--soft-white);
}
.page-hero::before{
    content:'';
    position:absolute; inset:0;
    background-image:
            linear-gradient(rgba(14,125,184,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(14,125,184,.05) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, black, transparent 80%);
    pointer-events:none;
}

/* Breadcrumb */
.breadcrumb{ font-size:.85rem; font-weight:500; margin-bottom:1.2rem; }
.breadcrumb-item a{ color:var(--ocean-blue); }
.breadcrumb-item.active{ color:var(--dark-slate); }
.breadcrumb-item+.breadcrumb-item::before{ color:var(--ocean-blue); }

.page-hero .badge-soft{
    background:rgba(14,125,184,.08);
    color:var(--ocean-blue);
    border:1px solid rgba(14,125,184,.2);
    border-radius:50px;
    padding:.4rem .95rem;
    font-weight:700;
    font-size:.78rem;
    display:inline-flex; align-items:center; gap:.4rem;
}

.page-hero h1{
    font-size:clamp(1.9rem, 3.8vw, 2.9rem);
    font-weight:800;
    line-height:1.15;
}

/* ============================================================
     PRICE LIST CARD
  ============================================================ */
.price-card{ overflow:hidden; display:flex; flex-direction:column; }

/* Image */
.price-card__img{
    overflow:hidden;
    height:auto;
    background:var(--soft-white);
    flex-shrink:0;
}
.price-card__img img{
    width:100%; height:100%; object-fit:cover;
    transition:var(--transition);
}
.price-card:hover .price-card__img img{ transform:scale(1.07); }

/* Body */
.price-card__body{
    padding:1.4rem 1.5rem 1.5rem;
    display:flex; flex-direction:column; flex:1;
}

/* Brand chip */
.brand-chip{
    width: fit-content;
    display:inline-flex; align-items:center; gap:.35rem;
    background:rgba(14,125,184,.08);
    color:var(--ocean-blue);
    border:1px solid rgba(14,125,184,.18);
    border-radius:50px;
    padding:.22rem .75rem;
    font-size:.73rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:.85rem;
}

.price-card__name{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:1rem;
    font-weight:700;
    color:var(--dark-slate);
    margin-bottom:.55rem;
    line-height:1.3;
}

/* Spec rows */
.price-card__meta{
    list-style:none;
    padding:0; margin:0 0 0.3rem;
    display:flex; flex-direction:column; gap:.28rem;
}
.price-card__meta li{
    display:flex; align-items:baseline; gap:.45rem;
    font-size:.83rem;
    color:#64748b;
}
.price-card__meta li .meta-label{
    font-weight:600;
    color:var(--dark-slate);
    white-space:nowrap;
    min-width:60px;
}

/* Divider */
.price-card__divider{
    border:none;
    border-top:1px solid var(--light-gray);
    margin:.6rem 0 1rem;
}

/* Price row */
.price-card__footer{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:auto;
}
.price-tag{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:1.45rem;
    font-weight:800;
    background:linear-gradient(90deg, var(--ocean-blue), var(--cyan-accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    line-height:1;
}
.price-tag small{
    font-size:.7rem;
    font-weight:600;
    color:#94a3b8;
    background:none;
    -webkit-text-fill-color:unset;
    display:block;
    margin-top:2px;
}
.inquiry-btn{
    display:inline-flex; align-items:center; gap:.35rem;
    background:rgba(14,125,184,.08);
    border:1.5px solid rgba(14,125,184,.2);
    color:var(--ocean-blue);
    border-radius:50px;
    padding:.38rem .9rem;
    font-size:.8rem;
    font-weight:700;
    transition:var(--transition);
}
.inquiry-btn:hover{
    background:var(--ocean-blue);
    border-color:var(--ocean-blue);
    color:#fff;
    transform:translateY(-2px);
}
.inquiry-btn i{ font-size:.85rem; }