img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} /*# sourceURL=wp-img-auto-sizes-contain-inline-css */ img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } /*# sourceURL=wp-emoji-styles-inline-css */ :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #FFFFFF;--wp--preset--color--contrast: #111111;--wp--preset--color--accent-1: #FFEE58;--wp--preset--color--accent-2: #F6CFF4;--wp--preset--color--accent-3: #503AA8;--wp--preset--color--accent-4: #686868;--wp--preset--color--accent-5: #FBFAF3;--wp--preset--color--accent-6: color-mix(in srgb, currentColor 20%, transparent);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);--wp--preset--font-family--manrope: Manrope, sans-serif;--wp--preset--font-family--fira-code: "Fira Code", monospace;--wp--preset--spacing--20: 10px;--wp--preset--spacing--30: 20px;--wp--preset--spacing--40: 30px;--wp--preset--spacing--50: clamp(30px, 5vw, 50px);--wp--preset--spacing--60: clamp(30px, 7vw, 70px);--wp--preset--spacing--70: clamp(50px, 7vw, 90px);--wp--preset--spacing--80: clamp(70px, 10vw, 140px);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:root { --wp--style--global--content-size: 645px;--wp--style--global--wide-size: 1340px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1.2rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 1.2rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 1.2rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 1.2rem;}:root :where(.is-layout-grid){gap: 1.2rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--base);color: var(--wp--preset--color--contrast);font-family: var(--wp--preset--font-family--manrope);font-size: var(--wp--preset--font-size--large);font-weight: 300;letter-spacing: -0.1px;line-height: 1.4;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: var(--wp--preset--spacing--50);--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: var(--wp--preset--spacing--50);}a:where(:not(.wp-element-button)){color: currentColor;text-decoration: underline;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{font-weight: 400;letter-spacing: -0.1px;line-height: 1.125;}h1{font-size: var(--wp--preset--font-size--xx-large);}h2{font-size: var(--wp--preset--font-size--x-large);}h3{font-size: var(--wp--preset--font-size--large);}h4{font-size: var(--wp--preset--font-size--medium);}h5{font-size: var(--wp--preset--font-size--small);letter-spacing: 0.5px;}h6{font-size: var(--wp--preset--font-size--small);font-weight: 700;letter-spacing: 1.4px;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: inherit;font-size: var(--wp--preset--font-size--medium);font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: 1rem;padding-right: 2.25rem;padding-bottom: 1rem;padding-left: 2.25rem;text-decoration: none;text-transform: inherit;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);border-color: transparent;color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){outline-color: var(--wp--preset--color--accent-4);outline-offset: 2px;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){font-size: var(--wp--preset--font-size--small);line-height: 1.4;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-manrope-font-family{font-family: var(--wp--preset--font-family--manrope) !important;}.has-fira-code-font-family{font-family: var(--wp--preset--font-family--fira-code) !important;} /*# sourceURL=global-styles-inline-css */ .skip-link.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link.screen-reader-text:focus { background-color: #eee; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /*# sourceURL=wp-block-template-skip-link-inline-css */ a{text-decoration-thickness:1px!important;text-underline-offset:.1em}:where(.wp-site-blocks :focus){outline-width:2px;outline-style:solid}.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child){margin-bottom:3px}.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content{outline-offset:4px}.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content{outline-offset:0}blockquote,caption,figcaption,h1,h2,h3,h4,h5,h6,p{text-wrap:pretty}.more-link{display:block}:where(pre){overflow-x:auto} /*# sourceURL=https://healthworldlab.shop/wp-content/themes/twentytwentyfive/style.min.css */ .e-heading-base a, .e-paragraph-base a { all: unset; cursor: pointer; }form[data-element_type="e-form"].form-state-success [data-element_type="e-form-success-message"],form[data-element_type="e-form"].form-state-error [data-element_type="e-form-error-message"]{ display: block; } /*# sourceURL=elementor-frontend-inline-css */ .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } @media screen and (max-height: 1024px) { .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @media screen and (max-height: 640px) { .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:fallback;src:url("https://cdn-mars.vendd.com.br/p/LDWheJgnchRp9vPm7SnF1ctj0SaH8yhP4rRr9yVI4WqM5dCm/v-files/assets/1lzjl74.woff2") format('woff2');} @font-face{font-family:"Fira Code";font-style:normal;font-weight:300 700;font-display:fallback;src:url("https://clone.statics.page/f360457f-eb4f-453c-862c-4ac1c18ff1bc/403da362-4336-4a2f-a3fe-22b3e3b2eee6/fonts/kqrgnx.woff2") format('woff2');} .opti-official-header, .opti-official-header *{ box-sizing:border-box; } .opti-official-header{ width:100%; position:sticky; top:0; z-index:9999; font-family:'Poppins',Arial,sans-serif; background:#020812; color:#ffffff; isolation:isolate; overflow:visible; border-bottom:1px solid rgba(62,166,255,.22); box-shadow:0 14px 38px rgba(0,0,0,.42); } .opti-header-bg{ position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 52% 50%, rgba(8,119,207,.22), transparent 34%), radial-gradient(circle at 12% 50%, rgba(62,166,255,.10), transparent 30%), linear-gradient(90deg,#020812 0%,#061B33 48%,#020812 100%); overflow:hidden; } .opti-header-bg:before{ content:""; position:absolute; top:0; left:-30%; width:28%; height:100%; background:linear-gradient(90deg,transparent,rgba(62,166,255,.34),transparent); transform:skewX(-18deg); animation:optiHeaderShine 6.5s ease-in-out infinite; } .opti-header-inner{ width:100%; max-width:1320px; min-height:74px; margin:0 auto; padding:8px 18px; display:grid; grid-template-columns:auto 1fr auto minmax(230px,330px) auto; align-items:center; gap:18px; position:relative; } .opti-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:#ffffff; white-space:nowrap; } .opti-brand-dot{ width:13px; height:13px; border-radius:50%; background:#3EA6FF; box-shadow:0 0 18px rgba(62,166,255,.85); } .opti-brand span{ font-size:1.32rem; line-height:1; font-weight:900; letter-spacing:-.8px; text-transform:uppercase; } .opti-brand small{ padding:4px 7px; border-radius:999px; color:#020812; background:#3EA6FF; font-size:.56rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.06em; box-shadow:0 0 18px rgba(62,166,255,.28); } .opti-nav{ display:flex; justify-content:center; align-items:center; gap:22px; } .opti-nav a{ color:rgba(255,255,255,.76); text-decoration:none; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; transition:.22s ease; } .opti-nav a:hover{ color:#3EA6FF; } .opti-product-orbit{ width:92px; height:58px; position:relative; display:flex; align-items:center; justify-content:center; } .opti-product-orbit img{ position:relative; z-index:3; max-height:72px; width:auto; display:block; filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(62,166,255,.34)); animation:optiProductFloat 4.2s ease-in-out infinite; } .opti-orbit{ position:absolute; left:50%; top:50%; border:1px solid rgba(62,166,255,.52); border-radius:999px; pointer-events:none; } .opti-o1{ width:84px; height:31px; transform:translate(-50%,-50%) rotate(-18deg); animation:optiOrbitOne 7s linear infinite; } .opti-o2{ width:68px; height:68px; transform:translate(-50%,-50%); border-color:rgba(255,255,255,.16); animation:optiOrbitTwo 10s linear infinite reverse; } .opti-orbit-dot{ position:absolute; width:6px; height:6px; border-radius:50%; background:#3EA6FF; box-shadow:0 0 14px rgba(62,166,255,.95); animation:optiDotMove 4.8s linear infinite; } .opti-header-copy{ max-width:330px; } .opti-header-copy strong{ display:block; color:#ffffff; font-size:.82rem; line-height:1.15; font-weight:900; letter-spacing:-.2px; } .opti-header-copy span{ display:block; margin-top:3px; color:rgba(255,255,255,.66); font-size:.68rem; line-height:1.25; font-weight:700; } .opti-header-cta{ min-height:42px; padding:12px 20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#020812; text-decoration:none; background:linear-gradient(180deg,#9ED8FF 0%,#3EA6FF 100%); border:1px solid rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(62,166,255,.28), inset 0 1px 0 rgba(255,255,255,.58); font-size:.74rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; animation:optiCtaPulse 2.8s ease-in-out infinite; } .opti-menu-btn{ display:none; width:42px; height:42px; border:1px solid rgba(62,166,255,.34); border-radius:12px; background:rgba(255,255,255,.06); color:#3EA6FF; font-size:1.25rem; cursor:pointer; } @keyframes optiHeaderShine{ 0%{left:-35%; opacity:0;} 18%{opacity:1;} 42%,100%{left:120%; opacity:0;} } @keyframes optiProductFloat{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-4px) scale(1.025);} } @keyframes optiOrbitOne{ from{transform:translate(-50%,-50%) rotate(-18deg);} to{transform:translate(-50%,-50%) rotate(342deg);} } @keyframes optiOrbitTwo{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} } @keyframes optiDotMove{ 0%{transform:translate(36px,-4px);} 25%{transform:translate(6px,24px);} 50%{transform:translate(-36px,4px);} 75%{transform:translate(-4px,-24px);} 100%{transform:translate(36px,-4px);} } @keyframes optiCtaPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} } @media(max-width:980px){ .opti-header-inner{ grid-template-columns:auto 1fr auto auto; min-height:70px; gap:12px; } .opti-nav{ position:absolute; top:100%; left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px; border-radius:18px; background:#020812; border:1px solid rgba(62,166,255,.24); box-shadow:0 20px 45px rgba(0,0,0,.46); } .opti-nav.opti-open{ display:flex; } .opti-nav a{ padding:14px 12px; color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.08); } .opti-nav a:last-child{ border-bottom:0; } .opti-header-copy{ display:none; } .opti-menu-btn{ display:inline-flex; align-items:center; justify-content:center; } } @media(max-width:560px){ .opti-header-inner{ padding:8px 12px; grid-template-columns:auto 1fr auto; } .opti-brand span{ font-size:1.05rem; } .opti-brand small{ display:none; } .opti-product-orbit{ width:70px; height:52px; justify-self:center; } .opti-product-orbit img{ max-height:62px; } .opti-o1{ width:68px; height:25px; } .opti-o2{ width:55px; height:55px; } .opti-header-cta{ display:none; } } .opti-official-hero, .opti-official-hero * { box-sizing: border-box; } .opti-official-hero { position: relative; overflow: hidden; width: 100%; padding: 30px 18px 0; background: #ffffff; font-family: 'Poppins', Arial, sans-serif; color: #063a70; isolation: isolate; } .opti-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 18% 28%, rgba(0,112,203,.12), transparent 28%), radial-gradient(circle at 82% 20%, rgba(0,74,150,.10), transparent 32%), linear-gradient(180deg, #ffffff 0%, #f3f9ff 58%, #e7f3ff 100%); } .opti-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,72,145,.04), transparent 45%, rgba(0,72,145,.05)); } .opti-orb { position: absolute; border-radius: 999px; border: 1px solid rgba(0,82,166,.13); background: rgba(0,112,203,.035); animation: optiFloat 8s ease-in-out infinite; } .orb-a { width: 420px; height: 420px; left: -80px; top: -110px; } .orb-b { width: 320px; height: 320px; right: -70px; top: -80px; animation-delay: -3s; } .opti-line { position: absolute; width: 280px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,82,166,.28), transparent); transform: rotate(-18deg); animation: optiLine 7s linear infinite; } .line-a { left: -80px; top: 32%; } .line-b { right: -90px; bottom: 28%; animation-direction: reverse; } .opti-shell { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto; min-height: 350px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 28px; } .opti-product-stage { position: relative; min-height: 315px; display: flex; align-items: flex-end; justify-content: center; } .opti-product-glow { position: absolute; width: 310px; height: 310px; bottom: 12px; border-radius: 999px; background: radial-gradient(circle, rgba(0,112,203,.22), transparent 56%), radial-gradient(circle, rgba(255,255,255,.9), transparent 72%); filter: blur(5px); animation: optiPulse 4.8s ease-in-out infinite; } .opti-orbits { position: absolute; width: 360px; height: 250px; bottom: 24px; display: flex; align-items: center; justify-content: center; } .orbit { position: absolute; border-radius: 999px; border: 1px solid rgba(0,82,166,.26); box-shadow: 0 0 26px rgba(0,112,203,.08); } .orbit-a { width: 318px; height: 108px; transform: rotate(-13deg); animation: optiOrbit 9s linear infinite; } .orbit-b { width: 245px; height: 245px; border-color: rgba(0,82,166,.14); animation: optiSpin 15s linear infinite reverse; } .orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 999px; background: #0472c9; box-shadow: 0 0 18px rgba(4,114,201,.75); animation: optiDot 5.8s linear infinite; } .opti-product-img { position: relative; z-index: 5; width: min(350px, 92vw); max-height: 320px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 24px 28px rgba(0,64,128,.18)) drop-shadow(0 0 18px rgba(0,112,203,.14)); animation: optiBottle 5.2s ease-in-out infinite; } .opti-copy { position: relative; z-index: 3; text-align: center; padding: 6px 0 20px; } .opti-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: rgba(0,112,203,.075); border: 1px solid rgba(0,82,166,.15); color: #06477f; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; } .opti-kicker span { width: 8px; height: 8px; border-radius: 999px; background: #0472c9; box-shadow: 0 0 0 0 rgba(4,114,201,.42); animation: optiDotPulse 1.8s infinite; } .opti-copy h1 { margin: 0; color: #063a70; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(58px, 8vw, 108px); line-height: .86; font-weight: 900; letter-spacing: -0.065em; font-style: italic; text-shadow: 0 16px 32px rgba(0,82,166,.10); } .opti-copy p { max-width: 560px; margin: 16px auto 0; color: rgba(9,45,78,.82); font-size: 15px; line-height: 1.55; font-weight: 600; } .opti-badges { margin: 18px auto 0; display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; } .opti-badges span { min-height: 34px; padding: 8px 12px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(0,82,166,.15); color: #063a70; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 10px 24px rgba(0,82,166,.07); } .opti-cta { position: relative; margin-top: 18px; min-height: 52px; padding: 0 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; color: #ffffff; text-decoration: none; background: linear-gradient(135deg, #063a70 0%, #0877cf 55%, #063a70 100%); border: 1px solid rgba(0,82,166,.22); box-shadow: 0 18px 34px rgba(0,82,166,.25), inset 0 1px 0 rgba(255,255,255,.18); font-size: 13px; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; animation: optiCta 2.8s ease-in-out infinite; } .opti-cta::before { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); animation: optiShine 3.4s ease-in-out infinite; } .opti-cta strong { position: relative; z-index: 2; font-size: 17px; } .opti-trust-bar { position: relative; z-index: 3; width: calc(100% + 36px); margin-left: -18px; margin-right: -18px; min-height: 78px; padding: 14px 18px; background: linear-gradient(90deg, #063a70 0%, #0877cf 52%, #063a70 100%); display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 10px; box-shadow: 0 -16px 34px rgba(0,82,166,.12); } .opti-trust-bar div { display: flex; align-items: center; justify-content: center; gap: 12px; color: #ffffff; font-size: clamp(13px, 1.5vw, 22px); line-height: 1; font-weight: 950; text-transform: uppercase; letter-spacing: .055em; white-space: nowrap; } .opti-trust-bar span { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: #0877cf; font-size: 19px; font-weight: 950; box-shadow: 0 10px 22px rgba(0,0,0,.16); } @keyframes optiFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(0,-12px,0) scale(1.02); } } @keyframes optiLine { 0% { transform: translateX(-40px) rotate(-18deg); opacity: .05; } 45% { opacity: .48; } 100% { transform: translateX(100px) rotate(-18deg); opacity: .05; } } @keyframes optiPulse { 0%,100% { transform: scale(1); opacity: .76; } 50% { transform: scale(1.06); opacity: .96; } } @keyframes optiBottle { 0%,100% { transform: translateY(0) rotate(-.8deg); } 50% { transform: translateY(-8px) rotate(.8deg); } } @keyframes optiOrbit { from { transform: rotate(-13deg) rotateZ(0deg); } to { transform: rotate(-13deg) rotateZ(360deg); } } @keyframes optiSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes optiDot { 0% { transform: translate(150px, -8px); } 25% { transform: translate(10px, 56px); } 50% { transform: translate(-150px, 8px); } 75% { transform: translate(-10px, -56px); } 100% { transform: translate(150px, -8px); } } @keyframes optiDotPulse { 0% { box-shadow: 0 0 0 0 rgba(4,114,201,.42); } 70% { box-shadow: 0 0 0 9px rgba(4,114,201,0); } 100% { box-shadow: 0 0 0 0 rgba(4,114,201,0); } } @keyframes optiCta { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes optiShine { 0%,45% { left: -80%; } 75%,100% { left: 125%; } } @media (max-width: 980px) { .opti-official-hero { padding: 24px 14px 0; } .opti-shell { grid-template-columns: 1fr; min-height: auto; gap: 0; } .opti-copy { order: 1; padding: 2px 0 0; } .opti-product-stage { order: 2; min-height: 280px; margin-top: -4px; } .opti-product-img { width: min(315px, 86vw); max-height: 280px; } .opti-orbits { width: 320px; height: 235px; bottom: 16px; } .orbit-a { width: 292px; height: 100px; } .orbit-b { width: 225px; height: 225px; } .opti-product-glow { width: 275px; height: 275px; } } @media (max-width: 680px) { .opti-official-hero { padding: 22px 12px 0; } .opti-copy h1 { font-size: clamp(56px, 17vw, 82px); } .opti-copy p { margin-top: 14px; font-size: 13.5px; max-width: 350px; } .opti-badges { margin-top: 14px; gap: 7px; } .opti-badges span { min-height: 31px; padding: 7px 10px; font-size: 9.5px; } .opti-cta { width: min(100%, 340px); min-height: 50px; padding: 0 18px; font-size: 12px; } .opti-product-stage { min-height: 250px; } .opti-product-img { width: min(285px, 88vw); max-height: 250px; } .opti-orbits { width: 286px; height: 220px; bottom: 10px; } .orbit-a { width: 262px; height: 90px; } .orbit-b { width: 198px; height: 198px; } .opti-product-glow { width: 235px; height: 235px; } .opti-trust-bar { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; grid-template-columns: 1fr; gap: 9px; padding: 12px; } .opti-trust-bar div { justify-content: flex-start; width: min(100%, 330px); margin: 0 auto; font-size: 13px; } .opti-trust-bar span { width: 31px; height: 31px; flex-basis: 31px; font-size: 16px; } } #how-it-works, #how-it-works *{ box-sizing:border-box; } #how-it-works{ width:100%; margin:0; padding:68px 18px 72px; background: radial-gradient(circle at 18% 12%, rgba(0,157,210,.10), transparent 30%), radial-gradient(circle at 86% 20%, rgba(2,54,93,.10), transparent 34%), linear-gradient(180deg,#ffffff 0%,#f7fbff 52%,#ffffff 100%); color:#071d33; font-family:'Poppins',Arial,sans-serif; position:relative; overflow:hidden; isolation:isolate; } .opv-how-wrap{ width:100%; max-width:1180px; margin:0 auto; position:relative; z-index:3; } /* ABSTRACT PREMIUM DETAILS */ .opv-how-bg-orb{ position:absolute; border-radius:999px; pointer-events:none; z-index:1; filter:blur(.2px); } .opv-orb-1{ width:520px; height:520px; right:-260px; top:-250px; background:radial-gradient(circle, rgba(0,153,214,.16), transparent 68%); } .opv-orb-2{ width:430px; height:430px; left:-240px; bottom:-240px; background:radial-gradient(circle, rgba(5,50,91,.11), transparent 70%); } .opv-how-line{ position:absolute; pointer-events:none; z-index:2; border:1px solid rgba(0,139,198,.18); border-left-color:transparent; border-bottom-color:transparent; border-radius:999px; opacity:.7; } .opv-line-1{ width:620px; height:150px; right:-120px; top:88px; transform:rotate(-8deg); animation:opvFloatLine 8s ease-in-out infinite; } .opv-line-2{ width:520px; height:118px; left:-140px; bottom:92px; transform:rotate(7deg); opacity:.48; animation:opvFloatLineTwo 9s ease-in-out infinite; } #how-it-works:before{ content:""; position:absolute; inset:0; z-index:1; opacity:.38; background-image: linear-gradient(rgba(0,93,140,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,93,140,.055) 1px, transparent 1px); background-size:82px 82px; mask-image:radial-gradient(circle at 50% 28%, black, transparent 72%); pointer-events:none; } #how-it-works:after{ content:""; position:absolute; width:1px; height:1px; left:50%; top:50%; z-index:1; box-shadow: -420px -120px 0 1px rgba(0,139,198,.20), -250px 180px 0 1px rgba(0,139,198,.14), 340px -170px 0 1px rgba(0,139,198,.18), 480px 140px 0 1px rgba(0,139,198,.12), 110px 240px 0 1px rgba(0,139,198,.16); pointer-events:none; } @keyframes opvFloatLine{ 0%,100%{transform:rotate(-8deg) translate3d(0,0,0);} 50%{transform:rotate(-5deg) translate3d(-12px,10px,0);} } @keyframes opvFloatLineTwo{ 0%,100%{transform:rotate(7deg) translate3d(0,0,0);} 50%{transform:rotate(4deg) translate3d(14px,-8px,0);} } /* HEADER */ .opv-how-head{ max-width:790px; margin:0 auto 34px; text-align:center; } .opv-how-badge{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:15px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(0,117,170,.18); color:#075C86; font-size:.68rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; box-shadow: 0 14px 34px rgba(0,54,96,.08), inset 0 1px 0 rgba(255,255,255,.9); } .opv-how-head h2{ margin:0; color:#071d33; font-size:clamp(2rem,3.4vw,3.55rem); line-height:1.05; letter-spacing:-2.2px; font-weight:900; } .opv-how-head h2 span{ display:block; background:linear-gradient(90deg,#07365F 0%,#007DB5 48%,#0BA7D7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 14px 40px rgba(0,126,181,.12); } .opv-how-head p{ max-width:710px; margin:16px auto 0; color:#506173; font-size:.96rem; line-height:1.72; font-weight:600; } /* GRID */ .opv-how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; } .opv-how-card{ position:relative; min-height:248px; padding:24px 22px 23px; border-radius:28px; background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)), radial-gradient(circle at 88% 10%, rgba(0,151,215,.10), transparent 36%); border:1px solid rgba(0,93,140,.14); box-shadow: 0 22px 56px rgba(7,29,51,.09), inset 0 1px 0 rgba(255,255,255,.96); overflow:hidden; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .opv-featured-card{ background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,249,255,.88)), radial-gradient(circle at 82% 8%, rgba(0,157,210,.18), transparent 42%); border-color:rgba(0,132,190,.26); box-shadow: 0 26px 64px rgba(0,93,140,.14), inset 0 1px 0 rgba(255,255,255,.98); } .opv-how-card:before{ content:""; position:absolute; width:160px; height:160px; right:-86px; top:-86px; border-radius:999px; background:radial-gradient(circle, rgba(0,153,214,.18), transparent 70%); pointer-events:none; } .opv-how-card:after{ content:""; position:absolute; left:22px; right:22px; bottom:0; height:4px; border-radius:999px 999px 0 0; background:linear-gradient(90deg,#07365F,#0097D6,#44D8FF); opacity:.88; } .opv-how-card:hover{ transform:translateY(-6px); border-color:rgba(0,132,190,.34); box-shadow: 0 30px 72px rgba(7,29,51,.13), inset 0 1px 0 rgba(255,255,255,1); } .opv-step-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; } .opv-step-number{ width:50px; height:50px; border-radius:17px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0BA7D7 0%,#07365F 100%); color:#ffffff; font-size:1.2rem; line-height:1; font-weight:900; box-shadow: 0 14px 28px rgba(0,117,170,.22), inset 0 1px 0 rgba(255,255,255,.24); } .opv-step-tag{ padding:7px 10px; border-radius:999px; background:rgba(0,151,214,.08); border:1px solid rgba(0,117,170,.13); color:#075C86; font-size:.62rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .opv-card-content{ position:relative; z-index:2; } .opv-card-content strong{ display:block; margin-bottom:10px; color:#071d33; font-size:1.06rem; line-height:1.22; font-weight:900; letter-spacing:-.45px; } .opv-card-content p{ margin:0; color:#536577; font-size:.86rem; line-height:1.65; font-weight:600; } /* BOTTOM CTA */ .opv-how-bottom{ margin-top:24px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:21px; border-radius:28px; background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,251,255,.90)), radial-gradient(circle at 90% 0%, rgba(0,157,210,.16), transparent 38%); border:1px solid rgba(0,93,140,.15); box-shadow: 0 24px 58px rgba(7,29,51,.10), inset 0 1px 0 rgba(255,255,255,.98); overflow:hidden; position:relative; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .opv-how-bottom:before{ content:""; position:absolute; width:330px; height:330px; right:-150px; top:-170px; border-radius:999px; background:radial-gradient(circle, rgba(0,153,214,.18), transparent 70%); pointer-events:none; } .opv-how-bottom:after{ content:""; position:absolute; inset:auto 22px 0 22px; height:4px; border-radius:999px 999px 0 0; background:linear-gradient(90deg,#07365F,#0097D6,#44D8FF); opacity:.9; } .opv-how-insight{ position:relative; z-index:2; } .opv-how-insight span{ display:inline-flex; margin-bottom:8px; padding:7px 11px; border-radius:999px; background:rgba(0,151,214,.08); border:1px solid rgba(0,117,170,.14); color:#075C86; font-size:.64rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .opv-how-insight p{ max-width:780px; margin:0; color:#536577; font-size:.9rem; line-height:1.62; font-weight:600; } .opv-how-cta{ position:relative; z-index:2; min-height:54px; padding:17px 28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#ffffff; text-decoration:none; background: linear-gradient(180deg,#10B8EA 0%,#007DB5 45%,#07365F 100%); border:1px solid rgba(255,255,255,.28); box-shadow: 0 18px 34px rgba(0,117,170,.28), 0 0 0 6px rgba(0,151,214,.08), inset 0 1px 0 rgba(255,255,255,.28); font-size:.78rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.045em; white-space:nowrap; overflow:hidden; transform:translateZ(0); animation:opvCtaPulse 2.7s ease-in-out infinite; transition:transform .22s ease, box-shadow .22s ease; } .opv-how-cta:before{ content:""; position:absolute; top:0; left:-85%; width:44%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent); transform:skewX(-18deg); animation:opvCtaShine 3.8s ease-in-out infinite; } .opv-how-cta:after{ content:"→"; margin-left:10px; font-size:1rem; line-height:1; transition:transform .22s ease; } .opv-how-cta:hover{ transform:translateY(-3px) scale(1.015); box-shadow: 0 24px 44px rgba(0,117,170,.34), 0 0 0 8px rgba(0,151,214,.10), inset 0 1px 0 rgba(255,255,255,.32); } .opv-how-cta:hover:after{ transform:translateX(4px); } @keyframes opvCtaShine{ 0%{left:-85%;} 42%,100%{left:130%;} } @keyframes opvCtaPulse{ 0%,100%{ box-shadow: 0 18px 34px rgba(0,117,170,.28), 0 0 0 6px rgba(0,151,214,.08), inset 0 1px 0 rgba(255,255,255,.28); } 50%{ box-shadow: 0 22px 42px rgba(0,117,170,.36), 0 0 0 10px rgba(0,151,214,.10), inset 0 1px 0 rgba(255,255,255,.32); } } /* RESPONSIVE */ @media(max-width:980px){ #how-it-works{ padding:52px 14px 56px; } .opv-how-head{ text-align:left; margin-bottom:25px; } .opv-how-head h2{ font-size:2rem; letter-spacing:-1.3px; } .opv-how-head p{ margin-left:0; margin-right:0; } .opv-how-grid{ grid-template-columns:1fr; gap:12px; } .opv-how-card{ min-height:auto; padding:20px; border-radius:24px; } .opv-how-bottom{ grid-template-columns:1fr; padding:18px; border-radius:24px; } .opv-how-cta{ width:100%; min-height:56px; text-align:center; padding-left:18px; padding-right:18px; } .opv-line-1{ width:440px; right:-260px; top:130px; opacity:.45; } .opv-line-2{ width:380px; left:-260px; bottom:130px; opacity:.35; } } @media(max-width:420px){ #how-it-works{ padding:46px 13px 50px; } .opv-how-badge{ font-size:.6rem; padding:8px 12px; letter-spacing:.055em; } .opv-how-head h2{ font-size:1.78rem; line-height:1.12; } .opv-how-head p{ font-size:.9rem; line-height:1.62; } .opv-step-number{ width:45px; height:45px; border-radius:15px; font-size:1.05rem; } .opv-step-tag{ font-size:.56rem; padding:7px 9px; } .opv-card-content strong{ font-size:.99rem; } .opv-card-content p{ font-size:.82rem; } .opv-how-insight p{ font-size:.84rem; } .opv-how-cta{ font-size:.72rem; letter-spacing:.035em; } } @media(prefers-reduced-motion:reduce){ #how-it-works *, #how-it-works *:before, #how-it-works *:after{ animation:none!important; transition:none!important; } } .opti-transition-strip, .opti-transition-strip *{ box-sizing:border-box; } .opti-transition-strip{ position:relative; width:100%; overflow:hidden; isolation:isolate; background:#020812; font-family:'Poppins',Arial,sans-serif; padding:22px 14px; color:#ffffff; } .opti-transition-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle at 50% 50%, rgba(62,166,255,.24), transparent 30%), radial-gradient(circle at 15% 50%, rgba(8,119,207,.16), transparent 28%), radial-gradient(circle at 85% 50%, rgba(158,216,255,.12), transparent 30%), linear-gradient(90deg,#020812 0%,#061B33 48%,#020812 100%); } .opti-transition-bg::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%, rgba(255,255,255,.025)), repeating-linear-gradient( 90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 58px ); opacity:.35; } .opti-transition-bg::after{ content:""; position:absolute; top:0; left:-35%; width:32%; height:100%; background:linear-gradient(90deg,transparent,rgba(62,166,255,.28),transparent); transform:skewX(-18deg); animation:optiTransitionShine 6.8s ease-in-out infinite; } .opti-t-orb{ position:absolute; width:260px; height:260px; border-radius:999px; border:1px solid rgba(62,166,255,.14); background:rgba(62,166,255,.035); filter:blur(.2px); animation:optiOrbFloat 8s ease-in-out infinite; } .orb-left{ left:-120px; top:-92px; } .orb-right{ right:-120px; bottom:-112px; animation-delay:-3s; } .opti-t-line{ position:absolute; height:1px; width:340px; background:linear-gradient(90deg,transparent,rgba(158,216,255,.45),transparent); transform:rotate(-16deg); opacity:.48; } .line-one{ left:-110px; top:34%; animation:optiLineMove 7s linear infinite; } .line-two{ right:-120px; bottom:28%; animation:optiLineMove 8s linear infinite reverse; } .opti-t-particle{ position:absolute; width:5px; height:5px; border-radius:999px; background:#9ED8FF; box-shadow:0 0 16px rgba(158,216,255,.9); opacity:.85; animation:optiParticleFloat 5.6s ease-in-out infinite; } .p1{ left:18%; top:34%; } .p2{ right:22%; top:58%; animation-delay:-1.8s; } .p3{ left:52%; bottom:18%; animation-delay:-3.2s; } .opti-transition-inner{ position:relative; z-index:2; width:min(1080px,100%); min-height:116px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:26px; text-align:left; } .opti-logo-frame{ position:relative; width:158px; height:92px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .opti-logo-frame::before{ content:""; position:absolute; width:132px; height:132px; border-radius:999px; background: radial-gradient(circle, rgba(62,166,255,.24), transparent 62%); filter:blur(2px); animation:optiLogoPulse 4.2s ease-in-out infinite; } .opti-logo-ring{ position:absolute; border-radius:999px; border:1px solid rgba(158,216,255,.34); pointer-events:none; } .ring-a{ width:142px; height:44px; transform:rotate(-13deg); animation:optiRingA 8s linear infinite; } .ring-b{ width:92px; height:92px; border-color:rgba(255,255,255,.14); animation:optiRingB 12s linear infinite reverse; } .opti-transition-logo{ position:relative; z-index:3; max-width:142px; max-height:78px; width:auto; height:auto; display:block; filter: drop-shadow(0 16px 22px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(62,166,255,.34)); animation:optiLogoFloat 4.8s ease-in-out infinite; } .opti-transition-copy{ position:relative; display:flex; flex-direction:column; gap:6px; min-width:0; } .opti-transition-copy span{ display:inline-flex; width:max-content; max-width:100%; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.075); border:1px solid rgba(158,216,255,.18); color:#9ED8FF; font-size:11px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.10em; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .opti-transition-copy strong{ display:block; color:#ffffff; font-size:clamp(22px,3.4vw,42px); line-height:.96; font-weight:950; letter-spacing:-.055em; text-shadow:0 16px 30px rgba(0,0,0,.28); } @keyframes optiTransitionShine{ 0%{left:-38%; opacity:0;} 18%{opacity:1;} 44%,100%{left:118%; opacity:0;} } @keyframes optiOrbFloat{ 0%,100%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(0,-10px,0) scale(1.03);} } @keyframes optiLineMove{ 0%{transform:translateX(-50px) rotate(-16deg); opacity:.08;} 45%{opacity:.55;} 100%{transform:translateX(120px) rotate(-16deg); opacity:.08;} } @keyframes optiParticleFloat{ 0%,100%{transform:translateY(0) scale(1); opacity:.55;} 50%{transform:translateY(-12px) scale(1.25); opacity:1;} } @keyframes optiLogoPulse{ 0%,100%{transform:scale(1); opacity:.72;} 50%{transform:scale(1.08); opacity:1;} } @keyframes optiLogoFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } @keyframes optiRingA{ from{transform:rotate(-13deg);} to{transform:rotate(347deg);} } @keyframes optiRingB{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media(max-width:760px){ .opti-transition-strip{ padding:18px 12px; } .opti-transition-inner{ min-height:128px; flex-direction:column; gap:8px; text-align:center; } .opti-logo-frame{ width:150px; height:82px; } .opti-transition-logo{ max-width:136px; max-height:70px; } .opti-transition-copy{ align-items:center; } .opti-transition-copy span{ font-size:9.5px; padding:7px 10px; } .opti-transition-copy strong{ max-width:340px; font-size:clamp(24px,8vw,34px); line-height:.98; } } .opti-pricing-section, .opti-pricing-section *{ box-sizing:border-box; } .opti-pricing-section{ --opti-bg:#ffffff; --opti-card:#ffffff; --opti-card-2:#F1F8FF; --opti-soft:#EAF5FF; --opti-border:#CFE6FA; --opti-text:#102033; --opti-text-soft:#5B6B7E; --opti-blue:#0877CF; --opti-blue-dark:#063A70; --opti-blue-deep:#021B36; --opti-sky:#9ED8FF; --opti-green:#17B15E; width:100%; padding:28px 10px; background:var(--opti-bg); font-family:'Poppins',Arial,sans-serif; } .opti-pricing-wrap{ width:100%; max-width:430px; margin:0 auto; display:flex; flex-direction:column; gap:18px; } .opti-price-card{ display:block; position:relative; overflow:hidden; text-decoration:none; border-radius:24px; background: radial-gradient(circle at 100% 0%, rgba(8,119,207,.08), transparent 34%), linear-gradient(180deg,var(--opti-card) 0%, var(--opti-card-2) 100%); border:1.5px solid var(--opti-border); color:var(--opti-text); box-shadow: 0 14px 34px rgba(6,58,112,.09), inset 0 1px 0 rgba(255,255,255,.95); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .opti-price-card:hover{ transform:translateY(-3px); border-color:rgba(8,119,207,.34); box-shadow: 0 20px 42px rgba(6,58,112,.15), inset 0 1px 0 rgba(255,255,255,.95); } .opti-featured{ border:3px solid var(--opti-blue); box-shadow: 0 18px 42px rgba(8,119,207,.18), inset 0 1px 0 rgba(255,255,255,.98); } .opti-featured::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 0%, rgba(158,216,255,.42), transparent 30%), radial-gradient(circle at 100% 100%, rgba(8,119,207,.12), transparent 32%); pointer-events:none; } .opti-card-top{ position:relative; z-index:2; padding:10px 14px; text-align:center; font-size:1rem; line-height:1; font-weight:900; color:#ffffff; background:linear-gradient(135deg,#063A70 0%,#0877CF 55%,#063A70 100%); border-bottom:1px solid rgba(255,255,255,.16); letter-spacing:.03em; } .opti-card-body{ position:relative; z-index:2; display:grid; grid-template-columns:48% 52%; align-items:center; gap:4px; padding:14px 14px 12px; } .opti-left{ position:relative; } .opti-mini-label{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 10px; border-radius:8px; background:var(--opti-blue-dark); color:#ffffff; font-size:.84rem; font-weight:800; line-height:1; margin-bottom:8px; box-shadow:0 6px 14px rgba(6,58,112,.20); } .opti-left h3{ margin:0; color:var(--opti-text); font-size:1.1rem; line-height:1.06; font-weight:900; letter-spacing:-.3px; } .opti-left p{ margin:5px 0 10px; color:var(--opti-text-soft); font-size:.82rem; line-height:1.15; font-weight:700; } .opti-product-img{ width:100%; min-height:128px; display:flex; align-items:flex-end; justify-content:center; position:relative; } .opti-product-img::before{ content:""; position:absolute; width:118px; height:118px; border-radius:999px; background: radial-gradient(circle, rgba(158,216,255,.34), transparent 62%); bottom:18px; z-index:0; filter:blur(1px); } .opti-product-img::after{ content:""; position:absolute; bottom:4px; width:78%; height:18px; border-radius:999px; background:rgba(6,58,112,.14); filter:blur(8px); z-index:0; } .opti-product-img img{ position:relative; z-index:2; width:100%; max-width:170px; height:auto; display:block; filter: drop-shadow(0 10px 18px rgba(6,58,112,.18)) drop-shadow(0 0 12px rgba(8,119,207,.12)); transition:transform .25s ease; } .opti-price-card:hover .opti-product-img img{ transform:translateY(-2px); } .opti-img-six img{ max-width:190px; } .opti-right{ display:flex; flex-direction:column; align-items:stretch; } .opti-price-row{ display:flex; align-items:flex-start; justify-content:center; gap:2px; margin-bottom:8px; color:var(--opti-blue-dark); } .opti-price-row.dark{ color:var(--opti-blue-dark); } .opti-dollar{ font-size:1.6rem; font-weight:900; line-height:1; margin-top:6px; } .opti-price-row strong{ font-size:3.9rem; line-height:.82; font-weight:900; letter-spacing:-3px; } .opti-price-row small{ font-size:.67rem; line-height:.95; font-weight:900; text-align:left; margin-top:7px; color:#31506E; } .opti-benefit{ width:100%; margin-bottom:6px; padding:6px 8px; border-radius:10px; background:#EAF5FF; color:var(--opti-blue-dark); font-size:.72rem; line-height:1; font-weight:900; text-align:center; white-space:nowrap; border:1px solid rgba(8,119,207,.10); } .opti-benefit.light{ background:#F3FAFF; color:var(--opti-blue-dark); border:1px solid rgba(8,119,207,.10); } .opti-total{ margin-top:6px; text-align:center; color:#5B6B7E; font-size:.9rem; line-height:1.15; font-weight:700; } .opti-total strong{ color:#102033; font-size:1.12rem; font-weight:900; } .opti-total.dark-total{ color:#5B6B7E; } .opti-total.dark-total strong{ color:#102033; } .opti-shipping{ margin-top:6px; text-align:center; font-size:.95rem; line-height:1; font-weight:900; } .opti-shipping.free, .opti-shipping.paid{ color:var(--opti-green); } .opti-buy-btn{ position:relative; z-index:2; margin:0 14px 14px; min-height:58px; padding:10px 14px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:14px; background:linear-gradient(135deg,var(--opti-blue-dark) 0%,var(--opti-blue) 55%,#3EA6FF 100%); color:#ffffff; font-size:1.06rem; line-height:1; font-weight:900; box-shadow: 0 8px 18px rgba(8,119,207,.24), inset 0 1px 0 rgba(255,255,255,.24); transition:transform .22s ease, box-shadow .22s ease; overflow:hidden; } .opti-buy-btn::before{ content:""; position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); animation:optiBtnShine 3.4s ease-in-out infinite; } .opti-buy-btn span{ display:block; font-size:.78rem; font-weight:700; opacity:.95; position:relative; z-index:2; } .opti-buy-btn::after{ content:""; position:absolute; inset:1px; border-radius:13px; border:1px solid rgba(255,255,255,.12); pointer-events:none; } .opti-price-card:hover .opti-buy-btn{ transform:translateY(-1px); box-shadow: 0 12px 24px rgba(8,119,207,.32), inset 0 1px 0 rgba(255,255,255,.24); } @keyframes optiBtnShine{ 0%,45%{left:-70%;} 75%,100%{left:125%;} } @media(min-width:900px){ .opti-pricing-wrap{ max-width:1180px; display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:22px; } .opti-featured{ order:2; transform:scale(1.03); } .opti-price-card:nth-child(2){ order:1; margin-top:34px; } .opti-price-card:nth-child(3){ order:3; margin-top:34px; } .opti-price-card:hover.opti-featured{ transform:scale(1.03) translateY(-3px); } .opti-card-body{ min-height:282px; } } @media(max-width:420px){ .opti-pricing-section{ padding:22px 8px; } .opti-card-body{ padding:13px 11px 11px; grid-template-columns:48% 52%; } .opti-left h3{ font-size:1rem; } .opti-left p{ font-size:.76rem; } .opti-product-img{ min-height:116px; } .opti-product-img img{ max-width:152px; } .opti-img-six img{ max-width:172px; } .opti-price-row strong{ font-size:3.45rem; } .opti-benefit{ font-size:.64rem; padding:6px 4px; } .opti-buy-btn{ min-height:56px; font-size:1rem; } .opti-buy-btn span{ font-size:.72rem; } } #medical-insight, #medical-insight *{ box-sizing:border-box; } #medical-insight{ width:100%; margin:0; padding:68px 18px; background: radial-gradient(circle at 18% 12%, rgba(47,201,255,.18), transparent 28%), radial-gradient(circle at 88% 18%, rgba(0,127,190,.24), transparent 34%), radial-gradient(circle at 50% 105%, rgba(47,201,255,.14), transparent 42%), linear-gradient(135deg,#031A2D 0%,#063A5E 42%,#075C86 100%); color:#ffffff; font-family:'Poppins',Arial,sans-serif; overflow:hidden; position:relative; isolation:isolate; } #medical-insight:before{ content:""; position:absolute; inset:0; z-index:1; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size:78px 78px; mask-image:radial-gradient(circle at 50% 32%, black, transparent 72%); pointer-events:none; } #medical-insight:after{ content:""; position:absolute; width:1px; height:1px; left:50%; top:50%; z-index:1; box-shadow: -460px -150px 0 1px rgba(80,215,255,.32), -280px 210px 0 1px rgba(80,215,255,.20), 330px -190px 0 1px rgba(80,215,255,.26), 520px 160px 0 1px rgba(80,215,255,.18), 90px 260px 0 1px rgba(80,215,255,.22); pointer-events:none; } .opv-medical-orb{ position:absolute; border-radius:999px; pointer-events:none; z-index:1; } .opv-orb-a{ width:580px; height:580px; right:-300px; top:-280px; background:radial-gradient(circle, rgba(52,207,255,.26), transparent 68%); } .opv-orb-b{ width:500px; height:500px; left:-280px; bottom:-280px; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); } .opv-medical-line{ position:absolute; pointer-events:none; z-index:2; border:1px solid rgba(105,223,255,.24); border-left-color:transparent; border-bottom-color:transparent; border-radius:999px; } .opv-line-a{ width:650px; height:150px; right:-120px; top:92px; transform:rotate(-8deg); animation:opvMedicalFloatA 8s ease-in-out infinite; } .opv-line-b{ width:520px; height:120px; left:-160px; bottom:92px; transform:rotate(8deg); opacity:.55; animation:opvMedicalFloatB 9s ease-in-out infinite; } @keyframes opvMedicalFloatA{ 0%,100%{transform:rotate(-8deg) translate3d(0,0,0);} 50%{transform:rotate(-5deg) translate3d(-12px,10px,0);} } @keyframes opvMedicalFloatB{ 0%,100%{transform:rotate(8deg) translate3d(0,0,0);} 50%{transform:rotate(5deg) translate3d(14px,-8px,0);} } .opv-medical-wrap{ width:100%; max-width:1220px; margin:0 auto; display:grid; grid-template-columns:minmax(350px,455px) 1fr; gap:34px; align-items:center; position:relative; z-index:3; } .opv-medical-image{ position:relative; width:100%; aspect-ratio:4 / 5; padding:12px; border-radius:34px; background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07)), radial-gradient(circle at 50% 0%, rgba(70,219,255,.22), transparent 44%); border:1px solid rgba(132,229,255,.32); box-shadow: 0 30px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20); overflow:hidden; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .opv-medical-image:before{ content:""; position:absolute; inset:0; border-radius:34px; border:1px solid rgba(255,255,255,.18); pointer-events:none; z-index:3; } .opv-medical-image:after{ content:""; position:absolute; left:-70%; top:0; width:42%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-18deg); animation:opvMedicalImageShine 5.4s ease-in-out infinite; z-index:4; pointer-events:none; } @keyframes opvMedicalImageShine{ 0%{left:-70%;} 38%,100%{left:125%;} } .opv-medical-image img{ width:100%; height:100%; display:block; border-radius:23px; object-fit:cover; object-position:center center; filter:saturate(1.04) contrast(1.03); } .opv-medical-box{ position:relative; padding:40px; border-radius:38px; background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075)), radial-gradient(circle at 88% 8%, rgba(70,219,255,.18), transparent 42%); border:1px solid rgba(132,229,255,.28); box-shadow: 0 32px 78px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); overflow:hidden; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .opv-medical-box:before{ content:""; position:absolute; width:300px; height:300px; right:-130px; top:-140px; border-radius:999px; background:radial-gradient(circle, rgba(68,216,255,.22), transparent 70%); pointer-events:none; } .opv-medical-box:after{ content:""; position:absolute; left:0; top:36px; width:5px; height:128px; border-radius:0 999px 999px 0; background:linear-gradient(180deg,#44D8FF,#0BA7D7,#ffffff); box-shadow:0 0 24px rgba(68,216,255,.35); } .opv-medical-badge{ position:relative; z-index:2; display:inline-flex; margin-bottom:15px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(132,229,255,.32); color:#AEEFFF; font-size:.68rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.07em; box-shadow:0 14px 34px rgba(0,0,0,.12); } .opv-medical-box h2{ position:relative; z-index:2; margin:0; color:#ffffff; font-size:clamp(2rem,3.15vw,3.38rem); line-height:1.05; letter-spacing:-2px; font-weight:900; } .opv-medical-box h2 span{ display:block; color:#7FE7FF; text-shadow:0 0 30px rgba(68,216,255,.22); } .opv-medical-box p{ position:relative; z-index:2; margin:17px 0 0; color:rgba(255,255,255,.78); font-size:.96rem; line-height:1.74; font-weight:600; } .opv-medical-warning{ position:relative; z-index:2; margin-top:20px; padding:16px 17px; border-radius:22px; background:rgba(255,255,255,.10); border:1px solid rgba(132,229,255,.24); color:rgba(255,255,255,.82); font-size:.86rem; line-height:1.58; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } .opv-medical-warning strong{ color:#AEEFFF; font-weight:900; } .opv-medical-cta{ position:relative; z-index:2; margin-top:25px; min-height:56px; padding:17px 28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:#031A2D; text-decoration:none; background: linear-gradient(180deg,#ffffff 0%,#AEEFFF 46%,#44D8FF 100%); border:1px solid rgba(255,255,255,.55); box-shadow: 0 20px 42px rgba(68,216,255,.30), 0 0 0 7px rgba(68,216,255,.10), inset 0 1px 0 rgba(255,255,255,.70); font-size:.82rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; animation:opvMedicalCtaPulse 2.7s ease-in-out infinite; transition:transform .22s ease, box-shadow .22s ease; } .opv-medical-cta:before{ content:""; position:absolute; top:0; left:-85%; width:44%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent); transform:skewX(-18deg); animation:opvMedicalCtaShine 3.7s ease-in-out infinite; } .opv-medical-cta:after{ content:"→"; margin-left:10px; font-size:1rem; line-height:1; transition:transform .22s ease; } .opv-medical-cta:hover{ transform:translateY(-3px) scale(1.015); box-shadow: 0 26px 52px rgba(68,216,255,.38), 0 0 0 10px rgba(68,216,255,.12), inset 0 1px 0 rgba(255,255,255,.80); } .opv-medical-cta:hover:after{ transform:translateX(4px); } @keyframes opvMedicalCtaShine{ 0%{left:-85%;} 42%,100%{left:130%;} } @keyframes opvMedicalCtaPulse{ 0%,100%{ box-shadow: 0 20px 42px rgba(68,216,255,.30), 0 0 0 7px rgba(68,216,255,.10), inset 0 1px 0 rgba(255,255,255,.70); } 50%{ box-shadow: 0 26px 54px rgba(68,216,255,.42), 0 0 0 11px rgba(68,216,255,.13), inset 0 1px 0 rgba(255,255,255,.80); } } @media(max-width:980px){ #medical-insight{ padding:52px 14px; } .opv-medical-wrap{ grid-template-columns:1fr; gap:22px; } .opv-medical-image{ max-width:520px; margin:0 auto; aspect-ratio:4 / 5; border-radius:30px; padding:10px; } .opv-medical-image:before{ border-radius:30px; } .opv-medical-image img{ border-radius:21px; } .opv-medical-box{ padding:30px 21px; border-radius:31px; } .opv-medical-box h2{ font-size:2rem; letter-spacing:-1.2px; } .opv-medical-cta{ width:100%; white-space:normal; text-align:center; } .opv-line-a{ width:440px; right:-260px; top:120px; opacity:.45; } .opv-line-b{ width:380px; left:-260px; bottom:120px; opacity:.35; } } @media(max-width:480px){ #medical-insight{ padding:46px 13px; } .opv-medical-image{ border-radius:25px; padding:8px; aspect-ratio:4 / 5; } .opv-medical-image:before{ border-radius:25px; } .opv-medical-image img{ border-radius:18px; } .opv-medical-box h2{ font-size:1.76rem; line-height:1.12; } .opv-medical-box p{ font-size:.9rem; line-height:1.66; } .opv-medical-warning{ font-size:.82rem; border-radius:19px; } .opv-medical-cta{ min-height:58px; padding:17px 18px; font-size:.72rem; letter-spacing:.035em; } } @media(prefers-reduced-motion:reduce){ #medical-insight *, #medical-insight *:before, #medical-insight *:after{ animation:none!important; transition:none!important; } } .opti-white-guarantee-transition, .opti-white-guarantee-transition *{ box-sizing:border-box; } .opti-white-guarantee-transition{ position:relative; width:100%; overflow:hidden; isolation:isolate; background:#ffffff; color:#102033; font-family:'Poppins',Arial,sans-serif; padding:26px 14px; } .opti-wgt-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle at 18% 50%, rgba(8,119,207,.12), transparent 28%), radial-gradient(circle at 82% 50%, rgba(158,216,255,.22), transparent 30%), linear-gradient(90deg,#ffffff 0%,#f4faff 48%,#ffffff 100%); } .opti-wgt-bg::before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient( 90deg, rgba(8,119,207,.035) 0px, rgba(8,119,207,.035) 1px, transparent 1px, transparent 64px ); opacity:.28; } .opti-wgt-bg::after{ content:""; position:absolute; top:0; left:-36%; width:30%; height:100%; background:linear-gradient(90deg,transparent,rgba(8,119,207,.18),transparent); transform:skewX(-18deg); animation:optiWgtShine 6.8s ease-in-out infinite; } .opti-wgt-orb{ position:absolute; width:260px; height:260px; border-radius:999px; border:1px solid rgba(8,119,207,.12); background:rgba(8,119,207,.035); animation:optiWgtFloat 8s ease-in-out infinite; } .orb-left{ left:-130px; top:-110px; } .orb-right{ right:-130px; bottom:-120px; animation-delay:-3s; } .opti-wgt-line{ position:absolute; width:320px; height:1px; background:linear-gradient(90deg,transparent,rgba(8,119,207,.30),transparent); transform:rotate(-16deg); opacity:.45; } .line-a{ left:-110px; top:34%; animation:optiWgtLine 7s linear infinite; } .line-b{ right:-120px; bottom:28%; animation:optiWgtLine 8s linear infinite reverse; } .opti-wgt-dot{ position:absolute; width:6px; height:6px; border-radius:999px; background:#0877CF; box-shadow:0 0 16px rgba(8,119,207,.45); opacity:.75; animation:optiWgtDot 5.4s ease-in-out infinite; } .dot-a{ left:23%; top:28%; } .dot-b{ right:26%; bottom:24%; animation-delay:-2.4s; } .opti-wgt-inner{ position:relative; z-index:2; width:min(1120px,100%); min-height:128px; margin:0 auto; display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:24px; } .opti-wgt-seal{ position:relative; width:150px; height:118px; display:flex; align-items:center; justify-content:center; } .opti-wgt-seal::before{ content:""; position:absolute; width:132px; height:132px; border-radius:999px; background:radial-gradient(circle, rgba(8,119,207,.16), transparent 66%); filter:blur(3px); animation:optiWgtPulse 4.2s ease-in-out infinite; } .opti-wgt-ring{ position:absolute; border-radius:999px; border:1px solid rgba(8,119,207,.26); pointer-events:none; } .ring-a{ width:142px; height:46px; transform:rotate(-14deg); animation:optiWgtRingA 8s linear infinite; } .ring-b{ width:104px; height:104px; border-color:rgba(6,58,112,.12); animation:optiWgtRingB 12s linear infinite reverse; } .opti-wgt-seal img{ position:relative; z-index:3; max-width:118px; max-height:118px; width:auto; height:auto; display:block; filter: drop-shadow(0 14px 22px rgba(6,58,112,.14)) drop-shadow(0 0 16px rgba(8,119,207,.12)); animation:optiWgtSealFloat 4.8s ease-in-out infinite; } .opti-wgt-copy{ position:relative; min-width:0; } .opti-wgt-kicker{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:9px; padding:7px 12px; border-radius:999px; background:#EAF5FF; border:1px solid rgba(8,119,207,.16); color:#0877CF; font-size:10px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.11em; } .opti-wgt-copy h2{ margin:0; color:#063A70; font-size:clamp(28px,4vw,48px); line-height:.96; font-weight:950; letter-spacing:-.06em; text-shadow:0 14px 28px rgba(6,58,112,.08); } .opti-wgt-copy p{ max-width:620px; margin:10px 0 0; color:#2E445C; font-size:14.5px; line-height:1.48; font-weight:650; } .opti-wgt-cta{ position:relative; min-height:50px; padding:0 22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:9px; overflow:hidden; text-decoration:none; color:#ffffff; background:linear-gradient(135deg,#063A70 0%,#0877CF 55%,#3EA6FF 100%); border:1px solid rgba(8,119,207,.22); box-shadow: 0 14px 28px rgba(8,119,207,.22), inset 0 1px 0 rgba(255,255,255,.24); font-size:12px; line-height:1; font-weight:950; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; animation:optiWgtCtaPulse 2.8s ease-in-out infinite; } .opti-wgt-cta::before{ content:""; position:absolute; top:0; left:-75%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent); transform:skewX(-18deg); animation:optiWgtCtaShine 3.4s ease-in-out infinite; } .opti-wgt-cta strong{ position:relative; z-index:2; font-size:16px; } @keyframes optiWgtShine{ 0%{left:-38%; opacity:0;} 18%{opacity:1;} 44%,100%{left:118%; opacity:0;} } @keyframes optiWgtFloat{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-10px) scale(1.03);} } @keyframes optiWgtLine{ 0%{transform:translateX(-50px) rotate(-16deg); opacity:.08;} 45%{opacity:.55;} 100%{transform:translateX(120px) rotate(-16deg); opacity:.08;} } @keyframes optiWgtDot{ 0%,100%{transform:translateY(0) scale(1); opacity:.55;} 50%{transform:translateY(-10px) scale(1.22); opacity:1;} } @keyframes optiWgtPulse{ 0%,100%{transform:scale(1); opacity:.72;} 50%{transform:scale(1.08); opacity:1;} } @keyframes optiWgtSealFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } @keyframes optiWgtRingA{ from{transform:rotate(-14deg);} to{transform:rotate(346deg);} } @keyframes optiWgtRingB{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes optiWgtCtaPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} } @keyframes optiWgtCtaShine{ 0%,45%{left:-75%;} 75%,100%{left:125%;} } @media(max-width:860px){ .opti-wgt-inner{ grid-template-columns:130px 1fr; gap:18px; } .opti-wgt-cta{ grid-column:1 / -1; width:min(100%,360px); margin:4px auto 0; } .opti-wgt-seal{ width:130px; } } @media(max-width:620px){ .opti-white-guarantee-transition{ padding:24px 12px; } .opti-wgt-inner{ min-height:auto; grid-template-columns:1fr; gap:8px; text-align:center; } .opti-wgt-seal{ width:100%; height:118px; } .opti-wgt-seal img{ max-width:112px; max-height:112px; } .opti-wgt-copy{ display:flex; flex-direction:column; align-items:center; } .opti-wgt-kicker{ font-size:9.5px; padding:7px 10px; margin-bottom:10px; } .opti-wgt-copy h2{ max-width:350px; font-size:clamp(28px,8vw,38px); line-height:.98; letter-spacing:-.045em; } .opti-wgt-copy p{ max-width:350px; margin:10px auto 0; font-size:13.5px; line-height:1.42; } .opti-wgt-cta{ min-height:48px; margin-top:12px; font-size:11px; } } .opv-ing-section, .opv-ing-section *{ box-sizing:border-box; } .opv-ing-section{ position:relative; width:100%; margin:0; padding:76px 18px 82px; background: radial-gradient(circle at 18% 12%, rgba(47,201,255,.18), transparent 28%), radial-gradient(circle at 88% 18%, rgba(0,127,190,.24), transparent 34%), radial-gradient(circle at 50% 105%, rgba(47,201,255,.14), transparent 42%), linear-gradient(135deg,#031A2D 0%,#063A5E 42%,#075C86 100%); font-family:'Poppins',Arial,sans-serif; overflow:hidden; isolation:isolate; color:#ffffff; } .opv-ing-section:before{ content:""; position:absolute; inset:0; z-index:1; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px); background-size:78px 78px; mask-image:radial-gradient(circle at 50% 32%, black, transparent 72%); pointer-events:none; } .opv-ing-section:after{ content:""; position:absolute; width:1px; height:1px; left:50%; top:50%; z-index:1; box-shadow: -460px -150px 0 1px rgba(80,215,255,.32), -280px 210px 0 1px rgba(80,215,255,.20), 330px -190px 0 1px rgba(80,215,255,.26), 520px 160px 0 1px rgba(80,215,255,.18), 90px 260px 0 1px rgba(80,215,255,.22); pointer-events:none; } .opv-ing-orb{ position:absolute; border-radius:999px; pointer-events:none; z-index:1; } .opv-ing-orb-a{ width:580px; height:580px; right:-300px; top:-280px; background:radial-gradient(circle, rgba(52,207,255,.26), transparent 68%); } .opv-ing-orb-b{ width:500px; height:500px; left:-280px; bottom:-280px; background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); } .opv-ing-line{ position:absolute; pointer-events:none; z-index:2; border:1px solid rgba(105,223,255,.24); border-left-color:transparent; border-bottom-color:transparent; border-radius:999px; } .opv-ing-line-a{ width:650px; height:150px; right:-120px; top:92px; transform:rotate(-8deg); animation:opvIngFloatA 8s ease-in-out infinite; } .opv-ing-line-b{ width:520px; height:120px; left:-160px; bottom:92px; transform:rotate(8deg); opacity:.55; animation:opvIngFloatB 9s ease-in-out infinite; } @keyframes opvIngFloatA{ 0%,100%{transform:rotate(-8deg) translate3d(0,0,0);} 50%{transform:rotate(-5deg) translate3d(-12px,10px,0);} } @keyframes opvIngFloatB{ 0%,100%{transform:rotate(8deg) translate3d(0,0,0);} 50%{transform:rotate(5deg) translate3d(14px,-8px,0);} } .opv-ing-wrap{ position:relative; z-index:3; width:100%; max-width:1180px; margin:0 auto; text-align:center; } .opv-ing-kicker{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(132,229,255,.32); color:#AEEFFF; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 14px 34px rgba(0,0,0,.12); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .opv-ing-title{ margin:0 0 16px; color:#ffffff; font-size:clamp(2.2rem,6vw,4rem); line-height:.98; letter-spacing:-2px; font-weight:900; } .opv-ing-title span{ display:block; color:#7FE7FF; text-shadow:0 0 30px rgba(68,216,255,.22); } .opv-ing-sub{ max-width:800px; margin:0 auto 36px; color:rgba(255,255,255,.78); font-size:1rem; line-height:1.8; font-weight:600; } .opv-ing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .opv-ing-card{ position:relative; overflow:hidden; padding:14px 14px 20px; border-radius:30px; background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.075)), radial-gradient(circle at 88% 8%, rgba(70,219,255,.15), transparent 42%); border:1px solid rgba(132,229,255,.24); text-align:left; box-shadow: 0 24px 58px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; } .opv-ing-card:hover{ transform:translateY(-7px); border-color:rgba(132,229,255,.42); box-shadow: 0 34px 72px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20); } .opv-ing-card:before{ content:""; position:absolute; width:150px; height:150px; top:-76px; right:-66px; border-radius:999px; background:radial-gradient(circle, rgba(68,216,255,.22), transparent 72%); pointer-events:none; } .opv-ing-card:after{ content:""; position:absolute; left:18px; right:18px; bottom:0; height:4px; border-radius:999px 999px 0 0; background:linear-gradient(90deg,#ffffff,#7FE7FF,#44D8FF); opacity:.78; } .opv-ing-img-box{ position:relative; overflow:hidden; height:160px; border-radius:24px; margin-bottom:16px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 38px rgba(0,0,0,.20); } .opv-ing-img-box:after{ content:""; position:absolute; left:-70%; top:0; width:42%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); animation:opvIngImageShine 5.2s ease-in-out infinite; pointer-events:none; } @keyframes opvIngImageShine{ 0%{left:-70%;} 38%,100%{left:125%;} } .opv-ing-img-box img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease, filter .45s ease; filter:saturate(1.05) contrast(1.03); } .opv-ing-card:hover .opv-ing-img-box img{ transform:scale(1.08); filter:saturate(1.12) contrast(1.06); } .opv-ing-tag{ display:inline-flex; margin-bottom:10px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(132,229,255,.26); color:#AEEFFF; font-size:.66rem; line-height:1; font-weight:900; letter-spacing:.04em; text-transform:uppercase; } .opv-ing-card h3{ margin:0 0 10px; color:#ffffff; font-size:1.08rem; line-height:1.16; font-weight:900; letter-spacing:-.4px; } .opv-ing-card p{ margin:0 0 14px; color:rgba(255,255,255,.73); font-size:.86rem; line-height:1.65; font-weight:600; } .opv-ing-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; } .opv-ing-card li{ position:relative; padding-left:17px; color:rgba(255,255,255,.92); font-size:.77rem; line-height:1.4; font-weight:800; } .opv-ing-card li:before{ content:""; position:absolute; left:0; top:.45em; width:7px; height:7px; border-radius:999px; background:#7FE7FF; box-shadow:0 0 12px rgba(127,231,255,.55); } .opv-ing-note{ max-width:850px; margin:31px auto 0; padding:18px 20px; border-radius:24px; background:rgba(255,255,255,.10); border:1px solid rgba(132,229,255,.24); color:rgba(255,255,255,.80); font-size:.92rem; line-height:1.72; font-weight:600; box-shadow: 0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .opv-ing-note strong{ color:#AEEFFF; font-weight:900; } .opv-ing-cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:62px; margin-top:32px; padding:17px 32px; border-radius:999px; background: linear-gradient(180deg,#ffffff 0%,#AEEFFF 46%,#44D8FF 100%); color:#031A2D; text-decoration:none; font-size:.96rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.04em; overflow:hidden; box-shadow: 0 22px 46px rgba(68,216,255,.32), 0 0 0 8px rgba(68,216,255,.10), inset 0 1px 0 rgba(255,255,255,.70); animation:opvIngCtaPulse 2.7s ease-in-out infinite; transition: transform .24s ease, box-shadow .24s ease; } .opv-ing-cta:before{ content:""; position:absolute; top:0; left:-90%; width:50%; height:100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.82), transparent); transform:skewX(-18deg); animation:opvIngShine 3.8s ease-in-out infinite; } .opv-ing-cta:after{ content:"→"; margin-left:10px; font-size:1rem; line-height:1; transition:transform .22s ease; } .opv-ing-cta:hover{ transform:translateY(-4px) scale(1.015); box-shadow: 0 28px 56px rgba(68,216,255,.42), 0 0 0 11px rgba(68,216,255,.13), inset 0 1px 0 rgba(255,255,255,.80); } .opv-ing-cta:hover:after{ transform:translateX(4px); } @keyframes opvIngShine{ 0%{left:-90%;} 45%,100%{left:140%;} } @keyframes opvIngCtaPulse{ 0%,100%{ box-shadow: 0 22px 46px rgba(68,216,255,.32), 0 0 0 8px rgba(68,216,255,.10), inset 0 1px 0 rgba(255,255,255,.70); } 50%{ box-shadow: 0 28px 58px rgba(68,216,255,.43), 0 0 0 12px rgba(68,216,255,.13), inset 0 1px 0 rgba(255,255,255,.80); } } @media(max-width:1020px){ .opv-ing-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:620px){ .opv-ing-section{ padding:54px 14px 60px; } .opv-ing-title{ font-size:clamp(2rem,10vw,3rem); } .opv-ing-sub{ font-size:.95rem; line-height:1.72; margin-bottom:28px; } .opv-ing-grid{ grid-template-columns:1fr; gap:16px; } .opv-ing-card{ border-radius:26px; } .opv-ing-img-box{ height:170px; } .opv-ing-note{ font-size:.84rem; border-radius:21px; } .opv-ing-cta{ width:100%; min-height:60px; padding:17px 18px; font-size:.78rem; letter-spacing:.035em; } } @media(prefers-reduced-motion:reduce){ .opv-ing-section *, .opv-ing-section *:before, .opv-ing-section *:after{ animation:none !important; transition:none !important; } } .opti-riskfree-section, .opti-riskfree-section *{ box-sizing:border-box; } .opti-riskfree-section{ position:relative; width:100%; margin:0; padding:48px 14px 56px; background:#ffffff; color:#102033; font-family:'Poppins',Arial,sans-serif; overflow:hidden; isolation:isolate; } .opti-riskfree-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle at 18% 20%, rgba(8,119,207,.10), transparent 30%), radial-gradient(circle at 88% 80%, rgba(158,216,255,.20), transparent 34%), linear-gradient(180deg,#ffffff 0%,#f4faff 54%,#ffffff 100%); } .opti-riskfree-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,119,207,.035), transparent 42%, rgba(8,119,207,.035)); opacity:.85; } .opti-orb{ position:absolute; border-radius:999px; border:1px solid rgba(8,119,207,.12); background:rgba(8,119,207,.035); animation:optiOrbFloat 8s ease-in-out infinite; } .orb-a{ width:320px; height:320px; left:-150px; top:-120px; } .orb-b{ width:260px; height:260px; right:-120px; bottom:-120px; animation-delay:-3s; } .opti-riskfree-wrap{ position:relative; z-index:2; width:100%; max-width:680px; margin:0 auto; } .opti-riskfree-image{ width:100%; margin:0 auto 20px; text-align:center; position:relative; } .opti-riskfree-image::before{ content:""; position:absolute; left:50%; top:50%; width:340px; height:180px; transform:translate(-50%,-50%); border-radius:999px; background:radial-gradient(circle, rgba(8,119,207,.16), transparent 68%); filter:blur(4px); z-index:0; } .opti-riskfree-image img{ position:relative; z-index:2; width:100%; max-width:560px; height:auto; display:block; margin:0 auto; object-fit:contain; filter: drop-shadow(0 18px 28px rgba(6,58,112,.14)) drop-shadow(0 0 16px rgba(8,119,207,.10)); } .opti-riskfree-copy{ width:100%; text-align:center; } .opti-kicker{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; padding:8px 13px; border-radius:999px; background:#EAF5FF; border:1px solid rgba(8,119,207,.14); color:#0877CF; font-size:11px; line-height:1; font-weight:900; letter-spacing:.10em; text-transform:uppercase; } .opti-riskfree-copy h2{ margin:0; color:#063A70; font-size:clamp(1.35rem,4.3vw,2rem); line-height:1.13; font-weight:950; letter-spacing:-.035em; text-transform:uppercase; } .opti-riskfree-copy h3{ margin:22px 0 18px; color:#0877CF; font-size:clamp(1rem,3.2vw,1.28rem); line-height:1.28; font-weight:850; letter-spacing:-.015em; } .opti-riskfree-copy h3 span{ display:inline-block; margin-top:3px; color:#102033; text-transform:uppercase; letter-spacing:.06em; font-size:.92em; } .opti-riskfree-list{ width:100%; display:flex; flex-direction:column; gap:13px; text-align:left; } .opti-riskfree-item{ display:grid; grid-template-columns:42px 26px 1fr; gap:10px; align-items:center; padding:10px 10px; border-radius:16px; background:rgba(255,255,255,.88); border:1px solid rgba(8,119,207,.12); box-shadow:0 10px 24px rgba(6,58,112,.06); } .opti-riskfree-num{ width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#063A70 0%,#0877CF 100%); color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:1.55rem; line-height:1; font-weight:950; font-style:italic; letter-spacing:-.04em; box-shadow:0 8px 16px rgba(8,119,207,.22); } .opti-riskfree-check{ width:25px; height:25px; border-radius:999px; background:#17B15E; color:#ffffff; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; font-weight:950; box-shadow:0 6px 14px rgba(23,177,94,.22); } .opti-riskfree-item p{ margin:0; color:#102033; font-size:clamp(.92rem,2.8vw,1.06rem); line-height:1.22; font-weight:800; letter-spacing:-.02em; } .opti-riskfree-bottom{ margin:24px 0 0; padding:18px 18px; border-radius:18px; background:#F3FAFF; border:1px solid rgba(8,119,207,.12); color:#2E445C; text-align:center; font-size:clamp(.96rem,3vw,1.08rem); line-height:1.42; font-weight:650; letter-spacing:-.015em; } @keyframes optiOrbFloat{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(0,-12px,0) scale(1.03); } } @media(max-width:520px){ .opti-riskfree-section{ padding:36px 12px 44px; } .opti-riskfree-image{ margin-bottom:18px; } .opti-riskfree-image img{ max-width:100%; } .opti-riskfree-copy h2{ font-size:1.18rem; line-height:1.2; letter-spacing:-.02em; } .opti-riskfree-copy h3{ margin:18px 0 16px; font-size:1rem; } .opti-riskfree-list{ gap:12px; } .opti-riskfree-item{ grid-template-columns:36px 23px 1fr; gap:8px; padding:9px 8px; border-radius:14px; } .opti-riskfree-num{ width:34px; height:34px; font-size:1.3rem; border-radius:8px; } .opti-riskfree-check{ width:22px; height:22px; font-size:.88rem; } .opti-riskfree-item p{ font-size:.88rem; line-height:1.22; } .opti-riskfree-bottom{ margin-top:20px; padding:15px 14px; font-size:.92rem; line-height:1.36; } } .opti-guarantee-strip, .opti-guarantee-strip *{ box-sizing:border-box; } .opti-guarantee-strip{ position:relative; width:100%; overflow:hidden; isolation:isolate; background:#020812; color:#ffffff; font-family:'Poppins',Arial,sans-serif; padding:34px 16px; } .opti-g-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(circle at 28% 50%, rgba(62,166,255,.24), transparent 30%), radial-gradient(circle at 82% 40%, rgba(158,216,255,.12), transparent 32%), linear-gradient(90deg,#020812 0%,#061B33 48%,#020812 100%); } .opti-g-bg::before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient( 90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 60px ); opacity:.24; } .opti-g-bg::after{ content:""; position:absolute; top:0; left:-34%; width:30%; height:100%; background:linear-gradient(90deg,transparent,rgba(62,166,255,.32),transparent); transform:skewX(-18deg); animation:optiGShine 6.8s ease-in-out infinite; } .opti-g-orb{ position:absolute; width:280px; height:280px; border-radius:999px; border:1px solid rgba(62,166,255,.14); background:rgba(62,166,255,.035); animation:optiGFloat 8s ease-in-out infinite; } .orb-a{ left:-120px; top:-90px; } .orb-b{ right:-120px; bottom:-120px; animation-delay:-3s; } .opti-g-line{ position:absolute; width:340px; height:1px; background:linear-gradient(90deg,transparent,rgba(158,216,255,.48),transparent); transform:rotate(-16deg); opacity:.45; } .line-a{ left:-100px; top:35%; animation:optiGLine 7s linear infinite; } .line-b{ right:-120px; bottom:30%; animation:optiGLine 8s linear infinite reverse; } .opti-g-inner{ position:relative; z-index:2; width:min(1080px,100%); margin:0 auto; display:grid; grid-template-columns:220px 1fr; align-items:center; gap:30px; } .opti-g-seal{ position:relative; min-height:190px; display:flex; align-items:center; justify-content:center; } .opti-g-seal::before{ content:""; position:absolute; width:172px; height:172px; border-radius:999px; background:radial-gradient(circle, rgba(62,166,255,.28), transparent 66%); filter:blur(3px); animation:optiGPulse 4.2s ease-in-out infinite; } .opti-g-ring{ position:absolute; border-radius:999px; border:1px solid rgba(158,216,255,.34); pointer-events:none; } .ring-a{ width:190px; height:62px; transform:rotate(-14deg); animation:optiGRingA 8s linear infinite; } .ring-b{ width:142px; height:142px; border-color:rgba(255,255,255,.15); animation:optiGRingB 12s linear infinite reverse; } .opti-g-seal img{ position:relative; z-index:3; max-width:172px; max-height:172px; width:auto; height:auto; display:block; filter: drop-shadow(0 18px 24px rgba(0,0,0,.52)) drop-shadow(0 0 18px rgba(62,166,255,.36)); animation:optiGSealFloat 4.8s ease-in-out infinite; } .opti-g-copy{ position:relative; max-width:760px; } .opti-g-copy span{ display:inline-flex; margin-bottom:12px; padding:8px 13px; border-radius:999px; background:rgba(255,255,255,.075); border:1px solid rgba(158,216,255,.20); color:#9ED8FF; font-size:11px; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.11em; } .opti-g-copy h2{ margin:0; max-width:720px; color:#ffffff; font-size:clamp(28px,4.5vw,54px); line-height:.96; font-weight:950; letter-spacing:-.06em; text-shadow:0 18px 30px rgba(0,0,0,.32); } .opti-g-copy p{ max-width:620px; margin:14px 0 0; color:rgba(255,255,255,.72); font-size:15px; line-height:1.55; font-weight:600; } @keyframes optiGShine{ 0%{left:-38%; opacity:0;} 18%{opacity:1;} 44%,100%{left:118%; opacity:0;} } @keyframes optiGFloat{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-10px) scale(1.03);} } @keyframes optiGLine{ 0%{transform:translateX(-50px) rotate(-16deg); opacity:.08;} 45%{opacity:.55;} 100%{transform:translateX(120px) rotate(-16deg); opacity:.08;} } @keyframes optiGPulse{ 0%,100%{transform:scale(1); opacity:.72;} 50%{transform:scale(1.08); opacity:1;} } @keyframes optiGSealFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } @keyframes optiGRingA{ from{transform:rotate(-14deg);} to{transform:rotate(346deg);} } @keyframes optiGRingB{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @media(max-width:760px){ .opti-guarantee-strip{ padding:30px 14px; } .opti-g-inner{ grid-template-columns:1fr; gap:8px; text-align:center; } .opti-g-seal{ min-height:160px; } .opti-g-seal img{ max-width:145px; max-height:145px; } .opti-g-copy span{ font-size:9.5px; padding:7px 10px; } .opti-g-copy h2{ font-size:clamp(28px,8vw,38px); line-height:.98; letter-spacing:-.045em; } .opti-g-copy p{ margin:12px auto 0; font-size:13.5px; max-width:350px; } } .opv-reviews-section, .opv-reviews-section *{ box-sizing:border-box; } .opv-reviews-section{ width:100%; margin:0; padding:58px 16px 64px; background: radial-gradient(circle at 10% 8%, rgba(0,151,214,.10), transparent 26%), radial-gradient(circle at 90% 16%, rgba(3,58,94,.09), transparent 28%), radial-gradient(circle at 50% 100%, rgba(0,151,214,.08), transparent 32%), #ffffff; font-family:'Poppins',Arial,sans-serif; color:#071d33; overflow:hidden; position:relative; isolation:isolate; } .opv-reviews-section:before{ content:""; position:absolute; inset:0; z-index:1; opacity:.42; background-image: linear-gradient(rgba(0,93,140,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(0,93,140,.055) 1px, transparent 1px); background-size:82px 82px; mask-image:radial-gradient(circle at 50% 30%, black, transparent 72%); pointer-events:none; } .opv-reviews-section:after{ content:""; position:absolute; width:1px; height:1px; left:50%; top:50%; z-index:1; box-shadow: -430px -130px 0 1px rgba(0,139,198,.20), -250px 190px 0 1px rgba(0,139,198,.14), 340px -180px 0 1px rgba(0,139,198,.18), 490px 150px 0 1px rgba(0,139,198,.12), 110px 250px 0 1px rgba(0,139,198,.16); pointer-events:none; } .opv-abstract-orb{ position:absolute; border-radius:999px; pointer-events:none; z-index:1; } .opv-orb-1{ width:560px; height:560px; right:-290px; top:-280px; background:radial-gradient(circle, rgba(0,153,214,.15), transparent 68%); } .opv-orb-2{ width:460px; height:460px; left:-250px; bottom:-250px; background:radial-gradient(circle, rgba(3,58,94,.10), transparent 70%); } .opv-abstract-line{ position:absolute; pointer-events:none; z-index:2; border:1px solid rgba(0,139,198,.18); border-left-color:transparent; border-bottom-color:transparent; border-radius:999px; } .opv-line-1{ width:650px; height:150px; right:-140px; top:86px; transform:rotate(-8deg); animation:opvReviewLineA 8s ease-in-out infinite; } .opv-line-2{ width:520px; height:118px; left:-150px; bottom:92px; transform:rotate(7deg); opacity:.52; animation:opvReviewLineB 9s ease-in-out infinite; } @keyframes opvReviewLineA{ 0%,100%{transform:rotate(-8deg) translate3d(0,0,0);} 50%{transform:rotate(-5deg) translate3d(-12px,10px,0);} } @keyframes opvReviewLineB{ 0%,100%{transform:rotate(7deg) translate3d(0,0,0);} 50%{transform:rotate(4deg) translate3d(14px,-8px,0);} } .opv-reviews-wrap{ position:relative; z-index:3; max-width:1080px; margin:0 auto; } .opv-reviews-head{ text-align:center; margin-bottom:30px; } .opv-reviews-badge{ display:inline-flex; align-items:center; justify-content:center; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.86); border:1px solid rgba(0,117,170,.18); color:#075C86; font-size:.72rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; box-shadow: 0 14px 34px rgba(0,54,96,.08), inset 0 1px 0 rgba(255,255,255,.9); } .opv-reviews-title{ font-size:clamp(2.05rem,4.8vw,3.25rem); font-weight:900; margin:0 0 13px; line-height:1.05; letter-spacing:-.055em; color:#071d33; } .opv-reviews-title span{ display:block; background:linear-gradient(90deg,#07365F 0%,#007DB5 48%,#0BA7D7 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .opv-reviews-subtitle{ color:#506173; max-width:780px; margin:0 auto; line-height:1.72; font-size:1rem; font-weight:600; } .opv-featured-review{ position:relative; overflow:hidden; border-radius:34px; padding:30px; margin-bottom:22px; background: linear-gradient(135deg,#031A2D 0%,#063A5E 50%,#087CB3 100%); border:1px solid rgba(255,255,255,.24); box-shadow: 0 28px 66px rgba(0,93,140,.24), inset 0 1px 0 rgba(255,255,255,.22); color:#ffffff; } .opv-featured-review:before{ content:""; position:absolute; inset:0; background:linear-gradient(125deg, transparent 0%, rgba(255,255,255,.15) 25%, transparent 48%); transform:translateX(-130%); animation:opvReviewShine 7s linear infinite; pointer-events:none; } .opv-featured-review:after{ content:""; position:absolute; right:-110px; top:-110px; width:270px; height:270px; border-radius:999px; background:rgba(68,216,255,.18); pointer-events:none; } .opv-featured-glow{ position:absolute; left:-90px; bottom:-100px; width:250px; height:250px; border-radius:999px; background:rgba(68,216,255,.14); filter:blur(8px); pointer-events:none; } .opv-featured-top{ position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin-bottom:18px; } .opv-featured-avatar{ width:82px; height:82px; border-radius:999px; overflow:hidden; flex-shrink:0; border:3px solid rgba(127,231,255,.92); box-shadow:0 14px 28px rgba(0,0,0,.22); background:#ffffff; } .opv-featured-avatar img, .opv-carousel-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .opv-featured-meta h3{ margin:0; font-size:1.18rem; font-weight:900; color:#ffffff; line-height:1.1; } .opv-featured-meta span{ display:block; margin-top:5px; color:rgba(255,255,255,.78); font-size:.9rem; font-weight:700; } .opv-stars{ color:#7FE7FF; margin-top:7px; letter-spacing:.08em; font-size:1rem; line-height:1; text-shadow:0 0 16px rgba(127,231,255,.34); } .opv-featured-review p{ position:relative; z-index:2; margin:0; color:rgba(255,255,255,.94); font-size:1.04rem; line-height:1.82; font-weight:500; } .opv-featured-tag{ position:relative; z-index:2; display:inline-flex; margin-top:18px; padding:9px 13px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.20); color:#DDF8FF; font-size:.78rem; line-height:1; font-weight:900; } .opv-carousel-premium{ position:relative; overflow:hidden; border-radius:32px; background: linear-gradient(135deg,#031A2D 0%,#063A5E 58%,#087CB3 100%); border:1px solid rgba(255,255,255,.24); box-shadow: 0 26px 62px rgba(0,93,140,.22), inset 0 1px 0 rgba(255,255,255,.20); padding:23px; color:#ffffff; } .opv-carousel-premium:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 0% 0%, rgba(68,216,255,.16), transparent 32%), radial-gradient(circle at 100% 100%, rgba(0,0,0,.18), transparent 40%); pointer-events:none; } .opv-carousel-topbar{ position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; } .opv-carousel-badge{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.20); color:#DDF8FF; font-size:.72rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } .opv-carousel-nav{ display:flex; gap:8px; align-items:center; } .opv-carousel-nav button{ width:10px; height:10px; border:none; border-radius:999px; background:rgba(255,255,255,.36); cursor:pointer; padding:0; transition:all .25s ease; } .opv-carousel-nav button.active{ width:30px; background:#7FE7FF; box-shadow:0 0 14px rgba(127,231,255,.55); } .opv-carousel-viewport{ position:relative; z-index:2; overflow:hidden; min-height:236px; } .opv-carousel-slide{ position:absolute; inset:0; width:100%; opacity:0; visibility:hidden; transform:translateX(100%); transition: transform .58s cubic-bezier(.22,.8,.22,1), opacity .58s ease, visibility .58s ease; pointer-events:none; } .opv-carousel-slide.active{ position:relative; opacity:1; visibility:visible; transform:translateX(0); pointer-events:auto; } .opv-carousel-card{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.20); border-radius:24px; padding:22px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.13); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .opv-carousel-card-top{ display:flex; align-items:center; gap:14px; margin-bottom:15px; } .opv-carousel-avatar{ width:66px; height:66px; border-radius:999px; overflow:hidden; flex-shrink:0; border:2px solid rgba(127,231,255,.88); box-shadow:0 10px 22px rgba(0,0,0,.18); background:#ffffff; } .opv-carousel-meta strong{ display:block; color:#ffffff; font-size:1.06rem; font-weight:900; line-height:1.1; } .opv-carousel-meta span{ display:block; margin-top:4px; color:rgba(255,255,255,.78); font-size:.86rem; font-weight:700; } .opv-carousel-card p{ margin:0; font-size:1rem; line-height:1.78; color:rgba(255,255,255,.92); font-weight:500; } .opv-carousel-arrows{ position:relative; z-index:4; display:flex; justify-content:center; align-items:center; gap:12px; margin:16px 0 4px; } .opv-carousel-arrows button{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.16); color:#ffffff; font-size:26px; line-height:1; font-weight:900; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:.25s ease; box-shadow:0 12px 28px rgba(0,0,0,.18); } .opv-carousel-arrows button:hover{ background:#7FE7FF; color:#031A2D; transform:translateY(-2px) scale(1.05); box-shadow:0 16px 34px rgba(0,0,0,.25); } .opv-review-cta{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; max-width:460px; min-height:64px; margin:20px auto 0; padding:17px 24px; border-radius:999px; background: linear-gradient(180deg,#ffffff 0%,#AEEFFF 46%,#44D8FF 100%); color:#031A2D; text-decoration:none; font-size:.98rem; line-height:1; font-weight:900; text-transform:uppercase; letter-spacing:.035em; overflow:hidden; box-shadow: 0 22px 46px rgba(68,216,255,.32), 0 0 0 8px rgba(68,216,255,.10), inset 0 1px 0 rgba(255,255,255,.70); transition:.25s ease; animation:opvReviewCtaPulse 2.8s ease-in-out infinite; } .opv-review-cta:before{ content:""; position:absolute; top:0; left:-90%; width:50%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.82),transparent); transform:skewX(-18deg); animation:opvReviewCtaShine 3.8s ease-in-out infinite; } .opv-review-cta:hover{ transform:translateY(-4px) scale(1.015); box-shadow: 0 28px 56px rgba(68,216,255,.42), 0 0 0 11px rgba(68,216,255,.13), inset 0 1px 0 rgba(255,255,255,.80); } .opv-review-note{ position:relative; z-index:2; margin-top:13px; text-align:center; color:rgba(255,255,255,.80); font-size:.84rem; font-weight:700; line-height:1.45; } @keyframes opvReviewShine{ 0%{transform:translateX(-130%);} 100%{transform:translateX(140%);} } @keyframes opvReviewCtaPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} } @keyframes opvReviewCtaShine{ 0%{left:-90%;} 45%,100%{left:140%;} } @media(max-width:640px){ .opv-reviews-section{ padding:42px 12px 48px; } .opv-reviews-head{ text-align:left; margin-bottom:23px; } .opv-reviews-badge{ width:100%; font-size:.66rem; line-height:1.35; } .opv-reviews-title{ text-align:left; } .opv-reviews-title span{ display:inline; } .opv-reviews-subtitle{ text-align:left; font-size:.94rem; line-height:1.65; } .opv-featured-review{ padding:21px 15px; border-radius:26px; margin-bottom:18px; } .opv-featured-top{ gap:13px; } .opv-featured-avatar{ width:66px; height:66px; } .opv-featured-meta h3{ font-size:1.02rem; } .opv-featured-meta span{ font-size:.8rem; } .opv-featured-review p{ font-size:.94rem; line-height:1.68; } .opv-featured-tag{ width:100%; justify-content:center; text-align:center; font-size:.7rem; line-height:1.35; } .opv-carousel-premium{ padding:16px 13px; border-radius:24px; } .opv-carousel-topbar{ justify-content:center; text-align:center; margin-bottom:14px; } .opv-carousel-badge{ width:100%; font-size:.66rem; } .opv-carousel-nav{ justify-content:center; } .opv-carousel-viewport{ min-height:330px; } .opv-carousel-card{ padding:16px 14px; border-radius:20px; } .opv-carousel-avatar{ width:56px; height:56px; } .opv-carousel-meta strong{ font-size:.98rem; } .opv-carousel-meta span{ font-size:.78rem; } .opv-carousel-card p{ font-size:.91rem; line-height:1.66; } .opv-review-cta{ min-height:60px; font-size:.78rem; padding:15px 16px; border-radius:999px; } .opv-review-note{ font-size:.76rem; } } @media(max-width:370px){ .opv-carousel-viewport{ min-height:365px; } } @media(prefers-reduced-motion:reduce){ .opv-reviews-section *, .opv-reviews-section *:before, .opv-reviews-section *:after{ animation:none !important; transition:none !important; } } .opti-pricing-section, .opti-pricing-section *{ box-sizing:border-box; } .opti-pricing-section{ --opti-bg:#ffffff; --opti-card:#ffffff; --opti-card-2:#F1F8FF; --opti-soft:#EAF5FF; --opti-border:#CFE6FA; --opti-text:#102033; --opti-text-soft:#5B6B7E; --opti-blue:#0877CF; --opti-blue-dark:#063A70; --opti-blue-deep:#021B36; --opti-sky:#9ED8FF; --opti-green:#17B15E; width:100%; padding:28px 10px; background:var(--opti-bg); font-family:'Poppins',Arial,sans-serif; } .opti-pricing-wrap{ width:100%; max-width:430px; margin:0 auto; display:flex; flex-direction:column; gap:18px; } .opti-price-card{ display:block; position:relative; overflow:hidden; text-decoration:none; border-radius:24px; background: radial-gradient(circle at 100% 0%, rgba(8,119,207,.08), transparent 34%), linear-gradient(180deg,var(--opti-card) 0%, var(--opti-card-2) 100%); border:1.5px solid var(--opti-border); color:var(--opti-text); box-shadow: 0 14px 34px rgba(6,58,112,.09), inset 0 1px 0 rgba(255,255,255,.95); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .opti-price-card:hover{ transform:translateY(-3px); border-color:rgba(8,119,207,.34); box-shadow: 0 20px 42px rgba(6,58,112,.15), inset 0 1px 0 rgba(255,255,255,.95); } .opti-featured{ border:3px solid var(--opti-blue); box-shadow: 0 18px 42px rgba(8,119,207,.18), inset 0 1px 0 rgba(255,255,255,.98); } .opti-featured::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 0%, rgba(158,216,255,.42), transparent 30%), radial-gradient(circle at 100% 100%, rgba(8,119,207,.12), transparent 32%); pointer-events:none; } .opti-card-top{ position:relative; z-index:2; padding:10px 14px; text-align:center; font-size:1rem; line-height:1; font-weight:900; color:#ffffff; background:linear-gradient(135deg,#063A70 0%,#0877CF 55%,#063A70 100%); border-bottom:1px solid rgba(255,255,255,.16); letter-spacing:.03em; } .opti-card-body{ position:relative; z-index:2; display:grid; grid-template-columns:48% 52%; align-items:center; gap:4px; padding:14px 14px 12px; } .opti-left{ position:relative; } .opti-mini-label{ display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 10px; border-radius:8px; background:var(--opti-blue-dark); color:#ffffff; font-size:.84rem; font-weight:800; line-height:1; margin-bottom:8px; box-shadow:0 6px 14px rgba(6,58,112,.20); } .opti-left h3{ margin:0; color:var(--opti-text); font-size:1.1rem; line-height:1.06; font-weight:900; letter-spacing:-.3px; } .opti-left p{ margin:5px 0 10px; color:var(--opti-text-soft); font-size:.82rem; line-height:1.15; font-weight:700; } .opti-product-img{ width:100%; min-height:128px; display:flex; align-items:flex-end; justify-content:center; position:relative; } .opti-product-img::before{ content:""; position:absolute; width:118px; height:118px; border-radius:999px; background: radial-gradient(circle, rgba(158,216,255,.34), transparent 62%); bottom:18px; z-index:0; filter:blur(1px); } .opti-product-img::after{ content:""; position:absolute; bottom:4px; width:78%; height:18px; border-radius:999px; background:rgba(6,58,112,.14); filter:blur(8px); z-index:0; } .opti-product-img img{ position:relative; z-index:2; width:100%; max-width:170px; height:auto; display:block; filter: drop-shadow(0 10px 18px rgba(6,58,112,.18)) drop-shadow(0 0 12px rgba(8,119,207,.12)); transition:transform .25s ease; } .opti-price-card:hover .opti-product-img img{ transform:translateY(-2px); } .opti-img-six img{ max-width:190px; } .opti-right{ display:flex; flex-direction:column; align-items:stretch; } .opti-price-row{ display:flex; align-items:flex-start; justify-content:center; gap:2px; margin-bottom:8px; color:var(--opti-blue-dark); } .opti-price-row.dark{ color:var(--opti-blue-dark); } .opti-dollar{ font-size:1.6rem; font-weight:900; line-height:1; margin-top:6px; } .opti-price-row strong{ font-size:3.9rem; line-height:.82; font-weight:900; letter-spacing:-3px; } .opti-price-row small{ font-size:.67rem; line-height:.95; font-weight:900; text-align:left; margin-top:7px; color:#31506E; } .opti-benefit{ width:100%; margin-bottom:6px; padding:6px 8px; border-radius:10px; background:#EAF5FF; color:var(--opti-blue-dark); font-size:.72rem; line-height:1; font-weight:900; text-align:center; white-space:nowrap; border:1px solid rgba(8,119,207,.10); } .opti-benefit.light{ background:#F3FAFF; color:var(--opti-blue-dark); border:1px solid rgba(8,119,207,.10); } .opti-total{ margin-top:6px; text-align:center; color:#5B6B7E; font-size:.9rem; line-height:1.15; font-weight:700; } .opti-total strong{ color:#102033; font-size:1.12rem; font-weight:900; } .opti-total.dark-total{ color:#5B6B7E; } .opti-total.dark-total strong{ color:#102033; } .opti-shipping{ margin-top:6px; text-align:center; font-size:.95rem; line-height:1; font-weight:900; } .opti-shipping.free, .opti-shipping.paid{ color:var(--opti-green); } .opti-buy-btn{ position:relative; z-index:2; margin:0 14px 14px; min-height:58px; padding:10px 14px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:14px; background:linear-gradient(135deg,var(--opti-blue-dark) 0%,var(--opti-blue) 55%,#3EA6FF 100%); color:#ffffff; font-size:1.06rem; line-height:1; font-weight:900; box-shadow: 0 8px 18px rgba(8,119,207,.24), inset 0 1px 0 rgba(255,255,255,.24); transition:transform .22s ease, box-shadow .22s ease; overflow:hidden; } .opti-buy-btn::before{ content:""; position:absolute; top:0; left:-70%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg); animation:optiBtnShine 3.4s ease-in-out infinite; } .opti-buy-btn span{ display:block; font-size:.78rem; font-weight:700; opacity:.95; position:relative; z-index:2; } .opti-buy-btn::after{ content:""; position:absolute; inset:1px; border-radius:13px; border:1px solid rgba(255,255,255,.12); pointer-events:none; } .opti-price-card:hover .opti-buy-btn{ transform:translateY(-1px); box-shadow: 0 12px 24px rgba(8,119,207,.32), inset 0 1px 0 rgba(255,255,255,.24); } @keyframes optiBtnShine{ 0%,45%{left:-70%;} 75%,100%{left:125%;} } @media(min-width:900px){ .opti-pricing-wrap{ max-width:1180px; display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:22px; } .opti-featured{ order:2; transform:scale(1.03); } .opti-price-card:nth-child(2){ order:1; margin-top:34px; } .opti-price-card:nth-child(3){ order:3; margin-top:34px; } .opti-price-card:hover.opti-featured{ transform:scale(1.03) translateY(-3px); } .opti-card-body{ min-height:282px; } } @media(max-width:420px){ .opti-pricing-section{ padding:22px 8px; } .opti-card-body{ padding:13px 11px 11px; grid-template-columns:48% 52%; } .opti-left h3{ font-size:1rem; } .opti-left p{ font-size:.76rem; } .opti-product-img{ min-height:116px; } .opti-product-img img{ max-width:152px; } .opti-img-six img{ max-width:172px; } .opti-price-row strong{ font-size:3.45rem; } .opti-benefit{ font-size:.64rem; padding:6px 4px; } .opti-buy-btn{ min-height:56px; font-size:1rem; } .opti-buy-btn span{ font-size:.72rem; } } .opv-timer-box, .opv-timer-box *{ box-sizing:border-box; } .opv-timer-box{ width:100%; margin:0; padding:22px 12px; background: radial-gradient(circle at 12% 10%, rgba(68,216,255,.18), transparent 30%), radial-gradient(circle at 90% 90%, rgba(7,92,134,.10), transparent 34%), linear-gradient(180deg,#F4FBFF 0%,#E8F6FF 100%); font-family:'Poppins',Arial,sans-serif; } .opv-timer-wrap{ max-width:940px; margin:0 auto; padding:20px 20px; border-radius:26px; background:rgba(255,255,255,.78); color:#071d33; display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; position:relative; overflow:hidden; border:1px solid rgba(0,117,170,.16); box-shadow: 0 16px 38px rgba(7,92,134,.10), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .opv-timer-wrap:before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 10% 0%,rgba(68,216,255,.18),transparent 28%), radial-gradient(circle at 100% 100%,rgba(7,92,134,.10),transparent 36%); pointer-events:none; } .opv-timer-wrap:after{ content:""; position:absolute; top:0; left:-80%; width:48%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.62),transparent); transform:skewX(-18deg); animation:opvTimerShine 4s ease-in-out infinite; pointer-events:none; } .opv-timer-content{ position:relative; z-index:2; } .opv-timer-badge{ display:inline-flex; align-items:center; justify-content:center; padding:7px 11px; border-radius:999px; background:#ffffff; border:1px solid rgba(0,117,170,.16); color:#075C86; font-size:.68rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px; box-shadow:0 8px 18px rgba(7,92,134,.06); } .opv-timer-content h3{ margin:0; color:#071d33; font-size:clamp(1.18rem,3.8vw,1.85rem); line-height:1.12; letter-spacing:-.5px; font-weight:900; } .opv-timer-content h3 span{ display:inline-flex; align-items:center; justify-content:center; min-width:88px; margin-left:6px; padding:6px 10px; border-radius:12px; background:linear-gradient(180deg,#0BA7D7 0%,#07365F 100%); color:#ffffff; font-weight:900; box-shadow:0 10px 22px rgba(7,92,134,.22); } .opv-timer-content p{ margin:8px 0 0; color:#42576B; font-size:.9rem; line-height:1.45; font-weight:700; } .opv-timer-cta{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 24px; border-radius:999px; background:linear-gradient(180deg,#10B8EA 0%,#007DB5 45%,#07365F 100%); color:#ffffff; text-decoration:none; font-size:.9rem; line-height:1; font-weight:900; white-space:nowrap; box-shadow: 0 14px 30px rgba(0,117,170,.28), 0 0 0 6px rgba(68,216,255,.12), inset 0 1px 0 rgba(255,255,255,.24); animation:opvTimerPulse 2.4s ease-in-out infinite; overflow:hidden; } .opv-timer-cta:before{ content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.46),transparent); transform:skewX(-18deg); animation:opvTimerCtaShine 3.8s ease-in-out infinite; } @keyframes opvTimerShine{ 0%{left:-80%;} 48%,100%{left:135%;} } @keyframes opvTimerCtaShine{ 0%{left:-80%;} 42%,100%{left:125%;} } @keyframes opvTimerPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} } @media(max-width:720px){ .opv-timer-box{ padding:18px 12px; } .opv-timer-wrap{ grid-template-columns:1fr; gap:14px; padding:18px 15px; border-radius:22px; text-align:center; } .opv-timer-badge{ width:100%; } .opv-timer-content h3 span{ display:flex; width:max-content; margin:9px auto 0; } .opv-timer-content p{ font-size:.86rem; } .opv-timer-cta{ width:100%; min-height:54px; font-size:.88rem; } } @media(prefers-reduced-motion:reduce){ .opv-timer-box *, .opv-timer-box *:before, .opv-timer-box *:after{ animation:none !important; transition:none !important; } } .opv-faq-section, .opv-faq-section *{ box-sizing:border-box; } .opv-faq-section{ width:100%; margin:0; padding:56px 18px 62px; font-family:'Poppins',Arial,sans-serif; background: radial-gradient(circle at 12% 0%, rgba(68,216,255,.18), transparent 28%), radial-gradient(circle at 90% 14%, rgba(255,255,255,.08), transparent 30%), radial-gradient(circle at 50% 100%, rgba(0,0,0,.34), transparent 42%), linear-gradient(135deg,#031A2D 0%,#063A5E 48%,#075C86 100%); color:#ffffff; overflow:hidden; position:relative; isolation:isolate; } .opv-faq-section:after{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(127,231,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,231,255,.08) 1px, transparent 1px); background-size:46px 46px; opacity:.22; mask-image:linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%); pointer-events:none; z-index:-1; } .opv-faq-wrap{ max-width:1000px; margin:0 auto; position:relative; z-index:2; } .opv-faq-head{ text-align:center; margin-bottom:28px; } .opv-faq-badge, .opv-faq-cta-topline{ display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(127,231,255,.26); color:#AEEFFF; font-size:.72rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; backdrop-filter:blur(12px); } .opv-faq-title{ margin:0 0 12px; color:#ffffff; font-size:clamp(2.05rem,5vw,3.25rem); line-height:1.05; letter-spacing:-1.4px; font-weight:900; text-shadow:0 16px 34px rgba(0,0,0,.24); } .opv-faq-title span{ color:#7FE7FF; } .opv-faq-subtitle{ max-width:720px; margin:0 auto; color:rgba(255,255,255,.84); font-size:1rem; line-height:1.68; font-weight:500; } .opv-faq-box{ position:relative; overflow:hidden; background:rgba(255,255,255,.12); padding:20px; border-radius:28px; border:1px solid rgba(127,231,255,.24); box-shadow: 0 24px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(14px); } .opv-faq-shine{ position:absolute; top:0; left:-85%; width:48%; height:100%; background:linear-gradient(120deg, transparent, rgba(127,231,255,.18), transparent); transform:skewX(-18deg); animation:opvFaqShine 6s ease-in-out infinite; pointer-events:none; } .opv-faq-item{ position:relative; z-index:2; margin-bottom:12px; border-radius:18px; background:rgba(255,255,255,.14); border:1px solid rgba(127,231,255,.22); overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } .opv-faq-item:last-child{ margin-bottom:0; } .opv-faq-item summary{ padding:17px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#ffffff; font-size:.98rem; line-height:1.35; font-weight:900; cursor:pointer; list-style:none; } .opv-faq-item summary::-webkit-details-marker{ display:none; } .opv-faq-icon{ width:28px; height:28px; min-width:28px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#7FE7FF; color:#031A2D; font-weight:900; box-shadow:0 8px 18px rgba(0,0,0,.18); transition:.22s ease; } .opv-faq-item[open] .opv-faq-icon{ transform:rotate(45deg); } .opv-faq-answer{ padding:0 18px 18px; color:rgba(255,255,255,.84); font-size:.94rem; line-height:1.65; font-weight:500; } .opv-faq-cta-box{ position:relative; overflow:hidden; margin-top:24px; padding:24px 22px; border-radius:26px; background:rgba(255,255,255,.12); border:1px solid rgba(127,231,255,.24); text-align:center; box-shadow: 0 22px 52px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(14px); } .opv-faq-cta-title{ margin:0 0 10px; color:#ffffff; font-size:clamp(1.35rem,3.6vw,2rem); line-height:1.08; letter-spacing:-.6px; font-weight:900; } .opv-faq-cta-text{ max-width:650px; margin:0 auto 16px; color:rgba(255,255,255,.84); font-size:.96rem; line-height:1.62; font-weight:500; } .opv-faq-cta-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:58px; padding:16px 28px; background:linear-gradient(180deg,#ffffff 0%,#AEEFFF 46%,#44D8FF 100%); color:#031A2D; border-radius:999px; text-decoration:none; font-size:1rem; line-height:1; font-weight:900; box-shadow: 0 18px 38px rgba(68,216,255,.30), 0 0 0 7px rgba(68,216,255,.10), inset 0 2px 0 rgba(255,255,255,.75); transition:transform .25s ease; animation:opvFaqPulse 2.7s ease-in-out infinite; } .opv-faq-cta-btn:hover{ transform:translateY(-3px); } .opv-faq-cta-sub{ margin-top:13px; color:rgba(255,255,255,.78); font-size:.82rem; line-height:1.45; font-weight:700; } @keyframes opvFaqShine{ 0%{left:-85%;} 48%,100%{left:135%;} } @keyframes opvFaqPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} } @media(max-width:640px){ .opv-faq-section{ padding:42px 12px 48px; } .opv-faq-head{ text-align:left; margin-bottom:22px; } .opv-faq-badge{ width:100%; font-size:.68rem; text-align:center; } .opv-faq-title{ font-size:clamp(2rem,9vw,2.65rem); line-height:1.03; } .opv-faq-subtitle{ font-size:.94rem; line-height:1.6; } .opv-faq-box{ padding:14px; border-radius:24px; } .opv-faq-item{ border-radius:16px; margin-bottom:10px; } .opv-faq-item summary{ padding:15px 14px; font-size:.91rem; } .opv-faq-answer{ padding:0 14px 15px; font-size:.88rem; } .opv-faq-cta-box{ padding:20px 14px; border-radius:24px; } .opv-faq-cta-btn{ width:100%; min-height:56px; font-size:.94rem; } }