:root {
    --bg: #06111f;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-strong: rgba(255, 255, 255, 0.95);
    --glass: rgba(15, 23, 42, 0.58);
    --text: #0f172a;
    --muted: #64748b;
    --white-soft: #e5eefc;
    --accent: #38bdf8;
    --accent-2: #2563eb;
    --line: rgba(148, 163, 184, 0.35);
    --shadow: 0 30px 90px rgba(2, 6, 23, 0.28);
    --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: #f1f5f9; color: var(--text); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
.hero { position: relative; min-height: 95vh; padding: 28px clamp(20px, 5vw, 76px) 92px; color: white; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(2, 6, 23, 0.88), rgba(15, 23, 42, 0.72)), url("https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&w=1800&q=85") center/cover no-repeat; filter: blur(2px) saturate(1.1); transform: scale(1.04); z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 20%, rgba(56, 189, 248, 0.32), transparent 28%), radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.35), transparent 32%); z-index: -1; }
.navbar { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 18px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(15, 23, 42, 0.46); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,0.18); }
.logo { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 900; letter-spacing: 0.06em; box-shadow: 0 12px 30px rgba(56,189,248,0.35); }
.nav-links { display: flex; gap: 22px; color: var(--white-soft); font-weight: 700; }
.nav-links a:hover { color: white; }
.hero-grid { max-width: 1180px; margin: 88px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: 48px; align-items: center; }
.hero-copy, .hero-image-card, .contact-form, .timeline article, .card, .project-card { border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-copy { min-width: 0; padding: clamp(28px, 4vw, 46px); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(20px); overflow: hidden; }
.eyebrow { margin: 0 0 14px; color: #7dd3fc; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 100%; font-size: clamp(2.35rem, 4.8vw, 4.85rem); line-height: 1.02; letter-spacing: -0.045em; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
.hero-text { max-width: 680px; margin: 26px 0 0; color: #dbeafe; font-size: 1.18rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-3px); }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; box-shadow: 0 18px 36px rgba(37,99,235,.35); }
.button.secondary { border-color: rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.10); }
.hero-image-card { padding: 14px; border-radius: var(--radius); background: rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.hero-image-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255,255,255,.22); }
.image-caption { padding: 16px 8px 4px; color: #dbeafe; font-weight: 800; }
.section { max-width: 1180px; margin: 0 auto; padding: 96px clamp(20px, 4vw, 34px); }
.section-heading { max-width: 780px; margin-bottom: 36px; }
.section h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -0.045em; }
.section p { color: var(--muted); }
.cards { display: grid; gap: 24px; }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--panel-strong); border-radius: var(--radius); padding: 30px; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover, .project-card:hover { transform: translateY(-6px); }
.card h3 { margin: 0 0 12px; font-size: 1.25rem; }
.card p { margin: 0; }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: start; }
.timeline { display: grid; gap: 18px; }
.timeline article { position: relative; padding: 26px 28px; background: var(--panel-strong); border-radius: 22px; }
.timeline article::before { content:""; position:absolute; left:0; top:26px; bottom:26px; width:5px; border-radius:999px; background:linear-gradient(var(--accent), var(--accent-2)); }
.timeline h3 { margin: 0 0 8px; }
.timeline p { margin: 0; }
.projects-section { max-width: 1240px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.project-card { overflow: hidden; border-radius: var(--radius); background: white; transition: transform .18s ease, box-shadow .18s ease; }
.project-card img { display: block; width: 100%; height: 230px; object-fit: cover; border-bottom: 1px solid #e2e8f0; }
.project-content { padding: 24px; }
.project-tag { display:inline-flex; margin-bottom:12px; padding:6px 10px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.project-card h3 { margin: 0 0 10px; font-size: 1.2rem; }
.project-card p { margin: 0; color: var(--muted); }
.contact-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.contact-form { background: var(--panel-strong); border-radius: var(--radius); padding: 30px; display: grid; gap: 12px; }
.contact-form label { font-weight: 900; font-size: .92rem; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #cbd5e1; border-radius:16px; padding:14px 16px; font:inherit; background:#f8fafc; }
.contact-form input:focus, .contact-form textarea:focus { outline:4px solid #dbeafe; border-color: var(--accent-2); }
.contact-form button { border:0; font:inherit; margin-top:8px; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:30px clamp(20px,5vw,76px); background:#020617; color:#cbd5e1; }
.footer a { color:white; font-weight:800; }
@media (max-width: 1100px) { .hero h1 { font-size: clamp(2.25rem, 4.4vw, 4rem); } .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); } }
@media (max-width: 950px) { .hero-grid, .split, .contact-section { grid-template-columns: 1fr; } .three-columns, .project-grid { grid-template-columns: 1fr; } .hero h1 { font-size: clamp(2.45rem, 8vw, 4.6rem); } }
@media (max-width: 650px) { .navbar { border-radius: 24px; align-items:flex-start; } .nav-links { flex-wrap:wrap; justify-content:flex-end; gap:10px 14px; font-size:.88rem; } .hero { padding-bottom: 64px; } .hero-grid { margin-top: 54px; } .hero h1 { font-size: clamp(2.1rem, 10vw, 3.25rem); letter-spacing: -0.035em; } .section { padding-top: 70px; padding-bottom: 70px; } .footer { flex-direction: column; } }