* {margin:0;padding:0;box-sizing:border-box}
body {font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;color:#333}
.container {max-width:1200px;margin:0 auto;padding:0 20px}
.navbar {background:#fff;padding:1rem 0;box-shadow:0 2px 10px rgba(0,0,0,0.1);position:sticky;top:0;z-index:1000}
.navbar .container {display:flex;justify-content:space-between;align-items:center}
.logo {font-size:1.5rem;font-weight:700;color:#1F4E78;text-decoration:none}
.nav-menu {display:flex;list-style:none;gap:2rem}
.nav-menu a {text-decoration:none;color:#333;font-weight:500;transition:color 0.3s}
.nav-menu a:hover, .nav-menu a.active {color:#1F4E78}
.btn-nav {background:#1F4E78;color:#fff!important;padding:0.5rem 1.5rem;border-radius:6px}
.btn-nav:hover {background:#2E5C8A}
.hamburger {display:none;flex-direction:column;gap:4px;cursor:pointer}
.hamburger span {width:25px;height:3px;background:#333;transition:0.3s}
.hero {background:linear-gradient(135deg,#1F4E78 0%,#2E5C8A 100%);color:#fff;padding:5rem 0;text-align:center}
.hero h1 {font-size:3rem;margin-bottom:1rem}
.hero-subtitle {font-size:1.25rem;margin-bottom:2rem;opacity:0.95}
.hero-buttons {display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn {padding:0.75rem 2rem;border-radius:6px;text-decoration:none;font-weight:600;display:inline-block;transition:all 0.3s}
.btn-primary {background:#4A90E2;color:#fff}
.btn-primary:hover {background:#3a7bc8;transform:translateY(-2px)}
.btn-secondary {background:#fff;color:#1F4E78;border:2px solid #1F4E78}
.btn-secondary:hover {background:#1F4E78;color:#fff}
.btn-primary-white {background:#fff;color:#1F4E78}
.btn-primary-white:hover {background:#f0f0f0}
.social-proof {padding:3rem 0;background:#F8F9FA}
.stats {display:flex;justify-content:space-around;text-align:center;flex-wrap:wrap;gap:2rem}
.stat h3 {font-size:2.5rem;color:#1F4E78;margin-bottom:0.5rem}
.stat p {color:#666}
.services-overview, .recent-work, .why-me, .services-detailed, .case-study, .about-story {padding:4rem 0}
h2 {font-size:2.5rem;text-align:center;margin-bottom:1rem;color:#1F4E78}
.section-subtitle {text-align:center;font-size:1.25rem;color:#666;margin-bottom:3rem}
.services-grid, .work-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem}
.service-card {background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:transform 0.3s}
.service-card:hover {transform:translateY(-5px)}
.service-icon {font-size:3rem;margin-bottom:1rem}
.service-card h3 {color:#1F4E78;margin-bottom:1rem}
.learn-more {color:#4A90E2;text-decoration:none;font-weight:600;display:inline-block;margin-top:1rem}
.work-card {text-decoration:none;color:#333;display:block;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:transform 0.3s}
.work-card:hover {transform:translateY(-5px)}
.work-image {height:250px;display:flex;align-items:center;justify-content:center;position:relative}
.gradient-1 {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}
.gradient-2 {background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}
.gradient-3 {background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}
.work-tag {background:rgba(255,255,255,0.9);padding:0.5rem 1rem;border-radius:20px;font-size:0.875rem;font-weight:600}
.work-content {padding:1.5rem}
.work-content h3 {color:#1F4E78;margin-bottom:0.5rem}
.work-meta {display:flex;gap:1rem;margin-top:1rem;font-size:0.875rem;color:#666;flex-wrap:wrap}
.work-meta span {background:#F8F9FA;padding:0.25rem 0.75rem;border-radius:4px}
.checkmark-list {list-style:none;margin:2rem 0}
.checkmark-list li {padding:0.75rem 0 0.75rem 2rem;position:relative}
.checkmark-list li:before {content:"✓";position:absolute;left:0;color:#4A90E2;font-weight:700;font-size:1.25rem}
.cta-section {background:linear-gradient(135deg,#1F4E78 0%,#2E5C8A 100%);color:#fff;padding:4rem 0;text-align:center}
.cta-section h2 {color:#fff;margin-bottom:1rem}
.cta-section p {font-size:1.25rem;margin-bottom:2rem}
.footer {background:#1a1a1a;color:#fff;padding:3rem 0 1rem}
.footer-content {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer h3, .footer h4 {margin-bottom:1rem}
.footer-links ul {list-style:none}
.footer-links li {margin:0.5rem 0}
.footer-links a {color:#ddd;text-decoration:none}
.footer-links a:hover {color:#4A90E2}
.footer-contact p {margin:0.5rem 0}
.footer-contact a {color:#4A90E2;text-decoration:none}
.social-links {display:flex;gap:1rem;margin-top:1rem}
.social-links a {background:#333;padding:0.5rem 1rem;border-radius:6px;text-decoration:none;color:#fff}
.social-links a:hover {background:#4A90E2}
.footer-bottom {text-align:center;padding-top:2rem;border-top:1px solid #333}
.page-header {background:linear-gradient(135deg,#1F4E78 0%,#2E5C8A 100%);color:#fff;padding:3rem 0;text-align:center}
.page-header h1 {font-size:2.5rem;margin-bottom:0.5rem;color:#fff}
.service-package {background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);padding:2rem;margin-bottom:2rem}
.service-package.featured {border:3px solid #4A90E2}
.package-badge {background:#4A90E2;color:#fff;padding:0.25rem 1rem;border-radius:20px;font-size:0.875rem;font-weight:600;display:inline-block;margin-bottom:1rem}
.package-badge.popular {background:#f5576c}
.package-price {font-size:2rem;color:#1F4E78;font-weight:700;margin:0.5rem 0}
.package-features, .package-examples {list-style:none;margin:1rem 0}
.package-features li, .package-examples li {padding:0.5rem 0 0.5rem 1.5rem;position:relative}
.package-features li:before {content:"✓";position:absolute;left:0;color:#4A90E2;font-weight:700}
.package-examples li:before {content:"→";position:absolute;left:0;color:#666}
.process-steps {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-top:2rem}
.process-step {text-align:center}
.step-number {width:60px;height:60px;background:#4A90E2;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1rem}
.case-study-header {text-align:center;margin-bottom:3rem}
.case-badge {background:#4A90E2;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-size:0.875rem;font-weight:600;display:inline-block}
.case-study-header h2 {margin:1rem 0}
.case-subtitle {font-size:1.25rem;color:#666}
.case-section {margin:3rem 0}
.case-section h3 {color:#1F4E78;margin-bottom:1rem;font-size:1.75rem}
.case-section ol, .case-section ul {margin:1rem 0 1rem 2rem}
.case-section li {margin:0.5rem 0}
.results-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin:2rem 0}
.result-card {background:#F8F9FA;padding:1.5rem;border-radius:8px;text-align:center}
.result-card h4 {color:#1F4E78;font-size:1.5rem;margin-bottom:0.5rem}
.tech-stack {margin-top:2rem;padding-top:2rem;border-top:2px solid #F8F9FA}
.tech-tags {display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1rem}
.tech-tags span {background:#1F4E78;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-size:0.875rem}
.timeline-items {max-width:800px;margin:2rem auto}
.timeline-item {display:grid;grid-template-columns:150px 1fr;gap:2rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #eee}
.timeline-year {color:#4A90E2;font-weight:700;font-size:1.125rem}
.skills-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:2rem}
.skill-category {background:#F8F9FA;padding:1.5rem;border-radius:8px}
.skill-category h3 {color:#1F4E78;margin-bottom:1rem;font-size:1.25rem}
.skill-category ul {list-style:none}
.skill-category li {padding:0.5rem 0;border-bottom:1px solid #eee}
.language-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-top:2rem;text-align:center}
.language {background:#F8F9FA;padding:2rem;border-radius:8px}
.language h3 {margin-bottom:0.5rem;font-size:1.5rem}
.contact-grid {display:grid;grid-template-columns:1fr 1.5fr;gap:3rem}
.contact-info {padding-right:2rem}
.contact-details {margin:2rem 0}
.contact-item {margin:2rem 0}
.contact-item h3 {color:#1F4E78;margin-bottom:0.5rem}
.small-text {font-size:0.875rem;color:#666}
.faq-mini {background:#F8F9FA;padding:1.5rem;border-radius:8px;margin-top:2rem}
.faq-item {margin:1rem 0}
.form-group {margin-bottom:1.5rem}
.form-group label {display:block;margin-bottom:0.5rem;font-weight:600;color:#333}
.form-group input, .form-group select, .form-group textarea {width:100%;padding:0.75rem;border:1px solid #ddd;border-radius:6px;font-size:1rem;font-family:inherit}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {outline:none;border-color:#4A90E2}
.btn-full {width:100%}
.form-note {font-size:0.875rem;color:#666;margin-top:1rem;font-style:italic}
.calendar-cta {background:#F8F9FA;padding:3rem 0;text-align:center}
.text-center {text-align:center}
.lead {font-size:1.25rem;line-height:1.8}
.about-list {list-style:none;margin:2rem 0}
.about-list li {padding:1rem 0;border-bottom:1px solid #eee}
.about-list strong {color:#1F4E78}
@media (max-width:768px) {
.nav-menu {display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,0.1);padding:1rem}
.nav-menu.active {display:flex}
.hamburger {display:flex}
.hamburger.active span:nth-child(1) {transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2) {opacity:0}
.hamburger.active span:nth-child(3) {transform:rotate(-45deg) translate(5px,-5px)}
.hero h1 {font-size:2rem}
.hero-buttons {flex-direction:column}
.stats {flex-direction:column}
h2 {font-size:2rem}
.contact-grid {grid-template-columns:1fr}
.contact-info {padding-right:0;margin-bottom:2rem}
.timeline-item {grid-template-columns:1fr;gap:1rem}
}