/**
 * Sensei design system — shared across all elementor-templates/ files.
 *
 * Built from bin/static-site/2026-10-13/, whose styling is inline on every
 * element. Rules used by more than one template live here; rules specific to one
 * template live in that template's sibling .css file. Apart from the page
 * background below, every rule is scoped under .eti-tpl so it cannot reach the
 * Elementor editor chrome or wp-admin.
 *
 * Palette
 *   Background    #0D0A1E   Violet band   #22164D
 *   Card          #1A1336   Card border   #2E2452
 *   Oval / chip   #2B1E4A   Rule / border #241C42
 *   Brand purple  #7B3FE4 (buttons)   Accent purple #A672FF (text, icons)
 *
 * Bands
 *   Every section below the header sits in one of two full-width bands, which
 *   alternate down the page: .ss-band--grid (the page colour with a faint 64px
 *   grid) and .ss-band--violet (lighter, with concentric rings). The column
 *   inside a band is .ss-wrap.ss-section.
 */

/* ---------- page background ---------- */
/* The comps paint these glows on one wrapper around header, body and footer. Here
   those are three separate templates, so the shared ground has to sit on <body>.
   Inner pages carry a top-right glow that the home page does not. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background-color: #0D0A1E;
	background-image:
		radial-gradient(900px 560px at 88% 0%, rgba(123, 63, 228, 0.38), transparent 70%),
		radial-gradient(700px 480px at 0% 100%, rgba(123, 63, 228, 0.22), transparent 70%);
	background-repeat: no-repeat;
}

body.home {
	background-image: radial-gradient(700px 480px at 0% 100%, rgba(123, 63, 228, 0.22), transparent 70%);
}

#contact { scroll-margin-top: 24px; }

/* ---------- base ---------- */
/* The class is doubled deliberately so these outrank Hello Elementor's and the
   Elementor kit's element rules regardless of stylesheet order.

   box-sizing: the comps were written against the browser default (content-box) —
   a 1200px column plus 32px gutters is 1264px wide — but Hello Elementor sets
   border-box on everything. Asserting content-box keeps the comps' numbers
   meaningful as written. */
.eti-tpl.eti-tpl * { box-sizing: content-box; margin: 0; }

/* Anywhere the comps relied on inheritance or a browser default, the theme wins
   unless it is asserted here. The inner pages inherit 16px / normal; the home
   page's wrapper sets 20px / 1.6, and its header and footer inherit that too. */
.eti-tpl.eti-tpl { color: #EEF1F7; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: normal; }
body.home .eti-tpl.eti-tpl { color: #FFFFFF; font-size: 20px; line-height: 1.6; }

.eti-tpl.eti-tpl h1, .eti-tpl.eti-tpl h2, .eti-tpl.eti-tpl h3 { font-family: inherit; line-height: inherit; letter-spacing: normal; color: inherit; }
.eti-tpl.eti-tpl a { color: #FFFFFF; text-decoration: none; font-family: inherit; }
.eti-tpl.eti-tpl a:hover { color: #A672FF; }
.eti-tpl.eti-tpl a:focus-visible,
.eti-tpl.eti-tpl button:focus-visible,
.eti-tpl.eti-tpl input:focus-visible,
.eti-tpl.eti-tpl select:focus-visible,
.eti-tpl.eti-tpl textarea:focus-visible { outline: 2px solid #A672FF; outline-offset: 3px; }

.eti-tpl p { font-size: 20px; color: #FFFFFF; }

/* ---------- layout ---------- */
.eti-tpl .ss-wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.eti-tpl .ss-section { padding-top: 120px; padding-bottom: 120px; }
.eti-tpl .ss-band--grid {
	background-color: #0D0A1E;
	background-image:
		radial-gradient(640px 360px at 0% 0%, rgba(123, 63, 228, 0.20), transparent 70%),
		linear-gradient(rgba(166, 114, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(166, 114, 255, 0.05) 1px, transparent 1px);
	background-size: auto, 64px 64px, 64px 64px;
	border-top: 1px solid #241C42;
}
.eti-tpl .ss-band--violet {
	background-color: #22164D;
	background-image:
		radial-gradient(900px 420px at 100% 0%, rgba(166, 114, 255, 0.22), transparent 70%),
		repeating-radial-gradient(circle at 100% 100%, rgba(166, 114, 255, 0.10) 0 1px, transparent 1px 48px);
	border-top: 1px solid #6B4FC2;
	border-bottom: 1px solid #4A3D78;
	box-shadow: inset 0 1px 0 rgba(201, 168, 255, 0.25);
}
.eti-tpl.eti-tpl .ss-accent { color: #A672FF; }

/* Short purple rule above every section heading. Sizes are set per page. */
.eti-tpl .ss-h2,
.eti-tpl .ss-cta__text h2 { padding-top: 28px; background: linear-gradient(#A672FF, #A672FF) left top / 64px 4px no-repeat; }

/* min() keeps the comps' column minimums on desktop while letting a single
   column shrink below them, so a 440px-minimum grid cannot push a phone-width
   page sideways (the comps overflow there). */
.eti-tpl .ss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ss-col, 280px), 100%), 1fr)); gap: 20px; }

/* ---------- components ---------- */
.eti-tpl .ss-card { background: #1A1336; border: 1px solid #2E2452; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.eti-tpl .ss-card h3 { font-weight: 600; font-size: 24px; }
.eti-tpl .ss-card svg { flex: none; }

.eti-tpl .ss-list { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 20px; line-height: 1.5; color: #FFFFFF; list-style: disc; }

.eti-tpl .ss-btn { padding: 16px 30px; background: #7B3FE4; border-radius: 999px; font-weight: 600; font-size: 20px; }
.eti-tpl.eti-tpl a.ss-btn, .eti-tpl.eti-tpl a.ss-btn:hover { color: #FFFFFF; }

/* "Ready to Get Started?" row that closes the Services and About pages. */
.eti-tpl .ss-cta { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.eti-tpl .ss-cta__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.eti-tpl .ss-cta__text h2 { font-weight: 700; font-size: 40px; }
.eti-tpl .ss-cta__text p { line-height: 1.6; max-width: 680px; }

/* Stacked two-line page heading: a white line above a purple <h1>. Sizes are set
   per page. */
.eti-tpl .ss-page-hero { display: flex; flex-direction: column; gap: 22px; }
.eti-tpl .ss-page-hero__kicker { font-weight: 700; color: #FFFFFF; margin-bottom: -14px; }
.eti-tpl .ss-page-hero h1 { font-weight: 700; color: #A672FF; }

/* ---------- small screens ---------- */
/* The comps set display type in fixed pixels, which overflows a phone. Desktop
   values are untouched; these only apply where the comps would scroll sideways. */
@media (max-width: 600px) {
	.eti-tpl .ss-wrap { padding-left: 20px; padding-right: 20px; }
	.eti-tpl .ss-section { padding-top: 64px; padding-bottom: 64px; }
	.eti-tpl .ss-cta__text h2 { font-size: 32px; }
}