.elementor-kit-8{--e-global-color-primary:#2563EB;--e-global-color-secondary:#0F172A;--e-global-color-text:#374151;--e-global-color-accent:#1D4ED8;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* prepl.app u2014 global styles u2014 paste into Elementor Site Settings u2192 Custom CSS */nn  /* ========================================================n     BRAND TOKENS u2014 single source of truthn     Change here once u2192 updates everywhere.n     ======================================================== */n  :root {n    --color-primary: #2563EB;n    --color-primary-hover: #1D4ED8;n    --color-headline: #0F172A;n    --color-body: #1E293B;n    --color-muted: #475569;n    --color-bg: #F8FAFC;n    --color-hero-bg: #F1F5FF;n    --color-card: #FFFFFF;n    --color-border: #E2E8F0;n    --color-soft-blue: #DBEAFE;n    --color-cta-dark: #142B57;nn    --radius-sm: 8px;n    --radius-md: 12px;n    --radius-lg: 16px;n    --radius-xl: 24px;n    --radius-full: 9999px;nn    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);n    --shadow-md: 0 8px 24px -8px rgba(15,23,42,.12);n    --shadow-card: 0 50px 100px -30px rgba(15,23,42,.45),n                   0 22px 45px -20px rgba(37,99,235,.28),n                   inset 0 1px 0 rgba(255,255,255,.8);nn    --maxw: 1200px;n  }nn  /* ========================================================n     RESET / BASEn     ======================================================== */n  *, *::before, *::after { box-sizing: border-box; }n  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }n  body {n    margin: 0;n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;n    background: var(--color-bg);n    color: var(--color-body);n    -webkit-font-smoothing: antialiased;n    -moz-osx-font-smoothing: grayscale;n    line-height: 1.5;n  }n  img { max-width: 100%; display: block; }n  a { color: inherit; text-decoration: none; }n  button { font-family: inherit; cursor: pointer; border: none; background: none; }n  ::selection { background: var(--color-soft-blue); color: var(--color-headline); }nn  h1, h2, h3, h4 {n    font-family: 'Archivo', 'Inter', sans-serif;n    letter-spacing: -0.02em;n    color: var(--color-headline);n    margin: 0;n  }n  p { margin: 0; }n  ul { margin: 0; padding: 0; list-style: none; }nn  section[id] { scroll-margin-top: 88px; }nn  .container {n    max-width: var(--maxw);n    margin: 0 auto;n    padding: 0 24px;n  }n  @media (min-width: 1024px) { .container { padding: 0 32px; } }nn  /* ========================================================n     SHARED COMPONENTSn     ======================================================== */n  .btn {n    display: inline-flex;n    align-items: center;n    justify-content: center;n    gap: 8px;n    font-weight: 600;n    font-size: 15px;n    padding: 14px 24px;n    border-radius: var(--radius-full);n    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;n    border: 1px solid transparent;n    white-space: nowrap;n  }n  .btn-primary {n    background: var(--color-primary);n    color: #fff;n    box-shadow: var(--shadow-sm);n  }n  .btn-primary:hover { background: var(--color-primary-hover); }n  .btn-secondary {n    background: #fff;n    color: var(--color-body);n    border-color: var(--color-border);n    box-shadow: var(--shadow-sm);n  }n  .btn-secondary:hover { background: var(--color-bg); }n  .btn-ghost {n    background: transparent;n    color: #fff;n    border-color: rgba(255,255,255,.3);n  }n  .btn-ghost:hover { background: rgba(255,255,255,.1); }nn  .eyebrow {n    display: inline-block;n    background: #fff;n    border: 1px solid var(--color-soft-blue);n    color: var(--color-primary);n    font-size: 12px;n    font-weight: 600;n    letter-spacing: 0.14em;n    text-transform: uppercase;n    padding: 6px 14px;n    border-radius: var(--radius-full);n  }n  .eyebrow-alt { background: var(--color-hero-bg); }nn  .icon { width: 18px; height: 18px; flex-shrink: 0; }n  .icon-sm { width: 14px; height: 14px; }n  .icon-lg { width: 22px; height: 22px; }nn  /* dotted accent background used in hero */n  .dot-grid {n    background-image: radial-gradient(circle at 1px 1px, rgba(37,99,235,.18) 1px, transparent 0);n    background-size: 22px 22px;n  }nn  /* ========================================================n     HERO u2014 hand-drawn SVG underline (pure CSS)n     ======================================================== */n  .brand-underline {n    color: var(--color-primary);n    position: relative;n    display: inline-block;n    white-space: nowrap;n  }n  .brand-underline svg {n    position: absolute;n    left: -2%;n    right: -2%;n    bottom: -0.18em;n    width: 104%;n    height: 0.55em;n    overflow: visible;n    pointer-events: none;n  }n  .brand-underline svg path {n    fill: var(--color-primary);n    stroke: none;n    /* Draw-in via clip-path */n    animation: underline-draw 1.2s cubic-bezier(.22,1,.36,1) .35s both;n  }n  @keyframes underline-draw {n    from { clip-path: inset(0 100% 0 0); }n    to   { clip-path: inset(0 0 0 0); }n  }nn  /* ========================================================n     HERO u2014 3D floating brief card (pure CSS)n     ======================================================== */n  .brief-3d-wrapper { perspective: 1400px; position: relative; }n  .brief-3d-float {n    animation: brief-float 9s ease-in-out infinite;n    will-change: transform;n  }n  .brief-3d-card {n    transform-origin: center center;n    backface-visibility: hidden;n    animation: brief-swing 12s ease-in-out infinite;n    will-change: transform;n  }n  .brief-shadow-float {n    animation: brief-shadow 9s ease-in-out infinite;n  }n  @keyframes brief-float {n    0%, 100% { transform: translateY(0); }n    50%      { transform: translateY(-22px); }n  }n  @keyframes brief-swing {n    0%   { transform: rotateX(8deg) rotateY(-16deg); }n    50%  { transform: rotateX(4deg) rotateY(10deg); }n    100% { transform: rotateX(8deg) rotateY(-16deg); }n  }n  @keyframes brief-shadow {n    0%, 100% { transform: scaleX(1); opacity: 1; }n    50%      { transform: scaleX(.78); opacity: .65; }n  }nn  /* Fade-up entrance for hero text */n  .fade-up { opacity: 0; transform: translateY(16px); animation: fade-up .6s cubic-bezier(.22,1,.36,1) forwards; }n  .fade-up-1 { animation-delay: .05s; }n  .fade-up-2 { animation-delay: .15s; }n  .fade-up-3 { animation-delay: .25s; }n  .fade-up-4 { animation-delay: .35s; }n  .fade-up-5 { animation-delay: .45s; }n  .fade-up-6 { animation-delay: .55s; }n  @keyframes fade-up {n    to { opacity: 1; transform: translateY(0); }n  }nn  @media (prefers-reduced-motion: reduce) {n    .brief-3d-float, .brief-3d-card, .brief-shadow-float,n    .fade-up, .brand-underline svg path { animation: none !important; }n    .fade-up { opacity: 1; transform: none; }n  }nn  /* ========================================================n     HEADERn     ======================================================== */n  .site-header {n    position: sticky;n    top: 0;n    z-index: 50;n    background: rgba(255,255,255,.8);n    backdrop-filter: blur(12px);n    -webkit-backdrop-filter: blur(12px);n    border-bottom: 1px solid var(--color-border);n  }n  .site-header .row {n    display: flex;n    align-items: center;n    justify-content: space-between;n    height: 80px;n  }n  .site-logo { display: inline-flex; align-items: center; gap: 12px; }n  .site-logo img { display: block; }n  .nav-desktop { display: none; gap: 40px; align-items: center; }n  .nav-desktop a { font-size: 14px; font-weight: 500; color: var(--color-muted); transition: color .2s; }n  .nav-desktop a:hover { color: var(--color-headline); }n  .header-cta { display: none; gap: 8px; align-items: center; }n  .header-cta .lang {n    display: inline-flex; align-items: center; gap: 6px;n    font-size: 14px; font-weight: 500; color: var(--color-body);n    padding: 8px 12px; border-radius: var(--radius-full);n    border: 1px solid var(--color-border); background: #fff;n  }n  .header-cta .login { font-size: 14px; font-weight: 500; color: var(--color-body); padding: 8px 16px; }n  .header-cta .start {n    background: var(--color-primary); color: #fff;n    font-size: 14px; font-weight: 600;n    border-radius: var(--radius-full); padding: 10px 20px;n    transition: background .2s;n  }n  .header-cta .start:hover { background: var(--color-primary-hover); }n  @media (min-width: 1024px) {n    .nav-desktop { display: flex; }n    .header-cta { display: flex; }n  }nn  /* ========================================================n     HERO LAYOUTn     ======================================================== */n  .hero {n    position: relative;n    overflow: hidden;n    background: var(--color-hero-bg);n  }n  .hero .accent-1, .hero .accent-2 {n    position: absolute; pointer-events: none;n  }n  .hero .accent-1 { right: 0; top: 40px; height: 288px; width: 288px; opacity: .6; }n  .hero .accent-2 { left: 33%; bottom: 0; height: 160px; width: 160px; opacity: .4; }n  .hero .inner { position: relative; padding: 64px 0 96px; }n  @media (min-width: 1024px) { .hero .inner { padding: 96px 0 128px; } }n  .hero .grid {n    display: grid;n    grid-template-columns: 1fr;n    gap: 48px;n    align-items: center;n  }n  @media (min-width: 1024px) {n    .hero .grid { grid-template-columns: 1fr 1fr; gap: 40px; }n  }nn  .hero-pill {n    display: inline-flex; align-items: center; gap: 8px;n    background: #fff; border: 1px solid var(--color-soft-blue);n    padding: 6px 14px; border-radius: var(--radius-full);n    font-size: 14px; color: var(--color-body); box-shadow: var(--shadow-sm);n  }n  .hero-pill .icon { color: var(--color-primary); }n  .hero-pill span { font-weight: 500; }nn  .hero h1 {n    margin-top: 24px;n    font-size: 40px;n    font-weight: 800;n    line-height: 1.05;n  }n  @media (min-width: 768px) { .hero h1 { font-size: 52px; } }n  @media (min-width: 1024px) { .hero h1 { font-size: 64px; } }n  .hero h1 .dot { color: var(--color-primary); }nn  .hero-sub {n    margin-top: 24px;n    font-size: 18px;n    color: var(--color-muted);n    line-height: 1.6;n    max-width: 560px;n  }n  @media (min-width: 768px) { .hero-sub { font-size: 20px; } }nn  .hero-ctas {n    margin-top: 32px;n    display: flex; flex-direction: column; gap: 12px;n  }n  @media (min-width: 640px) { .hero-ctas { flex-direction: row; } }nn  .hero-features {n    margin-top: 28px;n    display: flex; flex-wrap: wrap;n    gap: 12px 24px;n    font-size: 14px;n    color: var(--color-muted);n  }n  .hero-features li { display: inline-flex; align-items: center; gap: 8px; }n  .hero-features .icon { color: var(--color-primary); width: 16px; height: 16px; }nn  .hero-social {n    margin-top: 32px;n    display: flex; align-items: center; gap: 16px;n  }n  .avatars { display: flex; }n  .avatars img {n    width: 40px; height: 40px; border-radius: 50%;n    border: 2px solid #fff; object-fit: cover;n    box-shadow: var(--shadow-sm);n    margin-left: -12px;n  }n  .avatars img:first-child { margin-left: 0; }n  .stars { color: #FACC15; font-size: 14px; letter-spacing: 1px; }n  .hero-social p { font-size: 14px; color: var(--color-muted); }nn  /* ========================================================n     BRIEF MOCKUP CARDn     ======================================================== */n  .brief-wrapper { position: relative; }n  .brief-glow {n    position: absolute;n    inset: -24px -40px;n    background: linear-gradient(135deg, rgba(219,234,254,.6), transparent 50%, rgba(37,99,235,.15));n    border-radius: 36px;n    filter: blur(40px);n    z-index: -1;n    pointer-events: none;n  }n  .brief-shadow {n    position: absolute;n    left: 40px; right: 40px; bottom: -16px;n    height: 48px;n    background: rgba(30,41,59,.25);n    filter: blur(16px);n    border-radius: 50%;n    z-index: -1;n    pointer-events: none;n  }n  .brief-card {n    position: relative;n    display: flex;n    border-radius: var(--radius-xl);n    border: 1px solid var(--color-border);n    background: #fff;n    box-shadow: var(--shadow-card);n    overflow: hidden;n  }n  .brief-sidebar {n    width: 56px; flex-shrink: 0;n    background: var(--color-bg);n    border-right: 1px solid var(--color-border);n    display: flex; flex-direction: column; align-items: center;n    padding: 20px 0; gap: 16px;n  }n  .brief-sidebar img.icon-logo { width: 36px; height: 36px; }n  .brief-sidebar button {n    width: 36px; height: 36px;n    border-radius: 8px; color: var(--color-muted);n    display: flex; align-items: center; justify-content: center;n    transition: background .2s, color .2s;n  }n  .brief-sidebar button:hover { background: #fff; color: var(--color-primary); }n  .brief-content { flex: 1; padding: 20px; }n  @media (min-width: 640px) { .brief-content { padding: 28px; } }nn  .brief-head { display: flex; align-items: flex-start; justify-content: space-between; }n  .brief-head .eyebrow-text { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }n  .brief-head h3 { margin-top: 4px; font-size: 20px; font-weight: 700; }n  @media (min-width: 640px) { .brief-head h3 { font-size: 24px; } }n  .brief-dots { display: flex; gap: 6px; padding-top: 4px; }n  .brief-dots span { width: 10px; height: 10px; border-radius: 50%; }n  .brief-dots span:nth-child(1) { background: #FCA5A5; }n  .brief-dots span:nth-child(2) { background: #FCD34D; }n  .brief-dots span:nth-child(3) { background: #86EFAC; }nn  .brief-grid-3 {n    margin-top: 20px;n    display: grid;n    grid-template-columns: 1fr;n    gap: 12px;n  }n  @media (min-width: 640px) { .brief-grid-3 { grid-template-columns: repeat(3, 1fr); } }n  .brief-grid-2 {n    margin-top: 12px;n    display: grid;n    grid-template-columns: 1fr;n    gap: 12px;n  }n  @media (min-width: 640px) { .brief-grid-2 { grid-template-columns: repeat(2, 1fr); } }nn  .mini-card {n    border-radius: var(--radius-md);n    border: 1px solid var(--color-border);n    background: #fff;n    padding: 14px;n    transition: box-shadow .2s;n  }n  .mini-card:hover { box-shadow: var(--shadow-md); }n  .mini-card-head { display: flex; align-items: center; justify-content: space-between; }n  .mini-card-icon {n    width: 28px; height: 28px;n    border-radius: 6px;n    display: flex; align-items: center; justify-content: center;n  }n  .icon-blue { background: var(--color-soft-blue); color: var(--color-primary); }n  .icon-green { background: #DCFCE7; color: #16A34A; }n  .icon-amber { background: #FEF3C7; color: #B45309; }n  .badge {n    display: inline-block;n    font-size: 10px; font-weight: 600;n    padding: 2px 6px; border-radius: var(--radius-full);n    background: #DCFCE7; color: #15803D;n  }n  .mini-card-label { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--color-headline); }n  .mini-card-body { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--color-muted); }nn  .mini-list-head {n    display: flex; align-items: center; gap: 8px;n  }n  .mini-list-head span:last-child { font-size: 12px; font-weight: 600; color: var(--color-headline); }n  .mini-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }n  .mini-list li {n    display: flex; align-items: flex-start; gap: 8px;n    font-size: 11px; color: var(--color-body);n  }n  .mini-list li svg { color: var(--color-primary); margin-top: 2px; width: 12px; height: 12px; flex-shrink: 0; }nn  /* ========================================================n     AUDIENCE STRIPn     ======================================================== */n  .audience-strip {n    background: #fff;n    border-top: 1px solid var(--color-border);n    border-bottom: 1px solid var(--color-border);n  }n  .audience-strip .inner { padding: 40px 0; }n  .audience-strip p.title {n    text-align: center;n    font-size: 13px; font-weight: 600;n    letter-spacing: 0.18em; text-transform: uppercase;n    color: var(--color-primary);n  }n  .audience-strip .row {n    margin-top: 24px;n    display: flex; flex-wrap: wrap; justify-content: center;n    gap: 20px 40px;n  }n  .audience-strip .item { display: flex; align-items: center; gap: 10px; color: var(--color-body); font-weight: 600; }n  .audience-strip .item-icon {n    width: 36px; height: 36px; border-radius: 8px;n    background: var(--color-hero-bg);n    border: 1px solid var(--color-soft-blue);n    color: var(--color-primary);n    display: flex; align-items: center; justify-content: center;n  }nn  /* ========================================================n     PROBLEM SECTIONn     ======================================================== */n  .problem { background: var(--color-hero-bg); padding: 96px 0; }n  @media (min-width: 1024px) { .problem { padding: 128px 0; } }n  .problem .grid {n    display: grid; grid-template-columns: 1fr; gap: 48px;n  }n  @media (min-width: 1024px) {n    .problem .grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: flex-start; }n  }n  .problem h2 {n    margin-top: 20px;n    font-size: 32px; font-weight: 700; line-height: 1.1;n  }n  @media (min-width: 768px) { .problem h2 { font-size: 40px; } }n  @media (min-width: 1024px) { .problem h2 { font-size: 48px; } }n  .problem .steps { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }n  .problem .steps li { display: flex; align-items: flex-start; gap: 12px; color: var(--color-body); }n  .problem .step-icon {n    margin-top: 2px;n    width: 24px; height: 24px;n    border-radius: 50%;n    background: var(--color-primary); color: #fff;n    display: flex; align-items: center; justify-content: center;n    flex-shrink: 0;n  }n  .problem .step-icon svg { width: 14px; height: 14px; }n  .problem .steps li span:last-child { font-size: 17px; }nn  .problem .compare {n    display: grid;n    grid-template-columns: 1fr;n    gap: 20px;n    align-items: center;n  }n  @media (min-width: 640px) {n    .problem .compare { grid-template-columns: 1fr auto 1fr; }n  }n  .pain-card {n    border-radius: var(--radius-lg);n    background: #fff;n    border: 1px solid var(--color-border);n    padding: 24px;n    box-shadow: var(--shadow-sm);n  }n  .pain-card ul { display: flex; flex-direction: column; gap: 16px; }n  .pain-card li { display: flex; align-items: center; gap: 12px; }n  .pain-icon {n    width: 36px; height: 36px;n    border-radius: 8px;n    background: var(--color-hero-bg);n    color: var(--color-primary);n    display: flex; align-items: center; justify-content: center;n    flex-shrink: 0;n  }n  .pain-card span.label { font-weight: 500; color: var(--color-body); }nn  .solution-card {n    border-radius: var(--radius-lg);n    background: var(--color-soft-blue);n    border: 1px solid #BFDBFE;n    padding: 24px;n    box-shadow: var(--shadow-sm);n  }n  .solution-icon {n    width: 40px; height: 40px;n    border-radius: 50%;n    background: var(--color-primary); color: #fff;n    display: flex; align-items: center; justify-content: center;n    box-shadow: var(--shadow-sm);n  }n  .solution-card p {n    margin-top: 16px;n    font-size: 17px; line-height: 1.6;n    color: var(--color-headline);n  }n  .solution-card strong { font-weight: 700; }nn  /* Hand-drawn arrow (pure SVG draw-in via stroke-dasharray) */n  .hd-arrow {n    width: 100px; height: 40px;n    overflow: visible;n    display: block;n    margin: 0 auto;n  }n  .hd-arrow path {n    stroke: var(--color-primary);n    stroke-width: 2.8;n    stroke-linecap: round;n    stroke-linejoin: round;n    fill: none;n    stroke-dasharray: 220;n    stroke-dashoffset: 220;n    animation: arrow-draw 1.1s ease-out .2s forwards;n  }n  @keyframes arrow-draw { to { stroke-dashoffset: 0; } }n  .hd-arrow-vertical { transform: rotate(90deg); }nn  /* ========================================================n     HOW IT WORKSn     ======================================================== */n  .how { background: #fff; padding: 96px 0; }n  @media (min-width: 1024px) { .how { padding: 128px 0; } }n  .section-head { text-align: center; max-width: 640px; margin: 0 auto; }n  .section-head h2 {n    margin-top: 20px;n    font-size: 32px; font-weight: 700;n  }n  @media (min-width: 768px) { .section-head h2 { font-size: 40px; } }n  @media (min-width: 1024px) { .section-head h2 { font-size: 48px; } }n  .section-head p {n    margin-top: 16px;n    font-size: 18px;n    color: var(--color-muted);n  }n  .how .steps {n    margin-top: 64px;n    display: grid;n    grid-template-columns: 1fr;n    gap: 24px;n    align-items: stretch;n  }n  @media (min-width: 768px) {n    .how .steps { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; }n  }n  .step-card {n    border-radius: var(--radius-lg);n    background: #fff;n    border: 1px solid var(--color-border);n    padding: 28px;n    box-shadow: var(--shadow-sm);n    transition: transform .2s, box-shadow .2s;n  }n  .step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }n  .step-head { display: flex; align-items: center; gap: 12px; }n  .step-num {n    width: 40px; height: 40px; border-radius: 50%;n    background: var(--color-primary); color: #fff;n    display: flex; align-items: center; justify-content: center;n    font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;n  }n  .step-icon-wrap {n    width: 40px; height: 40px; border-radius: 8px;n    background: var(--color-soft-blue); color: var(--color-primary);n    display: flex; align-items: center; justify-content: center;n  }n  .step-card h3 { margin-top: 24px; font-size: 20px; font-weight: 700; }n  @media (min-width: 768px) { .step-card h3 { font-size: 22px; } }n  .step-card p { margin-top: 8px; color: var(--color-muted); line-height: 1.6; }n  .how .arrow-cell {n    display: none;n    align-items: center;n    justify-content: center;n  }n  @media (min-width: 768px) { .how .arrow-cell { display: flex; } }nn  /* ========================================================n     USE CASES / AUDIENCE CARDSn     ======================================================== */n  .use-cases { background: var(--color-bg); padding: 96px 0; }n  @media (min-width: 1024px) { .use-cases { padding: 128px 0; } }n  .use-cases .cards {n    margin-top: 56px;n    display: grid;n    grid-template-columns: 1fr;n    gap: 20px;n  }n  @media (min-width: 768px) { .use-cases .cards { grid-template-columns: 1fr 1fr; } }n  @media (min-width: 1280px) { .use-cases .cards { grid-template-columns: repeat(4, 1fr); } }n  .use-card {n    border-radius: var(--radius-lg);n    background: #fff;n    border: 1px solid var(--color-border);n    padding: 28px;n    box-shadow: var(--shadow-sm);n    transition: transform .2s, box-shadow .2s;n  }n  .use-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }n  .use-card-icon {n    width: 48px; height: 48px; border-radius: 12px;n    background: var(--color-soft-blue); color: var(--color-primary);n    display: flex; align-items: center; justify-content: center;n    transition: background .2s, color .2s;n  }n  .use-card:hover .use-card-icon { background: var(--color-primary); color: #fff; }n  .use-card h3 { margin-top: 24px; font-size: 20px; font-weight: 700; }n  .use-card p { margin-top: 8px; color: var(--color-muted); line-height: 1.6; }n  .use-card blockquote {n    margin: 20px 0 0 0;n    padding: 20px 0 0 0;n    border-top: 1px solid var(--color-border);n    font-size: 14px;n    font-style: italic;n    color: var(--color-body);n    line-height: 1.6;n  }nn  /* ========================================================n     PRICINGn     ======================================================== */n  .pricing {n    background: #fff;n    padding: 96px 0;n    border-top: 1px solid var(--color-border);n  }n  @media (min-width: 1024px) { .pricing { padding: 128px 0; } }n  .pricing .tiers {n    margin-top: 56px;n    display: grid;n    grid-template-columns: 1fr;n    gap: 24px;n    align-items: stretch;n  }n  @media (min-width: 768px) { .pricing .tiers { grid-template-columns: repeat(3, 1fr); } }n  .tier {n    position: relative;n    display: flex; flex-direction: column;n    border-radius: var(--radius-lg);n    border: 1px solid var(--color-border);n    background: #fff;n    padding: 32px;n    box-shadow: var(--shadow-sm);n    transition: transform .2s, box-shadow .2s;n  }n  .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }n  .tier.popular {n    border-color: var(--color-primary);n    background: #F8FBFF;n    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);n  }n  @media (min-width: 768px) { .tier.popular { transform: scale(1.02); } }n  .tier-badge {n    position: absolute; top: -12px; left: 50%;n    transform: translateX(-50%);n    display: inline-flex; align-items: center; gap: 6px;n    background: var(--color-primary); color: #fff;n    font-size: 12px; font-weight: 600;n    padding: 5px 14px; border-radius: var(--radius-full);n    box-shadow: var(--shadow-sm);n    white-space: nowrap;n  }n  .tier h3 { font-size: 26px; font-weight: 700; }n  .tier .tag { margin-top: 4px; font-size: 14px; color: var(--color-muted); }n  .tier .price-row { margin-top: 24px; display: flex; align-items: baseline; gap: 8px; }n  .tier .price {n    font-family: 'Archivo', sans-serif;n    font-size: 40px; font-weight: 800; letter-spacing: -0.02em;n    color: var(--color-headline);n  }n  @media (min-width: 1024px) { .tier .price { font-size: 48px; } }n  .tier .per { font-size: 14px; color: var(--color-muted); }n  .tier .free { margin-top: 4px; font-size: 14px; font-weight: 500; color: #16A34A; }n  .tier ul {n    margin-top: 28px;n    flex: 1;n    display: flex; flex-direction: column; gap: 12px;n  }n  .tier ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-body); }n  .tick {n    margin-top: 2px;n    width: 20px; height: 20px;n    border-radius: 50%;n    background: var(--color-soft-blue); color: var(--color-primary);n    display: flex; align-items: center; justify-content: center;n    flex-shrink: 0;n  }n  .tier.popular .tick { background: var(--color-primary); color: #fff; }n  .tick svg { width: 12px; height: 12px; }n  .tier .btn { margin-top: 32px; }nn  /* ========================================================n     DARK CTAn     ======================================================== */n  .dark-cta { background: var(--color-bg); padding-bottom: 96px; }n  .dark-cta .card {n    position: relative;n    overflow: hidden;n    border-radius: 24px;n    background: var(--color-cta-dark);n    padding: 40px;n  }n  @media (min-width: 1024px) { .dark-cta .card { padding: 64px; } }n  .dark-cta .dots {n    position: absolute; inset: 0;n    opacity: 0.18;n    background-image: radial-gradient(circle at 1px 1px, rgba(219,234,254,.4) 1px, transparent 0);n    background-size: 26px 26px;n    pointer-events: none;n  }n  .dark-cta .row {n    position: relative;n    display: grid;n    grid-template-columns: 1fr;n    gap: 40px;n    align-items: center;n  }n  @media (min-width: 1024px) {n    .dark-cta .row { grid-template-columns: 7fr 5fr; }n  }n  .dark-cta h2 {n    color: #fff;n    font-size: 32px; font-weight: 700; line-height: 1.1;n  }n  @media (min-width: 768px) { .dark-cta h2 { font-size: 40px; } }n  @media (min-width: 1024px) { .dark-cta h2 { font-size: 48px; } }n  .dark-cta .sub { margin-top: 16px; font-size: 17px; color: #CBD5E1; max-width: 560px; }n  .dark-cta .ctas {n    display: flex; flex-direction: column; gap: 12px;n  }n  @media (min-width: 640px) {n    .dark-cta .ctas { flex-direction: row; justify-content: flex-end; }n  }nn  /* ========================================================n     FOOTERn     ======================================================== */n  .site-footer {n    background: var(--color-bg);n    border-top: 1px solid var(--color-border);n  }n  .site-footer .inner { padding: 64px 0; }n  .site-footer .grid {n    display: grid;n    grid-template-columns: 1fr 1fr;n    gap: 40px;n  }n  @media (min-width: 640px) {n    .site-footer .grid { grid-template-columns: repeat(4, 1fr); }n  }n  .site-footer .brand-col { grid-column: span 2; }n  @media (min-width: 640px) { .site-footer .brand-col { grid-column: span 1; } }n  .site-footer .brand-col p {n    margin-top: 16px;n    font-size: 14px;n    color: var(--color-muted);n    line-height: 1.6;n    max-width: 320px;n  }n  .site-footer h4 {n    font-family: 'Archivo', sans-serif;n    font-weight: 700;n    color: var(--color-headline);n    font-size: 16px;n  }n  .site-footer ul.links { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }n  .site-footer ul.links a {n    font-size: 14px;n    color: var(--color-muted);n    transition: color .2s;n  }n  .site-footer ul.links a:hover { color: var(--color-primary); }n  .site-footer .bottom {n    margin-top: 48px;n    padding-top: 32px;n    border-top: 1px solid var(--color-border);n    display: flex; flex-direction: column; align-items: center;n    justify-content: space-between; gap: 16px;n  }n  @media (min-width: 640px) { .site-footer .bottom { flex-direction: row; } }n  .site-footer .bottom p { font-size: 14px; color: var(--color-muted); }n  .site-footer .bottom .legal { display: flex; align-items: center; gap: 20px; font-size: 14px; color: var(--color-muted); }n  .site-footer .bottom .legal a:hover { color: var(--color-primary); }nnn/* u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550n   HEADER u2014 pure CSS sticky (no Elementor Pro JS)n   u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550u2550 */nn/* 1. The <header> wrapper spans full viewport width */n.elementor-location-header {n  position: sticky;n  top: 0;n  left: 0;n  right: 0;n  width: 100%;n  z-index: 9999;n  display: block !important;n  margin: 0 !important;n  padding: 0 !important;n}nn/* 2. The Elementor section inside is naturally 100% of the wrapper */n.prepl-site-header {n  width: 100% !important;n  margin: 0 !important;n  background: rgba(255,255,255,0.8);n  backdrop-filter: blur(12px);n  -webkit-backdrop-filter: blur(12px);n  border-bottom: 1px solid rgba(226,232,240,0.7);n}nn/* 3. Inner container: centered content at max 1200px with horizontal padding */n.prepl-site-header > .elementor-container {n  max-width: 1200px !important;n  width: 100% !important;n  margin-left: auto !important;n  margin-right: auto !important;n  padding-left: 48px !important;n  padding-right: 48px !important;n  box-sizing: border-box !important;n  min-height: 68px;n  display: flex;n  align-items: center;n}nn/* u2500u2500 Footer container: centred, max-width 1200px (matches header) u2500u2500u2500u2500u2500u2500u2500u2500u2500u2500u2500 */n.elementor-location-footer {n  width: 100%;n  display: block !important;n  margin: 0 !important;n  padding: 0 !important;n}n.elementor-location-footer .elementor-section {n  width: 100% !important;n  margin-left: 0 !important;n  margin-right: 0 !important;n}n.elementor-location-footer .elementor-container {n  max-width: 1200px !important;n  width: 100% !important;n  margin-left: auto !important;n  margin-right: auto !important;n  padding-left: 48px !important;n  padding-right: 48px !important;n  box-sizing: border-box !important;n}/* End custom CSS */