:root{--ink:#101828;--muted:#667085;--line:#e4e7ec;--soft:#f8fafc;--accent:#635bff;--accent2:#06b6d4;--navy:#0b1020}
    html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;color:var(--ink);line-height:1.7;overflow-x:hidden}
    section{scroll-margin-top:90px}.navbar{backdrop-filter:blur(18px);background:rgba(255,255,255,.88);border-bottom:1px solid rgba(228,231,236,.8)}
    .navbar-brand{font-weight:800;letter-spacing:-.04em}.brand-dot{color:var(--accent)}.nav-link{font-weight:600;color:#344054}.nav-link:hover{color:var(--accent)}
    .hero{min-height:62vh;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 15%,rgba(99,91,255,.17),transparent 32%),radial-gradient(circle at 10% 85%,rgba(6,182,212,.12),transparent 28%),linear-gradient(180deg,#fff,#fbfcff)}
    .hero-grid{position:absolute;inset:0;opacity:.32;background-image:linear-gradient(rgba(16,24,40,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(16,24,40,.05) 1px,transparent 1px);background-size:52px 52px}
    .eyebrow,.filter-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid #dfe3ff;background:#f5f4ff;color:#5148c9;border-radius:999px;font-weight:700;font-size:.82rem}
    .hero h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1;letter-spacing:-.065em;font-weight:800}
    .gradient-text{background:linear-gradient(90deg,var(--accent),#8b5cf6,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero p{max-width:720px;color:#475467;font-size:1.08rem}.section-label{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem}
    .section-title{font-weight:800;letter-spacing:-.045em;font-size:clamp(2rem,4vw,3rem)}.section-copy{color:var(--muted);max-width:700px}
    .project-card{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;height:100%;transition:.3s ease;position:relative}
    .project-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(16,24,40,.1);border-color:#d8d5ff}
    .project-visual{min-height:205px;padding:26px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,#111827,#252b53)}
    .project-visual.alt{background:linear-gradient(135deg,#0f172a,#164e63)}.project-visual.third{background:linear-gradient(135deg,#18181b,#312e81)}
    .project-visual:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;top:-110px;background:rgba(99,91,255,.35)}
    .project-number{font:600 .75rem "JetBrains Mono",monospace;color:#c7d2fe;position:relative;z-index:2}
    .project-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:15px;position:relative;z-index:2;font-size:1.3rem}
    .project-visual h3{position:relative;z-index:2;margin-top:24px;font-size:1.3rem;font-weight:800}
    .project-body{padding:25px}.project-body p{color:var(--muted);font-size:.92rem}
    .tech-pill{display:inline-block;padding:6px 10px;margin:4px 3px 0 0;background:var(--soft);border:1px solid var(--line);border-radius:8px;color:#344054;font-size:.76rem;font-weight:600}
    .project-link{color:var(--accent);font-weight:700;text-decoration:none}.project-link:hover{text-decoration:underline}
    .filter-wrap{display:flex;flex-wrap:wrap;gap:8px}.filter-btn{background:#fff;color:#475467;border-color:var(--line);cursor:pointer}.filter-btn.active,.filter-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
    .case-study{border:1px solid var(--line);border-radius:24px;padding:30px;background:#fff;height:100%}.case-study i{font-size:1.5rem;color:var(--accent)}
    footer{background:var(--navy);color:#98a2b3}footer a{color:#d0d5dd;text-decoration:none}footer a:hover{color:#fff}
    [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal-in{opacity:1;transform:none}
    .delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
    @media(max-width:991px){.hero{min-height:auto;padding:125px 0 75px}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1;transform:none;transition:none}.project-card{transition:none}}