@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

/* ==========================================================================
   Wiza design system tokens — inlined from
   _ds/wiza-design-system-bdaef8a6-aee3-4e16-b6b2-bdd41da2f612/tokens/*.css
   plus that folder's styles.css (which only @imports the token files).
   ========================================================================== */

/* --- tokens/fonts.css ---------------------------------------------------- */
/* Britti Sans is a licensed typeface and was not supplied. Upload the WOFF2 files and add an
   @font-face rule here; --font-britti-sans already lists 'Britti Sans' first, so it takes over
   the moment the file exists. Until then headings render from the generic fallback stack. */
:root{--font-britti-sans:'Britti Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-display:var(--font-britti-sans);--font-body:var(--font-inter)}

/* --- tokens/colors.css --------------------------------------------------- */
:root{
/* Base palette — violet */
--color-deep-iris:#26114a;--color-plum-velvet:#312749;--color-royal-amethyst:#3e0079;--color-mist-violet:#edecff;--color-lavender-wash:#b99aff;--color-twilight-beam:#cf8aff;
/* Base palette — neutrals */
--color-canvas:#ffffff;--color-paper:#f6f7fa;--color-mist:#e6e2e3;--color-smoke:#c1c7cf;--color-ash:#9491a1;--color-slate:#615e6e;--color-charcoal:#333333;--color-carbon:#222222;--color-ink:#000000;
/* Gradients */
--gradient-lavender-wash:linear-gradient(90deg,rgb(185,154,255),rgb(125,67,255) 10%,rgba(125,67,255,0));
--gradient-twilight-beam:linear-gradient(to right,rgb(207,138,255),rgb(255,102,193),rgb(255,173,116),rgb(170,129,255));
--gradient-section-tint:linear-gradient(180deg,#ffffff 0%,#edecff 100%);
--gradient-hero:linear-gradient(180deg,#ffffff 0%,#edecff 100%);
--gradient-logo-mark:linear-gradient(135deg,#b99aff,#7d43ff);
/* Semantic — text */
--text-primary:var(--color-deep-iris);--text-heading:var(--color-deep-iris);--text-title:var(--color-plum-velvet);--text-body-color:var(--color-charcoal);--text-secondary:var(--color-slate);--text-muted:var(--color-ash);--text-link:var(--color-royal-amethyst);--text-on-dark:var(--color-canvas);--text-disabled:var(--color-smoke);
/* Semantic — surfaces */
--surface-canvas:#ffffff;--surface-paper:#f6f7fa;--surface-mist-violet:#edecff;--surface-lavender-glow:#b99aff;--surface-card:var(--color-canvas);--surface-row-alt:var(--color-paper);--surface-inverse:var(--color-deep-iris);
/* Semantic — lines + interaction */
--border-hairline:var(--color-mist);--border-strong:var(--color-deep-iris);--border-focus:var(--color-royal-amethyst);
--action-filled-bg:var(--color-deep-iris);--action-filled-bg-hover:#1a0b35;--action-filled-fg:var(--color-canvas);
--action-ghost-border:var(--color-deep-iris);--action-ghost-fg:var(--color-deep-iris);--action-ghost-bg-hover:var(--color-mist-violet);
--accent-tag-bg:var(--color-mist-violet);--accent-tag-fg:var(--color-royal-amethyst);--neutral-tag-bg:var(--color-paper);--neutral-tag-fg:var(--color-slate);
/* Status dots used in prospect tables (violet-family only, plus one amber for ratings) */
--status-verified:#3e0079;--status-pending:#b99aff;--status-none:#c1c7cf;--star-amber:#f5b800;
}

/* --- tokens/typography.css ----------------------------------------------- */
:root{
--text-caption:12px;--leading-caption:1.3;
--text-body-sm:14px;--leading-body-sm:1.4;
--text-body:16px;--leading-body:1.5;
--text-subheading:24px;--leading-subheading:1;
--text-heading-sm:32px;--leading-heading-sm:1;
--text-heading-size:40px;--leading-heading:1;
--text-heading-lg:56px;--leading-heading-lg:1;
--text-display:64px;--leading-display:1;
--font-weight-regular:400;--font-weight-medium:500;--font-weight-bold:700;
}

/* --- tokens/spacing.css -------------------------------------------------- */
:root{
--spacing-unit:8px;--spacing-8:8px;--spacing-16:16px;--spacing-24:24px;--spacing-32:32px;--spacing-40:40px;--spacing-48:48px;--spacing-56:56px;--spacing-64:64px;--spacing-96:96px;--spacing-104:104px;--spacing-216:216px;
--page-max-width:1200px;--section-gap:64px;--section-gap-lg:80px;--card-padding:16px;--card-padding-lg:24px;--element-gap:8px;
}

/* --- tokens/radius.css --------------------------------------------------- */
:root{
--radius-sm:2px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--radius-3xl:24px;--radius-full:1440px;
--radius-cards:8px;--radius-icons:8px;--radius-large:24px;--radius-pills:1440px;--radius-inputs:8px;--radius-buttons:8px;
}

/* --- tokens/shadows.css -------------------------------------------------- */
:root{
--shadow-sm:rgba(18,55,105,0.08) 0px 2px 4px 0px,rgba(18,55,105,0.04) 0px 1px 1px 0px,rgba(18,55,105,0.08) 0px 0px 0px 1px;
--shadow-sm-2:rgba(18,55,105,0.08) 0px 2px 4px 0px,rgba(18,55,105,0.04) 0px 1px 1px 0px;
--shadow-sm-3:rgba(47,1,151,0.01) 0px 11px 4px 0px,rgba(47,1,151,0.04) 0px 6px 4px 0px,rgba(47,1,151,0.06) 0px 3px 3px 0px,rgba(47,1,151,0.08) 0px 1px 1px 0px,rgba(47,1,151,0.08) 0px 0px 0px 1px;
--shadow-lg:rgba(14,59,101,0.06) 0px 32px 24px -12px,rgba(14,59,101,0.01) 0px 11px 4px 0px,rgba(14,59,101,0.02) 0px 6px 4px 0px,rgba(14,59,101,0.03) 0px 3px 3px 0px,rgba(14,59,101,0.04) 0px 1px 1px 0px;
--shadow-lg-2:rgba(114,49,255,0.32) 0px -6px 20px 0px inset,rgba(47,1,151,0.12) 0px 11px 12px 0px,rgba(47,1,151,0.12) 0px 3px 3px 0px,rgba(47,1,151,0.12) 0px 1px 1px 0px,rgba(47,1,151,0.08) 0px 0px 0px 1px;
--elevation-card:var(--shadow-lg);--elevation-button:var(--shadow-sm);--elevation-feature:var(--shadow-lg-2);
}

/* --- tokens/base.css ----------------------------------------------------- */
body{margin:0;font-family:var(--font-inter);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-body-color);background:var(--surface-canvas);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-britti-sans);font-weight:var(--font-weight-medium);line-height:1;color:var(--text-heading);margin:0}
h1{font-size:var(--text-heading-lg)}h2{font-size:var(--text-heading-size)}h3{font-size:var(--text-heading-sm)}h4{font-size:var(--text-subheading)}
p{margin:0}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--color-deep-iris);text-decoration:underline}
*,*::before,*::after{box-sizing:border-box}

/* ==========================================================================
   Page styles — carried over verbatim from the canvas <helmet><style> block
   ========================================================================== */
:root{
  --font-britti-sans:'Britti Sans','Plus Jakarta Sans','Noto Sans TC',ui-sans-serif,system-ui,sans-serif;
  --font-inter:'Inter','Noto Sans TC',ui-sans-serif,system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-canvas);font-family:var(--font-inter);color:var(--text-body-color);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--color-deep-iris)}
input,select,textarea{font-family:var(--font-inter)}
html{scrollbar-width:auto;scrollbar-color:#3e0079 #efecf7}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:#efecf7;border-left:1px solid var(--border-hairline)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7d43ff,#3e0079);border:4px solid #efecf7;background-clip:padding-box;border-radius:1440px;min-height:56px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8f5bff,#26114a);border:3px solid #efecf7;background-clip:padding-box}
::-webkit-scrollbar-corner{background:#efecf7}
@keyframes sm-nudge{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,14px,0)}}
@keyframes sm-scan{0%{opacity:.35}50%{opacity:.9}100%{opacity:.35}}
@keyframes sm-vmarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes sm-vmarquee-rev{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes sm-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes sm-marquee-rev{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes sm-aurora-a{0%{transform:translate3d(0,0,0) scale(1)}25%{transform:translate3d(-9vw,7vh,0) scale(1.22)}50%{transform:translate3d(5vw,-6vh,0) scale(.9)}75%{transform:translate3d(-4vw,-11vh,0) scale(1.14)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes sm-aurora-b{0%{transform:translate3d(0,0,0) scale(1.05)}30%{transform:translate3d(8vw,-8vh,0) scale(.86)}55%{transform:translate3d(-7vw,4vh,0) scale(1.3)}80%{transform:translate3d(6vw,9vh,0) scale(1)}100%{transform:translate3d(0,0,0) scale(1.05)}}
@keyframes sm-aurora-hue{0%{filter:blur(56px) hue-rotate(0deg) saturate(1.15)}25%{filter:blur(64px) hue-rotate(-14deg) saturate(1.25)}50%{filter:blur(58px) hue-rotate(10deg) saturate(1.2)}75%{filter:blur(66px) hue-rotate(22deg) saturate(1.25)}100%{filter:blur(56px) hue-rotate(0deg) saturate(1.15)}}
@keyframes sm-aurora-c{0%{transform:translate3d(0,0,0) scale(.95)}28%{transform:translate3d(7vw,9vh,0) scale(1.24)}52%{transform:translate3d(-6vw,-7vh,0) scale(1)}78%{transform:translate3d(4vw,-4vh,0) scale(1.16)}100%{transform:translate3d(0,0,0) scale(.95)}}
@keyframes sm-aurora-d{0%{transform:translate3d(0,0,0) scale(1.1)}24%{transform:translate3d(-8vw,-6vh,0) scale(.9)}58%{transform:translate3d(9vw,8vh,0) scale(1.26)}82%{transform:translate3d(-5vw,5vh,0) scale(1.02)}100%{transform:translate3d(0,0,0) scale(1.1)}}
@keyframes sm-aurora-fade{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
@keyframes sm-aurora-hue-sm{0%{filter:blur(32px) hue-rotate(0deg) saturate(1.3)}25%{filter:blur(36px) hue-rotate(-14deg) saturate(1.4)}50%{filter:blur(33px) hue-rotate(10deg) saturate(1.35)}75%{filter:blur(38px) hue-rotate(22deg) saturate(1.4)}100%{filter:blur(32px) hue-rotate(0deg) saturate(1.3)}}
[data-aurora]{animation:sm-aurora-hue 10s ease-in-out infinite}
@media (max-width:860px){[data-aurora]{animation:sm-aurora-hue-sm 10s ease-in-out infinite;opacity:1}}
@keyframes sm-drift{0%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}100%{transform:translateY(0) rotate(var(--r,0deg))}}
[data-reveal="out"]{opacity:0;transform:translateY(20px)}
[data-reveal]{transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none}*{animation:none!important}}

/* ==========================================================================
   Design-system components rebuilt in plain CSS
   (replaces <x-import ...PillNavButton> and <x-import ...Button>)
   ========================================================================== */
.pill-nav{
  display:inline-flex;align-items:center;gap:4px;padding:8px 16px;
  border-radius:var(--radius-pills);
  font-family:var(--font-inter);font-size:var(--text-body-sm);
  font-weight:var(--font-weight-medium);line-height:1.4;
  color:var(--color-plum-velvet);text-decoration:none;background:transparent;
  transition:background-color .15s ease;
}
.pill-nav:hover,.pill-nav:focus-visible,.pill-nav[aria-current="true"]{
  background:var(--color-mist-violet);color:var(--color-plum-velvet);text-decoration:none;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);
  font-family:var(--font-inter);font-weight:var(--font-weight-medium);line-height:1.2;
  border-radius:var(--radius-buttons);cursor:pointer;white-space:nowrap;width:auto;
  text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-sm{padding:8px 16px;font-size:var(--text-body-sm)}
.btn-md{padding:16px 24px;font-size:var(--text-body)}
.btn-filled{
  background:var(--action-filled-bg);color:var(--action-filled-fg);
  border:1px solid transparent;box-shadow:var(--shadow-sm-2);
}
.btn-filled:hover{background:var(--action-filled-bg-hover);color:var(--action-filled-fg)}
.btn-filled:disabled,.btn-filled[disabled]{background:var(--color-smoke);box-shadow:none;cursor:not-allowed}

/* ==========================================================================
   Hover states that the canvas expressed through its style-hover attribute
   ========================================================================== */
.sm-rail:hover{background:#1a0b35;color:var(--color-canvas)}
.sm-brand-art{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.sm-brand-card:hover .sm-brand-art{transform:translateY(-5px)}
.sm-cta-arrow:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.sm-solid-btn{transition:background-color .15s ease}
.sm-solid-btn:hover{background:#1a0b35}
.sm-form-link:hover{color:var(--color-deep-iris)}