/* ===== Theme (Light) ===== */
	:root{
		--bg: #ffffff;
		--panel: #f4f6f9;
		--muted: #4b5565;
		--text: #101828;
		--brand: #0f4f6e;
		--brand-2: #0f4f6e;
		--card: #ffffff;
		--border: #d6dce5;
		--shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
		--radius: 12px;
		--focus: 0 0 0 2px rgba(15,79,110,.25), 0 0 0 4px rgba(15,79,110,.16);
	}
	*{ box-sizing:border-box }
	html,body{ height:100% }
	html{ scroll-padding-top: 110px }
	body{
		margin:0;
		font-family: Manrope,'Segoe UI',Tahoma,sans-serif;
		color:var(--text);
		background: var(--bg);
		line-height:1.6;
	}
	body.modal-open{ overflow:hidden }
	@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important } }

	/* ===== Utilities ===== */
	.container{ width:min(1180px, 92%); margin-inline:auto }
	.section{ padding: 84px 0 }
	.section--alt{ background: var(--panel) }
	.section-head{ text-align:center; margin-bottom: 28px }
	.section-head h2{ font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin:0 0 8px }
	.section-head p{ color: var(--muted); margin:0 }
	.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;
	}

	a{ color:inherit }
	a:where(:focus){ outline:none; box-shadow: var(--focus); border-radius:10px }

	.btn{
		display:inline-block; border:1px solid transparent;
		background:var(--brand);
		color:#ffffff; font-weight:700; padding:.9rem 1.2rem; border-radius:999px;
		text-decoration:none; box-shadow:var(--shadow);
		transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
	}
	.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(15,79,110,.2) }
	.btn--ghost{
		background:transparent; color:var(--text); border:1px solid #bcc7d6;
		box-shadow:none; background-clip:padding-box;
	}
	.btn--sm{ padding:.6rem 1rem; font-weight:600 }

	.card{
		background:#fff; border:1px solid var(--border);
		border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
	}
	.grid{ display:grid; gap:22px }
	.cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
	@media (max-width: 900px){ .cards-3{ grid-template-columns: 1fr } }

	.bullets{ padding-left:1.1rem; margin:.25rem 0 0 0; color:var(--muted) }
	.bullets li{ margin:.35rem 0 }
	.checklist{ list-style:none; padding:0; margin:.25rem 0 16px 0 }
	.checklist li{ position:relative; padding-left:1.6rem; margin:.45rem 0; color:var(--muted) }
	.checklist li::before{
		content:""; position:absolute; left:0; top:.25rem; width:1rem; height:1rem; border-radius:50%;
		background: var(--brand);
		box-shadow: 0 0 0 2px #fff;
	}

	/* ===== Skip link ===== */
	.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
	.skip:focus{
		left:16px; top:12px; width:auto; height:auto; padding:.6rem .9rem;
		background:#fff; border:1px solid var(--border); border-radius:10px; z-index:100;
	}

	/* ===== Header ===== */
	.site-header{
		position:fixed; top:0; left:0; right:0; z-index:1000; backdrop-filter:blur(10px);
		border-bottom:1px solid var(--border); background:rgba(255,255,255,.95);
		width:100%;
	}
	body { padding-top: 80px; }
	.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; min-height:74px }
	.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.2px }
	.brand img{ width:auto; height:64px; max-width:180px; display:block }
	.brand span{ display:flex; align-items:center }

	.nav{ display:flex; align-items:center; gap:18px }
	.nav a{ color:var(--text); text-decoration:none; font-weight:600; opacity:.85 }
	.nav a:hover{ opacity:1 }
	.nav a.btn{ color:#ffffff; opacity:1 }
	.nav a.btn:hover{ color:#ffffff; opacity:1 }

	.nav-toggle{
		display:none; width:42px; height:42px; background:transparent; border:1px solid var(--border);
		border-radius:10px; align-items:center; justify-content:center; gap:3px;
	}
	.nav-toggle .nav-toggle__bar{ width:18px; height:2px; background:var(--text) }
	@media (max-width: 900px){
		.nav-toggle{ display:flex }
		.nav{
			position:absolute; right:16px; top:calc(100% + 8px); background:#fff; border:1px solid var(--border);
			border-radius:14px; padding:10px; display:none; flex-direction:column; gap:10px; width:220px; box-shadow:var(--shadow)
		}
		.nav.open{ display:flex }
		html{ scroll-padding-top: 94px }
	}

	/* ===== Hero ===== */
	.hero{ position:relative; padding:96px 0 48px }
	.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center }
	@media (max-width:1000px){ .hero-inner{ grid-template-columns:1fr } }
	.hero h1{ margin:0 0 10px; font-size: clamp(2rem, 3.4vw, 3rem); line-height:1.12 }
	.hero .accent{ display:block; font-weight:600; font-size:clamp(1rem, 1.7vw, 1.25rem); color:#3a4d63 }
	.lead{ color:#334155; opacity:1; font-size:clamp(1rem, 1.2vw, 1.125rem) }
	.cta{ display:flex; gap:12px; margin:16px 0 12px; flex-wrap:wrap }
	.trust{ display:flex; gap:14px; list-style:none; padding:0; margin:8px 0 0 0; color:var(--muted); flex-wrap:wrap }

	.hero-card .card{ padding:26px }
	.stat{ font-size:1.25rem; font-weight:800; color:#174268 }
	.split{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px }
	.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:140px; fill:#eef2f6; z-index:0; pointer-events:none }

	/* ===== Services ===== */
	.card--service h3{ margin-top:0 }
	.card--service p{ color:#475569; margin:.25rem 0 }

	/* ===== Process (timeline) ===== */
	.timeline{
		list-style:none; padding:0; margin:0 auto; max-width:780px;
		border-left:2px dashed rgba(2,6,23,.12);
	}
	.timeline li{ position:relative; padding:10px 0 10px 22px }
	.timeline .dot{
		position:absolute; left:-8px; top:18px; width:14px; height:14px; border-radius:50%;
		background: var(--brand);
		box-shadow:0 0 0 3px #fff;
	}

	/* ===== About ===== */
	.about{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:start }
	@media (max-width:900px){ .about{ grid-template-columns:1fr } }
	.facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0 }
	.facts dt{ color:var(--muted) }
	.facts dd{ margin:0 }

	/* ===== Contact ===== */
	.contact{ max-width:860px; margin:0 auto }
	.contact-launch{ max-width:760px; margin:0 auto; text-align:center }
	.contact-launch p{ margin-top:0; color:var(--muted) }
	.contact-launch .form-note{ margin:12px auto 0; max-width:680px; font-size:.92rem; line-height:1.5 }
	.contact-launch .form-note a{ color:#174268; font-weight:600; text-decoration:none }
	.contact-launch .form-note a:hover{ text-decoration:underline }
	.contact-page-shell{
		max-width:980px;
		margin:0 auto;
		padding:0;
		border:none;
		box-shadow:none;
		background:#ffffff;
		overflow:hidden;
	}
	.contact-page-embed{
		display:block;
		width:100%;
		height:784px;
		border:none;
		border-radius:0;
		background:#ffffff;
	}
	.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
	.form-grid .full{ grid-column:1 / -1 }
	label span{ display:block; font-weight:600; margin-bottom:6px }
	input, textarea{
		width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
		background:#fff; color:var(--text); outline:none;
	}
	input:focus, textarea:focus{ border-color:var(--brand); box-shadow:var(--focus) }
	.form-note{ color:var(--muted) }

	.contact-modal{
		position:fixed;
		inset:0;
		display:none;
		align-items:flex-start;
		justify-content:center;
		padding:24px;
		background:rgba(2, 6, 23, 0.65);
		z-index:200;
		overflow-y:auto;
	}
	.contact-modal.open{ display:flex }
	.contact-modal__dialog{
		width:min(980px, 100%);
		background:#fff;
		border-radius:12px;
		overflow:visible;
		border:1px solid var(--border);
		box-shadow:0 20px 48px rgba(2, 6, 23, 0.28);
		margin-block:auto;
	}
	.contact-modal__header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:12px 14px;
		border-bottom:1px solid var(--border);
	}
	.contact-modal__header h3{ margin:0; font-size:1.1rem }
	.contact-modal__close{
		background:transparent;
		border:1px solid var(--border);
		border-radius:10px;
		font-size:1.4rem;
		line-height:1;
		padding:4px 10px;
		cursor:pointer;
	}
	.contact-modal__iframe{
		display:block;
		width:100%;
		height:770px;
		border:none;
	}
	.contact-modal__meta{ padding:10px 14px 14px; border-top:1px solid var(--border); background:#fafcff }
	.contact-modal__meta .form-note{ margin:0; font-size:.86rem }
	@media (max-width: 700px){
		.contact-modal{ padding:10px }
		.contact-modal__iframe{ height:770px }
	}

	.screen-share-wrap{ padding-top:48px }
	.screen-share-grid{
		display:grid;
		grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
		gap:20px;
		align-items:start;
	}
	.screen-share-grid--viewer{ grid-template-columns:minmax(280px, 360px) minmax(0, 1fr) }
	.screen-form-row{ margin-bottom:12px }
	.screen-form-row label{ display:block; font-weight:700; margin-bottom:6px }
	.screen-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap }
	.screen-status{ margin:12px 0 0; color:var(--muted); font-weight:600 }
	.screen-status--error{ color:#b42318 }
	.screen-preview-card h3{ margin-top:0; margin-bottom:10px }
	.screen-video{
		width:100%;
		min-height:300px;
		background:#0b1220;
		border:1px solid #1f2937;
		border-radius:10px;
	}
	@media (max-width: 980px){
		.screen-share-grid,
		.screen-share-grid--viewer{
			grid-template-columns:1fr;
		}
	}

	/* ===== Footer ===== */
	.site-footer{ border-top:1px solid var(--border); padding:28px 0 24px; background:#fff }
	.foot{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap }
	.foot-meta{ display:grid; gap:3px; max-width:780px }
	.foot p{ margin:0; color:var(--muted) }
	.foot-copy{ color:var(--text); font-weight:600 }
	.foot-address{ color:var(--muted) }
	.foot-contact a{ color:#174268; text-decoration:none; font-weight:600 }
	.foot-contact a:hover{ text-decoration:underline }
	.foot-note{ font-size:.7rem; line-height:1.35; opacity:.78; margin-top:6px }
	.foot-nav{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
	.foot-nav a{ color:#64748b; text-decoration:none; margin-left:0; font-weight:600 }
	.foot-nav a:hover{ color:#0f172a }
	@media (max-width: 900px){
		.foot{ flex-direction:column; align-items:flex-start }
	}