/* =====================================================================
   SHILOTECH Enterprise — base.css
   Design tokens, reset, typography, dark mode.
   ===================================================================== */

:root {
	/* Brand (overridable from SHILOTECH Settings) */
	--shilo-primary:   #1A50A0;
	--shilo-secondary: #0B1F3A;
	--shilo-accent:    #8B1E2D;
	--shilo-cta:       #F4C542;

	/* Surfaces */
	--bg:        #F8FAFC;
	--surface:   #FFFFFF;
	--surface-glass: rgba(255, 255, 255, .92);
	--ink:       #16273D;
	--ink-soft:  #51627A;
	--line:      #E3EAF2;

	/* Derived */
	--primary-soft: rgba(41, 182, 246, .12);
	--navy-soft:    rgba(11, 31, 58, .06);

	/* Type */
	--font-head: "Plus Jakarta Sans", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	/* Geometry */
	--container: 1320px;
	--section-pad: 110px;
	--card-pad: 35px;
	--radius-card: 18px;
	--radius-btn: 12px;
	--radius-img: 20px;

	/* Elevation */
	--shadow-light: 0 8px 30px rgba(0, 0, 0, .08);
	--shadow-hover: 0 18px 45px rgba(0, 0, 0, .15);

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--speed: .35s;
}

/* Dark mode */
[data-theme="dark"] {
	--bg:       #0A1526;
	--surface:  #10203A;
	--surface-glass: rgba(16, 32, 58, .88);
	--ink:      #E8F0FA;
	--ink-soft: #9FB2CC;
	--line:     #21344F;
	--navy-soft: rgba(41, 182, 246, .08);
	--shadow-light: 0 8px 30px rgba(0, 0, 0, .35);
	--shadow-hover: 0 18px 45px rgba(0, 0, 0, .5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--bg);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { border-radius: 0; }

a { color: var(--shilo-primary); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--shilo-accent); }

ul, ol { margin: 0; padding: 0; }

button, input, textarea, select {
	font: inherit;
	color: inherit;
}
button { cursor: pointer; background: none; border: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .55em;
	color: var(--ink);
	letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; color: var(--ink-soft); }
strong { color: var(--ink); }

.section-title {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}
/* Gradient underline for headings */
.section-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 64px; height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--shilo-primary), var(--shilo-cta));
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head .section-title::after { left: 50%; transform: translateX(-50%); }
.section-sub { font-size: 1.05rem; }

.section-label {
	display: inline-block;
	font-family: var(--font-head);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--shilo-primary);
	margin-bottom: 12px;
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
}
.skip-link:focus {
	clip: auto;
	width: auto; height: auto;
	position: fixed; top: 10px; left: 10px;
	z-index: 10000;
	background: var(--shilo-secondary);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--radius-btn);
}
:focus-visible {
	outline: 3px solid var(--shilo-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--shilo-primary); color: #fff; }

.clients{padding:80px 0;text-align:center}.clients img{margin-top:30px;border-radius:12px}