/* =========================================================
   SRIPARNA INFOTECH — SHARED DESIGN SYSTEM
   =========================================================
   Single source of truth for the site's visual language,
   extracted verbatim from the homepage's former inline
   <style> block. Every page loads this file; no page should
   redefine these tokens or components locally.
========================================================= */

/* =========================================================
   DESIGN TOKENS
========================================================= */
:root {
    --bg-base:      #04091A;
    --bg-raised:    #080F21;
    --bg-card:      rgba(10, 20, 46, 0.65);
    --bg-card-hov:  rgba(14, 27, 60, 0.88);
    --border:       rgba(148, 163, 184, 0.08);
    --border-sky:   rgba(56,  189, 248, 0.32);
    --border-vio:   rgba(167, 139, 250, 0.32);
    --border-em:    rgba(52,  211, 153, 0.32);
    --border-amb:   rgba(252, 211,  77, 0.32);

    --sky:   #38BDF8;
    --vio:   #A78BFA;
    --em:    #34D399;
    --amb:   #FCD34D;

    --t100:  #F1F5F9;
    --t200:  #CBD5E1;
    --t400:  #94A3B8;
    --t600:  #7C8AA0;   /* WCAG AA on --bg-base: 5.66:1 (was #475569 = 2.62:1) */
    --t700:  #334155;

    --f-disp: 'Syne',         sans-serif;
    --f-body: 'Inter',        sans-serif;
    --f-mono: 'JetBrains Mono', monospace;

    --r-s:  10px;
    --r-m:  16px;
    --r-l:  24px;
    --r-xl: 32px;

    --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   FONT-DISPLAY OVERRIDE (FontAwesome)
   =========================================================
   FontAwesome's own stylesheet sets font-display:block on its icon
   fonts, which can hold icon glyphs invisible for up to 3s while the
   woff2 loads. These re-declare the same @font-face (identical
   family/style/weight/src, so no extra download) with font-display:swap
   instead -- the browser paints with the fallback space immediately
   and swaps in the icon glyph once it arrives. Must be loaded after
   FontAwesome's own stylesheet so the cascade picks this descriptor.
========================================================= */
@font-face {
    font-family:"Font Awesome 6 Free";
    font-style:normal; font-weight:900; font-display:swap;
    src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2");
}
@font-face {
    font-family:"Font Awesome 6 Brands";
    font-style:normal; font-weight:400; font-display:swap;
    src:url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format("woff2");
}

/* =========================================================
   RESET & BASE
========================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* scroll-padding-top offsets in-page anchor jumps (#services, #faq, etc.)
   by the fixed nav's height (70px) plus breathing room, so the target
   heading lands below the nav instead of underneath it. Applies to the
   browser's native hash-scroll too, e.g. a direct visit to /#contact. */
html { scroll-behavior:smooth; scroll-padding-top:94px; font-size:16px; }
body {
    font-family: var(--f-body);
    background: var(--bg-base);
    color: var(--t400);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; }
button { font-family: var(--f-body); }

/* Custom scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background:rgba(56,189,248,0.25); border-radius:3px; }

/* =========================================================
   AMBIENT BACKGROUND ORBS
========================================================= */
.ambient {
    position:fixed; inset:0; z-index:0;
    pointer-events:none; overflow:hidden;
}
.orb {
    position:absolute; border-radius:50%;
    filter:blur(90px); will-change:transform;
}
.orb-1 {
    width:700px; height:700px;
    background:radial-gradient(circle, rgba(14,165,233,0.13) 0%, transparent 70%);
    top:-220px; left:-120px;
    animation:drift1 22s ease-in-out infinite;
}
.orb-2 {
    width:550px; height:550px;
    background:radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 70%);
    top:25%; right:-180px;
    animation:drift2 28s ease-in-out infinite;
}
.orb-3 {
    width:450px; height:450px;
    background:radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
    bottom:15%; left:35%;
    animation:drift3 24s ease-in-out infinite;
}
@keyframes drift1 {
    0%,100%{transform:translate(0,0) scale(1);}
    40%{transform:translate(40px,25px) scale(1.06);}
    70%{transform:translate(-15px,35px) scale(0.94);}
}
@keyframes drift2 {
    0%,100%{transform:translate(0,0) scale(1);}
    35%{transform:translate(-30px,-20px) scale(1.04);}
    70%{transform:translate(20px,30px) scale(0.97);}
}
@keyframes drift3 {
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(25px,-25px) scale(1.03);}
}

/* =========================================================
   UTILITY
========================================================= */
.container { max-width:1180px; margin:0 auto; padding:0 24px; }

.eyebrow {
    font-family: var(--f-mono);
    font-size:0.7rem; font-weight:500;
    letter-spacing:0.14em; text-transform:uppercase;
    color: var(--sky);
    display:inline-flex; align-items:center; gap:9px;
    margin-bottom:12px;
}
.eyebrow::before {
    content:'';
    width:18px; height:1px;
    background:var(--sky); opacity:0.55;
    flex-shrink:0;
}
.section-title {
    font-family: var(--f-disp);
    font-size:clamp(1.75rem, 3.5vw, 2.6rem);
    font-weight:700; color:var(--t100);
    line-height:1.12; letter-spacing:-0.027em;
}
.section-lede {
    font-size:1.03rem; color:var(--t400);
    max-width:560px; margin-top:14px; line-height:1.75;
}

/* =========================================================
   GLASS CARD
========================================================= */
.glass {
    background: var(--bg-card);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border:1px solid var(--border);
    border-radius: var(--r-l);
    position:relative; overflow:hidden;
    transition:
        border-color .35s var(--smooth),
        transform    .38s var(--spring),
        box-shadow   .35s var(--smooth);
}
/* Subtle inner highlight */
.glass::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.035) 0%, transparent 55%);
    pointer-events:none; border-radius:inherit;
}
.glass:hover {
    transform:translateY(-4px);
    border-color: var(--border-sky);
    box-shadow:
        0 16px 48px rgba(0,0,0,0.45),
        0 0 0 1px var(--border-sky),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.glass.vio:hover { border-color:var(--border-vio); box-shadow:0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px var(--border-vio), inset 0 1px 0 rgba(255,255,255,0.06); }
.glass.em:hover  { border-color:var(--border-em);  box-shadow:0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px var(--border-em),  inset 0 1px 0 rgba(255,255,255,0.06); }
.glass.amb:hover { border-color:var(--border-amb); box-shadow:0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px var(--border-amb), inset 0 1px 0 rgba(255,255,255,0.06); }

/* =========================================================
   BUTTONS
========================================================= */
.btn {
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 26px; border-radius:999px;
    font-family:var(--f-body); font-size:0.93rem; font-weight:600;
    cursor:pointer; border:none; white-space:nowrap;
    position:relative; overflow:hidden;
    transition: all .3s var(--smooth);
}
/* Shimmer sweep on hover */
.btn::after {
    content:'';
    position:absolute;
    top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition:left .5s ease;
    pointer-events:none;
}
.btn:hover::after { left:150%; }

.btn-primary {
    background:linear-gradient(135deg, #0EA5E9, #6366F1);
    color:#fff;
    box-shadow:0 8px 24px rgba(14,165,233,0.32);
}
.btn-primary:hover {
    box-shadow:0 12px 32px rgba(14,165,233,0.48);
    transform:translateY(-2px);
}
.btn-whatsapp {
    background:linear-gradient(135deg, #075E54, #1FAF6E);
    color:#fff;
    box-shadow:0 8px 24px rgba(7,94,84,0.38);
}
.btn-whatsapp:hover {
    box-shadow:0 12px 32px rgba(31,175,110,0.5);
    transform:translateY(-2px);
}
.btn-ghost {
    background:rgba(255,255,255,0.06);
    color:var(--t200);
    border:1px solid var(--border);
}
.btn-ghost:hover {
    background:rgba(255,255,255,0.10);
    border-color:rgba(255,255,255,0.14);
    transform:translateY(-2px);
}

/* =========================================================
   NAVIGATION
========================================================= */
#nav {
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:70px;
    display:flex; align-items:center; justify-content:center;
    padding:0 24px;
    transition:background .4s var(--smooth), border-color .4s var(--smooth), box-shadow .4s var(--smooth);
}
#nav.scrolled {
    background:rgba(4,9,26,0.88);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border-bottom:1px solid var(--border);
    box-shadow:0 4px 28px rgba(0,0,0,0.32);
}
.nav-inner {
    width:100%; max-width:1180px;
    display:flex; align-items:center; justify-content:space-between;
    position:relative;
}
.nav-logo {
    font-family:var(--f-disp);
    font-size:1.1rem; font-weight:700;
    color:var(--t100); letter-spacing:-0.01em;
    flex-shrink:0;
}
.nav-logo span { color:var(--sky); }
.nav-logo img { height:34px; width:auto; display:block; }

/* Refined Glassmorphism Logo Wrapper */
.premium-glass-logo {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;           /* Dramatically reduced padding for a tighter fit */
    border-radius: 8px;          /* Softer, less extreme rounded corners */
    background: rgba(255, 255, 255, 0.75); /* Brighter white to ensure text pops, less muddy */
    backdrop-filter: blur(8px);  /* Softer blur */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Lighter shadow so it doesn't look heavy */
    transition: all .3s var(--smooth);
}

.premium-glass-logo:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ensure the image inside stays constrained */
.premium-glass-logo img {
    height: 32px !important;     /* Locks the logo height to fit perfectly in the nav */
    width: auto;
    display: block;
}

.nav-menu a:hover { color:var(--t100); background:rgba(255,255,255,0.055); }

.nav-cta {
    display:inline-flex; align-items:center; gap:7px;
    font-size:0.84rem; font-weight:600; color:var(--sky);
    padding:9px 18px; border-radius:999px;
    border:1px solid rgba(56,189,248,0.22);
    background:rgba(56,189,248,0.08);
    transition:all .25s;
}
.nav-cta:hover { background:var(--sky); color:#04091A; border-color:var(--sky); transform:none; }

.nav-hamburger {
    display:none; background:none;
    border:1px solid var(--border); color:var(--t200);
    width:38px; height:38px; border-radius:var(--r-s);
    align-items:center; justify-content:center;
    cursor:pointer; font-size:0.95rem;
    transition:all .2s;
}
.nav-hamburger:hover { border-color:rgba(56,189,248,0.3); color:var(--sky); }

/* =========================================================
   HERO SECTION  — Signature: grain noise + mesh gradient
========================================================= */
#hero {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:120px 24px 90px;
    text-align:center;
    overflow:hidden;
}

/* Radial mesh gradient (faint) */
#hero::before {
    content:'';
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(14,165,233,0.09) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 80% 70%, rgba(99,102,241,0.08) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(52,211,153,0.04) 0%, transparent 65%);
    pointer-events:none;
}

/* Noise grain — the signature texture layer */
#hero::after {
    content:'';
    position:absolute; inset:0; z-index:1;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size:220px 220px;
    opacity:0.028; pointer-events:none;
}

.hero-content {
    position:relative; z-index:2;
    max-width:800px; margin:0 auto;
}

/* Google Rating pill */
.hero-rating {
    display:inline-flex; align-items:center; gap:9px;
    padding:7px 16px; border-radius:999px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.10);
    font-size:0.83rem; color:var(--t200);
    margin-bottom:18px; cursor:pointer;
    transition:border-color .2s, background .2s;
}
.hero-rating:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); }
.hero-stars { color:#F59E0B; letter-spacing:1px; font-size:0.78rem; }

/* Badge pill */
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px; border-radius:999px;
    background:rgba(56,189,248,0.08);
    border:1px solid rgba(56,189,248,0.18);
    font-family:var(--f-mono);
    font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--sky); margin-bottom:28px;
}
.badge-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--sky);
    animation:blink 2s ease-in-out infinite;
}
@keyframes blink {
    0%,100%{opacity:1; transform:scale(1);}
    50%{opacity:0.4; transform:scale(0.65);}
}

/* Hero heading */
.hero-h1 {
    font-family:var(--f-disp);
    font-size:clamp(2.6rem, 7.5vw, 5.2rem);
    font-weight:800; line-height:1.04;
    letter-spacing:-0.035em; color:var(--t100);
    margin-bottom:22px;
}
.grad-text {
    background:linear-gradient(135deg, #38BDF8 0%, #818CF8 48%, #34D399 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero-sub {
    font-size:clamp(0.98rem, 2vw, 1.12rem);
    color:var(--t400); max-width:580px;
    margin:0 auto 40px; line-height:1.78;
}

/* CTA row */
.hero-btns {
    display:flex; align-items:center;
    justify-content:center; flex-wrap:wrap;
    gap:12px; margin-bottom:64px;
}

/* Stat strip */
.hero-stats {
    display:inline-flex;
    border:1px solid var(--border);
    border-radius:var(--r-l);
    background:var(--bg-card);
    backdrop-filter:blur(20px);
    overflow:hidden;
}
.stat {
    padding:18px 34px; text-align:center;
    border-right:1px solid var(--border);
}
.stat:last-child { border-right:none; }
.stat-val {
    font-family:var(--f-disp);
    font-size:1.55rem; font-weight:700;
    color:var(--t100); letter-spacing:-0.03em;
    line-height:1; margin-bottom:4px;
}
.stat-lbl {
    font-family:var(--f-mono);
    font-size:0.65rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--t600);
}

/* =========================================================
   MARQUEE TRUST STRIP
========================================================= */
.marquee-wrap {
    position:relative; z-index:1;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:rgba(8,15,32,0.6);
    overflow:hidden; padding:0;
}
.marquee-track {
    display:flex; gap:0;
    animation:scroll-left 32s linear infinite;
    width:max-content;
}
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
.marquee-item {
    display:flex; align-items:center; gap:9px;
    padding:14px 38px;
    border-right:1px solid var(--border);
    font-family:var(--f-mono);
    font-size:0.7rem; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--t600);
    white-space:nowrap;
}
.marquee-item i { color:var(--sky); font-size:0.55rem; }
@keyframes scroll-left {
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

/* =========================================================
   SECTIONS
========================================================= */
.text-center { text-align:center; }
.section { position:relative; z-index:1; padding:104px 24px; }
.section-alt { background:rgba(8,15,31,0.55); }
.section-header { margin-bottom:54px; }
.section-header.centered { text-align:center; }
.section-header.centered .section-lede { margin:14px auto 0; }

/* =========================================================
   BENTO SERVICE GRID
========================================================= */
.bento {
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "comp comp comp comp cctv cctv"
        "print print mob mob soft soft";
    gap:13px;
}
.bc-comp  { grid-area:comp; }
.bc-cctv  { grid-area:cctv; }
.bc-print { grid-area:print; }
.bc-mob   { grid-area:mob; }
.bc-soft  { grid-area:soft; }

.bento-card { padding:34px 32px; }

/* Featured card inner accent stripe */
.bc-comp {
    background:linear-gradient(135deg,
        rgba(14,165,233,0.10) 0%,
        rgba(99,102,241,0.06) 60%,
        rgba(10,20,46,0.65) 100%);
    border-color:rgba(14,165,233,0.16);
}
.bc-comp:hover {
    border-color:rgba(14,165,233,0.38);
    box-shadow:0 20px 56px rgba(0,0,0,0.48),
               0 0 0 1px rgba(14,165,233,0.3),
               inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Card tag pill */
.c-tag {
    display:inline-flex; align-items:center;
    padding:4px 11px; border-radius:999px;
    font-family:var(--f-mono); font-size:0.63rem;
    font-weight:500; letter-spacing:0.11em; text-transform:uppercase;
    margin-bottom:18px;
}
.t-sky { color:var(--sky); background:rgba(56,189,248,0.1); }
.t-vio { color:var(--vio); background:rgba(167,139,250,0.1); }
.t-em  { color:var(--em);  background:rgba(52,211,153,0.1); }
.t-amb { color:var(--amb); background:rgba(252,211,77,0.1); }

/* Card icon */
.c-icon {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin-bottom:18px;
    transition:transform .38s var(--spring);
    flex-shrink:0;
}
.glass:hover .c-icon { transform:scale(1.12) rotate(-4deg); }
.i-sky { background:rgba(56,189,248,0.12); color:var(--sky); }
.i-vio { background:rgba(167,139,250,0.12); color:var(--vio); }
.i-em  { background:rgba(52,211,153,0.12);  color:var(--em); }
.i-amb { background:rgba(252,211,77,0.12);  color:var(--amb); }

.c-title {
    font-family:var(--f-disp);
    font-size:1.18rem; font-weight:700;
    color:var(--t100); letter-spacing:-0.012em;
    line-height:1.22; margin-bottom:10px;
}
.bc-comp .c-title { font-size:1.55rem; }
.c-desc  { font-size:0.875rem; color:var(--t400); line-height:1.68; }

/* Bullet feature list (only on featured card) */
.c-features { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.c-feat {
    display:flex; align-items:center; gap:10px;
    font-size:0.845rem; color:var(--t400);
}
.c-feat::before {
    content:'';
    width:5px; height:5px; border-radius:50%;
    background:var(--sky); flex-shrink:0;
}

/* Card CTA link */
.c-link {
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.8rem; font-weight:600;
    margin-top:22px; transition:gap .22s;
}
.c-link:hover { gap:10px; }
.cl-sky { color:var(--sky); }
.cl-vio { color:var(--vio); }
.cl-em  { color:var(--em); }
.cl-amb { color:var(--amb); }

/* =========================================================
   WHY US — 3 big-number cards
========================================================= */
.why-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:13px;
}
.why-card { padding:44px 32px; text-align:center; }
.why-num {
    font-family:var(--f-disp);
    font-size:3.2rem; font-weight:800;
    letter-spacing:-0.045em; line-height:1;
    margin-bottom:14px;
    background:linear-gradient(135deg, var(--t100), var(--t400));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.why-title {
    font-family:var(--f-disp);
    font-size:1.08rem; font-weight:700;
    color:var(--t100); margin-bottom:10px; letter-spacing:-0.01em;
}
.why-desc { font-size:0.875rem; color:var(--t400); line-height:1.65; }

/* =========================================================
   SERVICE AREAS
========================================================= */
.areas-layout {
    display:grid; grid-template-columns:1fr 1fr;
    gap:64px; align-items:center;
}
.area-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.chip {
    padding:9px 19px; border-radius:999px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    font-size:0.87rem; color:var(--t400);
    transition:all .25s;
}
.chip:hover {
    background:rgba(56,189,248,0.08);
    border-color:rgba(56,189,248,0.3);
    color:var(--sky);
}
.areas-btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

/* Info card (hours) */
.info-card { padding:38px; }
.info-row {
    display:flex; justify-content:space-between;
    align-items:center; padding:14px 0;
    border-bottom:1px solid var(--border);
}
.info-row:last-child { border-bottom:none; }
.info-lbl { font-size:0.88rem; color:var(--t400); }
.info-val { font-family:var(--f-mono); font-size:0.82rem; }
.iv-sky { color:var(--sky); }
.iv-em  { color:var(--em); }
.iv-vio { color:var(--vio); }
.iv-amb { color:var(--amb); }

/* =========================================================
   FAQ ACCORDION
========================================================= */
.faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:7px; }
.faq-item {
    border:1px solid var(--border); border-radius:var(--r-m);
    background:var(--bg-card); overflow:hidden;
    transition:border-color .25s;
}
.faq-item.open { border-color:rgba(56,189,248,0.24); }
.faq-q {
    display:flex; align-items:center; justify-content:space-between;
    padding:19px 22px; cursor:pointer;
    font-weight:600; font-size:0.93rem; color:var(--t200);
    transition:color .2s; user-select:none;
}
.faq-q:hover { color:var(--t100); }
.faq-ico {
    width:27px; height:27px; border-radius:8px;
    background:rgba(56,189,248,0.10);
    display:flex; align-items:center; justify-content:center;
    color:var(--sky); font-size:0.65rem; flex-shrink:0;
    transition:transform .32s var(--smooth), background .2s;
}
.faq-item.open .faq-ico { transform:rotate(45deg); background:rgba(56,189,248,0.18); }
.faq-a {
    padding:0 22px; font-size:0.885rem; color:var(--t400); line-height:1.72;
    max-height:0; overflow:hidden;
    transition:max-height .42s ease, padding .3s ease;
}
.faq-item.open .faq-a { max-height:300px; padding-bottom:20px; }

/* =========================================================
   CONTACT
========================================================= */
.contact-layout { display:grid; grid-template-columns:1fr 1.25fr; gap:64px; align-items:start; }
.contact-info { padding:48px 0; }
.c-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.c-detail-ico {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:0.9rem; flex-shrink:0; margin-top:2px;
}
.c-detail-text strong {
    display:block; font-family:var(--f-mono);
    font-size:0.67rem; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--t600); margin-bottom:3px;
}
.c-detail-text a, .c-detail-text span { font-size:0.92rem; color:var(--t200); transition:color .2s; }
.c-detail-text a:hover { color:var(--sky); }

/* Form card */
.form-card { padding:38px; }
.form-title {
    font-family:var(--f-disp); font-size:1.22rem; font-weight:700;
    color:var(--t100); letter-spacing:-0.01em; margin-bottom:26px;
}
.f-err {
    background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
    border-radius:var(--r-s); padding:11px 15px;
    font-size:0.85rem; color:#FCA5A5; margin-bottom:16px; display:none;
}
.f-group { margin-bottom:13px; }
.f-input, .f-select, .f-textarea {
    width:100%;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border); border-radius:var(--r-s);
    padding:12px 15px;
    font-family:var(--f-body); font-size:0.88rem; color:var(--t100);
    outline:none; transition:border-color .22s, background .22s;
}
.f-input::placeholder, .f-textarea::placeholder { color:var(--t700); }
.f-input:focus, .f-select:focus, .f-textarea:focus {
    border-color:rgba(56,189,248,0.38);
    background:rgba(56,189,248,0.04);
}
.f-select option { background:#0A1628; }
.f-textarea { resize:vertical; min-height:108px; }
.f-btn {
    width:100%; padding:13px;
    border-radius:var(--r-s); border:none; cursor:pointer;
    font-family:var(--f-body); font-size:0.93rem; font-weight:700;
    background:linear-gradient(135deg, #0EA5E9, #6366F1); color:#fff;
    box-shadow:0 8px 24px rgba(14,165,233,0.28);
    transition:all .3s var(--smooth);
}
.f-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(14,165,233,0.44); }
.f-btn:disabled { opacity:0.55; cursor:not-allowed; transform:none; }

/* =========================================================
   FOOTER
========================================================= */
footer {
    position:relative; z-index:1;
    border-top:1px solid var(--border);
    padding:64px 24px 36px;
}
.foot-grid {
    max-width:1180px; margin:0 auto 40px;
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:52px;
}
.foot-logo {
    font-family:var(--f-disp); font-size:1.1rem; font-weight:700;
    color:var(--t100); margin-bottom:12px;
}
.foot-logo span { color:var(--sky); }
.foot-desc { font-size:0.855rem; color:var(--t600); line-height:1.65; max-width:280px; }
.foot-socials { display:flex; gap:8px; margin-top:20px; }
.f-social {
    width:35px; height:35px; border-radius:9px;
    background:rgba(255,255,255,0.05); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--t400); font-size:0.85rem;
    transition:all .2s;
}
.f-social:hover { background:rgba(56,189,248,0.1); border-color:rgba(56,189,248,0.3); color:var(--sky); }

.foot-h { font-family:var(--f-mono); font-size:0.67rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--t600); margin-bottom:16px; }
.foot-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.foot-links a { font-size:0.86rem; color:var(--t400); transition:color .2s; }
.foot-links a:hover { color:var(--t100); }

.foot-bottom {
    max-width:1180px; margin:0 auto;
    padding-top:28px; border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:10px;
    font-size:0.78rem; color:var(--t600);
}

/* Contact column (carried over from the former templated footer) */
.foot-contact { font-style:normal; display:flex; flex-direction:column; gap:11px; }
.foot-contact p { display:flex; align-items:flex-start; gap:10px; font-size:0.86rem; color:var(--t400); line-height:1.6; }
.foot-contact i { color:var(--sky); font-size:0.8rem; margin-top:5px; flex-shrink:0; width:14px; }
.foot-contact a { transition:color .2s; }
.foot-contact a:hover { color:var(--t100); }

/* Legal links row */
.foot-legal { list-style:none; display:flex; flex-wrap:wrap; gap:18px; }
.foot-legal a { color:var(--t400); transition:color .2s; }
.foot-legal a:hover { color:var(--sky); }

/* OEM / no-remote-support disclaimer */
.foot-disclaimer {
    max-width:1180px; margin:34px auto 0;
    padding-top:22px; border-top:1px solid var(--border);
    font-size:0.78rem; color:var(--t600); line-height:1.7; text-align:center;
}
.foot-disclaimer strong { color:var(--t400); }

/* =========================================================
   FLOATING WHATSAPP BUTTON
========================================================= */
.floating-wa {
    position:fixed; bottom:26px; right:26px; z-index:900;
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.65rem; color:#fff;
    background:linear-gradient(135deg, #075E54, #1FAF6E);
    box-shadow:0 10px 30px rgba(7,94,84,0.45);
    transition:transform .3s var(--spring), box-shadow .3s var(--smooth);
}
.floating-wa:hover {
    transform:scale(1.08) translateY(-2px);
    box-shadow:0 14px 38px rgba(31,175,110,0.55);
}

/* =========================================================
   SCROLL REVEAL ANIMATIONS
========================================================= */
.reveal {
    opacity:0; transform:translateY(22px);
    transition:opacity .6s ease, transform .6s ease;
}
.reveal.in { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px) {
    .bento {
        grid-template-columns:repeat(2, 1fr);
        grid-template-areas:
            "comp comp"
            "cctv print"
            "mob soft";
    }
}
@media (max-width:900px) {
    .nav-hamburger { display:flex; }
    .nav-menu {
        display:none; position:absolute;
        top:calc(100% + 8px); left:-12px; right:-12px;
        background:rgba(4,9,26,0.97); backdrop-filter:blur(20px);
        border:1px solid var(--border); border-radius:var(--r-m);
        flex-direction:column; align-items:stretch;
        gap:3px; padding:12px;
        box-shadow:0 16px 40px rgba(0,0,0,0.4);
    }
    .nav-menu.open { display:flex; }
    .nav-menu a { padding:11px 14px; border-radius:var(--r-s); }
    .nav-cta { justify-content:center; border-radius:var(--r-s); }
    .why-grid { grid-template-columns:1fr; }
    .areas-layout { grid-template-columns:1fr; gap:40px; }
    .contact-layout { grid-template-columns:1fr; gap:0; }
    .contact-info { padding:0 0 32px; }
    .foot-grid { grid-template-columns:1fr 1fr; gap:36px; }
    .foot-bottom { flex-direction:column; text-align:center; }
    .foot-legal { justify-content:center; }
}
@media (max-width:700px) {
    .foot-grid { grid-template-columns:1fr; gap:34px; }
    .floating-wa { width:50px; height:50px; font-size:1.45rem; bottom:18px; right:18px; }
}
@media (max-width:640px) {
    .section { padding:76px 20px; }
    .bento {
        grid-template-columns:1fr;
        grid-template-areas:none;
    }
    .bc-comp, .bc-cctv, .bc-print, .bc-mob, .bc-soft { grid-area:auto; }
    .hero-btns { flex-direction:column; align-items:center; }
    .hero-btns .btn { width:100%; max-width:340px; justify-content:center; }
    .hero-stats { flex-direction:column; }
    .stat { border-right:none; border-bottom:1px solid var(--border); }
    .stat:last-child { border-bottom:none; }
    .why-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto !important; }
    .orb, .marquee-track, .badge-dot, .btn::after { animation:none !important; }
    .reveal { opacity:1; transform:none; transition:none; }
    * { transition-duration:.01ms !important; }
}

/* =========================================================
   SUBPAGE COMPONENTS
   =========================================================
   Everything below serves the non-homepage pages. They are
   built from the same tokens as the homepage components
   above -- no new colours, fonts, radii or easing curves.
========================================================= */

/* ---- Compact page hero -----------------------------------
   The homepage hero is a full-viewport statement piece. Inner
   pages need the same texture and gradient treatment at a
   height that does not push their content below the fold. */
.page-hero {
    position:relative; z-index:1;
    padding:150px 24px 72px;
    text-align:center; overflow:hidden;
}
.page-hero::before {
    content:''; position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 60% 60% at 22% 25%, rgba(14,165,233,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 78% 70%, rgba(99,102,241,0.08) 0%, transparent 65%);
    pointer-events:none;
}
.page-hero::after {
    content:''; position:absolute; inset:0; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size:220px 220px; opacity:0.028; pointer-events:none;
}
.page-hero > .container { position:relative; z-index:2; }
.page-hero .eyebrow { justify-content:center; }
.page-hero h1 {
    font-family:var(--f-disp);
    font-size:clamp(2.05rem, 5vw, 3.4rem);
    font-weight:800; line-height:1.08; letter-spacing:-0.032em;
    color:var(--t100); margin-bottom:18px;
}
.page-hero .subtitle {
    font-size:clamp(0.96rem, 1.7vw, 1.08rem);
    color:var(--t400); max-width:640px; margin:0 auto; line-height:1.75;
}
.hero-buttons {
    display:flex; align-items:center; justify-content:center;
    flex-wrap:wrap; gap:12px; margin-top:34px;
}

/* ---- Generic auto-fit card grid ---- */
.card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(268px, 1fr));
    gap:13px;
}
.card-grid .glass { padding:32px 30px; }

/* ---- Long-form prose (About, legal pages) ---- */
.prose { max-width:820px; margin:0 auto; }
.prose > * + * { margin-top:16px; }
.prose h2 {
    font-family:var(--f-disp);
    font-size:clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight:700; color:var(--t100);
    letter-spacing:-0.02em; line-height:1.25;
    margin-top:46px; padding-bottom:12px;
    border-bottom:1px solid var(--border);
}
.prose h3 {
    font-family:var(--f-disp); font-size:1.1rem; font-weight:700;
    color:var(--t100); letter-spacing:-0.012em; margin-top:30px;
}
.prose p  { color:var(--t400); line-height:1.78; font-size:0.97rem; }
.prose strong { color:var(--t200); font-weight:600; }
.prose em { color:var(--t400); }
.prose a { color:var(--sky); }
.prose a:hover { text-decoration:underline; }
.prose ul, .prose ol { padding-left:22px; color:var(--t400); line-height:1.78; font-size:0.97rem; }
.prose li + li { margin-top:8px; }
.prose li::marker { color:var(--sky); }
.prose address { font-style:normal; color:var(--t400); line-height:1.8; }

/* Pull-quote used at the top of the About story */
.prose-quote {
    font-family:var(--f-disp);
    font-size:clamp(1.1rem, 2.4vw, 1.4rem);
    font-weight:600; line-height:1.55; color:var(--t200);
    padding:26px 30px; margin-bottom:8px;
    border-left:2px solid var(--sky);
    background:rgba(56,189,248,0.045);
    border-radius:0 var(--r-m) var(--r-m) 0;
}

/* ---- Callout boxes ---- */
.highlight-box {
    background:rgba(56,189,248,0.06);
    border:1px solid rgba(56,189,248,0.18);
    border-radius:var(--r-m);
    padding:22px 26px; margin:28px 0;
}
.highlight-box > p:first-child {
    font-family:var(--f-disp); font-weight:700;
    color:var(--t100); font-size:1.05rem; margin-bottom:8px;
}
.highlight-box p { color:var(--t400); line-height:1.7; font-size:0.93rem; }

/* Warning callout -- amber rather than the old red, to sit in the dark palette */
.notice {
    background:rgba(252,211,77,0.06);
    border:1px solid rgba(252,211,77,0.22);
    border-left:3px solid var(--amb);
    border-radius:var(--r-m);
    padding:22px 26px; margin:30px 0;
}
.notice h3 { font-family:var(--f-disp); color:var(--amb); font-size:1.05rem; font-weight:700; margin:0 0 8px; }
.notice p  { color:var(--t400); line-height:1.72; font-size:0.93rem; margin:0; }

/* ---- Closing statement card (About) ---- */
.punchline-card {
    text-align:center; padding:48px 36px; margin:46px 0 0;
    border-radius:var(--r-l);
    border:1px solid rgba(56,189,248,0.18);
    background:linear-gradient(135deg, rgba(14,165,233,0.10) 0%, rgba(99,102,241,0.07) 55%, rgba(10,20,46,0.65) 100%);
}
.punchline-card h2 {
    font-family:var(--f-disp);
    font-size:clamp(1.25rem, 2.8vw, 1.75rem);
    font-weight:700; color:var(--t100);
    letter-spacing:-0.02em; line-height:1.3;
    border:none; margin:0; padding:0;
}
.punchline-card .brand-line { font-family:var(--f-disp); font-weight:700; font-size:1.25rem; color:var(--t100); margin-top:16px; }
.punchline-card .brand-sub  { font-style:italic; color:var(--t600); font-size:0.9rem; }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
.badge {
    display:inline-flex; align-items:center;
    padding:6px 14px; border-radius:999px;
    font-family:var(--f-mono); font-size:0.66rem;
    letter-spacing:0.1em; text-transform:uppercase;
    color:var(--sky); background:rgba(56,189,248,0.10);
    border:1px solid rgba(56,189,248,0.20);
}

/* ---- Timeline list (About) ---- */
.timeline-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.timeline-list li {
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 20px; border-radius:var(--r-m);
    background:var(--bg-card); border:1px solid var(--border);
    color:var(--t400); font-size:0.93rem; line-height:1.7;
}
.timeline-list i { color:var(--sky); font-size:1rem; margin-top:4px; flex-shrink:0; }
.timeline-list strong { color:var(--t100); font-family:var(--f-disp); }

/* ---- Brand badges (service pages) ---- */
.brand-badges { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:28px 0 20px; }
.brand-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:999px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    font-size:0.87rem; color:var(--t200); transition:all .25s;
}
.brand-badge:hover { border-color:rgba(56,189,248,0.3); background:rgba(56,189,248,0.07); }
.brand-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--sky); flex-shrink:0; }

/* Small print under brand rows / trademark notes */
.disclaimer-text { font-size:0.8rem; color:var(--t600); line-height:1.7; max-width:760px; margin:0 auto; }

/* ---- Static area chips (service pages use bare spans) ---- */
.area-chips.static { justify-content:center; margin-top:26px; }
.area-chips.static span {
    padding:9px 19px; border-radius:999px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    font-size:0.87rem; color:var(--t400);
}

/* ---- Native <details> FAQ ------------------------------------
   Service pages use <details>/<summary>, which keeps the
   accordion working without JavaScript. Styled to match the
   homepage's scripted accordion. */
details.faq-item > summary { list-style:none; }
details.faq-item > summary::-webkit-details-marker { display:none; }
details.faq-item > summary::after {
    content:"+";
    width:27px; height:27px; border-radius:8px; flex-shrink:0;
    background:rgba(56,189,248,0.10); color:var(--sky);
    display:flex; align-items:center; justify-content:center;
    font-size:0.95rem; line-height:1;
    transition:transform .32s var(--smooth), background .2s;
}
details.faq-item[open] { border-color:rgba(56,189,248,0.24); }
details.faq-item[open] > summary::after { transform:rotate(45deg); background:rgba(56,189,248,0.18); }
details.faq-item .faq-a { max-height:none; padding:0 22px 20px; }

/* ---- Thank-you confirmation card ---- */
.thanks-wrap {
    position:relative; z-index:1;
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:120px 24px 80px; text-align:center;
}
.thanks-card { padding:52px 44px; max-width:560px; }
.thanks-card .thanks-icon { font-size:3rem; color:var(--em); margin-bottom:20px; }
.thanks-card h1 {
    font-family:var(--f-disp); font-size:clamp(1.8rem, 4vw, 2.4rem);
    font-weight:800; color:var(--t100); letter-spacing:-0.03em; margin-bottom:14px;
}
.thanks-card p { color:var(--t400); line-height:1.75; margin-bottom:30px; }

/* ---- Subpage responsive ---- */
@media (max-width:640px) {
    .page-hero { padding:118px 20px 56px; }
    .hero-buttons { flex-direction:column; align-items:stretch; }
    .hero-buttons .btn { width:100%; justify-content:center; }
    .prose h2 { margin-top:36px; }
    .punchline-card { padding:36px 24px; }
    .thanks-card { padding:38px 26px; }
}

/* =========================================================
   DIGITAL CARD PAGE (/info)
   =========================================================
   A share-friendly contact card. Reuses .page-hero, .glass,
   .info-card, .c-detail and .disclaimer-text; only the
   pieces below are specific to this page.
========================================================= */

/* Intrinsic size is 1000x300 and is set on the <img> too, so the
   aspect ratio is reserved before the file loads -- no layout shift. */
.info-logo {
    width:min(260px, 68%); height:auto;
    margin:0 auto 22px;
}

.info-layout {
    display:grid; grid-template-columns:1fr 1fr;
    gap:13px; align-items:start;
    max-width:940px; margin:0 auto;
}

/* Section label inside a card */
.slbl {
    font-family:var(--f-mono);
    font-size:0.67rem; letter-spacing:0.13em; text-transform:uppercase;
    color:var(--t600); margin-bottom:20px;
}

/* .c-detail is a <div> on the homepage and an <a> here; keep the
   hover affordance only where it is actually a link. */
a.c-detail { transition:transform .25s var(--smooth); }
a.c-detail:hover { transform:translateX(3px); }
a.c-detail:hover .c-detail-text span { color:var(--sky); }

.svc-grid { display:flex; flex-direction:column; gap:8px; }
.svc {
    display:block; padding:11px 16px;
    border-radius:var(--r-s);
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    font-size:0.89rem; color:var(--t200);
    transition:all .25s var(--smooth);
}
a.svc:hover {
    background:rgba(56,189,248,0.08);
    border-color:rgba(56,189,248,0.3);
    color:var(--sky); transform:translateX(3px);
}

.info-ftr { text-align:center; margin-top:40px; }
.f-tag {
    display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
    justify-content:center;
    font-family:var(--f-mono);
    font-size:0.72rem; letter-spacing:0.11em; text-transform:uppercase;
    color:var(--t400); margin-bottom:10px;
}
.f-tag .dot {
    width:5px; height:5px; border-radius:50%;
    background:var(--sky); flex-shrink:0;
}

@media (max-width:760px) {
    .info-layout { grid-template-columns:1fr; }
}