/* MaximiseTeck — Shopify subdomain Type: Bricolage Grotesque (display) + Geist (body) + JetBrains Mono (mono) */ :root { --forest: #0E3A2A; --forest-deep: #061d15; --lime: #A3F050; --lime-soft: #E8FBC9; --cream: #FAF8F2; --cream-2: #F2EFE4; --ink: #0F1410; --mute: #5C6760; --line: #1f1f1f1a; --card: #ffffff; --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --shadow-sm: 0 1px 0 rgba(15, 20, 16, 0.04), 0 4px 14px rgba(15, 20, 16, 0.05); --shadow-md: 0 2px 0 rgba(15, 20, 16, 0.05), 0 12px 32px rgba(15, 20, 16, 0.08); --shadow-lg: 0 6px 0 var(--forest-deep), 0 18px 40px rgba(15, 20, 16, 0.18); } /* palette themes (toggled via .palette-* on ) */ body.palette-forest { --forest: #0E3A2A; --forest-deep: #061d15; --lime: #A3F050; --lime-soft: #E8FBC9; --cream: #FAF8F2; --cream-2: #F2EFE4; } body.palette-mono { --forest: #0F1410; --forest-deep: #000000; --lime: #C8FF3D; --lime-soft: #ECFFC0; --cream: #F4F2EC; --cream-2: #E8E5DB; } body.palette-cobalt { --forest: #122855; --forest-deep: #06122E; --lime: #FF7A45; --lime-soft: #FFE4D6; --cream: #F6F4EE; --cream-2: #E9E5D9; } body.palette-plum { --forest: #3B1740; --forest-deep: #1B0820; --lime: #FFD23F; --lime-soft: #FFF1B8; --cream: #FBF6F1; --cream-2: #EFE7DE; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cream); color: var(--ink); font-family: "Geist", "Inter Tight", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .display { font-family: "Bricolage Grotesque", "Geist", sans-serif; font-weight: 700; letter-spacing: -0.035em; line-height: 0.92; font-variation-settings: "wdth" 100; text-wrap: balance; } .display.tight { letter-spacing: -0.045em; } .display.condensed { font-variation-settings: "wdth" 75; } .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; } .container { max-width: 1320px; margin: 0 auto; padding: 0 28px; } /* === Buttons === */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; } .btn-primary { background: var(--forest); color: var(--cream); box-shadow: 0 4px 0 var(--forest-deep); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--forest-deep); } .btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--forest-deep); } .btn-lime { background: var(--lime); color: var(--forest-deep); box-shadow: 0 4px 0 #6FB22A; } .btn-lime:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #6FB22A; } .btn-ghost { background: transparent; color: var(--forest); border-color: var(--forest); } .btn-ghost:hover { background: var(--forest); color: var(--cream); } .btn-arrow svg { transition: transform .2s ease; } .btn-arrow:hover svg { transform: translateX(3px); } /* === Badge / Pill === */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--lime-soft); color: var(--forest); font-weight: 500; font-size: 13px; border: 1px solid color-mix(in srgb, var(--forest) 14%, transparent); } .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); display: inline-block; } /* === Nav === */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 6px; } .nav-link { padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink); transition: background .15s; } .nav-link:hover { background: var(--cream-2); } .nav-link .caret { display: inline-flex; margin-left: 6px; opacity: .5; transition: transform .2s ease; } button.nav-link { background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; } .nav-dd-trigger.is-open .caret { transform: rotate(180deg); opacity: 1; } /* Dropdown */ .nav-dd-wrap { position: relative; } .nav-dd { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 20, 16, 0.12), 0 2px 6px rgba(15, 20, 16, 0.06); padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 60; } .nav-dd::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dd.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease; } .nav-dd.wide { width: 440px; } .nav-dd ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .nav-dd a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; padding: 12px 14px; border-radius: 12px; transition: background .15s ease; align-items: center; } .nav-dd a:hover { background: var(--cream-2); } .nav-dd .dd-t { font-weight: 600; font-size: 14.5px; color: var(--ink); letter-spacing: -0.005em; grid-column: 1; grid-row: 1; } .nav-dd .dd-d { font-size: 12.5px; color: var(--mute); line-height: 1.4; margin-top: 2px; grid-column: 1; grid-row: 2; } .nav-dd .dd-arrow { grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; color: var(--forest); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s, background .15s; } .nav-dd a:hover .dd-arrow { opacity: 1; transform: translateX(0); background: var(--lime); } /* === Hero === */ .hero { padding: 56px 0 80px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; } .hero-eyebrow { margin-bottom: 24px; } .hero h1 { font-size: clamp(48px, 7.2vw, 104px); margin: 0 0 28px; } .hero h1 .accent { color: var(--forest); position: relative; display: inline-block; } .hero h1 .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8%; height: 38%; background: var(--lime); z-index: -1; border-radius: 6px; transform: rotate(-0.6deg); } .hero p.lead { font-size: 20px; color: var(--mute); max-width: 540px; margin: 0 0 36px; line-height: 1.45; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; padding: 4px; } .stat { padding: 22px 18px; background: var(--cream); border-radius: 12px; } .stat .num { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--forest); } .stat .num .unit { color: var(--ink); } .stat .label { margin-top: 8px; font-size: 13px; color: var(--mute); line-height: 1.3; } /* hero card / form */ .hero-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-md); position: relative; } .hero-card::before { content: ""; position: absolute; top: -14px; left: -14px; width: 76px; height: 76px; background: var(--lime); border-radius: 18px 18px 4px 18px; z-index: -1; } .hero-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 26px; margin: 0 0 6px; letter-spacing: -0.02em; } .hero-card .sub { color: var(--mute); font-size: 14px; margin: 0 0 22px; } .tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cream); border-radius: 12px; padding: 4px; margin-bottom: 22px; } .tabs button { border: 0; background: transparent; padding: 10px 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--mute); display: flex; align-items: center; justify-content: center; gap: 6px; } .tabs button.active { background: var(--card); color: var(--forest); box-shadow: 0 1px 4px rgba(0,0,0,.06); } .tabs button .step { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--cream-2); color: var(--mute); } .tabs button.active .step { background: var(--forest); color: var(--lime); } .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink); } .field label .req { color: #C2410C; } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--cream); font-family: inherit; font-size: 14px; color: var(--ink); transition: border .15s, background .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); background: var(--card); } .phone-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; } .hero-card .submit { width: 100%; justify-content: center; margin-top: 8px; } /* alt hero variant - centered */ .hero.variant-centered .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero.variant-centered .hero-card { display: none; } .hero.variant-centered .hero-eyebrow { margin-inline: auto; } .hero.variant-centered p.lead { margin-inline: auto; } .hero.variant-centered .hero-ctas { justify-content: center; } .hero.variant-centered .stats { max-width: 920px; margin-inline: auto; } .hero.variant-centered .hero-mock { display: block; } /* alt hero variant - split */ .hero.variant-split .hero-card { display: none; } .hero.variant-split .hero-mock { display: block; } .hero.variant-split .hero-grid { grid-template-columns: 1.1fr 0.9fr; } .hero-mock { display: none; background: var(--forest); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-md); color: var(--cream); position: relative; overflow: hidden; aspect-ratio: 4/4.5; } .hero-mock::after { content: ""; position: absolute; inset: 28px; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px), linear-gradient(180deg, transparent 60%, rgba(163, 240, 80, 0.18)); border-radius: 16px; border: 1px dashed rgba(255,255,255,.18); pointer-events: none; } .hero-mock .tag { position: relative; z-index: 1; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); } .hero-mock .label { position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 2; font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; } .hero.variant-centered .hero-mock, .hero.variant-split .hero-mock { aspect-ratio: auto; height: 360px; margin-top: 56px; } .hero.variant-centered .hero-mock { max-width: 1100px; margin: 56px auto 0; } /* === Marquee === */ .marquee-section { background: var(--forest); color: var(--cream); padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .marquee { display: flex; gap: 56px; align-items: center; animation: scroll 38s linear infinite; width: max-content; } .marquee-item { display: flex; align-items: center; gap: 14px; font-family: "Bricolage Grotesque", sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--cream); white-space: nowrap; } .marquee-item .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* === Section base === */ section.block { padding: 120px 0; } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 64px; align-items: end; } .section-head h2 { font-size: clamp(40px, 5.4vw, 76px); margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; } .section-head h2 em { font-style: normal; position: relative; display: inline-block; color: var(--forest); } .section-head h2 em::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 6%; height: 38%; background: var(--lime); z-index: -1; border-radius: 6px; transform: rotate(-0.6deg); } .section-head p { color: var(--mute); font-size: 18px; margin: 0; max-width: 480px; } .section-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .section-eyebrow .num { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--mute); letter-spacing: 0.1em; } .section-eyebrow .line { height: 1px; flex: 0 0 56px; background: color-mix(in srgb, var(--forest) 30%, transparent); } /* === Services Grid === */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .services-grid-6 .svc { min-height: 280px; } .svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 16px; min-height: 260px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; position: relative; overflow: hidden; } .svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .svc.featured { background: var(--forest); color: var(--cream); grid-row: span 2; grid-column: span 1; } .svc.featured h3 { color: var(--cream); } .svc.featured .ico { background: var(--lime); color: var(--forest); } .svc.wide { grid-column: span 2; } .svc.lime { background: var(--lime); } .svc.lime .ico { background: var(--forest); color: var(--lime); } .svc .ico { width: 52px; height: 52px; background: var(--cream); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--forest); } .svc h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; letter-spacing: -0.02em; margin: 0; line-height: 1.1; } .svc p { margin: 0; font-size: 14.5px; color: var(--mute); line-height: 1.5; } .svc.featured p { color: color-mix(in srgb, var(--cream) 80%, transparent); } .svc.lime p { color: color-mix(in srgb, var(--forest) 80%, transparent); } .svc .meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .7; } /* === Case studies === */ .cases { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .case { background: var(--card); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; position: relative; transition: transform .2s; } .case:hover { transform: translateY(-3px); } .case .thumb { aspect-ratio: 16/11; background: var(--cream-2); position: relative; overflow: hidden; } .case .thumb::after { content: attr(data-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute); } .case .thumb.green { background: var(--forest); } .case .thumb.green::after { color: var(--lime); } .case .thumb.lime { background: var(--lime); } .case .thumb.lime::after { color: var(--forest); } .case .body { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .case .body h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; letter-spacing: -0.02em; margin: 0; } .case .body .tags { display: flex; gap: 6px; flex-wrap: wrap; } .case .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--cream); color: var(--mute); } .case .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .case .kpi .v { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; font-weight: 700; color: var(--forest); letter-spacing: -0.02em; line-height: 1; } .case .kpi .l { font-size: 11px; color: var(--mute); margin-top: 4px; line-height: 1.2; } .case.col-7 { grid-column: span 7; } .case.col-5 { grid-column: span 5; } .case.col-6 { grid-column: span 6; } .case.col-12 { grid-column: span 12; } /* === Process === */ .process-section { background: var(--forest); color: var(--cream); border-radius: var(--r-xl); padding: 80px 0; margin: 0 28px; } .process-section .container { padding: 0 64px; } .process-section h2, .process-section .section-head h2 em { color: var(--cream); } .process-section .section-head h2 em::after { background: var(--lime); } .process-section .section-head p { color: color-mix(in srgb, var(--cream) 70%, transparent); } .process-section .section-eyebrow .num, .process-section .section-eyebrow .line { color: var(--lime); background: color-mix(in srgb, var(--lime) 40%, transparent); } .process-section .section-eyebrow .line { background: color-mix(in srgb, var(--lime) 40%, transparent); } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; } .step-card { background: color-mix(in srgb, var(--cream) 6%, transparent); border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius: var(--r-md); padding: 26px; display: flex; flex-direction: column; gap: 14px; min-height: 240px; } .step-card .n { font-family: "Bricolage Grotesque", sans-serif; font-size: 60px; font-weight: 700; color: var(--lime); line-height: 0.8; letter-spacing: -0.05em; } .step-card h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; margin: 0; letter-spacing: -0.02em; } .step-card p { font-size: 14px; color: color-mix(in srgb, var(--cream) 75%, transparent); margin: 0; } /* === Tech stack === */ .stack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .stack-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; aspect-ratio: 1; justify-content: space-between; transition: transform .15s, background .15s; } .stack-item:hover { transform: translateY(-2px); background: var(--cream-2); } .stack-item .ico { width: 36px; height: 36px; border-radius: 8px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; color: var(--forest); } .stack-item .name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .stack-item .cat { font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute); } /* === Pricing === */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; display: flex; flex-direction: column; gap: 20px; position: relative; } .plan.featured { background: var(--forest); color: var(--cream); border-color: var(--forest); } .plan.featured h3 { color: var(--cream); } .plan .tag { position: absolute; top: 24px; right: 24px; background: var(--lime); color: var(--forest); padding: 4px 10px; border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .plan h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; margin: 0; letter-spacing: -0.02em; } .plan .price { font-family: "Bricolage Grotesque", sans-serif; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; } .plan .price small { font-size: 16px; font-weight: 500; opacity: .6; letter-spacing: 0; } .plan p.desc { margin: 0; font-size: 14px; color: var(--mute); line-height: 1.5; } .plan.featured p.desc { color: color-mix(in srgb, var(--cream) 75%, transparent); } .plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .plan li svg { flex: 0 0 18px; margin-top: 3px; color: var(--forest); } .plan.featured li svg { color: var(--lime); } .plan .btn { justify-content: center; width: 100%; } /* === Testimonials === */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .testimonial { background: var(--card); border-radius: var(--r-lg); padding: 32px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; position: relative; } .testimonial.lime { background: var(--lime); } .testimonial.forest { background: var(--forest); color: var(--cream); } .testimonial .quote-mark { font-family: "Bricolage Grotesque", sans-serif; font-size: 64px; line-height: 0.7; color: var(--forest); height: 32px; } .testimonial.forest .quote-mark { color: var(--lime); } .testimonial blockquote { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: 20px; letter-spacing: -0.015em; line-height: 1.35; flex: 1; } .testimonial .who { display: flex; align-items: center; gap: 12px; } .testimonial .av { width: 42px; height: 42px; border-radius: 50%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; color: var(--forest); } .testimonial.forest .av { background: var(--lime); } .testimonial .name { font-weight: 600; font-size: 14px; } .testimonial .role { font-size: 12.5px; opacity: .7; } /* === CTA === */ .cta-block { background: var(--lime); border-radius: var(--r-xl); padding: 80px 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; } .cta-block h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(40px, 5.8vw, 80px); letter-spacing: -0.04em; line-height: 0.95; margin: 0; color: var(--forest); } .cta-block p { margin: 0 0 28px; font-size: 18px; color: color-mix(in srgb, var(--forest) 80%, transparent); } .cta-block .stack-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } /* === Footer === */ footer { background: var(--forest-deep); color: var(--cream); padding: 96px 0 40px; } footer .grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; margin-bottom: 64px; } footer h4 { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lime); margin: 0 0 22px; font-weight: 600; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } footer a { font-size: 14.5px; opacity: .85; transition: opacity .15s; } footer a:hover { opacity: 1; color: var(--lime); } footer .brand img { height: 36px; filter: brightness(0) invert(1); margin-bottom: 20px; } footer .brand p { font-size: 14px; color: color-mix(in srgb, var(--cream) 70%, transparent); max-width: 360px; margin: 0; } footer .meta { border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; color: color-mix(in srgb, var(--cream) 60%, transparent); } footer .sub-domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; padding: 32px; background: color-mix(in srgb, var(--cream) 5%, transparent); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent); } .sub-domain { display: flex; flex-direction: column; gap: 4px; } .sub-domain .url { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--lime); letter-spacing: 0.04em; } .sub-domain .title { font-weight: 600; font-size: 15px; } /* === Mobile Nav (hamburger + slide-down panel) === */ .nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: transparent; border: 1.5px solid var(--forest); align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-left: 4px; transition: background .15s ease, transform .2s ease; } .nav-burger:hover { background: var(--cream-2); } .nav-burger .b-lines { display: flex; flex-direction: column; gap: 4px; width: 18px; } .nav-burger .b-lines span { display: block; height: 2px; background: var(--forest); border-radius: 2px; transform-origin: center; transition: transform .25s ease, opacity .2s ease; } .nav-burger.is-open .b-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-burger.is-open .b-lines span:nth-child(2) { opacity: 0; } .nav-burger.is-open .b-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-mobile { display: none; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--cream); z-index: 49; overflow-y: auto; padding: 8px 0 32px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; } .nav-mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-mobile .container { padding: 8px 24px 24px; } .nav-mobile-section { border-bottom: 1px solid var(--line); } .nav-mobile-section:last-of-type { border-bottom: 0; } .nav-mobile-trigger, .nav-mobile-link { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; background: transparent; border: 0; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; letter-spacing: -0.01em; } .nav-mobile-trigger .chev { transition: transform .25s ease; color: var(--mute); } .nav-mobile-trigger.is-open .chev { transform: rotate(180deg); color: var(--forest); } .nav-mobile-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .nav-mobile-panel.is-open { max-height: 800px; } .nav-mobile-panel ul { list-style: none; margin: 0; padding: 0 0 16px; display: flex; flex-direction: column; gap: 2px; } .nav-mobile-panel a { display: block; padding: 12px 14px; border-radius: 10px; background: var(--cream-2); text-decoration: none; } .nav-mobile-panel a:active { background: var(--lime-soft); } .nav-mobile-panel .dd-t { display: block; font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; } .nav-mobile-panel .dd-d { display: block; font-size: 12.5px; color: var(--mute); line-height: 1.4; margin-top: 2px; } .nav-mobile-cta { display: flex; margin-top: 20px; padding: 0 4px; } .nav-mobile-cta .btn { flex: 1; justify-content: center; } body.nav-locked { overflow: hidden; } /* === Responsive === */ @media (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; } .hero-card { display: none; } .hero .hero-mock { display: block; height: 320px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .svc.featured { grid-row: auto; } .stack { grid-template-columns: repeat(4, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .pricing, .testimonials { grid-template-columns: 1fr; } .case.col-7, .case.col-5, .case.col-6 { grid-column: span 12; } .section-head { grid-template-columns: 1fr; gap: 18px; } .cta-block { grid-template-columns: 1fr; padding: 56px 32px; } footer .grid { grid-template-columns: 1fr 1fr; } footer .sub-domains { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .nav-burger { display: inline-flex; } .nav-mobile { display: block; } .nav-inner .btn-primary { display: none; } } @media (max-width: 680px) { section.block { padding: 72px 0; } .stats { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: 1fr; } .stack { grid-template-columns: repeat(2, 1fr) !important; } .steps { grid-template-columns: 1fr; } .process-section { margin: 0 12px; padding: 48px 0; } .process-section .container { padding: 0 24px; } footer .grid { grid-template-columns: 1fr; } footer .sub-domains { grid-template-columns: 1fr; } }