:root {
      --ink: #171923;
      --muted: #686b7b;
      --line: #ececf3;
      --purple: #7627f4;
      --pink: #f522d7;
      --cyan: #00c7f4;
      --blue: #2455ff;
      --soft: #f8f7ff;
      --gradient: linear-gradient(115deg, #00c8f4 0%, #2855ff 28%, #9227ff 58%, #ed19d5 78%, #ff5e83 100%);
      --shadow: 0 24px 70px rgba(41, 31, 93, .14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; color: var(--ink); background: #fff;
      font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55; -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1160px, calc(100% - 44px)); margin: 0 auto; }
    .nav { display:flex; align-items:center; justify-content:space-between; padding: 22px 0; gap: 20px; }
    .brand { display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.3rem; letter-spacing:-.045em; }
    .brand img { width:43px; height:43px; border-radius:13px; object-fit:cover; }
    .nav-links { display:flex; align-items:center; gap:30px; color:#55586a; font-size:.93rem; }
    .nav-links a:hover { color:var(--purple); }
    .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 19px; border-radius:14px; font-weight:700; font-size:.94rem; transition:transform .2s, box-shadow .2s; }
    .button:hover { transform:translateY(-2px); }
    .button-dark { background:#171923; color:white; box-shadow:0 10px 24px #1719231c; }
    .button-outline { border:1px solid #e4e3ed; background:white; }
    .hero { position:relative; overflow:hidden; padding:74px 0 90px; }
    .hero:before { content:""; position:absolute; width:600px; height:600px; right:-170px; top:-100px; border-radius:50%; background:radial-gradient(circle, #f4d9ff 0%, #f9efff 38%, transparent 70%); pointer-events:none; }
    .hero:after { content:""; position:absolute; width:440px; height:440px; left:-230px; bottom:-220px; border-radius:50%; background:radial-gradient(circle, #d8f8ff 0%, transparent 70%); pointer-events:none; }
    .hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:54px; }
    .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #eee8ff; border-radius:999px; background:#fff9; color:#6b3bd4; font-weight:700; font-size:.78rem; letter-spacing:.025em; }
    .eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--gradient); }
    h1 { margin:22px 0 20px; font-size:clamp(3rem, 5.7vw, 5.25rem); line-height:1.02; letter-spacing:-.075em; max-width:650px; }
    .gradient-text { color:transparent; background:var(--gradient); -webkit-background-clip:text; background-clip:text; }
    .hero-copy { max-width:540px; color:var(--muted); font-size:1.1rem; margin:0 0 29px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
    .store-note { margin-top:15px; font-size:.8rem; color:#898b99; }
    .visual { position:relative; min-height:510px; display:flex; align-items:center; justify-content:center; }
    .orb { position:absolute; width:350px; height:350px; border-radius:50%; background:var(--gradient); filter:blur(1px); opacity:.13; }
    .spark { position:absolute; border-radius:50%; background:var(--gradient); opacity:.75; }
    .spark.one { width:13px;height:13px;right:13%;top:15%; }
    .spark.two { width:8px;height:8px;left:14%;bottom:20%; }
    .phone { position:absolute; width:218px; height:438px; border:7px solid #171923; border-radius:34px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
    .phone:before { content:""; position:absolute; z-index:2; top:7px; left:50%; transform:translateX(-50%); width:74px; height:17px; background:#171923; border-radius:0 0 12px 12px; }
    .phone-main { z-index:2; transform:translate(25px, 8px) rotate(5deg); }
    .phone-back { z-index:1; transform:translate(-112px, 30px) rotate(-9deg) scale(.91); opacity:.92; }
    .phone-screen { height:100%; padding:34px 13px 14px; background:linear-gradient(180deg,#fff 0%,#fbf8ff 100%); display:flex; flex-direction:column; }
    .screen-top { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:800; color:#222333; margin-bottom:13px; }
    .screen-logo { display:flex; align-items:center; gap:5px; }
    .screen-logo img { width:18px;height:18px;border-radius:5px; }
    .screen-icon { width:23px;height:23px;border-radius:8px;background:#f1e8ff; }
    .screen-greeting { font-size:8px; color:#777789; margin-bottom:2px; }
    .screen-title { font-size:17px; font-weight:850; line-height:1.12; letter-spacing:-.7px; margin-bottom:11px; }
    .search-pill { padding:8px 10px; border:1px solid #eeeaf6; background:#fff; color:#9998a7; font-size:8px; border-radius:10px; margin-bottom:12px; }
    .quote-card { border-radius:15px; padding:16px 13px; min-height:155px; color:#fff; background:linear-gradient(145deg,#3555ff,#9a28f6 58%,#f32acb); box-shadow:0 10px 20px #812bf52b; display:flex; flex-direction:column; justify-content:space-between; }
    .quote-mark { font-family:Georgia,serif; font-size:37px; line-height:.7; opacity:.85; }
    .quote-text { font-family:Georgia,serif; font-size:13px; line-height:1.38; font-weight:700; }
    .quote-author { font-size:8px; opacity:.88; }
    .section-label { margin:15px 0 8px; font-size:9px; font-weight:800; }
    .mini-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
    .mini-tile { border:1px solid #eeeaf5; border-radius:10px; padding:9px 8px; font-size:8px; background:white; }
    .mini-tile b { display:block; font-size:9px; margin-top:3px; }
    .screen-bottom { display:flex; justify-content:space-around; margin-top:auto; padding-top:12px; font-size:7px; color:#777789; }
    .screen-bottom span:first-child { color:#7a2ef5; font-weight:800; }
    .image-placeholder { height:100%; border:1.5px dashed #c8b5fa; border-radius:24px; background:linear-gradient(145deg,#fbf8ff,#f3faff); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#8067b6; padding:16px; }
    .image-placeholder strong { font-size:12px; }
    .image-placeholder span { font-size:9px; margin-top:5px; color:#9a8db5; }
    .features { padding:80px 0 88px; background:#fbfaff; border-top:1px solid #f2effb; border-bottom:1px solid #f2effb; }
    .section-head { max-width:650px; margin:0 auto 42px; text-align:center; }
    .section-head h2 { margin:0 0 12px; font-size:clamp(2rem,4vw,3.15rem); line-height:1.1; letter-spacing:-.06em; }
    .section-head p { margin:0; color:var(--muted); }
    .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .feature-card { padding:27px; border:1px solid #efedf7; border-radius:22px; background:white; box-shadow:0 8px 28px #24145b06; }
    .feature-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#e0faff,#f3dfff); color:#7529ed; margin-bottom:22px; }
    .feature-icon svg { width:23px;height:23px; }
    .feature-card h3 { margin:0 0 8px; font-size:1.15rem; letter-spacing:-.025em; }
    .feature-card p { margin:0; color:var(--muted); font-size:.94rem; }
    .showcase { padding:86px 0; }
    .showcase-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
    .showcase-copy h2 { font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.06em; line-height:1.08; margin:0 0 17px; }
    .showcase-copy p { color:var(--muted); margin:0 0 24px; }
    .check-list { display:grid; gap:12px; padding:0; margin:0 0 26px; list-style:none; color:#4d5061; font-size:.94rem; }
    .check-list li { display:flex; gap:10px; align-items:center; }
    .check { flex:0 0 20px; width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:white;background:var(--gradient);font-size:12px;font-weight:900; }
    .mockup-row { display:flex; justify-content:center; align-items:center; gap:20px; min-height:410px; }
    .mockup-row .phone { position:relative; width:180px; height:365px; border-width:6px; border-radius:29px; }
    .mockup-row .phone:before { width:62px;height:14px;top:6px; }
    .mockup-row .phone:first-child { transform:rotate(-5deg) translateY(14px); }
    .mockup-row .phone:last-child { transform:rotate(5deg) translateY(-10px); }
    .mockup-row .phone-screen { padding:29px 10px 11px; }
    .mockup-row .quote-card { min-height:130px; }
    .mockup-row .quote-text { font-size:11px; }
    .cta { padding:0 0 85px; }
    .cta-panel { position:relative; overflow:hidden; border-radius:30px; padding:55px 35px; text-align:center; color:white; background:var(--gradient); }
    .cta-panel:before,.cta-panel:after { content:""; position:absolute; border:1px solid #ffffff36; border-radius:50%; width:270px;height:270px; }
    .cta-panel:before { top:-170px;left:-70px; }
    .cta-panel:after { bottom:-210px;right:-30px;width:360px;height:360px; }
    .cta-panel h2 { position:relative; z-index:1; font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.06em; margin:0 0 13px; }
    .cta-panel p { position:relative; z-index:1; margin:0 auto 25px; max-width:560px; color:#ffffffdf; }
    .cta-panel .button { position:relative; z-index:1; background:white; color:#242034; }
    footer { padding:27px 0 35px; border-top:1px solid var(--line); color:#77798a; font-size:.85rem; }
    .footer-links a:hover { color:var(--purple); }

    .subpage-hero { padding: 62px 0 30px; text-align:center; background:radial-gradient(circle at 50% 0%, #f7eaff 0, #fff 65%); }
    .subpage-hero h1 { max-width:900px; margin:16px auto; font-size:clamp(2.5rem,5vw,4rem); }
    .subpage-hero p { max-width:650px; margin:0 auto; color:var(--muted); }
    .legal-content { width:min(820px, calc(100% - 40px)); margin:0 auto; padding:32px 0 80px; }
    .legal-content h2 { margin:30px 0 8px; font-size:1.25rem; letter-spacing:-.025em; }
    .legal-content p, .legal-content li { color:#5f6272; }
    .legal-content a { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
    .contact-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; margin-top:28px; }
    .contact-card { padding:26px; border:1px solid #efedf7; border-radius:22px; background:white; }
    .contact-card h2 { margin:0 0 8px; }
    .contact-card p { color:var(--muted); }
    .contact-form { display:grid; gap:14px; }
    .contact-form label { display:grid; gap:6px; color:#4d5061; font-size:.9rem; font-weight:650; }
    .contact-form input, .contact-form textarea { width:100%; padding:12px 13px; border:1px solid #e5e2ee; border-radius:12px; font:inherit; color:var(--ink); background:#fff; }
    .contact-form textarea { min-height:130px; resize:vertical; }
    .contact-form input:focus, .contact-form textarea:focus { outline:2px solid #bba0ff; border-color:transparent; }
    .form-note { font-size:.82rem; color:#888a99; }
    @media(max-width:700px) { .contact-layout { grid-template-columns:1fr; } }



    .visual .phone-back { z-index:1; }
    .visual .phone-main { z-index:2; }
    .phone-back .image-placeholder { cursor:default; }
    .app-screenshot { width:100%; height:100%; object-fit:cover; display:block; border-radius:18px; }

    .phone-screen:has(> img.app-screenshot) { padding:0; overflow:hidden; background:#fff; }
    .phone-screen > img.app-screenshot { width:100%; height:100%; min-height:100%; object-fit:cover; display:block; border-radius:0; }
    .phone-back .phone-screen { padding:0; }
    .mockup-row .phone-screen:has(> img.app-screenshot) { padding:0; }


    @keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes float-phone { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
    @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .hero-grid > div:first-child { animation: fade-up .8s ease-out both; }
    .visual { animation: fade-up .9s .12s ease-out both; }
    .phone-main { animation: float-phone 5s ease-in-out 1s infinite; }
    .phone-back { animation: float-phone 6s ease-in-out 1.4s infinite reverse; }
    .gradient-text { background-size: 200% 200%; animation: gradient-shift 7s ease-in-out infinite; }
    .feature-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .feature-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(41,31,93,.10); border-color:#e0d4ff; }
    .button { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
    .button-dark:hover { box-shadow: 0 14px 30px rgba(23,25,35,.22); }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

    @media (max-width: 900px) {
      .hero { padding-top:48px; }
      .hero-grid { grid-template-columns:1fr; gap:15px; }
      .hero-copy { max-width:650px; }
      .visual { min-height:475px; }
      .showcase-grid { grid-template-columns:1fr; gap:30px; }
      .showcase-copy { max-width:650px; }
    }
    @media (max-width: 640px) {
      .container { width:min(100% - 32px, 520px); }
      .nav { padding:15px 0; }
      .brand { font-size:1.12rem; }
      .brand img { width:37px;height:37px; }
      .nav-links { display:none; }
      .nav .button { padding:10px 13px; font-size:.82rem; }
      .hero { padding:48px 0 58px; }
      h1 { font-size:clamp(2.8rem,13vw,4rem); }
      .hero-copy { font-size:1rem; }
      .visual { min-height:425px; transform:scale(.92); margin:-5px -15px 0; }
      .phone { width:194px;height:400px; }
      .phone-main { transform:translate(22px,8px) rotate(5deg); }
      .phone-back { transform:translate(-98px,26px) rotate(-9deg) scale(.9); }
      .features,.showcase { padding:60px 0; }
      .feature-grid { grid-template-columns:1fr; }
      .feature-card { padding:23px; }
      .mockup-row { gap:12px; min-height:335px; }
      .mockup-row .phone { width:150px;height:310px;border-width:5px;border-radius:24px; }
      .mockup-row .phone:before { width:52px;height:12px;top:5px; }
      .mockup-row .phone-screen { padding:25px 8px 8px; }
      .mockup-row .quote-card { min-height:110px; padding:12px 10px; }
      .mockup-row .quote-text { font-size:9px; }
      .mockup-row .quote-mark { font-size:30px; }
      .mockup-row .section-label { margin-top:10px; }
      .cta { padding-bottom:55px; }
      .cta-panel { padding:43px 22px; border-radius:24px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { transition:none !important; }
    }
    .contact-email-layout .contact-card { min-height:180px; }
    .contact-email-layout a { overflow-wrap:anywhere; }
    @media(max-width:760px) {
    }


    /* Hide the decorative camera notch on all phone mockups. */
    .phone:before,
    .phone::before,
    .mockup-row .phone:before,
    .mockup-row .phone::before {
      display: none !important;
      content: none !important;
    }
    @media (max-width: 850px) {
      .footer-copyright, .footer-brand
    }


    /* Consistent footer alignment across desktop and mobile */
    .footer-inner {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      width: 100%;
    }
    .footer-copyright {
      justify-self: start;
      text-align: left;
      color: #77798a;
      font-size: .85rem;
      line-height: 1.5;
      white-space: normal;
    }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      justify-self: center;
      gap: 8px;
      white-space: nowrap;
      line-height: 1;
      margin: 0;
    }
    .footer-brand img {
      display: block;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      object-fit: contain;
      margin: 0;
    }
    .footer-links {
      display: flex;
      justify-self: end;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px 18px;
      text-align: right;
      line-height: 1.5;
    }
    @media (max-width: 760px) {
      .footer-inner {
        display: flex !important;
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        text-align: center;
        gap: 12px;
      }
      .footer-copyright,
      .footer-brand,
      .footer-links {
        justify-self: auto;
        text-align: center;
      }
      .footer-brand { order: 1; }
      .footer-links { order: 2; justify-content: center; }
      .footer-copyright { order: 3; }
    }


    @media (max-width: 640px) {
      .hero-grid { gap: 8px; }
      .visual {
        width: 100%;
        min-height: 425px;
        margin: 0 auto;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
      }
      .visual .phone-back {
        left: 50%;
        margin-left: -98px;
        transform: translateX(-50%) rotate(-9deg) scale(.90);
      }
      .visual .phone-main {
        left: 50%;
        margin-left: 23px;
        transform: translateX(-50%) rotate(5deg);
      }
      .visual .phone-main.phone-image {
        margin-left: 0;
      }
    }


    /* Sticky navigation stays visible while scrolling */
    header.nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, .94);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(236, 236, 243, .8);
    }


    /* Keep footer content comfortably inside the viewport edges */
    footer { padding-left: 18px; padding-right: 18px; }
    footer .container { width: min(1160px, 100%); }
    @media (max-width: 640px) {
      footer { padding-left: 16px; padding-right: 16px; }
      footer .footer-inner { padding-left: 4px; padding-right: 4px; }
      .footer-links { gap: 8px 16px; }
    }


    @media (max-width: 640px) {
      .hero-grid { grid-template-columns: minmax(0, 1fr); }
      .visual {
        width: 100%;
        min-width: 0;
        min-height: 425px;
        margin: 0;
        padding: 0;
        transform: none !important;
        display: block;
        position: relative;
        left: auto;
        right: auto;
        overflow: hidden;
      }
      .visual .orb { left: 50%; transform: translateX(-50%); }
      .visual .phone-back {
        position: absolute;
        left: calc(50% - 45px);
        top: 22px;
        margin: 0;
        transform: translateX(-50%) rotate(-9deg) scale(.86) !important;
      }
      .visual .phone-main {
        position: absolute;
        left: calc(50% + 43px);
        top: 0;
        margin: 0;
        transform: translateX(-50%) rotate(5deg) !important;
      }
      .visual .phone-main.phone-image {
        left: 50%;
        transform: translateX(-50%) rotate(5deg) !important;
      }
      .visual .spark.one { right: 12%; }
      .visual .spark.two { left: 12%; }
    }
    @media (max-width: 380px) {
      .visual { min-height: 390px; }
      .visual .phone-back {
        left: calc(50% - 34px);
        transform: translateX(-50%) rotate(-9deg) scale(.76) !important;
        transform-origin: top center;
      }
      .visual .phone-main {
        left: calc(50% + 34px);
        transform: translateX(-50%) rotate(5deg) scale(.88) !important;
        transform-origin: top center;
      }
      .visual .phone-main.phone-image {
        left: 50%;
        transform: translateX(-50%) rotate(5deg) scale(.88) !important;
      }
    }


    /* Final mobile hero fixes: keep the phone mockups clear of the text and centered. */
    @media (max-width: 640px) {
      .hero-actions {
        justify-content: center;
        width: 100%;
      }

      .hero-actions .button {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-grid > div:first-child {
        text-align: center;
      }

      .hero-grid > div:first-child .eyebrow,
      .hero-grid > div:first-child .hero-copy,
      .hero-grid > div:first-child .store-note {
        margin-left: auto;
        margin-right: auto;
      }

      .visual {
        width: 100%;
        min-height: 455px;
        margin: 14px auto 0;
        padding-top: 16px;
        overflow: visible;
        transform: none !important;
        position: relative;
        left: auto;
        right: auto;
      }

      .visual .phone-back {
        left: calc(50% - 43px);
        top: 28px;
        margin: 0;
        transform: translateX(-50%) rotate(-9deg) scale(.82) !important;
        transform-origin: top center;
      }

      .visual .phone-main {
        left: calc(50% + 43px);
        top: 8px;
        margin: 0;
        transform: translateX(-50%) rotate(5deg) scale(.92) !important;
        transform-origin: top center;
      }

      .visual .phone-main.phone-image {
        left: 50%;
        transform: translateX(-50%) rotate(5deg) scale(.92) !important;
      }
    }

    @media (max-width: 380px) {
      .visual {
        min-height: 410px;
        margin-top: 12px;
      }

      .visual .phone-back {
        left: calc(50% - 35px);
        transform: translateX(-50%) rotate(-9deg) scale(.74) !important;
      }

      .visual .phone-main {
        left: calc(50% + 35px);
        transform: translateX(-50%) rotate(5deg) scale(.82) !important;
      }

      .visual .phone-main.phone-image {
        left: 50%;
        transform: translateX(-50%) rotate(5deg) scale(.82) !important;
      }
    }


/* Shared component loading and page transitions. Content stays visible while PHP fragments load. */
#site-header, #site-footer { transition: opacity .22s ease; }
#site-header:not(.components-ready), #site-footer:not(.components-ready) { opacity: 0; }
#site-header.components-ready, #site-footer.components-ready { opacity: 1; }
html.page-enter body { animation: qv-page-in .28s ease both; }
html.page-leaving body { opacity: 0; transition: opacity .18s ease; }
@keyframes qv-page-in { from { opacity: .0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.page-enter body { animation: none; }
  html.page-leaving body { opacity: 1; transition: none; }
  #site-header, #site-footer { transition: none; }
}
#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(236, 236, 243, .8);
}

#site-header header.nav {
    position: relative;
    background: transparent;
    border: none;
    backdrop-filter: none;
}