:root {

/* ------------------------------------------
   Color (only variables)
------------------------------------------ */

--color-white: #FFFFFF;
--color-black: #000000;
--color-button-border-1: #ffffff26; /* 0x26 ≈ 15%（實際約 14.9%），接近值 */

/* Primary Palette */
--color-primary-900: #100F74;
--color-primary-800: #1A198C;
--color-primary-700: #2A28AE;
--color-primary-600: #3C3AD0;
--color-primary-500: #5350F2;
--color-primary-400: #7D7BF7;
--color-primary-300: #9896FB;
--color-primary-200: #BBB9FD;
--color-primary-100: #DDDCFE;

/* Neutral Palette */
--color-neutral-900: #020408;
--color-neutral-800: #111113;
--color-neutral-700: #161618;
--color-neutral-600: #252528;
--color-neutral-500: #44444A;
--color-neutral-400: #5B5A64;
--color-neutral-300: #BEBEC8;
--color-neutral-200: #E5E5EC;
--color-neutral-100: #F1F1F5;

/* ------------------------------------------
   Font (Typography)
------------------------------------------ */

/* font weight */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;

/* font size (fluid) */
/* @link https://utopia.fyi/clamp/ */

--fluid-32-56: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); /* h1 */
--fluid-24-56: clamp(1.5rem, 0.7958rem + 3.0047vw, 3.5rem); /* h1, post title */
--fluid-36-48: clamp(2.25rem, 1.9859rem + 1.1268vw, 3rem); /* h2, pricing */
--fluid-24-40: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem); /* h2 */
--fluid-24-32: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); /* h3, pricing */
--fluid-20-24: clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem); /* h3, faq */
--fluid-18-24: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem); /* h3, faq, plan */
--fluid-20-20: clamp(1.25rem, 1.25rem + 0vw, 1.25rem); /* h3, contact */
--fluid-18-20: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem); /* h3, faq */
--fluid-16-20: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem); /* h3 */
--fluid-16-18: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem); /* text, footer */
--fluid-16-16: clamp(1rem, 1rem + 0vw, 1rem); /* text */
--fluid-14-16: clamp(0.875rem, 0.831rem + 0.1878vw, 1rem); /* text, footer */
--fluid-14-14: clamp(0.875rem, 0.875rem + 0vw, 0.875rem); /* menu, button */
--fluid-12-16: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem); /* label */
--fluid-12-12: clamp(0.75rem, 0.75rem + 0vw, 0.75rem); /* label */

/* line height */
--line-height-100: 1;   /* 標題/大字 */
--line-height-110: 1.1;  /* 標題/大字 */
--line-height-120: 1.2;  /* 標題/大字 */
--line-height-133: 1.33;  /* 通用 */
--line-height-140: 1.4;  /* 內文/長文 */
--line-height-150: 1.5;  /* 內文/長文 */
--line-height-normal: normal; /* auto for label */

/* letter spacing */
--letter-spacing-tight-3: -0.03em; /* -3% */
--letter-spacing-tight-2: -0.02em; /* -2% */
--letter-spacing-tight-1: -0.015em; /* -1.5% */
--letter-spacing-0:       0em; /* 預設 */
--letter-spacing-wide-1:  0.01em; /* 1% */
--letter-spacing-wide-2:  0.02em; /* 2% */
--letter-spacing-wide-3:  0.03em; /* 3% */

/* ------------------------------------------
   Padding Variables - Editable
------------------------------------------ */
/* @link https://utopia.fyi/clamp/calculator?a=375,1440,24—80|24—56|32—64|32—40|64—100|80—108|24—96&p=space */

--space-10-12: clamp(0.625rem, 0.581rem + 0.1878vw, 0.75rem);
--space-24: 1.5rem; /* Gap */
--space-14-32: clamp(0.875rem, 0.4789rem + 1.6901vw, 2rem); /* Gap */
--space-16-32: clamp(1rem, 0.6479rem + 1.5023vw, 2rem); /* Gap */
--space-24-32: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem); /* Gap */
--space-32-40: clamp(2rem, 1.8239rem + 0.7512vw, 2.5rem); /* Gap */
--space-16-24: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem); /* Gap */
--space-32-64: clamp(2rem, 1.2958rem + 3.0047vw, 4rem); /* Gap */
--space-56-48: clamp(3rem, 3.6761rem + -0.7512vw, 3.5rem);
--space-64: 4rem; /* Gap */
--space-64-80: clamp(4rem, 3.6479rem + 1.5023vw, 5rem); /* Gap */


--plr-24-80: clamp(1.5rem, 0.2676rem + 5.2582vw, 5rem); /* L/R Padding: Sections, Containers */

--ptb-16-20: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem); /* T/B Padding: Nav bar */
--ptb-32-40: clamp(2rem, 1.8239rem + 0.7512vw, 2.5rem); /* T/B Padding: Sections, Containers */
--ptb-24-56: clamp(1.5rem, 0.7958rem + 3.0047vw, 3.5rem); /* T/B Padding: Sections, Containers */
--ptb-32-64: clamp(2rem, 1.2958rem + 3.0047vw, 4rem); /* T/B Padding: Sections, Containers */
--ptb-24-96: clamp(1.5rem, -0.0845rem + 6.7606vw, 6rem); /* T/B Padding: Sections, Containers */
--ptb-64-100: clamp(4rem, 3.2077rem + 3.3803vw, 6.25rem); /* T/B Padding: Sections, Containers */
--ptb-80-108: clamp(5rem, 4.3838rem + 2.6291vw, 6.75rem); /* T/B Padding: Sections, Containers */
  
/* Hero Sections Height Variable */
--section-hero-height: 95vh; /* 95% the screen height */

/* Offset Padding for Overlay Headers */
--section-offset-header: 80px; /* Adjust to the overlay header's negative margin */


/* ------------------------------------------
   Radius
------------------------------------------ */

/* Edit Border or Image Radius */
--radius-xs: 0.25rem; /* 4px */
--radius-sm: 0.375rem; /* 6px */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */

/* ------------------------------------------
   Border Width
------------------------------------------ */
  
/* 寬度（小值建議用 px，避免跟字級縮放；多數系統也這樣做） */
--border-w-0: 0;
--border-w-1: 1px;
--border-w-2: 2px;  /* 1–4px 一般用 px 更穩定 */

/* ------------------------------------------
   Shadow
------------------------------------------ */

--shadow-1: 0 1px 2px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.08);
--shadow-2: 0 2px 8px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10);
--shadow-3: 0 8px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);

/* ------------------------------------------
   Others
------------------------------------------ */

/* Edit Link Transition */
--transition-default: 0.2s ease-in-out;

}

/* ==================================================================
End of template style editing, do not edit below
================================================================== */

/* ==================================================================
CSS Template (Do not edit below)
================================================================== */

/* ------------------------------------------
   Typography - Fluid Variants
------------------------------------------ */

.header-2xl h1{
    font-size: clamp(2rem, 1.6479rem + 1.5023vw, 3rem); /* 32-48 */
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -2%;
    color: var(--color-white);
}

.header-2xl p {
    font-size: clamp(2rem, 1.6479rem + 1.5023vw, 3rem); /* 32-48 */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -2%;
    color: var(--color-white);
}

.label-h1 h1 {
    font-size: clamp(0.75rem, 0.919rem + -0.1878vw, 0.875rem); /* 14-12 */
	font-weight: 500;
	line-height: 1.2 !important;
	letter-spacing: -1%;
    margin-bottom: 0.5rem;
    color: var(--color-white);
}

.label-h2 h2 {
    font-size: clamp(0.75rem, 0.919rem + -0.1878vw, 0.875rem); /* 14-12 */
	font-weight: 500;
	line-height: 1.2 !important;
	letter-spacing: -1%;
    margin-bottom: 0.5rem;
    color: var(--color-white);
}

.label-h3 h3 {
    font-size: clamp(0.75rem, 0.919rem + -0.1878vw, 0.875rem); /* 14-12 */
	font-weight: 500;
	line-height: 1.2 !important;
	letter-spacing: -1%;
    margin-bottom: 0.5rem;
    color: var(--color-white);
}

.label-div div {
    font-size: clamp(0.75rem, 0.919rem + -0.1878vw, 0.875rem); /* 14-12 */
	font-weight: 500;
	line-height: 0;
	letter-spacing: -1%;
    /*margin-bottom: 0.5rem;*/
    color: var(--color-white);
}

.header-xl h1 {
    font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem); /* 28-36 */
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.5%;
    color: var(--color-white);
}

.header-xl h2 {
    font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem); /* 28-36 */
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.5%;
    color: var(--color-white);
}

.header-xl p {
    font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem); /* 28-36 */
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -1.5%;
    color: var(--color-white);
}

.header-lg h3 {
    font-size: 1.25rem; /* 20, 22 = 1.375rem */
    /*font-size: clamp(1.375rem, 1.331rem + 0.1878vw, 1.5rem); /* 22-24 */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0%;
    color: var(--color-white);
}

.header-md h4 {
    font-size: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem) !important; /* 18-20 */ /* FAQ */
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0% !important;
    color: var(--color-white);
}

.header-sm h4 {
    font-size: 1.125rem !important; /* 18 - Footer Heading */
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0% !important;
    color: var(--color-white);
}

.text p {
    font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
    color: var(--color-neutral-300);
}

.text-div div {
    font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
    color: var(--color-neutral-300);
}

/* ------------------------------------------
   Components - Button, Label, 
------------------------------------------ */

/* Button */
.btn-primary {
	font-size: var(--fluid-14-14);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-150);
	letter-spacing: var(--letter-spacing-tight-2);
	color: var(--color-white);
	padding: 10px 24px;
	background: var(--color-primary-500);
	border: 1px solid var(--color-button-border-1);
	box-shadow: 0 0 0 3.7 rgba(190,202,234,0.03);
	box-shadow: inset 0 0.74 18.5 rgba(255,255,255,0.11);
}

/* Label XXX */



/* ------------------------------------------
   CPT - Case Studies
------------------------------------------ */
h2.wp-block-heading {
    font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
    padding-top: 1.125em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1%;
    color: var(--color-white);
}

h3.wp-block-heading, 
h4.wp-block-heading, 
h5.wp-block-heading, 
h6.wp-block-heading {
    font-size: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem) !important; /* 18-20 */ /* FAQ */
	font-weight: 500 !important;
	line-height: 1.5 !important;
	letter-spacing: 0% !important;
    color: var(--color-white);
    margin-top: 1.5em;
    margin-bottom: 0.25em;
    
}

p {
    font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	margin-bottom: 1.5rem;
    color: var(--color-neutral-300);
}

p a {
    color: var(--color-neutral-200);
    text-decoration: underline !important;
    transition: color 0.2s ease-in-out !important;
}

p a:hover {
    color: var(--color-white);
}

ul > li {
    line-height: 1.6;
    margin-bottom: 1em;
}

ol > li {
    line-height: 1.6;
    margin-bottom: 1.6em;
}


blockquote {
    color: var(--color-white);
    background: var(--color-neutral-600);
    border: #2C2C30 solid 1px;
    border-radius: 16px;
    margin: 0px;
    padding: 1.5rem;
}

.wp-block-quote.is-layout-flow.wp-block-quote-is-layout-flow {
    margin-top: 3rem !important;
    /*color: #E5E5EC;*/
}

.cf-turnstile {
    margin-left: 0px !important;
}


/* ------------------------------------------
   FluentCart Product Page
------------------------------------------ */


.fc-single-product-page {
    width: 80rem !important;
    display: block;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
    margin-bottom: 0 !important;
}

.fc-single-product-page-row {
    position: relative;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
    gap: 4rem !important;
}


.fc-product-title h1, .fc-product-title h2, .fc-product-title h3, .fc-product-title h4, .fc-product-title h5 {
    font-weight:500;
    --tw-text-opacity: 1;
    color: var(--color-neutral-100) !important;
    margin: 0!important;
    font-size: 28px!important;
    line-height: 36px!important;
}

.fc-product-excerpt p {
    margin: 0;
    font-size: 1rem !important;
    line-height: 24px;
    --tw-text-opacity: 1;
    color: var(--color-neutral-300) !important;
}

.fc-product-prices {
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    --tw-text-opacity: 1;
    color: var(--color-neutral-300) !important;
}

.fc-product-item-price {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: var(--color-neutral-100) !important;
}


/* Images */
.fc-product-gallery-thumb {
    height: auto;
    max-height: 600px;
    width: 100%;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: var(--color-neutral-400) !important;
    text-align: center;
    aspect-ratio: 1/1;
}

.fc-gallery-thumb-control-button {
    height: 92px;
    width: 92px;
    flex: none;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: var(--color-neutral-400) !important;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .1s;
}

.fc-gallery-thumb-control-button.active {
    --tw-border-opacity: 1;
    border-color: var(--color-neutral-100) !important;
}


/* Product Variants */
.fc-product-variant-item {
    position: relative;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: var(--color-neutral-400) !important;
    padding: 8px 10px;
    transition-property: color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.fc-product-variant-item .fc-product-variant-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    --tw-text-opacity: 1;
    color: var(--color-neutral-400) !important;
}

.fc-product-variant-item.selected {
    --tw-border-opacity: 1;
    border-width: 1px !important;
    border-color: var(--color-neutral-100) !important;
    box-shadow: none !important;
}

.fc-product-variant-item.selected .fc-product-variant-title {
    --tw-text-opacity: 1;
    color:var(--color-neutral-100) !important;
}

/* Checkout Button */
.fluent-cart-direct-checkout-button {
    background: var(--color-primary-500) !important;
    box-shadow: 0px 7.4px 18.5px 0px rgba(255, 255, 255, 0.11) inset !important;
    position: relative;
    display: flex;
    max-height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(37 50 65 / var(--tw-border-opacity, 1));
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: none!important;
    text-decoration-line: none!important;
}

.fluent-cart-direct-checkout-button:hover {
    background: var(--color-neutral-700) !important;
    box-shadow: inset 0 .5px .5px .5px #ffffff1a;
    position: relative;
    display: flex;
    max-height: 40px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(37 50 65 / var(--tw-border-opacity, 1));
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600 !important;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    -webkit-text-decoration-line: none!important;
    text-decoration-line: none!important;
}



.fluent-cart-add-to-cart-button {
    display: none !important;
    --tw-border-opacity: 1;
    border-color: rgb(214 218 225 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(245 246 247 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(47 52 72 / var(--tw-text-opacity, 1));
}

/* Related Product */

.fc-similar-product-list-container {
    display: none !important;
    
}


/* Checkout Page*/

.alignwide {
    margin-inline: 0 !important;
}

/*

.fct_summary .fct_summary_box .fct_checkout_form_section {
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-neutral-500) !important;
    --tw-bg-opacity: 0 !important;
    background-color: var(--color-neutral-700) !important;
}


.fct_summary_items_total {
    margin: 20px 0 0!important;
    display: grid!important;
    list-style-type: none!important;
    gap: 6px!important;
    border-width: 1px!important;
    border-left-width: 0px!important;
    border-right-width: 0px!important;
    border-bottom-width: 0px!important;
    border-style: solid!important;
    border-color: var(--color-neutral-500) !important;
    padding: 20px 0 0!important;
}

body ul.fct_summary_items_list {
    border-color: var(--color-neutral-500) !important;
}



@layer override {

--checkout-title-color: var(--color-neutral-100) !important;
--checkout-cart-items-order-summary-border: var(--color-neutral-500) !important;
    


.fct_checkout_form_section h4 {
    margin-top: 0!important;
    margin-bottom: 0!important;
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 22px!important;
    color: var(--color-neutral-100) !important;
}

.fct_checkout * {
    box-sizing: border-box;
    color: var(--color-neutral-200) !important;
}


.fct_checkout input[type="email"], .fct_checkout input[type="number"], .fct_checkout input[type="password"], .fct_checkout input[type="reset"], .fct_checkout input[type="search"], .fct_checkout input[type="tel"], .fct_checkout input[type="text"], .fct_checkout input[type="url"], .fct_checkout input, .fct_checkout select, .fct_checkout textarea {
    margin: 0;
    min-height: 40px;
    width: 100%;
    border-radius: 0;
    border-width: .5px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-color: var(--color-neutral-500) !important;
    --tw-bg-opacity: 1;
    background-color: var(--color-neutral-700) !important;
    padding: 10px 16px;
    font-size: 15px;
    line-height: 1;
    color: var(--checkout-text-color);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);
}

.fc-nice-select, .fc-nice-select .list {
    border-color: var(--color-neutral-500) !important;
    background-color: var(--color-neutral-700) !important;
}
.fc-nice-select .option:hover {
    background-color: var(--color-neutral-500) !important;
}

.fc-nice-select .option.selected.focus, .fc-nice-select .option.focus, .fc-nice-select .option:hover {
    background-color: var(--color-neutral-500) !important;
}

.fc-nice-select-dropdown {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: none;
    max-height: 230px;
    overflow-x: hidden;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: var(--color-neutral-500) !important;
    --tw-shadow: 0px 16px 32px -4px rgba(27,37,51,.2);
    --tw-shadow-colored: 0px 16px 32px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}

.fc-nice-select-search-box {
    position: sticky;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0;
    --tw-bg-opacity: 1;
    background-color: var(--color-neutral-700) !important;
    padding: 0;
}

/* Coupon */
/*
.fct_coupon_field button:hover {
    --tw-bg-opacity: 1 !important;
    background-color: var(--color-neutral-400) !important;
}

.fct_coupon_field button {
    --tw-bg-opacity: 1 !important;
    background-color: var(--color-neutral-500) !important;
}
}
*/