:root{ /* Accent: royal blue chosen */ --accent: #1E5AFF; --accent-2: #7FA8FF; --text: #0b1220; --muted: #6b7280; --surface: #ffffff; --glass: rgba(13,17,24,0.03); --radius: 12px; --maxw: 1100px; --ff-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --card-elev: 0 6px 20px rgba(13,20,35,0.06); } /* Theme definitions: light & dark. We toggle via [data-theme] on */ html[data-theme='light']{ --bg: #f7f8fb; --surface: #ffffff; --text: #0b1220; --muted: #5b6270; --card-bg: rgba(255,255,255,0.9); --invert: 0; } html[data-theme='dark']{ --bg: linear-gradient(180deg,#061022 0%, #041022 100%); --surface: rgba(8,12,20,0.85); --text: #e9f0fb; --muted: #98a0b0; --card-bg: rgba(255,255,255,0.02); --invert: 1; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: var(--ff-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; } .container{ width: calc(100% - 40px); max-width: var(--maxw); margin: 0 auto; padding: 40px 0; } /* Header */ .site-header{ position: sticky; top:0; z-index:60; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); border-bottom: 1px solid rgba(0,0,0,0.04); } .header-row{ display:flex; gap:18px; align-items:center; } .brand-link{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit} .logo svg{color:var(--accent)} .brand-text .title{font-weight:700;letter-spacing:0.2px} .brand-text .title span{color:var(--accent)} .tagline{font-size:0.85rem;color:var(--muted)} /* Navigation */ .nav{margin-left:auto;display:flex;gap:20px} .nav a{color:inherit;text-decoration:none;font-weight:600;padding:10px 6px;border-radius:8px} .nav a:hover{background:var(--card-bg)} .controls{display:flex;gap:8px;align-items:center;margin-left:8px} .theme-toggle, .nav-toggle{background:transparent;border:0;font-size:18px;cursor:pointer;padding:8px;border-radius:8px} .nav-toggle{display:none} /* Hero */ .hero{padding:72px 0} .hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center} .hero-copy h1{font-size:2.1rem;margin:0 0 12px} .lead{color:var(--muted);max-width:48ch} .hero-ctas{margin-top:16px;display:flex;gap:12px} .btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:700;box-shadow: var(--card-elev)} .btn-outline{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text);font-weight:600} /* Card on hero */ .hero-card{background:var(--card-bg);border-radius:12px;padding:14px;box-shadow: var(--card-elev)} .card-visual{height:180px;border-radius:8px;overflow:hidden;margin-bottom:12px} .card-copy h3{margin:0 0 8px} .small-link{font-weight:600;color:var(--accent);text-decoration:none} /* Sections */ .section{padding:56px 0} .section.alt{background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent)} .split{display:flex;gap:28px;align-items:center} .bullets{margin-top:12px;padding-left:18px;color:var(--muted)} .bullets li{margin-bottom:8px} /* Stats */ .about-stats{display:flex;gap:12px;flex-direction:column;margin-left:auto} .stat{background:var(--surface);padding:14px;border-radius:10px;box-shadow: var(--card-elev);min-width:160px;text-align:center} .stat-value{font-weight:800;font-size:1.2rem} .stat-label{color:var(--muted);font-size:0.9rem;margin-top:6px} /* Services */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .service{background:var(--surface);padding:18px;border-radius:10px;box-shadow: var(--card-elev)} /* Insights */ .insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .insight{background:var(--surface);padding:16px;border-radius:10px;box-shadow: var(--card-elev)} .small-link{display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none;font-weight:700} /* Contact */ .contact-section .email a{color:var(--accent);font-weight:700;text-decoration:none} /* Footer */ .site-footer{padding:18px 0;border-top:1px solid rgba(0,0,0,0.04);margin-top:20px} .footer-row{display:flex;justify-content:space-between;align-items:center;gap:12px} .footer-links a{margin-left:12px;color:var(--muted);text-decoration:none} /* Responsive */ @media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .nav{display:none} .nav-toggle{display:block} .about-stats{margin-left:0;margin-top:18px;flex-direction:row;gap:12px} .split{flex-direction:column} } @media (max-width:520px){ .container{padding:28px 16px} .brand-text .title{font-size:1rem} .hero-copy h1{font-size:1.6rem} }