* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height:100%; font-family: "Inter", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:#fff; color:#fff; }


.container { max-width:1100px; margin:0 auto; padding:0 28px; }


.site-header { position: absolute; inset: 18px 0 auto 0; z-index:60; pointer-events:auto; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { font-family:"Montserrat",sans-serif; font-weight:800; letter-spacing:2px; font-size:20px; color:#ffffff; }


.main-nav { display:flex; align-items:center; gap:28px; }
.main-nav a { color: rgba(255,255,255,0.95); text-decoration:none; font-weight:600; padding:8px 6px; transition:opacity .18s; }
.main-nav a:hover { opacity:0.85; }
.main-nav .btn-outline {
	display:inline-block;
	background: #ffffff;
	color:#235acb;
	padding:10px 18px;
	border-radius:28px;
	font-weight:700;
	box-shadow: 0 10px 24px rgba(16,40,67,0.12);
	text-decoration:none;
}


.hero {
	position:relative;
	min-height:78vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	overflow:hidden;
	padding-bottom:110px;
	background: radial-gradient(1200px 600px at 15% 20%, rgba(255,255,255,0.05), transparent 12%),
	            linear-gradient(135deg,#6ea7ff 0%, #2e63e3 50%, #13307f 100%);
}

.hero-inner { width:100%; padding:80px 0 40px; }

.badge {
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin-bottom:22px;
	padding:10px 18px;
	background: rgba(255,255,255,0.06);
	border:1px solid rgba(255,255,255,0.12);
	border-radius:28px;
	font-size:14px;
	color:#fff;
	backdrop-filter: blur(6px);
}


.title {
	font-family:"Montserrat",sans-serif;
	font-weight:800;
	font-size:110px;
	line-height:1;
	letter-spacing:-2px;
	margin:10px 0 18px;
}
.subtitle {
	font-size:20px;
	font-weight:300;
	opacity:0.95;
	max-width:900px;
	margin:0 auto 28px;
	color: rgba(255,255,255,0.92);
}


.hero-ctas { display:flex; gap:18px; justify-content:center; margin-top:18px; align-items:center; position:relative; z-index:2; }


.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:16px 34px;
	border-radius:48px;
	text-decoration:none;
	font-weight:700;
	font-size:16px;
	transition:transform .18s, box-shadow .18s;
}
.btn:active { transform:translateY(1px); }

.btn-primary {
	background:#ffffff;
	color:#235acb;
	box-shadow: 0 26px 40px rgba(16,40,67,0.12);
}


.btn-ghost {
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	color:#fff;
	border:1px solid rgba(255,255,255,0.06);
	padding:16px 36px;
	position:relative;
	overflow:visible;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 28px rgba(8,20,60,0.12);
}


.btn-ghost::after {
	content: none;
}

.btn-ghost--arrow::after {
	content: "→";
	margin-left:12px;
	opacity:0.95;
	display:inline-block;
	transform: translateX(2px);
}


.hero-wave { position:absolute; left:0; right:0; bottom:-1px; width:100%; line-height:0; z-index:1; }
.hero-wave svg { display:block; width:100%; height:120px; }


.about-section { padding: 84px 0; background: #ffffff; color: #17202a; }
.about-inner { display:grid; grid-template-columns: 1fr 520px; gap:48px; align-items:start; max-width:1100px; margin:0 auto; padding:0 28px; }
.about-left .section-title { font-family:"Montserrat",sans-serif; font-size:36px; margin-bottom:18px; }
.about-left .brand { color:#235acb; }
.about-left .lead { color:#425066; margin-bottom:14px; font-size:16px; line-height:1.6; }
.about-left p { color:#586475; margin-bottom:14px; line-height:1.7; }
.about-list { list-style:none; margin-top:18px; display:block; padding:0; color:#3b4a60; }
.about-list li { position:relative; padding-left:34px; margin-bottom:12px; line-height:1.6; }
.about-list li::before {
	content: "";
	position:absolute;
	left:0;
	top:6px;
	width:20px;
	height:20px;
	border-radius:50%;
	background: linear-gradient(180deg,#e6f0ff,#dbe9ff);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
	border: 2px solid #235acb;
}


.about-right { display:flex; flex-direction:column; gap:22px; }
.feature-card {
	display:flex;
	gap:18px;
	align-items:center;
	background:#ffffff;
	padding:18px;
	border-radius:16px;
	box-shadow: 0 22px 50px rgba(18,30,70,0.08);
	border: 1px solid rgba(20,30,60,0.04);
}
.icon-circle {
	min-width:56px;
	min-height:56px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: linear-gradient(180deg,#e9f1ff,#f6fbff);
	color:#235acb;
	font-size:20px;
	box-shadow: 0 6px 18px rgba(35,90,203,0.06);
}
.feature-content strong { display:block; color:#0f2133; font-size:16px; margin-bottom:6px; }
.feature-desc { color:#6b7889; font-size:14px; }


@media (max-width: 1000px) {
	.about-inner { grid-template-columns: 1fr; padding:0 20px; gap:28px; }
	.about-right { order:2; }
	.about-left { order:1; }
	.about-left .section-title { font-size:30px; }
}
@media (max-width: 480px) {
	.about-inner { padding:0 14px; }
	.feature-card { padding:14px; border-radius:12px; }
	.icon-circle { min-width:48px; min-height:48px; font-size:18px; border-radius:10px; }
}


@media (max-width: 900px) {
	.title { font-size:64px; }
	.subtitle { font-size:17px; padding:0 12px; }
	.main-nav a { display:none; }
	.header-inner { justify-content:space-between; }
	.hero { padding-bottom:90px; min-height:68vh; }
	.btn { padding:12px 20px; font-size:15px; }
}

@media (max-width: 480px) {
	.title { font-size:44px; }
	.subtitle { font-size:15px; }
	.hero-inner { padding-top:48px; }
	.badge { font-size:13px; padding:8px 14px; }
	.btn-primary, .btn-ghost { padding:10px 16px; font-size:14px; }
	.hero { min-height:62vh; padding-bottom:70px; }
}


.services-section { padding: 84px 0; background: #f7f9fb; color: #0f2133; }
.services-header { text-align:center; max-width:820px; margin:0 auto 36px; }
.services-header h2 { font-family:"Montserrat",sans-serif; font-size:32px; margin-bottom:8px; color:#0f2133; }
.services-sub { color:#6b7889; font-size:16px; }


.services-grid {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:28px;
	max-width:1200px;
	margin:0 auto;
	padding:0 28px;
}


.service-card {
	background:#ffffff;
	border-radius:16px;
	padding:28px;
	display:flex;
	flex-direction:column;
	gap:18px;
	min-height:360px;
	box-shadow: 0 26px 50px rgba(18,30,70,0.06);
	border: 1px solid rgba(20,30,60,0.04);
}


.services-grid {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(140px, auto);
}

.service-card {
	min-height: 160px;
}


.service-card--large {
	grid-row: span 2;
	min-height: auto;
	padding: 30px;
}


.service-icon {
	width:56px;
	height:56px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: linear-gradient(180deg,#eef6ff,#f7fbff);
	box-shadow: 0 8px 20px rgba(35,90,203,0.06);
	overflow:hidden;
}
.service-icon img {
	width:36px;
	height:36px;
	display:block;
	object-fit:contain;
}


.service-card h3 { font-size:16px; margin:6px 0 6px; }
.service-card .service-lead { font-size:14px; color:#6b7889; margin:0; line-height:1.6; }


.service-features { list-style:none; padding:0; margin:0; margin-top:6px; gap:8px; display:flex; flex-direction:column; }
.service-features li {
	position:relative;
	padding-left:22px;
	color:#5b6b80;
	font-size:14px;
	line-height:1.6;
}
.service-features li::before {
	content:"";
	position:absolute;
	left:6px;
	top:10px;
	width:6px;
	height:6px;
	background:#235acb;
	border-radius:50%;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3);
}


.service-cta {
	margin-top:auto;
	display:inline-block;
	width:100%;
	text-align:center;
	padding:12px 18px;
	border-radius:32px;
	border:2px solid #235acb;
	color:#235acb;
	background:transparent;
	font-weight:700;
	box-shadow: none;
}


.portfolio-section { padding: 84px 0; background: #f7f9fb; color: #0f2133; }
.portfolio-header { text-align:center; max-width:900px; margin:0 auto 34px; }
.portfolio-header h2 { font-family:"Montserrat",sans-serif; font-size:32px; margin-bottom:8px; color:#0f2133; }
.portfolio-sub { color:#6b7889; font-size:16px; }

.portfolio-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:28px; max-width:1200px; margin:0 auto; padding:0 28px; align-items:stretch; }


.portfolio-item .portfolio-link { display:block; text-decoration:none; color:inherit; border-radius:16px; overflow:hidden; box-shadow: 0 26px 50px rgba(18,30,70,0.06); border:1px solid rgba(20,30,60,0.04); background:#fff; transition: transform .18s, box-shadow .18s; }
.portfolio-card-media { height:220px; background:#f4f5f7; }
.portfolio-image { width:100%; height:100%; display:block; object-fit:cover; }

.portfolio-card-body { background:#ffffff; padding:18px 20px; display:block; }
.portfolio-card-body small.muted { color:#5664a8; font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; display:block; margin-bottom:8px; }
.portfolio-card-body h3 { margin:0; font-size:18px; color:#0f2133; font-weight:800; }

.portfolio-link:hover { transform:translateY(-8px); box-shadow: 0 40px 90px rgba(18,30,70,0.12); }

@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } .portfolio-card-media { height:160px; } }


.pricing-section { padding: 84px 0; background: #ffffff; color:#0f2133; }


.contact-section { padding: 84px 0; background: linear-gradient(180deg,#234fdc 0%, #1f45c9 100%); color:#ffffff; }
.contact-inner { max-width:1100px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns: 1fr 520px; gap:48px; align-items:center; }
.contact-left h2 { font-family:"Montserrat",sans-serif; font-size:32px; margin-bottom:12px; color:#ffffff; }
.contact-left .muted { color: rgba(255,255,255,0.92); max-width:520px; margin-bottom:22px; line-height:1.6; }
.contact-info { list-style:none; padding:0; margin:0; }
.contact-info li { display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.icon-circle-small { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); color:#ffffff; font-size:18px; }
.info-label { font-size:13px; color: rgba(255,255,255,0.85); margin-bottom:4px; }
.info-value { font-weight:700; color:#ffffff; }

.contact-card { background:#ffffff; padding:28px; border-radius:18px; box-shadow: 0 30px 60px rgba(10,20,60,0.25); color:#0f2133; }
.contact-card .form-row { display:flex; gap:12px; }
.contact-card .form-group { display:block; width:100%; }
.contact-card label { display:block; font-size:13px; color:#6b7889; margin-bottom:8px; }
.contact-card input, .contact-card textarea, .contact-card select { width:100%; padding:14px 16px; border-radius:12px; border: none; background:#f6f7fb; color:#0f2133; font-size:14px; }
.contact-card textarea { min-height:120px; resize:vertical; }
.contact-btn { display:block; width:100%; margin-top:18px; background:#235acb; color:#ffffff; border:none; padding:14px 22px; border-radius:34px; font-weight:800; box-shadow: 0 14px 30px rgba(35,90,203,0.24); }

@media (max-width: 1000px) { .contact-inner { grid-template-columns: 1fr; } .contact-right { order:2; } .contact-left { order:1; } }

.site-footer--dark { background: #0b1724; color: #cfd8e3; padding: 40px 0 28px; }
.site-footer .footer-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; max-width:1100px; margin:0 auto; padding:0 28px; }
.footer-left .footer-logo { font-family:"Montserrat",sans-serif; font-weight:800; color:#ffffff; font-size:18px; margin-bottom:6px; }
.footer-desc { color: rgba(255,255,255,0.6); font-size:13px; margin:0; }
.footer-center { display:flex; align-items:center; justify-content:center; }
.social-icons { display:flex; gap:14px; }
.social-link { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:6px; background: rgba(255,255,255,0.04); color:#cbd7ee; text-decoration:none; font-weight:700; }
.footer-right .footer-nav { display:flex; gap:18px; align-items:center; }
.footer-right .footer-nav a { color: rgba(255,255,255,0.7); text-decoration:none; font-size:14px; }
.footer-bottom { max-width:1100px; margin:18px auto 0; padding:0 28px; }
.footer-line { height:1px; background: rgba(255,255,255,0.04); margin-bottom:12px; }
.copyright { color: rgba(255,255,255,0.45); font-size:13px; text-align:center; margin:0; padding-bottom:6px; }

@media (max-width: 900px) {
	.site-footer .footer-inner { flex-direction:column; align-items:flex-start; gap:18px; }
	.footer-center { order:2; }
	.footer-right { order:3; }
	.footer-left { order:1; }
}

.pricing-header { text-align:center; max-width:820px; margin:0 auto 36px; }
.pricing-header h2 { font-family:"Montserrat",sans-serif; font-size:32px; margin-bottom:8px; color:#0f2133; }
.pricing-sub { color:#6b7889; font-size:16px; }


.pricing-grid {
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap:28px;
	max-width:1200px;
	margin:0 auto;
	padding:0 28px;
	align-items:stretch;
}


.pricing-card {
	background:#ffffff;
	border-radius:16px;
	padding:28px;
	box-shadow: 0 26px 50px rgba(18,30,70,0.06);
	border: 1px solid rgba(20,30,60,0.04);
	display:flex;
	flex-direction:column;
	gap:18px;
}


.pricing-card--featured {
	transform: translateY(-10px);
	box-shadow: 0 40px 80px rgba(18,30,70,0.10);
	border-color: transparent;
	position:relative;
}


.recommended-badge {
	position:absolute;
	top:-14px;
	left:50%;
	transform:translateX(-50%);
	background:#235acb;
	color:#fff;
	padding:6px 14px;
	border-radius:999px;
	font-size:12px;
	box-shadow: 0 10px 30px rgba(35,90,203,0.18);
}


.plan-meta { color:#6b7889; font-size:14px; }
.price { font-size:40px; font-weight:800; color:#0f2133; margin-top:6px; }
.plan-desc { color:#586475; margin-bottom:6px; }


.plan-features { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:12px; }
.plan-features li { display:flex; gap:10px; align-items:flex-start; color:#5b6b80; font-size:15px; line-height:1.4; }
.plan-features svg { flex:0 0 18px; margin-top:4px; }

.pricing-cta { margin-top:auto; display:inline-block; text-align:center; padding:12px 20px; border-radius:32px; font-weight:700; text-decoration:none; }


.btn-primary-blue {
	background:#235acb;
	color:#fff;
	border:0;
	box-shadow: 0 20px 40px rgba(35,90,203,0.14);
}


.btn-outline-blue {
	background:transparent;
	color:#235acb;
	border:2px solid #235acb;
}


.pricing-section { padding: 64px 0; background: #ffffff; color: #17202a; }
.pricing-section .section-title { font-size:28px; font-family:"Montserrat",sans-serif; margin-bottom:18px; text-align:center; color:#0f2133; }

.table-wrap { overflow:auto; margin:18px 0 12px; border-radius:8px; }
.pricing-table { width:100%; border-collapse:collapse; min-width:820px; }
.pricing-table th, .pricing-table td {
	padding:14px 18px;
	border:1px solid rgba(20,30,60,0.06);
	text-align:left;
	vertical-align:middle;
	font-size:14px;
}
.pricing-table thead th {
	background:#f1f5f9;
	color:#23324a;
	font-weight:700;
}
.pricing-table tbody tr:nth-child(even) td { background:#fafafa; }


.pricing-section .note { color:#6b7889; font-size:13px; margin:12px 0 24px; }


.options-grid { display:flex; flex-direction:column; gap:18px; max-width:1100px; margin:0 auto; padding:0 28px; }
.options-box { border:1px solid rgba(20,30,60,0.04); padding:18px; border-radius:10px; background:#fff; box-shadow: 0 10px 30px rgba(18,30,70,0.03); }
.options-box h4 { margin:0 0 10px; font-size:16px; color:#0f2133; }
.options-box ul { margin:0; padding-left:18px; color:#5b6b80; }
.options-box ul li { margin-bottom:8px; }

.distinction-row { display:flex; gap:18px; margin-top:12px; flex-wrap:wrap; }
.distinction-box {
	flex:1;
	min-width:260px;
	border:1px solid rgba(20,30,60,0.04);
	padding:18px;
	border-radius:10px;
	background:#fff;
	box-shadow: 0 10px 30px rgba(18,30,70,0.03);
}
.distinction-head { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.tag { display:inline-block; padding:6px 10px; border-radius:8px; font-weight:700; font-size:12px; color:#fff; }
.tag-green { background:#19a974; }
.tag-blue { background:#235acb; }
.muted { color:#6b7889; font-size:13px; }


.distinction-box ul { padding-left:18px; color:#4c5968; margin-bottom:6px; }


@media (max-width: 900px) {
	.pricing-table { min-width:600px; }
	.distinction-row { flex-direction:column; }
	.options-grid { padding:0 18px; }
}
@media (max-width: 560px) {
	.pricing-table { min-width:480px; font-size:13px; }
	.table-wrap { margin:12px 0; }
	.pricing-table th, .pricing-table td { padding:10px 12px; }
}


.container {
	padding: 0 clamp(16px, 3.5vw, 28px);
}

.hero {
	min-height: 72vh;
	padding-bottom: clamp(60px, 12vw, 110px);
}
.hero-inner {
	max-width: 920px; 
	margin: 0 auto;
	padding: clamp(28px, 6vw, 80px) 0 clamp(20px,4vw,40px);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}

.title {
	font-size: clamp(2.6rem, 9.5vw, 6.8rem);
	letter-spacing: clamp(-1.5px, -0.25vw, -2px);
	margin: .25rem 0 .6rem;
}
.subtitle {
	font-size: clamp(0.95rem, 1.8vw, 1.6rem);
	max-width: 72ch;
	padding: 0 0.4rem;
}

.hero-ctas {
	flex-wrap:wrap;
	justify-content:center;
	gap:0.75rem;
	width:100%;
	max-width:720px;
	padding-inline: clamp(12px, 4vw, 28px); 
	box-sizing: border-box;
	margin: 0 auto;
	position:relative;
	z-index:2;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	min-width: auto;
	margin: 0;
}

.btn-primary,
.btn-ghost {
	flex: 1 1 auto;
}

@media (min-width: 641px) {
	.btn-primary,
	.btn-ghost {
		max-width: 520px;
	}
}

@media (max-width: 640px) {
	.hero-ctas { padding-inline: clamp(12px, 6vw, 20px); }
	.hero-ctas { flex-direction: column; gap:10px; }
	.btn-primary, .btn-ghost { width:100%; padding:12px 16px; font-size:15px; }
}

@media (max-width: 900px) {
	.site-header { inset: 12px 0 auto 0; }
	.header-inner { gap:12px; padding:0 clamp(8px,3.5vw,28px); }
	.logo { font-size:18px; }
}

@media (max-width: 1100px) {
	.services-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
	.service-card--large { grid-row: auto; } 
}
@media (max-width: 700px) {
	.services-grid { grid-template-columns: 1fr; }
	.service-card { min-height: auto; padding:20px; }
}

@media (max-width: 900px) {
	.portfolio-grid { grid-template-columns: repeat(2,1fr); padding:0 clamp(12px,3vw,28px); }
}
@media (max-width: 600px) {
	.portfolio-grid { grid-template-columns: 1fr; gap:16px; }
	.portfolio-card-media { height:160px; }
}

@media (max-width: 1000px) {
	.about-inner { padding: 0 clamp(12px,3.5vw,20px); gap:20px; }
}

.contact-inner { padding: 0 clamp(12px,3.5vw,28px); }
.contact-right iframe { height: clamp(200px, 30vw, 320px); border-radius:12px; }

.table-wrap { overflow:auto; -webkit-overflow-scrolling: touch; }
.pricing-table { min-width: 720px; }
@media (max-width: 900px) { .pricing-table { min-width: 560px; font-size:13px; } }
@media (max-width: 560px) { .pricing-table { min-width: 480px; font-size:13px; } }

@media (max-width: 900px) {
	.site-footer .footer-inner { padding: 0 clamp(12px,3.5vw,28px); }
	.social-link { width:36px; height:36px; }
}

img, svg { max-width:100%; height:auto; display:block; }
.legal-section {
	padding: 84px 0;
	background: #ffffff;
	color: #0f2133;
}
.legal-section .container { max-width: 920px; }
.legal-section .section-title {
	font-family:"Montserrat",sans-serif;
	font-size:32px;
	margin-bottom:12px;
	color:#0f2133;
}
.legal-section .lead {
	color:#425066;
	font-size:16px;
	line-height:1.6;
	margin-bottom:18px;
}
.legal-list {
	counter-reset: item;
	margin-top:8px;
	padding-left:18px;
	color:#3b4a60;
}
.legal-list li {
	margin-bottom:14px;
	line-height:1.7;
}
.legal-section a {
	color:#235acb;
	text-decoration:underline;
}

html { scroll-behavior: smooth; }