:root{--bg: #FAFAF7;--bg-alt: #F0EFE9;--surface: #FFFFFF;--text: #1A1A2E;--text-secondary: #4A4A5A;--text-muted: #8A8A9A;--border: #E0DFD8;--blue: #2070B0;--navy: #0D2B5E;--cyan: #4DB8E8;--orange: #E86A1A;--amber: #F9A825;--green: #25D366;--font-serif: "Playfair Display", Georgia, "Times New Roman", serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--max-width: 1200px;--section-pad: clamp(80px, 12vw, 140px)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);font-size:1.1rem;line-height:1.7;color:var(--text-secondary);background:var(--bg)}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.container{max-width:var(--max-width);margin:0 auto;padding:0 clamp(24px,5vw,48px)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--bg);transition:border-color .3s ease,box-shadow .3s ease;border-bottom:1px solid transparent}nav.scrolled{border-bottom-color:var(--border);box-shadow:0 1px 8px #0000000a}nav .nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;height:64px}nav .logo-link{display:flex;align-items:center}nav .logo-link img{height:28px;width:auto}nav .nav-links{display:flex;gap:36px}nav .nav-links a{font-size:.95rem;font-weight:500;color:var(--text-secondary);letter-spacing:.01em;transition:color .2s}nav .nav-links a:hover{color:var(--text)}nav .nav-links a.active{color:var(--navy);font-weight:600}.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px}.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:.3s}@media(max-width:640px){.nav-toggle{display:block}nav .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;padding:24px clamp(24px,5vw,48px);gap:20px}nav .nav-links.open{display:flex}}.services-hero{padding-top:calc(64px + var(--section-pad));padding-bottom:var(--section-pad);border-bottom:1px solid var(--border)}.services-hero .hero-label{font-family:var(--font-sans);font-size:.85rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:24px}.services-hero h1{font-family:var(--font-serif);font-weight:900;font-size:clamp(2.8rem,7vw,5rem);line-height:1.08;color:var(--navy);margin-bottom:32px;max-width:700px}.services-hero p{font-size:clamp(1.1rem,2vw,1.25rem);max-width:580px;color:var(--text-secondary);line-height:1.7}.services-section{padding:var(--section-pad) 0}.services-section .section-label{font-family:var(--font-sans);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:64px}.service-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start;margin-bottom:clamp(80px,10vw,120px)}.service-card:last-child{margin-bottom:0}.service-card.reverse .service-text{order:2}.service-card.reverse .service-detail{order:1}.service-icon{font-size:1.6rem;margin-bottom:16px;display:block}.service-text h3{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin-bottom:16px;line-height:1.2}.service-text p{color:var(--text-secondary);margin-bottom:24px;max-width:460px}.service-detail{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:clamp(24px,3vw,36px)}.service-detail h4{font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}.detail-list{list-style:none}.detail-list li{font-size:.95rem;color:var(--text-secondary);padding:10px 0;border-bottom:1px solid var(--bg-alt);display:flex;align-items:baseline;gap:10px}.detail-list li:last-child{border-bottom:none}.detail-list .check{color:var(--blue);font-weight:700;flex-shrink:0}.tech-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.tech-tag{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:var(--text-secondary);background:var(--bg-alt);border:1px solid var(--border);padding:4px 12px;border-radius:100px;white-space:nowrap}@media(max-width:768px){.service-card{grid-template-columns:1fr;gap:32px}.service-card.reverse .service-text{order:1}.service-card.reverse .service-detail{order:2}}.process-section{padding:var(--section-pad) 0;background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.process-section h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(2rem,5vw,3.5rem);color:var(--navy);margin-bottom:12px;line-height:1.1}.process-section .subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin-bottom:56px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,40px)}.process-step{position:relative}.step-number{font-family:var(--font-mono);font-weight:700;font-size:2.4rem;color:var(--navy);opacity:.12;line-height:1;margin-bottom:16px}.process-step h4{font-weight:600;font-size:1rem;color:var(--text);margin-bottom:8px}.process-step p{font-size:.88rem;color:var(--text-muted);line-height:1.6}@media(max-width:768px){.process-grid{grid-template-columns:repeat(2,1fr);gap:40px}}@media(max-width:480px){.process-grid{grid-template-columns:1fr}}.portfolio-section{padding:var(--section-pad) 0}.portfolio-section h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(2rem,5vw,3.5rem);color:var(--navy);margin-bottom:12px;line-height:1.1}.portfolio-section .subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:500px;margin-bottom:56px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.portfolio-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px;transition:box-shadow .3s ease,transform .2s ease}.portfolio-card:hover{box-shadow:0 6px 28px #00000012;transform:translateY(-3px)}.portfolio-card .port-icon{font-size:1.4rem;margin-bottom:16px}.portfolio-card h4{font-family:var(--font-serif);font-weight:700;font-size:1.2rem;color:var(--navy);margin-bottom:8px}.portfolio-card p{font-size:.88rem;color:var(--text-muted);line-height:1.6;margin-bottom:16px}.portfolio-card .port-tags{display:flex;flex-wrap:wrap;gap:6px}.portfolio-card .port-tag{font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);padding:3px 10px;border-radius:100px}@media(max-width:768px){.portfolio-grid{grid-template-columns:1fr}}.cta-section{padding:var(--section-pad) 0;border-top:1px solid var(--border);text-align:center}.cta-section h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(2rem,5vw,3.5rem);color:var(--navy);margin-bottom:16px;line-height:1.1}.cta-section p{font-size:1.1rem;color:var(--text-secondary);max-width:520px;margin:0 auto 40px}.cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.btn-wa{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;font-weight:600;font-size:1.05rem;padding:14px 32px;border-radius:100px;transition:background .2s ease,transform .2s ease}.btn-wa:hover{background:#1daa57;transform:translateY(-2px)}.btn-wa svg{width:22px;height:22px;fill:currentColor}.btn-email{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--navy);font-weight:600;font-size:1.05rem;padding:14px 32px;border-radius:100px;border:2px solid var(--navy);transition:background .2s ease,transform .2s ease}.btn-email:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}footer{border-top:1px solid var(--border);padding:40px 0}.footer-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted)}.footer-inner a{color:var(--text-muted);transition:color .2s}.footer-inner a:hover{color:var(--text)}.footer-sep{margin:0 4px}
