/* ==========================================================
THEME COLORS - EDIT HERE
Change these values to restyle the whole site.
--accent is the single highlight color (buttons, links, icons).
========================================================== */
:root {
--navy: #0B1F3A; /* deep navy: headings, footer, dark backgrounds */
--accent: #2F6FED; /* royal blue: links, icons, informational highlights */
--accent-hover: #1E52C4; /* accent when hovered */
--accent-contrast: #FFFFFF; /* text placed on top of the accent color */
--cta: #F5A623; /* amber: primary buttons and "most popular" highlight only */
--cta-hover: #D98E10; /* cta when hovered */
--cta-contrast: #0B1F3A; /* navy text placed on top of the cta color */
--whatsapp: #25D366; /* WhatsApp green */
--bg: #FFFFFF; /* page background (light mode) */
--bg-alt: #F5F7FC; /* light grey section background */
--card: #FFFFFF; /* card background */
--text: #0B1F3A; /* main text color */
--muted: #475569; /* secondary text */
--border: #DCE4F0; /* subtle borders */
--shadow: 0 10px 30px rgba(11, 31, 58, 0.08);
--radius: 16px;
--nav-bg: rgba(255, 255, 255, 0.85);
--footer-bg: #EDF2FA;
--footer-text: #C9D4E3;
}
/* Dark mode when the user clicks the toggle */
:root[data-theme="dark"] {
--bg: #0A1628;
--bg-alt: #0F2038;
--card: #132A47;
--text: #F1F5F9;
--muted: #A3B3C8;
--border: #1E3A5C;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
--nav-bg: rgba(10, 22, 40, 0.85);
}
/* ==========================================================
ELECTRIC-BLUE FLOW LINE (matches the hero arcs)
One layer behind the whole page. Gradient stroke, soft drop-shadow glow,
a travelling highlight and a few twinkling sparks. Never follows the cursor.
========================================================== */
body { position: relative; background: #0B1430; }
.flow-layer {
position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
pointer-events: none; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}
.flow-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.flow-mob { display: none; }
.flow-track, .flow-energy, .flow-energy-b, .flow-spark {
fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.flow-track { stroke-width: 2; opacity: 0.32; }
.flow-energy {
stroke: #8FC9FF; stroke-width: 2; stroke-dasharray: 40 960;
animation: flow-travel 15s linear infinite, flow-pulse 6s ease-in-out infinite;
}
.flow-energy-b {
stroke: #7046FF; stroke-width: 2; stroke-dasharray: 30 970; opacity: 0.5;
animation: flow-travel 15s linear infinite;
}
/* Glow for the energy lines: a wider, filter-free copy of each path underneath.
A live drop-shadow filter on an animated stroke re-renders its whole filter area
every frame, which made the full-page layer flicker. These copies animate the same
way but are plain strokes, so the glow stays and the repainting cost drops. */
.flow-glow {
fill: none; stroke: #247CFF; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke;
stroke-dasharray: 40 960; opacity: 0.16;
animation: flow-travel 15s linear infinite, flow-pulse 6s ease-in-out infinite;
}
.flow-glow-b {
stroke: #7046FF; stroke-dasharray: 30 970; opacity: 0.1;
animation: flow-travel 15s linear infinite;
}
.flow-spark {
stroke: #B5D4F4; stroke-width: 2.6; stroke-dasharray: 0.2 1000;
animation: flow-travel 15s linear infinite, flow-twinkle 2.6s ease-in-out infinite;
}
@keyframes flow-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
@keyframes flow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes flow-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (max-width: 760px) {
.flow-desk { display: none; }
.flow-mob { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.flow-energy, .flow-energy-b, .flow-spark, .flow-glow, .flow-glow-b, .hero-arc-glow, .hero-arc-glow-b { display: none; }
}
/* ==========================================================
BASE STYLES
========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
/* Browsers use the next font in the list for any letter the first one
does not have, so Sinhala and Tamil letters use the Noto fonts. */
font-family: 'Inter', 'Noto Sans Sinhala', 'Noto Sans Tamil', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.eyebrow {
display: inline-block; font-size: 0.8rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
/* Keyboard focus ring for accessibility */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Skip link for screen readers and keyboard users */
.skip-link {
position: absolute; left: -9999px; top: 8px; background: var(--accent);
color: var(--accent-contrast); padding: 10px 16px; border-radius: 8px; z-index: 999;
}
.skip-link:focus { left: 16px; }
/* ==========================================================
SINHALA AND TAMIL TEXT TWEAKS
These scripts need taller line spacing, and letter-spacing or
uppercase text would break their letter shapes.
========================================================== */
html[lang="si"] body, html[lang="ta"] body { line-height: 1.8; }
html[lang="si"] h1, html[lang="si"] h2, html[lang="si"] h3,
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3 { line-height: 1.4; }
html[lang="si"] .eyebrow, html[lang="ta"] .eyebrow { letter-spacing: 0; text-transform: none; }
html[lang="si"] .hero h1, html[lang="ta"] .hero h1 { letter-spacing: 0; }
html[lang="ta"] .btn { white-space: normal; text-align: center; }
/* ==========================================================
BUTTONS
========================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem;
border: 2px solid transparent; cursor: pointer; transition: all 0.25s ease;
font-family: inherit; white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--cta); color: var(--cta-contrast); box-shadow: 0 8px 20px rgba(245, 166, 35, 0.35); }
.btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(245, 166, 35, 0.45); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-small { padding: 10px 20px; font-size: 0.95rem; }
/* Navbar "Get a Quote": orange gradient, scoped to the nav only so the rest of the
site's buttons keep the amber --cta color used elsewhere (pricing, forms, etc). */
.btn-nav {
background: linear-gradient(135deg, #FF6505, #FF8B0A); color: #fff; height: 48px; padding: 0 24px;
box-shadow: 0 6px 18px rgba(255, 108, 18, 0.35);
}
.btn-nav:hover { background: linear-gradient(135deg, #FF6505, #FF8B0A); filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 108, 18, 0.45); }
.btn:disabled { opacity: 0.7; cursor: wait; transform: none; }
/* ==========================================================
NAVBAR (sticky)
Always dark navy, independent of the light/dark theme toggle,
so it reads as a fixed brand bar sitting on the dark hero.
========================================================== */
.navbar {
position: sticky; top: 0; z-index: 100;
background: rgba(11, 19, 36, 0.82);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: box-shadow 0.3s ease;
}
.navbar.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; min-width: 0; color: #fff; }
.logo-mark {
width: 36px; height: 36px; border-radius: 10px; background: #FFFFFF;
padding: 4px; display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
}
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-mark img { width: 85%; height: 85%; object-fit: contain; display: block; }
.nav-pill {
display: flex; align-items: center; gap: 2px; list-style: none;
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px; padding: 6px; flex-shrink: 0;
}
.nav-pill a {
display: block; font-weight: 500; font-size: 0.92rem; color: #B9C6DE;
padding: 9px 18px; border-radius: 999px; transition: all 0.2s ease;
}
.nav-pill a:hover { color: #fff; }
.nav-pill a.active { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05); color: #fff; cursor: pointer; display: grid; place-items: center;
transition: all 0.2s ease;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }
/* Language dropdown (English / සිංහල / தமிழ்) */
.lang-select {
height: 40px; padding: 0 30px 0 14px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.05);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9C6DE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
color: #fff; font-family: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer;
appearance: none; -webkit-appearance: none; transition: border-color 0.2s;
}
.lang-select:hover { border-color: var(--accent); }
.lang-select option { color: #0B1F3A; }
/* Mobile menu */
.mobile-menu {
display: none; flex-direction: column; gap: 4px; padding: 12px 20px 20px;
background: #0B1324; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-menu a { padding: 12px 4px; font-weight: 500; color: #B9C6DE; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-menu.open { display: flex; }
/* ==========================================================
POLICIES MENU (desktop dropdown in the pill, mobile submenu)
========================================================== */
.nav-drop { position: relative; }
.nav-pill .nav-drop-btn {
display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; font-size: 0.92rem;
color: #B9C6DE; background: none; border: 0; cursor: pointer; white-space: nowrap;
padding: 9px 18px; border-radius: 999px; transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-pill .nav-drop-btn:hover { color: #fff; }
.nav-pill .nav-drop-btn:focus-visible { outline: 2px solid #4C9BFF; outline-offset: 2px; }
.nav-pill .nav-drop-btn.active,
.nav-drop.open > .nav-drop-btn { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav-chev {
width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease;
}
.nav-drop.open > .nav-drop-btn .nav-chev { transform: rotate(180deg); }
.nav-drop-menu {
position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, -6px);
min-width: 270px; list-style: none; margin: 0; padding: 8px; z-index: 120;
background: #0F1A2E; border: 1px solid rgba(36, 124, 255, 0.35); border-radius: 16px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Invisible bridge so the pointer can travel from the button into the panel */
.nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-drop.open > .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-pill .nav-drop-menu a {
display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
font-size: 0.92rem; font-weight: 500; color: #B9C6DE; white-space: nowrap;
transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-pill .nav-drop-menu a:hover,
.nav-pill .nav-drop-menu a:focus-visible { color: #fff; background: rgba(36, 124, 255, 0.16); outline: none; }
.nav-pill .nav-drop-menu a.active { color: #4C9BFF; background: rgba(36, 124, 255, 0.14); }
.nav-pill .nav-drop-menu a[aria-current="page"]::after {
content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #4C9BFF;
}
/* Mobile: Policies submenu inside the hamburger menu */
.mob-drop { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mob-drop-btn {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 12px 4px; font: inherit; font-weight: 500; font-size: 1rem; text-align: left;
color: #B9C6DE; background: none; border: 0; cursor: pointer;
}
.mob-drop-btn:focus-visible { outline: 2px solid #4C9BFF; outline-offset: 2px; border-radius: 6px; }
.mob-drop-btn.active,
.mob-drop-btn[aria-expanded="true"] { color: #fff; }
.mob-drop-btn[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.mob-drop-list { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px 14px; }
.mob-drop-list[hidden] { display: none; }
.mobile-menu .mob-drop-list a {
display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 0;
font-size: 0.95rem; color: #B9C6DE;
}
.mobile-menu .mob-drop-list a.active { color: #4C9BFF; }
.mobile-menu .mob-drop-list a[aria-current="page"]::after {
content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #4C9BFF;
}
/* ==========================================================
HERO (bold, always-dark header statement)
========================================================== */
.hero-bold {
position: relative; overflow: hidden; padding: 56px 0 52px;
background: #060D1C; color: #fff; isolation: isolate;
}
.hero-bold-bg { position: absolute; inset: 0; z-index: 0; }
.hero-grid-pattern {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 55% 55% at 20% 45%, #000 40%, transparent 75%);
mask-image: radial-gradient(ellipse 55% 55% at 20% 45%, #000 40%, transparent 75%);
}
.hero-arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-arc-track { opacity: 0.3; }
.hero-arc-track-b { opacity: 0.22; }
.hero-arc-pulse {
stroke-dasharray: 14 86; animation: arc-travel 10s linear infinite;
}
.hero-arc-pulse-b {
stroke-dasharray: 10 90; animation: arc-travel 13s linear infinite, arc-glow-pulse 4s ease-in-out infinite;
}
/* Filter-free glow copies of the two hero arcs (see .flow-glow) */
.hero-arc-glow {
stroke-width: 4; opacity: 0.1; stroke-dasharray: 14 86; animation: arc-travel 10s linear infinite;
}
.hero-arc-glow-b {
stroke-width: 4; opacity: 0.09; stroke-dasharray: 10 90;
animation: arc-travel 13s linear infinite, arc-glow-pulse 4s ease-in-out infinite;
}
@keyframes arc-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
@keyframes arc-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.hero-spark { fill: #B5D4F4; animation: spark-twinkle 2.6s ease-in-out infinite; }
.hero-spark.s2, .hero-spark.s4 { fill: #fff; }
.hero-spark.s2 { animation-delay: 0.6s; }
.hero-spark.s3 { animation-delay: 1.2s; }
.hero-spark.s4 { animation-delay: 1.8s; }
@keyframes spark-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.3); } }
.hero-bold-stage { position: relative; z-index: 1; padding: 16px 0 8px; }
.hero-bold-title {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-family: 'Anton', 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.03em; line-height: 0.94;
/* Capped lower than before (was 12vw/14.5rem): the headline's vw-based size has no
relation to the .container's 1180px max-width, so past ~1220px viewport it kept
growing while the row it shares with the devices did not, leaving no room for the
bigger images without covering letters. This keeps it big but leaves that room. */
font-size: clamp(2.6rem, 9.6vw, 12rem); text-transform: uppercase;
}
.hb-text { color: #fff; flex-shrink: 0; }
.hb-right { text-align: right; }
/* Device cluster: real transparent PNG mockups (images/hero-code.png, hero-phone.png,
hero-tablet.png), overlapped with position:absolute + z-index. The phone sits in
front as the focal point; the code editor and tablet peek out from behind it.
All three share the same 1122x1402 (4:5) canvas, so each is just a width with
height:auto to keep its own aspect ratio, positioned independently. */
/* width is the only thing that changes per breakpoint (see media queries below);
every child below is sized as a % of it, so it scales as a true fluid unit
instead of needing a separate transform:scale() layer (which was double-scaling
against the container's own declared size in earlier passes of this component). */
.hero-devices {
position: relative; flex-shrink: 0; width: min(52vw, 580px); aspect-ratio: 580 / 475;
font-family: 'Inter', sans-serif; letter-spacing: normal; text-transform: none; font-weight: 400;
margin: 0; /* no overlap with the headline text on either side */
}
.hb-highlight { color: inherit; }
/* Soft colored glow behind the cluster, like light bleeding out from the screens */
.hero-devices::before, .hero-devices::after {
content: ''; position: absolute; border-radius: 50%; filter: blur(46px); z-index: 0;
}
.hero-devices::before { width: 290px; height: 290px; background: rgba(38, 96, 255, 0.4); left: 0; top: 25%; }
.hero-devices::after { width: 264px; height: 264px; background: rgba(255, 108, 18, 0.35); right: 0; top: 36%; }
/* Images sized up ~32% from the original pass (230/240/192px) so they read clearly at
both desktop and mobile sizes. Each is a % of .hero-devices' own width/height (its
containing block), derived from the original 303/316/253px-at-580px-wide desktop
sizing, so resizing the container at any breakpoint scales every child with it. */
.device-img { position: absolute; width: auto; height: auto; display: block; }
.device-img-code {
width: 44%; left: 0; top: 1.68%; z-index: 1;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
animation: device-float-a 6.5s ease-in-out infinite;
}
.device-img-tablet {
width: 46%; right: 0; top: 8.42%; z-index: 1;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
animation: device-float-b 7.5s ease-in-out infinite; animation-delay: 0.6s;
}
/* Phone is the dominant, focal image (~20% bigger than a flat equal split), code and
tablet sized down to clearly secondary, background screens -- applies at every
breakpoint since each is a % of .hero-devices' own box, not a fixed px size. */
.device-img-phone {
width: 52.3%; left: 50%; top: 15.37%; z-index: 2; transform: translateX(-50%);
filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.6));
animation: device-float-phone 6s ease-in-out infinite; animation-delay: 0.3s;
}
@keyframes device-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes device-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes device-float-phone {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-13px); }
}
.float-badge {
position: absolute; display: inline-flex; align-items: center; gap: 8px;
background: rgba(15, 29, 54, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
padding: 9px 16px 9px 9px; font-size: 0.8rem; font-weight: 600; color: #fff;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); white-space: nowrap; z-index: 3;
}
.fb-ico {
width: 24px; height: 24px; border-radius: 50%; background: var(--cta); color: #0B1F3A;
display: grid; place-items: center; flex-shrink: 0;
}
.fb-ico svg { width: 14px; height: 14px; }
.fb-managed { left: -13px; top: 169px; }
.fb-ssl { right: -13px; top: 60px; }
.hero-bold-footer { position: relative; z-index: 1; text-align: center; padding-top: 24px; }
.hero-bold-lead { color: #B9C6DE; font-size: 1.05rem; max-width: 620px; margin: 0 auto 28px; }
.hero-bold-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 28px; }
/* Both hero CTAs share identical sizing so they always match exactly;
only background/shadow differ between them. */
.btn-hero-blue, .btn-hero-whatsapp {
width: 220px; height: 54px; border-radius: 11px; padding: 0 16px;
display: inline-flex; align-items: center; justify-content: center;
}
.btn-hero-blue {
background: linear-gradient(135deg, #3147BC, #3150D2); color: #fff;
box-shadow: 0 8px 20px rgba(47, 111, 237, 0.35);
}
.btn-hero-blue:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47, 111, 237, 0.45); }
/* Hero-only: the WhatsApp button follows the reference's orange CTA instead of
WhatsApp brand green, which stays everywhere else (floating button, contact section). */
.btn-hero-whatsapp {
background: linear-gradient(135deg, #FF6505, #FF8508);
box-shadow: 0 8px 20px rgba(255, 108, 18, 0.35);
}
.btn-hero-whatsapp:hover { background: linear-gradient(135deg, #FF6505, #FF8508); filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 108, 18, 0.45); }
.hero-bold-trust { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.trust-pill {
display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: #fff;
}
.trust-pill svg { width: 16px; height: 16px; color: var(--cta); flex-shrink: 0; }
/* ==========================================================
CARDS (shared)
========================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 32px 26px; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 31, 58, 0.14); }
.icon-box {
width: 54px; height: 54px; border-radius: 14px; background: rgba(47, 111, 237, 0.12);
color: var(--accent); display: grid; place-items: center; margin-bottom: 20px;
}
.icon-box svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.97rem; }
/* ==========================================================
WHY SECURITY MATTERS
Always dark (independent of the light/dark toggle), matching the
hero -- not theme variables, since the hero isn't theme-reactive either.
========================================================== */
.why-security {
background:
radial-gradient(ellipse at 50% 55%, rgba(37, 56, 119, 0.18), transparent 65%),
rgba(8, 15, 38, 0.6);
padding: 70px 0 100px;
}
/* Section-only container width; the global .container is left unchanged */
.why-security > .container { width: min(1560px, calc(100% - 96px)); max-width: none; padding-inline: 0; }
@media (max-width: 1250px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.why-security { padding: 56px 0 64px; }
.why-security > .container { width: auto; padding-inline: 16px; }
.why-grid { grid-template-columns: 1fr; }
.why-card { padding: 26px; }
.why-card.why-card-featured { border-width: 2px; }
.why-head h2 { font-size: 28px; }
.why-head p { font-size: 15.5px; }
}
.why-head { text-align: center; max-width: none; margin: 0 auto; }
.why-head .eyebrow.why-pill {
display: inline-flex; align-items: center; gap: 12px; height: 56px;
padding: 0 26px 0 22px; margin-bottom: 32px;
border-radius: 999px; border: 1px solid rgba(255, 112, 8, 0.75);
background: linear-gradient(180deg, rgba(20, 26, 46, 0.72), rgba(12, 17, 34, 0.72));
box-shadow: 0 0 20px rgba(255, 112, 8, 0.22), inset 0 0 14px rgba(255, 112, 8, 0.06);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
.why-pill-icon { width: 32px; height: 32px; flex: none; color: #FF7108; filter: drop-shadow(0 0 6px rgba(255, 112, 8, 0.5)); }
.why-head h2 {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(38px, 4.1vw, 66px);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
max-width: 1450px; margin: 0 auto 22px;
}
.why-head p {
color: #A4ABBE; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.5;
max-width: 1050px; margin: 0 auto 56px;
}
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.why-card {
display: flex; flex-direction: column; min-width: 0; padding: 32px;
background: linear-gradient(145deg, #15203B 0%, #101A31 100%);
border: 1px solid rgba(180, 199, 235, 0.25); border-radius: 22px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
transition: transform 0.25s ease, border-color 0.25s ease;
}
.why-card:hover { transform: translateY(-3px); border-color: rgba(180, 199, 235, 0.45); }
/* Card 4: same size and padding, with a 2px electric-blue border and a faint blue halo */
.why-card-featured {
border: 2px solid #247CFF;
box-shadow: 0 0 18px rgba(36, 124, 255, 0.10), 0 12px 30px rgba(0, 0, 0, 0.12);
}
.why-card-featured:hover { border-color: #3989FF; }
.why-icon {
width: 90px; height: 90px; flex: none; border-radius: 20px; margin-bottom: 26px;
display: flex; align-items: center; justify-content: center;
background: rgba(95, 130, 215, 0.12); border: 1px solid rgba(180, 199, 235, 0.18);
color: #4B86FF;
}
.why-icon svg { width: 46px; height: 46px; display: block; }
.why-card h3 { color: #fff; font-size: clamp(22px, 1.7vw, 28px); font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.why-card p { color: #A4ABBE; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; }
/* Lists: blue circular check badges for every item (risks and protections alike) */
.risk-list, .fix-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.risk-list li, .fix-list li {
position: relative; padding-left: 36px; color: #E6EEF8;
font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45;
}
.risk-list li::before, .fix-list li::before {
content: ''; position: absolute; left: 0; top: 0.1em; width: 24px; height: 24px;
border-radius: 50%; background: #247CFF;
}
.risk-list li::after, .fix-list li::after {
content: ''; position: absolute; left: 9px; top: calc(0.1em + 5px); width: 6px; height: 11px;
border: solid #0B1430; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* ==========================================================
SERVICES
Always dark, matching the hero and "Why Security" above it, so the
colours are fixed (not theme variables).
========================================================== */
#services {
background:
radial-gradient(ellipse at 50% 40%, rgba(37, 56, 119, 0.16), transparent 65%),
radial-gradient(circle at 8% 92%, rgba(36, 124, 255, 0.07), transparent 40%),
rgba(8, 15, 38, 0.6);
color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 44px 0 80px;
}
/* Section-only container width; the global .container is left unchanged */
#services > .container { width: min(1520px, calc(100% - 96px)); max-width: none; padding-inline: 0; }
.svc-layout {
display: grid; grid-template-columns: minmax(0, 69fr) minmax(0, 29fr);
gap: 38px; align-items: stretch;
}
/* Header: centred across the full width above the grid and CTA */
.svc-head { text-align: center; max-width: none; margin: 0 auto 50px; }
.svc-head .eyebrow.svc-pill {
display: inline-flex; align-items: center; gap: 12px; height: 62px;
padding: 0 24px; margin-bottom: 18px; border-radius: 20px;
background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: #fff; font-size: clamp(18px, 1.45vw, 24px); font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
.svc-pill-icon { width: 34px; height: 34px; flex: none; }
.svc-head h2 {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(36px, 3.5vw, 60px);
font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
max-width: 1040px; margin: 0 auto 20px;
}
.svc-head p {
color: #A4ABBE; font-size: clamp(17px, 1.45vw, 24px); line-height: 1.5;
max-width: 1200px; margin: 0 auto;
}
/* Service cards: 2 columns x 3 rows on desktop */
.svc-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-item {
display: flex; align-items: center; gap: 26px; min-width: 0; min-height: 155px;
padding: 26px; border-radius: 19px;
background: linear-gradient(145deg, rgba(27, 39, 70, 0.95), rgba(19, 29, 54, 0.95));
border: 1px solid rgba(180, 199, 235, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transition: transform 0.25s ease, border-color 0.25s ease;
}
.svc-item:hover { transform: translateY(-3px); border-color: rgba(180, 199, 235, 0.4); }
.svc-icon {
width: 78px; height: 78px; flex-shrink: 0; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
background: rgba(75, 110, 190, 0.13); border: 1px solid rgba(180, 199, 235, 0.12);
color: #4B86FF;
}
.svc-icon svg { width: 40px; height: 40px; display: block; }
.svc-text { min-width: 0; }
.svc-title {
display: block; color: #fff; font-size: clamp(19px, 1.4vw, 23px); font-weight: 700;
line-height: 1.25; margin-bottom: 8px;
}
.svc-desc { display: block; color: #A4ABBE; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.45; }
/* CTA panel: tall, centred, subtle warm glow toward the lower-right */
.svc-panel {
display: flex; flex-direction: column; align-items: center; justify-content: center;
position: relative; overflow: hidden; min-width: 0; text-align: center;
background:
radial-gradient(circle at 80% 70%, rgba(255, 113, 8, 0.12), transparent 65%),
linear-gradient(160deg, #15203B 0%, #101A31 100%);
border: 1px solid rgba(180, 199, 235, 0.2); border-radius: 28px;
padding: 40px 38px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.svc-panel::before { display: none; }
.svc-panel h3 {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(32px, 2.8vw, 48px);
font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 22px;
}
.svc-panel p {
color: #A4ABBE; font-size: clamp(16px, 1.3vw, 22px); line-height: 1.5;
max-width: 350px; margin: 0 auto 40px;
}
/* Local override only: the global .btn-primary (amber) is left untouched */
#services .svc-panel .btn-primary {
width: 100%; max-width: 300px; height: 72px; padding: 0 24px;
font-size: 23px; font-weight: 700; border-radius: 14px;
background: #FF7108; color: #fff; box-shadow: 0 10px 24px rgba(255, 113, 8, 0.28);
}
#services .svc-panel .btn-primary:hover {
background: #E96300; color: #fff; transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(255, 113, 8, 0.38);
}
/* Responsive: one card column below 1180px, CTA under the grid below 900px */
@media (max-width: 1180px) {
.svc-list { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.svc-layout { grid-template-columns: 1fr; gap: 40px; }
.svc-panel { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 600px) {
#services { padding: 40px 0 60px; }
#services > .container { width: auto; padding-inline: 16px; }
.svc-head { margin-bottom: 32px; }
.svc-panel { padding: 32px 24px; }
.svc-item { padding: 20px; gap: 18px; }
.svc-icon { width: 60px; height: 60px; border-radius: 14px; }
.svc-icon svg { width: 30px; height: 30px; }
}
@media (max-width: 900px) {
.svc-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
#services .container { padding: 0 24px; }
.svc-head { margin-bottom: 32px; }
.svc-head h2 { font-size: 28px; }
.svc-head p { font-size: 15.5px; }
.svc-item { padding: 20px; }
.svc-panel { padding: 28px 24px; }
}
/* ==========================================================
DEMOS / OUR CUSTOM BUILDS (portfolio)
Always dark navy, like the Why Security and Services sections,
so colours are fixed rather than theme variables.
========================================================== */
#demos {
position: relative;
background:
radial-gradient(ellipse at 50% 45%, rgba(36, 82, 180, 0.12), transparent 68%),
rgba(11, 20, 48, 0.6);
color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 56px 0 84px;
}
/* Faint blue grid behind the heading, fading outward */
#demos::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(51, 112, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(51, 112, 255, 0.07) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 45% 40% at 40% 18%, #000, transparent 100%);
mask-image: radial-gradient(ellipse 45% 40% at 40% 18%, #000, transparent 100%);
}
/* Section-only container width; the global .container is left unchanged */
#demos > .container {
position: relative; z-index: 1;
width: min(1460px, calc(100% - 96px)); max-width: none; padding-inline: 0;
}
.demo-head { text-align: center; max-width: none; margin: 0 auto; }
.demo-head .eyebrow { color: #247CFF; }
.demo-head .eyebrow.demo-pill {
display: inline-flex; align-items: center; gap: 12px; height: 60px;
padding: 0 26px 0 14px; margin-bottom: 30px; border-radius: 999px;
border: 1px solid rgba(36, 124, 255, 0.5); background: rgba(24, 37, 68, 0.75);
box-shadow: 0 0 20px rgba(36, 124, 255, 0.18);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: clamp(16px, 1.3vw, 21px); font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
.demo-pill .logo-mark { width: 36px; height: 36px; flex: none; }
.demo-head h2 {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(36px, 4vw, 66px);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.12;
max-width: 1250px; margin: 0 auto 18px;
}
.demo-head p {
color: #A4ABBE; font-size: clamp(17px, 1.4vw, 24px); line-height: 1.5;
max-width: 1050px; margin: 0 auto 50px;
}
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.demo-card {
position: relative; display: flex; flex-direction: column; min-width: 0;
padding: 30px 38px 38px; border-radius: 24px;
background: linear-gradient(150deg, #132144 0%, #111B36 100%);
border: 1px solid rgba(70, 115, 205, 0.35);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.demo-card.reveal { transition: opacity 0.7s ease, transform 0.45s ease, border-color 0.3s ease; }
/* Laptop preview: dark bezel with a webcam dot, screenshot inside, silver base below */
.demo-shot {
position: relative; width: 92%; aspect-ratio: 16 / 10; margin: 0 auto 36px;
background: #05070F; border-radius: 14px 14px 5px 5px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 34px rgba(0, 0, 0, 0.35), 0 0 36px rgba(36, 124, 255, 0.12);
}
.demo-shot::before {
content: ''; position: absolute; top: 4px; left: 50%; z-index: 2;
width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #2A3146;
}
.demo-shot::after {
content: ''; position: absolute; left: -4%; right: -4%; bottom: -13px; height: 13px;
border-radius: 0 0 12px 12px;
background: linear-gradient(180deg, #D5DBE6 0%, #9AA3B5 60%, #6E778A 100%);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}
.demo-img, .demo-placeholder {
position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px;
width: auto; height: auto; border-radius: 6px; overflow: hidden;
}
/* The screenshot fills the laptop screen exactly: the 10px black bezel stays on every side.
It has an explicit size so it cannot grow past the screen, and object-fit: cover keeps its
proportions (no stretching), cropping only a sliver at the bottom. */
.demo-img {
display: block; top: 10px; left: 10px; right: auto; bottom: auto;
width: calc(100% - 20px); height: calc(100% - 20px); max-width: none;
object-fit: cover; object-position: 50% 0;
}
.demo-shot > * { transition: transform 0.6s ease; }
/* Missing-screenshot placeholder (shown until the image file exists) */
.demo-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; padding: 20px; text-align: center; color: #A4ABBE;
background: linear-gradient(135deg, #0E1A33, #16274A);
}
.demo-ph-icon { width: 32px; height: 32px; color: #247CFF; }
.demo-placeholder strong { color: #fff; font-size: 15px; font-weight: 600; }
.demo-placeholder span { font-size: 13px; line-height: 1.5; }
.demo-placeholder code {
color: #7FB3FF; background: rgba(36, 124, 255, 0.12);
padding: 2px 6px; border-radius: 6px; font-size: 12.5px;
}
.demo-body { display: flex; flex-direction: column; flex: 1; padding: 0; }
.demo-title { color: #fff; font-size: clamp(24px, 1.9vw, 31px); font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.demo-desc { color: #C4CADE; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.45; flex: 1; margin-bottom: 26px; }
/* Centred blue outline pill with an external-link icon (drawn in CSS, so it survives translation) */
.demo-btn {
display: flex; align-items: center; justify-content: center; gap: 12px;
align-self: center; min-width: 230px; height: 52px; padding: 0 26px;
border-radius: 999px; border: 2px solid #247CFF; background: transparent; color: #8FC4FF;
font-family: inherit; font-size: clamp(16px, 1.15vw, 19px); font-weight: 600; line-height: 1;
text-decoration: none; cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.demo-btn::after {
content: ''; flex: none; width: 20px; height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FC4FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.demo-btn:focus-visible { outline: 3px solid rgba(36, 124, 255, 0.45); outline-offset: 3px; }
/* Disabled until a real live URL is configured: dashed and dimmed, never clickable */
.demo-btn[disabled] { opacity: 0.7; cursor: not-allowed; border-style: dashed; }
/* Hover only on devices that can hover; never animates on its own */
@media (hover: hover) {
.demo-card.reveal.visible:hover { transform: translateY(-3px); border-color: rgba(36, 124, 255, 0.5); }
.demo-btn:not([disabled]):hover { background: #247CFF; }
}
@media (prefers-reduced-motion: reduce) {
.demo-card.reveal.visible:hover, .demo-card:hover .demo-shot > * { transform: none; }
}
@media (max-width: 900px) {
.demo-grid { grid-template-columns: 1fr; gap: 20px; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 600px) {
#demos { padding: 40px 0 60px; }
#demos > .container { width: auto; padding-inline: 16px; }
.demo-grid { max-width: none; }
.demo-card { padding: 22px 20px 26px; }
.demo-shot { width: 100%; }
.demo-head { margin-bottom: 36px; }
.demo-head h2 { font-size: 28px; }
.demo-head p { font-size: 15.5px; }
.demo-body { padding: 0; }
.demo-btn { height: 50px; }
}
/* ==========================================================
PRICING / WHY OUR PRICE IS HIGHER
Translucent dark navy so the shared electric-blue line stays visible.
Left: orange-accented pill, three-line heading with a blue phrase,
paragraph and honest note. Right: three-column table with a full
warm-orange Managed column, grey crosses and orange check circles.
========================================================== */
#pricing {
position: relative;
background:
radial-gradient(ellipse at 50% 50%, rgba(35, 75, 165, 0.12), transparent 70%),
rgba(8, 15, 38, 0.6);
color: #fff;
}
#pricing > .container { position: relative; width: min(1480px, calc(100% - 100px)); max-width: none; padding-inline: 0; }
/* Faint technical grid near the centre, fading outward */
#pricing > .container::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 16%; top: -70px; width: 42%; height: 62%;
background-image:
linear-gradient(rgba(36, 124, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 124, 255, 0.07) 1px, transparent 1px);
background-size: 45px 45px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 72%);
}
/* Warm orange ambient light beneath the lower-right of the table */
#pricing > .container::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
right: -20px; bottom: -70px; width: 62%; height: 200px;
background: radial-gradient(ellipse at center, rgba(255, 113, 8, 0.2), transparent 70%);
filter: blur(28px);
}
/* One gentle fade for the whole block (the shared .reveal observer adds .visible) */
#pricing .price-grid.reveal { transform: none; transition: opacity 1s ease; }
.price-grid {
display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
gap: 52px; align-items: center;
}
.price-main, .compare { position: relative; z-index: 1; min-width: 0; }
/* Eyebrow: rounded glass pill with an orange layered-stack icon */
.price-head .eyebrow { color: #fff; }
.price-head .eyebrow.price-pill {
display: inline-flex; align-items: center; gap: 14px;
height: 54px; padding: 0 26px 0 22px; margin-bottom: 30px;
border-radius: 999px; border: 1px solid rgba(255, 113, 8, 0.6);
background: linear-gradient(90deg, rgba(255, 113, 8, 0.12), rgba(18, 29, 54, 0.6) 60%);
box-shadow: 0 0 22px rgba(255, 113, 8, 0.16);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: 22px; font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
.price-pill-icon { width: 30px; height: 30px; flex: none; color: #FF7108; }
/* Heading: three lines at reference width, bright blue highlight phrase */
.price-head h2 {
color: #fff; font-size: clamp(36px, 3.4vw, 57px); font-weight: 800;
line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 26px; max-width: 650px;
}
.price-head h2 .hl { color: #139CFF; }
/* Description */
.price-lead { margin: 0; max-width: 640px; color: #C0C7D7; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; }
/* Honest note: full rounded panel, orange icon and label */
.price-note {
position: relative; margin: 28px 0 0; padding: 22px 26px 22px 80px;
background: linear-gradient(145deg, #1B294A, #17223F);
border: 1px solid rgba(180, 199, 235, 0.35); border-radius: 16px;
color: #E6EEF8; font-size: 18.5px; line-height: 1.5;
}
.price-note .note-icon { position: absolute; left: 24px; top: 24px; width: 34px; height: 34px; color: #FF7108; }
.price-note strong { color: #FF7108; font-size: 21px; font-weight: 700; }
/* Comparison table */
.compare {
background: #111B35; border: 1px solid rgba(180, 199, 235, 0.4); border-radius: 21px;
overflow: hidden;
}
.compare-row {
display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: stretch;
min-height: 78px; border-bottom: 1px solid rgba(180, 199, 235, 0.3);
}
.compare-row:last-child { border-bottom: none; }
.compare-row > div {
position: relative; display: flex; align-items: center; min-width: 0;
padding: 14px 20px; color: #E6EEF8; font-size: 20px; font-weight: 600; line-height: 1.3;
}
.compare-row > div:first-child { padding-left: 28px; }
.compare-row > div + div { border-left: 1px solid rgba(180, 199, 235, 0.3); }
.compare-row > div:not(:first-child) { justify-content: center; text-align: center; }
.compare-row.head { min-height: 90px; background: #1A2949; }
.compare-row.head > div { color: #fff; font-size: 23px; font-weight: 700; line-height: 1.25; }
.compare-row.head > div:nth-child(2) { color: #E6EEF8; font-size: 21px; font-weight: 600; }
/* Managed column header: restrained warm dark orange */
.compare-row.head .ours { background: linear-gradient(135deg, #A74B20, #C46A28); padding: 0 40px; }
/* Managed column body: dark warm-orange tint on every row */
.compare-row > .yes { background: linear-gradient(180deg, rgba(124, 55, 32, 0.4), rgba(94, 44, 31, 0.35)); }
.compare-row .mark { display: grid; place-items: center; flex: none; }
.compare-row .mark svg { display: block; }
.compare-row .no .mark { color: #8B96AC; }
.compare-row .no .mark svg { width: 30px; height: 30px; }
.compare-row .yes .mark { width: 38px; height: 38px; border-radius: 50%; background: #FF7108; color: #fff; }
.compare-row .yes .mark svg { width: 20px; height: 20px; }
.compare-row .sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 900px) {
.price-grid { grid-template-columns: 1fr; gap: 44px; }
#pricing > .container { width: min(1480px, calc(100% - 64px)); }
}
@media (max-width: 600px) {
#pricing > .container { width: auto; padding-inline: 16px; }
#pricing > .container::after { right: 0; width: 80%; }
.price-head .eyebrow.price-pill { height: auto; min-height: 48px; padding: 10px 20px 10px 16px; font-size: 17px; gap: 10px; }
.price-pill-icon { width: 24px; height: 24px; }
.price-head h2 { font-size: 32px; margin-bottom: 20px; }
.price-lead { font-size: 16px; }
.price-note { padding: 20px 18px 20px 64px; font-size: 16px; }
.price-note .note-icon { left: 18px; top: 20px; width: 30px; height: 30px; }
.price-note strong { font-size: 18px; }
/* Feature-by-feature rows: label on top, DIY and Managed values side by side below it */
.compare-row { grid-template-columns: 1fr 1fr; min-height: 0; }
.compare-row > div:first-child { grid-column: 1 / -1; justify-content: flex-start; text-align: left; padding: 14px 16px 6px; font-size: 16px; }
.compare-row > div:not(:first-child) { padding: 10px 12px 14px; }
.compare-row.head > div:first-child { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #A4ABBE; padding-bottom: 10px; }
.compare-row.head > div:not(:first-child) { padding: 12px; font-size: 14px; line-height: 1.35; }
.compare-row.head .ours { padding: 12px; }
.compare-row .no .mark svg { width: 24px; height: 24px; }
.compare-row .yes .mark { width: 32px; height: 32px; }
.compare-row .yes .mark svg { width: 17px; height: 17px; }
}
/* ==========================================================
HOW IT WORKS (four-step timeline)
Dark navy like the other dark sections. Desktop: four equal columns
joined by thin blue connectors. Tablet and phone: vertical timeline.
========================================================== */
#process {
position: relative;
background:
radial-gradient(ellipse at 50% 45%, rgba(32, 65, 145, 0.13), transparent 70%),
rgba(8, 15, 38, 0.6);
color: #fff; padding: 110px 0 120px;
}
/* Faint technical grid, upper-left and upper-right, fading outward */
#process > .container::before {
content: ''; position: absolute; inset: -40px 0 auto 0; height: 60%; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(36, 124, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 124, 255, 0.08) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image:
radial-gradient(ellipse 22% 36% at 14% 22%, #000 0%, transparent 100%),
radial-gradient(ellipse 20% 34% at 92% 40%, #000 0%, transparent 100%);
mask-image:
radial-gradient(ellipse 22% 36% at 14% 22%, #000 0%, transparent 100%),
radial-gradient(ellipse 20% 34% at 92% 40%, #000 0%, transparent 100%);
}
/* Section-only container width; the global .container is unchanged */
#process > .container {
position: relative; z-index: 1;
width: min(1540px, calc(100% - 100px)); max-width: none; padding-inline: 0;
}
/* Header */
.proc-head { text-align: center; max-width: none; margin: 0 auto 64px; }
.proc-head .eyebrow { color: #247CFF; }
.proc-head .eyebrow.proc-pill {
display: inline-flex; align-items: center; gap: 15px; height: 60px; padding: 0 28px 0 16px;
margin-bottom: 28px; border-radius: 999px;
background: rgba(20, 28, 50, 0.7); border: 1px solid rgba(180, 199, 235, 0.25);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: clamp(18px, 1.45vw, 24px); font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
.proc-pill .logo-mark { width: 34px; height: 34px; flex: none; }
.proc-head h2 {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(38px, 4vw, 68px);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; max-width: 1300px; margin: 0 auto;
}
.process-highlight { color: #129BFF; }
/* Four-column timeline (desktop) */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; z-index: 1; }
.step {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.step-marker { margin-bottom: 18px; }
.step-body { display: flex; flex-direction: column; align-items: center; }
.step-num {
display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
background: linear-gradient(135deg, #208AFF, #075CF0); color: #fff;
font-size: 36px; font-weight: 700; line-height: 1;
box-shadow: 0 6px 20px rgba(36, 124, 255, 0.18);
}
/* Icon card: navy face, blue light at the upper-left, orange light at the lower-right */
.step-icon-card {
position: relative; display: grid; place-items: center; flex: none;
width: 150px; height: 145px; border-radius: 26px;
background:
linear-gradient(145deg, #172341 0%, #111A32 100%) padding-box,
linear-gradient(135deg, #247CFF 0%, rgba(85, 125, 210, 0.45) 48%, #FF7108 100%) border-box;
border: 1.5px solid transparent;
box-shadow:
-8px -5px 22px rgba(36, 124, 255, 0.16),
9px 10px 24px rgba(255, 113, 8, 0.18);
transition: box-shadow 0.4s ease;
}
.step-icon { display: block; width: 90px; height: 90px; color: #fff; }
.step-icon svg { width: 90px; height: 90px; display: block; }
.step-icon svg.rocket-svg { transform: rotate(45deg); }
.step h3 {
color: #fff; font-size: clamp(22px, 1.8vw, 30px); font-weight: 700; line-height: 1.25;
margin: 30px 0 14px;
}
.step p { color: #C4CADD; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.45; max-width: 320px; margin: 0 auto; }
/* Connecting arrows sit between the icon cards, centred on the card row */
.step:not(:last-child)::after {
content: ''; position: absolute; top: 143px; left: calc(50% + 123px);
width: max(40px, calc(100% - 246px)); height: 14px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7H131M125 1l6 6-6 6' fill='none' stroke='%23247CFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") right center / 100% 14px no-repeat;
pointer-events: none;
}
/* Entrance: staggered fade and rise (existing .reveal observer adds .visible) */
#process .step.reveal { transition: opacity 0.8s ease, transform 0.8s ease; }
.js #process .step.reveal:not(.visible) { transform: translateY(16px); }
#process .step.reveal.visible { transform: none; }
#process .step.reveal:nth-child(2) { transition-delay: 0.12s; }
#process .step.reveal:nth-child(3) { transition-delay: 0.24s; }
#process .step.reveal:nth-child(4) { transition-delay: 0.36s; }
/* Lighting breathes very gently; the card itself never moves.
The glow is a separate layer behind the card that only changes opacity. Animating
box-shadow repainted each card's blurred shadow every frame. The layer sits at 0.66
of the peak shadow and rises to 1, which gives the original 0.16 to 0.24 blue and
0.18 to 0.26 orange range. */
#process .step-icon-card { isolation: isolate; box-shadow: none; }
#process .step-icon-card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
box-shadow: -10px -6px 26px rgba(36, 124, 255, 0.24), 11px 12px 28px rgba(255, 113, 8, 0.26);
opacity: 0.66;
}
@keyframes process-glow-breathe {
0%, 100% { opacity: 0.66; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
#process .step-icon-card::before { animation: process-glow-breathe 6s ease-in-out infinite; }
}
/* Tablet and phone: vertical timeline, circle on the left, card and text on the right */
@media (max-width: 1100px) {
.step-icon-card { width: 126px; height: 122px; border-radius: 22px; }
.step-icon, .step-icon svg { width: 76px; height: 76px; }
.step h3 { margin-top: 24px; }
}
@media (max-width: 900px) {
#process { padding: 80px 0 90px; }
.timeline { display: flex; flex-direction: column; gap: 40px; max-width: 560px; margin: 0 auto; }
.step {
display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 22px;
align-items: start; text-align: left;
}
.step-marker { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.step-body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
.step-icon-card { margin-bottom: 4px; }
.step h3 { margin: 18px 0 8px; }
.step p { max-width: none; margin: 0; }
/* Vertical connector from this circle down to the next one (replaces the horizontal arrows) */
.step:not(:last-child)::after {
top: 60px; bottom: -40px; left: 29px; width: 2px; height: auto;
background: linear-gradient(180deg, #247CFF, rgba(36, 124, 255, 0.3));
background-image: linear-gradient(180deg, #247CFF, rgba(36, 124, 255, 0.3));
}
}
@media (max-width: 600px) {
#process { padding: 56px 0 64px; }
#process > .container { width: auto; padding-inline: 16px; }
.proc-head { margin-bottom: 40px; }
.proc-head h2 { font-size: 30px; }
.proc-pill { height: 52px; padding: 0 20px 0 12px; }
.step-icon-card { width: 104px; height: 100px; border-radius: 18px; }
.step-icon, .step-icon svg { width: 60px; height: 60px; }
.step h3 { font-size: 20px; }
.step p { font-size: 15.5px; }
.step:not(:last-child)::after { bottom: -32px; }
}
@media (prefers-reduced-motion: reduce) {
#process .step-icon-card::before { animation: none; }
}
/* ==========================================================
CONTACT
========================================================== */
/* ==========================================================
CONTACT
Dark navy like the hero. Contact methods on the left, form panel on the
right. Controls use fixed dark colours so they look the same in both themes.
Form logic, field IDs/names, honeypot and messages are unchanged.
========================================================== */
#contact {
background:
radial-gradient(ellipse at 12% 35%, rgba(36, 124, 255, 0.07), transparent 42%),
rgba(11, 20, 48, 0.6);
color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.08); overflow-x: clip;
padding: 80px 0 100px;
}
/* Faint technical grid, localised behind the left-centre area */
#contact > .container::before {
content: ''; position: absolute; left: 0; top: 0; width: 46%; height: 70%; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(49, 112, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(49, 112, 255, 0.08) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
}
/* Section-only container width; the global .container is unchanged */
#contact > .container {
position: relative; z-index: 1;
width: min(1470px, calc(100% - 100px)); max-width: none; padding-inline: 0;
}
#contact .contact-grid {
display: grid; grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); gap: 70px; align-items: start;
}
#contact .contact-info { padding-top: 24px; }
/* Eyebrow pill */
#contact .eyebrow { color: #247CFF; }
#contact .eyebrow.contact-pill {
display: inline-flex; align-items: center; gap: 13px; height: 55px; padding: 0 24px;
margin-bottom: 30px; border-radius: 999px;
background: rgba(18, 29, 54, 0.7); border: 1px solid rgba(180, 199, 235, 0.22);
color: #fff; font-size: clamp(17px, 1.4vw, 23px); font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
#contact .contact-pill-icon { width: 31px; height: 31px; flex: none; color: #247CFF; }
/* Heading and lead */
#contact .contact-title {
color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(40px, 3.8vw, 66px);
font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-bottom: 22px;
}
#contact .contact-highlight { color: #2399FF; }
#contact .contact-lead {
color: #A4ABBE; font-size: clamp(17px, 1.55vw, 27px); line-height: 1.45;
max-width: 530px; margin-bottom: 44px;
}
/* Contact method cards: icon square | divider | label and value */
#contact .contact-methods { display: grid; gap: 22px; }
#contact .contact-method {
display: flex; align-items: center; min-height: 122px; padding: 24px 28px;
background: rgba(35, 47, 79, 0.75); border: 1px solid rgba(180, 199, 235, 0.3); border-radius: 22px;
color: #fff; text-decoration: none; transition: border-color 0.25s ease;
}
#contact .contact-method:hover { border-color: rgba(180, 199, 235, 0.55); }
#contact .contact-method:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 3px; }
#contact .ico {
width: 68px; height: 68px; flex-shrink: 0; margin-right: 27px; border-radius: 14px;
display: grid; place-items: center; background: rgba(49, 80, 210, 0.16); color: #fff;
}
#contact .ico svg { width: 40px; height: 40px; display: block; }
#contact .ico.wa { background: #25D366; color: #fff; }
#contact .ico.mail { background: #3150D2; color: #fff; }
#contact .cm-text {
display: flex; flex-direction: column; justify-content: center; min-width: 0;
padding: 6px 0 6px 27px; border-left: 1px solid rgba(180, 199, 235, 0.3);
}
#contact .cm-text small { color: #fff; font-size: clamp(20px, 1.6vw, 26px); font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
#contact .cm-text strong { color: #B8C1D5; font-size: clamp(17px, 1.4vw, 23px); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
/* Form panel */
#contact .form-card {
position: relative; color-scheme: dark; padding: 44px;
background: linear-gradient(145deg, #1C2745 0%, #19233F 100%);
border: 1px solid rgba(180, 199, 235, 0.35); border-radius: 30px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 30px 80px -24px rgba(255, 113, 8, 0.22);
}
#contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
#contact .field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
#contact .field label,
#contact .addon-choices legend { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.3; }
#contact .field input,
#contact .field select,
#contact .field textarea {
width: 100%; height: 52px; padding: 0 20px; background: #283450; color: #fff;
border: 1px solid rgba(180, 199, 235, 0.35); border-radius: 12px;
font-family: inherit; font-size: 18px; line-height: 1.4;
}
#contact .field textarea { height: auto; min-height: 118px; padding: 16px 20px; resize: vertical; }
#contact .field select {
appearance: none; padding-right: 48px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 20px center;
}
#contact .field input::placeholder,
#contact .field textarea::placeholder { color: #9AA6BF; opacity: 1; }
#contact .field input:focus,
#contact .field select:focus,
#contact .field textarea:focus {
outline: none; border-color: #247CFF; box-shadow: 0 0 0 3px rgba(36, 124, 255, 0.25);
}
#contact .field.invalid input,
#contact .field.invalid textarea { border-color: #FF7A7D; }
#contact .error-msg { color: #FF8A8D; font-size: 15px; line-height: 1.4; }
/* Add-ons: two visual columns, left 1-3 and right 4-6 (DOM order and values unchanged) */
#contact .addon-choices { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
#contact .addon-choices legend { padding: 0; margin-bottom: 12px; }
#contact .addon-choices .checks {
display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 14px;
}
#contact .checks > .check:nth-child(1) { grid-area: 1 / 1; }
#contact .checks > .check:nth-child(2) { grid-area: 1 / 2; }
#contact .checks > .check:nth-child(3) { grid-area: 2 / 1; }
#contact .checks > .check:nth-child(4) { grid-area: 2 / 2; }
#contact .checks > .check:nth-child(5) { grid-area: 3 / 1; }
#contact .checks > .check:nth-child(6) { grid-area: 3 / 2; }
#contact .check {
display: flex; align-items: center; gap: 14px; min-height: 44px;
color: #E6EEF8; font-size: 18px; line-height: 1.4; cursor: pointer;
}
/* Native checkbox kept (focus, keyboard and value unchanged); only its look is restyled */
#contact .check input {
-webkit-appearance: none; appearance: none; flex-shrink: 0; margin: 0;
width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
border: 1.5px solid rgba(180, 199, 235, 0.45); background: rgba(15, 24, 48, 0.6);
}
#contact .check input:checked {
background: #247CFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; border-color: #247CFF;
}
#contact .check input:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 2px; }
/* Submit: full width, orange, 62px */
#contact #submitBtn {
width: 100%; height: 62px; margin-top: 10px; border: 0; border-radius: 12px;
background: linear-gradient(135deg, #FF7108, #FF8508); color: #fff;
font-family: inherit; font-size: 24px; font-weight: 700; box-shadow: none; transform: none; cursor: pointer;
transition: box-shadow 0.25s ease, filter 0.25s ease;
}
#contact #submitBtn:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(255, 113, 8, 0.3); transform: none; }
#contact #submitBtn:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.7); outline-offset: 3px; }
#contact #submitBtn:disabled { opacity: 0.7; cursor: wait; }
#contact .form-status { margin-top: 14px; min-height: 1.4em; font-size: 15px; color: #A4ABBE; }
#contact .form-status.ok { color: #4ADE80; }
#contact .form-status.err { color: #FF8A8D; }
#contact .form-note {
display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px;
color: #A4ABBE; font-size: 16px; line-height: 1.4; text-align: center;
}
#contact .note-shield { width: 23px; height: 23px; flex: none; color: #A4ABBE; }
/* Honeypot: off-screen for people and bots alike (kept out of the layout and screen readers) */
#contact .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile: sits directly above the Send button, aligned with the fields */
#contact .turnstile-wrap { display: block; max-width: 100%; min-height: 65px; margin: 4px 0 18px; overflow: hidden; }
#contact .turnstile-wrap[hidden] { display: none; }
/* Validation messages: hidden until the field is marked invalid on submit */
#contact .error-msg { display: none; }
#contact .field.invalid .error-msg { display: block; }
@media (max-width: 600px) {
#contact { padding: 60px 0 70px; }
#contact > .container { width: auto; }
#contact .ico { width: 56px; height: 56px; margin-right: 18px; }
#contact .ico svg { width: 30px; height: 30px; }
#contact .cm-text { padding-left: 18px; }
#contact .contact-method { padding: 20px; }
#contact .form-card { padding: 30px 22px; }
}
@media (max-width: 900px) {
#contact .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
#contact .container { padding: 0 20px; }
#contact .contact-title { font-size: 34px; }
#contact .form-card { padding: 32px 22px; }
#contact .form-row { grid-template-columns: 1fr; gap: 0; }
#contact .addon-choices .checks { grid-template-columns: 1fr; }
/* While the form is on screen, the floating WhatsApp button is hidden on phones
so it never covers a field or the Send Message button. The WhatsApp link stays
in the contact methods above. */
body.float-wa-hidden .float-wa { opacity: 0; pointer-events: none; }
}
/* ==========================================================
PACKAGES AND ADD-ONS
Dark navy section over the shared electric-blue line. Prices are the
original placeholders (no amounts added or changed). One-time and
yearly units are never mixed.
========================================================== */
#packages { background: rgba(11, 20, 48, 0.6); color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pkg-head { text-align: center; max-width: 900px; margin: 0 auto 56px; }
.pkg-head .eyebrow { color: #247CFF; }
.pkg-head .eyebrow.pkg-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px 7px 12px; margin-bottom: 22px;
border-radius: 999px; border: 1px solid rgba(36, 124, 255, 0.45);
background: rgba(18, 29, 54, 0.6); color: #fff;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
}
.pkg-pill-icon { width: 16px; height: 16px; flex: none; color: #247CFF; }
.pkg-head h2 {
color: #fff; font-size: clamp(30px, 3vw, 43px); font-weight: 700;
line-height: 1.18; margin-bottom: 16px; text-wrap: balance;
}
.pkg-head p { color: #B0B9CE; font-size: 18px; line-height: 1.65; max-width: 680px; margin: 0 auto; }
/* Three equal-height cards */
.pkg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (min-width: 1360px) {
.pkg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#packages > .container { width: min(1480px, calc(100% - 100px)); max-width: none; padding-inline: 0; }
#packages .pkg-price { font-size: 32px; white-space: nowrap; }
#packages .pkg-price small { display: block; margin: 8px 0 0; font-size: 15px; }
#packages .pkg-card:not(:has(.pkg-split)) .pkg-price { margin-bottom: 108px; }
}
.pkg-card {
position: relative; display: flex; flex-direction: column; min-width: 0;
background: #121D36; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
padding: 38px 30px 30px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.pkg-card.reveal { transition: opacity 0.7s ease, transform 0.45s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
/* Icon tile shared by the package cards and the add-ons panel */
.pkg-icon {
display: grid; place-items: center; flex: none;
width: 58px; height: 58px; border-radius: 16px; margin-bottom: 22px;
color: #5B9DFF;
background: linear-gradient(180deg, rgba(36, 124, 255, 0.2) 0%, rgba(36, 124, 255, 0.05) 100%);
border: 1px solid rgba(36, 124, 255, 0.35);
}
.pkg-icon svg { width: 28px; height: 28px; display: block; }
/* Featured plan: 2px electric-blue border and a soft glow; padding trimmed by 1px per side to keep content aligned */
.pkg-featured {
border: 2px solid #247CFF; padding: 36px 28px 28px;
background: linear-gradient(180deg, rgba(36, 124, 255, 0.14) 0%, rgba(36, 124, 255, 0.03) 60%), #121D36;
box-shadow: 0 0 0 1px rgba(36, 124, 255, 0.18), 0 18px 48px rgba(36, 124, 255, 0.24);
}
/* "Most popular" sits inside the top-right corner */
.pkg-badge {
position: absolute; top: 18px; right: 18px;
background: #FF7108; color: #0B1430; font-size: 12px; font-weight: 700;
letter-spacing: 0.02em; line-height: 1; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.pkg-name { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 12px; }
/* Tagline as a soft pill; align-self keeps it shrink-to-fit inside the column */
.pkg-tag {
align-self: flex-start; display: inline-block;
color: #B9D3FF; background: rgba(36, 124, 255, 0.12); border: 1px solid rgba(36, 124, 255, 0.32);
border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; padding: 7px 12px; margin-bottom: 24px;
}
/* Price and billing period share one line */
.pkg-price {
color: #fff; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em;
padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pkg-price small { display: inline; white-space: nowrap; margin-left: 6px; color: #A4ABBE; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.pkg-list { list-style: none; display: grid; gap: 14px; flex: 1; margin-bottom: 30px; }
.pkg-list li { position: relative; padding-left: 30px; color: #C5CEDD; font-size: 15px; line-height: 1.5; }
/* Blue check badge drawn with a data-URI icon (CSP allows data: images) */
.pkg-list li::before {
content: ''; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
background-color: #247CFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
background-position: center; background-size: 11px 11px; background-repeat: no-repeat;
}
/* Buttons: 52px tall, full width, bottom-aligned by the flexible list above */
.pkg-btn {
display: flex; align-items: center; justify-content: center; width: 100%; height: 52px;
border-radius: 999px; border: 1.5px solid transparent; font-family: inherit;
font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pkg-btn:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 3px; }
.pkg-btn-outline { background: transparent; color: #fff; border-color: #247CFF; }
.pkg-btn-primary { background: #FF7108; color: #0B1430; border-color: #FF7108; }
@media (hover: hover) {
.pkg-card.reveal.visible:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.24); }
.pkg-featured.reveal.visible:hover { border-color: #247CFF; }
.pkg-btn-outline:hover { background: rgba(36, 124, 255, 0.14); }
.pkg-btn-primary:hover { background: #E96300; border-color: #E96300; }
}
@media (prefers-reduced-motion: reduce) {
.pkg-card.reveal.visible:hover { transform: none; }
}
/* Add-ons: one full-width panel. Left block (icon, title, note) and a 1px divider, right block with six rows in two columns. */
.pkg-addons {
margin-top: 28px; display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
background: #121D36; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px;
padding: 36px 40px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}
.pkg-addons-head { padding-right: 40px; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.pkg-addons-head h3 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 10px; }
.pkg-addons-head p { color: #B0B9CE; font-size: 16px; line-height: 1.6; }
.addon-list {
list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 36px; padding-left: 40px; align-content: center;
}
.addon-list li {
display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center;
padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.addon-list li:last-child { border-bottom: 0; }
.addon-ico { grid-row: span 2; display: grid; place-items: center; color: #5B9DFF; }
.addon-ico svg { width: 22px; height: 22px; display: block; }
.addon-list li > span:not(.addon-ico) { color: #E6EEF8; font-size: 15.5px; line-height: 1.4; }
.addon-list strong { grid-column: 2; color: #8FA7FF; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
/* Footnote below the panel: centred and italic */
.pkg-note { margin: 26px auto 0; max-width: 1000px; text-align: center; color: #8D9AB3; font-size: 13.5px; font-style: normal; line-height: 1.6; }
@media (max-width: 900px) {
.pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
.pkg-addons { grid-template-columns: 1fr; }
.pkg-addons-head { padding-right: 0; padding-bottom: 24px; margin-bottom: 8px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.addon-list { grid-template-columns: 1fr; padding-left: 0; }
.addon-list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.addon-list li:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
.pkg-grid { max-width: none; gap: 20px; }
.pkg-head { margin-bottom: 36px; }
.pkg-head p { font-size: 17px; }
.pkg-card { padding: 34px 22px 24px; }
.pkg-featured { padding: 32px 20px 22px; }
.pkg-price { font-size: 34px; }
.pkg-addons { padding: 26px 20px; }
.addon-list li { padding: 14px 0; }
}
/* Quote form: package and add-on choices */
.field select {
font-family: inherit; font-size: 1rem; color: var(--text); background: var(--bg);
border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 16px; width: 100%;
}
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.18); }
.addon-choices { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.addon-choices legend { font-weight: 600; font-size: 0.92rem; margin-bottom: 10px; }
.addon-choices .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
/* ==========================================================
FOOTER
========================================================== */
/* ==========================================================
FOOTER
Deep navy, closing the page after the dark sections. Brand block first,
then two link columns, then a thin divider with the copyright line.
========================================================== */
footer {
position: relative; overflow: hidden;
background: rgba(6, 12, 28, 0.72); color: #A4ABBE; font-size: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 80px 0 0;
}
/* Faint technical grid in the upper-right corner only, fading outward */
footer::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
right: 0; top: 0; width: 30%; height: 70%;
background-image:
linear-gradient(rgba(36, 124, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 124, 255, 0.05) 1px, transparent 1px);
background-size: 45px 45px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
footer > .container { position: relative; z-index: 1; width: min(1340px, calc(100% - 100px)); max-width: none; padding-inline: 0; }
footer .footer-grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
gap: 70px; align-items: start;
}
footer .footer-brand { min-width: 0; }
footer .logo { color: #fff; font-size: 26px; font-weight: 700; line-height: 1.2; }
footer .logo .logo-mark { width: 38px; height: 38px; flex: none; }
footer .footer-tagline { margin: 18px 0 0; max-width: 350px; color: #A4ABBE; font-size: 16px; line-height: 1.7; }
/* Social icons: 44px rounded tiles with a restrained hover */
footer .socials { display: flex; gap: 12px; margin-top: 26px; }
footer .socials a {
width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.045); color: #A4ABBE; display: grid; place-items: center;
transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
footer .socials a:hover { border-color: #247CFF; background: rgba(36, 124, 255, 0.14); color: #fff; transform: translateY(-2px); }
footer .socials svg { width: 19px; height: 19px; display: block; }
/* Column headings with a short blue underline */
footer h4 { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0 0 22px; }
footer h4::after { content: ""; display: block; width: 32px; height: 2px; border-radius: 2px; background: #247CFF; margin-top: 12px; }
/* Plain text links: no button backgrounds */
footer ul { list-style: none; display: grid; gap: 15px; }
footer ul li { display: flex; align-items: center; min-height: 0; }
footer ul a { display: inline-block; color: #A4ABBE; font-size: 16px; line-height: 1.5; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; }
footer ul a:hover { color: #fff; transform: translateX(3px); }
footer a:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 3px; border-radius: 4px; }
/* Divider and copyright row */
footer .copyright {
margin-top: 60px; padding: 24px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px;
color: #8D9AB3; font-size: 14px; line-height: 1.5;
}
@media (max-width: 900px) {
footer > .container { width: min(1340px, calc(100% - 64px)); }
footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
footer { padding-top: 56px; }
footer > .container { width: auto; padding-inline: 20px; }
footer .footer-grid { gap: 36px 24px; }
footer .logo { font-size: 22px; }
footer .logo .logo-mark { width: 34px; height: 34px; }
footer .footer-tagline { font-size: 15px; }
footer ul { gap: 0; }
footer ul li { min-height: 44px; }
footer ul a { font-size: 15px; }
footer .copyright { flex-direction: column; align-items: flex-start; margin-top: 44px; gap: 8px; }
}
.copyright {
margin-top: 56px; padding-top: 24px; border-top: 1px solid #1E3A5C;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.9rem;
}
/* ==========================================================
FLOATING WHATSAPP BUTTON
========================================================== */
.float-wa {
position: fixed; right: 20px; bottom: 20px; z-index: 200;
width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp); color: #fff;
display: grid; place-items: center; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45);
transition: transform 0.25s ease;
}
.float-wa:hover { transform: scale(1.1); }
.float-wa svg { width: 32px; height: 32px; }
.float-wa::before {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
border: 2px solid var(--whatsapp); opacity: 0; animation: pulse 2.2s infinite;
}
@keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }
/* ==========================================================
SCROLL ANIMATIONS (fade and slide in)
Elements with .reveal start hidden and animate in when visible.
========================================================== */
/* Content is visible by default. Only when the page head has added the "js" class does a
block start hidden (below); it then fades in once and stays visible. */
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal:not(.visible) { opacity: 0; transform: translateY(18px); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
/* CSS animation:none doesn't stop SVG's own SMIL , so the
traveling particles need to be hidden outright; the static curves remain. */
.hero-particle { display: none; }
}
/* ==========================================================
RESPONSIVE (mobile first breakpoints)
========================================================== */
@media (max-width: 1140px) {
.nav-pill a { padding: 9px 13px; font-size: 0.88rem; }
}
@media (max-width: 1024px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.nav-links, .nav-actions .btn-nav { display: none; }
.menu-toggle { display: grid; }
.grid-3, .grid-2 { grid-template-columns: 1fr; }
.hero-bold { padding: 40px 0 44px; }
/* Mobile headline: "Craft Your" and "Web Space" each collapse to one line
(the
is hidden) and stack as a single 2-line block
above the device cluster, instead of interleaving with it like on desktop. */
.hero-bold-title {
flex-direction: column; align-items: center; gap: 2px;
font-size: clamp(2.6rem, 14vw, 4rem);
}
.hb-left { order: 1; }
.hb-right { order: 2; text-align: center; margin-bottom: 20px; }
.hb-break { display: none; }
.hb-highlight { color: var(--accent); }
/* Mobile CTAs: side by side with equal flexible widths (flex-basis:0 so both
share the row equally regardless of their different text lengths) and a
fixed 50px height, instead of auto-width/wrap like the rest of the site's buttons. */
.hero-bold-buttons { flex-wrap: nowrap; gap: 12px; }
/* min-width:0 overrides the flex item's default min-width:auto (= min-content), which
would otherwise let "Chat on WhatsApp"'s longer text force it wider than "View Demos"
despite flex:1 on both. */
.btn-hero-blue, .btn-hero-whatsapp { flex: 1 1 0; width: auto; min-width: 0; height: 50px; padding: 0 10px; font-size: 0.92rem; }
.btn-hero-whatsapp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fluid width, capped at the same 493px the device cluster used to only reach at this
(tablet) breakpoint: below ~900px it now stays this size, matching the tablet view,
all the way down to the smallest phones, shrinking only enough (via the calc) to
never exceed the available width inside .container's padding. Every child inside
.hero-devices is a % of this, so they scale with it automatically (see above) --
no transform:scale() layer needed, which removes the double-scaling bug that caused
inconsistent proportions between breakpoints in earlier passes. */
.hero-devices { order: 3; margin: 0 auto; width: min(493px, calc(100vw - 40px)); }
.float-badge { font-size: 0.65rem; padding: 6px 12px 6px 6px; gap: 6px; }
.fb-ico { width: 18px; height: 18px; }
.fb-ico svg { width: 10px; height: 10px; }
.fb-managed { left: -11px; top: 145px; }
.fb-ssl { right: -11px; top: 51px; }
section { padding: 72px 0; }
}
@media (max-width: 600px) {
.container { padding: 0 16px; }
section { padding: 60px 0; }
.why-grid { grid-template-columns: 1fr; }
.why-card { min-height: 0; }
.why-head h2 { font-size: 28px; }
.why-head p { font-size: 15px; }
/* Phone-only CTA layout: stacked instead of the tablet tier's side-by-side row,
both buttons an identical 100%-wide (capped) box so they match exactly. */
.hero-bold-lead { margin-bottom: 24px; }
.hero-bold-buttons { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.btn-hero-blue, .btn-hero-whatsapp {
flex: none; width: 100%; max-width: 340px; height: 52px; padding: 0 20px; font-size: 1rem;
}
.btn-hero-blue svg, .btn-hero-whatsapp svg { width: 20px; height: 20px; }
.btn-hero-whatsapp span { overflow: visible; text-overflow: clip; } /* plenty of width now, no ellipsis needed */
.hero-bold-trust { gap: 8px; }
.trust-pill { font-size: 0.78rem; padding: 8px 14px; }
.hero-bold-title { gap: 0; }
/* Reference composition: asymmetric, not the centered/contained symmetric layout used
elsewhere. Code sits flush at the left edge and lower; the phone is the dominant
foreground element, shifted right of center and higher up; the tablet bleeds off
the right edge of the viewport (clipped by the existing body { overflow-x: hidden },
not something to "fix" -- it's the intended look). */
/* Hero cluster on phones: a centred box that stays inside the content column (no 100vw
width, no negative offsets), so nothing is pushed off-screen or cropped. The phone is
the large foreground image; the code editor sits behind its left side and the tablet
behind its right side. Every position is a percentage of this box. */
.hero-devices { width: 100%; max-width: 430px; margin: 0 auto; }
.device-img-code { width: 44%; left: 0; top: 9%; }
.device-img-phone { width: 56%; left: 50%; top: 6%; }
.device-img-tablet { width: 46%; right: 0; top: 9%; }
.fb-managed { left: 0; top: 60%; }
.fb-ssl { right: 0; top: 14%; }
.form-row { grid-template-columns: 1fr; gap: 0; }
.form-card { padding: 26px 20px; }
.addon-choices .checks { grid-template-columns: 1fr; }
.service-panel { padding: 28px 22px; }
.float-wa { width: 54px; height: 54px; right: 16px; bottom: 16px; }
.copyright { flex-direction: column; }
/* Keep the navbar on one line on phones: the name shortens with "..." */
.nav-inner { gap: 8px; }
.logo { font-size: 1rem; }
.logo > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-actions { gap: 8px; }
.icon-btn { width: 38px; height: 38px; }
.lang-select { height: 38px; font-size: 0.85rem; padding: 0 26px 0 12px; background-position: right 8px center; }
}
/* ==========================================================
MOBILE REFINEMENT (phones, 600px and below)
Proportion and spacing pass for the seven sections and the footer.
Mobile-only, section-scoped. The hero, desktop styles, colours,
the blue-line system and all content are untouched.
========================================================== */
@media (max-width: 600px) {
/* 3. Why Security Matters */
#why-security { padding: 50px 0 56px; }
#why-security .why-head { margin-bottom: 28px; }
#why-security .why-head h2 { font-size: 27px; line-height: 1.2; }
#why-security .why-head p { font-size: 14.5px; line-height: 1.55; }
#why-security .why-grid { gap: 15px; }
#why-security .why-card { padding: 20px 18px; min-height: 0; }
#why-security .why-icon { width: 50px; height: 50px; }
#why-security .why-icon svg { width: 26px; height: 26px; }
#why-security .why-card h3 { font-size: 17.5px; margin-bottom: 8px; }
#why-security .why-card p { font-size: 14px; line-height: 1.5; }
#why-security .risk-list, #why-security .fix-list { margin-top: 14px; gap: 10px; }
#why-security .risk-list li, #why-security .fix-list li { font-size: 14px; line-height: 1.5; }
/* 4. Services */
#services { padding: 50px 0 56px; }
#services .svc-head { margin-bottom: 26px; }
#services .svc-head h2 { font-size: 27px; line-height: 1.2; }
#services .svc-head p { font-size: 14.5px; line-height: 1.55; }
#services .svc-list { gap: 12px; }
#services .svc-item { padding: 16px; gap: 13px; min-height: 0; }
#services .svc-icon { width: 48px; height: 48px; border-radius: 13px; }
#services .svc-icon svg { width: 24px; height: 24px; }
#services .svc-item h3 { font-size: 16.5px; line-height: 1.3; }
#services .svc-item p { font-size: 14px; line-height: 1.5; }
#services .svc-panel { padding: 22px 20px; }
#services .svc-panel h3 { font-size: 25px; line-height: 1.2; margin-bottom: 10px; }
#services .svc-panel p { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
#services .svc-panel .btn-primary { height: 48px; font-size: 15px; }
/* 5. Our Custom Builds */
#demos { padding: 50px 0 56px; }
#demos .demo-head { margin-bottom: 28px; }
#demos .demo-head h2 { font-size: 27px; line-height: 1.2; }
#demos .demo-head p { font-size: 14.5px; line-height: 1.55; }
#demos .demo-grid { gap: 16px; }
#demos .demo-card { padding: 16px 16px 18px; }
#demos .demo-shot { margin-bottom: 14px; }
#demos .demo-title { font-size: 19px; margin-bottom: 8px; }
#demos .demo-desc { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
#demos .demo-btn { height: 46px; font-size: 15px; }
/* 6. Why Our Price Is Higher */
#pricing { padding: 50px 0 56px; }
#pricing .price-head h2 { font-size: 27px; line-height: 1.2; margin-bottom: 14px; }
#pricing .price-lead { font-size: 14.5px; line-height: 1.55; }
#pricing .price-note { margin-top: 20px; padding: 16px 16px 16px 56px; font-size: 14.5px; line-height: 1.55; }
#pricing .price-note .note-icon { left: 16px; top: 17px; width: 26px; height: 26px; }
#pricing .price-note strong { font-size: 16px; }
#pricing .compare-row > div:first-child { padding: 12px 14px 4px; font-size: 15px; }
#pricing .compare-row > div:not(:first-child) { padding: 8px 10px 12px; }
/* 7. Packages and Add-ons */
#packages { padding: 50px 0 56px; }
#packages .pkg-head { margin-bottom: 28px; }
#packages .pkg-head h2 { font-size: 27px; line-height: 1.2; }
#packages .pkg-head p { font-size: 14.5px; line-height: 1.55; }
#packages .pkg-grid { gap: 16px; }
#packages .pkg-card { padding: 20px 18px 18px; }
#packages .pkg-featured { padding: 19px 17px 17px; }
#packages .pkg-badge { top: 14px; right: 14px; font-size: 11.5px; padding: 6px 11px; }
#packages .pkg-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px; }
#packages .pkg-icon svg { width: 24px; height: 24px; }
#packages .pkg-name { font-size: 20px; margin-bottom: 8px; }
#packages .pkg-tag { font-size: 13px; margin-bottom: 16px; padding: 6px 11px; }
#packages .pkg-price { font-size: 30px; padding-bottom: 16px; margin-bottom: 16px; }
#packages .pkg-price small { font-size: 13px; }
#packages .pkg-list { gap: 10px; margin-bottom: 20px; }
#packages .pkg-list li { font-size: 14px; line-height: 1.5; padding-left: 28px; }
#packages .pkg-list li::before { width: 18px; height: 18px; top: 1px; background-size: 10px 10px; }
#packages .pkg-btn { height: 48px; font-size: 15px; }
#packages .pkg-addons { margin-top: 20px; padding: 22px 18px; }
#packages .pkg-addons-head h3 { font-size: 20px; margin-bottom: 8px; }
#packages .pkg-addons-head p { font-size: 14.5px; line-height: 1.55; }
#packages .addon-list li { padding: 13px 0; column-gap: 12px; }
#packages .addon-list li > span:not(.addon-ico) { font-size: 14.5px; line-height: 1.4; }
#packages .addon-list strong { font-size: 14px; }
#packages .pkg-note { margin-top: 18px; font-size: 14px; }
/* 8. How It Works (keeps the vertical timeline, glow and connectors) */
#process { padding: 50px 0 56px; }
#process .proc-head { margin-bottom: 32px; }
#process .proc-head h2 { font-size: 27px; line-height: 1.2; }
#process .proc-head p { font-size: 14.5px; line-height: 1.55; }
#process .timeline { gap: 28px; }
#process .step { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
#process .step-marker { width: 40px; }
#process .step-num { width: 40px; height: 40px; font-size: 16px; }
#process .step-icon-card { width: 74px; height: 74px; border-radius: 18px; }
#process .step-icon, #process .step-icon svg { width: 46px; height: 46px; }
#process .step h3 { font-size: 17.5px; line-height: 1.3; margin: 12px 0 6px; }
#process .step p { font-size: 14.5px; line-height: 1.5; }
#process .step:not(:last-child)::after { top: 46px; bottom: -28px; left: 19px; }
/* 9. Contact */
#contact { padding: 50px 0 56px; }
#contact .contact-title { font-size: 28px; line-height: 1.2; }
#contact .contact-lead { font-size: 14.5px; line-height: 1.55; }
#contact .contact-info { padding-top: 0; }
#contact .contact-grid { gap: 28px; }
#contact .contact-methods { gap: 14px; }
#contact .contact-method { padding: 16px; min-height: 0; }
#contact .ico { width: 50px; height: 50px; margin-right: 14px; }
#contact .ico svg { width: 26px; height: 26px; }
#contact .cm-text { padding-left: 14px; }
#contact .cm-text small { font-size: 17px; }
#contact .cm-text strong { font-size: 14.5px; }
#contact .form-card { padding: 20px 18px; }
#contact .field { margin-bottom: 16px; gap: 7px; }
#contact .field label, #contact .addon-choices legend { font-size: 14px; }
#contact .field input, #contact .field select { height: 48px; font-size: 16px; }
#contact .field textarea { min-height: 118px; font-size: 16px; }
#contact .check { font-size: 14.5px; }
#contact .addon-choices { margin-bottom: 18px; }
#contact #submitBtn { height: 50px; font-size: 16px; }
#contact .form-note { font-size: 14px; }
/* Keep the contact column inside narrow phones (320px): one track that can shrink, no fixed minimums */
#contact .container { padding: 0 16px; }
#contact .contact-grid { grid-template-columns: minmax(0, 1fr); }
#contact .contact-info, #contact .form-card, #contact .contact-methods { min-width: 0; max-width: 100%; }
/* 10. Footer */
footer { padding-top: 44px; }
footer .footer-grid { gap: 30px 20px; }
footer h4 { font-size: 16px; margin-bottom: 14px; }
footer .footer-tagline { font-size: 14px; line-height: 1.6; }
footer .socials { margin-top: 20px; gap: 10px; }
footer .socials a { width: 42px; height: 42px; border-radius: 11px; }
footer ul li { min-height: 40px; }
footer ul a { font-size: 14px; }
footer .copyright { margin-top: 36px; padding: 20px 0 24px; font-size: 14px; gap: 8px; }
}
/* ==========================================================
SECTION EYEBROW BADGES (shared .section-eyebrow)
One badge for every section name: dark navy glass, thin orange
border fading to grey-blue, orange icon on the left, white
semibold label and a soft orange glow on the left edge.
========================================================== */
:is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) .eyebrow.section-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
height: 46px; padding: 0 22px 0 16px;
border: 1px solid transparent; border-radius: 999px;
background:
linear-gradient(rgba(22, 30, 52, 0.85), rgba(22, 30, 52, 0.85)) padding-box,
linear-gradient(90deg, #FF7108 0%, #FF7108 30%, rgba(92, 107, 136, 0.9) 100%) border-box;
box-shadow: -4px 0 14px -6px rgba(255, 113, 8, 0.45);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: #fff; font-size: 17px; font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
}
:is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) .eyebrow.section-eyebrow > svg {
display: block; width: 22px; height: 22px; flex: none; color: #FF7108; stroke: currentColor;
}
@media (max-width: 600px) {
:is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) .eyebrow.section-eyebrow { height: 36px; padding: 0 14px 0 10px; gap: 8px; font-size: 13px; }
:is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) .eyebrow.section-eyebrow > svg { width: 18px; height: 18px; }
}
/* PRICE PILL CENTRED: the "Why Our Price Is Higher" badge sits in the middle of its column.
Only the badge moves; the heading and paragraph stay left-aligned. */
#pricing .price-head > .section-eyebrow {
display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px;
}
/* CONTACT PILL CENTRED: the "Contact" badge sits in the middle of its column.
Only horizontal margins change, so its existing bottom spacing stays the same. */
#contact .contact-info > .section-eyebrow {
display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
}
/* HEADING HIGHLIGHT (shared): the electric-blue phrase in each section heading.
Colour only; the heading's size, weight, line height and layout are unchanged. */
:is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) h2 .heading-hl { color: #139CFF; }
/* HEADINGS CENTRED (Pricing, Contact): the badge, heading and paragraph of these two
left-column headings sit in the middle of their column. The note, table, form and
contact cards are unchanged. */
#pricing .price-head { text-align: center; }
#pricing .price-head h2 { margin-left: auto; margin-right: auto; }
#pricing .price-lead { margin-left: auto; margin-right: auto; }
#contact .contact-info > .contact-title,
#contact .contact-info > .contact-lead { text-align: center; margin-left: auto; margin-right: auto; }
/* FEATURED CARD ORANGE GLOW: the "How We Protect You" card gets the same warm orange
background light as the Services CTA panel. Background only; its blue border,
card colours and content are unchanged. */
#why-security .why-card.why-card-featured {
background:
radial-gradient(ellipse 140% 120% at 85% 90%, rgba(255, 113, 8, 0.12) 0%, rgba(255, 113, 8, 0.06) 55%, rgba(255, 113, 8, 0.02) 100%),
linear-gradient(145deg, #15203B 0%, #101A31 100%);
}
/* FEATURED CARD OUTER GLOW: the warm orange halo from under the pricing table, placed
outside the card on its lower-right (5 o'clock) side only. Shadow only; the blue border,
card colours and content are unchanged. */
#why-security .why-card.why-card-featured {
box-shadow:
0 0 18px rgba(36, 124, 255, 0.10),
0 12px 30px rgba(0, 0, 0, 0.12),
24px 28px 72px -14px rgba(255, 113, 8, 0.30);
}
@media (max-width: 600px) {
#why-security .why-card.why-card-featured {
box-shadow:
0 0 18px rgba(36, 124, 255, 0.10),
0 12px 30px rgba(0, 0, 0, 0.12),
10px 12px 34px -10px rgba(255, 113, 8, 0.28);
}
}
/* ---- Pricing update: package sub-heads, split and renewal lines, collapsible not-included lists, scope note ---- */
.pkg-sub { color: #8FA7FF; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; }
.pkg-split { color: #B0B9CE; font-size: 14px; line-height: 1.5; margin: -6px 0 6px; }
.pkg-renew { color: #E6EEF8; font-size: 14px; font-weight: 600; line-height: 1.5; margin: 0 0 22px; }
.pkg-more { margin: 0 0 26px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pkg-more summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; color: #B0B9CE; font-size: 14px; font-weight: 600; }
.pkg-more summary::-webkit-details-marker { display: none; }
.pkg-more summary::after { content: "+"; color: #5B9DFF; font-size: 18px; line-height: 1; }
.pkg-more[open] summary::after { content: "\2013"; }
.pkg-more summary:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 4px; border-radius: 4px; }
.pkg-not { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.pkg-not li { position: relative; padding-left: 22px; color: #8D9AB3; font-size: 14px; line-height: 1.5; }
.pkg-not li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 10px; height: 2px; border-radius: 2px; background: #8D9AB3; }
.pkg-scope { max-width: 1000px; margin: 26px auto 0; text-align: center; color: #8D9AB3; font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) {
#packages .pkg-split { font-size: 13px; }
#packages .pkg-renew { font-size: 13px; margin-bottom: 18px; }
#packages .pkg-more { margin-bottom: 20px; }
#packages .pkg-more summary { font-size: 13.5px; }
#packages .pkg-not li { font-size: 13px; }
#packages .pkg-scope { font-size: 13px; margin-top: 18px; }
#packages .pkg-note { font-size: 13px; }
}
/* ==========================================================
LIGHT MODE (html[data-theme="light"]) - professional white and blue.
Dark Mode is the default and is not changed by anything below.
Every override is scoped to html[data-theme="light"].
========================================================== */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #FFFFFF; color: #0B1F3A; }
html[data-theme="light"] .flow-track { opacity: 0.2; }
html[data-theme="light"] .flow-energy { stroke: #3B8BFF; }
html[data-theme="light"] .flow-glow { stroke: #3B8BFF; opacity: 0.14; }
html[data-theme="light"] .flow-energy-b { stroke: #6A5CFF; opacity: 0.35; }
html[data-theme="light"] .flow-glow-b { stroke: #6A5CFF; opacity: 0.1; }
html[data-theme="light"] .flow-spark { stroke: #247CFF; opacity: 0.8; }
html[data-theme="light"] .flow-layer { opacity: 0.85; }
/* ---------- Navbar, mobile menu and toggles ---------- */
html[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.86); border-bottom-color: #DCE4F0; }
html[data-theme="light"] .navbar.scrolled { box-shadow: 0 10px 30px rgba(11, 31, 58, 0.08); }
html[data-theme="light"] .logo { color: #0B1F3A; }
html[data-theme="light"] .nav-pill { background: #F1F5FB; border-color: #DCE4F0; }
html[data-theme="light"] .nav-pill a { color: #334155; }
html[data-theme="light"] .nav-pill a:hover { color: #0B1F3A; }
html[data-theme="light"] .nav-pill a.active { color: #0B1F3A; background: #E3ECFA; }
html[data-theme="light"] .icon-btn { background: #F1F5FB; color: #0B1F3A; border-color: #DCE4F0; }
html[data-theme="light"] .lang-select { background-color: #F8FAFC; border-color: #DCE4F0; color: #0B1F3A; }
html[data-theme="light"] .mobile-menu { background: #FFFFFF; border-top-color: #DCE4F0; }
html[data-theme="light"] .mobile-menu a { color: #334155; border-bottom-color: #E6ECF5; }
html[data-theme="light"] .nav-pill .nav-drop-btn { color: #334155; }
html[data-theme="light"] .nav-pill .nav-drop-btn:hover { color: #0B1F3A; }
html[data-theme="light"] .nav-pill .nav-drop-btn.active,
html[data-theme="light"] .nav-drop.open > .nav-drop-btn { color: #0B1F3A; background: #E3ECFA; }
html[data-theme="light"] .nav-drop-menu { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 18px 40px rgba(11, 31, 58, 0.14); }
html[data-theme="light"] .nav-pill .nav-drop-menu a { color: #334155; }
html[data-theme="light"] .nav-pill .nav-drop-menu a:hover,
html[data-theme="light"] .nav-pill .nav-drop-menu a:focus-visible { color: #0B1F3A; background: #EEF4FF; }
html[data-theme="light"] .nav-pill .nav-drop-menu a.active { color: #1F5FD6; background: #E3ECFA; }
html[data-theme="light"] .mob-drop { border-bottom-color: #E6ECF5; }
html[data-theme="light"] .mob-drop-btn { color: #334155; }
html[data-theme="light"] .mob-drop-btn.active,
html[data-theme="light"] .mob-drop-btn[aria-expanded="true"] { color: #0B1F3A; }
html[data-theme="light"] .mobile-menu .mob-drop-list a { color: #334155; }
html[data-theme="light"] .mobile-menu .mob-drop-list a.active { color: #1F5FD6; }
/* ---------- Hero ---------- */
html[data-theme="light"] .hero-bold { background: linear-gradient(180deg, #F7FAFF 0%, #EDF3FF 100%); color: #0B1F3A; }
html[data-theme="light"] .hero-grid-pattern { background-image: radial-gradient(rgba(36, 124, 255, 0.14) 1px, transparent 1px); }
html[data-theme="light"] .hero-spark { fill: #247CFF; }
html[data-theme="light"] .hero-spark.s2, html[data-theme="light"] .hero-spark.s4 { fill: #247CFF; }
html[data-theme="light"] .hero-bold-title { color: #0B1F3A; }
html[data-theme="light"] .hb-text { color: #0B1F3A; }
html[data-theme="light"] .hero-bold-lead { color: #475569; }
html[data-theme="light"] .float-badge { background: rgba(255, 255, 255, 0.94); border-color: #DCE4F0; color: #0B1F3A; box-shadow: 0 10px 24px rgba(11, 31, 58, 0.12); }
html[data-theme="light"] .trust-pill { background: #FFFFFF; border-color: #DCE4F0; color: #0B1F3A; }
/* ---------- Section backgrounds ---------- */
html[data-theme="light"] #why-security,
html[data-theme="light"] #demos,
html[data-theme="light"] #packages,
html[data-theme="light"] #contact { background: #FFFFFF; color: #0B1F3A; border-top-color: #E6ECF5; }
html[data-theme="light"] #services,
html[data-theme="light"] #pricing,
html[data-theme="light"] #process { background: #F5F7FC; color: #0B1F3A; border-top-color: #E6ECF5; }
/* Section-name pills: white pill with readable navy text (orange/blue borders kept) */
html[data-theme="light"] :is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) .eyebrow.section-eyebrow { background: #FFFFFF; color: #0B1F3A; }
html[data-theme="light"] #pricing .eyebrow.price-pill { background: #FFF4EC; }
html[data-theme="light"] :is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) h2 { color: #0B1F3A; }
html[data-theme="light"] :is(#why-security, #services, #demos, #pricing, #packages, #process, #contact) h2 .heading-hl,
html[data-theme="light"] #pricing .price-head h2 .hl,
html[data-theme="light"] .process-highlight,
html[data-theme="light"] #contact .contact-highlight { color: #1769E0; }
/* ---------- Why Security Matters ---------- */
html[data-theme="light"] .why-head p { color: #475569; }
html[data-theme="light"] .why-card { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 10px 26px rgba(11, 31, 58, 0.07); }
html[data-theme="light"] .why-card-featured { box-shadow: 0 0 18px rgba(36, 124, 255, 0.12), 0 12px 30px rgba(11, 31, 58, 0.08); }
html[data-theme="light"] .why-card:hover { border-color: rgba(36, 124, 255, 0.35); }
html[data-theme="light"] .why-icon { background: rgba(36, 124, 255, 0.08); border-color: rgba(36, 124, 255, 0.2); color: #247CFF; }
html[data-theme="light"] .why-card h3 { color: #0B1F3A; }
html[data-theme="light"] .why-card p { color: #475569; }
html[data-theme="light"] .risk-list li, html[data-theme="light"] .fix-list li { color: #0B1F3A; }
html[data-theme="light"] .risk-list li::after, html[data-theme="light"] .fix-list li::after { border-color: #FFFFFF; }
/* ---------- Services ---------- */
html[data-theme="light"] .svc-head p { color: #475569; }
html[data-theme="light"] .svc-item { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 8px 22px rgba(11, 31, 58, 0.06); }
html[data-theme="light"] .svc-item:hover { border-color: rgba(36, 124, 255, 0.35); }
html[data-theme="light"] .svc-icon { background: rgba(36, 124, 255, 0.08); border-color: rgba(36, 124, 255, 0.18); color: #247CFF; }
html[data-theme="light"] .svc-title { color: #0B1F3A; }
html[data-theme="light"] .svc-desc { color: #475569; }
html[data-theme="light"] .svc-panel { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 10px 26px rgba(11, 31, 58, 0.07); }
html[data-theme="light"] .svc-panel h3 { color: #0B1F3A; }
html[data-theme="light"] .svc-panel p { color: #475569; }
/* ---------- Custom builds (demos) ---------- */
html[data-theme="light"] .demo-head p { color: #475569; }
html[data-theme="light"] .demo-head .eyebrow.demo-pill { background: #FFFFFF; color: #0B1F3A; }
html[data-theme="light"] .demo-card { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 12px 28px rgba(11, 31, 58, 0.08); }
html[data-theme="light"] .demo-card.reveal.visible:hover { border-color: rgba(36, 124, 255, 0.4); }
html[data-theme="light"] .demo-placeholder { background: linear-gradient(135deg, #EEF4FF, #E2ECFB); color: #475569; }
html[data-theme="light"] .demo-placeholder strong { color: #0B1F3A; }
html[data-theme="light"] .demo-placeholder code { color: #1769E0; background: rgba(36, 124, 255, 0.1); }
html[data-theme="light"] .demo-title { color: #0B1F3A; }
html[data-theme="light"] .demo-desc { color: #475569; }
html[data-theme="light"] .demo-btn { color: #1769E0; }
/* ---------- Pricing: why our price is higher ---------- */
html[data-theme="light"] .price-head .eyebrow.price-pill { background: #FFF4EC; color: #0B1F3A; }
html[data-theme="light"] .price-lead { color: #475569; }
html[data-theme="light"] .price-note { background: #FFFFFF; border-color: #DCE4F0; color: #334155; box-shadow: 0 10px 24px rgba(11, 31, 58, 0.06); }
html[data-theme="light"] .price-note strong { color: #E05F00; }
html[data-theme="light"] .compare { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 14px 34px rgba(11, 31, 58, 0.08); }
html[data-theme="light"] .compare-row { border-bottom-color: #E6ECF5; }
html[data-theme="light"] .compare-row > div { color: #0B1F3A; }
html[data-theme="light"] .compare-row > div + div { border-left-color: #E6ECF5; }
html[data-theme="light"] .compare-row.head { background: #F5F7FC; }
html[data-theme="light"] .compare-row.head > div { color: #0B1F3A; }
html[data-theme="light"] .compare-row.head > div:nth-child(2) { color: #475569; }
html[data-theme="light"] .compare-row.head > div:first-child { color: #64748B; }
html[data-theme="light"] .compare-row > .yes { background: #FFF4EC; }
html[data-theme="light"] .compare-row .no .mark { color: #94A3B8; }
/* ---------- Packages ---------- */
html[data-theme="light"] .pkg-head .eyebrow.pkg-pill { background: #FFFFFF; color: #0B1F3A; }
html[data-theme="light"] .pkg-head p { color: #475569; }
html[data-theme="light"] .pkg-card { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 12px 28px rgba(11, 31, 58, 0.07); }
html[data-theme="light"] .pkg-card.reveal.visible:hover { border-color: rgba(36, 124, 255, 0.35); }
html[data-theme="light"] .pkg-featured { background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 60%); }
html[data-theme="light"] .pkg-featured { box-shadow: 0 0 0 1px rgba(36, 124, 255, 0.12), 0 16px 40px rgba(36, 124, 255, 0.14); }
html[data-theme="light"] .pkg-icon { color: #247CFF; }
html[data-theme="light"] .pkg-name { color: #0B1F3A; }
html[data-theme="light"] .pkg-tag { color: #1769E0; }
html[data-theme="light"] .pkg-price { color: #0B1F3A; border-bottom-color: #DCE4F0; }
html[data-theme="light"] .pkg-price small { color: #64748B; }
html[data-theme="light"] .pkg-list li { color: #334155; }
html[data-theme="light"] .pkg-btn-outline { color: #1769E0; border-color: #247CFF; }
html[data-theme="light"] .pkg-btn-outline:hover { background: rgba(36, 124, 255, 0.08); }
html[data-theme="light"] .pkg-sub { color: #1769E0; }
html[data-theme="light"] .pkg-split { color: #475569; }
html[data-theme="light"] .pkg-renew { color: #0B1F3A; }
html[data-theme="light"] .pkg-more { border-top-color: #E6ECF5; }
html[data-theme="light"] .pkg-more summary { color: #334155; }
html[data-theme="light"] .pkg-not li { color: #64748B; }
html[data-theme="light"] .pkg-not li::before { background: #94A3B8; }
html[data-theme="light"] .pkg-scope { color: #64748B; }
html[data-theme="light"] .pkg-addons { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 12px 28px rgba(11, 31, 58, 0.07); }
html[data-theme="light"] .pkg-addons-head { border-right-color: #DCE4F0; }
html[data-theme="light"] .pkg-addons-head h3 { color: #0B1F3A; }
html[data-theme="light"] .pkg-addons-head p { color: #475569; }
html[data-theme="light"] .addon-list li { border-bottom-color: #E6ECF5; }
html[data-theme="light"] .addon-list li > span:not(.addon-ico) { color: #0B1F3A; }
html[data-theme="light"] .addon-list strong { color: #1769E0; }
html[data-theme="light"] .addon-ico { color: #247CFF; }
html[data-theme="light"] .pkg-note { color: #64748B; }
/* ---------- How it works ---------- */
html[data-theme="light"] .step-icon-card {
background:
linear-gradient(145deg, #FFFFFF 0%, #F4F8FF 100%) padding-box,
linear-gradient(135deg, #247CFF 0%, rgba(85, 125, 210, 0.45) 48%, #FF7108 100%) border-box;
box-shadow: -8px -5px 22px rgba(36, 124, 255, 0.12), 9px 10px 24px rgba(255, 113, 8, 0.12);
}
html[data-theme="light"] .step-num { box-shadow: 0 6px 18px rgba(36, 124, 255, 0.22); }
html[data-theme="light"] .step h3 { color: #0B1F3A; }
html[data-theme="light"] .step p { color: #475569; }
html[data-theme="light"] .proc-head .eyebrow.proc-pill { background: #FFFFFF; border-color: #DCE4F0; color: #0B1F3A; }
html[data-theme="light"] .proc-head p { color: #475569; }
/* ---------- Contact ---------- */
html[data-theme="light"] #contact .contact-lead { color: #475569; }
html[data-theme="light"] #contact .contact-title { color: #0B1F3A; }
html[data-theme="light"] #contact .eyebrow.contact-pill { background: #FFFFFF; border-color: #DCE4F0; color: #0B1F3A; }
html[data-theme="light"] #contact .contact-method { background: #FFFFFF; border-color: #DCE4F0; color: #0B1F3A; box-shadow: 0 10px 24px rgba(11, 31, 58, 0.06); }
html[data-theme="light"] #contact .contact-method:hover { border-color: rgba(36, 124, 255, 0.4); }
html[data-theme="light"] #contact .ico { background: rgba(36, 124, 255, 0.1); color: #247CFF; }
html[data-theme="light"] #contact .cm-text { border-left-color: #DCE4F0; }
html[data-theme="light"] #contact .cm-text small { color: #0B1F3A; }
html[data-theme="light"] #contact .cm-text strong { color: #475569; }
html[data-theme="light"] #contact .form-card { background: #FFFFFF; border-color: #DCE4F0; box-shadow: 0 20px 50px rgba(11, 31, 58, 0.08); color-scheme: light; }
html[data-theme="light"] #contact .addon-choices legend { color: #0B1F3A; }
html[data-theme="light"] #contact .field label { color: #0B1F3A; }
html[data-theme="light"] #contact .field input,
html[data-theme="light"] #contact .field select,
html[data-theme="light"] #contact .field textarea { background-color: #F8FAFC; color: #0B1F3A; border-color: #DCE4F0; }
html[data-theme="light"] #contact .field input::placeholder,
html[data-theme="light"] #contact .field textarea::placeholder { color: #94A3B8; }
html[data-theme="light"] #contact .field input:focus,
html[data-theme="light"] #contact .field select:focus,
html[data-theme="light"] #contact .field textarea:focus { border-color: #247CFF; }
html[data-theme="light"] #contact .field.invalid input,
html[data-theme="light"] #contact .field.invalid textarea { border-color: #E5484D; }
html[data-theme="light"] #contact .error-msg { color: #D92D20; }
html[data-theme="light"] #contact .check { color: #0B1F3A; }
html[data-theme="light"] #contact .check input { background: #FFFFFF; border-color: #94A3B8; }
html[data-theme="light"] #contact .form-status { color: #475569; }
html[data-theme="light"] #contact .form-status.ok { color: #15803D; }
html[data-theme="light"] #contact .form-status.err { color: #D92D20; }
html[data-theme="light"] #contact .form-note { color: #475569; }
html[data-theme="light"] #contact .note-shield { color: #475569; }
/* ---------- Footer ---------- */
html[data-theme="light"] footer { background: #EDF2FA; color: #475569; border-top-color: #DCE4F0; }
html[data-theme="light"] footer::before {
background-image:
linear-gradient(rgba(36, 124, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 124, 255, 0.07) 1px, transparent 1px);
}
html[data-theme="light"] footer .logo { color: #0B1F3A; }
html[data-theme="light"] footer .footer-tagline { color: #475569; }
html[data-theme="light"] footer .socials a { background: #FFFFFF; border-color: #DCE4F0; color: #334155; }
html[data-theme="light"] footer .socials a:hover { color: #1769E0; border-color: #247CFF; background: rgba(36, 124, 255, 0.1); }
html[data-theme="light"] footer h4 { color: #0B1F3A; }
html[data-theme="light"] footer ul a { color: #334155; }
html[data-theme="light"] footer ul a:hover { color: #1769E0; }
html[data-theme="light"] footer .copyright { border-top-color: #DCE4F0; color: #64748B; }
html[data-theme="light"] .copyright { border-top-color: #DCE4F0; }
/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
html[data-theme="light"] .flow-layer { opacity: 0.85; }
}
/* Light-mode fixes: featured Why Security card and white step icons */
html[data-theme="light"] .why-card-featured { background: linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 70%); border-color: #247CFF; }
html[data-theme="light"] .why-card-featured h3 { color: #0B1F3A; }
html[data-theme="light"] .why-card-featured p { color: #475569; }
html[data-theme="light"] .step-icon { color: #0B1F3A; }
/* How it works, light mode: white outline strokes become navy; orange accents and blue arrows are untouched */
html[data-theme="light"] #process .step-icon [stroke="#FFFFFF"] { stroke: #0B1F3A; }
html[data-theme="light"] #process > .container::before {
background-image:
linear-gradient(rgba(36, 124, 255, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(36, 124, 255, 0.15) 1px, transparent 1px);
}
/* Featured Why Security card: light background with the warm orange glow kept softly */
html[data-theme="light"] #why-security .why-card.why-card-featured {
background:
radial-gradient(ellipse 140% 120% at 85% 90%, rgba(255, 113, 8, 0.08) 0%, rgba(255, 113, 8, 0.03) 55%, rgba(255, 113, 8, 0) 100%),
linear-gradient(180deg, #EEF5FF 0%, #FFFFFF 70%);
}
/* Pricing: orange Managed column header in light mode */
html[data-theme="light"] .compare-row.head .ours { background: linear-gradient(135deg, #FF7108, #FF8508); }
html[data-theme="light"] .compare-row.head .ours,
html[data-theme="light"] .compare-row.head .ours * { color: #FFFFFF; }
/* ---------- Package features: accordion, hosting note, notes (pricing values unchanged) ---------- */
#packages .pkg-card { display: flex; flex-direction: column; }
#packages .pkg-card > .pkg-btn { margin-top: auto; }
#packages .pkg-more { margin: 0 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#packages .pkg-more-btn {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
padding: 16px 0; margin: 0; background: none; border: 0; cursor: pointer; text-align: left;
font-family: inherit; font-size: 14px; font-weight: 600; color: #B0B9CE; line-height: 1.4;
}
#packages .pkg-more-btn:focus-visible { outline: 3px solid rgba(127, 155, 255, 0.6); outline-offset: 2px; border-radius: 4px; }
#packages .pkg-toggle { position: relative; width: 14px; height: 14px; flex: none; }
#packages .pkg-toggle::before, #packages .pkg-toggle::after { content: ""; position: absolute; background: #5B9DFF; border-radius: 2px; }
#packages .pkg-toggle::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
#packages .pkg-toggle::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); transition: transform 0.3s ease; }
#packages .pkg-more-btn[aria-expanded="true"] .pkg-toggle::after { transform: translateX(-50%) scaleY(0); }
#packages .pkg-more-panel {
display: grid; grid-template-rows: 0fr; visibility: hidden;
transition: grid-template-rows 0.35s ease, visibility 0.35s ease;
}
#packages .pkg-more-btn[aria-expanded="true"] + .pkg-more-panel { grid-template-rows: 1fr; visibility: visible; }
#packages .pkg-more-inner { min-height: 0; overflow: hidden; }
#packages .pkg-not { list-style: none; display: grid; gap: 10px; padding: 2px 0 16px; }
#packages .pkg-not li { position: relative; padding-left: 22px; color: #8D9AB3; font-size: 14px; line-height: 1.5; }
#packages .pkg-not li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 10px; height: 2px; border-radius: 2px; background: #8D9AB3; }
#packages .pkg-hostnote { margin: 0 0 22px; color: #8D9AB3; font-size: 13.5px; line-height: 1.5; }
#packages .pkg-notes { max-width: 1000px; margin: 26px auto 0; text-align: center; }
#packages .pkg-notes .pkg-scope { margin: 0; color: #8D9AB3; font-size: 14px; line-height: 1.6; }
#packages .pkg-notes .pkg-scope + .pkg-scope { margin-top: 10px; }
#packages .pkg-list { margin-bottom: 26px; }
@media (prefers-reduced-motion: reduce) {
#packages .pkg-more-panel, #packages .pkg-toggle::after { transition: none; }
}
html[data-theme="light"] #packages .pkg-more { border-top-color: #E6ECF5; }
html[data-theme="light"] #packages .pkg-more-btn { color: #334155; }
html[data-theme="light"] #packages .pkg-toggle::before, html[data-theme="light"] #packages .pkg-toggle::after { background: #1769E0; }
html[data-theme="light"] #packages .pkg-not li, html[data-theme="light"] #packages .pkg-hostnote, html[data-theme="light"] #packages .pkg-notes .pkg-scope { color: #64748B; }
html[data-theme="light"] #packages .pkg-not li::before { background: #94A3B8; }
@media (max-width: 600px) {
#packages .pkg-more-btn { font-size: 13.5px; padding: 14px 0; }
#packages .pkg-hostnote { font-size: 13px; }
#packages .pkg-notes .pkg-scope { font-size: 13px; }
}
#packages .pkg-list { align-content: start; }
/* Basic package note and AI-assisted design block */
.pkg-best { margin: 0 0 18px; color: #8D9AB3; font-size: 14.5px; font-style: italic; line-height: 1.55; }
html[data-theme="light"] .pkg-best { color: #64748B; }
/* AI-Assisted Creativity panel: inside Services, below the service cards */
.ai-block {
position: relative; display: flex; align-items: center; gap: 22px;
margin-top: 26px; padding: 28px 30px; border-radius: 19px;
background:
radial-gradient(ellipse at 0% 50%, rgba(19, 156, 255, 0.14), transparent 60%),
radial-gradient(ellipse at 100% 50%, rgba(139, 92, 246, 0.13), transparent 60%),
linear-gradient(145deg, rgba(27, 39, 70, 0.95), rgba(19, 29, 54, 0.95));
border: 1px solid rgba(91, 157, 255, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.ai-icon {
width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
background: rgba(19, 156, 255, 0.14); border: 1px solid rgba(19, 156, 255, 0.3); color: #139CFF;
}
.ai-icon svg { width: 28px; height: 28px; display: block; }
.ai-text { min-width: 0; }
.ai-block h3 { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 10px; }
.ai-block h3 .ai-hl { color: #139CFF; }
.ai-block p { color: #B0B9CE; font-size: 15.5px; line-height: 1.6; margin: 0; }
@media (max-width: 600px) {
.ai-block { gap: 14px; padding: 20px 18px; }
.ai-icon { width: 46px; height: 46px; border-radius: 13px; }
.ai-icon svg { width: 23px; height: 23px; }
.ai-block h3 { font-size: 19px; margin-bottom: 8px; }
.ai-block p { font-size: 14.5px; }
}
@media (max-width: 480px) {
.ai-block { flex-direction: column; align-items: flex-start; }
}
html[data-theme="light"] .ai-block {
background:
radial-gradient(ellipse at 0% 50%, rgba(19, 156, 255, 0.10), transparent 60%),
radial-gradient(ellipse at 100% 50%, rgba(139, 92, 246, 0.08), transparent 60%),
#FFFFFF;
border-color: #C9D6EA; box-shadow: 0 10px 26px rgba(11, 31, 58, 0.07);
}
html[data-theme="light"] .ai-block h3 { color: #0B1F3A; }
html[data-theme="light"] .ai-block p { color: #475569; }
html[data-theme="light"] .ai-icon { background: rgba(19, 156, 255, 0.1); border-color: rgba(19, 156, 255, 0.25); }
/* Contact status: link to WhatsApp shown when a send fails */
#contact .form-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Homepage policy notes, contact policy line and Policies footer column */
.pkg-policy { max-width: 760px; margin: 14px auto 0; text-align: center; color: #A4ABBE; font-size: 14.5px; line-height: 1.6; }
.pkg-policy-link { text-align: center; margin: 8px 0 0; }
.pkg-policy-link a { color: #8FC4FF; font-weight: 600; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.form-policy { margin: 12px 0 0; color: #8D9AB3; font-size: 13.5px; line-height: 1.6; }
.form-policy a { color: #8FC4FF; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1025px) { footer .footer-grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); } }
html[data-theme="light"] .pkg-policy, html[data-theme="light"] .form-policy { color: #475569; }
html[data-theme="light"] .pkg-policy-link a, html[data-theme="light"] .form-policy a { color: #1769E0; }
/* ==========================================================
CURRENCY (LKR / USD)
Navbar selector on wide screens; inside the mobile menu below 1400px.
The navbar switches to the hamburger menu below 1400px so the logo, links
and currency control never crowd each other.
========================================================== */
.currency-select { min-width: 0; padding-right: 26px; }
.logo { flex-shrink: 0; }
.logo > span:last-child { white-space: nowrap; }
@media (min-width: 1400px) and (max-width: 1499px) {
.nav-pill a { padding: 9px 11px; }
.nav-inner { gap: 12px; }
}
.currency-desk { width: 84px; padding-right: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone and tablet menu: currency, language and theme share one evenly spaced row */
.mob-utility {
display: none; align-items: center; gap: 8px;
margin-top: 10px; padding: 16px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mob-utility .lang-select { height: 40px; min-width: 0; font-size: 0.85rem; padding: 0 28px 0 14px; background-position: right 10px center; }
.mob-utility .mob-util-currency { flex: 0 0 96px; width: 96px; padding: 0 26px 0 12px; }
.mob-utility .mob-util-lang { flex: 1 1 0; }
/* Mobile header theme toggle: hidden by default, shown in the hamburger range (same button as desktop) */
.mob-header-theme { display: none; }
.lang-select:focus-visible,
.icon-btn:focus-visible { outline: 2px solid #4C9BFF; outline-offset: 2px; }
@media (max-width: 1399px) {
.nav-links { display: none; }
.menu-toggle { display: grid; }
.currency-desk, .nav-util-desk { display: none; }
.mob-utility { display: flex; }
.mob-header-theme { display: grid; }
}
/* Estimate notice (shown only when USD is selected) */
.fx-note {
margin: 16px auto; max-width: 760px; padding: 12px 16px; border-radius: 12px;
font-size: 0.9rem; line-height: 1.55; text-align: left; color: var(--text);
background: rgba(36, 124, 255, 0.08); border: 1px solid rgba(36, 124, 255, 0.3);
}
.fx-note.warn { background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.4); }
.fx-note a { color: var(--accent); }
.fx-est { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); min-height: 1.5em; }
html[data-theme="light"] .mob-utility { border-top-color: #E6ECF5; }
/* Price amounts never break across lines (e.g. $1,099 or LKR 175,000) */
.amt { white-space: nowrap; }
/* ==========================================================
CLIENT REVIEWS (homepage section and "Leave a Review" dialog)
Uses the theme variables, so Dark and Light Mode both work.
========================================================== */
#reviews { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 72px 0 84px; }
.rv-container { width: min(1180px, 100%); }
.rv-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.rv-head h2 { color: var(--text); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0 12px; }
.rv-head p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; margin-bottom: 26px; }
.rv-open { min-width: 220px; }
.rv-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.rv-card {
display: flex; flex-direction: column; gap: 14px;
width: min(100%, 520px); padding: 26px 28px;
background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.rv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-stars { color: var(--cta); font-size: 20px; letter-spacing: 2px; line-height: 1; }
.rv-badge {
font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px;
color: var(--accent); background: rgba(47, 111, 237, 0.12); border: 1px solid rgba(47, 111, 237, 0.35);
}
.rv-text { color: var(--text); font-size: 16px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.rv-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 14px; }
.rv-who strong { color: var(--text); font-weight: 700; }
.rv-more { display: block; margin: 30px auto 0; min-width: 220px; }
.rv-more[hidden] { display: none; }
.rv-more[disabled] { opacity: 0.6; cursor: wait; }
/* Dialog */
.rv-dialog {
width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
margin: auto; padding: 0; overflow: auto;
background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.rv-dialog::backdrop { background: rgba(5, 10, 20, 0.6); }
.rv-form { padding: 26px 26px 24px; }
.rv-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rv-dialog-head h3 { color: var(--text); font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0; }
.rv-close {
flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border);
background: transparent; color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
}
.rv-close:hover { border-color: var(--accent); color: var(--accent); }
.rv-lead { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.rv-notice {
margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; font-size: 15px; line-height: 1.5;
color: var(--text); background: rgba(245, 166, 35, 0.14); border: 1px solid rgba(245, 166, 35, 0.45);
}
.rv-notice[hidden] { display: none; }
.rv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rv-field label, .rv-consent label { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; }
.rv-field input, .rv-field select, .rv-field textarea {
width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
background: var(--bg); color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.4;
}
.rv-field textarea { resize: vertical; min-height: 120px; }
.rv-field input:focus-visible, .rv-field select:focus-visible, .rv-field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rv-field [aria-invalid="true"] { border-color: #D64545; }
.rv-err { color: #C62828; font-size: 13px; line-height: 1.4; min-height: 0; }
.rv-err:empty { display: none; }
/* Honeypot: off-screen for people, but still in the form for bots */
.rv-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rv-consent { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; }
.rv-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.rv-consent label { font-weight: 500; color: var(--muted); }
.rv-consent a { color: var(--accent); text-decoration: underline; }
.rv-turnstile { margin: 14px 0 6px; min-height: 65px; overflow: hidden; }
.rv-turnstile[hidden] { display: none; }
.rv-actions { margin-top: 14px; }
.rv-actions .btn { width: 100%; }
.rv-actions .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.rv-status { margin: 14px 0 0; font-size: 15px; line-height: 1.5; min-height: 0; }
.rv-status:empty { display: none; }
.rv-status.ok { color: #1E7B45; font-weight: 600; }
.rv-status.err { color: #C62828; }
html[data-theme="dark"] .rv-status.ok { color: #6EE7A0; }
html[data-theme="dark"] .rv-status.err { color: #FF8A80; }
html[data-theme="dark"] .rv-err { color: #FF8A80; }
html[data-theme="dark"] .rv-field [aria-invalid="true"] { border-color: #FF8A80; }
@media (max-width: 600px) {
#reviews { padding: 52px 0 60px; }
.rv-container { padding-inline: 16px; }
.rv-head { margin-bottom: 28px; }
.rv-open, .rv-more { min-width: 0; width: 100%; }
.rv-card { padding: 22px 20px; }
.rv-form { padding: 22px 18px 20px; }
.rv-dialog { width: calc(100% - 24px); }
}