:root{ --bg:#0c1222; --bg-elevated:#121a2e; --bg-card:#161f36; --bg-alt:#0f1628; --text:#e8ecf4; --text-muted:#94a3b8; --accent:#5eead4; --accent-dim:#2dd4bf; --accent-glow:rgba(94, 234, 212, 0.15); --border:rgba(148, 163, 184, 0.12); --font-sans:"Instrument Sans",system-ui,sans-serif; --font-serif:"Newsreader",Georgia,serif; --radius:12px; --radius-lg:20px; --header-h:72px; --container:min(1120px, calc(100% - 2.5rem)); --ease:cubic-bezier(0.22, 1, 0.36, 1)} *, *::before, *::after{ box-sizing:border-box} html{ scroll-behavior:smooth} body{ margin:0; font-family:var(--font-sans); font-size:1rem; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased} img,svg{ display:block; max-width:100%} a{ color:var(--accent); text-decoration:none; transition:color 0.2s var(--ease)} a:hover{ color:var(--text)} .container{ width:var(--container); margin-inline:auto} .skip-link{ position:absolute; top:-100%; left:1rem; z-index:1000; padding:0.5rem 1rem; background:var(--accent); color:var(--bg); border-radius:var(--radius); font-weight:600} .skip-link:focus{ top:1rem} .site-header{ position:fixed; inset:0 0 auto; z-index:100; height:var(--header-h); background:rgba(12, 18, 34, 0.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)} .nav{ display:flex; align-items:center; justify-content:space-between; height:100%} .logo{ display:flex; align-items:center; gap:0.65rem; color:var(--text); font-weight:600; font-size:1.05rem} .logo:hover{ color:var(--text)} .logo em{ font-style:normal; font-weight:500; color:var(--text-muted)} .logo-mark{ display:block; width:32px; height:32px; border-radius:8px; flex-shrink:0; object-fit:contain} .nav-menu{ display:flex; align-items:center; gap:2rem; margin:0; padding:0; list-style:none} .nav-menu a{ color:var(--text-muted); font-size:0.95rem; font-weight:500} .nav-menu a:hover{ color:var(--text)} .nav-cta{ padding:0.5rem 1.1rem; background:var(--accent); color:var(--bg) !important; border-radius:999px; font-weight:600 !important} .nav-cta:hover{ background:var(--text); color:var(--bg) !important} .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer} .nav-toggle span{ display:block; width:22px; height:2px; margin-inline:auto; background:var(--text); border-radius:2px; transition:transform 0.25s var(--ease),opacity 0.2s} .nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg)} .hero{ position:relative; padding:calc(var(--header-h) + 4rem) 0 5rem; overflow:hidden} .hero-bg{ position:absolute; inset:0; pointer-events:none} .hero-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:0.5} .hero-orb--1{ top:-10%; right:10%; width:480px; height:480px; background:#2dd4bf} .hero-orb--2{ bottom:0; left:-5%; width:360px; height:360px; background:#3b82f6; opacity:0.35} .hero-grid{ position:absolute; inset:0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black 20%, transparent 70%)} .hero-inner{ position:relative; max-width:640px} .eyebrow{ margin:0 0 1rem; font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent)} .hero h1{ margin:0 0 1.25rem; font-family:var(--font-serif); font-size:clamp(2.5rem, 5vw, 3.75rem); font-weight:500; line-height:1.1; letter-spacing:-0.02em} .hero h1 em{ font-style:italic; color:var(--accent)} .hero-lead{ margin:0 0 2rem; font-size:1.15rem; color:var(--text-muted); max-width:52ch} .hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem} .btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.75rem 1.5rem; font-family:inherit; font-size:0.95rem; font-weight:600; border-radius:999px; border:none; cursor:pointer; transition:background 0.2s var(--ease),color 0.2s var(--ease),transform 0.15s} .btn:active{ transform:scale(0.98)} .btn-primary{ background:var(--accent); color:var(--bg)} .btn-primary:hover{ background:var(--text); color:var(--bg)} .btn-ghost{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--border)} .btn-ghost:hover{ background:var(--bg-card); color:var(--text)} .btn-large{ padding:0.9rem 1.75rem; font-size:1rem} .hero-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin:0; padding:1.5rem 0 0; list-style:none; border-top:1px solid var(--border)} .hero-stats strong{ display:block; font-size:0.95rem; margin-bottom:0.2rem} .hero-stats span{ font-size:0.85rem; color:var(--text-muted)} .hero-visual{ position:relative; margin-top:4rem; display:flex; justify-content:center} .phone-mockup{ position:relative; width:260px; padding:12px; background:linear-gradient(160deg, #1e293b 0%, #0f172a 100%); border-radius:36px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08)} .phone-notch{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:80px; height:22px; background:#0f172a; border-radius:0 0 14px 14px; z-index:2} .phone-screen{ position:relative; aspect-ratio:9 / 19; overflow:hidden; background:linear-gradient(180deg, #1a2744 0%, #0c1222 100%); border-radius:26px} .app-preview{ display:flex; flex-direction:column; gap:0.5rem; height:100%; padding:2.25rem 0.75rem 0.65rem; font-size:0.5625rem; line-height:1.35; color:var(--text)} .app-preview__status{ display:flex; align-items:center; justify-content:space-between; padding:0 0.15rem; font-size:0.5rem; font-weight:600; color:var(--text-muted)} .app-preview__status-icons{ width:2.25rem; height:0.45rem; border-radius:2px; background:linear-gradient(
    90deg,
    var(--text-muted) 0 30%,
    transparent 30% 38%,
    var(--text-muted) 38% 68%,
    transparent 68% 76%,
    var(--text-muted) 76% 100%
  ); opacity:0.65} .app-preview__header{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem} .app-preview__greeting{ margin:0; font-size:0.5rem; color:var(--text-muted)} .app-preview__title{ margin:0.1rem 0 0; font-family:var(--font-sans); font-size:0.8125rem; font-weight:700; line-height:1.2} .app-preview__avatar{ display:grid; place-items:center; flex-shrink:0; width:1.5rem; height:1.5rem; font-size:0.5625rem; font-weight:700; color:var(--bg); background:linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%); border-radius:50%} .app-preview__search{ padding:0.4rem 0.55rem; font-size:0.5rem; color:var(--text-muted); background:rgba(255, 255, 255, 0.06); border:1px solid var(--border); border-radius:8px} .app-preview__metrics{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.35rem} .app-preview__metric{ padding:0.4rem 0.35rem; text-align:center; background:rgba(255, 255, 255, 0.05); border:1px solid var(--border); border-radius:8px} .app-preview__metric strong{ display:block; font-size:0.6875rem; font-weight:700; color:var(--text)} .app-preview__metric span{ font-size:0.4375rem; color:var(--text-muted)} .app-preview__metric--accent{ background:rgba(94, 234, 212, 0.1); border-color:rgba(94, 234, 212, 0.25)} .app-preview__metric--accent strong{ color:var(--accent)} .app-preview__section-label{ margin:0.15rem 0 0; font-size:0.5rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em} .app-preview__list{ display:flex; flex:1; flex-direction:column; gap:0.35rem; margin:0; padding:0; list-style:none; min-height:0} .app-preview__list li{ display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.45rem; background:rgba(255, 255, 255, 0.04); border:1px solid var(--border); border-radius:8px} .app-preview__item-icon{ flex-shrink:0; width:1.125rem; height:1.125rem; border-radius:6px} .app-preview__item-icon--teal{background:rgba(94, 234, 212, 0.35)} .app-preview__item-icon--blue{background:rgba(59, 130, 246, 0.4)} .app-preview__item-icon--violet{background:rgba(139, 92, 246, 0.4)} .app-preview__item-icon--amber{background:rgba(251, 191, 36, 0.4)} .app-preview__item-text{ flex:1; min-width:0} .app-preview__item-text strong{ display:block; font-size:0.53125rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .app-preview__item-text span{ display:block; font-size:0.46875rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .app-preview__pill{ flex-shrink:0; padding:0.15rem 0.35rem; font-size:0.4375rem; font-weight:600; color:var(--bg); background:var(--accent); border-radius:999px} .app-preview__pill--muted{ color:var(--text-muted); background:rgba(255, 255, 255, 0.08)} .app-preview__tabbar{ display:flex; justify-content:space-around; margin-top:auto; padding:0.45rem 0.25rem 0.15rem; border-top:1px solid var(--border)} .app-preview__tab{ width:1.125rem; height:1.125rem; border-radius:6px; background:rgba(255, 255, 255, 0.08)} .app-preview__tab--active{ background:rgba(94, 234, 212, 0.35)} .app-preview-blur{ position:absolute; inset:0; z-index:1; border-radius:inherit; background:rgba(12, 18, 34, 0.2); backdrop-filter:blur(6px) saturate(1.15); -webkit-backdrop-filter:blur(6px) saturate(1.15)} .section{ padding:5rem 0} .section--alt{ background:var(--bg-alt)} .section-header{ text-align:center; max-width:640px; margin:0 auto 3.5rem} .section-header--left{ text-align:left; margin-left:0; margin-right:0} .section-header h2{ margin:0 0 1rem; font-family:var(--font-serif); font-size:clamp(1.75rem, 3.5vw, 2.5rem); font-weight:500; line-height:1.2} .section-lead{ margin:0; color:var(--text-muted); font-size:1.05rem} .services-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.25rem; margin:0; padding:0; list-style:none} .service-card{ padding:1.75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); transition:border-color 0.25s,transform 0.25s var(--ease)} .service-card:hover{ border-color:rgba(94, 234, 212, 0.35); transform:translateY(-4px)} .service-icon{ width:44px; height:44px; margin-bottom:1.25rem; color:var(--accent)} .service-icon svg{ width:100%; height:100%} .service-card h3{ margin:0 0 0.5rem; font-size:1.1rem} .service-card p{ margin:0; font-size:0.92rem; color:var(--text-muted)} .process-layout{ display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start} .process-steps{ margin:0; padding:0; list-style:none; counter-reset:step} .process-steps li{ display:grid; grid-template-columns:3rem 1fr; gap:1.25rem; padding:1.5rem 0; border-bottom:1px solid var(--border)} .process-steps li:last-child{ border-bottom:none} .step-num{ font-family:var(--font-serif); font-size:1.5rem; color:var(--accent); opacity:0.7} .process-steps h3{ margin:0 0 0.35rem; font-size:1.05rem} .process-steps p{ margin:0; font-size:0.92rem; color:var(--text-muted)} .about-layout{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:start} .about-content p{ color:var(--text-muted); margin:0 0 1rem} .tech-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:1.5rem 0 0; padding:0; list-style:none} .tech-tags li{ padding:0.35rem 0.85rem; font-size:0.85rem; font-weight:500; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; color:var(--text-muted)} .about-quote{ margin:0; padding:2rem; background:var(--bg-card); border-left:3px solid var(--accent); border-radius:0 var(--radius-lg) var(--radius-lg) 0} .about-quote p{ margin:0 0 1rem; font-family:var(--font-serif); font-size:1.25rem; font-style:italic; line-height:1.5} .about-quote footer{ font-size:0.85rem; color:var(--text-muted)} .cta-section{ padding-bottom:6rem} .cta-box{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:3rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 24px 48px rgba(0, 0, 0, 0.25)} .cta-content h2{ margin:0 0 1rem; font-family:var(--font-serif); font-size:2rem; font-weight:500} .cta-content p{ color:var(--text-muted); margin:0 0 1.5rem} .contact-form{ display:flex; flex-direction:column; gap:1rem} .contact-form label{ display:flex; flex-direction:column; gap:0.35rem} .contact-form label span{ font-size:0.85rem; font-weight:500; color:var(--text-muted)} .contact-form input, .contact-form textarea{ padding:0.7rem 0.9rem; font-family:inherit; font-size:0.95rem; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); transition:border-color 0.2s} .contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--accent)} .contact-form textarea{ resize:vertical; min-height:100px} .form-note{ margin:0; font-size:0.75rem; color:var(--text-muted)} .site-footer{ padding:2rem 0; border-top:1px solid var(--border); background:var(--bg-alt)} .footer-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2rem} .logo--footer .logo-mark{ width:28px; height:28px} .footer-copy{ margin:0; flex:1; font-size:0.85rem; color:var(--text-muted)} .footer-links{ display:flex; gap:1.5rem; margin:0; padding:0; list-style:none} .footer-links a{ font-size:0.85rem; color:var(--text-muted)} @media (max-width: 900px){ .process-layout, .about-layout, .cta-box{ grid-template-columns:1fr} .hero-stats{ grid-template-columns:1fr; gap:1rem}} @media (max-width: 768px){ .nav-toggle{ display:flex} .nav-menu{ position:fixed; top:var(--header-h); left:0; right:0; flex-direction:column; gap:0; padding:1rem; background:var(--bg-elevated); border-bottom:1px solid var(--border); transform:translateY(-120%); opacity:0; visibility:hidden; transition:transform 0.3s var(--ease),opacity 0.3s,visibility 0.3s} .nav-menu.is-open{ transform:translateY(0); opacity:1; visibility:visible} .nav-menu li{ width:100%} .nav-menu a{ display:block; padding:0.85rem 0; border-bottom:1px solid var(--border)} .nav-cta{ text-align:center; margin-top:0.5rem} .cta-box{ padding:1.75rem}} @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto} .service-card:hover{ transform:none}}