:root {
     --bg: #FDFBFA;
     --bg-grad: radial-gradient(1100px 600px at 85% -10%, #F1EAE6 0%, rgba(241, 234, 230, 0) 60%),
         radial-gradient(900px 500px at -10% 10%, #F3ECE8 0%, rgba(243, 236, 232, 0) 55%);
     --surface: #F5F0ED;
     --card: #FFFFFF;
     --ink: #2B2521;
     --ink-soft: #6E6259;
     --ink-faint: #A6988D;
     --primary: #D8CEC8;
     --primary-dark: #8C7A6E;
     --accent-grad: linear-gradient(135deg, #E4DAD4 0%, #D8CEC8 50%, #BBA99C 100%);
     --border: #EAE1DB;
     --shadow-sm: 0 1px 2px rgba(60, 45, 30, 0.05), 0 1px 1px rgba(60, 45, 30, 0.04);
     --shadow-md: 0 8px 24px -8px rgba(90, 70, 50, 0.22);
     --shadow-lg: 0 20px 45px -15px rgba(90, 70, 50, 0.3);
     --radius-lg: 22px;
     --radius-md: 14px;
     --radius-full: 999px;
     --header-h: 68px;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', system-ui, sans-serif;
     color: var(--ink);
     background: var(--bg);
     background-image: var(--bg-grad);
     background-attachment: fixed;
     -webkit-font-smoothing: antialiased;
     line-height: 1.5;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 .display {
     font-family: 'Poppins', 'Inter', sans-serif;
     letter-spacing: -0.02em;
     color: var(--ink);
 }

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

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

 ul {
     list-style: none;
 }

 section {
     padding: 56px 20px;
 }

 .wrap {
     max-width: 960px;
     margin: 0 auto;
 }

 .center {
     text-align: center;
 }

 :focus-visible {
     outline: 2.5px solid var(--primary-dark);
     outline-offset: 3px;
     border-radius: 6px;
 }

 /* ---------- Audience visibility ---------- */
 body[data-audience="business"] [data-only="customer"] {
     display: none;
 }

 body[data-audience="customer"] [data-only="business"] {
     display: none;
 }

 /* ---------- Reveal animation ---------- */
 .reveal {
     opacity: 0;
     transform: translateY(18px);
     transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
 }

 .reveal.in-view {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal.d1 {
     transition-delay: .08s;
 }

 .reveal.d2 {
     transition-delay: .16s;
 }

 .reveal.d3 {
     transition-delay: .24s;
 }

 .reveal.d4 {
     transition-delay: .32s;
 }

 .fade-swap {
     animation: fadeSwap .45s ease;
 }

 @keyframes fadeSwap {
     from {
         opacity: 0;
         transform: translateY(6px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto;
     }

     .reveal {
         opacity: 1;
         transform: none;
         transition: none;
     }

     * {
         animation: none !important;
         transition-duration: .01ms !important;
     }
 }

 /* ---------- Header ---------- */
 header.site {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     height: var(--header-h);
     display: flex;
     align-items: center;
     background: rgba(253, 251, 250, 0.72);
     backdrop-filter: blur(14px) saturate(160%);
     -webkit-backdrop-filter: blur(14px) saturate(160%);
     border-bottom: 1px solid transparent;
     transition: border-color .3s ease, box-shadow .3s ease;
 }

 header.site.scrolled {
     border-bottom-color: var(--border);
     box-shadow: 0 2px 20px -8px rgba(90, 70, 50, 0.12);
 }

 .header-inner {
     width: 100%;
     max-width: 1080px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 9px;
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     font-size: 1.05rem;
 }

 .brand-mark {
     width: 120px;
     height: 60px;
     border-radius: 9px;
     background: var(--primary);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-sm);
     flex-shrink: 0;
     overflow: hidden;
     /* padding: 20px 10px; */
 }

 .brand-mark img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .social-row {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .social-btn {
     width: 36px;
     height: 36px;
     border-radius: var(--radius-full);
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--card);
     border: 1px solid var(--border);
     color: var(--ink-soft);
     transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
 }

 .social-btn div {
     width: 22px;
     height: 22px;
 }

 .social-btn:hover {
     color: var(--primary);
     border-color: var(--primary);
     transform: translateY(-2px);
     background: #fff;
 }

 /* ---------- Audience toggle ---------- */
 .audience-picker {
     margin-bottom: 26px;
 }

 .audience-caption {
     display: block;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--ink-faint);
     margin-bottom: 10px;
 }

 .audience-toggle {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 2px;
     background: var(--card);
     border: 1.5px solid var(--ink);
     padding: 5px;
     border-radius: var(--radius-full);
     box-shadow: 0 10px 26px -10px rgba(43, 37, 33, 0.35);
 }

 .toggle-slider {
     position: absolute;
     top: 5px;
     left: 5px;
     width: calc(50% - 5px);
     height: calc(100% - 10px);
     background: var(--ink);
     border-radius: var(--radius-full);
     transition: transform .38s cubic-bezier(.2, .8, .2, 1);
     z-index: 0;
 }

 body[data-audience="customer"] .toggle-slider {
     transform: translateX(100%);
 }

 .toggle-btn {
     position: relative;
     z-index: 1;
     border: none;
     background: transparent;
     cursor: pointer;
     font-family: 'Inter', sans-serif;
     font-weight: 600;
     font-size: .86rem;
     padding: 10px 18px;
     border-radius: var(--radius-full);
     color: var(--ink-soft);
     display: inline-flex;
     align-items: center;
     gap: 7px;
     transition: color .3s ease;
 }

 .toggle-btn svg {
     width: 15px;
     height: 15px;
 }

 body[data-audience="business"] .toggle-btn[data-set-audience="business"],
 body[data-audience="customer"] .toggle-btn[data-set-audience="customer"] {
     color: #fff;
     font-weight: 700;
 }

 /* ---------- Hero ---------- */
 .hero {
     padding-top: calc(var(--header-h) + 44px);
     padding-bottom: 40px;
     text-align: center;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .02em;
     color: var(--primary-dark);
     background: var(--surface);
     border: 1px solid var(--border);
     padding: 7px 14px 7px 10px;
     border-radius: var(--radius-full);
     margin-bottom: 18px;
 }

 .eyebrow .dot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--primary-dark);
     box-shadow: 0 0 0 4px rgba(140, 122, 110, 0.15);
 }

 .hero h1 {
     font-size: clamp(2rem, 6vw, 3rem);
     font-weight: 700;
     line-height: 1.14;
     max-width: 17ch;
     margin: 0 auto 20px;
 }

 .hero p {
     color: var(--ink-soft);
     font-size: 1.02rem;
     max-width: 56ch;
     margin: 0 auto 8px;
 }

 .hero p.sub2 {
     max-width: 52ch;
     margin: 12px auto 0;
 }

 .hero p.sub2 strong {
     color: var(--ink);
     font-weight: 600;
 }

 /* business strip — signature element */
 .biz-strip {
     margin-top: 38px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 0;
     max-width: 640px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
 }

 .biz-strip::before {
     content: "";
     position: absolute;
     left: 8%;
     right: 8%;
     top: 24px;
     height: 1px;
     background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
 }

 .biz-node {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 9px;
     position: relative;
     z-index: 1;
 }

 .biz-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: var(--card);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow-sm);
     transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
 }

 .biz-icon svg {
     width: 21px;
     height: 21px;
     stroke: var(--primary-dark);
 }

 .biz-node:hover .biz-icon {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
     border-color: #D9CCC2;
 }

 .biz-label {
     font-size: .72rem;
     color: var(--ink-faint);
     font-weight: 500;
 }

 /* ---------- Section headings ---------- */
 .section-head {
     max-width: 60ch;
     margin: 0 auto 24px;
 }

 .section-head h2 {
     font-size: clamp(1.5rem, 3.6vw, 2rem);
     font-weight: 700;
     margin-bottom: 10px;
 }

 .section-head p {
     color: var(--ink-soft);
     font-size: .98rem;
 }

 /* ---------- Community section ---------- */
 .community {
     padding-top: 8px;
 }

 .community-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     max-width: 820px;
     margin: 0 auto;
 }

 .community-card p {
     color: var(--ink-soft);
     font-size: .96rem;
     margin-bottom: 16px;
 }

 .community-card p:last-of-type {
     margin-bottom: 0;
 }

 .pill-row {
     display: flex;
     flex-wrap: wrap;
     gap: 9px;
     margin: 18px 0 18px;
 }

 .pill {
     background: var(--card);
     border: 1px solid var(--border);
     padding: 7px 14px;
     border-radius: var(--radius-full);
     font-size: .82rem;
     font-weight: 500;
     color: var(--ink);
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .pill svg {
     width: 13px;
     height: 13px;
     stroke: var(--primary-dark);
 }

 .note-line {
     display: flex;
     align-items: flex-start;
     gap: 9px;
     font-size: .85rem;
     color: var(--ink-faint);
     font-style: italic;
 }

 .note-line svg {
     width: 15px;
     height: 15px;
     flex-shrink: 0;
     margin-top: 2px;
     stroke: var(--ink-faint);
 }

 /* ---------- Customer discover card ---------- */
 .discover-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
     max-width: 820px;
     margin: 0 auto;
 }

 .discover-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 20px;
     display: flex;
     gap: 14px;
     align-items: flex-start;
     box-shadow: var(--shadow-sm);
 }

 .discover-num {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     flex-shrink: 0;
     background: var(--accent-grad);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: .9rem;
     color: var(--ink);
 }

 .discover-card h3 {
     font-size: .98rem;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .discover-card p {
     font-size: .88rem;
     color: var(--ink-soft);
     margin: 0;
 }

 /* ---------- Launch card ---------- */
 .launch {
     padding-top: 16px;
     padding-bottom: 16px;
 }

 .launch-card {
     max-width: 820px;
     margin: 0 auto;
     background: var(--accent-grad);
     border-radius: var(--radius-lg);
     padding: 34px 30px;
     color: var(--ink);
     text-align: center;
     box-shadow: var(--shadow-lg);
     position: relative;
     overflow: hidden;
 }

 .launch-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(400px 200px at 15% 0%, rgba(255, 255, 255, 0.45), transparent 60%);
     pointer-events: none;
 }

 .launch-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.55);
     border: 1px solid rgba(255, 255, 255, 0.7);
     padding: 8px 16px;
     border-radius: var(--radius-full);
     font-weight: 600;
     font-size: .92rem;
     margin-bottom: 14px;
     color: var(--ink);
 }

 .launch-card p {
     max-width: 48ch;
     margin: 0 auto;
     opacity: .94;
     font-size: .96rem;
 }

 /* ---------- CTA ---------- */
 .cta {
     text-align: center;
     padding-top: 52px;
 }

 .cta h2 {
     font-size: clamp(1.6rem, 4vw, 2.2rem);
     font-weight: 700;
     margin-bottom: 14px;
 }

 .cta p {
     color: var(--ink-soft);
     max-width: 52ch;
     margin: 0 auto 30px;
     font-size: .98rem;
 }

 .cta-buttons {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 14px 26px;
     border-radius: var(--radius-full);
     font-weight: 600;
     font-size: .95rem;
     font-family: 'Inter', sans-serif;
     cursor: pointer;
     transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease, background .25s ease;
     border: 1.5px solid transparent;
 }

 .btn svg {
     width: 16px;
     height: 16px;
 }

 .btn-primary {
     background: var(--accent-grad);
     color: var(--ink);
     box-shadow: var(--shadow-md);
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 16px 34px -10px rgba(90, 70, 50, 0.4);
 }

 .btn-secondary {
     background: var(--card);
     color: var(--ink);
     border-color: var(--border);
 }

 .btn-secondary:hover {
     transform: translateY(-3px);
     border-color: var(--primary-dark);
     color: var(--primary-dark);
     box-shadow: var(--shadow-sm);
 }

 /* ---------- Footer ---------- */
 footer {
     padding: 34px 20px 28px;
     border-top: 1px solid var(--border);
     margin-top: 20px;
 }

 .footer-inner {
     max-width: 1080px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px;
     text-align: center;
 }

 .footer-tagline {
     font-size: .86rem;
     color: var(--ink-faint);
 }

 .footer-copy {
     font-size: .78rem;
     color: var(--ink-faint);
 }


 /* ---------- Registration Modal ---------- */
 .modal-overlay {
     position: fixed;
     inset: 0;
     z-index: 200;
     background: rgba(43, 37, 33, 0.55);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s ease, visibility .3s ease;
 }

 .modal-overlay.open {
     opacity: 1;
     visibility: visible;
 }

 .modal-card {
     background: var(--card);
     border-radius: var(--radius-lg);
     width: 100%;
     max-width: 540px;
     max-height: 88vh;
     overflow-y: auto;
     box-shadow: var(--shadow-lg);
     padding: 30px 26px;
     position: relative;
     transform: translateY(24px) scale(.97);
     transition: transform .35s cubic-bezier(.2, .8, .2, 1);
 }

 .modal-overlay.open .modal-card {
     transform: translateY(0) scale(1);
 }

 .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--surface);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--ink-soft);
     transition: background .25s ease, color .25s ease, transform .25s ease;
 }

 .modal-close:hover {
     background: var(--ink);
     color: #fff;
     transform: rotate(90deg);
 }

 .modal-close svg {
     width: 16px;
     height: 16px;
 }

 .modal-header {
     margin-bottom: 20px;
     padding-right: 30px;
 }

 .modal-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--primary-dark);
     margin-bottom: 8px;
 }

 .modal-header h2 {
     font-size: 1.35rem;
     font-weight: 700;
     margin-bottom: 6px;
 }

 .modal-header p {
     font-size: .88rem;
     color: var(--ink-soft);
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
 }

 .form-field label {
     display: block;
     font-size: .8rem;
     font-weight: 600;
     color: var(--ink);
     margin-bottom: 6px;
 }

 .form-field .optional {
     font-weight: 400;
     color: var(--ink-faint);
 }

 .form-field input,
 .form-field textarea {
     width: 100%;
     font-family: 'Inter', sans-serif;
     font-size: .92rem;
     color: var(--ink);
     background: var(--surface);
     border: 1.5px solid var(--border);
     border-radius: var(--radius-md);
     padding: 11px 14px;
     transition: border-color .25s ease, background .25s ease;
 }

 .form-field input:focus,
 .form-field textarea:focus {
     outline: none;
     border-color: var(--ink);
     background: var(--card);
 }

 .form-field textarea {
     resize: vertical;
     min-height: 80px;
 }

 .form-row-2 {
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
 }

 .form-submit {
     width: 100%;
     justify-content: center;
     margin-top: 6px;
 }

 .form-note {
     font-size: .78rem;
     color: var(--ink-faint);
     text-align: center;
     margin-top: 12px;
 }

 .modal-success {
     display: none;
     text-align: center;
     padding: 20px 6px;
 }

 .modal-success.show {
     display: block;
 }

 .modal-success-icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     margin: 0 auto 16px;
     background: var(--accent-grad);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--ink);
 }

 .modal-success-icon svg {
     width: 26px;
     height: 26px;
 }

 .modal-success h3 {
     font-size: 1.15rem;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .modal-success p {
     font-size: .9rem;
     color: var(--ink-soft);
     max-width: 38ch;
     margin: 0 auto;
 }

 .footer-copy {
     font-size: .78rem;
     color: var(--ink-faint);
 }

 .footer-bottom {
     max-width: 1080px;
     margin: 18px auto 0;
     padding: 16px 20px 0;
     border-top: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     text-align: center;
 }

 .footer-links {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: .78rem;
     color: var(--ink-faint);
 }

 .footer-links a {
     color: var(--ink-faint);
     transition: color .25s ease;
 }

 .footer-links a:hover {
     color: var(--primary-dark);
 }

 @media (min-width:520px) {
     .form-row-2 {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (min-width:640px) {
     .discover-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (min-width:768px) {
     section {
         padding: 72px 32px;
     }

     .hero {
         padding-top: calc(var(--header-h) + 60px);
         padding-bottom: 52px;
     }

     .community {
         padding-top: 20px;
     }

     .footer-inner {
         flex-direction: row;
         justify-content: space-between;
         text-align: left;
     }

     .footer-bottom {
         flex-direction: row;
         justify-content: space-between;
         text-align: left;
     }
 }

 @media (max-width:480px) {
     .biz-label {
         font-size: .64rem;
     }

     .biz-icon {
         width: 42px;
         height: 42px;
     }

     .community-card {
         padding: 26px 20px;
     }

     .launch-card {
         padding: 28px 20px;
     }

     .toggle-btn {
         padding: 8px 12px;
         font-size: .76rem;
     }
 }