/* ============================================================================ Nirbhoy GPS — Home redesign v2 (approved 2026-07-27 brief) Official brand palette ONLY: navy #0C2155 · royal #1558A3 · sky #6E99C2 · light #ABC3DA · white. Always-light page (brand guideline: white bg). Scope: this stylesheet is referenced ONLY by Views/Home/Index.cshtml. ============================================================================ */ :root{ --navy:#0C2155; --royal:#1558A3; --sky:#6E99C2; --lite:#ABC3DA; --ink:#0C2155; --ink-soft:#3A5680; --ink-faint:#6E86A8; --ground:#FFFFFF; --mist:#F0F5FA; --card:#FFFFFF; --line:#D3DFEC; --map-bg:#081737; --map-grid:rgba(171,195,218,.14); --map-route:#6E99C2; --shadow:0 1px 2px rgba(12,33,85,.06),0 8px 24px -12px rgba(12,33,85,.16); --shadow-lg:0 2px 4px rgba(12,33,85,.08),0 24px 48px -16px rgba(12,33,85,.26); --r:14px; --font:"Plus Jakarta Sans","Avenir Next","Segoe UI Variable Display","Segoe UI","Hind Siliguri",system-ui,-apple-system,sans-serif; --mono:ui-monospace,"Cascadia Code","Cascadia Mono",Consolas,"SF Mono",monospace; } html{color-scheme:light} /* ============================================================================ TENANT PALETTES — apply via in _Layout.cshtml. Default (:root above) = Nirbhoy's approved navy/royal/sky/lite palette. Only key brand colors are overridden per tenant; layout/typography stay identical. Add a new tenant by copying one of the blocks below and swapping the 4-5 hex values. ============================================================================ */ /* TrackMe — red accents only. Keeps the navy structural palette (navbar, text, backgrounds); only accent colors switch. */ body[data-brand="trackme"] { --royal: #dc2626; /* red primary — buttons, links, active states */ --sky: #ef4444; /* red secondary — highlights */ --lite: #fca5a5; /* soft red — borders, subtle bg */ --map-route: #ef4444; /* red route line on the map */ } /* RoadGuard — green accents only. Keeps the same navy structural palette; only accent colors switch. */ body[data-brand="roadguard"] { --royal: #059669; --sky: #10b981; --lite: #a7f3d0; --map-route: #10b981; } /* Nirbhoy — inherits :root defaults (the approved 2026-07-27 navy palette). No override needed. */ /* ============ BASE ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font);color:var(--ink);background:var(--ground);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased} ::selection{background:var(--lite);color:var(--navy)} img{max-width:100%;display:block} h1,h2,h3,h4{line-height:1.15;text-wrap:balance;color:var(--ink)} a{color:var(--royal);text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--royal);outline-offset:3px;border-radius:6px} .wrap{max-width:1140px;margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--royal);display:flex;align-items:center;gap:10px;justify-content:center} .eyebrow::before,.eyebrow::after{content:"";height:1px;width:26px;background:var(--lite)} .sec-head{text-align:center;max-width:660px;margin:0 auto 52px;display:flex;flex-direction:column;gap:14px} .sec-head h2{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800;letter-spacing:-.02em} .sec-head p{color:var(--ink-soft)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} section{padding:88px 0} .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ck{flex:none;width:16px;height:16px;margin-top:4px;color:var(--royal);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* ============ TOP STRIP + NAV ============ */ .topstrip{background:var(--map-bg);color:var(--lite);font-size:.8rem;padding:7px 0} .topstrip .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .topstrip a{color:#fff;font-weight:600} .topstrip a:hover{color:var(--lite)} header.nav{position:sticky;top:0;z-index:50;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)} .nav-in{display:flex;align-items:center;gap:26px;height:68px} .brand{display:flex;align-items:center;gap:10px;font-size:1.22rem;font-weight:800;color:#fff;letter-spacing:-.01em} .brand svg,.brand img{flex:none} .brand b{color:var(--lite)} nav.links{display:flex;gap:24px;margin-left:auto;align-items:center} nav.links a{color:rgba(255,255,255,.82);font-weight:600;font-size:.92rem;padding:6px 2px;border-bottom:2px solid transparent} nav.links a:hover{color:#fff;border-bottom-color:var(--sky)} .nav-cta{display:flex;gap:10px;align-items:center} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:700;font-size:.95rem;border-radius:999px;padding:11px 22px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .btn:hover{transform:translateY(-1px)} .btn-royal{background:var(--royal);color:#fff} .btn-royal:hover{box-shadow:0 8px 20px -8px var(--royal);color:#fff} .btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{box-shadow:0 8px 20px -8px var(--navy);color:#fff} .btn-white{background:#fff;color:var(--navy)} .btn-white:hover{box-shadow:0 8px 20px -8px rgba(255,255,255,.6);color:var(--navy)} .btn-ghost{border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--royal);color:var(--royal)} .btn-ghost-w{border-color:rgba(255,255,255,.45);color:#fff} .btn-ghost-w:hover{border-color:#fff;color:#fff} #menu-t{display:none} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto;background:none;border:none} .burger span{width:22px;height:2.5px;background:#fff;border-radius:2px;transition:.2s} /* ============ HERO ============ */ .hero{padding:76px 0 88px;background: radial-gradient(1000px 480px at 85% -10%,color-mix(in srgb,var(--sky) 16%,transparent),transparent 68%), var(--ground)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero .bn{font-family:var(--mono);color:var(--royal);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;font-weight:600} .hero .bn i{font-style:normal;font-size:1rem;letter-spacing:0} .hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.028em;margin:18px 0 18px;color:var(--navy)} .hero h1 em,.hero h1 .hl{font-style:normal;color:var(--royal);position:relative;white-space:nowrap} .hero h1 em::after,.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.15em;background:color-mix(in srgb,var(--sky) 45%,transparent);border-radius:3px;z-index:-1} .hero .lede{color:var(--ink-soft);font-size:1.08rem;max-width:34rem} .hero-cta{display:flex;gap:12px;margin:30px 0 34px;flex-wrap:wrap} .hero-chips{display:flex;gap:26px;flex-wrap:wrap} .chip{display:flex;flex-direction:column;gap:2px} .chip .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:1.18rem;color:var(--royal)} .chip .k{font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em;text-transform:uppercase} /* live map panel */ .map-panel{position:relative;background:var(--map-bg);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;aspect-ratio:10/11;border:1px solid color-mix(in srgb,var(--sky) 35%,transparent)} .map-panel > svg{position:absolute;inset:0;width:100%;height:100%} .tele{position:absolute;left:14px;bottom:14px;right:14px;background:color-mix(in srgb,var(--map-bg) 82%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--sky) 35%,transparent);border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap} .tele .t-item{display:flex;flex-direction:column;gap:1px;min-width:66px} .tele .t-k{font-size:.62rem;letter-spacing:.14em;color:#8FA8CC;text-transform:uppercase;font-family:var(--mono)} .tele .t-v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.95rem;color:#EAF2FB;font-weight:600} .tele .t-v.ok,.tele .t-v .ok{color:#7FD8A8} .live-tag{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--map-bg) 82%,transparent);border:1px solid color-mix(in srgb,var(--sky) 35%,transparent);color:#EAF2FB;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:7px 12px;border-radius:999px} .live-dot{width:8px;height:8px;border-radius:50%;background:#7FD8A8;box-shadow:0 0 0 0 rgba(127,216,168,.6);animation:pulse 1.8s infinite} .veh-tag{position:absolute;top:14px;right:14px;background:var(--royal);color:#fff;font-family:var(--mono);font-size:.72rem;font-weight:700;padding:7px 12px;border-radius:999px;letter-spacing:.06em} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,216,168,.55)}70%{box-shadow:0 0 0 9px rgba(127,216,168,0)}100%{box-shadow:0 0 0 0 rgba(127,216,168,0)}} @keyframes pulse-sky{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sky) 50%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}} .route{fill:none;stroke:var(--map-route);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 8;animation:dash 26s linear infinite} @keyframes dash{to{stroke-dashoffset:-600}} .veh{offset-path:path("M40,470 C60,380 150,360 190,300 S300,205 330,150 S370,90 380,60");offset-rotate:0deg;animation:drive 14s ease-in-out infinite alternate} @keyframes drive{to{offset-distance:100%}} .pin-pulse{animation:pulse-sky 2s infinite} @media (prefers-reduced-motion: reduce){ .route,.veh,.live-dot,.pin-pulse{animation:none} html{scroll-behavior:auto} .reveal{opacity:1 !important;transform:none !important;transition:none !important} } /* ============ STATS BAND ============ */ .stats{background:linear-gradient(135deg,var(--navy),var(--royal));padding:40px 0} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .stat{text-align:center;color:#C9D9EA} .stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:#fff} .stat .k{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase} /* ============ VISION & MISSION ============ */ .vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px} .vm-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:36px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden} .vm-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--royal),var(--sky))} .vm-card .vm-k{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);font-weight:700} .vm-card h3{font-size:1.35rem;font-weight:800;margin:10px 0 12px} .vm-card p{color:var(--ink-soft)} .vm-card .bnq{display:block;margin-top:14px;font-size:1.02rem;color:var(--royal);font-weight:600} .values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .value{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;gap:12px;align-items:flex-start} .value .vic{flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--sky) 18%,transparent);color:var(--royal);display:flex;align-items:center;justify-content:center} .value .vt{font-weight:700;font-size:.92rem} .value .vd{font-size:.8rem;color:var(--ink-soft)} /* ============ GENERIC CARDS ============ */ .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;gap:12px} .fcard:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:var(--shadow-lg)} .fico{width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--sky) 16%,transparent);display:flex;align-items:center;justify-content:center;color:var(--royal);font-size:1.15rem} .fcard h3{font-size:1.08rem;font-weight:700} .fcard p{color:var(--ink-soft);font-size:.95rem} /* ============ WHY CHOOSE ============ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .why-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)} .why-item .wico{flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--sky) 16%,transparent);color:var(--royal);display:flex;align-items:center;justify-content:center;margin-top:2px} .why-item .wt{font-weight:700;font-size:.95rem} .why-item .wd{font-size:.85rem;color:var(--ink-soft)} /* ============ PRODUCTS ============ */ .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .prod{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:13px;transition:transform .18s ease,border-color .18s ease} .prod:hover{transform:translateY(-3px);border-color:var(--sky)} .prod.feat{border-color:var(--royal);box-shadow:var(--shadow-lg)} .prod-art{height:118px;border-radius:12px;background:linear-gradient(160deg,var(--mist),color-mix(in srgb,var(--lite) 35%,transparent));display:flex;align-items:center;justify-content:center;color:var(--navy)} .prod h3{font-size:1.08rem;font-weight:800} .prod .p-for{font-size:.78rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--royal)} .prod ul{list-style:none;display:flex;flex-direction:column;gap:8px} .prod li{display:flex;gap:9px;font-size:.9rem;color:var(--ink-soft);align-items:flex-start} .prod .p-price{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);font-size:1.06rem;margin-top:4px} .prod .p-price small{display:block;font-size:.78rem;color:var(--ink-faint);font-weight:400} .prod .btn{margin-top:auto;width:100%} /* ============ FULL FEATURE CHECKLIST ============ */ .check-band{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .clist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px;max-width:1000px;margin:0 auto} .clist .ci{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px} .clist .ci b{color:var(--ink);font-weight:600} /* ============ APP SHOWCASE ============ */ .app-sec{background: radial-gradient(700px 320px at 88% 8%,color-mix(in srgb,var(--sky) 28%,transparent),transparent 70%), var(--navy);color:#fff} .app-grid{display:grid;grid-template-columns:1fr .8fr;gap:56px;align-items:center} .app-sec h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:800;letter-spacing:-.02em} .app-sec .app-lede{color:#C9D9EA;margin:14px 0 26px} .app-sec .eyebrow{justify-content:flex-start;color:var(--lite)} .app-sec .eyebrow::before,.app-sec .eyebrow::after{background:color-mix(in srgb,var(--lite) 35%,transparent)} .app-feats{list-style:none;margin:0 0 30px;display:flex;flex-direction:column;gap:14px} .app-feats li{display:flex;gap:12px;align-items:flex-start;color:#E4EDF6;font-size:.98rem} .app-feats .afic{flex:none;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--sky) 25%,transparent);color:#CFE0EF;display:flex;align-items:center;justify-content:center;margin-top:1px;font-size:.85rem} .app-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .store-badge{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:9px 18px;transition:transform .15s ease} .store-badge:hover{transform:translateY(-2px);color:#fff} .store-badge .sb-t{display:flex;flex-direction:column;line-height:1.15} .store-badge .sb-s{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#cbd5e1} .store-badge b{font-size:1.02rem} .app-portal{color:#C9D9EA;font-size:.85rem;margin-top:12px} .app-portal a{color:var(--lite)} .phone{width:min(290px,80vw);aspect-ratio:9/18.5;margin:0 auto;background:var(--map-bg);border:3px solid color-mix(in srgb,var(--lite) 40%,transparent);border-radius:36px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)} .phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:22px;background:#050D1F;border-radius:12px;z-index:3} .phone svg.pmap{position:absolute;inset:0;width:100%;height:100%} .p-card{position:absolute;left:12px;right:12px;bottom:12px;background:color-mix(in srgb,var(--map-bg) 88%,transparent);border:1px solid color-mix(in srgb,var(--sky) 35%,transparent);border-radius:14px;padding:12px 14px;z-index:2} .p-card .pc-name{font-weight:700;font-size:.85rem;color:#fff;display:flex;justify-content:space-between;align-items:center} .p-card .pc-name .pc-on{font-family:var(--mono);font-size:.62rem;color:#7FD8A8;letter-spacing:.1em} .p-card .pc-row{display:flex;justify-content:space-between;margin-top:8px} .p-card .pc-i{display:flex;flex-direction:column} .p-card .pc-k{font-size:.56rem;letter-spacing:.12em;color:#8FA8CC;text-transform:uppercase;font-family:var(--mono)} .p-card .pc-v{font-family:var(--mono);font-size:.8rem;color:#EAF2FB;font-variant-numeric:tabular-nums} .p-lock{position:absolute;top:44px;left:50%;transform:translateX(-50%);background:var(--royal);color:#fff;font-size:.68rem;font-weight:700;font-family:var(--mono);letter-spacing:.08em;padding:7px 14px;border-radius:999px;z-index:2;white-space:nowrap} /* ============ TESTIMONIALS ============ */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px} .q-stars{color:var(--royal);letter-spacing:3px;font-size:.9rem} .quote blockquote{margin:0;color:var(--ink);font-size:.98rem;line-height:1.55} .q-who{display:flex;align-items:center;gap:12px;margin-top:auto} .q-av{width:40px;height:40px;border-radius:50%;background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem} .q-who .n{font-weight:700;font-size:.92rem} .q-who .r{font-size:.8rem;color:var(--ink-faint)} /* ============ PRICING + COMPARISON ============ */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .plan{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow)} .plan.pop{border-color:var(--royal);box-shadow:var(--shadow-lg)} .pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--royal);color:#fff;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.12em;padding:5px 14px;border-radius:999px;text-transform:uppercase;white-space:nowrap} .plan h3{font-weight:700;color:var(--ink-soft);letter-spacing:.02em;text-transform:uppercase;font-size:.85rem} .price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px} .price .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2.4rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)} .price .per{color:var(--ink-faint);font-size:.9rem} .dev-note{font-size:.8rem;color:var(--ink-faint);font-family:var(--mono)} .plan ul{list-style:none;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:10px;font-size:.94rem;color:var(--ink-soft);align-items:flex-start} .plan .btn{margin-top:auto;width:100%} .cmp-wrap{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)} table.cmp{width:100%;border-collapse:collapse;min-width:660px;font-size:.92rem} .cmp th,.cmp td{padding:12px 18px;text-align:center;border-bottom:1px solid var(--line)} .cmp thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);background:var(--mist)} .cmp td:first-child,.cmp th:first-child{text-align:left;font-weight:600;color:var(--ink-soft)} .cmp tbody tr:last-child td{border-bottom:none} .cmp .y{color:var(--royal);font-weight:700} .cmp .n{color:var(--lite)} /* ============ FAQ ============ */ .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 20px;box-shadow:var(--shadow)} .faq summary{cursor:pointer;font-weight:700;font-size:.98rem;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--royal);font-size:1.15rem;transition:transform .2s;flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{color:var(--ink-soft);padding:0 0 18px;font-size:.94rem} /* ============ CONTACT ============ */ .contact-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px} .ccard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;align-items:flex-start;color:var(--ink)} .ccard .cic{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--sky) 16%,transparent);color:var(--royal);display:flex;align-items:center;justify-content:center;font-size:1rem} .ccard .ckk{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--mono)} .ccard .cv{font-weight:700;font-size:.96rem;color:var(--ink)} a.ccard:hover{border-color:var(--sky)} .cta{background: radial-gradient(700px 300px at 15% 0%,color-mix(in srgb,var(--sky) 30%,transparent),transparent 70%), var(--navy);color:#fff;text-align:center;border-radius:24px;padding:72px 32px;position:relative;overflow:hidden} .cta .bn2{font-family:var(--mono);letter-spacing:.18em;font-size:.78rem;color:var(--lite);text-transform:uppercase} .cta h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin:14px 0 12px} .cta h2 em,.cta h2 .hl{font-style:normal;color:#fff;border-bottom:4px solid var(--sky)} .cta p{color:#C9D9EA;margin-bottom:30px} .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ============ FOOTER ============ */ footer{background:var(--navy);padding:64px 0 32px;margin-top:96px} footer .brand{color:#fff} footer .brand b{color:var(--lite)} .f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} .f-brand p{color:rgba(255,255,255,.82);font-size:.92rem;max-width:26rem;margin-top:12px} .f-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--sky);margin-bottom:16px} .f-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .f-col a{color:rgba(255,255,255,.85);font-size:.93rem} .f-col a:hover{color:#fff} .f-contact{font-family:var(--mono);font-size:.86rem;color:rgba(255,255,255,.82);display:flex;flex-direction:column;gap:8px;margin-top:14px} .f-contact a{color:rgba(255,255,255,.82)} .f-contact a:hover{color:#fff} .socials{display:flex;gap:10px;margin-top:14px} .socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem} .socials a:hover{background:var(--royal)} .f-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:rgba(255,255,255,.55);font-size:.84rem} /* ============ WHATSAPP FAB ============ */ .wa-fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.3);z-index:70;transition:transform .15s ease} .wa-fab:hover{transform:scale(1.07)} .wa-fab svg{color:#fff} /* ============ REVEAL ============ */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .reveal.in{opacity:1;transform:none} /* ============ RESPONSIVE ============ */ @media (max-width:960px){ .hero-grid,.app-grid{grid-template-columns:1fr;gap:40px} .map-panel{aspect-ratio:16/12;max-width:560px} .stats .wrap{grid-template-columns:repeat(2,1fr);gap:26px} .plans,.quotes,.why-grid,.prods{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto} .vm-grid{grid-template-columns:1fr} .values,.contact-cards{grid-template-columns:1fr 1fr} .clist{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr 1fr} nav.links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12);flex-direction:column;gap:0;padding:8px 24px 16px;align-items:stretch;max-height:70vh;overflow-y:auto} nav.links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);display:block} #menu-t:checked ~ nav.links{display:flex} .burger{display:flex} .nav-cta .btn-ghost-w{display:none} section{padding:64px 0} } @media (max-width:560px){ .f-grid,.values,.contact-cards{grid-template-columns:1fr} .topstrip .wrap{justify-content:center} .hero{padding:48px 0 64px} .hero-cta .btn{flex:1;min-width:150px} }