:root { --home-line: var(--frame-ink); --home-space: clamp(1.25rem, 4vw, 4rem); }
html { scroll-behavior: smooth; scroll-padding-top: 10rem; }
body { margin: 0; }
* { box-sizing: border-box; }
a { text-underline-offset: .25em; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--frame-violet); outline-offset: 5px; }
.skip { position: absolute; top: -8rem; z-index: 100; background: white; padding: 1rem; }
.skip:focus { top: 1rem; }
.review-bar { padding: .55rem 1rem; text-align: center; background: #e9e1fa; font-size: .75rem; }
.brand { width: clamp(170px, 17vw, 250px); height: auto; display: block; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 48px; padding: 1rem 1.3rem; background: var(--frame-violet); border: 1px solid var(--home-line); color: var(--frame-ink); font-weight: 650; text-decoration: none; line-height: 1.35; transition: background .15s; }
.button:hover { background: #ac83ff; }
.button-dark { background: var(--frame-ink); color: white !important; }
.button-dark:hover { background: #302a3b; }
.home-shell { max-width: 1472px; margin: auto; border-inline: 1px solid; }
.hero { display: grid; grid-template-columns: 46% 54%; align-items: center; min-height: 710px; }
.hero-copy { padding: clamp(3rem, 6vw, 6rem) var(--home-space); display: flex; align-items: flex-start; flex-direction: column; justify-content: center; }
.eyebrow { font-size: .8rem; font-weight: 650; margin: 0 0 1.5rem; }
h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.05; letter-spacing: -.035em; margin: 0; }
.intro { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.6; margin: 1.75rem 0 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.text-link { font-size: .95rem; }
.hero-art { position: relative; overflow: hidden; aspect-ratio: 882 / 755; width: 100%; mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 3%, #000 94%, transparent); mask-composite: intersect; }
.hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
.hero-ai-pulse { position: absolute; top: 0; width: calc(100% * 1536 / 1024 * 755 / 882); height: 100%; left: calc((100% - 100% * 1536 / 1024 * 755 / 882) * .54); pointer-events: none; }
.hero-ai-pulse path { fill: none; stroke: #ffd19a; stroke-width: 22; stroke-linecap: round; stroke-dasharray: 14 100; stroke-dashoffset: 14; filter: blur(4px); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-ai-pulse { display: none; } }
.trust { padding: 2.25rem var(--home-space); border-block: 1px solid; display: grid; grid-template-columns: 1fr 3fr; align-items: center; gap: 2rem; }
.trust p { font-size: .8rem; margin: 0; }
.trust ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; }
.trust li { font-size: clamp(.9rem, 1.4vw, 1.2rem); font-weight: 650; }
.section { padding: clamp(3.5rem, 7vw, 6rem) var(--home-space); }
.section-heading { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; margin-bottom: 3rem; align-items: end; }
h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); letter-spacing: -.035em; line-height: 1.12; margin: 0; }
.section-heading p { font-size: 1.1rem; margin: 0; }
.products-section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.products-section .section-heading { display: block; text-align: center; margin-bottom: 2.5rem; }
.products-section .section-heading p { margin-top: 1rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.product { border: 1px solid; display: flex; flex-direction: column; }
.product-art { overflow: hidden; aspect-ratio: 3 / 2; border-bottom: 1px solid; }
.product-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-content { padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; letter-spacing: -.025em; margin: 0; }
.product-content h3 { min-height: 1.25em; }
.product-content p { margin: .75rem 0 0; }
.product-link { display: flex; align-items: center; gap: 1rem; border-top: 1px solid; padding: 1rem 1.5rem; margin-top: auto; text-decoration: none; font-weight: 650; background: var(--frame-violet); transition: background .18s ease; }
.product-link span { display: inline-block; transition: transform .18s ease; }
.product-link:hover, .product-link:focus-visible { background: #ac83ff; }
.product-link:hover span, .product-link:focus-visible span { transform: translate(2px, -2px); }
.tools-section { border-block: 1px solid; }
.tools-section .section-heading { display: block; text-align: center; margin-bottom: 2.5rem; }
.tools-section .section-heading p { max-width: 64rem; margin: 1rem auto 0; }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-grid article { padding: 0 1.25rem; border-right: 1px solid; display: flex; flex-direction: column; min-width: 0; }
.tool-grid article:last-child { border-right-color: transparent; }
.tool-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 1.5rem; }
.tool-free { color: #7030d8; font-size: .8rem; font-weight: 750; margin-bottom: 1.25rem; }
.tool-grid h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.35; }
.tool-grid p { font-size: 1rem; margin: 1.25rem 0 2rem; }
.tool-grid a { display: inline-flex; align-self: flex-start; align-items: center; gap: .75rem; min-height: 44px; font-weight: 650; margin-top: auto; font-size: .95rem; text-decoration: underline; }
.tool-grid a span, .business .button span { transition: transform .18s ease; }
.tool-grid a:hover span, .tool-grid a:focus-visible span, .business .button:hover span, .business .button:focus-visible span { transform: translate(2px, -2px); }
.faq-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
.faq-section > div > p { margin-top: 1.5rem; }
.questions details { border-top: 1px solid; }
.questions details:last-child { border-bottom: 1px solid; }
.questions summary { padding: 1.4rem 2rem 1.4rem 0; cursor: pointer; font-weight: 600; position: relative; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; position: absolute; right: 0; top: 1.1rem; font-size: 1.5rem; font-weight: 400; }
.questions details[open] summary::after { content: '−'; }
.questions details p { margin: 0; padding: 0 2rem 1.5rem 0; }
.business { padding: clamp(3rem, 6vw, 5rem) 0 0; border-top: 1px solid; text-align: center; overflow: hidden; }
.business-copy { padding-inline: var(--home-space); position: relative; }
.business h2 { font-size: clamp(2.6rem, 5.5vw, 5rem); }
.business-description { max-width: 36rem; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.5; margin: 1.5rem auto 1.75rem; }
.business-art { display: block; width: 100%; height: auto; aspect-ratio: 2.35; object-fit: cover; margin-top: 1.5rem; mask-image: linear-gradient(to bottom, transparent, #000 clamp(24px, 4vw, 60px)); }
.home-footer { background: var(--frame-ink); color: white; padding: 4rem var(--home-space) 2rem; display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 3rem; }
.home-footer h2 { font-size: .9rem; letter-spacing: 0; margin: 0 0 1.5rem; }
.home-footer a { display: block; font-size: .85rem; margin-bottom: 1rem; text-decoration: none; }
.home-footer a:hover { text-decoration: underline; }
.home-footer p { color: #d5cfdf; font-size: .9rem; }
.footer-note { grid-column: 1 / -1; border-top: 1px solid #6b6277; padding-top: 1.5rem; font-size: .75rem !important; }
@media (min-width: 1600px) { .home-footer { padding-inline: max(var(--home-space), calc((100vw - 1344px) / 2)); } }
@media (max-width: 1050px) { .hero { min-height: 570px; } .trust { grid-template-columns: 1fr; } .home-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .review-bar { font-size: .65rem; } .hero, .section-heading, .faq-section { grid-template-columns: 1fr; } .hero-copy { padding-block: 3rem; } .hero-copy .button { width: 100%; } .hero-art { margin-top: -1rem; } .hero-actions { gap: 1.25rem; width: 100%; } .hero-actions .button { width: auto; } .trust ul { justify-content: flex-start; } .section-heading { gap: 1.5rem; margin-bottom: 2rem; } .section-heading p { font-size: 1rem; } .product-grid { grid-template-columns: 1fr; gap: 1.5rem; } .product-content { padding: 1.5rem; } .faq-section { gap: 2rem; } .home-footer { gap: 2rem 1rem; } .home-footer > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } .tool-grid article:nth-child(2n) { border-right-color: transparent; } .tool-grid h3 { font-size: 1.25rem; } }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } .tool-grid article { border-right: 0; border-bottom: 1px solid; padding: 0 0 1.5rem; } .tool-grid article:last-child { border-bottom: 0; padding-bottom: 0; } .tool-grid img { max-width: 280px; align-self: center; } .tool-grid p { margin-block: .75rem 1rem; } .tool-free { margin-bottom: .75rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.footer-cookie-button { display: block; margin: 0 0 1rem; padding: 0; border: 0; color: inherit; background: none; font: inherit; font-size: .85rem; cursor: pointer; text-align: left; }
.footer-cookie-button:hover { text-decoration: underline; }