/* ============================================================ FSI DEFENCE SECURITY Global Website Design System Operated by Frank System Inc. ============================================================ */:root { --primary: #2563eb; --primary-dark: #1d4ed8; --primary-light: #eff6ff; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --text: #172033; --text-light: #5f6b7a; --text-muted: #7b8794; --white: #ffffff; --background: #f7f9fc; --surface: #ffffff; --border: #e5eaf0; --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05); --shadow-md: 0 12px 35px rgba(15, 23, 42, 0.08); --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --container: 1180px; --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}/* ============================================================ RESET ============================================================ */*,*::before,*::after { box-sizing: border-box;}html { scroll-behavior: smooth;}body { margin: 0; padding: 0; background: var(--background); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}img { max-width: 100%; height: auto; display: block;}a { color: inherit; text-decoration: none;}button,input,select,textarea { font: inherit;}button { cursor: pointer;}/* ============================================================ TYPOGRAPHY ============================================================ */h1,h2,h3,h4,h5,h6 { margin: 0 0 18px; color: var(--text); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;}h1 { font-size: clamp(42px, 5vw, 64px);}h2 { font-size: clamp(32px, 4vw, 46px);}h3 { font-size: 24px;}h4 { font-size: 19px;}p { margin: 0 0 18px; color: var(--text-light);}.text-center { text-align: center;}.text-muted { color: var(--text-muted);}.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;}.section-title { max-width: 760px; margin: 0 auto 16px; text-align: center;}.section-description { max-width: 700px; margin: 0 auto; text-align: center; font-size: 17px;}/* ============================================================ LAYOUT ============================================================ */.container { width: min( calc(100% - 40px), var(--container) ); margin: 0 auto;}.section { padding: 90px 0;}.section-sm { padding: 60px 0;}.grid { display: grid; gap: 24px;}.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr));}.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr));}.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr));}/* ============================================================ TOP SECURITY BAR ============================================================ */.security-bar { background: #0f172a; color: #ffffff; min-height: 38px; display: flex; align-items: center;}.security-bar .container { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;}.security-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);}/* ============================================================ HEADER / NAVIGATION ============================================================ */.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px);}.navbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px;}.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em;}.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient( 135deg, var(--primary), #60a5fa ); color: #ffffff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);}.brand-text { display: flex; flex-direction: column; line-height: 1.1;}.brand-name { color: var(--text);}.brand-company { margin-top: 4px; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: 0.02em;}.nav-links { display: flex; align-items: center; gap: 26px;}.nav-links a { color: #475569; font-size: 14px; font-weight: 600; transition: color 0.2s ease;}.nav-links a:hover,.nav-links a.active { color: var(--primary);}.nav-actions { display: flex; align-items: center; gap: 12px;}/* ============================================================ BUTTONS ============================================================ */.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;}.btn:hover { transform: translateY(-1px);}.btn-primary { background: var(--primary); color: #ffffff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.20);}.btn-primary:hover { background: var(--primary-dark);}.btn-secondary { background: #ffffff; color: var(--text); border-color: var(--border);}.btn-secondary:hover { border-color: #cbd5e1; box-shadow: var(--shadow-sm);}.btn-success { background: var(--success); color: #ffffff;}.btn-danger { background: var(--danger); color: #ffffff;}.btn-large { min-height: 54px; padding: 0 26px; font-size: 15px;}.btn-block { width: 100%;}.btn-full { width: 100%;}/* ============================================================ HERO ============================================================ */.hero { position: relative; overflow: hidden; padding: 110px 0 100px; background: radial-gradient( circle at 80% 15%, rgba(37, 99, 235, 0.10), transparent 35% ), linear-gradient( 180deg, #ffffff 0%, #f7faff 100% );}.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); align-items: center; gap: 70px;}.hero-content { max-width: 700px;}.hero h1 { margin-bottom: 24px;}.hero h1 span { color: var(--primary);}.hero-description { max-width: 650px; margin-bottom: 30px; font-size: 18px; line-height: 1.75;}.hero-actions { display: flex; flex-wrap: wrap; gap: 12px;}.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--text-muted); font-size: 13px; font-weight: 600;}.hero-trust-item { display: inline-flex; align-items: center; gap: 7px;}/* ============================================================ SECURITY VISUAL ============================================================ */.security-card { position: relative; padding: 28px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);}.security-card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border);}.security-card-title { margin: 0; font-size: 16px; font-weight: 700;}.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: 12px; font-weight: 700;}.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;}.security-score { display: flex; align-items: center; gap: 22px; margin-bottom: 24px;}.score-circle { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient( var(--primary) 0deg, var(--primary) 345deg, #e8edf4 345deg, #e8edf4 360deg ); position: relative;}.score-circle::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #ffffff;}.score-number { position: relative; z-index: 1; font-size: 23px; font-weight: 800;}.security-checks { display: grid; gap: 12px;}.security-check { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f8fafc; border-radius: 10px; font-size: 13px; font-weight: 600;}.check-success { color: var(--success);}/* ============================================================ TRUST STRIP ============================================================ */.trust-strip { padding: 24px 0; background: #ffffff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}.trust-strip-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 35px;}.trust-item { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 13px; font-weight: 700;}/* ============================================================ CARDS ============================================================ */.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}.card-body { padding: 28px;}.feature-card { height: 100%; padding: 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}.feature-card:hover { transform: translateY(-4px); border-color: #cbd5e1; box-shadow: var(--shadow-md);}.feature-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 14px; background: var(--primary-light); color: var(--primary); font-size: 22px;}.feature-card h3 { margin-bottom: 10px; font-size: 20px;}.feature-card p { margin-bottom: 0; font-size: 14px;}/* ============================================================ PRICING ============================================================ */.pricing-section { background: #ffffff;}.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 24px;}.pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0; background: #ffffff; border: 1px solid #e3e8ef; border-radius: 22px; box-shadow: 0 6px 22px rgba(15, 23, 42, 0.055); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;}.pricing-card:hover { transform: translateY(-5px); border-color: #cbd5e1; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.11);}.pricing-card.popular { border-color: var(--primary); box-shadow: 0 20px 48px rgba(37, 99, 235, 0.14);}.pricing-card.popular:hover { box-shadow: 0 24px 55px rgba(37, 99, 235, 0.18);}/* ============================================================ PRICING PLAN VISUAL ============================================================ */.plan-visual { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(148, 163, 184, 0.14);}.plan-visual::before,.plan-visual::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none;}.plan-visual::before { width: 180px; height: 180px; top: -95px; right: -55px; background: radial-gradient( circle, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0) );}.plan-visual::after { width: 150px; height: 150px; bottom: -90px; left: -45px; background: radial-gradient( circle, rgba(96, 165, 250, 0.09), rgba(96, 165, 250, 0) );}.plan-visual svg { position: relative; z-index: 2; width: 215px; height: 135px; overflow: visible;}.plan-visual-label { position: absolute; left: 18px; bottom: 14px; z-index: 3; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(148, 163, 184, 0.18); color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(8px);}/* ============================================================ PRICING VISUAL THEMES ============================================================ */.plan-visual-personal { background: linear-gradient( 145deg, #f7fbff 0%, #eef6ff 100% );}.plan-visual-yearly { background: linear-gradient( 145deg, #f8fbff 0%, #f1f7ff 100% );}.plan-visual-premium { background: linear-gradient( 145deg, #f5f9ff 0%, #eaf2ff 100% );}.plan-visual-business { background: linear-gradient( 145deg, #f7fafc 0%, #edf4fb 100% );}.plan-visual-enterprise { background: linear-gradient( 145deg, #f6f9fc 0%, #eaf0f7 100% );}.plan-visual-custom { background: linear-gradient( 145deg, #f8fafc 0%, #eef2f7 100% );}/* ============================================================ PRICING SVG VISUAL ELEMENTS ============================================================ */.visual-circle { fill: rgba(255, 255, 255, 0.82); stroke: rgba(37, 99, 235, 0.12); stroke-width: 1.5;}.visual-shield { fill: #ffffff; stroke: #2563eb; stroke-width: 4; filter: drop-shadow( 0 7px 12px rgba(37, 99, 235, 0.15) );}.visual-check { fill: none; stroke: #16a34a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;}.visual-dot { fill: #60a5fa; opacity: 0.75;}.visual-calendar { fill: #ffffff; stroke: #2563eb; stroke-width: 3; filter: drop-shadow( 0 6px 10px rgba(37, 99, 235, 0.12) );}.visual-calendar-line { fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round;}.visual-lock { fill: #2563eb;}.visual-lock-dot { fill: #ffffff;}.visual-building { fill: #ffffff; stroke: #2563eb; stroke-width: 3; filter: drop-shadow( 0 6px 10px rgba(37, 99, 235, 0.12) );}.visual-building-line { fill: none; stroke: #2563eb; stroke-width: 4; stroke-linecap: round;}.visual-window { fill: #dbeafe;}.visual-core { fill: #2563eb; stroke: #ffffff; stroke-width: 5; filter: drop-shadow( 0 5px 10px rgba(37, 99, 235, 0.18) );}.visual-node { fill: #ffffff; stroke: #2563eb; stroke-width: 3; filter: drop-shadow( 0 4px 8px rgba(37, 99, 235, 0.10) );}.visual-network { fill: none; stroke: #93c5fd; stroke-width: 3; stroke-linecap: round;}.visual-gear { fill: #ffffff; stroke: #2563eb; stroke-width: 4; filter: drop-shadow( 0 6px 10px rgba(37, 99, 235, 0.13) );}.visual-gear-center { fill: #dbeafe; stroke: #2563eb; stroke-width: 3;}.visual-gear-line { fill: none; stroke: #2563eb; stroke-width: 5; stroke-linecap: round;}/* ============================================================ PRICING CONTENT ============================================================ */.pricing-card > .pricing-header,.pricing-card > .pricing-price,.pricing-card > .pricing-devices,.pricing-card > .pricing-features,.pricing-card > .pricing-action,.pricing-card > .pricing-support { margin-left: 30px; margin-right: 30px;}.pricing-header { padding-top: 27px;}.pricing-label { display: inline-block; margin-bottom: 7px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;}.pricing-header h2 { margin-bottom: 9px; font-size: 21px; line-height: 1.25; letter-spacing: -0.025em;}.pricing-header p { min-height: 58px; margin-bottom: 0; color: var(--text-light); font-size: 13px; line-height: 1.6;}/* ============================================================ PRICING PRICE ============================================================ */.pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 18px; margin-bottom: 8px; color: var(--text); font-size: 34px; font-weight: 850; line-height: 1.1; letter-spacing: -0.045em;}.pricing-price span { color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0;}.pricing-card-custom .pricing-price { font-size: 31px;}/* ============================================================ DEVICE LIMIT ============================================================ */.pricing-devices { display: flex; align-items: center; min-height: 34px; margin-top: 5px; margin-bottom: 18px; padding: 8px 11px; background: #f8fafc; border: 1px solid #edf1f5; border-radius: 9px; color: #475569; font-size: 11px; line-height: 1.35;}.pricing-devices strong { font-weight: 700;}/* ============================================================ PRICING FEATURES ============================================================ */.pricing-features { display: grid; gap: 10px; margin-top: 0; margin-bottom: 25px; padding: 0; list-style: none;}.pricing-features li { display: flex; align-items: flex-start; gap: 9px; color: #526071; font-size: 12.5px; line-height: 1.45;}.feature-check { flex: 0 0 auto; width: 19px; height: 19px; display: inline-grid; place-items: center; margin-top: -1px; border-radius: 50%; background: #ecfdf3; color: #16a34a; font-size: 11px; font-weight: 900;}/* ============================================================ PRICING ACTION ============================================================ */.pricing-action { margin-top: auto; margin-bottom: 16px;}.pricing-action .btn { min-height: 48px; border-radius: 10px; font-size: 13px;}/* ============================================================ PRICING SUPPORT ============================================================ */.pricing-support { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 45px; padding-top: 12px; padding-bottom: 14px; border-top: 1px solid #edf0f4; color: var(--text-muted); font-size: 10.5px; line-height: 1.35;}.pricing-support strong { color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;}.pricing-support span { text-align: right;}/* ============================================================ PRICING BADGE ============================================================ */.pricing-badge { position: absolute; top: 14px; right: 14px; z-index: 10; padding: 6px 10px; border-radius: 999px; background: var(--primary); color: #ffffff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.20); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;}/* ============================================================ LEGACY PRICING CLASSES ============================================================ */.popular-label { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 13px; background: var(--primary); color: #ffffff; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;}.pricing-name { margin-bottom: 8px; font-size: 20px; font-weight: 800;}.pricing-description { min-height: 66px; font-size: 14px;}.pricing-price small { color: var(--text-muted); font-size: 14px; font-weight: 500; letter-spacing: normal;}.feature-list { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none;}.feature-list li { display: flex; align-items: flex-start; gap: 10px; color: #475569; font-size: 14px;}.feature-list li::before { content: "✓"; flex: 0 0 auto; color: var(--success); font-weight: 800;}.pricing-card .btn { margin-top: auto;}/* ============================================================ CTA ============================================================ */.cta { padding: 70px 0;}.cta-box { padding: 55px; background: linear-gradient( 135deg, #eff6ff, #ffffff ); border: 1px solid #dbeafe; border-radius: var(--radius-xl); text-align: center;}.cta-box h2 { max-width: 720px; margin: 0 auto 14px;}.cta-box p { max-width: 650px; margin: 0 auto 26px;}/* ============================================================ FORMS ============================================================ */.form-group { margin-bottom: 20px;}.form-label { display: block; margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 700;}.form-control { width: 100%; min-height: 48px; padding: 11px 14px; background: #ffffff; color: var(--text); border: 1px solid #d8dee7; border-radius: 10px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;}.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);}textarea.form-control { min-height: 130px; resize: vertical;}.form-help { margin-top: 7px; color: var(--text-muted); font-size: 12px;}/* ============================================================ AUTH / CHECKOUT ============================================================ */.auth-page { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 60px 20px;}.auth-card { width: min(100%, 480px); padding: 36px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);}.auth-header { margin-bottom: 28px; text-align: center;}.auth-header h1 { margin-bottom: 10px; font-size: 30px;}.auth-header p { font-size: 14px;}.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 28px;}.checkout-card { padding: 30px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}/* ============================================================ PAGE HERO ============================================================ */.page-hero { padding: 75px 0; background: linear-gradient( 180deg, #ffffff, #f7faff ); border-bottom: 1px solid var(--border); text-align: center;}.page-hero h1 { margin-bottom: 14px; font-size: clamp(36px, 5vw, 52px);}.page-hero p { max-width: 700px; margin: 0 auto; font-size: 17px;}/* ============================================================ CONTACT ============================================================ */.contact-layout { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: 28px;}.contact-card { padding: 30px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}.contact-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border);}.contact-item:last-child { border-bottom: 0;}.contact-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--primary-light); color: var(--primary);}.contact-item strong { display: block; margin-bottom: 3px; font-size: 14px;}.contact-item span,.contact-item a { color: var(--text-light); font-size: 13px;}/* ============================================================ LEGAL PAGES ============================================================ */.legal-content { max-width: 850px; margin: 0 auto;}.legal-content h2 { margin-top: 38px; font-size: 28px;}.legal-content h3 { margin-top: 28px; font-size: 20px;}.legal-content p,.legal-content li { color: var(--text-light); font-size: 15px;}.legal-content ul,.legal-content ol { padding-left: 22px;}/* ============================================================ DASHBOARD ============================================================ */.dashboard-shell { min-height: calc(100vh - 76px); padding: 35px 0 70px;}.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px;}.dashboard-title h1 { margin-bottom: 6px; font-size: 32px;}.dashboard-title p { margin-bottom: 0; font-size: 14px;}.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px;}.stat-card { padding: 22px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);}.stat-label { margin-bottom: 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;}.stat-value { color: var(--text); font-size: 28px; font-weight: 800;}.table-wrap { overflow-x: auto; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-md);}table { width: 100%; border-collapse: collapse;}th,td { padding: 15px 18px; border-bottom: 1px solid var(--border); text-align: left; font-size: 13px;}th { background: #f8fafc; color: #475569; font-size: 12px; font-weight: 800;}tr:last-child td { border-bottom: 0;}/* ============================================================ ALERTS / STATUS ============================================================ */.alert { padding: 14px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;}.alert-success { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0;}.alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;}.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a;}.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;}.badge-success { background: #ecfdf3; color: #15803d;}.badge-danger { background: #fef2f2; color: #b91c1c;}.badge-warning { background: #fffbeb; color: #b45309;}.badge-neutral { background: #f1f5f9; color: #475569;}/* ============================================================ FOOTER ============================================================ */.site-footer { margin-top: 0; background: #ffffff; border-top: 1px solid var(--border);}.footer-main { padding: 65px 0 45px;}.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 45px;}.footer-brand { max-width: 330px;}.footer-brand p { margin-top: 18px; font-size: 13px;}.footer-company { margin-top: 18px; color: var(--text-muted); font-size: 12px; line-height: 1.7;}.footer-title { margin-bottom: 16px; color: var(--text); font-size: 13px; font-weight: 800;}.footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;}.footer-links a { color: var(--text-light); font-size: 13px; transition: color 0.2s ease;}.footer-links a:hover { color: var(--primary);}.footer-bottom { padding: 20px 0; border-top: 1px solid var(--border);}.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px;}.footer-bottom p { margin: 0; color: var(--text-muted); font-size: 11px;}/* ============================================================ MOBILE NAVIGATION ============================================================ */.mobile-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: #ffffff; color: var(--text);}/* ============================================================ RESPONSIVE ============================================================ */@media (max-width: 1000px) { .nav-links { gap: 15px; } .hero-grid { grid-template-columns: 1fr; gap: 45px; } .hero-content { max-width: 800px; margin: 0 auto; text-align: center; } .hero-description { margin-left: auto; margin-right: auto; } .hero-actions, .hero-trust { justify-content: center; } .grid-4, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (max-width: 760px) { .container { width: min( calc(100% - 30px), var(--container) ); } .section { padding: 65px 0; } .security-bar { min-height: 34px; } .security-bar .container { font-size: 11px; text-align: center; } .navbar { min-height: 68px; } .nav-links { display: none; } .nav-actions .btn-secondary { display: none; } .mobile-menu-button { display: grid; place-items: center; } .hero { padding: 75px 0 65px; } .hero h1 { font-size: 40px; } .hero-description { font-size: 16px; } .security-card { padding: 22px; } .grid-2, .grid-3, .grid-4, .pricing-grid, .contact-layout, .checkout-layout, .stat-grid { grid-template-columns: 1fr; } .cta-box { padding: 35px 22px; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom-inner { flex-direction: column; align-items: flex-start; } .auth-card, .checkout-card, .contact-card { padding: 24px; } .dashboard-header { align-items: flex-start; flex-direction: column; } /* Pricing mobile */ .pricing-grid { gap: 18px; } .pricing-card { border-radius: 19px; } .plan-visual { height: 165px; } .plan-visual svg { width: 205px; height: 130px; } .pricing-card > .pricing-header, .pricing-card > .pricing-price, .pricing-card > .pricing-devices, .pricing-card > .pricing-features, .pricing-card > .pricing-action, .pricing-card > .pricing-support { margin-left: 24px; margin-right: 24px; } .pricing-header { padding-top: 23px; } .pricing-header h2 { font-size: 20px; } .pricing-header p { min-height: auto; } .pricing-price { font-size: 32px; } .pricing-devices { margin-bottom: 17px; } .pricing-features { gap: 9px; }}@media (max-width: 480px) { body { font-size: 15px; } h1 { font-size: 34px; } h2 { font-size: 29px; } .hero h1 { font-size: 35px; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .pricing-card { padding: 0; } .plan-visual { height: 158px; } .plan-visual svg { width: 195px; height: 125px; } .pricing-card > .pricing-header, .pricing-card > .pricing-price, .pricing-card > .pricing-devices, .pricing-card > .pricing-features, .pricing-card > .pricing-action, .pricing-card > .pricing-support { margin-left: 21px; margin-right: 21px; } .pricing-price { font-size: 30px; } .pricing-price span { font-size: 11px; } .pricing-support { flex-direction: column; align-items: flex-start; } .pricing-support span { text-align: left; } .score-circle { width: 78px; height: 78px; }}/* ============================================================ PREMIUM CHECKOUT DESIGN FSI DEFENCE SECURITY ============================================================ */.checkout-hero { padding: 62px 0 52px; background: radial-gradient( circle at 85% 20%, rgba(37, 99, 235, 0.09), transparent 34% ), linear-gradient( 180deg, #ffffff 0%, #f7faff 100% );}.checkout-hero-content { display: flex; align-items: center; justify-content: space-between; gap: 45px; text-align: left;}.checkout-hero-content > div:first-child { max-width: 650px;}.checkout-hero h1 { margin-bottom: 14px; font-size: clamp(36px, 4.5vw, 52px);}.checkout-hero p { max-width: 650px; margin-bottom: 0; font-size: 16px; line-height: 1.7;}/* ============================================================ CHECKOUT PROGRESS ============================================================ */.checkout-hero-status { display: flex; align-items: center; flex: 0 0 auto; padding: 15px 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); backdrop-filter: blur(10px);}.checkout-step { display: flex; align-items: center; gap: 8px; color: #94a3b8; font-size: 12px; font-weight: 700; white-space: nowrap;}.checkout-step span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 800;}.checkout-step.active { color: var(--primary);}.checkout-step.active span { background: var(--primary); color: #ffffff; box-shadow: 0 5px 14px rgba(37, 99, 235, 0.22);}.checkout-step-line { width: 32px; height: 1px; margin: 0 9px; background: #dbe2ea;}/* ============================================================ CHECKOUT SECTION ============================================================ */.checkout-section { padding-top: 55px; padding-bottom: 75px;}.checkout-layout { align-items: start; gap: 30px;}.checkout-main { min-width: 0;}/* ============================================================ MAIN CHECKOUT CARD ============================================================ */.checkout-plan-card { padding: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);}.checkout-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; padding: 32px 34px 27px; border-bottom: 1px solid #edf1f5;}.checkout-card-top h2 { margin-bottom: 8px; font-size: 30px; letter-spacing: -0.035em;}.checkout-plan-description { max-width: 650px; margin-bottom: 0; font-size: 14px; line-height: 1.65;}/* ============================================================ CHECKOUT PLAN VISUAL ============================================================ */.checkout-plan-visual { position: relative; min-height: 175px; display: flex; align-items: center; gap: 28px; margin: 0; padding: 28px 34px; overflow: hidden; background: radial-gradient( circle at 82% 30%, rgba(96, 165, 250, 0.16), transparent 27% ), linear-gradient( 135deg, #f5f9ff, #edf5ff ); border-bottom: 1px solid #e5edf8;}.checkout-plan-visual::before { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -130px; border-radius: 50%; background: radial-gradient( circle, rgba(37, 99, 235, 0.12), transparent 68% );}.checkout-plan-visual::after { content: ""; position: absolute; width: 90px; height: 90px; top: -40px; left: 38%; border-radius: 50%; background: radial-gradient( circle, rgba(96, 165, 250, 0.12), transparent 70% );}.checkout-shield { position: relative; z-index: 2; width: 108px; height: 108px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 28px; background: #ffffff; color: var(--primary); border: 1px solid #dbeafe; box-shadow: 0 12px 30px rgba(37, 99, 235, 0.13);}.checkout-shield svg { width: 68px; height: 68px;}.checkout-visual-copy { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 440px;}.checkout-visual-copy strong { margin-bottom: 6px; color: var(--text); font-size: 20px; font-weight: 800;}.checkout-visual-copy span { color: #64748b; font-size: 13px; line-height: 1.65;}/* ============================================================ PLAN META ============================================================ */.checkout-plan-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 34px; padding: 22px 0; border-bottom: 1px solid #edf1f5;}.checkout-meta-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding-right: 20px; border-right: 1px solid #edf1f5;}.checkout-meta-item:not(:first-child) { padding-left: 22px;}.checkout-meta-item:last-child { padding-right: 0; border-right: 0;}.checkout-meta-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #eff6ff; color: var(--primary); font-size: 13px; font-weight: 800;}.checkout-meta-item small { display: block; margin-bottom: 2px; color: #94a3b8; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;}.checkout-meta-item strong { display: block; color: #334155; font-size: 12px; line-height: 1.3;}/* ============================================================ CHECKOUT FEATURES ============================================================ */.checkout-features { padding: 29px 34px 28px;}.checkout-section-heading { margin-bottom: 18px;}.checkout-section-heading .eyebrow { margin-bottom: 7px;}.checkout-section-heading h3 { margin-bottom: 0; font-size: 21px;}.checkout-feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; margin-bottom: 0;}.checkout-feature-list li { font-size: 13px; line-height: 1.5;}.checkout-feature-list .feature-check { width: 20px; height: 20px;}/* ============================================================ SUBSCRIPTION NOTE ============================================================ */.checkout-note { display: flex; align-items: flex-start; gap: 13px; margin: 0 34px 34px; padding: 18px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 13px;}.checkout-note-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e0edff; color: var(--primary); font-size: 13px; font-weight: 800;}.checkout-note strong { display: block; margin-bottom: 4px; color: #334155; font-size: 13px;}.checkout-note p { margin-bottom: 6px; color: #64748b; font-size: 12px; line-height: 1.55;}/* ============================================================ ORDER SUMMARY ============================================================ */.checkout-sidebar { position: sticky; top: 105px;}.checkout-summary-premium { padding: 28px; border-radius: 20px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);}.summary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}.summary-header .eyebrow { margin-bottom: 0;}.summary-secure { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #ecfdf3; color: #15803d; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;}.summary-secure .status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: currentColor;}.checkout-summary-premium h2 { margin-bottom: 7px; font-size: 23px;}.summary-description { margin-bottom: 20px; font-size: 12px; line-height: 1.6;}/* ============================================================ SUMMARY PRICE ============================================================ */.summary-price-box { display: flex; align-items: baseline; gap: 5px; margin-bottom: 21px; padding: 18px 17px; background: linear-gradient( 135deg, #f5f9ff, #eef5ff ); border: 1px solid #dbeafe; border-radius: 14px;}.summary-price { color: var(--text); font-size: 38px; font-weight: 850; line-height: 1; letter-spacing: -0.045em;}.summary-price-period { color: #64748b; font-size: 13px; font-weight: 600;}.summary-price-note { color: #64748b; font-size: 11px;}/* ============================================================ SUMMARY DETAILS ============================================================ */.summary-details { display: grid; gap: 0; margin-bottom: 20px;}.summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #edf1f5;}.summary-row span { color: #64748b; font-size: 12px;}.summary-row strong { max-width: 55%; color: #334155; font-size: 12px; text-align: right;}/* ============================================================ SUMMARY TOTAL ============================================================ */.summary-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding-top: 2px;}.summary-total > div { display: flex; flex-direction: column;}.summary-total > div > span { color: var(--text); font-size: 14px; font-weight: 800;}.summary-total small { color: #94a3b8; font-size: 9px; font-weight: 500;}.summary-total > strong { color: var(--text); font-size: 23px; font-weight: 850; letter-spacing: -0.03em; text-align: right;}.summary-total > strong small { font-size: 11px; font-weight: 600;}/* ============================================================ CHECKOUT ACTIONS ============================================================ */.checkout-actions { display: grid; gap: 10px;}.checkout-actions .btn { border-radius: 11px;}.checkout-actions .btn-primary { box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);}/* ============================================================ CHECKOUT SECURITY ============================================================ */.checkout-security { margin-top: 19px; padding-top: 17px; border-top: 1px solid #edf1f5;}.checkout-security-title { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;}.checkout-lock { font-size: 13px;}.checkout-security-title strong { color: #475569; font-size: 11px; font-weight: 800;}.checkout-security p { margin-bottom: 0; color: #94a3b8; font-size: 10.5px; line-height: 1.55;}/* ============================================================ HELP CARD ============================================================ */.checkout-help-card { display: flex; gap: 14px; margin-top: 16px; padding: 21px; border-radius: 17px;}.checkout-help-card .info-card-icon { flex: 0 0 auto;}.checkout-help-card h3 { margin-bottom: 6px; font-size: 16px;}.checkout-help-card p { margin-bottom: 7px; font-size: 11.5px; line-height: 1.55;}/* ============================================================ TRUST GRID ============================================================ */.checkout-trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px;}.checkout-trust-item { display: flex; align-items: flex-start; gap: 11px; padding: 17px; background: #ffffff; border: 1px solid var(--border); border-radius: 14px;}.checkout-trust-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #ecfdf3; color: #16a34a; font-size: 12px; font-weight: 900;}.checkout-trust-item strong { display: block; margin-bottom: 3px; color: #334155; font-size: 11.5px;}.checkout-trust-item span:last-child { display: block; color: #94a3b8; font-size: 10.5px; line-height: 1.5;}/* ============================================================ PURCHASE INFORMATION ============================================================ */.checkout-information { border-top: 1px solid var(--border);}.checkout-information .feature-card { background: #ffffff;}/* ============================================================ CHECKOUT RESPONSIVE============================================================ */@media (max-width: 1000px) { .checkout-hero-content { align-items: flex-start; flex-direction: column; gap: 25px; } .checkout-hero-status { width: 100%; justify-content: center; } .checkout-sidebar { position: static; } .checkout-trust-grid { grid-template-columns: 1fr; }}@media (max-width: 760px) { .checkout-hero { padding: 50px 0 42px; } .checkout-hero h1 { font-size: 36px; } .checkout-hero p { font-size: 14px; } .checkout-hero-status { padding: 12px; } .checkout-step { font-size: 10px; } .checkout-step span { width: 25px; height: 25px; font-size: 10px; } .checkout-step-line { width: 20px; margin: 0 5px; } .checkout-section { padding-top: 35px; padding-bottom: 55px; } .checkout-card-top { padding: 25px 23px 22px; } .checkout-card-top h2 { font-size: 25px; } .checkout-plan-visual { min-height: 155px; padding: 22px 23px; gap: 20px; } .checkout-shield { width: 82px; height: 82px; border-radius: 22px; } .checkout-shield svg { width: 54px; height: 54px; } .checkout-visual-copy strong { font-size: 17px; } .checkout-visual-copy span { font-size: 11px; } .checkout-plan-meta { margin-left: 23px; margin-right: 23px; } .checkout-meta-item { padding-right: 12px; } .checkout-meta-item:not(:first-child) { padding-left: 12px; } .checkout-meta-item strong { font-size: 10.5px; } .checkout-features { padding: 25px 23px; } .checkout-feature-list { grid-template-columns: 1fr; gap: 10px; } .checkout-note { margin-left: 23px; margin-right: 23px; margin-bottom: 23px; } .checkout-summary-premium { padding: 24px; }}@media (max-width: 480px) { .checkout-hero { padding: 42px 0 35px; } .checkout-hero h1 { font-size: 32px; } .checkout-hero-status { justify-content: space-between; } .checkout-step strong { display: none; } .checkout-step-line { flex: 1; max-width: 45px; } .checkout-card-top { flex-direction: column; gap: 10px; } .checkout-card-top h2 { font-size: 23px; } .checkout-plan-visual { min-height: 150px; } .checkout-shield { width: 70px; height: 70px; border-radius: 19px; } .checkout-shield svg { width: 46px; height: 46px; } .checkout-visual-copy strong { font-size: 15px; } .checkout-visual-copy span { font-size: 10.5px; } .checkout-plan-meta { grid-template-columns: 1fr; gap: 13px; padding: 18px 0; } .checkout-meta-item, .checkout-meta-item:not(:first-child) { padding: 0; border-right: 0; } .checkout-summary-premium { padding: 21px; } .summary-price { font-size: 34px; } .checkout-trust-grid { gap: 10px; }}/* ========================================================= FSI DEFENCE SECURITY — CUSTOMER DASHBOARD ========================================================= */.dashboard-section { padding: 52px 0 80px; background: #f8fafc; min-height: calc(100vh - 160px);}.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px;}.dashboard-header h1 { margin: 8px 0 10px; font-size: clamp(32px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.035em;}.dashboard-header p { margin: 0; max-width: 680px; color: #64748b; font-size: 16px; line-height: 1.7;}.dashboard-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0;}/* ---------- Overview Cards ---------- */.dashboard-grid { display: grid; gap: 18px;}.dashboard-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px;}.dashboard-card { display: flex; align-items: center; gap: 15px; min-height: 112px; padding: 22px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 18px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);}.dashboard-card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex: 0 0 48px; border-radius: 14px; background: #eff6ff; font-size: 21px;}.dashboard-label { display: block; margin-bottom: 6px; color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.09em;}.dashboard-card strong { display: block; color: #0f172a; font-size: 15px; line-height: 1.4;}/* ---------- Main Panels ---------- */.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px;}.dashboard-panel { min-width: 0; padding: 28px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045);}.dashboard-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px;}.dashboard-panel-header h2 { margin: 7px 0 0; color: #0f172a; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em;}.dashboard-panel-header p { margin: 7px 0 0; color: #64748b; font-size: 14px; line-height: 1.6;}.dashboard-status { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap;}.status-pending { color: #92400e; background: #fffbeb; border: 1px solid #fde68a;}/* ---------- Empty States ---------- */.dashboard-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 205px; padding: 24px; text-align: center; background: #f8fafc; border: 1px dashed #dbe3ec; border-radius: 16px;}.dashboard-empty-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 15px; background: #eff6ff; font-size: 22px;}.dashboard-empty-state h3 { margin: 0 0 8px; color: #0f172a; font-size: 16px;}.dashboard-empty-state p { max-width: 500px; margin: 0 0 18px; color: #64748b; font-size: 13px; line-height: 1.65;}.dashboard-empty-devices { min-height: 225px;}/* ---------- Account Information ---------- */.dashboard-information-list { display: flex; flex-direction: column;}.dashboard-information-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid #eef2f7;}.dashboard-information-row:first-child { padding-top: 0;}.dashboard-information-row:last-child { padding-bottom: 0; border-bottom: 0;}.dashboard-information-row span { color: #64748b; font-size: 13px;}.dashboard-information-row strong { max-width: 65%; color: #0f172a; font-size: 13px; text-align: right; word-break: break-word;}.dashboard-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px !important;}/* ---------- Devices ---------- */.dashboard-devices-panel { margin-bottom: 22px;}.dashboard-count { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 11px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap;}.dashboard-device-list { display: flex; flex-direction: column; border-top: 1px solid #eef2f7;}.dashboard-device-row { display: grid; grid-template-columns: 48px minmax(180px, 1.5fr) minmax(90px, 0.7fr) minmax(150px, 0.9fr) auto; align-items: center; gap: 18px; padding: 18px 4px; border-bottom: 1px solid #eef2f7;}.dashboard-device-row:last-child { border-bottom: 0;}.dashboard-device-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #eff6ff; font-size: 18px;}.dashboard-device-info,.dashboard-device-version,.dashboard-device-seen { min-width: 0;}.dashboard-device-info strong,.dashboard-device-version strong,.dashboard-device-seen strong { display: block; color: #0f172a; font-size: 13px; line-height: 1.45;}.dashboard-device-info span,.dashboard-device-version span,.dashboard-device-seen span { display: block; margin-top: 3px; color: #94a3b8; font-size: 11px; line-height: 1.4;}.dashboard-device-version strong,.dashboard-device-seen strong { font-size: 12px;}.dashboard-device-status { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; font-size: 10px; font-weight: 800; white-space: nowrap;}.status-active,.status-online,.status-registered { color: #166534; background: #f0fdf4; border-color: #bbf7d0;}.status-offline,.status-inactive { color: #475569; background: #f8fafc; border-color: #e2e8f0;}/* ---------- Security Overview ---------- */.dashboard-security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}.dashboard-security-item { display: flex; align-items: flex-start; gap: 13px; padding: 16px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 14px;}.dashboard-security-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex: 0 0 36px; border-radius: 10px; background: #ffffff; border: 1px solid #e5e7eb; font-size: 16px;}.dashboard-security-item strong { display: block; margin-bottom: 4px; color: #0f172a; font-size: 13px;}.dashboard-security-item span:last-child { display: block; color: #64748b; font-size: 11px; line-height: 1.55;}/* ---------- Support ---------- */.dashboard-support-card { display: flex; align-items: flex-start; gap: 16px; padding: 19px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 15px;}.dashboard-support-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: 0 0 42px; border-radius: 12px; background: #eff6ff; color: #2563eb; font-size: 20px; font-weight: 800;}.dashboard-support-card h3 { margin: 1px 0 7px; color: #0f172a; font-size: 15px;}.dashboard-support-card p { margin: 0 0 15px; color: #64748b; font-size: 12px; line-height: 1.65;}/* ---------- Responsive ---------- */@media (max-width: 1050px) { .dashboard-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-main-grid { grid-template-columns: 1fr; } .dashboard-device-row { grid-template-columns: 48px minmax(180px, 1fr) minmax(90px, 0.7fr) auto; } .dashboard-device-seen { display: none; }}@media (max-width: 760px) { .dashboard-section { padding: 36px 0 60px; } .dashboard-header { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 26px; } .dashboard-header-actions { width: 100%; } .dashboard-header-actions .btn { flex: 1; } .dashboard-grid-four { grid-template-columns: 1fr; } .dashboard-panel { padding: 22px; border-radius: 17px; } .dashboard-panel-header { gap: 12px; } .dashboard-security-grid { grid-template-columns: 1fr; } .dashboard-device-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; } .dashboard-device-version { display: none; } .dashboard-device-info strong { font-size: 12px; } .dashboard-device-info span { font-size: 10px; }}@media (max-width: 520px) { .dashboard-header h1 { font-size: 31px; } .dashboard-header-actions { flex-direction: column; } .dashboard-header-actions .btn { width: 100%; } .dashboard-card { min-height: 96px; padding: 18px; } .dashboard-panel-header { align-items: flex-start; flex-direction: column; } .dashboard-information-row { flex-direction: column; gap: 5px; } .dashboard-information-row strong { max-width: 100%; text-align: left; } .dashboard-device-row { grid-template-columns: 42px minmax(0, 1fr); } .dashboard-device-status { grid-column: 2; justify-self: start; } .dashboard-support-card { flex-direction: column; }}/* ============================================================ FSI DEFENCE SECURITY CUSTOMER LOGIN — FINAL CLEAN LAYOUT ============================================================ */.fsi-login-page { padding: 64px 0 82px; background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );}.fsi-login-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;}.fsi-login-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: stretch;}/* ============================================================ LOGIN CARD ============================================================ */.fsi-login-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 22px; padding: 42px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);}.fsi-login-heading { margin-bottom: 30px;}.fsi-login-eyebrow { margin-bottom: 12px; color: #2563eb; font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: 1px;}.fsi-login-heading h1 { margin: 0 0 12px; color: #0f172a; font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -1px;}.fsi-login-heading p { max-width: 470px; margin: 0; color: #64748b; font-size: 15px; line-height: 1.7;}/* ============================================================ ERROR ============================================================ */.fsi-login-error { margin-bottom: 22px; padding: 13px 15px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 14px; line-height: 1.5;}/* ============================================================ FORM ============================================================ */.fsi-login-form { width: 100%; margin: 0;}.fsi-field { width: 100%; margin-bottom: 21px;}.fsi-field label { display: block; margin-bottom: 8px; color: #334155; font-size: 14px; line-height: 1.3; font-weight: 700;}.fsi-password-label { display: flex; align-items: center; justify-content: space-between; gap: 12px;}.fsi-password-label label { margin-bottom: 8px;}.fsi-help-link { margin-bottom: 8px; color: #64748b; font-size: 13px; text-decoration: none;}.fsi-help-link:hover { color: #2563eb;}.fsi-login-form input { width: 100%; height: 52px; padding: 0 15px; border: 1px solid #cbd5e1; border-radius: 10px; outline: none; background: #ffffff; color: #0f172a; font-family: inherit; font-size: 15px; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease;}.fsi-login-form input::placeholder { color: #94a3b8;}.fsi-login-form input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);}.fsi-password-box { position: relative; width: 100%;}.fsi-password-box input { padding-right: 78px;}.fsi-password-toggle { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); padding: 7px 8px; border: 0; background: transparent; color: #2563eb; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;}.fsi-password-toggle:hover { color: #1d4ed8;}/* ============================================================ SIGN IN BUTTON ============================================================ */.fsi-login-button { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; margin-top: 4px; border: 0; border-radius: 10px; background: #2563eb; color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.20); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;}.fsi-login-button:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 11px 24px rgba(37, 99, 235, 0.25);}/* ============================================================ CREATE ACCOUNT ============================================================ */.fsi-create-account { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 26px; padding-top: 23px; border-top: 1px solid #e5e7eb; color: #64748b; font-size: 14px; line-height: 1.5; text-align: center;}.fsi-create-account a { color: #2563eb; font-weight: 700; text-decoration: none;}.fsi-create-account a:hover { text-decoration: underline;}/* ============================================================ RIGHT INFORMATION PANEL ============================================================ */.fsi-login-info { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 42px; box-sizing: border-box; border: 1px solid #dbeafe; border-radius: 22px; background: linear-gradient( 145deg, #eff6ff 0%, #f8fbff 100% );}.fsi-login-info::before { content: ""; position: absolute; width: 260px; height: 260px; top: -125px; right: -115px; border-radius: 50%; background: rgba(37, 99, 235, 0.07);}.fsi-login-info::after { content: ""; position: absolute; width: 210px; height: 210px; left: -115px; bottom: -115px; border-radius: 50%; background: rgba(59, 130, 246, 0.05);}.fsi-login-info > * { position: relative; z-index: 2;}/* ============================================================ INFO LABEL ============================================================ */.fsi-info-label { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-bottom: 23px; padding: 8px 12px; border: 1px solid #dbeafe; border-radius: 999px; background: #ffffff; color: #1d4ed8; font-size: 11px; font-weight: 800; letter-spacing: 0.65px;}.fsi-info-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb;}/* ============================================================ INFO HEADING ============================================================ */.fsi-login-info h2 { margin: 0 0 16px; color: #0f172a; font-size: 34px; line-height: 1.16; font-weight: 800; letter-spacing: -0.8px;}.fsi-info-description { max-width: 470px; margin: 0 0 30px; color: #475569; font-size: 15px; line-height: 1.7;}/* ============================================================ BENEFITS ============================================================ */.fsi-benefit-list { display: grid; gap: 19px;}.fsi-benefit { display: flex; align-items: flex-start; gap: 13px;}.fsi-benefit-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #2563eb; color: #ffffff; font-size: 13px; font-weight: 800;}.fsi-benefit strong { display: block; margin-bottom: 3px; color: #1e293b; font-size: 14px; line-height: 1.4; font-weight: 700;}.fsi-benefit span { display: block; color: #64748b; font-size: 13px; line-height: 1.55;}/* ============================================================ COMPANY FOOTER INSIDE INFO CARD ============================================================ */.fsi-info-company { display: flex; align-items: center; gap: 12px; margin-top: 31px; padding-top: 22px; border-top: 1px solid #dbeafe;}.fsi-company-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #2563eb; color: #ffffff; font-size: 15px; font-weight: 800;}.fsi-info-company strong { display: block; margin-bottom: 2px; color: #1e293b; font-size: 13px; line-height: 1.4;}.fsi-info-company span { display: block; color: #64748b; font-size: 12px; line-height: 1.4;}/* ============================================================ TABLET ============================================================ */@media (max-width: 900px) { .fsi-login-grid { grid-template-columns: 1fr; max-width: 650px; margin: 0 auto; } .fsi-login-info { order: 2; } .fsi-login-card { order: 1; }}/* ============================================================ MOBILE ============================================================ */@media (max-width: 600px) { .fsi-login-page { padding: 42px 0 60px; } .fsi-login-container { padding: 0 16px; } .fsi-login-grid { gap: 20px; } .fsi-login-card, .fsi-login-info { padding: 28px 22px; border-radius: 18px; } .fsi-login-heading h1 { font-size: 32px; } .fsi-login-info h2 { font-size: 28px; } .fsi-login-heading p, .fsi-info-description { font-size: 14px; }} /* ============================================================ FSI DEFENCE SECURITY — FINAL LOGIN + PRICING POLISH Scoped overrides — preserves existing site functionality ============================================================ */ /* ---------- CUSTOMER LOGIN ---------- */ .fsi-login-page { padding: 76px 0 92px; background: radial-gradient(circle at 10% 10%, rgba(37,99,235,.07), transparent 30%), linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); } .fsi-login-container { width: min(calc(100% - 40px), 1080px); margin: 0 auto; } .fsi-login-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } .fsi-login-card, .fsi-login-info { min-width: 0; border: 1px solid #e5eaf0; border-radius: 24px; box-shadow: 0 18px 50px rgba(15,23,42,.08); } .fsi-login-card { padding: 42px; background: #ffffff; } .fsi-login-heading { margin-bottom: 28px; } .fsi-login-eyebrow { margin-bottom: 11px; color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .09em; } .fsi-login-heading h1 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; letter-spacing: -.035em; } .fsi-login-heading p { margin: 0; max-width: 470px; color: #64748b; font-size: 15px; line-height: 1.7; } .fsi-login-form { display: grid; gap: 21px; } .fsi-field { min-width: 0; } .fsi-field > label, .fsi-password-label > label { display: block; margin-bottom: 8px; color: #263244; font-size: 13px; font-weight: 700; } .fsi-password-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fsi-help-link { color: #2563eb; font-size: 12px; font-weight: 700; } .fsi-field input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #d9e0e8; border-radius: 11px; outline: none; background: #ffffff; color: #172033; font-size: 14px; transition: border-color .2s ease, box-shadow .2s ease; } .fsi-field input::placeholder { color: #9aa5b1; } .fsi-field input:focus { border-color: #60a5fa; box-shadow: 0 0 0 4px rgba(37,99,235,.10); } .fsi-password-box { position: relative; } .fsi-password-box input { padding-right: 72px; } .fsi-password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; color: #2563eb; font-size: 12px; font-weight: 800; padding: 6px; } .fsi-login-button { width: 100%; min-height: 54px; margin-top: 2px; border: 0; border-radius: 11px; background: #2563eb; color: #ffffff; font-size: 14px; font-weight: 800; box-shadow: 0 10px 24px rgba(37,99,235,.20); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; } .fsi-login-button:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,.25); } .fsi-login-error { margin-bottom: 20px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 13px; font-weight: 600; line-height: 1.5; } .fsi-create-account { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 24px; color: #64748b; font-size: 13px; } .fsi-create-account a { color: #2563eb; font-weight: 800; } .fsi-login-info { position: relative; overflow: hidden; padding: 42px; background: radial-gradient(circle at 90% 8%, rgba(96,165,250,.22), transparent 30%), linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%); } .fsi-login-info::after { content: ""; position: absolute; width: 220px; height: 220px; right: -110px; bottom: -110px; border-radius: 50%; border: 1px solid rgba(37,99,235,.10); pointer-events: none; } .fsi-info-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .07em; } .fsi-info-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.10); } .fsi-login-info h2 { position: relative; z-index: 1; margin-bottom: 17px; font-size: clamp(30px, 3.2vw, 43px); line-height: 1.12; letter-spacing: -.035em; } .fsi-info-description { position: relative; z-index: 1; max-width: 450px; margin-bottom: 30px; color: #5f6b7a; font-size: 14px; line-height: 1.75; } .fsi-benefit-list { position: relative; z-index: 1; display: grid; gap: 18px; } .fsi-benefit { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; } .fsi-benefit-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; border: 1px solid #dbe7f7; color: #16a34a; font-size: 15px; font-weight: 900; } .fsi-benefit strong, .fsi-benefit span { display: block; } .fsi-benefit strong { margin-bottom: 3px; color: #172033; font-size: 13px; font-weight: 800; } .fsi-benefit span { color: #687587; font-size: 12px; line-height: 1.55; } .fsi-info-company { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(148,163,184,.22); } .fsi-company-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #2563eb; color: #ffffff; font-weight: 900; } .fsi-info-company strong, .fsi-info-company span { display: block; } .fsi-info-company strong { color: #172033; font-size: 13px; } .fsi-info-company span { margin-top: 2px; color: #718096; font-size: 11px; } /* ---------- PRICING: CLEAN PREVIOUS-STYLE PRESENTATION ---------- */ .pricing-section .pricing-grid { align-items: stretch; } .pricing-section .pricing-card { background: #ffffff; border: 1px solid #e3e8ef; border-radius: 20px; overflow: hidden; } .pricing-section .pricing-card .plan-visual { height: 145px; background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%); border-bottom: 1px solid #e8edf3; } /* Remove oversized decorative circles that were visually dominating the cards. */ .pricing-section .pricing-card .plan-visual::before, .pricing-section .pricing-card .plan-visual::after { display: none; } .pricing-section .pricing-card .plan-visual svg { width: 190px; height: 118px; } .pricing-section .pricing-card .pricing-header { padding-top: 24px; } .pricing-section .pricing-card > .pricing-header, .pricing-section .pricing-card > .pricing-price, .pricing-section .pricing-card > .pricing-devices, .pricing-section .pricing-card > .pricing-features, .pricing-section .pricing-card > .pricing-action, .pricing-section .pricing-card > .pricing-support { margin-left: 28px; margin-right: 28px; } .pricing-section .pricing-card .pricing-header p { min-height: 52px; } .pricing-section .pricing-card .pricing-features { flex: 1 1 auto; } .pricing-section .pricing-card .pricing-action { margin-top: auto; } @media (max-width: 900px) { .fsi-login-grid { grid-template-columns: 1fr; } .fsi-login-info { order: 2; } } @media (max-width: 640px) { .fsi-login-page { padding: 42px 0 60px; } .fsi-login-container { width: min(calc(100% - 28px), 1080px); } .fsi-login-card, .fsi-login-info { padding: 28px 22px; border-radius: 18px; } .fsi-login-heading h1 { font-size: 34px; } .fsi-login-info h2 { font-size: 32px; } .pricing-section .pricing-card .plan-visual { height: 130px; } } /* ============================================================ FSI DEFENCE SECURITY — FINAL FOOTER CLEAN LAYOUT Complete footer alignment override. Existing footer content and links are preserved. ============================================================ */ .site-footer, .site-footer * { box-sizing: border-box; } .site-footer { width: 100%; margin: 0; background: #ffffff; border-top: 1px solid var(--border); overflow: hidden; } .site-footer .container { width: min(calc(100% - 40px), var(--container)); max-width: var(--container); margin: 0 auto; } /* ========================= MAIN FOOTER ========================= */ .footer-main { width: 100%; padding: 60px 0 48px; } .footer-grid { width: 100%; display: grid !important; grid-template-columns: minmax(260px, 1.55fr) repeat(3, minmax(145px, 1fr)) !important; gap: 44px !important; align-items: start !important; } .footer-grid > * { min-width: 0; } /* ========================= BRAND / COMPANY COLUMN ========================= */ .footer-brand { width: 100%; max-width: 360px; min-width: 0; } .footer-brand .brand { display: inline-flex; align-items: center; max-width: 100%; } .footer-brand p { max-width: 345px; margin: 17px 0 0 !important; color: var(--text-light); font-size: 13px; line-height: 1.7; } .footer-company { max-width: 345px; margin: 17px 0 0 !important; color: var(--text-muted); font-size: 12px; line-height: 1.7; } /* ========================= FOOTER LINK COLUMNS ========================= */ .footer-title { display: block; margin: 2px 0 16px !important; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 800; } .footer-links { width: 100%; max-width: 220px; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .footer-links li { display: block !important; width: 100%; min-width: 0; margin: 0 !important; padding: 0 !important; } .footer-links a { display: block !important; width: fit-content; max-width: 100%; margin: 0 !important; padding: 0 !important; color: var(--text-light); font-size: 13px; line-height: 1.5; text-decoration: none; white-space: normal; overflow-wrap: anywhere; transition: color .2s ease, transform .2s ease; } .footer-links a:hover { color: var(--primary); transform: translateX(2px); } /* ========================= BOTTOM / COPYRIGHT AREA ========================= */ .footer-bottom { width: 100%; padding: 21px 0 23px; border-top: 1px solid var(--border); } .footer-bottom-inner { width: 100%; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 30px !important; flex-wrap: wrap !important; } .footer-bottom-inner > * { min-width: 0; } .footer-bottom p { margin: 0 !important; color: var(--text-muted); font-size: 11px; line-height: 1.65; } .footer-bottom p strong { display: block; margin: 0 0 7px !important; color: var(--text); font-size: 12px; line-height: 1.4; font-weight: 800; } .footer-bottom p a { display: inline-block !important; width: auto; margin: 0 16px 5px 0 !important; padding: 0 !important; color: var(--text-light); font-size: 11px; line-height: 1.5; white-space: nowrap; text-decoration: none; } .footer-bottom p a:hover { color: var(--primary); } /* Keep footer content inside the viewport. */ .site-footer, .footer-main, .footer-grid, .footer-bottom, .footer-bottom-inner { max-width: 100%; } /* ========================= TABLET ========================= */ @media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 38px 34px !important; } .footer-brand { grid-column: 1 / -1; max-width: 650px; } .footer-brand p, .footer-company { max-width: 600px; } } /* ========================= MOBILE ========================= */ @media (max-width: 760px) { .site-footer .container { width: min(calc(100% - 30px), var(--container)); } .footer-main { padding: 46px 0 36px; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 31px 24px !important; } .footer-brand { grid-column: 1 / -1; max-width: 100%; } .footer-brand p, .footer-company { max-width: 100%; } .footer-links { max-width: 100%; gap: 8px !important; } .footer-bottom { padding: 20px 0 24px; } .footer-bottom-inner { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .footer-bottom p { max-width: 100%; } } /* ========================= SMALL MOBILE ========================= */ @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; gap: 27px !important; } .footer-brand { grid-column: auto; } .footer-title { margin-bottom: 13px !important; } .footer-bottom p a { margin-right: 12px !important; white-space: normal; } } /* ============================================================ FSI DEFENCE SECURITY — FOOTER STRUCTURE FIX v2 Targets both list-based and direct-link footer markup. ============================================================ */ .site-footer .footer-grid { display: grid !important; grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 1fr)) !important; align-items: start !important; gap: 42px !important; } .site-footer .footer-grid > * { min-width: 0 !important; } /* Footer column headings */ .site-footer .footer-grid > div > h3, .site-footer .footer-grid > div > h4, .site-footer .footer-grid > div > .footer-title { display: block !important; margin: 2px 0 15px !important; line-height: 1.35 !important; } /* Direct links inside footer columns */ .site-footer .footer-grid > div:not(.footer-brand) > a, .site-footer .footer-grid > div:not(.footer-brand) > p > a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 0 9px !important; padding: 0 !important; color: var(--text-light) !important; font-size: 13px !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Existing .footer-links markup */ .site-footer .footer-links, .site-footer .footer-links ul { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-links li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .site-footer .footer-links a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Legal/policy links: keep them clearly separated from the main columns. */ .site-footer .footer-brand .footer-title + a, .site-footer .footer-brand > a, .site-footer .footer-brand > p > a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 0 8px !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Legal links inside a paragraph: force one policy per line. */ .site-footer .footer-brand .footer-title ~ p a, .site-footer .footer-brand .footer-title ~ div a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 0 8px !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Bottom legal/copyright row */ .site-footer .footer-bottom-inner { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 20px 30px !important; flex-wrap: wrap !important; } .site-footer .footer-bottom p { margin: 0 !important; line-height: 1.6 !important; } /* Responsive footer */ @media (max-width: 1000px) { .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 30px !important; } .site-footer .footer-brand { grid-column: 1 / -1 !important; max-width: 650px !important; } } @media (max-width: 760px) { .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 22px !important; } .site-footer .footer-brand { grid-column: 1 / -1 !important; max-width: 100% !important; } .site-footer .footer-bottom-inner { flex-direction: column !important; align-items: flex-start !important; } } @media (max-width: 480px) { .site-footer .footer-grid { grid-template-columns: 1fr !important; gap: 26px !important; } .site-footer .footer-brand { grid-column: auto !important; } } /* ============================================================ FSI DEFENCE SECURITY — HOMEPAGE + CTA + FOOTER FINAL POLISH ============================================================ */ .hero { padding: 96px 0 86px; background: radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.13), transparent 31%), radial-gradient(circle at 8% 78%, rgba(96, 165, 250, 0.08), transparent 28%), linear-gradient(180deg, #ffffff 0%, #f7faff 100%); } .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); gap: 58px; align-items: center; } .hero-content { max-width: 680px; } .hero h1 { max-width: 760px; margin-bottom: 20px; font-size: clamp(44px, 5vw, 62px); line-height: 1.08; } .hero-description { max-width: 620px; margin-bottom: 26px; font-size: 17px; line-height: 1.75; } .hero-actions { gap: 13px; } .hero-trust { gap: 12px 22px; margin-top: 25px; } .hero-trust-item { padding: 7px 10px; background: rgba(255,255,255,.72); border: 1px solid rgba(226,232,240,.9); border-radius: 999px; } .security-card { padding: 25px; border-radius: 24px; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 22px 55px rgba(15,23,42,.10); } /* ---------- CTA ---------- */ .cta-section { position: relative; padding: 72px 0 78px; background: radial-gradient(circle at 8% 15%, rgba(37,99,235,.08), transparent 30%), linear-gradient(180deg, #f7faff 0%, #ffffff 100%); border-top: 1px solid #edf2f7; } .cta-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 42px; overflow: hidden; padding: 42px 46px; background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #f8fbff 100%); border: 1px solid #dbeafe; border-radius: 24px; box-shadow: 0 18px 48px rgba(15,23,42,.07); } .cta-card::before { content: ""; position: absolute; width: 260px; height: 260px; top: -155px; right: -80px; border-radius: 50%; background: rgba(37,99,235,.07); pointer-events: none; } .cta-content { position: relative; z-index: 2; max-width: 680px; } .cta-content .eyebrow { margin-bottom: 10px; } .cta-content h2 { margin-bottom: 11px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.035em; } .cta-content p { max-width: 620px; margin: 0; font-size: 14px; line-height: 1.7; } .cta-actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 11px; } .cta-actions .btn { white-space: nowrap; } /* ---------- Footer ---------- */ .site-footer { margin-top: 0 !important; background: #ffffff !important; border-top: 1px solid #e5eaf0 !important; } .site-footer > .container { width: min(calc(100% - 40px), var(--container)) !important; } .site-footer .footer-grid { display: grid !important; grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 1fr)) !important; gap: 44px !important; align-items: start !important; padding: 58px 0 46px !important; } .site-footer .footer-brand { min-width: 0 !important; max-width: 370px !important; } .site-footer .footer-brand > .brand { display: inline-flex !important; margin-bottom: 4px !important; } .site-footer .footer-brand > p { max-width: 350px !important; margin: 15px 0 0 !important; color: #64748b !important; font-size: 13px !important; line-height: 1.7 !important; } .site-footer .footer-address { margin-top: 17px !important; color: #7b8794 !important; font-size: 12px !important; } .site-footer .footer-column { min-width: 0 !important; } .site-footer .footer-column h3, .site-footer .footer-legal h3 { margin: 2px 0 15px !important; color: #172033 !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } /* Every footer column link is vertical and separated */ .site-footer .footer-column > a, .site-footer .footer-column > p > a, .site-footer .footer-column .footer-links > li > a, .site-footer .footer-column .footer-links a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 0 10px !important; padding: 0 !important; color: #5f6b7a !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: anywhere !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease !important; } .site-footer .footer-column > a:hover, .site-footer .footer-column .footer-links a:hover { color: #2563eb !important; transform: translateX(2px); } /* Legal section */ .site-footer .footer-legal { display: block !important; width: 100% !important; padding: 25px 0 23px !important; border-top: 1px solid #edf1f5 !important; } .site-footer .footer-legal-links { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px 28px !important; width: 100% !important; } .site-footer .footer-legal-links a { display: block !important; width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding: 2px 0 !important; color: #64748b !important; font-size: 12px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: anywhere !important; text-decoration: none !important; transition: color .2s ease, transform .2s ease !important; } .site-footer .footer-legal-links a:hover { color: #2563eb !important; transform: translateX(2px); } /* Bottom row */ .site-footer .footer-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px 30px !important; flex-wrap: wrap !important; width: 100% !important; padding: 19px 0 23px !important; border-top: 1px solid #edf1f5 !important; } .site-footer .footer-bottom p { margin: 0 !important; color: #7b8794 !important; font-size: 11px !important; line-height: 1.6 !important; } .site-footer .footer-bottom p:last-child { color: #94a3b8 !important; text-align: right; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr !important; gap: 42px !important; } .hero-content { max-width: 820px !important; margin: 0 auto !important; text-align: center; } .hero-description { margin-left: auto !important; margin-right: auto !important; } .hero-actions, .hero-trust { justify-content: center !important; } .security-card { width: min(100%, 620px); margin: 0 auto; } .cta-card { align-items: flex-start; flex-direction: column; gap: 25px; } .cta-actions { justify-content: flex-start; } .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 32px !important; } .site-footer .footer-brand { grid-column: 1 / -1 !important; max-width: 680px !important; } .site-footer .footer-legal-links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .hero { padding: 72px 0 62px; } .hero h1 { font-size: 40px; } .hero-description { font-size: 16px; } .cta-section { padding: 52px 0 58px; } .cta-card { padding: 31px 25px; border-radius: 20px; } .cta-content h2 { font-size: 30px; } .cta-actions { width: 100%; flex-direction: column; align-items: stretch; } .cta-actions .btn { width: 100%; } .site-footer > .container { width: min(calc(100% - 30px), var(--container)) !important; } .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 22px !important; padding: 46px 0 36px !important; } .site-footer .footer-brand { grid-column: 1 / -1 !important; max-width: 100% !important; } .site-footer .footer-legal-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px 20px !important; } .site-footer .footer-bottom { align-items: flex-start !important; flex-direction: column !important; gap: 8px !important; } .site-footer .footer-bottom p:last-child { text-align: left; } } @media (max-width: 480px) { .hero { padding: 58px 0 52px; } .hero h1 { font-size: 34px; } .hero-actions { flex-direction: column !important; } .hero-actions .btn { width: 100%; } .cta-content h2 { font-size: 27px; } .site-footer .footer-grid { grid-template-columns: 1fr !important; gap: 27px !important; } .site-footer .footer-brand { grid-column: auto !important; } .site-footer .footer-legal-links { grid-template-columns: 1fr !important; gap: 8px !important; } }