:root { --bg:#f7fbff; --ink:#14233d; --muted:#64748b; --blue:#2563eb; --sky:#38bdf8; --mint:#52d6b5; --line:#dce7f3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
.site-header { position:sticky; top:14px; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1180px,calc(100% - 32px)); min-height:68px; margin:14px auto 0; padding:0 18px 0 22px; border:1px solid #ffffffb8; border-radius:22px; background:#fffffff2; box-shadow:0 12px 35px #39416a14; backdrop-filter:blur(18px); }
.brand { display:inline-flex; width:fit-content; align-items:center; gap:10px; font-size:19px; font-weight:800; letter-spacing:-.04em; }
.brand-logo { display:grid; width:42px; height:42px; place-items:center; overflow:hidden; border:1px solid #dbeafe; border-radius:13px; background:white; box-shadow:0 5px 14px #2563eb1a; }
.brand-logo img { display:block; width:34px; height:34px; object-fit:contain; }
.site-header nav { display:flex; gap:34px; color:#4d5872; font-size:13px; font-weight:650; }
.site-header nav a:hover { color:var(--blue); }
.small-cta { display:flex; justify-self:end; align-items:center; gap:9px; padding:12px 16px; border-radius:14px; background:#eaf3ff; color:#1d4ed8; font-size:13px; font-weight:750; transition:.2s ease; }
.small-cta:hover { background:#dbeafe; transform:translateY(-2px); }
.hero { display:grid; min-height:calc(100vh - 96px); grid-template-columns:1fr .9fr; gap:70px; align-items:center; width:min(1220px,calc(100% - 48px)); margin:0 auto; padding:90px 20px 100px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 28px; padding:9px 13px; border:1px solid #bfdbfe; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px #52d6b52e; }
h1 { max-width:720px; margin:0; font-size:clamp(56px,6.5vw,96px); font-weight:820; letter-spacing:-.075em; line-height:.94; }
h1 em { display:block; width:fit-content; margin-top:7px; color:var(--blue); font-style:normal; font-weight:820; }
.hero-text { max-width:610px; margin:34px 0; color:var(--muted); font-size:20px; line-height:1.58; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.primary-cta { display:inline-flex; align-items:center; gap:22px; padding:17px 21px; border-radius:16px; background:var(--blue); color:white; box-shadow:0 12px 28px #2563eb3d; font-size:14px; font-weight:750; transition:.2s ease; }
.primary-cta:hover { box-shadow:0 16px 34px #2563eb52; transform:translateY(-3px); }
.text-link { color:#4c5873; font-size:13px; font-weight:700; }
.text-link:hover { color:var(--blue); }
.hero-visual { position:relative; min-height:590px; isolation:isolate; }
.visual-glow { position:absolute; z-index:-1; border-radius:50%; }
.glow-one { top:40px; right:0; width:420px; height:420px; background:#cfe7ff; }
.glow-two { right:230px; bottom:35px; width:270px; height:270px; background:#c8f4e9; }
.idea-card { position:absolute; padding:26px; border:1px solid #ffffffcf; border-radius:27px; background:#ffffffeb; box-shadow:0 24px 70px #4d567b1d; backdrop-filter:blur(18px); }
.idea-card>span,.solution-top>span { color:#7a849b; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.idea-card strong { display:block; margin-top:14px; font-size:21px; letter-spacing:-.03em; line-height:1.3; }
.idea-problem { top:70px; left:0; width:280px; transform:rotate(-3deg); }
.idea-solution { right:0; bottom:65px; width:350px; padding:30px; background:#172d50; color:white; transform:rotate(2deg); }
.solution-top { display:flex; justify-content:space-between; align-items:center; }
.solution-top span { color:#aeb7ce; }
.solution-top i { padding:6px 9px; border-radius:999px; background:#52d6b529; color:#73e3c7; font-size:10px; font-style:normal; font-weight:800; }
.idea-solution strong { margin-top:28px; font-size:34px; line-height:1.08; }
.mini-actions { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:8px; margin-top:32px; }
.mini-actions span { height:42px; border-radius:12px; background:#343e60; }
.mini-actions span:first-child { background:#3b82f6; }
.flow-line { position:absolute; top:260px; left:190px; display:flex; gap:11px; align-items:center; transform:rotate(31deg); }
.flow-line span { width:11px; height:11px; border-radius:50%; background:var(--sky); animation:pulse 1.8s ease-in-out infinite; }
.flow-line span:nth-child(2) { width:16px; height:16px; animation-delay:.18s; }
.flow-line span:nth-child(3) { width:23px; height:23px; background:var(--blue); animation-delay:.36s; }
@keyframes pulse { 50% { transform:scale(1.25); opacity:.65; } }
.floating-pill { position:absolute; padding:11px 14px; border-radius:999px; background:white; box-shadow:0 12px 30px #46507220; font-size:11px; font-weight:800; animation:float 4s ease-in-out infinite; }
.pill-one { top:200px; right:10px; color:#218b72; }
.pill-two { bottom:44px; left:25px; color:#0369a1; animation-delay:1s; }
@keyframes float { 50% { transform:translateY(-9px); } }
.services { padding:120px max(24px,calc((100vw - 1120px)/2)); background:white; }
.section-intro { display:grid; grid-template-columns:.55fr 1.2fr .85fr; gap:42px; align-items:start; }
.section-number { margin:7px 0 0; color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.13em; }
.section-intro h2,.contact h2 { margin:0; font-size:clamp(42px,5vw,70px); font-weight:800; letter-spacing:-.06em; line-height:.98; }
.section-intro>p:last-child { max-width:360px; margin:7px 0 0; color:var(--muted); font-size:17px; line-height:1.6; }
.service-tabs { margin-top:72px; }
.tabs-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:7px; border:1px solid var(--line); border-radius:20px; background:#f5f8fc; }
.tabs-list button { height:58px; border:0; border-radius:14px; background:transparent; color:#778198; font:700 14px inherit; cursor:pointer; }
.tabs-list button[aria-selected="true"] { background:white; color:var(--blue); box-shadow:0 7px 18px #2563eb17; }
.tabs-list button:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.service-panel { display:grid; grid-template-columns:.4fr 1.4fr 1fr; gap:48px; min-height:340px; align-items:center; margin-top:24px; padding:56px; border:1px solid #e1ecf8; border-radius:32px; background:#f8fbff; animation:reveal .32s ease; }
@keyframes reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.service-icon { display:grid; width:100px; height:100px; place-items:center; border-radius:28px; background:#dbeafe; color:var(--blue); font-size:42px; font-weight:500; transform:rotate(-5deg); }
.service-panel h3 { max-width:600px; margin:0 0 18px; font-size:clamp(32px,3.5vw,50px); font-weight:780; letter-spacing:-.055em; line-height:1.08; }
.service-panel p { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.service-panel ul { display:grid; gap:12px; margin:0; padding:0; list-style:none; font-size:13px; font-weight:700; }
.service-panel li { padding:14px; border-radius:12px; background:white; box-shadow:0 5px 15px #4c557b0d; }
.process { padding:120px max(24px,calc((100vw - 1120px)/2)); background:#172d50; color:white; }
.section-intro.light { grid-template-columns:.55fr 2fr; }
.section-intro.light .section-number { color:#7dd3fc; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:72px; }
.steps article { min-height:290px; padding:34px; border:1px solid #ffffff12; border-radius:26px; background:#1e3a61; transition:.2s ease; }
.steps article:hover { background:#23456f; transform:translateY(-5px); }
.steps span { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#38bdf826; color:#7dd3fc; font-size:12px; font-weight:800; }
.steps h3 { margin:72px 0 16px; font-size:25px; }
.steps p { max-width:330px; margin:0; color:#b8c0d6; line-height:1.65; }
.contact { display:grid; grid-template-columns:1.1fr .9fr; gap:7vw; align-items:end; min-height:650px; padding:120px max(24px,calc((100vw - 1120px)/2)); background:#eaf4ff; }
.contact>div>p:last-child { max-width:650px; margin:27px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.facebook-card { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:24px; border-radius:22px; background:white; box-shadow:0 18px 45px #47517c18; transition:.2s ease; }
.facebook-card:hover { box-shadow:0 24px 55px #47517c29; transform:translateY(-5px); }
.facebook-letter { display:grid; width:54px; height:54px; place-items:center; border-radius:17px; background:#1877f2; color:white; font-size:36px; font-weight:900; line-height:1; }
.facebook-card small,.facebook-card strong { display:block; }
.facebook-card small { margin-bottom:5px; color:#7a849b; font-size:9px; font-weight:850; letter-spacing:.14em; }
.facebook-card strong { font-size:25px; font-weight:780; letter-spacing:-.03em; }
.facebook-card b { color:var(--blue); font-size:20px; }
.contact-note { grid-column:2; margin:0; color:var(--muted); font-size:12px; }
footer { display:flex; min-height:115px; align-items:center; justify-content:space-between; padding:25px max(24px,calc((100vw - 1120px)/2)); background:white; font-size:12px; }
footer>p { color:var(--muted); }
@media (max-width:900px) {
	.site-header { grid-template-columns:1fr auto; }
	.site-header nav { display:none; }
	.hero { grid-template-columns:1fr; gap:10px; padding-top:90px; }
	.hero-visual { width:min(600px,100%); min-height:530px; margin:0 auto; }
	.section-intro,.service-panel,.contact { grid-template-columns:1fr; }
	.section-intro { gap:24px; }
	.service-panel { gap:28px; padding:38px; }
	.service-icon { width:76px; height:76px; border-radius:22px; }
	.steps { grid-template-columns:1fr; }
	.steps article { min-height:auto; }
	.steps h3 { margin-top:42px; }
	.contact-note { grid-column:1; }
	footer { flex-wrap:wrap; gap:20px; }
}
@media (max-width:600px) {
	.site-header { top:8px; width:calc(100% - 16px); min-height:62px; margin-top:8px; border-radius:18px; }
	.small-cta { padding:10px; font-size:0; }
	.hero { width:100%; padding:72px 22px 70px; }
	h1 { font-size:clamp(50px,15vw,76px); }
	.hero-text { margin:28px 0; font-size:17px; }
	.hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
	.hero-visual { min-height:470px; transform:scale(.92); transform-origin:center top; }
	.idea-problem { left:-8px; width:240px; }
	.idea-solution { right:-8px; width:290px; }
	.idea-solution strong { font-size:29px; }
	.flow-line { left:130px; }
	.services,.process,.contact { padding:85px 22px; }
	.tabs-list { grid-template-columns:1fr; }
	.service-panel { padding:27px; border-radius:24px; }
	.section-intro.light { grid-template-columns:1fr; }
	.contact { min-height:auto; }
	footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }