/* ==========================================================================
   FISSS 2.2 — premium visual layer
   Pure CSS + inline SVG patterns (no images, no libraries). Every animation is
   wrapped in prefers-reduced-motion: no-preference. Works for LTR and RTL.
   ========================================================================== */
:root {
	--p-grad: linear-gradient(135deg, #123D6B 0%, #2F6CA3 100%);
	--p-grad-red: linear-gradient(135deg, #C94A0C 0%, #F26A21 100%);
	--p-ring: linear-gradient(135deg, rgba(47, 108, 163, .55), rgba(201, 74, 12, .45));
	--p-dots: radial-gradient(rgba(18, 61, 107, .13) 1.1px, transparent 1.6px);
	--p-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%239CC5F0' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 40h40l20 20h40l20-20h40M0 120h30l20-20h60l20 20h30M40 0v20l20 20M120 160v-20l-20-20'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='100' cy='60' r='3'/%3E%3Ccircle cx='50' cy='100' r='3'/%3E%3Ccircle cx='110' cy='100' r='3'/%3E%3C/svg%3E");
}

/* ---------- section surfaces: depth instead of flat white ---------- */
.elementor-section.fisss-sec { position: relative; isolation: isolate; overflow-x: clip; }
.elementor-section.fisss-sec:not(.fisss-sec--hero):not(.fisss-sec-slider):not(.fisss-sec--crumbs)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--p-dots); background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 55% 60% at 100% 0%, #000 0%, transparent 70%);
}
[dir="rtl"] .elementor-section.fisss-sec:not(.fisss-sec--hero):not(.fisss-sec-slider)::before {
	-webkit-mask-image: radial-gradient(ellipse 55% 60% at 0% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse 55% 60% at 0% 0%, #000 0%, transparent 70%);
}
.fisss-sec--light { background: linear-gradient(180deg, #F4F7FB 0%, #EEF3F9 100%) !important; }
.fisss-sec--light.fisss-sec--row, .fisss-sec--light.fisss-sec--head { background: #F1F5FA !important; }
.fisss-sec--navy, .fisss-sec--cta { background-color: #0B2747 !important; background-image: var(--p-circuit), radial-gradient(900px 420px at 85% -10%, rgba(47, 108, 163, .55), transparent 60%), radial-gradient(700px 380px at 0% 110%, rgba(201, 74, 12, .28), transparent 60%) !important; background-size: 160px 160px, auto, auto !important; }
.fisss-sec--navy::before, .fisss-sec--cta::before { display: none; }
.fisss-sec--cta .fisss-lead, .fisss-sec--cta .fisss-lead p, .fisss-sec--cta p { color: #C9D7E6; }
.fisss-sec--cta .elementor-heading-title { color: #fff !important; }

/* floating line-art spot illustration in the corner of key sections */
.fisss-sec--cols::after, .fisss-sec--split::after, .fisss-sec--faq::after, .fisss-sec--cta::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; width: 220px; height: 220px; top: 28px; inset-inline-end: 2%;
	background: no-repeat center / contain; opacity: .9;
}
.fisss-sec--cols::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%232F6CA3' stroke-opacity='.14' stroke-width='2'%3E%3Crect x='14' y='22' width='92' height='70' rx='6'/%3E%3Cpath d='M14 40h92M32 22v70M52 58h40M52 72h28'/%3E%3Ccircle cx='96' cy='96' r='16'/%3E%3Cpath d='m90 96 4 4 8-8'/%3E%3C/svg%3E"); }
.fisss-sec--split::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23123D6B' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M14 34V18h16M90 18h16v16M106 86v16H90M30 102H14V86'/%3E%3Crect x='34' y='44' width='44' height='26' rx='5'/%3E%3Cpath d='m78 52 14-8v26l-14-8'/%3E%3Ccircle cx='50' cy='57' r='6'/%3E%3C/svg%3E"); top: auto; bottom: 18px; }
.fisss-sec--faq::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23BC2E31' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M20 26h60a8 8 0 0 1 8 8v30a8 8 0 0 1-8 8H46L30 86V72H20a8 8 0 0 1-8-8V34a8 8 0 0 1 8-8z'/%3E%3Cpath d='M42 42a8 8 0 1 1 10 8v6M52 64v1'/%3E%3Cpath d='M92 50h8a8 8 0 0 1 8 8v24a8 8 0 0 1-8 8h-6v12L80 90H62'/%3E%3C/svg%3E"); }
.fisss-sec--cta::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%239CC5F0' stroke-opacity='.25' stroke-width='1.5'%3E%3Ccircle cx='60' cy='60' r='54'/%3E%3Ccircle cx='60' cy='60' r='38'/%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Cpath d='M60 6v108M6 60h108'/%3E%3Cpath d='M60 60 98 22' stroke-opacity='.6' stroke-width='2.5'/%3E%3C/svg%3E"); width: 300px; height: 300px; top: 50%; margin-top: -150px; inset-inline-end: -40px; }
@media (max-width: 900px) { .fisss-sec--cols::after, .fisss-sec--split::after, .fisss-sec--faq::after { width: 120px; height: 120px; opacity: .6; } .fisss-sec--cta::after { width: 200px; height: 200px; margin-top: -100px; } }

/* ---------- page hero: light beams and drifting particles ---------- */
.fisss-sec--hero { overflow: hidden; }
.fisss-sec--hero::before {
	content: ""; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
	background: conic-gradient(from 200deg at 78% 30%, transparent 0deg, rgba(156, 197, 240, .16) 18deg, transparent 40deg, rgba(174, 139, 44, .12) 70deg, transparent 95deg);
}
.fisss-sec--hero::after {
	content: ""; position: absolute; inset: -200px 0 0 0; z-index: 0; pointer-events: none; opacity: .55;
	background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.6px), radial-gradient(rgba(156, 197, 240, .5) 1px, transparent 1.6px);
	background-size: 90px 90px, 140px 140px; background-position: 0 0, 40px 60px;
}
.fisss-sec--hero > .elementor-container { position: relative; z-index: 1; }
.fisss-sec--hero .fisss-hero-img { position: relative; }
.fisss-sec--hero .fisss-hero-img::before { content: ""; position: absolute; inset: 8% -6% -6% 8%; border-radius: 22px; background: var(--p-ring); filter: blur(28px); opacity: .55; z-index: -1; }

/* ---------- headings ---------- */
.fisss-h-section .elementor-heading-title .fx-hl, .fisss-h-display .elementor-heading-title .fx-hl, .fisss-hero__title .fx-hl {
	background: linear-gradient(90deg, #2F6CA3, #123D6B); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fisss-sec--navy .fx-hl, .fisss-sec--cta .fx-hl, .fisss-sec--hero .fx-hl, .fisss-hero__title .fx-hl { background-image: linear-gradient(90deg, #FFB04D, #F26A21) !important; }
.fisss-h-eyebrow .elementor-heading-title, .fisss-eyebrow { background: rgba(201, 74, 12, .07); padding: 6px 12px 6px 10px; border-radius: 999px; }
.fisss-sec--navy .fisss-h-eyebrow .elementor-heading-title, .fisss-sec--hero .fisss-h-eyebrow .elementor-heading-title, .fisss-eyebrow--light { background: rgba(255, 255, 255, .08); }

/* ---------- cards: gradient ring, icon tile, accent bar ---------- */
.elementor-widget.fisss-icard {
	border: 1px solid transparent !important; border-radius: 16px !important; overflow: hidden; position: relative;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #DCE5EF, #EEF2F6) border-box !important;
}
.elementor-widget.fisss-icard::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--p-grad-red); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
[dir="rtl"] .elementor-widget.fisss-icard::after { transform-origin: right; }
.elementor-widget.fisss-icard:hover { background: linear-gradient(#fff, #fff) padding-box, var(--p-ring) border-box !important; }
.elementor-widget.fisss-icard:hover::after { transform: scaleX(1); }
.fisss-icard .elementor-icon { background: var(--p-grad) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(18, 61, 107, .25); border-radius: 14px !important; }
.fisss-sec--navy .elementor-widget.fisss-icard { background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.03)) padding-box, linear-gradient(135deg, rgba(156,197,240,.35), rgba(255,255,255,.06)) border-box !important; backdrop-filter: blur(6px); }
.fisss-sec--navy .elementor-widget.fisss-icard:hover { background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.05)) padding-box, var(--p-ring) border-box !important; }
.fisss-sec--navy .fisss-icard .elementor-icon { background: var(--p-grad-red) !important; }

/* ---------- section images: CCTV viewfinder corners + glow ---------- */
.elementor-widget.fisss-sec-img, .elementor-widget.fisss-hero-img { position: relative; }
.elementor-widget.fisss-sec-img::before, .elementor-widget.fisss-sec-img::after {
	content: ""; position: absolute; width: 34px; height: 34px; z-index: 2; pointer-events: none; border-color: var(--f-red); border-style: solid; border-width: 0;
}
.elementor-widget.fisss-sec-img::before { top: -10px; inset-inline-start: -10px; border-top-width: 3px; border-inline-start-width: 3px; border-start-start-radius: 8px; }
.elementor-widget.fisss-sec-img::after { bottom: -10px; inset-inline-end: -10px; border-bottom-width: 3px; border-inline-end-width: 3px; border-end-end-radius: 8px; }
.fisss-sec-img img { box-shadow: 0 30px 60px -20px rgba(10, 30, 54, .35), 0 0 0 1px rgba(18, 61, 107, .06) !important; }

/* ---------- lists: tinted check badges ---------- */
.fisss-checks .elementor-icon-list-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: rgba(201, 74, 12, .09); display: inline-flex !important; align-items: center; justify-content: center; margin-inline-end: 10px; }
.fisss-checks .elementor-icon-list-icon svg, .fisss-checks .elementor-icon-list-icon i { width: 12px !important; height: 12px !important; font-size: 12px !important; }
.fisss-checks--links .elementor-icon-list-icon { background: rgba(47, 108, 163, .10); }
.fisss-sec--navy .fisss-checks .elementor-icon-list-icon { background: rgba(255, 255, 255, .10); }

/* ---------- specs table and FAQ ---------- */
.fisss-specs { border-radius: 14px; overflow: hidden; box-shadow: var(--f-shadow); }
.fisss-specs tr:nth-child(even) th, .fisss-specs tr:nth-child(even) td { background: #F6F9FC; }
.fisss-specs tr { transition: background-color .2s; }
.fisss-specs tr:hover th, .fisss-specs tr:hover td { background: #EEF4FB; }
.fisss-faq .elementor-tab-title { transition: background-color .2s, box-shadow .2s; border-radius: 12px; }
.fisss-faq .elementor-tab-title.elementor-active, .fisss-faq .e-n-accordion-item[open] > summary { box-shadow: inset 4px 0 0 var(--f-red); background: #FBF5F5; }
[dir="rtl"] .fisss-faq .elementor-tab-title.elementor-active { box-shadow: inset -4px 0 0 var(--f-red); }

/* ---------- stats band ---------- */
.fisss-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fisss-stat { position: relative; padding: 26px 22px; border-radius: 18px; background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.03)) padding-box, linear-gradient(135deg, rgba(156,197,240,.4), rgba(255,255,255,.05)) border-box; border: 1px solid transparent; color: #fff; overflow: hidden; }
.fisss-stat svg { width: 40px; height: 40px; display: block; margin-bottom: 14px; }
.fisss-stat__num { display: block; font-size: clamp(34px, 4vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.02em; background: linear-gradient(90deg, #FFFFFF, #9CC5F0); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; }
[dir="rtl"] .fisss-stat__num { text-align: right; }
.fisss-stat__label { display: block; margin-top: 8px; color: #C9D7E6; font-size: 15.5px; line-height: 1.45; }
@media (max-width: 900px) { .fisss-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- footer ---------- */
.fisss-footer { position: relative; }
.fisss-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, #123D6B, #2F6CA3 40%, #AE8B2C 70%, #C94A0C); }

/* ==========================================================================
   Motion (skipped entirely for reduced motion)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.fisss-sec--hero::before { animation: p-beam 14s ease-in-out infinite alternate; }
	.fisss-sec--hero::after { animation: p-drift 40s linear infinite; }
	@keyframes p-beam { from { transform: rotate(-4deg) translateX(-2%); } to { transform: rotate(4deg) translateX(2%); } }
	@keyframes p-drift { to { transform: translateY(180px); } }
	.fisss-sec--cols::after, .fisss-sec--split::after, .fisss-sec--faq::after { animation: p-float 9s ease-in-out infinite alternate; }
	.fisss-sec--cta::after { animation: p-spin 24s linear infinite; }
	@keyframes p-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(3deg); } }
	@keyframes p-spin { to { transform: rotate(360deg); } }
	/* viewfinder corners close in when the image appears */
	.fx-on .fx-reveal.fisss-sec-img::before { transform: translate(-14px, -14px); opacity: 0; transition: transform .7s ease .2s, opacity .7s ease .2s; }
	.fx-on .fx-reveal.fisss-sec-img::after { transform: translate(14px, 14px); opacity: 0; transition: transform .7s ease .2s, opacity .7s ease .2s; }
	.fx-on .fx-reveal.fx-in.fisss-sec-img::before, .fx-on .fx-reveal.fx-in.fisss-sec-img::after { transform: none; opacity: 1; }
	/* headline words rise one after another */
	.fx-on .fx-word { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--w, 0) * 55ms + 80ms); }
	.fx-on .fx-in .fx-word { opacity: 1; transform: none; }
	/* list items cascade, icons pop */
	.fx-on .fx-reveal .elementor-icon-list-item { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
	[dir="rtl"] .fx-on .fx-reveal .elementor-icon-list-item { transform: translateX(10px); }
	.fx-on .fx-reveal.fx-in .elementor-icon-list-item { opacity: 1; transform: none; }
	.fx-on .fx-reveal .elementor-icon-list-icon { transform: scale(.4); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
	.fx-on .fx-reveal.fx-in .elementor-icon-list-icon { transform: none; }
	/* stats: icons draw themselves */
	.fisss-stat svg path, .fisss-stat svg circle, .fisss-stat svg rect { stroke-dasharray: 240; stroke-dashoffset: 240; transition: stroke-dashoffset 1.6s ease .2s; }
	.fx-in .fisss-stat svg path, .fx-in .fisss-stat svg circle, .fx-in .fisss-stat svg rect { stroke-dashoffset: 0; }
	.fisss-stat { transition: transform .3s ease, box-shadow .3s ease; }
	.fisss-stat:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
}