/* =====================================================================
   PRISHIV AUTOMATION — Master Stylesheet
   ---------------------------------------------------------------------
   TABLE OF CONTENTS
   0.  Design Tokens (colors, fonts, spacing)
   1.  Reset & Base
   2.  Reusable Utilities (buttons, pills, placeholders, moving border)
   3.  Preloader
   4.  Header + Nav
   5.  Mobile Bottom Nav
   6.  Hero
   7.  Marquee Strips
   8.  About
   9.  Stats
   10. Why Choose Us / Carousels
   11. Products
   12. Clients
   13. Services Grid
   14. Video
   15. FAQ
   16. Testimonials
   17. Contact
   18. Footer
   19. Back to top
   20. Reveal animations
   21. Responsive
   ===================================================================== */

/* ===== 0 · DESIGN TOKENS =========================================== */
:root{
    /* Brand palette */
    --pumpkin:   #FF6400;
    --deep:      #F44A22;
    --eggshell:  #F5EBE1;
    --silver:    #FEF8E8;
    --grey:      #E4E2E3;
    --mint:      #E7F1E4;   /* soft light green for section backgrounds */
    --stone:     #A8AAAC;
    --midnight:  #161616;

    /* Semantic */
    --bg:        #F5EBE1;
    --bg-soft:   #FEF8E8;
    --surface:   #FFFCF6;
    --ink:       #161616;
    --ink-soft:  #4a4744;
    --muted:     #807d79;
    --line:      rgba(22,22,22,.10);
    --line-soft: rgba(22,22,22,.06);

    --grad:      linear-gradient(120deg, var(--pumpkin), var(--deep));
    --grad-soft: linear-gradient(135deg, #ffb27a, var(--pumpkin));

    --shadow-sm: 0 4px 14px rgba(22,22,22,.06);
    --shadow:    0 14px 40px rgba(22,22,22,.10);
    --shadow-lg: 0 28px 70px rgba(22,22,22,.16);
    --shadow-orange: 0 16px 40px rgba(255,100,0,.28);

    --r-sm: 12px;
    --r:    18px;
    --r-lg: 26px;
    --r-xl: 36px;

    --f-display: 'Unbounded', sans-serif;
    --f-body:    'Manrope', sans-serif;
    --f-accent:  'Caveat', cursive;

    --container: 1240px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ===== 1 · RESET & BASE ============================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
    font-family:var(--f-body);
    color:var(--ink);
    background:var(--bg);
    line-height:1.65;
    overflow-x:hidden;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
}
/* subtle grain/atmosphere */
body::before{
    content:""; position:fixed; inset:0; z-index:-2;
    background:
        radial-gradient(60% 50% at 85% -5%, rgba(255,100,0,.10), transparent 60%),
        radial-gradient(50% 45% at 0% 100%, rgba(244,74,34,.08), transparent 60%),
        var(--bg);
}
img,svg{ display:block; max-width:100%; }
svg{ width:1.25em; height:1.25em; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }

.container{ width:min(var(--container), 92%); margin-inline:auto; }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }

/* ---------------------------------------------------------------------
   SECTION BACKGROUNDS — each section differs from its neighbours.
   Warm tones (eggshell / silver) alternate with cool grey so every
   boundary is clearly visible. Edit any value to recolour a section.
   (Hero=video, Stats & Footer=dark, strips=dark/orange — they separate.)
   ------------------------------------------------------------------- */
.about        { background:var(--eggshell);  }   /* warm beige   */
.why          { background:var(--mint);      }   /* light green  */
.products     { background:var(--silver);    }   /* warm cream   */
.clients      { background:var(--mint);      }   /* light green  */
.services     { background:var(--eggshell);  }   /* warm beige   */
.video        { background:var(--mint);      }   /* light green  */
.faq          { background:var(--silver);    }   /* warm cream   */
.testimonials { background:var(--mint);      }   /* light green  */
.contact      { background:var(--eggshell);  }   /* warm beige   */

/* Typographic helpers */
.section__title{
    font-family:var(--f-display);
    font-weight:800;
    font-size:clamp(1.9rem, 4.2vw, 3.3rem);
    line-height:1.06;
    letter-spacing:-.02em;
}
.section__title.center{ text-align:center; }
.grad-text{
    background:var(--grad); -webkit-background-clip:text; background-clip:text;
    color:transparent;
}
.accent-cursive{
    font-family:var(--f-accent); font-weight:700;
    color:var(--deep); font-size:1.18em; line-height:.8;
    padding-inline:.04em;
}
.lead{ font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink-soft); font-weight:600; }
.section__head{ margin-bottom:clamp(34px,5vw,58px); }
/* Centered subheading under a section title */
.section__sub{ max-width:60ch; margin:16px auto 0; text-align:center; color:var(--ink-soft); font-size:clamp(.98rem,1.5vw,1.1rem); font-weight:500; }

.eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--f-display); font-weight:600; font-size:.74rem;
    letter-spacing:.22em; text-transform:uppercase; color:var(--deep);
    margin-bottom:16px;
}
.eyebrow--center{ display:flex; justify-content:center; }
.eyebrow__line{ width:34px; height:2px; background:var(--grad); border-radius:2px; }

/* ===== 2 · REUSABLE UTILITIES ====================================== */
/* Buttons */
.btn{
    --pad:14px 24px;
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:var(--pad); border-radius:100px;
    font-family:var(--f-display); font-weight:600; font-size:.92rem;
    letter-spacing:.01em; line-height:1; white-space:nowrap;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s;
    will-change:transform;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn--sm{ --pad:10px 16px; font-size:.82rem; }
.btn--lg{ --pad:17px 30px; font-size:1rem; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow-orange); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 50px rgba(255,100,0,.38); }
.btn--outline{ border:1.5px solid var(--ink); color:var(--ink); background:rgba(255,255,255,.4); }
.btn--outline:hover{ background:var(--ink); color:var(--silver); transform:translateY(-3px); }
.btn--ghost{ background:rgba(255,255,255,.55); border:1px solid var(--line); color:var(--ink); backdrop-filter:blur(8px); }
.btn--ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn--wa{ background:#1faf54; color:#fff; box-shadow:0 12px 28px rgba(31,175,84,.28); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(31,175,84,.4); }

/* Pill badge */
.pill{
    display:inline-flex; align-items:center; gap:9px;
    padding:8px 16px; border-radius:100px;
    background:rgba(255,255,255,.6); border:1px solid var(--line);
    font-size:.8rem; font-weight:700; color:var(--ink-soft);
    backdrop-filter:blur(8px); margin-bottom:22px;
}
.pill__dot{ width:8px; height:8px; border-radius:50%; background:var(--pumpkin); box-shadow:0 0 0 4px rgba(255,100,0,.18); animation:pulse 2s infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(255,100,0,0); } }

/* Media placeholders */
.ph-box{
    position:relative; width:100%; height:100%; min-height:160px;
    border-radius:var(--r); overflow:hidden;
    background:linear-gradient(135deg, var(--grey), var(--silver));
    border:1.5px dashed var(--stone);
    display:grid; place-items:center; color:var(--muted);
}
.ph-grid{
    position:absolute; inset:0; opacity:.5;
    background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:22px 22px;
}
.ph-label{
    position:relative; z-index:1; font-family:var(--f-display); font-weight:600;
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft); text-align:center; padding:8px 14px;
    background:rgba(255,255,255,.7); border-radius:100px; backdrop-filter:blur(4px);
}
.ph-box--tall{ min-height:420px; }
.ph-box--video{ min-height:440px; }
.ph-box--qr{ min-height:120px; aspect-ratio:1; }

/* Moving border (continuous flowing outline) */
.moving-border{ position:relative; border-radius:var(--r-lg); }
.moving-border::before{
    content:""; position:absolute; inset:0; padding:2px; border-radius:inherit;
    background:conic-gradient(from var(--mb-angle,0deg), transparent 0 55%, var(--pumpkin) 75%, var(--deep) 85%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:mb-spin 4s linear infinite; pointer-events:none; z-index:2;
}
@property --mb-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes mb-spin{ to{ --mb-angle:360deg; } }
/* fallback if @property unsupported: rotate a pseudo glow */
@supports not (background: conic-gradient(from 1deg, #000, #000)){
    .moving-border::before{ background:linear-gradient(120deg,var(--pumpkin),var(--deep)); animation:none; opacity:.5; }
}

/* ===== 3 · PRELOADER (logo reveal on light) ======================= */
.preloader{
    position:fixed; inset:0; z-index:9999; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--silver); /* solid colour — no gradient */
    transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; }
/* Logo: rise in, then gently breathe. Negative margin trims the PNG's transparent padding. */
.preloader__logo{ position:relative; width:min(72vw,330px); margin-bottom:-34px; animation:pl-rise .8s var(--ease) both, pl-breath 3.2s 1s ease-in-out infinite; }
.preloader__logo img{ width:100%; height:auto; display:block; }
@keyframes pl-rise{ from{ opacity:0; transform:translateY(18px) scale(.95); } }
@keyframes pl-breath{ 50%{ transform:translateY(-4px); } }
@keyframes pl-fade{ from{ opacity:0; transform:translateY(10px); } }
/* Tagline */
.preloader__tag{ font-family:var(--f-accent); font-size:1.5rem; color:var(--deep); letter-spacing:.02em; animation:pl-fade .8s .2s both; }
/* Progress bar with a moving sheen block (solid colour, no gradient) */
.preloader__bar{ position:relative; width:260px; height:5px; border-radius:100px; background:var(--grey); overflow:hidden; margin-top:4px; animation:pl-fade .8s .3s both; }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--pumpkin); border-radius:100px; animation:load 1.9s var(--ease) forwards; }
@keyframes load{ to{ width:100%; } }
/* Status + percentage row */
.preloader__meta{ display:flex; justify-content:space-between; align-items:center; width:260px; animation:pl-fade .8s .4s both; }
.preloader__status{ font-weight:700; font-size:.74rem; letter-spacing:.03em; color:var(--ink-soft); transition:opacity .2s; }
.preloader__pct{ font-family:var(--f-display); font-weight:700; font-size:.82rem; color:var(--deep); }
/* Brand keyword ticker */
.preloader__ticker{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:12px; max-width:340px;
    font-family:var(--f-display); font-weight:600; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
    animation:pl-fade .8s .55s both; }
.preloader__ticker i{ color:var(--pumpkin); font-style:normal; }
.preloader__ticker span{ animation:pl-blink 2.4s ease-in-out infinite; }
.preloader__ticker span:nth-child(3){ animation-delay:.3s; }
.preloader__ticker span:nth-child(5){ animation-delay:.6s; }
.preloader__ticker span:nth-child(7){ animation-delay:.9s; }
.preloader__ticker span:nth-child(9){ animation-delay:1.2s; }
@keyframes pl-blink{ 50%{ opacity:.45; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===== TOP STRIP ================================================== */
:root{ --topbar-h:48px; }
.topbar{
    position:fixed; top:0; left:0; right:0; z-index:901; height:var(--topbar-h);
    display:flex; align-items:center; background:var(--midnight); color:var(--silver);
    font-size:.92rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.topbar__left{ display:flex; align-items:center; gap:24px; min-width:0; }
.topbar__left a{ display:inline-flex; align-items:center; gap:9px; color:var(--silver); font-weight:700; white-space:nowrap; transition:color .3s; }
.topbar__left a:hover{ color:var(--pumpkin); }
.topbar__left svg{ color:var(--pumpkin); width:1.2em; height:1.2em; flex:none; }
.topbar__social{ display:flex; align-items:center; gap:8px; }
.topbar__follow{ color:var(--stone); font-weight:600; margin-right:6px; }
.topbar__social a{ width:38px; height:38px; display:grid; place-items:center; color:var(--silver); border-radius:10px; background:rgba(255,255,255,.08); transition:color .3s, background .3s, transform .3s; }
.topbar__social a:hover{ color:#fff; background:var(--grad); transform:translateY(-2px); }
.topbar__social svg{ width:1.4em; height:1.4em; }

/* ===== 4 · HEADER (full-width square bar) ========================= */
.header{
    position:fixed; top:var(--topbar-h); left:0; right:0; z-index:900;
    background:rgba(255,252,246,.7); border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px) saturate(140%);
    transition:background .4s, box-shadow .4s;
}
.header__inner{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 0;
}
.header.scrolled{ background:rgba(255,252,246,.92); box-shadow:var(--shadow-sm); }
/* Transparent logo on the light header — soft shadow keeps the white text legible */
.brand{ display:inline-flex; align-items:center; transition:transform .35s var(--ease); }
.brand:hover{ transform:translateY(-2px); }
.brand__logo-img{ height:66px; width:auto; display:block; }
.nav{ display:flex; gap:4px; }
.nav__link{
    position:relative; padding:9px 15px; border-radius:100px;
    font-weight:700; font-size:.9rem; color:var(--ink-soft);
    transition:color .3s, background .3s;
}
.nav__link::after{
    content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
    background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ transform:scaleX(1); }
.header__actions{ display:flex; align-items:center; gap:8px; }
/* Mobile drawer close button + dim overlay (hidden on desktop) */
.nav-close{ display:none; position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; place-items:center; background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font-size:1.7rem; line-height:1; transition:background .3s, transform .3s; }
.nav-close:hover{ background:var(--grad); color:#fff; transform:rotate(90deg); }
.nav-overlay{ display:none; position:fixed; inset:0; background:rgba(22,22,22,.5); z-index:998; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
body.nav-open .nav-overlay{ opacity:1; visibility:visible; }
/* Body-level mobile drawer (shown only on mobile) */
.mobile-menu{ display:none; }
.mobile-menu__link{ font-family:var(--f-display); font-weight:700; font-size:1.06rem; padding:14px 16px; border-radius:12px; color:var(--ink); transition:background .3s, color .3s, padding-left .3s; }
.mobile-menu__link:hover{ background:var(--bg-soft); color:var(--deep); padding-left:22px; }
.mobile-menu__actions{ display:flex; gap:10px; margin-top:20px; }
.mobile-menu__actions .btn{ flex:1; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.6); border:1px solid var(--line); align-items:center; justify-content:center; }
.nav-toggle span{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== 5 · MOBILE BOTTOM NAV ====================================== */
.bottom-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:850;
    display:none; grid-template-columns:repeat(4,1fr); gap:0; padding:6px;
    background:rgba(255,252,246,.92); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(22,22,22,.1); backdrop-filter:blur(16px);
}
.bottom-nav__item{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px;
    font-size:.66rem; font-weight:700; color:var(--ink-soft);
    transition:.3s;
}
.bottom-nav__item svg{ width:1.35em; height:1.35em; }
.bottom-nav__item--wa{ color:#1faf54; }
.bottom-nav__item--cta{ color:var(--deep); }

/* ===== 6 · HERO =================================================== */
/* HERO = video + black gradient + text/buttons only */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; padding:clamp(155px,20vw,190px) 0 clamp(80px,10vw,110px); overflow:hidden; }
/* Autoplay muted background video */
.hero__bg-video{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--midnight); }
.hero__bg-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Light black gradient — only enough to keep the text readable over the video */
.hero__bg-overlay{
    position:absolute; inset:0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 45%, rgba(0,0,0,0) 100%),
        linear-gradient(0deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 45%);
}
.hero__inner{ position:relative; z-index:1; }
.hero__content{ max-width:760px; }
.hero__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:-.025em; margin-bottom:20px; color:#fff; }
.hero__tagline{ font-family:var(--f-display); font-weight:600; font-size:clamp(.95rem,1.8vw,1.2rem); color:#ffb27a; margin-bottom:16px; letter-spacing:-.01em; }
.hero__desc{ font-size:1.08rem; color:rgba(255,255,255,.82); max-width:56ch; margin-bottom:34px; font-weight:500; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* Light pill + accent on the dark video */
.hero .pill{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.hero .accent-cursive{ color:#ffb27a; }
/* Outline "Call Now" button turns light so it reads on the video */
.hero .btn--outline{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.06); }
.hero .btn--outline:hover{ background:#fff; color:var(--midnight); border-color:#fff; }

/* ===== 7 · MARQUEE STRIPS ========================================= */
.marquee{ overflow:hidden; padding:18px 0; position:relative; }
.marquee--hero{ background:var(--midnight); }
.marquee--footer{ background:var(--grad); }
.marquee__track{ display:flex; width:max-content; gap:0; animation:marq 26s linear infinite; }
.marquee__track--rev{ animation-direction:reverse; animation-duration:30s; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
    display:inline-flex; align-items:center; gap:14px; padding:0 30px;
    font-family:var(--f-display); font-weight:700; font-size:clamp(1rem,2vw,1.45rem);
    color:var(--silver); letter-spacing:.01em; white-space:nowrap;
}
.marquee__item svg{ color:var(--pumpkin); width:.9em; height:.9em; }
.marquee__item--alt{ color:#fff; }
.marquee__item--alt svg{ color:#fff; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ===== 8 · ABOUT ================================================== */
.about__inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,5vw,70px); align-items:center; }
.about__media{ position:relative; }
/* fixed (static) outline instead of the animated moving border */
.about__media-main{ box-shadow:var(--shadow); border-radius:var(--r-lg); border:3px solid var(--pumpkin); padding:6px; background:var(--surface); }
.about__media-main .ph-box,
.about__media-main img{ border-radius:calc(var(--r-lg) - 10px); }
.about__media-main img{ width:100%; height:440px; object-fit:cover; display:block; }
.about__media-sub{ position:absolute; bottom:-34px; right:-22px; width:46%; box-shadow:var(--shadow-lg); border-radius:var(--r); border:5px solid var(--surface); overflow:hidden; }
.about__media-sub .ph-box{ min-height:170px; border-radius:14px; }
.about__media-sub img{ width:100%; height:180px; object-fit:cover; display:block; border-radius:14px; }
.about__badge{
    position:absolute; top:-22px; left:-22px; display:flex; align-items:center; gap:10px;
    padding:14px 20px; border-radius:18px; background:var(--grad); color:#fff;
    box-shadow:var(--shadow-orange);
}
.about__badge strong{ font-family:var(--f-display); font-weight:800; font-size:1.9rem; line-height:.9; }
.about__badge span{ font-size:.74rem; font-weight:700; line-height:1.1; }
.about__content p{ color:var(--ink-soft); margin-bottom:16px; }
.about__content .lead{ margin-bottom:18px; }
.about__list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin:24px 0 26px; }
.about__list li{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:.92rem; }
.about__list svg{ color:var(--pumpkin); width:1.3em; height:1.3em; flex:none; }
.about__owners{ display:inline-flex; flex-direction:column; padding:14px 22px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.about__owners span{ font-size:.78rem; color:var(--muted); letter-spacing:.04em; }
.about__owners strong{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; }

/* ===== 9 · STATS ================================================== */
.stats{ background:var(--midnight); padding:clamp(40px,6vw,64px) 0; position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 120% at 50% 0%, rgba(255,100,0,.18), transparent 70%); }
.stats__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; padding:14px; position:relative; }
.stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,.12); }
.stat__num{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1; color:#fff; display:inline-flex; align-items:baseline; }
.stat__num i{ font-style:normal; color:var(--pumpkin); }
.stat__label{ margin-top:8px; color:var(--stone); font-weight:700; font-size:.9rem; letter-spacing:.02em; }

/* ===== 10 · CAROUSELS (Why / Products / Clients / Testimonials) ==== */
.carousel{ position:relative; overflow:hidden; padding:14px 0; cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.carousel.is-dragging{ cursor:grabbing; }
.carousel.is-dragging a{ pointer-events:none; }
.carousel__track{ display:flex; gap:22px; width:max-content; animation:marq var(--dur,40s) linear infinite; }
.carousel:hover .carousel__track{ animation-play-state:paused; }

.why-card{ flex:0 0 300px; }
.why-card__inner{ height:100%; padding:30px 26px; border-radius:inherit; background:var(--surface); }
.why-card__icon{ display:inline-grid; place-items:center; width:54px; height:54px; border-radius:15px; background:var(--grad-soft); color:#fff; margin-bottom:16px; }
.why-card__icon svg{ width:1.5em; height:1.5em; }
.why-card h3{ font-family:var(--f-display); font-weight:700; font-size:1.08rem; margin-bottom:8px; letter-spacing:-.01em; }
.why-card p{ color:var(--ink-soft); font-size:.92rem; }

/* ===== 11 · PRODUCTS ============================================== */
.product-card{
    position:relative; flex:0 0 290px; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
    border:1px solid var(--line); box-shadow:var(--shadow-sm);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
/* Fixed (static) gradient outline — no animation */
.product-card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; z-index:3;
}
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.product-card__media{ height:180px; padding:14px; }
.product-card__media .ph-box{ border-radius:16px; min-height:100%; }
.product-card__media img{ width:100%; height:100%; object-fit:contain; border-radius:16px; display:block; background:#fff; }
.product-card__body{ padding:6px 22px 24px; }
.product-card__body h3{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; margin-bottom:7px; }
.product-card__body p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:14px; }
.product-card__cta{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:600; font-size:.86rem; color:var(--deep); }
.product-card__cta svg{ width:1.05em; transition:transform .3s; }
.product-card:hover .product-card__cta svg{ transform:translateX(4px); }
.section__cta{ margin-top:40px; }
.section__cta.center{ text-align:center; }

/* ===== 12 · CLIENTS ============================================== */
.carousel--clients .carousel__track{ gap:26px; }
.client-logo{ flex:0 0 200px; height:120px; padding:8px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .4s; }
.client-logo:hover{ transform:translateY(-6px); }
.client-logo .ph-box{ border-radius:14px; min-height:100%; }
.client-logo img{ width:100%; height:100%; object-fit:contain; padding:10px; border-radius:14px; display:block; }

/* ===== 13 · SERVICES GRID (image · name · description · learn more) = */
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card{
    position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg);
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm);
    overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
/* Fixed (static) gradient outline — no animation */
.service-card::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; z-index:3;
}
/* product image */
.service-card__media{ position:relative; height:160px; padding:14px; }
.service-card__media .ph-box{ border-radius:16px; min-height:100%; }
.service-card__media img{ width:100%; height:100%; object-fit:contain; border-radius:16px; display:block; background:#fff; }
/* small icon badge overlapping the image */
.service-card__icon{ position:absolute; left:24px; bottom:-22px; z-index:2; display:grid; place-items:center;
    width:48px; height:48px; border-radius:14px; background:var(--grad); color:#fff;
    box-shadow:var(--shadow-orange); transition:transform .4s var(--ease); }
.service-card__icon svg{ width:1.4em; height:1.4em; }
.service-card:hover .service-card__icon{ transform:translateY(-3px) rotate(-6deg); }
/* body: name + description + learn more */
.service-card__body{ display:flex; flex-direction:column; flex:1; padding:18px 22px 24px; }
.service-card__body h3{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; margin-bottom:8px; }
.service-card__body p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:16px; flex:1; }
.service-card__learn{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    font-family:var(--f-display); font-weight:600; font-size:.86rem; color:var(--deep); }
.service-card__learn svg{ width:1.05em; transition:transform .3s; }
.service-card:hover .service-card__learn{ color:var(--pumpkin); }
.service-card:hover .service-card__learn svg{ transform:translateX(5px); }

/* ===== 14 · VIDEO ================================================ */
/* Full-bleed video — attached edge to edge, square corners */
.video.section{ padding:0; }
.video__frame{ position:relative; overflow:hidden; border-radius:0; height:clamp(360px,46vw,620px); }
.video__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video__frame .ph-box{ border-radius:0; min-height:100%; }
.video__overlay{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:linear-gradient(180deg, rgba(22,22,22,.05), rgba(22,22,22,.45)); color:#fff; padding:24px; }
.video__overlay h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.8rem); text-shadow:0 4px 20px rgba(0,0,0,.3); }
.video__overlay h2 .grad-text{ -webkit-text-fill-color:transparent; }
.video__overlay p{ font-weight:600; }
.video__play{ width:78px; height:78px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-orange); transition:transform .35s; position:relative; }
.video__play::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,.5); animation:ripple 2s ease-out infinite; }
.video__play:hover{ transform:scale(1.08); }
.video__play svg{ width:2em; height:2em; }
@keyframes ripple{ to{ transform:scale(1.4); opacity:0; } }

/* ===== PRODUCT SHOWCASE (autoplay video grid) =================== */
.showcase{ background:var(--silver); }
.showcase__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.showcase__item{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--midnight); box-shadow:var(--shadow); aspect-ratio:4/5; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.showcase__item::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; }
.showcase__item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.showcase__item video{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase__foot{ margin-top:clamp(34px,5vw,52px); text-align:center; }
.showcase__foot p{ max-width:64ch; margin:0 auto 26px; color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.12rem); font-weight:500; }
.showcase__foot-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:13px; }

/* ===== 15 · FAQ ================================================== */
.faq__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,64px); align-items:start; }
.faq__intro p{ color:var(--ink-soft); margin:14px 0 24px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:14px; overflow:hidden; transition:box-shadow .4s, border-color .4s; }
.faq-item.is-open{ box-shadow:var(--shadow); border-color:rgba(255,100,0,.35); }
/* Question segment has its own colour, distinct from the white answer area */
.faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; text-align:left; font-family:var(--f-display); font-weight:600; font-size:1rem; background:linear-gradient(135deg,#FCEEE2,#FBE3D2); color:var(--midnight); transition:background .4s, color .4s; }
.faq-item__q:hover{ background:linear-gradient(135deg,#FBE3D2,#F9D6BE); }
.faq-item.is-open .faq-item__q{ background:var(--grad); color:#fff; }
.faq-item__icon{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--deep); transition:transform .4s var(--ease), background .4s, color .4s; }
.faq-item__icon svg{ width:1.1em; }
.faq-item.is-open .faq-item__icon{ transform:rotate(135deg); background:#fff; color:var(--deep); }
.faq-item__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-item__a p{ padding:0 24px 22px; color:var(--ink-soft); }

/* ===== 16 · TESTIMONIALS ======================================== */
.tcard{ flex:0 0 380px; }
.tcard__inner{ height:100%; padding:32px 30px; border-radius:inherit; background:var(--surface); }
.tcard__quote{ color:var(--pumpkin); opacity:.4; }
.tcard__quote svg{ width:2.2em; height:2.2em; }
.tcard__stars{ display:flex; gap:3px; color:var(--pumpkin); margin:6px 0 14px; }
.tcard__stars svg{ width:1.05em; height:1.05em; }
.tcard__text{ color:var(--ink-soft); font-size:1rem; font-weight:600; margin-bottom:20px; }
.tcard__person{ display:flex; align-items:center; gap:13px; }
.tcard__avatar{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font-family:var(--f-display); font-weight:700; font-size:1.1rem; }
.tcard__person strong{ display:block; font-family:var(--f-display); font-weight:700; font-size:.96rem; }
.tcard__person small{ color:var(--muted); font-size:.82rem; }

/* ===== 17 · CONTACT ============================================= */
.contact__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,4vw,56px); align-items:stretch; }
.contact__rows{ display:flex; flex-direction:column; gap:12px; margin:26px 0; }
.contact__row{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); transition:transform .35s, box-shadow .35s; }
.contact__row:hover{ transform:translateX(5px); box-shadow:var(--shadow-sm); }
.contact__row-ic{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg, var(--silver), var(--grey)); color:var(--deep); }
.contact__row-ic svg{ width:1.4em; }
.contact__row small{ display:block; font-size:.74rem; color:var(--muted); letter-spacing:.04em; }
.contact__row strong{ font-weight:700; font-size:.95rem; }
.contact__wa{ width:100%; }

/* Fixed (static) gradient outline on the form — no animation */
.contact__form-wrap{ position:relative; background:var(--surface); box-shadow:var(--shadow); border-radius:var(--r-lg); }
.contact__form-wrap::after{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; z-index:3;
}
.contact__form{ padding:clamp(26px,4vw,40px); border-radius:inherit; }
.contact__form h3{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:7px; color:var(--ink-soft); }
.field input,.field select,.field textarea{
    width:100%; padding:13px 16px; border-radius:14px; border:1.5px solid var(--line);
    background:var(--bg-soft); font-weight:600; font-size:.95rem; transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--pumpkin); background:#fff; box-shadow:0 0 0 4px rgba(255,100,0,.12); }
.field textarea{ resize:vertical; }
.form-alert{ padding:13px 16px; border-radius:14px; font-weight:700; font-size:.9rem; margin-bottom:18px; }
.form-alert--success{ background:rgba(31,175,84,.12); color:#157a3b; border:1px solid rgba(31,175,84,.3); }
.form-alert--error{ background:rgba(244,74,34,.1); color:var(--deep); border:1px solid rgba(244,74,34,.3); }

/* ===== 18 · FOOTER ============================================== */
.footer{ background:var(--midnight); color:var(--stone); padding-top:clamp(54px,7vw,80px); position:relative; overflow:hidden; }
.footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--grad); }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:36px; padding-bottom:46px; }
.footer__logo{ margin-bottom:18px; }
.footer__logo img{ width:280px; max-width:90%; height:auto; display:block; }
.footer__desc{ font-size:.92rem; max-width:34ch; margin-bottom:18px; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.06); color:var(--silver); transition:.3s; }
.footer__social a:hover{ background:var(--grad); color:#fff; transform:translateY(-3px); }
.footer__col h4{ font-family:var(--f-display); font-weight:700; font-size:1rem; color:#fff; margin-bottom:18px; }
.footer__col ul li{ margin-bottom:11px; }
.footer__col ul a{ font-size:.92rem; transition:color .3s, padding .3s; }
.footer__col ul a:hover{ color:var(--pumpkin); padding-left:5px; }
.footer__contact li{ display:flex; align-items:center; gap:10px; }
.footer__contact svg{ color:var(--pumpkin); width:1.1em; flex:none; }
/* Two WhatsApp QR codes — Nirav Patel & Milap Patel */
.footer__qr{ margin-top:20px; display:flex; gap:16px; }
.footer__qr-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer__qr-item img{ width:108px; height:108px; padding:7px; border-radius:14px; background:#fff; display:block; box-shadow:0 8px 20px rgba(0,0,0,.28); transition:transform .35s var(--ease); }
.footer__qr-item:hover img{ transform:translateY(-4px) scale(1.03); }
.footer__qr-item span{ font-family:var(--f-display); font-weight:700; font-size:.8rem; color:var(--silver); }
.footer__qr-note{ margin-top:14px; display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--silver); }
.footer__qr-note svg{ color:#1faf54; width:1.1em; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.08); padding:20px 0; }
.footer__bar-inner{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.84rem; }
.footer__made{ color:var(--pumpkin); font-family:var(--f-accent); font-size:1.05rem; }

/* ===== 19 · BACK TO TOP ========================================= */
.to-top{ position:fixed; right:20px; bottom:20px; z-index:800; width:48px; height:48px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-orange); opacity:0; visibility:hidden; transform:translateY(16px); transition:.4s var(--ease); }
.to-top svg{ transform:rotate(-90deg); }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ===== 20 · REVEAL ANIMATIONS =================================== */
[data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
    [data-reveal]{ opacity:1; transform:none; }
}

/* ===== 21 · RESPONSIVE ========================================== */
@media (max-width:1080px){
    .services__grid{ grid-template-columns:repeat(2,1fr); }
    .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
    .showcase__grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .hero__inner{ grid-template-columns:1fr; }
    .hero__visual{ order:-1; max-width:480px; }
    .about__inner,.faq__inner,.contact__inner{ grid-template-columns:1fr; }
    .about__media{ max-width:520px; margin-inline:auto; }
    .stats__grid{ grid-template-columns:repeat(2,1fr); gap:30px 12px; }
    .stat:nth-child(2)::after{ display:none; }
    .nav{ display:none; }   /* horizontal desktop nav hidden — mobile uses .mobile-menu */
    .mobile-menu{
        display:flex; flex-direction:column; align-items:stretch; gap:6px;
        position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(330px,86%);
        padding:84px 22px 28px; background:var(--surface);
        box-shadow:-22px 0 60px rgba(22,22,22,.22); transform:translateX(105%); visibility:hidden;
        transition:transform .45s var(--ease), visibility .45s; z-index:1000; overflow-y:auto;
    }
    body.nav-open .mobile-menu{ transform:translateX(0); visibility:visible; }
    .nav-close{ display:grid; }
    .nav-overlay{ display:block; }
    .nav-toggle{ display:flex; }
    /* bigger, easier-to-tap Call & WhatsApp buttons in the header */
    .header__actions{ gap:9px; }
    .header__actions .btn span{ display:none; }
    .header__actions .btn{ --pad:13px; }
    .header__actions .btn svg{ width:1.45em; height:1.45em; }
    .bottom-nav{ display:grid; }
    body{ padding-bottom:78px; }
    .to-top{ bottom:90px; }
    /* slim down the top strip on mobile (keep phone number & icons big) */
    .topbar__left a.topbar__email{ display:none; }
    .topbar__follow{ display:none; }
    .topbar__left{ gap:14px; }
}
@media (max-width:560px){
    .services__grid{ grid-template-columns:1fr; gap:16px; }
    /* About images become square (1:1) on mobile */
    .about__media-main img{ height:auto; aspect-ratio:1/1; }
    .about__media-sub img{ height:auto; aspect-ratio:1/1; }
    .topbar{ font-size:.86rem; }
    .topbar__social{ gap:6px; }
    .topbar__social a{ width:36px; height:36px; }
    .about__list{ grid-template-columns:1fr; }
    .footer__grid{ grid-template-columns:1fr; gap:30px; }
    .footer__bar-inner{ justify-content:center; text-align:center; }
    .about__media-sub{ width:50%; right:-8px; }
    .hero__float--1{ left:-8px; }
    .hero__float--2{ right:-4px; }
    .why-card{ flex-basis:260px; }
    .tcard{ flex-basis:300px; }
    .product-card{ flex-basis:250px; }
}

/* =====================================================================
   22 · PRODUCT PAGES  (products.php + product.php)
   ===================================================================== */
/* Breadcrumb */
.breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; font-size:.82rem; color:var(--muted); margin-bottom:18px; }
.breadcrumb a{ color:var(--ink-soft); transition:color .3s; }
.breadcrumb a:hover{ color:var(--deep); }
.breadcrumb svg{ width:.9em; height:.9em; color:var(--stone); }
.breadcrumb span{ color:var(--deep); }

/* Page banner (top of sub-pages — clears the fixed header).
   Uses a media image with a dark overlay so the light text stays readable.
   To change the banner image, edit the url() below. */
.page-banner{ position:relative; overflow:hidden;
    padding:clamp(150px,17vw,200px) 0 clamp(50px,7vw,74px);
    background:
        linear-gradient(115deg, rgba(22,22,22,.88) 0%, rgba(22,22,22,.62) 52%, rgba(22,22,22,.4) 100%),
        url("../../hero image.png") center/cover no-repeat;
    background-color:var(--midnight); }
.page-banner__glow{ position:absolute; width:480px; height:480px; border-radius:50%; top:-160px; right:-80px;
    background:radial-gradient(circle, rgba(255,100,0,.25), transparent 65%); filter:blur(60px); }
.page-banner .container{ position:relative; z-index:1; }
.page-banner .breadcrumb{ color:rgba(255,255,255,.6); }
.page-banner .breadcrumb a{ color:rgba(255,255,255,.8); }
.page-banner .breadcrumb a:hover{ color:#fff; }
.page-banner .breadcrumb span{ color:#ffb27a; }
.page-banner .eyebrow{ color:#ffb27a; }
.page-banner__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.02em; margin-bottom:14px; color:#fff; }
.page-banner__sub{ max-width:60ch; color:rgba(255,255,255,.85); font-size:clamp(1rem,1.6vw,1.12rem); font-weight:500; }

.products-listing{ background:var(--bg); }

/* Info cards (About page: Mission & Vision, What We Do) */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px; }
.info-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3.5vw,38px); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.info-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.info-card__icon{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:16px; background:var(--grad); color:#fff; box-shadow:var(--shadow-orange); margin-bottom:18px; }
.info-card__icon svg{ width:1.5em; height:1.5em; }
.info-card h3{ font-family:var(--f-display); font-weight:700; font-size:1.18rem; margin-bottom:10px; }
.info-card p{ color:var(--ink-soft); font-size:.96rem; }
/* Info card as a carousel slide (fixed width) */
.info-card--slide{ flex:0 0 300px; }
@media (max-width:560px){ .info-card--slide{ flex-basis:260px; } }

/* Complete Solution — image left, content right */
.solution__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,56px); align-items:center; }
.solution__content .lead{ margin:16px 0 14px; }
.solution__content > p{ color:var(--ink-soft); }
.solution__list{ margin:22px 0; }
.solution__note{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:var(--deep); margin-bottom:22px; }
.solution__note svg{ width:1.1em; height:1.1em; flex:none; }
@media (max-width:900px){ .solution__inner{ grid-template-columns:1fr; } }

/* Clickable solution image + fullscreen lightbox */
.solution-figure{ position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); cursor:zoom-in; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.solution-figure:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.solution-figure img{ width:100%; height:auto; display:block; }
.solution-figure__hint{ position:absolute; bottom:14px; right:14px; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:100px; background:rgba(22,22,22,.72); color:#fff; font-weight:700; font-size:.8rem; backdrop-filter:blur(6px); pointer-events:none; }
.solution-figure__hint svg{ width:1.05em; height:1.05em; }

.lightbox{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,40px); background:rgba(0,0,0,.92); }
.lightbox.is-open{ display:flex; }
.lightbox__img{ max-width:96vw; max-height:92vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); animation:lb-in .3s var(--ease); }
@keyframes lb-in{ from{ opacity:0; transform:scale(.95); } }
.lightbox__close{ position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.9rem; line-height:1; display:grid; place-items:center; transition:background .3s, transform .3s; }
.lightbox__close:hover{ background:var(--grad); transform:rotate(90deg); }

/* ---- Product detail (PDP) ---- */
.pdp.section{ padding-top:clamp(140px,16vw,180px); position:relative; overflow:hidden; }
.pdp__glow{ position:absolute; width:420px; height:420px; border-radius:50%; top:60px; left:-120px;
    background:radial-gradient(circle, rgba(255,100,0,.12), transparent 65%); filter:blur(50px); }
.pdp .container{ position:relative; z-index:1; }
.pdp__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; margin-top:10px; }

.pdp__media{ position:relative; background:#fff; border-radius:var(--r-xl); padding:clamp(22px,4vw,44px);
    box-shadow:var(--shadow); display:grid; place-items:center; }
.pdp__media::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.pdp__media img{ width:100%; height:auto; max-height:460px; object-fit:contain; display:block; }

.pdp__info .pill{ margin-bottom:18px; }
.pdp__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.08; letter-spacing:-.02em; margin-bottom:16px; }
.pdp__desc{ color:var(--ink-soft); font-size:1.05rem; font-weight:500; margin-bottom:26px; }
.pdp__features-title{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; margin-bottom:14px; }
.pdp__features{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:30px; }
.pdp__features li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; font-size:.94rem; color:var(--ink); }
.pdp__features svg{ width:1.25em; height:1.25em; flex:none; color:var(--pumpkin); margin-top:1px; }
.pdp__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:18px; }
.pdp__note{ font-size:.9rem; color:var(--muted); }
.pdp__note strong{ color:var(--ink); }

/* Available models / variants */
.variants{ background:var(--mint); }
.variants__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:24px; }
.variant-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.variant-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
    background:linear-gradient(135deg, var(--pumpkin), var(--deep));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:3; }
.variant-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.variant-card__media{ height:185px; padding:16px; background:#fff; }
.variant-card__media img{ width:100%; height:100%; object-fit:contain; display:block; }
.variant-card__body{ display:flex; flex-direction:column; flex:1; padding:18px 22px 22px; }
.variant-card__body h3{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; margin-bottom:8px; line-height:1.2; }
.variant-card__body p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:16px; flex:1; }
.variant-card__actions{ display:flex; gap:8px; }
.variant-card__actions .btn{ flex:1; }
.variant-card__actions .btn span{ font-size:.82rem; }

/* Related products section */
.related{ background:var(--silver); }
.related .service-card__body{ padding-bottom:22px; }

/* Contact page — QR codes + map */
.contact__qr{ display:flex; gap:16px; margin-top:24px; }
.contact__qr-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.contact__qr-item img{ width:104px; height:104px; padding:7px; border-radius:14px; background:#fff; display:block; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.contact__qr-item span{ font-family:var(--f-display); font-weight:700; font-size:.78rem; color:var(--ink-soft); }
.contact__map{ margin-top:clamp(34px,5vw,56px); }
.contact__map .ph-box{ border-radius:var(--r-lg); }
.ph-box--map{ min-height:400px; }

/* PDP responsive */
@media (max-width:860px){
    .pdp__inner{ grid-template-columns:1fr; }
    .pdp__media{ max-width:480px; }
}
@media (max-width:480px){
    .pdp__features{ grid-template-columns:1fr; }
    .pdp__actions .btn{ width:100%; }
}