:root { --bg-cream: #faf8f5; --bg-warm: #f3ede5; --bg-card: #ffffff; --bg-dark: #1c1917; --text-primary: #1c1917; --text-secondary: #78716c; --text-tertiary: #a8a29e; --line: #e8e4df; --line-soft: #efeae3; --orange-300: #6faec4; --orange-400: #4a8ea8; --orange-500: #2f6f8a; --orange-600: #245b73; --orange-700: #1b4558; --orange-400-rgb: 74, 142, 168; --orange-500-rgb: 47, 111, 138; --orange-600-rgb: 36, 91, 115; --orange-700-rgb: 27, 69, 88; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --shadow-sm: 0 3px 12px rgba(33, 20, 10, 0.05); --shadow-md: 0 12px 35px rgba(33, 20, 10, 0.08); --shadow-lg: 0 20px 55px rgba(33, 20, 10, 0.14); --shell: min(1220px, calc(100% - 3.2rem)); } /* Optional variants: add class on to compare. */ body.theme-forest { --orange-300: #5db6ab; --orange-400: #2a9d8f; --orange-500: #1f7a73; --orange-600: #145e59; --orange-700: #0f4c49; --orange-400-rgb: 42, 157, 143; --orange-500-rgb: 31, 122, 115; --orange-600-rgb: 20, 94, 89; --orange-700-rgb: 15, 76, 73; } body.theme-ink { --orange-300: #60a5fa; --orange-400: #3b82f6; --orange-500: #2563eb; --orange-600: #1d4ed8; --orange-700: #1e3a8a; --orange-400-rgb: 59, 130, 246; --orange-500-rgb: 37, 99, 235; --orange-600-rgb: 29, 78, 216; --orange-700-rgb: 30, 58, 138; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: "Sora", sans-serif; color: var(--text-primary); background: var(--bg-cream); font-size: 17px; line-height: 1.7; overflow-x: hidden; } body.menu-open { overflow: hidden; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.03; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px; } .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; z-index: 80; transition: width 0.1s linear; background: linear-gradient(90deg, var(--orange-500) 0%, var(--orange-400) 52%, var(--orange-300) 100%); } .shell { width: var(--shell); margin-inline: auto; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .site-header.is-scrolled { background: rgba(250, 248, 245, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); } .nav-wrap { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .logo { text-decoration: none; color: var(--text-primary); font-family: "Fraunces", serif; font-size: 1.78rem; letter-spacing: -0.03em; font-weight: 700; } .logo span { color: var(--orange-500); } .nav-links { display: flex; align-items: center; gap: 0.35rem; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; border-radius: 999px; padding: 0.52rem 0.78rem; transition: all 0.22s ease; } .nav-links a:hover { color: var(--orange-600); } .nav-links a:not(.nav-cta) { position: relative; } .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0.78rem; right: 0.78rem; bottom: 0.3rem; height: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 0.28s ease; background: var(--orange-500); } .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); } .nav-cta { color: #fff !important; background: linear-gradient(120deg, var(--orange-600), var(--orange-500)); box-shadow: 0 10px 28px rgba(var(--orange-500-rgb), 0.25); } .menu-toggle { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.65); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; } .menu-toggle span { width: 18px; height: 2px; background: var(--text-primary); border-radius: 999px; } .mobile-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(28, 25, 23, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mobile-drawer.open { opacity: 1; pointer-events: auto; } .drawer-panel { width: min(92vw, 380px); height: 100%; margin-left: auto; background: var(--bg-cream); border-left: 1px solid var(--line); display: flex; flex-direction: column; padding: 1.2rem; transform: translateX(102%); transition: transform 0.28s ease; } .mobile-drawer.open .drawer-panel { transform: translateX(0%); } .drawer-close { align-self: flex-end; border: 1px solid var(--line); background: #fff; color: var(--text-primary); border-radius: 10px; width: 38px; height: 38px; font-size: 1.05rem; cursor: pointer; } .drawer-link { text-decoration: none; color: var(--text-primary); font-family: "Fraunces", serif; font-size: 1.45rem; margin-top: 0.8rem; } .drawer-cta { margin-top: auto; } main { padding-top: 92px; } .hero { position: relative; min-height: 92vh; overflow: hidden; background: radial-gradient( 630px circle at var(--mx, 52%) var(--my, 46%), rgba(var(--orange-500-rgb), 0.12), rgba(var(--orange-500-rgb), 0) 42% ), linear-gradient(180deg, #fffdfa 0%, #fcf9f3 100%); border-bottom: 1px solid var(--line-soft); } .dot-grid { position: absolute; inset: 0; opacity: 0.54; background-image: radial-gradient(circle, #e8e4df80 1px, transparent 1px); background-size: 32px 32px; } .blob { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; animation: blob-float 20s ease-in-out infinite; } .blob-1 { width: 500px; height: 500px; top: 9%; right: 9%; background: linear-gradient( 135deg, rgba(var(--orange-500-rgb), 0.12), rgba(var(--orange-400-rgb), 0.06) ); } .blob-2 { width: 400px; height: 400px; left: 4%; bottom: 18%; animation-delay: -7s; background: linear-gradient( 135deg, rgba(var(--orange-400-rgb), 0.1), rgba(var(--orange-500-rgb), 0.05) ); } .hero-inner { position: relative; z-index: 2; min-height: 92vh; padding: 8rem 0 7rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; width: fit-content; border-radius: 999px; padding: 0.35rem 0.85rem; border: 1px solid rgba(var(--orange-400-rgb), 0.35); background: #ecf8f6; color: var(--orange-600); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); position: relative; } .pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange-400); animation: ping 1.3s cubic-bezier(0, 0, 0.2, 1) infinite; } h1, h2, h3 { margin: 0; line-height: 1.08; } h1 { margin-top: 1.1rem; font-family: "Fraunces", serif; font-size: clamp(2rem, 6.2vw, 3.65rem); letter-spacing: -0.03em; } .accent-word { color: var(--orange-600); font-style: italic; } .hero-word { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; } .hero-word.in { opacity: 1; transform: none; } .hero-copy { margin-top: 1.35rem; max-width: 62ch; color: var(--text-secondary); } .hero-typing { margin: 0.9rem 0 0; color: var(--text-secondary); font-size: 0.96rem; min-height: 2em; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: nowrap; } .hero-typing-label { flex: 0 0 auto; } .hero-typing-value { display: inline-flex; align-items: baseline; white-space: nowrap; min-width: 27ch; } #typed-goal { display: inline-block; width: 27ch; max-width: none; white-space: nowrap; color: var(--orange-600); font-weight: 700; } .typing-caret { color: var(--orange-500); animation: caret-blink 1s steps(1, end) infinite; } .hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; } .btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 0; border-radius: var(--radius-lg); padding: 0.82rem 1.08rem; font-family: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; cursor: pointer; -webkit-appearance: none; appearance: none; transition: all 0.22s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(0.98); } .btn-primary { color: #fff; background: linear-gradient(120deg, var(--orange-600), var(--orange-500)); box-shadow: 0 16px 35px rgba(var(--orange-500-rgb), 0.28); } .btn-secondary { color: var(--orange-600); border: 2px solid var(--orange-500); background: #fffdfa; } .btn-secondary:hover { background: #f0f8f7; } .btn-contrast { color: var(--orange-600); background: #ffffff; } .trust-strip { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; max-width: 700px; } .trust-strip li { padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); color: var(--text-secondary); background: rgba(255, 255, 255, 0.8); font-size: 0.82rem; } .hero-visual { display: grid; gap: 1rem; } .mock-card { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-xl); padding: 1.1rem; box-shadow: var(--shadow-sm); } .browser-card .fake-topbar { display: flex; align-items: center; gap: 0.38rem; margin-bottom: 0.7rem; } .fake-topbar span { width: 10px; height: 10px; border-radius: 50%; } .fake-topbar span:nth-child(1) { background: #ff6568; } .fake-topbar span:nth-child(2) { background: #fac800; } .fake-topbar span:nth-child(3) { background: #05df72; } .fake-topbar p { margin: 0 0 0 auto; font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; color: var(--text-tertiary); } .fake-screen { border-radius: 12px; padding: 0.8rem; background: linear-gradient(135deg, #eef8f7 0%, #f7fcfb 100%); } .line { height: 8px; border-radius: 999px; background: #b6d7d2; margin-bottom: 0.45rem; } .line.l1 { width: 50%; } .line.l2 { width: 82%; background: #8fc4bc; } .line.l3 { width: 68%; } .line.l4 { width: 38%; background: #d6ebe7; margin-bottom: 0; } .chat-card { display: grid; gap: 0.45rem; } .bubble { margin: 0; border-radius: 12px; padding: 0.45rem 0.58rem; font-size: 0.76rem; line-height: 1.45; } .bubble-light { background: var(--bg-warm); color: var(--text-secondary); border-top-left-radius: 5px; } .bubble-brand { justify-self: end; background: var(--orange-500); color: #fff; border-top-right-radius: 5px; max-width: 94%; } .metric-label { margin: 0; font-size: 0.71rem; color: var(--text-tertiary); } .metric-value { margin: 0; font-size: 1.7rem; color: var(--orange-600); font-weight: 700; } .bars { margin-top: 0.3rem; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 0.2rem; } .bars span { display: block; border-radius: 3px; background: #9acac3; } .tools-band { background: var(--bg-warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.4rem 0 2.8rem; overflow: hidden; } .tools-band p { margin: 0 0 1.35rem; text-align: center; font-family: "Fraunces", serif; font-size: clamp(1.15rem, 2.4vw, 1.85rem); color: var(--text-primary); letter-spacing: -0.01em; font-weight: 600; } .marquee-shell { width: 100%; margin-inline: 0; } .marquee-shell.second-row { margin-top: 0.8rem; } .marquee-track { width: max-content; display: flex; align-items: center; gap: 0.68rem; padding-inline: 0.75rem; animation: marquee 38s linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-track.marquee-reverse { animation-name: marquee-reverse; animation-duration: 33s; } .marquee-track span { font-family: "IBM Plex Mono", monospace; font-size: 0.84rem; border: 1px solid #e4ded6; color: #6f655d; border-radius: 999px; padding: 0.5rem 0.86rem; background: rgba(255, 255, 255, 0.75); } .section-card { margin-top: 0; } .value-strip, .offers, .custom-band, .process, .faq, .contact { padding: 5rem 0; } .value-strip { padding-top: 5.8rem; } .process { background: var(--bg-warm); } .faq { background: #fcfaf7; } .contact { padding-bottom: 3.2rem; background: radial-gradient( 120% 160% at 50% -12%, rgba(var(--orange-500-rgb), 0.18), rgba(var(--orange-500-rgb), 0) 56% ), linear-gradient(180deg, #163244 0%, #102635 58%, #0c1217 100%); } .cities-band { background: var(--bg-warm); } .value-strip .shell, .offers .shell, .custom-band .shell, .process .shell, .faq .shell, .contact .shell { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; } .section-head { max-width: 760px; margin-inline: auto; text-align: center; } .section-head h2 { margin-top: 0.95rem; font-family: "Fraunces", serif; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: -0.02em; } .section-head.compact h2 { font-size: clamp(1.4rem, 3.5vw, 2.1rem); } .pillars { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .pillars article { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 1.2rem; } .pillars h3 { font-size: 1.03rem; } .pillars p { margin: 0.55rem 0 0; color: var(--text-secondary); font-size: 0.9rem; } .stats-band { padding-top: 0; } .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .stats-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 1.2rem; text-align: center; } .stats-number { margin: 0; font-family: "Fraunces", serif; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--orange-600); } .stats-label { margin: 0.58rem 0 0; color: var(--text-secondary); font-size: 0.88rem; } .offer-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .offer-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; padding: 1.25rem; display: grid; gap: 0.82rem; box-shadow: var(--shadow-sm); transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .offer-card:hover { border-color: rgba(var(--orange-400-rgb), 0.45); box-shadow: 0 18px 35px rgba(var(--orange-500-rgb), 0.12); transform: translateY(-2px); } .offer-card.featured { color: #fff; border-color: transparent; background: linear-gradient(140deg, var(--orange-500), var(--orange-600) 52%, var(--orange-700)); box-shadow: var(--shadow-lg); } .badge { width: fit-content; margin: 0; border-radius: 999px; padding: 0.2rem 0.52rem; background: #ffffff; color: var(--orange-600); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .plan { margin: 0; font-size: 1rem; color: var(--text-secondary); } .offer-card.featured .plan { color: rgba(255, 255, 255, 0.75); } .price { margin: 0; font-family: "Fraunces", serif; font-size: 2rem; letter-spacing: -0.03em; } .price > .count-up { color: inherit; font-family: inherit; font-size: inherit; } .price > span:last-child { margin-left: 0.28rem; font-family: "IBM Plex Mono", monospace; font-size: 0.83rem; color: var(--text-tertiary); } .offer-card.featured .price > span:last-child { color: rgba(255, 255, 255, 0.75); } .plan-copy { margin: 0; color: var(--text-secondary); font-size: 0.9rem; } .offer-card.featured .plan-copy { color: rgba(255, 255, 255, 0.86); } .offer-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; } .offer-card li { font-size: 0.86rem; position: relative; padding-left: 1rem; } .offer-card li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; position: absolute; left: 0; top: 0.52rem; background: var(--orange-500); } .offer-card.featured li { color: rgba(255, 255, 255, 0.92); } .offer-card.featured li::before { background: #fff; } .city-links .offer-grid { margin-top: 1.55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; } .city-links .offer-card { padding: 0.95rem 1rem; border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; } .city-links .offer-card .plan { margin: 0; color: var(--text-primary); font-size: 1.04rem; font-weight: 600; } .city-links .offer-card .btn { white-space: nowrap; padding: 0.56rem 0.84rem; font-size: 0.86rem; border-width: 1.5px; } .city-links .offer-card.is-current-city { border-color: rgba(var(--orange-400-rgb), 0.5); background: linear-gradient(180deg, #f9fffe 0%, #f3fbfa 100%); } .city-links .offer-card.is-current-city .plan::after { content: " · actuelle"; color: var(--orange-600); font-size: 0.82rem; font-weight: 500; } .city-links .offer-card.is-current-city .btn { pointer-events: none; cursor: default; color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--orange-600), var(--orange-500)); box-shadow: none; } .addons { margin-top: 1.3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .addons-note { margin: 1.35rem 0 0; color: var(--text-secondary); font-size: 0.86rem; } .addons article { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 1rem; } .addons h3 { font-size: 1rem; } .addons p { margin: 0.15rem 0 0.1rem; color: var(--orange-600); font-weight: 700; } .addons span { color: var(--text-secondary); font-size: 0.85rem; } .custom-inner { max-width: 780px; margin-inline: auto; text-align: center; } .custom-inner .eyebrow + h2 { margin-top: 0.9rem; } .custom-inner p { color: var(--text-secondary); margin: 1rem auto 0; max-width: 62ch; } .custom-actions { margin-top: 1.6rem; display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; } .process-intro { margin: 1rem 0 0; text-align: center; color: var(--text-secondary); } .timeline-rail { position: relative; margin-top: 3rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; } .timeline-line, .timeline-progress { position: absolute; left: 6%; right: 6%; top: 29px; height: 1px; } .timeline-line { background: #ddd6cd; } .timeline-progress { width: 0%; right: auto; background: linear-gradient(90deg, var(--orange-500), var(--orange-400)); transition: width 0.45s ease; } .timeline-step { position: relative; z-index: 2; border: 0; background: transparent; padding: 0; cursor: pointer; } .timeline-dot { position: relative; margin-inline: auto; width: 58px; height: 58px; border-radius: 50%; border: 1px solid #ddd6cd; background: #fff; color: #a8a29e; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-size: 0.82rem; font-weight: 600; transition: all 0.32s ease; } .timeline-step.is-active .timeline-dot { color: #fff; border-color: var(--orange-500); background: linear-gradient(160deg, var(--orange-500), var(--orange-600)); box-shadow: 0 10px 24px rgba(var(--orange-500-rgb), 0.22); } .timeline-step::after { content: attr(data-step-label); position: absolute; left: 50%; transform: translateX(-50%); top: 68px; color: #a8a29e; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; transition: color 0.25s ease; } .timeline-step.is-active::after { color: var(--orange-600); } .process-focus { text-align: center; max-width: 760px; margin: 3.3rem auto 0; min-height: 152px; } .process-focus h3 { font-family: "Fraunces", serif; font-size: clamp(2rem, 3.4vw, 2.9rem); } .process-focus p { margin: 0.95rem 0 0; color: var(--text-secondary); font-size: 1.02rem; } #process-focus-title { min-height: 1.2em; } #process-focus-desc { min-height: 4.2em; } .process-focus.is-switching h3, .process-focus.is-switching p { opacity: 0.32; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .faq-item { margin: 0.95rem auto 0; max-width: 900px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; } .faq-trigger { width: 100%; border: 0; background: transparent; padding: 0.95rem 1rem; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: 1rem; } .faq-plus { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--orange-600); background: #e8f5f2; font-size: 1.15rem; line-height: 1; transition: transform 0.24s ease, background-color 0.24s ease, color 0.24s ease; } .faq-item.is-open .faq-plus { transform: rotate(45deg); background: var(--orange-500); color: #fff; } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.34s ease; } .faq-panel p { margin: 0; color: var(--text-secondary); padding: 0 1rem 1rem; } .contact { margin-bottom: 0; } .contact-inner { text-align: center; background: transparent !important; border: 0; border-radius: 0; box-shadow: none; padding: 3rem 2.2rem !important; } .contact p:not(.eyebrow) { max-width: 64ch; margin-inline: auto; color: rgba(228, 244, 241, 0.88); } .contact .eyebrow { margin: 0 auto 1rem; background: rgba(236, 248, 252, 0.94); border-color: rgba(171, 206, 222, 0.78); color: #124560; } .contact h2 { color: #f6fffd; } .contact-actions { margin-top: 1.5rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.62rem; } .site-footer { position: relative; overflow: hidden; border-top: 1px solid rgba(204, 225, 232, 0.12); background: radial-gradient( 95% 120% at 50% -28%, rgba(var(--orange-500-rgb), 0.13), rgba(var(--orange-500-rgb), 0) 62% ), linear-gradient(180deg, #0c1217 0%, #080d11 100%); padding: 3.4rem 0 1.5rem; } .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 24% ); } .footer-main, .footer-bottom { position: relative; z-index: 1; } .footer-main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem 3.4rem; } .footer-block { min-width: 0; } .footer-logo { display: inline-block; text-decoration: none; color: #f3fbf8; font-family: "Fraunces", serif; font-size: 2rem; letter-spacing: -0.02em; font-weight: 700; } .footer-logo span { color: var(--orange-400); } .footer-brand p { margin: 0.85rem 0 0; max-width: 34ch; color: rgba(224, 236, 231, 0.8); font-size: 0.94rem; } .footer-social { margin-top: 1.2rem; display: flex; gap: 0.62rem; } .footer-social a { min-width: 42px; height: 34px; padding: 0 0.5rem; border-radius: 10px; border: 1px solid rgba(218, 236, 230, 0.2); display: grid; place-items: center; text-decoration: none; color: rgba(235, 246, 242, 0.86); font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .footer-social a:hover { color: #fff; border-color: rgba(var(--orange-400-rgb), 0.9); transform: translateY(-1px); } .footer-heading { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(181, 195, 189, 0.78); } .footer-links { margin-top: 0.9rem; display: grid; gap: 0.72rem; } .footer-links a { text-decoration: none; color: rgba(236, 247, 243, 0.86); font-size: 0.95rem; transition: color 0.2s ease; } .footer-links a:hover { color: #ffffff; } .footer-bottom { margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(205, 226, 233, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .footer-bottom p { margin: 0; color: rgba(187, 205, 199, 0.78); font-size: 0.85rem; } .footer-signature { margin: 0 0 0 auto; color: rgba(206, 225, 233, 0.9); font-weight: 500; letter-spacing: 0.01em; } .footer-top { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(212, 233, 226, 0.24); display: grid; place-items: center; text-decoration: none; color: rgba(238, 250, 245, 0.85); transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .footer-top:hover { color: #fff; border-color: rgba(var(--orange-400-rgb), 0.9); transform: translateY(-2px); } .offer-page main { padding-top: 98px; } .offer-hero { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdfa 0%, #fcf6ee 100%); } .offer-hero .shell { padding: 6rem 0 5.6rem; } .offer-hero .eyebrow { margin-top: 0; } .offer-hero h1 { max-width: 15ch; } .offer-hero .price { margin-top: 0.65rem; } .offer-hero p { max-width: 66ch; color: var(--text-secondary); } .offer-hero .hero-actions { margin-top: 1.6rem; } .offer-detail { margin-top: 0; padding: 4.8rem 0; background: #fcfaf7; } .offer-detail .shell { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .detail-grid { margin-top: 1.8rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } .detail-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; padding: 1.25rem; } .detail-card h3 { margin: 0; font-size: 1.06rem; } .detail-card p { margin: 0.45rem 0 0; color: var(--text-secondary); font-size: 0.92rem; } .detail-card ul { margin: 0.62rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.34rem; } .detail-card li { position: relative; padding-left: 0.95rem; color: var(--text-secondary); font-size: 0.9rem; } .detail-card li::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); } .back-link { text-decoration: none; color: var(--text-secondary); font-size: 0.9rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.72rem; transition: color 0.2s ease, border-color 0.2s ease; } .back-link:hover { color: var(--orange-600); border-color: rgba(var(--orange-400-rgb), 0.45); } .quote-layout { margin-top: 1.8rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); gap: 1.1rem; } .quote-form { display: grid; gap: 0.85rem; } .quote-form .btn { justify-self: start; } .quote-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .quote-field { display: grid; gap: 0.35rem; } .quote-field label { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); } .quote-form input, .quote-form select, .quote-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 0.74rem 0.82rem; font: inherit; font-size: 0.94rem; color: var(--text-primary); background: #fff; } .quote-form textarea { min-height: 140px; resize: vertical; } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: rgba(var(--orange-500-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--orange-500-rgb), 0.12); } .quote-consent { margin-top: 0.25rem; display: flex; align-items: flex-start; gap: 0.55rem; } .quote-consent input { width: 17px; height: 17px; margin-top: 0.2rem; } .quote-consent label { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; } .quote-hint { margin: 0; color: var(--text-secondary); font-size: 0.82rem; } .quote-status { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--orange-600); min-height: 1.25em; } .quote-aside { display: grid; gap: 1rem; } .quote-aside .detail-card h3 { margin-bottom: 0.35rem; } .quote-aside ul { margin: 0.5rem 0 0; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-delay-1 { animation: reveal-up 0.6s ease 0.2s both; } .reveal-delay-2 { animation: reveal-up 0.6s ease 0.3s both; } .reveal-delay-3 { animation: reveal-up 0.6s ease 0.4s both; } @keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes blob-float { 0%, 100% { transform: translate(0) scale(1); } 25% { transform: translate(30px, -50px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(40px, 30px) scale(1.02); } } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes marquee-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes ping { 75%, 100% { opacity: 0; transform: scale(2); } } @media (max-width: 1100px) { .hero-inner { gap: 2rem; } .hero-visual { gap: 0.6rem; } .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-links .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quote-layout { grid-template-columns: 1fr; } } @media (max-width: 980px) { .nav-links { display: none; } .menu-toggle { display: inline-flex; } .hero-inner { grid-template-columns: 1fr; padding-top: 6rem; padding-bottom: 5rem; } .hero-visual { order: 2; } .offer-grid, .pillars, .addons, .stats-grid { grid-template-columns: 1fr; } .quote-row { grid-template-columns: 1fr; } .city-links .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value-strip, .offers, .custom-band, .process, .faq, .contact { padding: 4rem 0; } .timeline-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.8rem; max-width: min(360px, 100%); margin-inline: auto; } .timeline-step { width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } .timeline-dot { width: 44px; height: 44px; margin-inline: auto; font-size: 0.74rem; } .timeline-step::after { display: none; } .timeline-line, .timeline-progress { display: none; } .process-focus { margin-top: 1.85rem; min-height: 184px; } .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 760px) { :root { --shell: min(1220px, calc(100% - 1.5rem)); } .site-header { background: rgba(250, 248, 245, 0.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); } .nav-wrap { height: 68px; } main { padding-top: 76px; } h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); } .hero-copy { font-size: 0.97rem; } .hero-typing { font-size: 0.87rem; min-height: 2.1em; } .hero-typing-value { min-width: 24ch; } #typed-goal { width: 24ch; } .trust-strip { grid-template-columns: 1fr; } .value-strip .shell, .offers .shell, .custom-band .shell, .process .shell, .faq .shell, .contact .shell { padding: 0; } .value-strip, .offers, .custom-band, .process, .faq, .contact { padding: 2.8rem 0; } .price { font-size: 1.8rem; } .timeline-dot { width: 40px; height: 40px; margin-inline: auto; font-size: 0.7rem; } .timeline-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-top: 1.6rem; max-width: min(320px, 100%); margin-inline: auto; } .process-focus { margin-top: 2rem; min-height: 196px; } .process-focus h3 { font-size: clamp(1.6rem, 7vw, 2.15rem); } .process-focus p { font-size: 0.95rem; } .faq-trigger { font-size: 0.92rem; } .city-links .offer-grid { grid-template-columns: 1fr; } .city-links .offer-card { padding: 0.95rem; } .site-footer { padding: 2.4rem 0 1.1rem; } .footer-main { grid-template-columns: 1fr; gap: 1.5rem; } .footer-brand { grid-column: auto; } .footer-bottom { margin-top: 1.8rem; padding-top: 1rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .footer-bottom p { font-size: 0.79rem; } .footer-signature { margin-left: 0; } .footer-top { align-self: flex-end; } .offer-hero .shell { padding: 3.4rem 0 3rem; } .offer-detail .shell { padding: 0; } .detail-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .hero-word, .typing-caret, .marquee-track, .blob, .btn, .nav-links a, .offer-card { animation: none !important; transition: none !important; } }