@charset "utf-8";

:root { --pink: #EC4899; --orange: #F97316; --yellow: #FBBF24; --teal: #2DD4E8; --purple: #6C5CE7; --pink-t: rgba(236,73,153,0.14); --orange-t: rgba(249,115,22,0.14); --yellow-t: rgba(251,191,36,0.18); --teal-t: rgba(45,212,232,0.16); --purple-t: rgba(108,92,231,0.14); --ink: #15121C; --ink-soft: #4A4553; --paper: #FAFAF8; --paper-warm: #F1EEE8; --line: #E7E2D9; --radius: 14px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0px; background: var(--paper); color: var(--ink); font-family: Inter, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; margin: 0px; letter-spacing: -0.02em; line-height: 1.05; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0px auto; padding: 0px 28px; }

.grad-text { background: linear-gradient(90deg, var(--pink), var(--orange) 30%, var(--yellow) 55%, var(--teal) 80%, var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.grad-text-duo { background: linear-gradient(90deg, var(--pink), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.tri { width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--pink); flex: 0 0 auto; }

.btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; padding: 15px 26px; border-radius: 999px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: linear-gradient(100deg,var(--pink), var(--orange) 55%, var(--yellow)); color: var(--ink); box-shadow: rgba(236, 73, 153, 0.55) 0px 8px 24px -8px; }

.btn-ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }

.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

header { position: sticky; top: 0px; z-index: 50; background: rgba(250, 250, 248, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }

.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; max-width: 1180px; margin: 0px auto; }

.logo { display: flex; align-items: center; }

.logo img { height: 36px; width: auto; }

nav ul { display: flex; gap: 34px; list-style: none; margin: 0px; padding: 0px; }

nav a { font-weight: 500; font-size: 15px; color: var(--ink-soft); }

nav a:hover { color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-cta { display: flex; }

.mobile-toggle { display: none; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 24px; cursor: pointer; line-height: 1; color: var(--ink); }

.hero { position: relative; overflow: hidden; padding: 96px 0px 70px; }

.hero-bg-shape { position: absolute; top: -180px; right: -260px; width: 820px; height: 820px; opacity: 0.1; pointer-events: none; }

.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.85fr; gap: 60px; align-items: center; }

.hero h1 { font-size: clamp(38px, 5vw, 58px); font-weight: 700; margin-bottom: 22px; }

.hero p.lede { font-size: 19px; color: var(--ink-soft); max-width: 540px; margin-bottom: 32px; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }

.trust-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.trust-strip .avatars { display: flex; }

.trust-strip .avatars span { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--paper); margin-left: -10px; display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px; color: rgb(255, 255, 255); }

.trust-strip .avatars span:first-child { margin-left: 0px; }

.trust-strip small { color: var(--ink-soft); font-size: 14px; }

.hero-visual { position: relative; background: var(--ink); border-radius: 24px; padding: 8px; box-shadow: rgba(21, 18, 28, 0.45) 0px 30px 60px -25px; }

.hero-visual .browser-bar { display: flex; gap: 6px; padding: 12px 14px; }

.hero-visual .browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(74, 69, 83); display: block; }

.hero-visual .screen { background: var(--paper); border-radius: 0px 0px 16px 16px; padding: 26px 22px 30px; min-height: 300px; }

.mock-hero-title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 8px; }

.mock-bar { height: 10px; border-radius: 6px; background: var(--line); margin-bottom: 8px; }

.mock-bar.w60 { width: 60%; }

.mock-bar.w80 { width: 80%; }

.mock-bar.w40 { width: 40%; }

.mock-btn { margin-top: 16px; display: inline-block; padding: 10px 20px; border-radius: 999px; background: linear-gradient(100deg,var(--pink),var(--orange)); color: rgb(255, 255, 255); font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; }

.mock-chat { margin-top: 20px; background: rgb(233, 251, 239); border: 1px solid rgb(205, 239, 216); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: rgb(31, 107, 58); display: flex; gap: 8px; align-items: flex-start; }

.mock-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 22px; }

.mock-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 10px; height: 64px; }

section { padding: 88px 0px; }

.section-warm { background: var(--paper-warm); }

.section-head { max-width: 640px; margin-bottom: 52px; }

.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin-top: 14px; }

.section-head p { color: var(--ink-soft); font-size: 17px; margin-top: 16px; }

.feature-row { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; padding: 56px 0px; border-bottom: 1px solid var(--line); }

.feature-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.feature-row.reverse .f-visual { order: 2; }

.feature-row.reverse .f-text { order: 1; }

.f-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--line); font-size: 15px; }

.f-text h3 { font-size: 26px; font-weight: 700; margin: 10px 0px 14px; }

.f-text > p.f-lead { color: var(--ink-soft); font-size: 17px; margin-bottom: 22px; }

.f-list { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 16px; }

.f-list li { display: flex; gap: 12px; align-items: flex-start; }

.f-list li .tri { margin-top: 7px; }

.f-list li b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 15.5px; font-weight: 600; }

.f-list li span { color: var(--ink-soft); font-size: 15px; }

.f-visual { background: linear-gradient(160deg,#fff,var(--paper-warm)); border: 1px solid var(--line); border-radius: 20px; padding: 34px; min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.f-visual .glyph { font-size: 110px; line-height: 1; filter: saturate(1.1); }

.service-tier-label { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px; color: var(--ink-soft); margin: 40px 0px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.service-tier-label:first-of-type { margin-top: 0px; }

.service-tier-label .badge { background: var(--ink); color: rgb(255, 255, 255); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }

.service-tier-label.full .badge { background: linear-gradient(100deg,var(--pink),var(--orange)); color: var(--ink); }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.service-grid.two-col { grid-template-columns: repeat(2, 1fr); }

.service-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; display: flex; gap: 14px; align-items: flex-start; }

.service-card .s-icon { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgb(255, 255, 255); }

.service-card h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }

.service-card p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 0px; }

.trade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.trade-card { border: 1px solid var(--line); border-radius: 14px; background: rgb(255, 255, 255); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; }

.trade-card:hover { transform: translateY(-4px); box-shadow: rgba(21, 18, 28, 0.25) 0px 16px 30px -18px; }

.trade-q { width: 100%; text-align: left; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.trade-label { display: flex; align-items: center; gap: 14px; min-width: 0px; flex: 1 1 0%; }

.trade-label b { font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; }

.trade-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; color: rgb(255, 255, 255); box-shadow: rgba(21, 18, 28, 0.35) 0px 6px 14px -6px; }

.ic-1 { background: linear-gradient(135deg,var(--pink),var(--orange)); }

.ic-2 { background: linear-gradient(135deg,var(--orange),var(--yellow)); }

.ic-3 { background: linear-gradient(135deg,var(--yellow),var(--teal)); }

.ic-4 { background: linear-gradient(135deg,var(--teal),var(--purple)); }

.ic-5 { background: linear-gradient(135deg,var(--purple),var(--pink)); }

.ic-6 { background: linear-gradient(135deg,var(--pink),var(--yellow)); }

.ic-7 { background: linear-gradient(135deg,var(--orange),var(--teal)); }

.ic-8 { background: linear-gradient(135deg,var(--yellow),var(--purple)); }

.ic-9 { background: linear-gradient(135deg,var(--teal),var(--pink)); }

.ic-10 { background: linear-gradient(135deg,var(--purple),var(--orange)); }

.ic-11 { background: linear-gradient(135deg,var(--pink),var(--teal)); }

.ic-12 { background: linear-gradient(135deg,var(--orange),var(--purple)); }

.ic-13 { background: linear-gradient(135deg,var(--yellow),var(--pink)); }

.ic-14 { background: linear-gradient(135deg,var(--teal),var(--orange)); }

.trade-q .plus { font-size: 20px; color: var(--ink-soft); transition: transform 0.2s; flex: 0 0 auto; line-height: 1; }

.trade-card.open .trade-q .plus { transform: rotate(45deg); color: var(--pink); }

.trade-a { max-height: 0px; overflow: hidden; transition: max-height 0.25s; }

.trade-a-inner { padding: 16px 18px 20px; margin: 0px 12px 12px; border-radius: 12px; }

.trade-a-inner p { color: rgb(58, 53, 66); font-size: 14px; margin: 0px; line-height: 1.55; }

.bg-1 { background: linear-gradient(135deg,var(--pink-t),var(--orange-t)); }

.bg-2 { background: linear-gradient(135deg,var(--orange-t),var(--yellow-t)); }

.bg-3 { background: linear-gradient(135deg,var(--yellow-t),var(--teal-t)); }

.bg-4 { background: linear-gradient(135deg,var(--teal-t),var(--purple-t)); }

.bg-5 { background: linear-gradient(135deg,var(--purple-t),var(--pink-t)); }

.bg-6 { background: linear-gradient(135deg,var(--pink-t),var(--yellow-t)); }

.bg-7 { background: linear-gradient(135deg,var(--orange-t),var(--teal-t)); }

.bg-8 { background: linear-gradient(135deg,var(--yellow-t),var(--purple-t)); }

.bg-9 { background: linear-gradient(135deg,var(--teal-t),var(--pink-t)); }

.bg-10 { background: linear-gradient(135deg,var(--purple-t),var(--orange-t)); }

.bg-11 { background: linear-gradient(135deg,var(--pink-t),var(--teal-t)); }

.bg-12 { background: linear-gradient(135deg,var(--orange-t),var(--purple-t)); }

.bg-13 { background: linear-gradient(135deg,var(--yellow-t),var(--pink-t)); }

.bg-14 { background: linear-gradient(135deg,var(--teal-t),var(--orange-t)); }

.process-list { display: flex; flex-direction: column; }

.process-item { display: grid; grid-template-columns: 120px 1fr; gap: 30px; padding: 34px 0px; border-top: 1px solid var(--line); }

.process-item:last-child { border-bottom: 1px solid var(--line); }

.process-tag { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-soft); }

.process-item h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }

.process-item p { color: var(--ink-soft); margin: 0px; max-width: 640px; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.why-card { padding: 28px 24px; border-radius: 16px; background: rgb(255, 255, 255); border: 1px solid var(--line); }

.why-card .tri-lg { width: 0px; height: 0px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid var(--purple); margin-bottom: 16px; }

.why-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }

.why-card p { color: var(--ink-soft); font-size: 15px; margin: 0px; }

.price-card { max-width: 460px; margin: 0px auto; background: var(--ink); color: rgb(255, 255, 255); border-radius: 24px; padding: 44px 40px; text-align: center; position: relative; overflow: hidden; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 940px; margin: 0px auto; align-items: stretch; }

.pricing-grid .price-card { max-width: none; display: flex; flex-direction: column; }

.pricing-grid .price-card ul { flex: 1 1 0%; }

.price-card.featured { border: 1.5px solid var(--pink); box-shadow: rgba(236, 73, 153, 0.5) 0px 20px 50px -25px; }

.plan-badge { display: inline-block; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(201, 196, 214); margin-bottom: 14px; position: relative; }

.price-card.featured .plan-badge { color: var(--yellow); }

.setup-fee { color: rgb(201, 196, 214); font-size: 13px; margin: 0px 0px 4px; position: relative; }

.price-card .glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle,var(--purple),transparent 70%); opacity: 0.4; top: -180px; right: -140px; }

.price-card .amount { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 56px; position: relative; }

.price-card .amount sup { font-size: 22px; vertical-align: top; top: 8px; position: relative; }

.price-card .amount span { font-size: 16px; font-weight: 500; color: rgb(201, 196, 214); }

.price-card .cancel { color: rgb(201, 196, 214); font-size: 14px; margin: 6px 0px 28px; position: relative; }

.price-card ul { list-style: none; margin: 0px 0px 32px; padding: 0px; text-align: left; display: flex; flex-direction: column; gap: 14px; position: relative; }

.price-card ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: rgb(229, 225, 239); }

.price-card ul li .tri { border-left-color: var(--yellow); margin-top: 6px; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.work-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: rgb(255, 255, 255); display: block; transition: transform 0.18s, box-shadow 0.18s; }

.work-card:hover { transform: translateY(-4px); box-shadow: rgba(21, 18, 28, 0.25) 0px 16px 30px -18px; }

.work-card .swatch { height: 200px; display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; color: rgb(255, 255, 255); overflow: hidden; }

.work-card .swatch img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.work-card .visit { color: var(--pink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }

.work-card .body { padding: 22px 24px; }

.work-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }

.work-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0px 0px 14px; }

.work-card .tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }

.testimonial-note { margin-top: 40px; border: 1.5px dashed var(--line); border-radius: 16px; padding: 26px 28px; color: var(--ink-soft); font-size: 15px; }

.testimonial-carousel { max-width: 680px; margin: 0px auto; position: relative; }

.testimonial-viewport { overflow: hidden; border-radius: 18px; }

.testimonial-track { display: flex; transition: transform 0.5s; }

.testimonial-slide { flex: 0 0 100%; min-width: 0px; padding: 2px; box-sizing: border-box; }

.testimonial-card { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; }

.stars { color: rgb(245, 180, 0); font-size: 19px; letter-spacing: 3px; line-height: 1; }

.testimonial-card blockquote { margin: 0px; font-size: 15.5px; line-height: 1.65; color: var(--ink); font-style: normal; flex: 1 1 0%; }

.testimonial-attribution { padding-top: 14px; border-top: 1px solid var(--line); }

.testimonial-attribution b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 14.5px; font-weight: 600; }

.testimonial-attribution span { color: var(--ink-soft); font-size: 13px; }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }

.carousel-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; color: var(--ink); transition: background 0.15s, color 0.15s; flex: 0 0 auto; }

.carousel-arrow:hover { background: var(--ink); color: rgb(255, 255, 255); border-color: var(--ink); }

.carousel-dots { display: flex; gap: 8px; }

.carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 0px; transition: background 0.2s, transform 0.2s; }

.carousel-dot.active { background: var(--pink); transform: scale(1.2); }

.faq-item { border-top: 1px solid var(--line); }

.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q { width: 100%; text-align: left; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 24px 0px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }

.faq-q .plus { font-size: 22px; color: var(--ink-soft); transition: transform 0.2s; flex: 0 0 auto; }

.faq-item.open .faq-q .plus { transform: rotate(45deg); color: var(--pink); }

.faq-a { max-height: 0px; overflow: hidden; transition: max-height 0.25s; }

.faq-a p { color: var(--ink-soft); padding-bottom: 24px; margin: 0px; max-width: 760px; }

.payback-note { color: var(--ink-soft); font-size: 14.5px; margin: -30px 0px 32px; max-width: 640px; }

.payback-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.payback-item { border: 1px solid var(--line); border-radius: 14px; background: rgb(255, 255, 255); overflow: hidden; }

.payback-q { width: 100%; text-align: left; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }

.payback-q .label { display: flex; align-items: center; gap: 12px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15.5px; }

.payback-q .plus { font-size: 20px; color: var(--ink-soft); transition: transform 0.2s; flex: 0 0 auto; }

.payback-item.open .payback-q .plus { transform: rotate(45deg); color: var(--pink); }

.payback-a { max-height: 0px; overflow: hidden; transition: max-height 0.25s; }

.payback-a-inner { padding: 0px 20px 22px; }

.payback-a-inner .stat-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); padding: 6px 0px; border-top: 1px dashed var(--line); }

.payback-a-inner .stat-row b { color: var(--ink); font-weight: 600; }

.payback-a-inner .verdict { margin-top: 12px; font-size: 14.5px; font-weight: 500; }

.payback-a-inner .verdict .grad-text { font-weight: 700; }

.cta-band { border-radius: 28px; padding: 64px 56px; text-align: center; position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }

.cta-band h2 { color: rgb(255, 255, 255); font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }

.cta-band p { color: rgb(201, 196, 214); font-size: 17px; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }

.cta-band .glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,var(--pink),transparent 70%); opacity: 0.35; top: -260px; left: -160px; filter: blur(10px); }

.cta-form { position: relative; max-width: 440px; margin: 0px auto; display: flex; flex-direction: column; gap: 14px; text-align: left; }

.cta-form input, .cta-form textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-family: Inter, sans-serif; font-size: 15px; }

.cta-form input::placeholder, .cta-form textarea::placeholder { color: rgb(155, 150, 168); }

.cta-form input:focus, .cta-form textarea:focus { outline: none; border-color: var(--pink); }

.cta-form textarea { min-height: 90px; resize: vertical; }

.cta-form button { margin-top: 4px; }

.cta-form .hint { color: rgb(155, 150, 168); font-size: 13px; margin: -6px 0px 0px; }

footer { padding: 60px 0px 40px; border-top: 1px solid var(--line); }

.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; margin-bottom: 50px; }

.footer-top .logo img { height: 30px; }

.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }

.footer-col h4 { font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 16px; }

.footer-col ul { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 10px; }

.footer-col a { color: var(--ink-soft); font-size: 14.5px; }

.footer-col a:hover { color: var(--ink); }

.footer-bottom { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 13.5px; flex-wrap: wrap; gap: 12px; }

@media (max-width: 920px) {
  .nav-links { display: none; position: fixed; top: 65px; left: 0px; right: 0px; background-color: rgb(250, 250, 248); opacity: 1; backdrop-filter: none; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0px; padding: 8px 28px 20px; box-shadow: rgba(21, 18, 28, 0.3) 0px 16px 24px -20px; z-index: 200; max-height: calc(-65px + 100vh); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links nav { width: 100%; }
  .nav-links nav ul { flex-direction: column; gap: 0px; width: 100%; }
  .nav-links nav ul li { border-bottom: 1px solid var(--line); }
  .nav-links nav ul li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
  .nav-links nav a { display: block; padding: 14px 0px; font-size: 16px; }
  .nav-cta { width: 100%; padding-top: 12px; }
  .nav-cta .btn { width: 100%; justify-content: center; }
  .mobile-toggle { display: block; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; }
  .service-grid, .service-grid.two-col { grid-template-columns: 1fr; }
  .service-tier-label { flex-direction: column; align-items: flex-start; gap: 6px; margin: 32px 0px 14px; }
  .feature-row.reverse .f-visual, .feature-row.reverse .f-text { order: initial; }
  .trade-grid { grid-template-columns: 1fr; }
  .trade-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
  .trade-label { gap: 12px; }
  .trade-q { padding: 16px; }
  .payback-grid { grid-template-columns: 1fr; }
  .payback-note { margin-top: 0px; }
  .why-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 28px 22px; min-height: auto; }
  .process-item { grid-template-columns: 1fr; gap: 8px; }
  .cta-band { padding: 48px 26px; }
  .price-card { padding: 36px 26px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-actions { width: 100%; }
  .cookie-actions button { flex: 1 1 0%; }
}

.cookie-banner { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 200; background: var(--ink); color: rgb(255, 255, 255); padding: 20px 24px; box-shadow: rgba(0, 0, 0, 0.35) 0px -12px 30px -15px; transform: translateY(100%); transition: transform 0.3s; }

.cookie-banner.show { transform: translateY(0px); }

.cookie-banner-inner { max-width: 1180px; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.cookie-banner p { margin: 0px; font-size: 14px; color: rgb(216, 211, 227); max-width: 680px; line-height: 1.55; }

.cookie-banner a { color: rgb(255, 255, 255); text-decoration: underline; }

.cookie-actions { display: flex; gap: 12px; flex: 0 0 auto; }

.cookie-actions button { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px; padding: 11px 22px; border-radius: 999px; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; white-space: nowrap; }

.cookie-btn-accept { background: linear-gradient(100deg,var(--pink),var(--orange) 55%,var(--yellow)); color: var(--ink); }

.cookie-btn-reject { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); color: rgb(255, 255, 255); }