/*
Theme Name:  CSI Cyber Security Intelligence
Theme URI:   https://cybersecurityinc.net
Author:      Cyber Security Inc.
Author URI:  https://cybersecurityinc.net
Description: AI Transformation for Application Security. Cyan-blue + orange palette. Fully dynamic via WordPress Customizer, CPTs, AJAX forms, SEO, Schema. Agentic AI. Proactive Security.
Version:     3.15.6
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: csi-theme
Tags: custom-background,custom-logo,custom-menu,featured-images,full-width-template,theme-options,light,accessibility-ready
*/

/* ============================================================
   DESIGN TOKENS — all prefixed --csi-* for WP safety
   Cyan-blue #03C4FD + Orange #FF6B2B palette.
   These are default values; csi_customizer_css() in
   customizer.php outputs a <style id="csi-custom-props">
   tag that overrides these with live Customizer values.
   ============================================================ */
:root {
	/* Primary — Cyan Blue */
	--csi-pri:       #03C4FD;
	--csi-pri-d:     #00A8DB;
	--csi-pri-dd:    #0087B5;
	--csi-pri-l:     #5DD9FF;
	--csi-pri-xl:    #E0F8FF;
	--csi-pri-2xl:   #F0FCFF;

	/* Accent — Orange */
	--csi-acc:       #FF6B2B;
	--csi-acc-d:     #E5531A;
	--csi-acc-l:     #FF8C56;
	--csi-acc-xl:    #FFF0E8;

	/* Dark Navy — hero, mission, footer, CTA */
	--csi-dark:      #080F1E;
	--csi-dark-2:    #0B1528;
	--csi-dark-3:    #0E1C35;
	--csi-dark-4:    #162240;

	/* Light Backgrounds */
	--csi-bg:        #FFFFFF;
	--csi-bg-2:      #F4FBFF;
	--csi-bg-3:      #EAF7FD;
	--csi-bg-4:      #DDF3FC;

	/* Text — WCAG AA+ on light backgrounds */
	--csi-tx:        #050E1C;
	--csi-tx-2:      #1A3248;
	--csi-tx-3:      #4A6480;
	--csi-tx-4:      #8AA5BE;
	--csi-tx-inv:    #FFFFFF;
	--csi-tx-inv-2:  #B8DFEF;

	/* Borders */
	--csi-bdr:       rgba(3,196,253,.15);
	--csi-bdr-2:     rgba(3,196,253,.32);
	--csi-bdr-3:     rgba(3,196,253,.55);

	/* Shadows */
	--csi-sh-sm:  0 1px  4px rgba(3,196,253,.10), 0 0 0 1px rgba(3,196,253,.07);
	--csi-sh:     0 4px 20px rgba(3,196,253,.13), 0 0 0 1px rgba(3,196,253,.07);
	--csi-sh-lg:  0 12px 44px rgba(3,196,253,.17), 0 0 0 1px rgba(3,196,253,.08);
	--csi-sh-pri: 0 6px 24px rgba(3,196,253,.35);
	--csi-sh-acc: 0 6px 24px rgba(255,107,43,.32);

	/* Layout */
	--csi-nav-h:   72px;
	--csi-max-w:  1200px;
	--csi-pad:     44px;
	--csi-rad:     10px;
	--csi-rad-sm:   5px;
	--csi-rad-lg:  18px;

	/* Spacing */
	--csi-sp-xs:   8px;
	--csi-sp-sm:  16px;
	--csi-sp-md:  24px;
	--csi-sp-lg:  40px;
	--csi-sp-xl:  64px;
	--csi-sp-2xl: 52px;
	--csi-sp-3xl: 60px;

	/* Typography */
	--csi-font-display: 'Bebas Neue','Arial Black',sans-serif;
	--csi-font-body:    'Syne',system-ui,-apple-system,sans-serif;
	--csi-font-mono:    'JetBrains Mono','Courier New',monospace;

	/* Motion */
	--csi-ease: cubic-bezier(.4,0,.2,1);
	--csi-dur:  .28s;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body {
	background:             var(--csi-bg);
	background-color:       #ffffff; /* hard fallback — defeats WP custom-background injection */
	color:                  var(--csi-tx);
	font-family:            var(--csi-font-body);
	font-size:              16px;
	line-height:            1.70;
	-webkit-font-smoothing: antialiased;
	overflow-x:             hidden;
}
a { color:var(--csi-pri-dd); text-decoration:none; transition:color var(--csi-dur) var(--csi-ease) }
a:hover { color:var(--csi-pri-d) }
a:focus-visible { outline:2px solid var(--csi-pri); outline-offset:3px; border-radius:2px }
img,svg { max-width:100%; height:auto; display:block }
button,input,select,textarea { font-family:inherit }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6 { color:var(--csi-tx); font-weight:700; line-height:1.2 }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--csi-bg-2) }
::-webkit-scrollbar-thumb { background:var(--csi-pri); border-radius:3px }

/* ============================================================
   LAYOUT
   ============================================================ */
.csi-wrap {
	max-width: var(--csi-max-w);
	margin:    0 auto;
	padding:   0 var(--csi-pad);
	width:     100%;
}
.csi-section          { padding:var(--csi-sp-3xl) var(--csi-pad) }
/* Light sections — white/near-white for readability */
.csi-section--light   { background:#FFFFFF }
.csi-section--tint    { background:var(--csi-bg-2); border-top:1px solid rgba(3,196,253,.14); border-bottom:1px solid rgba(3,196,253,.14) }
.csi-section--alt     { background:var(--csi-bg-3); border-top:1px solid rgba(3,196,253,.12); border-bottom:1px solid rgba(3,196,253,.12) }
/* Fallback for older browsers */
@supports not (background:color-mix(in srgb,#000 80%,#fff)) {
	.csi-section--light { background:#FFFFFF }
	.csi-section--tint  { background:#F4FBFF }
	.csi-section--alt   { background:#EAF7FD }
}
/* Text colour in light sections */
.csi-section--light .csi-label,
.csi-section--tint  .csi-label,
.csi-section--alt   .csi-label  { color:var(--csi-pri-dd,#007BA8) }
.csi-section--light .csi-label::before,
.csi-section--tint  .csi-label::before,
.csi-section--alt   .csi-label::before { background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc)) }
.csi-section--light .csi-display,
.csi-section--tint  .csi-display,
.csi-section--alt   .csi-display { color:var(--csi-dark) }
.csi-section--light p,
.csi-section--tint  p,
.csi-section--alt   p { color:var(--csi-tx-2) }
.csi-section--light h2, .csi-section--light h3,
.csi-section--tint  h2, .csi-section--tint  h3,
.csi-section--alt   h2, .csi-section--alt   h3 { color:var(--csi-dark) }

.csi-g2 { display:grid; grid-template-columns:1fr 1fr; gap:40px }
.csi-g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.csi-g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.csi-display { font-family:var(--csi-font-display); letter-spacing:2px; line-height:1 }
.csi-mono    { font-family:var(--csi-font-mono) }

.csi-label {
	display:inline-flex; align-items:center; gap:10px;
	font-family:var(--csi-font-mono); font-size:11px; font-weight:500;
	letter-spacing:4px; text-transform:uppercase;
	color:var(--csi-pri-dd); margin-bottom:14px;
}
.csi-label::before {
	content:''; display:inline-block; width:20px; height:2px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc));
	border-radius:2px; flex-shrink:0;
}
.csi-label--inv          { color:var(--csi-pri-l) }
.csi-label--inv::before  { background:linear-gradient(90deg,var(--csi-pri-l),var(--csi-acc-l)) }

/* Gradient text */
.csi-grad {
	background:linear-gradient(130deg,var(--csi-pri-dd) 0%,var(--csi-pri) 45%,var(--csi-acc) 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.csi-grad--inv {
	background:linear-gradient(130deg,#5DD9FF 0%,#03C4FD 45%,#FF8C56 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.csi-btn {
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:14px 32px; font-family:var(--csi-font-mono); font-size:11px;
	font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
	cursor:pointer; border:none; transition:all var(--csi-dur) var(--csi-ease);
	border-radius:100px; white-space:nowrap; text-decoration:none;
	position:relative; overflow:hidden;
}
.csi-btn:hover { text-decoration:none }

/* Primary — Solid cyan, no glow ever */
.csi-btn--pri {
	background:var(--csi-pri);
	color:#fff !important;
	box-shadow:0 2px 18px rgba(3,196,253,.45),0 0 40px rgba(3,196,253,.18);
	position:relative; z-index:2; cursor:pointer !important;
}
.csi-btn--pri:hover {
	background:var(--csi-pri-l);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 4px 24px rgba(3,196,253,.55),0 0 48px rgba(3,196,253,.22);
}
.csi-btn--pri:active {
	background:var(--csi-pri);
	color:#fff;
	transform:translateY(0);
	box-shadow:0 2px 18px rgba(3,196,253,.45);
}
/* Safety: ensure primary button text is ALWAYS dark — never white */
.csi-btn.csi-btn--pri { color:#fff !important }

/* Accent — Solid orange, persistent glow, no color change ever */
.csi-btn--acc {
	background:var(--csi-acc);
	color:#fff;
	box-shadow:0 4px 24px rgba(255,107,43,.45), 0 0 48px rgba(255,107,43,.22);
}
.csi-btn--acc:hover {
	background:var(--csi-acc);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 4px 24px rgba(255,107,43,.45), 0 0 48px rgba(255,107,43,.22);
}
.csi-btn--acc:active {
	background:var(--csi-acc);
	color:#fff;
	transform:translateY(0);
	box-shadow:0 4px 24px rgba(255,107,43,.45), 0 0 48px rgba(255,107,43,.22);
}

/* Secondary — outlined pill */
.csi-btn--sec {
	background:transparent;
	color:var(--csi-pri-l);
	border:2px solid var(--csi-pri);
	border-radius:100px;
}
.csi-btn--sec:hover { background:rgba(3,196,253,.18); color:#fff; transform:translateY(-1px) }

/* Ghost — pill on dark backgrounds */
.csi-btn--ghost {
	background:rgba(3,196,253,.16);
	color:#fff;
	border:1.5px solid rgba(3,196,253,.55);
	border-radius:100px;
	backdrop-filter:blur(8px);
}
.csi-btn--ghost:hover { background:rgba(3,196,253,.22); color:#fff; border-color:rgba(3,196,253,.58); transform:translateY(-2px) }

/* Sizes */
.csi-btn--sm   { padding:10px 22px; font-size:10px; letter-spacing:2px }
.csi-btn--lg   { padding:17px 44px; font-size:12px }
.csi-btn--xl   { padding:20px 56px; font-size:13px }
.csi-btn--full { width:100%; justify-content:center }

.csi-btn.is-loading { opacity:.72; pointer-events:none }
.csi-spinner {
	display:inline-block; width:15px; height:15px;
	border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
	border-radius:50%; animation:csi-spin .65s linear infinite;
	margin-left:6px; vertical-align:middle;
}

/* ============================================================
   CARDS
   ============================================================ */
.csi-card {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad); padding:22px 20px; box-shadow:var(--csi-sh-sm);
	transition:box-shadow var(--csi-dur) var(--csi-ease),border-color var(--csi-dur),transform var(--csi-dur);
	position:relative; overflow:visible;
}
.csi-card::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc));
	opacity:0; transition:opacity var(--csi-dur); border-radius:var(--csi-rad) var(--csi-rad) 0 0;
	z-index:0; pointer-events:none;
}
.csi-card:hover { box-shadow:var(--csi-sh-lg); border-color:var(--csi-bdr-2); transform:translateY(-4px); z-index:1 }
.csi-card:hover::before { opacity:1 }

/* ============================================================
   BADGES
   ============================================================ */
.csi-badge {
	display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
	border-radius:100px; font-family:var(--csi-font-mono); font-size:10px;
	font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.csi-badge--pri  { background:var(--csi-pri-xl); color:var(--csi-pri-dd) }
.csi-badge--acc  { background:var(--csi-acc-xl); color:var(--csi-acc-d) }
.csi-badge--dark { background:rgba(3,196,253,.14); color:rgba(255,255,255,.9) }

/* ============================================================
   FORMS
   ============================================================ */
.csi-form-field { margin-bottom:18px }
.csi-label-field {
	display:block; font-weight:600; font-size:13px;
	color:var(--csi-tx-2); margin-bottom:7px;
}
.csi-input,.csi-textarea,.csi-select {
	width:100%; background:var(--csi-bg); border:1.5px solid rgba(3,196,253,.35);
	border-radius:var(--csi-rad-sm); color:var(--csi-tx); padding:13px 16px;
	font-size:15px; line-height:1.5; outline:none;
	transition:border-color var(--csi-dur),box-shadow var(--csi-dur);
	-webkit-appearance:none; font-family:var(--csi-font-body);
}
.csi-input:focus,.csi-textarea:focus,.csi-select:focus {
	border-color:var(--csi-pri); box-shadow:0 0 0 3px rgba(3,196,253,.14);
}
.csi-input::placeholder,.csi-textarea::placeholder { color:var(--csi-tx-4) }
.csi-textarea { resize:vertical; min-height:110px }
.csi-select option { background:var(--csi-bg); color:var(--csi-tx) }
.csi-form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }

.csi-notice { padding:12px 18px; border-radius:var(--csi-rad-sm); font-size:14px; font-weight:500; margin-bottom:16px }
.csi-notice--ok  { background:#E6F9FF; color:#00627A; border:1px solid #7DD9F5 }
.csi-notice--err { background:#FFF4EE; color:#9B3700;  border:1px solid #FFB38A }

/* ============================================================
   CONTACT FORM FIELD CLASSES (contact-form.php)
   These classes are used in template-parts/sections/contact-form.php
   ============================================================ */
.csi-field { margin-bottom:18px }

.csi-lbl {
	display:block;
	font-weight:700;
	font-size:13px;
	color:var(--csi-tx);
	margin-bottom:8px;
	letter-spacing:.3px;
}

.csi-g2-form {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin-bottom:0;
}


/* Dark section button overrides — ensure sec/ghost readable on dark bgs */
.csi-section--light .csi-btn--sec,
.csi-section--tint  .csi-btn--sec,
.csi-section--alt   .csi-btn--sec { color:var(--csi-pri-dd); border-color:var(--csi-pri); }
.csi-section--light .csi-btn--sec:hover,
.csi-section--tint  .csi-btn--sec:hover,
.csi-section--alt   .csi-btn--sec:hover { background:rgba(3,196,253,.18); color:#fff; border-color:var(--csi-pri-l); }

@media (max-width:600px) {
	.csi-g2-form { grid-template-columns:1fr }
}


/* ============================================================
   NAVIGATION
   ============================================================ */
#csi-header {
	position:fixed; top:0; left:0; right:0; z-index:999;
	height:var(--csi-nav-h); display:flex; align-items:center;
	justify-content:space-between; padding:0 var(--csi-pad);
	background:rgba(255,255,255,.94); backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	border-bottom:1px solid var(--csi-bdr);
	transition:box-shadow var(--csi-dur) var(--csi-ease);
}
#csi-header.scrolled { box-shadow:0 2px 24px rgba(3,196,253,.13); border-color:var(--csi-bdr-2) }

.csi-logo a { display:flex; align-items:center }
.csi-logo svg { height:44px; width:auto }
.csi-nav { display:flex; align-items:center; gap:36px }
.csi-nav-list { display:flex; align-items:center; gap:4px }
.csi-nav-list a {
	font-family:var(--csi-font-body); font-size:14px; font-weight:600;
	color:var(--csi-tx-2); padding:8px 14px; border-radius:var(--csi-rad-sm);
	transition:background var(--csi-dur),color var(--csi-dur);
}
.csi-nav-list a:hover { background:var(--csi-bg-3); color:var(--csi-pri-dd) }
.csi-nav-list li.current-menu-item > a,
.csi-nav-list li.current_page_item > a { color:var(--csi-pri-dd); background:var(--csi-pri-xl) }

.admin-bar #csi-header { top:32px }

/* Hamburger button */
.csi-hamburger {
	display:none; flex-direction:column; gap:5px;
	background:none; border:none; cursor:pointer; padding:8px; z-index:1001;
}
.csi-hamburger span {
	display:block; width:22px; height:2px; background:var(--csi-tx);
	transition:all .3s; transform-origin:center; border-radius:2px;
}
.csi-hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.csi-hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0) }
.csi-hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile menu */
.csi-mobile-nav {
	display:none; position:fixed; top:var(--csi-nav-h); left:0; right:0; bottom:0;
	background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
	flex-direction:column; padding:28px 24px; gap:4px;
	border-top:1px solid var(--csi-bdr); z-index:998; overflow-y:auto;
}
.csi-mobile-nav.open { display:flex }
.csi-mobile-nav a {
	font-size:16px; font-weight:600; color:var(--csi-tx-2);
	padding:14px 16px; border-radius:var(--csi-rad-sm);
	transition:background var(--csi-dur),color var(--csi-dur);
}
.csi-mobile-nav a:hover { background:var(--csi-bg-3); color:var(--csi-pri-dd) }

/* ============================================================
   HERO (dark navy)
   ============================================================ */
#csi-hero {
	min-height:0; display:flex; align-items:center;
	position:relative; overflow:hidden; padding-top:var(--csi-nav-h);
	background:linear-gradient(160deg,var(--csi-dark) 0%,var(--csi-dark-3) 40%,var(--csi-dark-2) 100%);
	isolation:isolate; z-index:1;
	margin-bottom:0;
}
.hero-grid-bg {
	position:absolute; inset:0; pointer-events:none;
	background-image:linear-gradient(rgba(3,196,253,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(3,196,253,.05) 1px,transparent 1px);
	background-size:56px 56px;
}
.hero-orb { position:absolute; border-radius:50%; pointer-events:none }
.hero-orb-1 {
	width:680px; height:680px;
	background:radial-gradient(circle,rgba(3,196,253,.18) 0%,transparent 65%);
	top:-80px; right:-100px; animation:csi-orb-drift 18s ease-in-out infinite;
}
.hero-orb-2 {
	width:460px; height:460px;
	background:radial-gradient(circle,rgba(255,107,43,.12) 0%,transparent 65%);
	bottom:-40px; left:-70px; animation:csi-orb-drift 22s ease-in-out infinite reverse;
}
.hero-scan {
	position:absolute; left:0; right:0; height:1px;
	background:linear-gradient(90deg,transparent,rgba(3,196,253,.60),transparent);
	animation:csi-scanline 7s linear infinite; pointer-events:none; z-index:1;
}
.hero-content {
	position:relative; z-index:2; width:100%;
	display:grid; grid-template-columns:1fr 340px; gap:48px;
	align-items:center; padding:60px 0 72px;
}
.hero-text { max-width:560px }
@media (max-width:960px) {
	.hero-content { grid-template-columns:1fr; gap:36px }
	.hero-ai-card { display:none }
}
.hero-logo { margin-bottom:20px }
.hero-ai-card {
	background:rgba(255,255,255,.04); border:1px solid rgba(3,196,253,.22);
	border-radius:14px; padding:22px; position:relative; overflow:hidden;
}
.hero-ai-card::before {
	content:''; position:absolute; top:0; left:0; right:0; height:2.5px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc));
	border-radius:14px 14px 0 0;
}
.hero-logo svg { height:60px; width:auto }

.hero-badge {
	display:inline-flex; align-items:center; gap:10px;
	background:rgba(3,196,253,.12); border:1px solid rgba(3,196,253,.30);
	border-radius:100px; padding:8px 20px; margin-bottom:18px;
}
.hero-badge-dot {
	width:7px; height:7px; border-radius:50%;
	background:var(--csi-acc-l);
	box-shadow:0 0 10px var(--csi-acc-l),0 0 20px rgba(255,140,86,.5);
	animation:csi-pulse 2.4s ease-out infinite; flex-shrink:0;
}
.hero-badge-txt { font-family:var(--csi-font-mono); font-size:10px; letter-spacing:4px; color:var(--csi-pri-l); text-transform:uppercase }

.hero-title { font-family:var(--csi-font-display); font-size:clamp(38px,5vw,72px); line-height:.93; letter-spacing:2px; color:#fff; margin-bottom:24px }
.hero-subtitle { font-size:clamp(16px,1.7vw,19px); color:var(--csi-tx-inv-2); line-height:1.78; max-width:620px; margin-bottom:22px }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:32px }

.hero-terminal { font-family:var(--csi-font-mono); font-size:11.5px; color:rgba(3,196,253,.42); display:flex; align-items:center; gap:8px }
.hero-terminal .prompt { color:rgba(3,196,253,.75) }
.hero-terminal .slash  { color:rgba(3,196,253,.28) }
.hero-terminal .cursor { animation:csi-blink 1.1s step-end infinite }

.hero-deco {
	position:absolute; right:4%; top:50%; transform:translateY(-50%);
	font-family:var(--csi-font-display); font-size:clamp(120px,16vw,230px);
	color:rgba(3,196,253,.055); line-height:1; letter-spacing:-14px;
	animation:csi-float 9s ease-in-out infinite; pointer-events:none; user-select:none;
}

/* ============================================================
   STATS BAR
   ============================================================ */
.csi-stats-bar { background:var(--csi-bg); border-bottom:1px solid var(--csi-bdr); box-shadow:0 4px 20px rgba(3,196,253,.06); position:relative; z-index:10 }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.stat-item { text-align:center; padding:28px 16px; position:relative; transition:background var(--csi-dur) }
.stat-item:hover { background:var(--csi-bg-2) }
.stat-item::after { content:''; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--csi-bdr) }
.stat-item:last-child::after { display:none }
.stat-val {
	font-family:var(--csi-font-display); font-size:clamp(42px,5.2vw,62px); line-height:1;
	background:linear-gradient(130deg,var(--csi-pri-dd) 0%,var(--csi-pri) 50%,var(--csi-acc) 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
	margin-bottom:9px;
}
.stat-lbl { font-family:var(--csi-font-mono); font-size:11px; letter-spacing:2.5px; color:var(--csi-tx-3); text-transform:uppercase; font-weight:500 }

/* ============================================================
   AI TRANSFORMATION PILLARS BANNER
   ============================================================ */
.csi-ai-banner {
	background:linear-gradient(135deg,var(--csi-dark) 0%,var(--csi-dark-4) 100%);
	padding:40px var(--csi-pad); position:relative; overflow:hidden;
}
.csi-ai-banner::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg,transparent,var(--csi-pri) 40%,var(--csi-acc) 70%,transparent);
}
.ai-pillar {
	background:rgba(3,196,253,.06); border:1px solid rgba(3,196,253,.18);
	border-radius:var(--csi-rad); padding:28px 24px; transition:all var(--csi-dur);
}
.ai-pillar:hover { background:rgba(3,196,253,.10); border-color:rgba(3,196,253,.32); transform:translateY(-3px) }
.ai-pillar-icon { width:44px; height:44px; border-radius:var(--csi-rad-sm); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px }

/* ============================================================
   ABOUT — APPROACH BOX
   ============================================================ */
.approach-box {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad); padding:24px 22px;
	box-shadow:var(--csi-sh-sm); position:relative; overflow:hidden;
}
.approach-box::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc));
	border-radius:var(--csi-rad) var(--csi-rad) 0 0;
}
.approach-step {
	display:flex; align-items:flex-start; gap:18px; padding:15px 0;
	border-bottom:1px solid var(--csi-bdr); transition:padding-left var(--csi-dur);
}
.approach-step:last-child { border-bottom:none; padding-bottom:0 }
.approach-step:hover { padding-left:4px }
.approach-num { font-family:var(--csi-font-display); font-size:28px; color:var(--csi-pri); opacity:.3; line-height:1; min-width:32px }

/* ============================================================
   MISSION STRIP
   ============================================================ */
.csi-mission {
	background:linear-gradient(135deg,var(--csi-dark) 0%,var(--csi-dark-4) 100%);
	padding:44px var(--csi-pad); position:relative; overflow:hidden;
}
.csi-mission::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg,transparent,var(--csi-pri) 40%,var(--csi-acc) 70%,transparent);
}
.mission-text { font-size:clamp(22px,2.8vw,35px); font-weight:700; color:#fff; line-height:1.45; max-width:860px }
.mission-text em     { color:var(--csi-pri-l); font-style:normal }
.mission-text strong { color:var(--csi-acc-l) }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-icon {
	width:52px; height:52px; border-radius:var(--csi-rad-sm);
	display:flex; align-items:center; justify-content:center;
	font-size:24px; margin-bottom:18px; flex-shrink:0; transition:all var(--csi-dur);
}
.svc-icon--pri { background:var(--csi-pri-xl); color:var(--csi-pri-dd) }
.svc-icon--acc { background:var(--csi-acc-xl); color:var(--csi-acc-d) }
.csi-card:hover .svc-icon--pri { background:var(--csi-pri); color:var(--csi-dark) }
.csi-card:hover .svc-icon--acc { background:var(--csi-acc); color:#fff }

.svc-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.svc-tag {
	font-family:var(--csi-font-mono); font-size:10px; font-weight:600;
	letter-spacing:1px; color:var(--csi-pri-dd); background:var(--csi-pri-xl);
	border-radius:100px; padding:4px 12px; transition:all var(--csi-dur);
}
.svc-tag--acc { color:var(--csi-acc-d); background:var(--csi-acc-xl) }
.csi-card:hover .svc-tag     { background:var(--csi-pri); color:var(--csi-dark) }
.csi-card:hover .svc-tag--acc { background:var(--csi-acc); color:#fff }

.svc-more {
	display:inline-flex; align-items:center; gap:8px; margin-top:16px;
	font-family:var(--csi-font-mono); font-size:11px; font-weight:700;
	letter-spacing:2px; color:#fff !important; text-transform:uppercase;
	cursor:pointer !important; padding:11px 24px; border-radius:100px;
	background:var(--csi-pri) !important; border:2px solid var(--csi-pri) !important;
	box-shadow:0 3px 16px rgba(3,196,253,.50);
	position:relative; z-index:2; pointer-events:auto !important;
	transition:gap var(--csi-dur),background var(--csi-dur),box-shadow var(--csi-dur);
}
.svc-more:hover {
	gap:12px; color:#fff !important;
	background:var(--csi-pri-l) !important; border-color:var(--csi-pri-l) !important;
	box-shadow:0 6px 24px rgba(3,196,253,.65);
}
.svc-more--acc {
	color:#fff !important; background:var(--csi-acc) !important; border-color:var(--csi-acc) !important; box-shadow:0 3px 16px rgba(255,107,43,.50);
}
.svc-more--acc:hover {
	color:#fff; background:var(--csi-acc); border-color:var(--csi-acc);
}

/* Featured service card */
.csi-card--featured {
	background:linear-gradient(135deg,var(--csi-dark) 0%,var(--csi-dark-4) 100%) !important;
	border:1px solid rgba(3,196,253,.25); border-radius:var(--csi-rad);
	position:relative; overflow:visible;
	padding:0; color:var(--csi-tx-inv);
}
.csi-card--featured::before { opacity:1 }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-card {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad-lg); padding:40px 36px; box-shadow:var(--csi-sh-lg);
	transition:all var(--csi-dur); position:relative; overflow:hidden;
	text-align:center;
}
.team-card::before {
	content:''; position:absolute; top:0; left:0; right:0; height:4px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc),var(--csi-pri-l));
	border-radius:var(--csi-rad-lg) var(--csi-rad-lg) 0 0;
}
.team-card::after {
	content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg,var(--csi-acc),var(--csi-pri));
	transform:scaleX(0); transition:transform var(--csi-dur);
	border-radius:0 0 var(--csi-rad-lg) var(--csi-rad-lg);
}
.team-card:hover { box-shadow:0 20px 60px rgba(3,196,253,.18); transform:translateY(-6px); border-color:var(--csi-bdr-2) }
.team-card:hover::after { transform:scaleX(1) }

.team-avatar {
	width:96px; height:96px; border-radius:50%;
	background:linear-gradient(135deg,var(--csi-pri-xl),var(--csi-bg-3));
	border:3px solid var(--csi-pri);
	display:flex; align-items:center; justify-content:center;
	font-family:var(--csi-font-display); font-size:32px; font-weight:900;
	color:var(--csi-pri-dd); margin:0 auto 20px; overflow:hidden;
	transition:all var(--csi-dur);
	box-shadow:0 0 0 6px rgba(3,196,253,.10);
}
.team-card:hover .team-avatar { background:var(--csi-pri); color:var(--csi-dark); border-color:var(--csi-pri); box-shadow:0 0 0 6px rgba(3,196,253,.22) }
.team-avatar img { width:100%; height:100%; object-fit:cover }

.team-name { font-weight:700; font-size:22px; color:var(--csi-tx); margin-bottom:6px }
.team-role {
	font-family:var(--csi-font-mono); font-size:11px; letter-spacing:2px;
	color:var(--csi-acc); font-weight:700; margin-bottom:18px; text-transform:uppercase;
	display:inline-block; padding:4px 14px;
	background:rgba(255,107,43,.08); border:1px solid rgba(255,107,43,.25);
	border-radius:20px;
}
.team-bio  { font-size:14.5px; color:var(--csi-tx-3); line-height:1.75; max-width:320px; margin:0 auto }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-card {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad); padding:34px 28px; box-shadow:var(--csi-sh-sm);
	transition:all var(--csi-dur);
}
.testi-card:hover { box-shadow:var(--csi-sh-lg); transform:translateY(-4px) }
.testi-stars  { color:#F59E0B; font-size:15px; letter-spacing:2px; margin-bottom:12px }
.testi-text   { font-size:15px; color:var(--csi-tx-2); line-height:1.77; margin-bottom:22px; font-style:italic }
.testi-author { font-weight:700; font-size:15px; color:var(--csi-tx); margin-bottom:3px }
.testi-co     { font-family:var(--csi-font-mono); font-size:11px; color:var(--csi-pri-dd); letter-spacing:1.5px; font-weight:600 }

/* ============================================================
   BLOG GRID
   ============================================================ */
.blog-grid { display:grid; grid-template-columns:1.42fr 1fr; gap:22px }
.blog-thumb-img { transition:transform .4s var(--csi-ease) }
.csi-card:hover .blog-thumb-img { transform:scale(1.04) }
.blog-side  { display:flex; flex-direction:column; gap:14px }
.blog-tag {
	display:inline-block; font-family:var(--csi-font-mono); font-size:9px; font-weight:600;
	letter-spacing:2.5px; text-transform:uppercase; color:var(--csi-pri-dd);
	background:rgba(3,196,253,.14); border:1px solid rgba(3,196,253,.30);
	border-radius:100px; padding:4px 12px;
	transition:all var(--csi-dur); cursor:pointer; text-decoration:none; position:relative; z-index:2;
}
.blog-tag:hover  { background:var(--csi-pri); color:var(--csi-dark) }
.blog-tag--acc   { color:var(--csi-acc-d); background:var(--csi-acc-xl) }
.blog-tag--acc:hover { background:var(--csi-acc); color:#fff }
.blog-date { font-family:var(--csi-font-mono); font-size:11px; color:var(--csi-tx-3) }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.partner-tile {
	background:var(--csi-bg); border:1px solid var(--csi-bdr); border-radius:var(--csi-rad);
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding:18px 12px; gap:8px; box-shadow:var(--csi-sh-sm); transition:all var(--csi-dur);
}
.partner-tile:hover { box-shadow:var(--csi-sh-lg); border-color:var(--csi-bdr-2); transform:translateY(-4px) }
.partner-abbr {
	width:56px; height:56px; border-radius:var(--csi-rad-sm); background:var(--csi-pri-xl);
	display:flex; align-items:center; justify-content:center;
	font-family:var(--csi-font-display); font-size:14px; letter-spacing:1px;
	color:var(--csi-pri-dd); transition:all var(--csi-dur);
}
.partner-tile:hover .partner-abbr { background:var(--csi-pri); color:var(--csi-dark) }

/* ============================================================
   CAREERS
   ============================================================ */
.job-row {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad-sm); padding:20px 24px;
	display:flex; align-items:center; gap:18px; flex-wrap:wrap;
	box-shadow:var(--csi-sh-sm); margin-bottom:7px; transition:all var(--csi-dur);
}
.job-row:hover { box-shadow:var(--csi-sh); border-color:var(--csi-bdr-2); transform:translateX(4px) }
.job-tag { font-family:var(--csi-font-mono); font-size:11px; font-weight:600; color:var(--csi-tx-3); background:var(--csi-bg-3); border-radius:100px; padding:4px 12px; transition:all var(--csi-dur) }
.job-row:hover .job-tag { background:var(--csi-pri-xl); color:var(--csi-pri-dd) }
.job-type-badge { font-family:var(--csi-font-mono); font-size:11px; font-weight:600; color:var(--csi-acc-d); background:var(--csi-acc-xl); border-radius:100px; padding:4px 12px }

.perks-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.perk-item {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad-sm); padding:16px 18px;
	display:flex; align-items:center; gap:12px;
	box-shadow:var(--csi-sh-sm); transition:all var(--csi-dur);
}
.perk-item:hover { border-color:var(--csi-bdr-2); background:var(--csi-bg-2) }
.perk-icon { width:34px; height:34px; border-radius:var(--csi-rad-sm); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0 }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-info-row {
	display:flex; align-items:flex-start; gap:16px; padding:15px 0;
	border-bottom:1px solid var(--csi-bdr); transition:padding-left var(--csi-dur);
}
.contact-info-row:last-child { border-bottom:none }
.contact-info-row:hover { padding-left:4px }
.contact-icon {
	width:40px; height:40px; border-radius:var(--csi-rad-sm);
	background:var(--csi-pri-xl); color:var(--csi-pri-dd);
	display:flex; align-items:center; justify-content:center;
	font-size:16px; flex-shrink:0; margin-top:2px; transition:all var(--csi-dur);
}
.contact-info-row:hover .contact-icon { background:var(--csi-pri); color:var(--csi-dark) }

.contact-form-box {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad-lg); padding:28px 26px;
	box-shadow:var(--csi-sh-lg); position:relative; overflow:hidden;
}
.contact-form-box::before {
	content:''; position:absolute; top:0; left:0; right:0; height:4px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc),var(--csi-pri-l));
	border-radius:var(--csi-rad-lg) var(--csi-rad-lg) 0 0;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.csi-cta-section {
	background:linear-gradient(160deg,var(--csi-dark) 0%,var(--csi-dark-4) 55%,var(--csi-dark-2) 100%);
	padding:var(--csi-sp-3xl) var(--csi-pad); position:relative; overflow:hidden; text-align:center;
}
.csi-cta-section::before {
	content:''; position:absolute; inset:0;
	background-image:linear-gradient(rgba(3,196,253,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(3,196,253,.04) 1px,transparent 1px);
	background-size:56px 56px; pointer-events:none;
}

/* ============================================================
   FOOTER
   ============================================================ */
#csi-footer {
	background:var(--csi-dark); padding:44px var(--csi-pad) 28px;
	border-top:1px solid rgba(3,196,253,.12); color:var(--csi-tx-inv-2);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:28px }
.footer-heading { font-family:var(--csi-font-mono); font-size:11px; font-weight:600; letter-spacing:3px; color:var(--csi-pri-l); margin-bottom:16px; text-transform:uppercase }
.footer-nav li { margin-bottom:9px }
.footer-nav a { color:rgba(255,255,255,.50); font-size:14px; transition:color var(--csi-dur),padding-left var(--csi-dur); display:inline-block }
.footer-nav a:hover { color:#fff; padding-left:4px }
.footer-desc { color:rgba(255,255,255,.46); font-size:14px; line-height:1.75; max-width:280px }
.footer-social { display:flex; gap:10px; margin-top:20px }
.footer-social-btn {
	width:36px; height:36px; border-radius:var(--csi-rad-sm);
	border:1px solid rgba(3,196,253,.20); display:flex; align-items:center; justify-content:center;
	color:rgba(255,255,255,.48); font-size:13px; text-decoration:none; transition:all var(--csi-dur);
}
.footer-social-btn:hover { border-color:var(--csi-pri-l); color:var(--csi-pri-l); background:rgba(3,196,253,.10); transform:translateY(-2px) }
.footer-bottom { border-top:1px solid rgba(3,196,253,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px }
.footer-copy { font-family:var(--csi-font-mono); font-size:12px; color:rgba(255,255,255,.26) }

/* ============================================================
   DIALOGS
   ============================================================ */
.csi-overlay {
	position:fixed; inset:0; z-index:9000;
	background:rgba(5,14,28,.65); backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	display:flex; align-items:center; justify-content:center;
	padding:24px; overflow-y:auto;
	opacity:0; visibility:hidden;
	transition:opacity .3s var(--csi-ease),visibility .3s var(--csi-ease);
}
.csi-overlay.is-open { opacity:1; visibility:visible }

.csi-dialog {
	background:var(--csi-bg); border:1px solid var(--csi-bdr);
	border-radius:var(--csi-rad-lg); padding:46px 50px;
	max-width:620px; width:100%; box-shadow:var(--csi-sh-lg);
	position:relative; max-height:90vh; overflow-y:auto;
	transform:translateY(16px); transition:transform .3s var(--csi-ease);
}
.csi-dialog--wide { max-width:760px }
.csi-overlay.is-open .csi-dialog { transform:translateY(0) }
.csi-dialog::before {
	content:''; position:absolute; top:0; left:0; right:0; height:4px;
	background:linear-gradient(90deg,var(--csi-pri),var(--csi-acc));
	border-radius:var(--csi-rad-lg) var(--csi-rad-lg) 0 0;
}
.dialog-close {
	position:absolute; top:16px; right:16px; background:var(--csi-bg-2);
	border:none; border-radius:50%; color:var(--csi-tx-3);
	width:32px; height:32px; font-size:18px; line-height:32px;
	text-align:center; cursor:pointer; transition:all var(--csi-dur);
}
.dialog-close:hover { background:var(--csi-pri-xl); color:var(--csi-pri-dd) }

/* ============================================================
   BLOG / ARCHIVE / SINGLE / PAGE TEMPLATES
   ============================================================ */
.page-hero {
	padding:clamp(100px,14vw,148px) var(--csi-pad) 72px;
	background:linear-gradient(160deg,var(--csi-dark) 0%,var(--csi-dark-3) 60%,var(--csi-dark-2) 100%);
	position:relative; overflow:hidden;
}
.page-hero__title {
	font-family:var(--csi-font-display); font-size:clamp(44px,6vw,80px);
	line-height:1; letter-spacing:2px; color:#fff; margin-bottom:16px;
}
.entry-content { color:var(--csi-tx-2); line-height:1.88; font-size:17px; max-width:720px }
.entry-content h2,.entry-content h3,.entry-content h4 { color:var(--csi-tx); font-weight:700; margin:36px 0 14px }
.entry-content h2 { font-size:26px } .entry-content h3 { font-size:22px } .entry-content h4 { font-size:19px }
.entry-content p  { margin-bottom:22px }
.entry-content a  { color:var(--csi-pri-dd); font-weight:600; border-bottom:1px solid transparent }
.entry-content a:hover { border-bottom-color:var(--csi-pri) }
.entry-content ul,.entry-content ol { margin:0 0 22px 26px }
.entry-content ul { list-style:disc } .entry-content ol { list-style:decimal }
.entry-content li { margin-bottom:8px }
.entry-content blockquote { border-left:4px solid var(--csi-pri); padding:18px 24px; background:var(--csi-bg-2); border-radius:0 var(--csi-rad) var(--csi-rad) 0; margin:28px 0; color:var(--csi-tx-2); font-style:italic; font-size:18px }
.entry-content code { font-family:var(--csi-font-mono); font-size:14px; background:var(--csi-bg-3); color:var(--csi-pri-d); padding:2px 7px; border-radius:4px; border:1px solid var(--csi-bdr) }
.entry-content pre { background:var(--csi-dark); color:#e2e8f0; border-radius:var(--csi-rad); padding:24px; overflow-x:auto; margin-bottom:24px; font-family:var(--csi-font-mono); font-size:14px }
.entry-content img { border-radius:var(--csi-rad); margin:28px 0 }

/* Pagination */
.csi-pagination { display:flex; justify-content:center; align-items:center; gap:8px; padding-top:60px }
.csi-pagination .page-numbers {
	font-family:var(--csi-font-mono); font-size:13px; font-weight:600;
	color:var(--csi-tx-3); background:var(--csi-bg); border:1.5px solid var(--csi-bdr);
	border-radius:var(--csi-rad-sm); width:44px; height:44px;
	display:flex; align-items:center; justify-content:center; transition:all var(--csi-dur);
}
.csi-pagination .page-numbers:hover,
.csi-pagination .page-numbers.current { color:var(--csi-dark); border-color:var(--csi-pri); background:var(--csi-pri); transform:translateY(-2px); box-shadow:var(--csi-sh-pri) }

/* Search form */
.csi-search-form { display:flex; border-radius:var(--csi-rad-sm); overflow:hidden; border:1.5px solid var(--csi-bdr-2) }
.csi-search-form input[type="search"] { flex:1; background:var(--csi-bg); border:none; color:var(--csi-tx); padding:13px 16px; font-size:15px; outline:none }
.csi-search-form button { background:var(--csi-pri); border:none; color:var(--csi-dark); padding:13px 20px; cursor:pointer; font-family:var(--csi-font-mono); font-size:12px; font-weight:600; letter-spacing:2px; transition:background var(--csi-dur) }
.csi-search-form button:hover { background:var(--csi-pri-d) }

/* Sidebar */
.csi-sidebar { display:flex; flex-direction:column; gap:24px }
.csi-sidebar .widget { background:var(--csi-bg); border:1px solid var(--csi-bdr); border-radius:var(--csi-rad); padding:28px 24px; box-shadow:var(--csi-sh-sm) }

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.u-center { text-align:center }
.u-mb-16  { margin-bottom:16px } .u-mb-24 { margin-bottom:24px }
.u-mb-32  { margin-bottom:32px } .u-mb-48 { margin-bottom:48px }

/* Scroll-reveal */
.csi-animate { opacity:0; transform:translateY(22px) }
.csi-animate.is-visible { animation:csi-fade-up .65s var(--csi-ease) forwards }
.csi-animate:nth-child(2) { animation-delay:.06s } .csi-animate:nth-child(3) { animation-delay:.12s }
.csi-animate:nth-child(4) { animation-delay:.18s } .csi-animate:nth-child(5) { animation-delay:.24s }
.csi-animate:nth-child(6) { animation-delay:.30s }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes csi-scanline { 0% { top:-1px } 100% { top:100% } }
@keyframes csi-orb-drift {
	0%,100% { transform:translate(0,0) scale(1) }
	33%      { transform:translate(24px,-16px) scale(1.03) }
	66%      { transform:translate(-16px,12px) scale(.97) }
}
@keyframes csi-pulse {
	0%   { transform:scale(.92); box-shadow:0 0 0 0 rgba(255,140,86,.55) }
	60%  { transform:scale(1.14); box-shadow:0 0 0 12px rgba(255,140,86,0) }
	100% { transform:scale(.92); box-shadow:0 0 0 0 rgba(255,140,86,0) }
}
@keyframes csi-float { 0%,100% { transform:translateY(-50%) } 50% { transform:translateY(calc(-50% - 14px)) } }
@keyframes csi-blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
@keyframes csi-spin  { to { transform:rotate(360deg) } }
@keyframes csi-fade-up { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }

/* ============================================================
   RESPONSIVE — TABLET ≤ 1024px
   ============================================================ */
@media (max-width:1024px) {
	:root { --csi-pad:28px }
	.csi-g2        { grid-template-columns:1fr; gap:40px }
	.csi-g3        { grid-template-columns:repeat(2,1fr) }
	.csi-g4        { grid-template-columns:repeat(2,1fr) }
	.stats-grid    { grid-template-columns:repeat(2,1fr) }
	.blog-grid     { grid-template-columns:1fr; gap:18px }
	.blog-side     { display:grid; grid-template-columns:1fr 1fr; gap:14px }
	.partners-grid { grid-template-columns:repeat(3,1fr) }
	.footer-grid   { grid-template-columns:1fr 1fr; gap:36px }
	.csi-section   { padding:52px var(--csi-pad) }
	.csi-ai-banner { padding:48px var(--csi-pad) }
	.csi-mission   { padding:52px var(--csi-pad) }
	.csi-dialog    { padding:44px 40px }
}

/* ============================================================
   RESPONSIVE — MOBILE ≤ 768px
   ============================================================ */
@media (max-width:768px) {
	:root { --csi-pad:20px; --csi-nav-h:64px }
	.csi-hamburger        { display:flex }
	.csi-nav-list,
	.csi-nav > .csi-btn   { display:none }
	.admin-bar #csi-header { top:46px }
	.hero-deco  { display:none }
	.hero-title { font-size:clamp(32px,10vw,52px) }
	.hero-btns  { flex-direction:column }
	.hero-btns .csi-btn { width:100%; justify-content:center }
	.csi-g3,.partners-grid { grid-template-columns:1fr }
	.footer-grid           { grid-template-columns:1fr }
	.stats-grid            { grid-template-columns:repeat(2,1fr) }
	.csi-form-grid-2,.perks-grid,.blog-side { grid-template-columns:1fr }
	.contact-form-box,.csi-dialog { padding:26px 20px }
	.footer-bottom { flex-direction:column; text-align:center }
	.stat-item::after { display:none }
	.stat-item:nth-child(odd)::after { display:block }
	.csi-g4     { grid-template-columns:1fr 1fr }
	.csi-section { padding:68px var(--csi-pad) }
	.csi-ai-banner,.csi-mission { padding:44px var(--csi-pad) }
}

@media (max-width:480px) {
	:root { --csi-pad:16px }
	.csi-g4 { grid-template-columns:1fr }
}

/* Custom logo — never stretch */
/* Custom logo — HTML attributes are overridden by !important */
.custom-logo { max-width:200px !important; width:auto !important; height:auto !important; display:block !important }
.custom-logo-link { display:inline-block !important; line-height:1 }
#csi-footer .custom-logo { max-width:180px !important }
#csi-footer .custom-logo-link { display:block; margin-bottom:4px }
/* Also target WordPress's .site-logo if block theme fallback */
.wp-block-site-logo img { max-width:180px !important; width:auto !important; height:auto !important }

/* ============================================================
   LOGIN PAGE — branded, not stretched
   ============================================================ */
.login h1 a {
	background-image:none !important;
	width:auto !important; height:auto !important;
	display:block; text-align:center; margin:0 auto 20px;
}
.login #login {
	padding-top:28px;
}
.login form {
	border-radius:10px;
	box-shadow:0 4px 24px rgba(3,196,253,.12),0 0 0 1px rgba(3,196,253,.12);
}