:root {
  --bg: #07111f;
  --bg-soft: #0c1b2e;
  --panel: #10233b;
  --text: #f5f8fc;
  --muted: #a9bbcf;
  --ink: #102033;
  --ink-soft: #586a7c;
  --light: #f5f8fb;
  --white: #ffffff;
  --accent: #2f8cff;
  --accent-2: #6eb8ff;
  --line: rgba(255,255,255,.1);
  --shadow: 0 30px 70px rgba(3, 14, 28, .18);
  --radius: 24px;
  --radius-sm: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.narrow { max-width: 860px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(7,17,31,.82); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; font-size: 1.08rem; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #60c4ff); color: white; font-size: .88rem; box-shadow: 0 8px 24px rgba(47,140,255,.3); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { color: #c5d3e1; padding: 10px 13px; border-radius: 10px; font-size: .95rem; }
.nav-links a:hover, .nav-links a.active { color: white; background: rgba(255,255,255,.06); }
.nav-links .nav-cta { background: var(--accent); color: white; margin-left: 8px; padding-inline: 18px; }
.nav-links .nav-cta:hover { background: #1779eb; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 25px; height: 2px; background: white; margin: 5px 0; border-radius: 2px; }

.hero { min-height: 760px; display: grid; align-items: center; position: relative; overflow: hidden; padding: 90px 0 100px; background-image: linear-gradient(90deg, rgba(7,17,31,.92), rgba(7,17,31,.75)), url("matrix_tile.png"); background-size: auto, 720px; }
.hero::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 72% 50%, rgba(47,140,255,.14), transparent 42%); pointer-events:none; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.eyebrow { display: inline-flex; font-size: .76rem; font-weight: 800; letter-spacing: .15em; color: var(--accent-2); margin-bottom: 18px; }
.eyebrow.dark { color: #2479d8; }
.hero h1, .page-hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -.055em; margin: 0 0 24px; max-width: 820px; }
.hero-text { font-size: 1.18rem; color: #bdcada; max-width: 670px; margin-bottom: 32px; }
.hero-actions { display:flex; gap:14px; flex-wrap: wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 750; border: 1px solid transparent; transition: .2s ease; cursor:pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: white; box-shadow: 0 12px 30px rgba(47,140,255,.24); }
.button-primary:hover { background: #1b7ee9; }
.button-secondary { border-color: rgba(255,255,255,.18); color: white; background: rgba(255,255,255,.05); }
.dark-outline { border-color: #cfdae6; color: var(--ink); background: transparent; box-shadow: none; }
.hero-points { display:flex; gap: 22px; flex-wrap:wrap; color:#8fa3b8; margin-top: 28px; font-size:.9rem; }
.hero-points span::before { content:"✓"; color:#53b6ff; margin-right:7px; font-weight:800; }
.hero-visual { position: relative; }
.glass-card { background: rgba(13,31,52,.86); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 12px; box-shadow: 0 36px 90px rgba(0,0,0,.36); backdrop-filter: blur(14px); }
.window-bar { display:flex; gap:7px; padding:7px 8px 12px; }.window-bar i { width:8px; height:8px; border-radius:50%; background:#5f7185; }.window-bar i:first-child{background:#ff665e}.window-bar i:nth-child(2){background:#ffc04c}.window-bar i:nth-child(3){background:#55c67a}
.code-card img { border-radius: 13px; }
.floating-card { position:absolute; right:-15px; bottom:-28px; max-width:260px; background:white; color:var(--ink); border-radius:18px; padding:18px 20px; font-weight:800; box-shadow:var(--shadow); }

.section { padding: 105px 0; }
.section-light { background: var(--light); color: var(--ink); }
.section-heading { max-width: 760px; margin-bottom: 46px; }
.section-heading h2, .process-copy h2, .about-copy h2, .contact-copy h2, .project-copy h2, .center-cta h2, .website-cta h2 { font-size: clamp(2.1rem, 4vw, 3.7rem); letter-spacing: -.045em; line-height:1.08; margin:0 0 18px; }
.section-heading p, .about-copy p, .contact-copy p, .project-copy p, .center-cta p { color: var(--ink-soft); font-size: 1.05rem; }
.service-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.service-card { background:white; border:1px solid #e3eaf1; border-radius:var(--radius); padding:30px; box-shadow:0 14px 40px rgba(14,37,63,.05); }
.service-card h3 { font-size:1.28rem; margin:20px 0 9px; }.service-card p { color:var(--ink-soft); margin:0; }
.icon-chip { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#eaf4ff; color:#2479d8; font-weight:900; font-size:.82rem; }

.process-section { background: linear-gradient(135deg,#07111f,#0a1d33); }
.process-grid, .about-grid, .contact-grid, .project-detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:70px; align-items:center; }
.process-image { background:#f7fbff; padding:18px; border-radius:26px; box-shadow:0 28px 70px rgba(0,0,0,.18); }.process-image img{border-radius:18px}.process-copy p{color:#aebfd1}
.step-list { display:grid; gap:24px; margin-top:34px; }.step { display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; }.step>span { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#153f6c;color:#7bc5ff;font-weight:900}.step h3{margin:0 0 5px;font-size:1.05rem}.step p{margin:0;font-size:.96rem}

.split-heading { max-width:none; display:flex; align-items:end; justify-content:space-between; gap:30px; }.split-heading>div{max-width:690px}.text-link{color:#2479d8;font-weight:800;white-space:nowrap}.project-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.project-preview{background:white;border:1px solid #e1e8ef;border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(14,37,63,.07);transition:.2s}.project-preview:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(14,37,63,.12)}.project-preview img{width:100%;height:330px;object-fit:contain;background:#eef3f8;padding:18px}.project-preview-copy{padding:24px}.project-preview-copy span,.project-tag,.example-info>span{font-size:.72rem;letter-spacing:.13em;font-weight:900;color:#2479d8}.project-preview-copy h3{font-size:1.45rem;margin:7px 0 2px}.project-preview-copy p{color:#728195;margin:0}

.website-cta { background: linear-gradient(120deg,#0c2b4c,#0a6ecf); }.website-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}.website-cta-inner>div{max-width:760px}.website-cta p{color:#cce4fb;max-width:680px}.light-button{background:white;color:#0c4f8f;box-shadow:none;white-space:nowrap}.light-button:hover{background:#eef7ff}

.contact-grid{align-items:start}.contact-note{margin-top:28px;padding:18px 20px;border-radius:14px;background:#eaf4ff;color:#265b8d;font-weight:700}.contact-form{background:white;border:1px solid #dfe7ef;border-radius:24px;padding:28px;box-shadow:0 20px 50px rgba(14,37,63,.08);display:grid;gap:18px}.contact-form label{display:grid;gap:7px;font-weight:700;font-size:.9rem}.contact-form input,.contact-form textarea{width:100%;border:1px solid #cfd9e3;background:#f9fbfd;border-radius:12px;padding:13px 14px;color:var(--ink);outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:#5aa9ff;box-shadow:0 0 0 3px rgba(47,140,255,.12)}

.page-hero { padding: 115px 0 100px; background: radial-gradient(circle at 75% 20%,rgba(47,140,255,.2),transparent 35%), linear-gradient(135deg,#07111f,#0b2036); }.page-hero p{color:#b4c3d3;font-size:1.12rem;max-width:760px}.page-hero h1{font-size:clamp(2.8rem,5.5vw,5rem)}
.about-media{position:relative}.main-about-image{border-radius:26px;background:#edf5fc;padding:10px;box-shadow:var(--shadow)}.small-image-card{position:absolute;width:52%;right:-5%;bottom:-10%;background:#0d1f33;border:1px solid rgba(255,255,255,.13);padding:10px;border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.25)}.small-image-card img{border-radius:11px}.about-copy p{font-size:1.08rem}.values-section{background:#081625}.dark-card{background:#0e2137;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:28px}.dark-card h3{font-size:1.35rem;margin:0 0 8px}.dark-card p{margin:0;color:#aebfd1}

.project-detail{scroll-margin-top:76px}.project-detail-grid.reverse .project-copy{order:2}.project-detail-grid.reverse .project-gallery{order:1}.client-name{font-weight:800;color:#2479d8!important;margin-top:-10px}.feature-list{padding:0;margin:28px 0 0;list-style:none;display:grid;gap:10px}.feature-list li{color:var(--ink-soft)}.feature-list li::before{content:"✓";color:#2489ec;font-weight:900;margin-right:9px}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.project-gallery img{background:white;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.14);width:100%;object-fit:contain}.dark-detail{background:#081625}.dark-detail .project-copy p,.dark-detail .feature-list li{color:#b5c4d4}.dark-detail .project-tag,.dark-detail .client-name{color:#6fbcff!important}.app-gallery img:first-child{grid-column:1 / -1}.center-cta{text-align:center;max-width:820px;margin:0 auto}.center-cta .button{margin-top:15px}

.examples-grid{display:grid;gap:34px}.example-card{background:white;border:1px solid #dfe7ef;border-radius:26px;overflow:hidden;box-shadow:0 18px 55px rgba(14,37,63,.07);display:grid;grid-template-columns:1.15fr .85fr}.example-browser{padding:18px;min-height:360px}.browser-top{display:flex;gap:6px;margin-bottom:14px}.browser-top i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.7)}.mock-nav{display:flex;justify-content:space-between;gap:20px;font-size:.78rem;align-items:center;padding:4px 4px 20px}.mock-hero{display:flex;flex-direction:column;justify-content:center;min-height:255px;padding:38px;border-radius:17px}.mock-hero span{font-size:.67rem;font-weight:900;letter-spacing:.15em}.mock-hero h3{font-size:2.1rem;line-height:1.02;letter-spacing:-.04em;max-width:380px;margin:10px 0 20px}.mock-hero button{align-self:flex-start;border:0;padding:10px 15px;border-radius:8px;font-weight:800}.restaurant-theme{background:#382b26;color:#fff}.restaurant-theme .mock-hero{background:linear-gradient(120deg,#2f251f,#76523b)}.restaurant-theme .mock-hero button{background:#f3d9b7;color:#4d3322}.contractor-theme{background:#172430;color:#fff}.contractor-theme .mock-hero{background:linear-gradient(120deg,#183447,#2e6077)}.contractor-theme .mock-hero button{background:#f2ad3c;color:#172430}.professional-theme{background:#f0f4f8;color:#19344f}.professional-theme .browser-top i{background:#8fa2b6}.professional-theme .mock-hero{background:white;border:1px solid #dbe4ed}.professional-theme .mock-hero button{background:#193d64;color:white}.example-info{padding:38px;display:flex;flex-direction:column;justify-content:center}.example-info h2{font-size:1.8rem;letter-spacing:-.03em;margin:7px 0 10px}.example-info p{color:var(--ink-soft);margin-bottom:22px}.example-info .button{align-self:flex-start}.example-instructions{margin-top:50px;background:#eaf4ff;border:1px solid #cfe6fb;border-radius:20px;padding:26px}.example-instructions h2{margin-top:0}.example-instructions pre{overflow:auto;background:#0c1a2b;color:#d9e8f6;padding:16px;border-radius:12px}.example-instructions code{font-family:"SFMono-Regular",Consolas,monospace}

.site-footer{background:#050d17;border-top:1px solid rgba(255,255,255,.07);padding:62px 0 20px}.footer-grid{display:flex;justify-content:space-between;gap:40px}.footer-brand{margin-bottom:14px}.footer-grid p{color:#869aae;max-width:430px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;align-content:start;color:#b3c2d1}.footer-links a:hover{color:white}.footer-bottom{border-top:1px solid rgba(255,255,255,.07);margin-top:42px;padding-top:18px;color:#6f849a;font-size:.85rem}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease, transform .65s ease}.reveal.visible{opacity:1;transform:none}

@media (max-width: 900px){
  .menu-toggle{display:block}.nav-links{display:none;position:absolute;top:76px;left:20px;right:20px;background:#0b1a2d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px;flex-direction:column;align-items:stretch;box-shadow:0 18px 40px rgba(0,0,0,.28)}.nav-links.open{display:flex}.nav-links a{padding:12px 14px}.nav-links .nav-cta{margin-left:0;text-align:center}
  .hero{min-height:auto;padding:82px 0}.hero-grid,.process-grid,.about-grid,.contact-grid,.project-detail-grid{grid-template-columns:1fr;gap:44px}.hero-visual{max-width:650px}.service-grid{grid-template-columns:1fr}.project-preview-grid{grid-template-columns:1fr}.website-cta-inner{align-items:flex-start;flex-direction:column}.project-detail-grid.reverse .project-copy,.project-detail-grid.reverse .project-gallery{order:initial}.example-card{grid-template-columns:1fr}.small-image-card{position:relative;width:68%;right:auto;bottom:auto;margin:-45px 0 0 auto}.split-heading{align-items:flex-start;flex-direction:column}.project-preview img{height:300px}
}
@media (max-width: 620px){
  .container{width:min(100% - 28px,1180px)}.section{padding:76px 0}.hero h1,.page-hero h1{font-size:clamp(2.6rem,13vw,4rem)}.hero-actions .button{width:100%}.hero-points{flex-direction:column;gap:7px}.project-gallery{grid-template-columns:1fr}.app-gallery img:first-child{grid-column:auto}.project-preview img{height:240px}.floating-card{position:relative;right:auto;bottom:auto;margin:-12px 14px 0}.footer-grid{flex-direction:column}.example-browser{min-height:310px;padding:12px}.mock-hero{padding:26px;min-height:220px}.mock-hero h3{font-size:1.7rem}.example-info{padding:26px}.small-image-card{width:85%}
}