/* ==================================================================
   SHIV SHAKTI ENTERPRISES — theme matched to logo (brand red + slate)
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --ink:#0f172a;        /* slate — headings, dark sections (from logo hexagon) */
    --slate:#475569;      /* body copy */
    --paper:#f8fafc;      /* page background */
    --white:#ffffff;
    --line:#edf2f7;

    --brand:#dc2626;       /* the red "S" */
    --brand-deep:#991b1b;  /* darker red in the logo's gradient */
    --blush:#fef2f2;       /* tint for badges/backgrounds */

    --ink-2:#1e2536;       /* deep slate — alternate dark section */
    --wine:#3f0f18;        /* deep maroon — brand-family dark section */

    --radius-lg:24px;
    --radius-xl:32px;
}

*{ box-sizing:border-box; }

html{
    overflow-x:hidden;
}

body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
}

h1,h2,h3,h4,h5{
    font-family:'Sora', sans-serif;
    overflow-wrap:break-word;
}

a{ transition:.25s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ------------------------------------------------------------------ */
/* Brand eyebrow — the recurring "— LABEL —" motif lifted from the    */
/* logo's "— ENTERPRISES —" tagline treatment. Used everywhere a      */
/* section needs a label, instead of a generic pill badge.            */
/* ------------------------------------------------------------------ */

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:14px;
    color:var(--brand);
    font-weight:700;
    font-size:13px;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.eyebrow::before,
.eyebrow::after{
    content:"";
    width:22px;
    height:2px;
    background:linear-gradient(90deg, var(--brand), var(--brand-deep));
    border-radius:2px;
}

.section-title{
    text-align:center;
}

.section-title h2{
    font-size:46px;
    font-weight:800;
    margin-top:18px;
    color:var(--ink);
    letter-spacing:-0.01em;
}

.section-title p{
    color:var(--slate);
    max-width:680px;
    margin:16px auto 0;
    font-size:17px;
    line-height:1.7;
}

/* ------------------------------------------------------------------ */
/* NAVBAR                                                              */
/* ------------------------------------------------------------------ */

.navbar{
    height:90px;
    background:#ffffff;
    border-bottom:1px solid var(--line);
    z-index:999;
    transition:height .35s ease, box-shadow .35s ease, top .35s ease,
               left .35s ease, right .35s ease, border-radius .35s ease;
}

.navbar.scrolled{
    height:72px;
    top:14px;
    left:14px;
    right:14px;
    border-bottom-color:transparent;
    border-radius:60px;
    box-shadow:0 18px 40px -16px rgba(15,23,42,.22);
}

@media(min-width:992px){
    .navbar.scrolled{ left:24px; right:24px; }
    .navbar.scrolled .container{ max-width:100%; }
}

/* Brand mark — text-based logo using the same dash motif as the rest
   of the site, until a real logo file is wired in. */

.brand-link{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    transition:.3s;
}

.brand-link:hover{ transform:translateY(-1px); }

.brand-glyph{
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:12px;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    font-family:'Sora', sans-serif;
    font-weight:800;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 22px -8px rgba(220,38,38,.5);
    transition:height .35s ease, width .35s ease;
}

.navbar.scrolled .brand-glyph{ width:40px; height:40px; font-size:19px; }

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.brand-name{
    font-family:'Sora', sans-serif;
    font-weight:800;
    font-size:18px;
    color:var(--ink);
}

.brand-tagline{
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--slate);
}

.site-logo{
    height:60px;
    width:auto;
    object-fit:contain;
    transition:height .35s ease;
}

.navbar.scrolled .site-logo{ height:48px; }

.nav-link{
    color:var(--ink) !important;
    font-weight:500;
    margin:0 10px;
    position:relative;
}

.nav-link::after{
    content:"";
    position:absolute;
    left:0; bottom:-4px;
    width:0; height:2px;
    background:var(--brand);
    transition:.3s;
}

.nav-link:hover::after{ width:100%; }

.nav-link.active{ color:var(--brand) !important; font-weight:600; }

.nav-link.active::before{
    content:"";
    position:absolute;
    left:50%;
    top:-10px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--brand);
    transform:translateX(-50%);
}

.nav-link.active::after{ width:100%; }

.nav-link-diwali{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    padding:8px 16px !important;
    border-radius:50px;
    color:#fff !important;
    font-weight:700 !important;
    background:linear-gradient(135deg,#f59e0b,var(--brand) 65%,var(--brand-deep));
    box-shadow:0 6px 16px -6px rgba(245,158,11,.6);
    animation:diwaliPulse 2.2s ease-in-out infinite;
}

.nav-link-diwali::after{ display:none; }

.nav-link-diwali:hover{
    color:#fff !important;
    filter:brightness(1.08);
}

.diwali-icon{ display:inline-block; animation:diwaliSpark 1.4s ease-in-out infinite; }

@keyframes diwaliPulse{
    0%,100%{ box-shadow:0 6px 16px -6px rgba(245,158,11,.6); }
    50%{ box-shadow:0 6px 22px -4px rgba(245,158,11,.95); }
}

@keyframes diwaliSpark{
    0%,100%{ transform:rotate(0deg) scale(1); }
    25%{ transform:rotate(-8deg) scale(1.1); }
    75%{ transform:rotate(8deg) scale(1.1); }
}

@media(max-width:991px){
    .nav-link-diwali{
        display:inline-flex !important;
        margin-bottom:6px;
    }
}

.quote-btn{
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:white;
    padding:14px 26px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 10px 24px -8px rgba(220,38,38,.45);
}

.quote-btn:hover{ color:white; transform:translateY(-2px); }

/* Custom hamburger (no Bootstrap JS dependency) */

.navbar-toggler{
    border:none;
    background:none;
    width:34px;
    height:26px;
    padding:0;
    display:none;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.navbar-toggler span{
    display:block;
    height:2px;
    width:100%;
    background:var(--ink);
    border-radius:2px;
    transition:.3s;
}

.navbar-toggler.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.navbar-toggler.open span:nth-child(2){ opacity:0; }
.navbar-toggler.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media(max-width:991px){

    .navbar .container{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .navbar-toggler{ display:flex; }

    .nav-panel{
        position:fixed;
        top:90px;
        left:0; right:0;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 20px 40px -20px rgba(15,23,42,.15);
        max-height:0;
        overflow:hidden;
        transition:max-height .4s cubic-bezier(.16,1,.3,1);
    }

    .navbar.scrolled + .nav-panel,
    .navbar.scrolled .nav-panel{ top:72px; }

    .nav-panel.open{ max-height:420px; }

    .nav-panel .navbar-nav{
        flex-direction:column;
        padding:20px 24px 6px;
        margin:0 !important;
    }

    .nav-panel .nav-item{
        opacity:0;
        transform:translateY(-8px);
        transition:opacity .35s, transform .35s;
    }

    .nav-panel.open .nav-item{ opacity:1; transform:translateY(0); }
    .nav-panel.open .nav-item:nth-child(1){ transition-delay:.05s; }
    .nav-panel.open .nav-item:nth-child(2){ transition-delay:.1s; }
    .nav-panel.open .nav-item:nth-child(3){ transition-delay:.15s; }
    .nav-panel.open .nav-item:nth-child(4){ transition-delay:.2s; }
    .nav-panel.open .nav-item:nth-child(5){ transition-delay:.25s; }
    .nav-panel.open .nav-item:nth-child(6){ transition-delay:.3s; }

    .nav-link{ display:block; padding:12px 0; margin:0; }
    .nav-link.active::before{ display:none; }

    .nav-panel .quote-btn{
        display:block;
        text-align:center;
        margin:14px 24px 24px;
        opacity:0;
        transform:translateY(-8px);
        transition:opacity .35s .35s, transform .35s .35s;
    }

    .nav-panel.open .quote-btn{ opacity:1; transform:translateY(0); }
}

@media(min-width:992px){
    .nav-panel{
        display:flex;
        align-items:center;
        flex:1;
    }
}

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */

.hero{
    position:relative;
    padding-top:120px;
    background:#ffffff;
    overflow:hidden;
}

.hero-bg-blob{
    position:absolute;
    top:-200px;
    right:-200px;
    width:600px;
    height:600px;
    background:radial-gradient(circle, rgba(220,38,38,.10), transparent 70%);
    border-radius:50%;
    pointer-events:none;
    animation:driftBlob 14s ease-in-out infinite;
}

.hero-bg-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
    background-size:60px 60px;
    pointer-events:none;
}

@keyframes driftBlob{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-40px,30px) scale(1.08); }
}

.hero-tag{
    background:var(--blush);
    color:var(--brand);
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}

.hero-heading{
    font-family:'Sora', sans-serif;
    font-size:68px;
    font-weight:800;
    line-height:1.08;
    margin-top:25px;
    color:var(--ink);
}

.hero-heading .accent-word{
    position:relative;
    color:var(--brand);
    white-space:nowrap;
}

.hero-heading .accent-word svg{
    position:absolute;
    left:0; bottom:-6px;
    width:100%;
    height:14px;
    overflow:visible;
}

.hero-heading .accent-word path{
    fill:none;
    stroke:var(--brand);
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:240;
    stroke-dashoffset:240;
    animation:drawUnderline 1s ease-out 0.9s forwards;
}

@keyframes drawUnderline{
    to{ stroke-dashoffset:0; }
}

.hero-text{
    margin-top:25px;
    font-size:18px;
    line-height:1.8;
    color:var(--slate);
    max-width:540px;
}

.hero-actions{
    margin-top:35px;
    display:flex;
    gap:15px;
}

.btn-primary-custom{
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    text-decoration:none;
    padding:12px 12px 12px 28px;
    border-radius:50px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:14px;
    box-shadow:0 14px 30px -10px rgba(220,38,38,.5);
    transition:.3s;
}

.btn-primary-custom:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 18px 36px -8px rgba(220,38,38,.55);
}

.btn-outline-custom{
    border:1px solid #dbe4ee;
    color:var(--ink);
    text-decoration:none;
    padding:12px 12px 12px 28px;
    border-radius:50px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:14px;
    transition:.3s;
}

.btn-outline-custom:hover{
    border-color:var(--brand);
    color:var(--brand);
}

/* ── Pill-button trailing arrow badge (reused across all CTA buttons) ── */
.btn-arrow{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    line-height:1;
    background:rgba(255,255,255,.22);
    transition:.3s;
}
.btn-outline-custom .btn-arrow{
    background:var(--blush);
    color:var(--brand);
}
.btn-primary-custom:hover .btn-arrow,
.btn-outline-custom:hover .btn-arrow{ transform:rotate(45deg); }

.hero-stats{
    margin-top:55px;
    display:flex;
    gap:50px;
}

.hero-stats h3{
    font-family:'Sora', sans-serif;
    font-size:30px;
    font-weight:800;
    margin-bottom:4px;
    color:var(--ink);
}

.hero-stats p{
    color:var(--slate);
    margin:0;
    font-size:14px;
}

.hero-visual{
    position:relative;
}

.hero-main-image{
    border-radius:30px;
    box-shadow:0 30px 70px -10px rgba(15,23,42,.15);
}

.hero-3d-wrap{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
}

#hero3dCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    transition:opacity .6s ease;
}

#hero3dCanvas.is-ready{ opacity:1; }

.hero-3d-wrap #hero3dFallback{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0;
    box-shadow:none;
}

.floating-card{
    position:absolute;
    background:white;
    padding:14px 20px;
    border-radius:14px;
    box-shadow:0 15px 40px rgba(15,23,42,.12);
    font-weight:600;
    z-index:2;
    animation:floatCard 5s ease-in-out infinite;
}

.card-1{ top:30px; left:-40px; animation-delay:0s; }
.card-2{ top:220px; right:-30px; animation-delay:1.2s; }
.card-3{ bottom:40px; left:-20px; animation-delay:2.4s; }

@keyframes floatCard{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-14px) rotate(-1.5deg); }
}

@media(max-width:991px){
    .hero-heading{ font-size:42px; }
    .hero-actions{ flex-direction:column; }
    .hero-stats{ gap:25px; flex-wrap:wrap; }
    .floating-card{ display:none; }
}

/* ------------------------------------------------------------------ */
/* Scroll-reveal utility — toggled by script.js via IntersectionObserver */
/* ------------------------------------------------------------------ */

[data-animate]{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    /* Failsafe: if script.js never loads (wrong path, blocked, etc.) this
       forces full visibility after 2.5s instead of leaving content hidden
       forever. Harmless if the JS-driven reveal already ran first. */
    animation: forceReveal 0.01s 2.5s forwards;
}

@keyframes forceReveal{
    to{ opacity:1; transform:none; clip-path:none; }
}

[data-animate].in-view{
    opacity:1;
    transform:translateY(0);
}

[data-animate="fade"]{ transform:none; }

[data-animate-delay="1"]{ transition-delay:.08s; }
[data-animate-delay="2"]{ transition-delay:.16s; }
[data-animate-delay="3"]{ transition-delay:.24s; }
[data-animate-delay="4"]{ transition-delay:.32s; }
[data-animate-delay="5"]{ transition-delay:.4s; }
[data-animate-delay="6"]{ transition-delay:.48s; }

/* ------------------------------------------------------------------ */
/* SOLUTIONS                                                           */
/* ------------------------------------------------------------------ */

.solutions-section{
    padding:110px 0;
    background:var(--paper);
}

.solution-card{
    position:relative;
    background:white;
    padding:36px;
    border-radius:var(--radius-lg);
    height:100%;
    transition:.35s;
    border:1px solid var(--line);
    overflow:hidden;
}

.solution-card::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%; height:3px;
    background:linear-gradient(90deg, var(--brand), var(--brand-deep));
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s;
}

.solution-card:hover::before{ transform:scaleX(1); }

.solution-card:hover{
    transform:translateY(-10px);
    box-shadow:0 24px 50px -12px rgba(15,23,42,.1);
    border-color:transparent;
}

.solution-card .icon-box{
    width:60px;
    height:60px;
    border-radius:16px;
    background:var(--blush);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:22px;
    transition:.4s;
}

.solution-card:hover .icon-box{
    transform:rotate(-8deg) scale(1.08);
    filter:brightness(1.06);
}

/* Colorful gradient icon badges (rotated across solution cards) */
.icon-box.grad-blue{   background:linear-gradient(135deg,#3b82f6,#6366f1); }
.icon-box.grad-purple{ background:linear-gradient(135deg,#a855f7,#7c3aed); }
.icon-box.grad-green{  background:linear-gradient(135deg,#22c55e,#0d9488); }
.icon-box.grad-amber{  background:linear-gradient(135deg,#f59e0b,#dc2626); }
.icon-box[class*="grad-"]{ color:#fff; }

.solution-card h4{
    font-weight:700;
    margin-bottom:14px;
    font-size:19px;
}

.solution-card p{
    color:var(--slate);
    margin-bottom:0;
    line-height:1.7;
}

/* ------------------------------------------------------------------ */
/* CATEGORIES                                                          */
/* ------------------------------------------------------------------ */

.categories-section{
    padding:120px 0;
    background:#ffffff;
}

.category-card-large,
.category-card-small{
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    cursor:pointer;
    background:#e2e8f0;
    text-decoration:none;
    color:inherit;
    box-shadow:0 20px 45px -18px rgba(15,23,42,.16);
}

.category-card-large{ height:500px; }
.category-card-small{ height:240px; }

.category-card-large img,
.category-card-small img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s cubic-bezier(.16,1,.3,1);
}

.category-card-large:hover img,
.category-card-small:hover img{
    transform:scale(1.08);
}

.category-content{
    position:absolute;
    bottom:0; left:0;
    width:100%;
    padding:30px;
    color:white;
    background:linear-gradient(to top, rgba(15,23,42,.85), rgba(15,23,42,0));
    transform:translateY(8px);
    transition:.4s;
}

.category-card-large:hover .category-content,
.category-card-small:hover .category-content{
    transform:translateY(0);
}

.category-content h3{ font-size:30px; font-weight:700; }
.category-content h4{ font-size:21px; font-weight:600; margin:0; }

.category-content span.cat-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    color:#fca5a5;
    opacity:0;
    transition:.3s;
}

.category-card-large:hover .cat-link,
.category-card-small:hover .cat-link{ opacity:1; }

/* ------------------------------------------------------------------ */
/* WHY SECTION                                                         */
/* ------------------------------------------------------------------ */

.why-section{
    padding:120px 0;
    background:var(--paper);
}

.why-title{
    font-size:50px;
    font-weight:800;
    line-height:1.12;
    margin-top:15px;
    margin-bottom:25px;
}

.why-text{
    color:var(--slate);
    font-size:18px;
    line-height:1.8;
    max-width:540px;
}

.why-list{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.why-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
    padding:10px 0;
    color:var(--ink);
    font-weight:500;
}

.why-item .check{
    width:22px;
    height:22px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--blush);
    color:var(--brand);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.stat-card{
    background:white;
    border-radius:var(--radius-lg);
    padding:38px;
    text-align:center;
    border:1px solid var(--line);
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 50px -14px rgba(15,23,42,.1);
}

.stat-card h3{
    font-family:'Sora', sans-serif;
    font-size:40px;
    font-weight:800;
    color:var(--brand);
}

.stat-card p{ margin:4px 0 0; color:var(--slate); }

/* ------------------------------------------------------------------ */
/* CATALOGUE CTA                                                       */
/* ------------------------------------------------------------------ */

.catalogue-section{
    padding:110px 0;
    background:#ffffff;
}

.catalogue-box{
    position:relative;
    background:linear-gradient(135deg, var(--ink), #1e293b);
    border-radius:var(--radius-xl);
    padding:70px;
    color:white;
    overflow:hidden;
}

.catalogue-box::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle at 85% 20%, rgba(220,38,38,.25), transparent 45%);
    pointer-events:none;
}

.catalogue-tag{
    color:#fca5a5;
    font-weight:700;
    font-size:13px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.catalogue-box h2{
    font-size:46px;
    font-weight:800;
    margin-top:15px;
    margin-bottom:20px;
    position:relative;
    z-index:1;
}

.catalogue-box p{
    color:#cbd5e1;
    max-width:640px;
    position:relative;
    z-index:1;
}

.catalogue-features{
    margin-top:28px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    position:relative;
    z-index:1;
}

.catalogue-features span{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
    padding:10px 16px;
    border-radius:50px;
    font-size:14px;
}

.catalogue-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:white;
    padding:14px 14px 14px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    margin-bottom:15px;
    position:relative;
    z-index:1;
    transition:.3s;
}

.catalogue-btn:hover{ color:white; transform:translateY(-3px); }
.catalogue-btn:hover .btn-arrow{ transform:rotate(45deg); }

.whatsapp-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    border:1px solid rgba(255,255,255,.15);
    color:white;
    padding:14px 14px 14px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    position:relative;
    z-index:1;
    transition:.3s;
}

.whatsapp-btn:hover{ border-color:rgba(255,255,255,.4); }
.whatsapp-btn:hover .btn-arrow{ transform:rotate(45deg); }

/* ------------------------------------------------------------------ */
/* ENQUIRY                                                              */
/* ------------------------------------------------------------------ */

.enquiry-section{
    padding:120px 0;
    background:var(--paper);
}

.enquiry-title{
    font-size:clamp(30px,7vw,48px);
    font-weight:800;
    margin-top:15px;
    margin-bottom:20px;
}

.enquiry-text{
    color:var(--slate);
    line-height:1.8;
}

.enquiry-features{
    margin-top:28px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}

.enquiry-features div{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 0;
    font-weight:500;
}

.quote-form{
    background:white;
    padding:42px;
    border-radius:var(--radius-xl);
    box-shadow:0 30px 70px -20px rgba(15,23,42,.1);
    border:1px solid var(--line);
}

.custom-input{
    height:58px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    transition:.25s;
}

.custom-input:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 4px rgba(220,38,38,.1);
}

textarea.custom-input{
    height:auto;
    padding-top:15px;
}

.submit-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:white;
    font-weight:700;
    font-size:16px;
    transition:.3s;
}

.submit-btn:hover{ filter:brightness(1.08); }
.submit-btn:disabled{ opacity:.7; cursor:not-allowed; filter:none; }

.quote-form-msg{
    margin-bottom:20px;
    padding:14px 18px;
    border-radius:12px;
    font-size:14px;
    font-weight:600;
}
.quote-form-msg.is-success{
    background:#f0fdf4;
    color:#15803d;
    border:1px solid #bbf7d0;
}
.quote-form-msg.is-error{
    background:var(--blush);
    color:var(--brand-deep);
    border:1px solid #fecaca;
}

/* ------------------------------------------------------------------ */
/* BRANDS — arced fan layout of partner logos                          */
/* ------------------------------------------------------------------ */

.brands-section{
    padding:110px 0 130px;
    background:#ffffff;
}

.logo-arc{
    margin-top:70px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:18px 14px;
}

.brand-box{
    flex:0 0 auto;
    width:130px;
    height:110px;
    border:1px solid var(--line);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#94a3b8;
    font-weight:600;
    background:white;
    transition:.3s;
    padding:16px 18px;
    box-shadow:0 10px 30px -14px rgba(15,23,42,.12);
}

.brand-box:hover{
    transform:translateY(-6px) rotate(0deg) !important;
    border-color:var(--brand);
    color:var(--brand);
    box-shadow:0 18px 40px rgba(220,38,38,.14);
    z-index:3;
}

.brand-box img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:grayscale(1);
    opacity:.6;
    transition:.3s;
}

.brand-box:hover img{
    filter:grayscale(0);
    opacity:1;
}

/* Fan the tiles into an arc on wide screens */
@media(min-width:768px){
    .logo-arc .brand-box:nth-child(1){ transform:translateY(60px) rotate(-16deg); }
    .logo-arc .brand-box:nth-child(2){ transform:translateY(35px) rotate(-11deg); }
    .logo-arc .brand-box:nth-child(3){ transform:translateY(15px) rotate(-6deg); }
    .logo-arc .brand-box:nth-child(4){ transform:translateY(4px)  rotate(-2deg); }
    .logo-arc .brand-box:nth-child(5){ transform:translateY(0)    rotate(0deg); }
    .logo-arc .brand-box:nth-child(6){ transform:translateY(4px)  rotate(2deg); }
    .logo-arc .brand-box:nth-child(7){ transform:translateY(15px) rotate(6deg); }
    .logo-arc .brand-box:nth-child(8){ transform:translateY(35px) rotate(11deg); }
    .logo-arc .brand-box:nth-child(9){ transform:translateY(60px) rotate(16deg); }
}

.arc-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    max-width:820px;
    margin:80px auto 0;
}

/* ------------------------------------------------------------------ */
/* Counter number styling shared by hero + why-section                 */
/* ------------------------------------------------------------------ */

[data-counter]{ display:inline-block; }

/* ------------------------------------------------------------------ */
/* PROBLEM-STATEMENT — dotted-grid card                                */
/* ------------------------------------------------------------------ */

.dot-grid-section{
    padding:40px 0 110px;
    background:var(--paper);
}

.dot-grid-card{
    position:relative;
    background:
        radial-gradient(circle, #e2e8f0 1.4px, transparent 1.4px) 0 0/22px 22px,
        #fbfcfe;
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    padding:60px;
    overflow:hidden;
}

.dot-grid-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,.9), transparent 70%);
    pointer-events:none;
}

.dot-grid-card h2{
    font-size:clamp(28px,3.4vw,42px);
    font-weight:800;
    line-height:1.2;
    margin-bottom:18px;
    position:relative;
}

.dot-grid-card .dot-grid-sub{
    font-size:19px;
    font-weight:600;
    color:var(--slate);
    margin-bottom:14px;
    position:relative;
}

.dot-grid-card p.dot-grid-text{
    color:var(--slate);
    line-height:1.8;
    max-width:480px;
    position:relative;
}

.dot-grid-card img{
    border-radius:var(--radius-lg);
    box-shadow:0 30px 70px -20px rgba(15,23,42,.2);
    position:relative;
}

/* ------------------------------------------------------------------ */
/* PROCESS — alternating full-bleed storytelling sections              */
/* ------------------------------------------------------------------ */

.process-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
    min-height:420px;
    color:#fff;
    overflow:hidden;
}

.process-section--ink{   background:var(--ink); }
.process-section--slate{ background:var(--ink-2); }
.process-section--wine{  background:var(--wine); }

.process-copy{
    position:relative;
    padding:70px 60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
}

.process-num{
    position:absolute;
    top:-.15em;
    right:20px;
    font-family:'Sora', sans-serif;
    font-size:clamp(90px,12vw,170px);
    font-weight:800;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(255,255,255,.14);
    text-stroke:1.5px rgba(255,255,255,.14);
    pointer-events:none;
    z-index:0;
}

.process-copy .eyebrow,
.process-copy h3,
.process-copy p{ position:relative; z-index:1; }

.process-copy .eyebrow{ color:rgba(255,255,255,.55); }

.process-copy h3{
    font-size:clamp(26px,3vw,36px);
    font-weight:800;
    line-height:1.2;
    margin:10px 0 18px;
}

.process-copy p{
    color:rgba(255,255,255,.72);
    line-height:1.8;
    max-width:440px;
}

.process-photo{
    position:relative;
    min-height:320px;
    overflow:hidden;
}

.process-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
}

.process-photo:hover img{ transform:scale(1.06); }

.process-section:nth-child(even) .process-copy{ order:2; }
.process-section:nth-child(even) .process-photo{ order:1; }

/* ── Entrance animation: copy slides in from its visual side, photo
   wipes open like a curtain — reuses the site's IntersectionObserver
   .in-view toggle, just with richer per-element transforms. ── */
.process-copy[data-animate]{
    opacity:0;
    transform:translateX(-56px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.process-section:nth-child(even) .process-copy[data-animate]{ transform:translateX(56px); }
.process-copy[data-animate].in-view{ transform:translateX(0); opacity:1; }

.process-photo[data-animate]{
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transition:opacity .5s ease, clip-path .9s cubic-bezier(.16,1,.3,1);
}
.process-section:nth-child(even) .process-photo[data-animate]{ clip-path:inset(0 0 0 100%); }
.process-photo[data-animate].in-view{ opacity:1; clip-path:inset(0 0 0 0); }

.process-num[data-animate]{
    opacity:0;
    transform:scale(.7);
    transition:opacity 1s ease .15s, transform 1s cubic-bezier(.16,1,.3,1) .15s;
}
.process-num[data-animate].in-view{ opacity:1; transform:scale(1); }

@media(max-width:767px){
    .process-section{ grid-template-columns:1fr; }
    .process-copy{ padding:48px 28px; order:1 !important; }
    .process-photo{ min-height:260px; order:2 !important; }
}

/* ------------------------------------------------------------------ */
/* MEGA STATEMENT — oversized outlined closing line                    */
/* ------------------------------------------------------------------ */

.mega-statement{
    padding:100px 0 40px;
    text-align:center;
    background:#ffffff;
}

.mega-statement h2{
    font-size:clamp(40px,9vw,130px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.01em;
    margin:0;
    color:transparent;
    -webkit-text-stroke:1.5px #cbd5e1;
    text-stroke:1.5px #cbd5e1;
}

.mega-statement .accent{
    color:var(--brand);
    -webkit-text-stroke:0;
    text-stroke:0;
}

/* ------------------------------------------------------------------ */
/* SMALL-PHONE PASS (≤480px)                                           */
/* ------------------------------------------------------------------ */

@media(max-width:480px){
    .stat-card{ padding:22px 14px; }
    .stat-card h3{ font-size:26px; }

    .dot-grid-card{ padding:32px 22px; }

    .process-copy{ padding:40px 22px; }

    .arc-stats{ grid-template-columns:1fr; gap:14px; margin-top:50px; }

    .mega-statement{ padding:70px 0 20px; }
}

/* ------------------------------------------------------------------ */
/* FOOTER                                                               */
/* ------------------------------------------------------------------ */

.footer{
    position:relative;
    background:linear-gradient(135deg, var(--ink), #1e293b);
    color:white;
    padding-top:100px;
    overflow:hidden;
}

.footer-bg-glow{
    position:absolute;
    top:-120px;
    left:-100px;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(220,38,38,.16), transparent 70%);
    border-radius:50%;
    pointer-events:none;
}

.footer-top{ padding-bottom:60px; }

.footer-brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    margin-bottom:25px;
}

.footer-brand .brand-name{ color:#fff; }
.footer-brand .brand-tagline{ color:#94a3b8; }

.footer-desc{
    color:#94a3b8;
    line-height:1.8;
    max-width:340px;
}

.footer-contact{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:22px;
}

.footer-contact a{
    color:white;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:500;
    transition:.25s;
}

.footer-contact a:hover{ color:#fca5a5; gap:14px; }

.contact-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    background:rgba(255,255,255,.07);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    flex-shrink:0;
}

.social-row{
    display:flex;
    gap:10px;
    margin-top:24px;
}

.social-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    color:#cbd5e1;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.social-icon:hover{
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    border-color:transparent;
    color:#fff;
    transform:translateY(-3px);
}

.footer h5{
    margin-bottom:25px;
    font-weight:700;
    font-size:16px;
    position:relative;
    padding-left:18px;
}

.footer h5::before{
    content:"";
    position:absolute;
    left:0; top:6px;
    width:10px;
    height:2px;
    background:var(--brand);
    border-radius:2px;
}

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

.footer ul li{
    margin-bottom:14px;
}

.footer ul li a{
    color:#94a3b8;
    text-decoration:none;
    transition:.25s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.footer ul li a::before{
    content:"›";
    opacity:0;
    transform:translateX(-6px);
    transition:.25s;
    color:var(--brand);
}

.footer ul li a:hover{
    color:white;
    padding-left:2px;
}

.footer ul li a:hover::before{
    opacity:1;
    transform:translateX(0);
}

.footer-bottom{
    position:relative;
    border-top:1px solid rgba(255,255,255,.08);
    padding:25px 0;
    color:#94a3b8;
    font-size:14px;
}

.footer-bottom a{
    color:#94a3b8;
    text-decoration:none;
    margin-left:25px;
    transition:.25s;
}

.footer-bottom a:hover{ color:#fca5a5; }

/* Back to top */

.back-to-top{
    position:fixed;
    right:28px;
    bottom:28px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, var(--brand), var(--brand-deep));
    color:#fff;
    font-size:18px;
    box-shadow:0 14px 30px -10px rgba(220,38,38,.5);
    cursor:pointer;
    opacity:0;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .3s, transform .3s;
    z-index:998;
}

.back-to-top.visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.back-to-top:hover{ filter:brightness(1.08); transform:translateY(-3px); }

@media(max-width:767px){
    .back-to-top{ right:18px; bottom:18px; width:44px; height:44px; }
}
.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;

    width:65px;
    height:65px;

    background:#25d366;
    color:white;

    border-radius:50%;

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

    z-index:9999;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

    text-decoration:none;
}

/* ── App-style bottom tab bar (mobile only) ─────────────────────── */
.bottom-tab-bar{
    display:none;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1000;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(15,23,42,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
}
@media(max-width:767px){
    .bottom-tab-bar{ display:flex; }
    body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0)); }
    .whatsapp-float{ display:none; } /* WhatsApp now lives in the bottom tab bar's Chat tab */
    .back-to-top{ bottom:calc(80px + env(safe-area-inset-bottom,0)); }
}
.tab-item{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;height:64px;
    color:var(--slate);text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:11px;font-weight:600;
    border:none;background:none;padding:0;
    transition:.2s;
    -webkit-tap-highlight-color:transparent;
}
.tab-icon{ font-size:21px;line-height:1;transition:.2s; }
.tab-item.active{ color:var(--brand); }
.tab-item.active .tab-icon{ transform:translateY(-2px); }
.tab-item:active .tab-icon{ transform:scale(.88); }

/* ── Share confirmation toast ────────────────────────────────────── */
.share-toast{
    position:fixed;left:50%;bottom:90px;
    transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;
    padding:11px 22px;border-radius:50px;
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    opacity:0;transition:.3s ease;
    z-index:10000;pointer-events:none;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.share-toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

.products-hero{
    padding:180px 0 100px;
    background:#f8fafc;
    text-align:center;
}

.products-hero h1{
    font-size:64px;
    font-weight:800;
    margin-top:20px;
}

.products-hero p{
    max-width:700px;
    margin:auto;
    margin-top:20px;
    color:#64748b;
}

.products-section{
    padding:100px 0;
}

.products-toolbar{
    margin-bottom:30px;
}

.search-box{
    width:100%;
    height:60px;
    border-radius:14px;
    border:1px solid #e2e8f0;
    padding:0 20px;
}

.category-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.category-filters button{
    border:none;
    background:#f1f5f9;
    padding:12px 22px;
    border-radius:50px;
}

.category-filters .active{
    background:#2563eb;
    color:white;
}

.catalog-card{
    border:1px solid #edf2f7;
    border-radius:24px;
    overflow:hidden;
    transition:.3s;
}

.catalog-card:hover{
    transform:translateY(-10px);
}

.catalog-card img{
    width:100%;
    height:280px;
    object-fit:cover;
}

.catalog-content{
    padding:25px;
}

.catalog-content span{
    color:#2563eb;
    font-size:14px;
}

.catalog-content h4{
    margin-top:10px;
    margin-bottom:15px;
    font-weight:700;
}