:root{--navy:#123a5a; --navy-700:#0d2c45; --sky:#0b6ea8; --sky-050:#eff6ff; --mint:#15803d; --mint-050:#ecfdf3; --orange:#b45309; --orange-600:#92400e; --bg:#f8fafc; --surface:#ffffff; --border:#e2e8f0; --text:#12263a; --muted:#5b7085; --on-dark:#eaf2fb; --on-dark-muted:#a9c2da; --radius:16px; --radius-sm:10px; --radius-lg:24px; --shadow-sm:0 1px 2px rgba(18,58,90,0.06),0 1px 3px rgba(18,58,90,0.05); --shadow:0 8px 24px rgba(18,58,90,0.08); --shadow-lg:0 18px 48px rgba(18,58,90,0.14); --maxw:1140px; --font:"Prompt",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; font-size:17px; overflow-x:hidden} h1,h2,h3,h4{line-height:1.25; margin:0 0 0.6em; font-weight:700; color:var(--navy); text-wrap:balance} h1{font-size:clamp(2rem,5vw,3.25rem)} h2{font-size:clamp(1.6rem,3.6vw,2.4rem)} h3{font-size:1.2rem} p{margin:0 0 1rem; text-wrap:pretty} a{color:var(--navy); text-decoration:none} img{max-width:100%; height:auto; display:block} ul{margin:0; padding:0; list-style:none} .container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px} .section{padding-block:clamp(3.5rem,7vw,6rem)} .section--tint{background:var(--sky-050)} .section--navy{background:var(--navy); color:var(--on-dark)} .section--navy h2,.section--navy h3{color:#fff} .eyebrow{display:inline-block; font-size:0.85rem; font-weight:600; letter-spacing:0.04em; color:var(--sky); background:var(--sky-050); padding:6px 14px; border-radius:999px; margin-bottom:1rem} .section--navy .eyebrow{background:rgba(56,189,248,0.14); color:var(--sky)} body.login-page{min-height:100vh; background:#f5f9fd} .login-shell{min-height:100vh; display:grid; grid-template-columns:minmax(0,54vw) minmax(420px,46vw); overflow-x:hidden} .login-visual{position:relative; min-height:100vh; overflow:hidden; isolation:isolate; background:var(--navy)} .login-visual>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .login-visual__overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(11,47,74,0.94) 0%,rgba(18,58,90,0.74) 48%,rgba(18,58,90,0.18) 100%),linear-gradient(0deg,rgba(11,47,74,0.58),rgba(11,47,74,0.08))} .login-brand,.login-visual__content{position:relative; z-index:2} .login-brand{padding:clamp(1.5rem,3vw,2.5rem)} .login-brand a,.login-mobile-logo{display:inline-flex; align-items:center} .login-logo-text{color:var(--navy); font-size:2rem; font-weight:800; letter-spacing:0; line-height:1} .login-logo-text--light{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,0.34)} .login-brand img,.login-mobile-logo img{width:148px; height:auto; filter:drop-shadow(0 2px 8px rgba(255,255,255,0.62)) drop-shadow(0 10px 18px rgba(0,0,0,0.18))} .login-visual__content{width:min(620px,calc(100% - 4rem)); margin:min(16vh,8rem) auto 0; color:#fff} .login-kicker{display:inline-flex; align-items:center; gap:0.55rem; padding:0.45rem 0.8rem; border-radius:999px; color:#7dd3fc; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.14); font-size:0.86rem; font-weight:800} .login-kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 6px rgba(34,197,94,0.16)} .login-visual h1{max-width:560px; margin:1.2rem 0 1rem; color:#fff; font-size:clamp(2.3rem,5vw,4.7rem); line-height:1.08; font-weight:800} .login-visual p{max-width:520px; margin-bottom:0; color:#d8ecf7; font-size:clamp(1rem,1.7vw,1.24rem)} .login-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem; max-width:560px; margin-top:clamp(2rem,5vw,3.5rem)} .login-metrics div{min-height:104px; padding:1rem; border:1px solid rgba(255,255,255,0.18); border-radius:18px; background:rgba(255,255,255,0.12); backdrop-filter:blur(12px)} .login-metrics strong,.login-metrics span{display:block} .login-metrics strong{color:#fff; font-size:clamp(1.8rem,3.5vw,2.5rem); line-height:1} .login-metrics span{margin-top:0.45rem; color:#cbe3f2; font-size:0.88rem; font-weight:700} .login-panel{position:relative; z-index:2; min-width:0; min-height:100vh; display:grid; align-content:center; justify-items:center; padding:clamp(1.5rem,4vw,3rem); background:linear-gradient(90deg,rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(0deg,rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(145deg,#ffffff 0%,#f5fbff 58%,#edf8f2 100%); background-size:34px 34px,34px 34px,auto} .login-panel__inner{position:relative; z-index:1; width:min(100%,520px); max-width:520px; opacity:1; visibility:visible} .login-mobile-logo{display:none; margin-bottom:2rem} .login-heading{margin-bottom:1.35rem} .login-heading>span{display:inline-flex; margin-bottom:0.75rem; padding:0.45rem 0.8rem; border-radius:999px; background:var(--sky-050); color:var(--sky); font-size:0.88rem; font-weight:800} .login-heading h2{margin-bottom:0.3rem; font-size:clamp(2.05rem,3.6vw,2.65rem); line-height:1.14; font-weight:800; white-space:nowrap} .login-heading p{color:var(--muted)} .login-tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:0.45rem; padding:0.35rem; margin-bottom:1.2rem; border:1px solid #dbe7f1; border-radius:999px; background:rgba(255,255,255,0.84); box-shadow:var(--shadow-sm)} .login-tabs button{min-height:44px; border:0; border-radius:999px; color:#557086; background:transparent; font:inherit; font-weight:800; cursor:pointer} .login-tabs button.is-active{color:#fff; background:var(--navy); box-shadow:0 10px 22px rgba(18,58,90,0.18)} .login-form{display:grid; gap:1rem} .login-form [data-login-field].is-hidden,[data-login-password-only].is-hidden,[data-login-legacy-only].is-hidden{display:none !important} .login-form label{display:grid; gap:0.45rem; color:var(--navy); font-size:0.94rem; font-weight:800} .login-input{position:relative; display:grid; grid-template-columns:24px 1fr auto; align-items:center; min-height:58px; padding:0 0.9rem; border:1px solid #d5e3ee; border-radius:16px; background:rgba(255,255,255,0.92); box-shadow:var(--shadow-sm); transition:border-color 0.2s ease,box-shadow 0.2s ease,background 0.2s ease} .login-input:focus-within{border-color:var(--sky); background:#fff; box-shadow:0 0 0 4px rgba(56,189,248,0.14),var(--shadow)} .login-input svg{width:20px; height:20px; color:#7a94aa} .login-input input{width:100%; min-width:0; border:0; outline:0; padding:0 0.65rem; background:transparent; color:var(--text); font:inherit; font-weight:600} .login-input input::placeholder{color:#9aaabd} .login-input--token input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; font-size:0.9rem; letter-spacing:0} .login-password-toggle{display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:12px; color:var(--muted); background:transparent; cursor:pointer} .login-password-toggle:hover,.login-password-toggle:focus-visible{color:var(--navy); background:var(--sky-050); outline:0} .login-options{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1rem; margin:0.2rem 0 0.4rem; color:var(--muted); font-size:0.9rem; font-weight:700} .login-options__left{display:inline-flex; align-items:center; justify-content:flex-start; min-width:0} .login-options__forgot{justify-self:end; white-space:nowrap} .login-options__left,.login-options__forgot{min-height:24px} .login-options__left .login-mode-toggle,.login-options__left .login-check{min-width:0} .login-options__left .login-check span,.login-mode-toggle{white-space:nowrap} .login-options__left{gap:0.85rem; flex-wrap:wrap} .login-check{display:inline-flex !important; grid-template-columns:none !important; align-items:center; gap:0.55rem !important; color:var(--muted) !important; font-size:0.9rem !important; cursor:pointer} .login-check input{width:18px; height:18px; accent-color:var(--mint)} .login-options a,.login-help a,.login-mode-toggle{background:transparent; border:0; padding:0; font:inherit; font-weight:800; cursor:pointer} .login-options a,.login-help a{color:var(--navy)} .login-mode-toggle{color:#557086; font-weight:700} .login-mode-toggle:hover,.login-mode-toggle:focus-visible{color:var(--navy); outline:0} .login-submit{min-height:58px; font-size:1rem} .login-status{display:none; padding:0.85rem 1rem; border-radius:14px; border:1px solid #dbe7f1; background:#fff; color:var(--muted); font-size:0.92rem; font-weight:700} .login-status.is-visible{display:block} .login-status.is-debug{border-color:#bfdbfe; color:var(--navy); background:#eff6ff} .login-status pre{margin:0} .login-status.is-success{border-color:#bbf7d0; color:#166534; background:#effaf4} .login-status.is-error{border-color:#fed7aa; color:#9a3412; background:#fff7ed} .login-demo{display:grid; gap:0.25rem; margin-top:1rem; padding:0.9rem 1rem; border:1px dashed #cbdceb; border-radius:16px; background:rgba(255,255,255,0.58); color:#657b90; font-size:0.82rem} .login-demo strong{color:var(--navy); font-size:0.88rem} .login-service{display:grid; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid rgba(14,165,233,0.2); border-radius:18px; background:linear-gradient(135deg,rgba(240,249,255,0.96),rgba(236,253,245,0.92)),#fff; box-shadow:0 18px 38px rgba(18,58,90,0.08)} .login-service__copy{display:grid; gap:0.35rem} .login-service__copy span{width:fit-content; padding:0.3rem 0.65rem; border-radius:999px; color:#0369a1; background:rgba(14,165,233,0.1); font-size:0.78rem; font-weight:800} .login-service__copy strong{color:var(--navy); font-size:1rem; line-height:1.35} .login-service__copy p{margin:0; color:#5f7388; font-size:0.88rem; line-height:1.6} .login-service__actions{display:grid; grid-template-columns:1fr 1fr; gap:0.65rem} .login-service__actions .btn{min-height:44px; padding:0.7rem 0.9rem; font-size:0.88rem} .login-help{display:flex; justify-content:center; gap:0.45rem; margin-top:1.25rem; color:var(--muted); font-size:0.94rem; font-weight:700} @media (max-width:920px){.login-shell{grid-template-columns:1fr} .login-visual{min-height:330px} .login-brand{display:none} .login-visual__content{width:min(100% - 2rem,560px); margin-top:2.2rem} .login-visual h1{font-size:clamp(2rem,8vw,3.2rem)} .login-metrics{grid-template-columns:repeat(3,1fr); margin-top:1.5rem} .login-metrics div{min-height:82px; padding:0.8rem} .login-panel{min-height:auto; padding:2rem 1rem 2.5rem} .login-mobile-logo{display:inline-flex}} @media (max-width:560px){.login-visual{min-height:390px} .login-visual__overlay{background:linear-gradient(0deg,rgba(11,47,74,0.92) 0%,rgba(11,47,74,0.54) 68%,rgba(11,47,74,0.2) 100%)} .login-metrics{gap:0.5rem} .login-metrics div{border-radius:14px} .login-metrics strong{font-size:1.35rem} .login-metrics span{font-size:0.72rem} .login-heading h2{font-size:clamp(1.75rem,7.5vw,2.1rem)} .login-options,.login-help{align-items:flex-start; flex-direction:column} .login-service__actions{grid-template-columns:1fr}} body.signup-page{min-height:100vh; background:#f5f9fd} .signup-header{position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:74px; padding:0.75rem clamp(1rem,3vw,2rem); border-bottom:1px solid rgba(203,213,225,0.78); background:rgba(255,255,255,0.9); backdrop-filter:blur(18px)} .signup-brand{display:inline-flex; align-items:center; color:var(--navy); font-size:1.7rem; font-weight:900; letter-spacing:0} .signup-header__nav{display:flex; align-items:center; gap:clamp(0.7rem,2vw,1rem); font-size:0.92rem; font-weight:800} .signup-header__nav .btn{min-height:42px; padding:0.65rem 1rem} .signup-shell{width:100%; min-height:100vh; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(520px,0.98fr); gap:0; align-items:stretch} .signup-hero,.signup-card{min-height:100vh; border:0; border-radius:0; overflow:hidden; box-shadow:none} .signup-hero{position:relative; isolation:isolate; background:var(--navy)} .signup-hero>img,.signup-hero__shade{position:absolute; inset:0} .signup-hero>img{width:100%; height:100%; object-fit:cover} .signup-hero__shade{z-index:1; background:linear-gradient(180deg,rgba(7,31,48,0.12),rgba(7,31,48,0.82)),linear-gradient(90deg,rgba(18,58,90,0.92),rgba(18,58,90,0.25))} .signup-hero__content{position:relative; z-index:2; height:100%; min-height:inherit; display:grid; align-content:end; padding:clamp(6rem,9vw,7rem) clamp(1.5rem,5vw,4rem) clamp(1.75rem,5vw,3rem); color:#fff} .signup-kicker{width:fit-content; margin-bottom:1rem; padding:0.44rem 0.8rem; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.13); color:#9ee8ff; font-size:0.84rem; font-weight:900} .signup-hero h1{max-width:580px; color:#fff; font-size:clamp(2rem,4.8vw,4.2rem); font-weight:900; line-height:1.08} .signup-hero p{max-width:560px; color:#d7eaf4; font-size:1.02rem} .signup-hero__metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.7rem; margin-top:1.5rem} .signup-hero__metrics div{min-height:92px; padding:0.9rem; border:1px solid rgba(255,255,255,0.18); border-radius:18px; background:rgba(255,255,255,0.12); backdrop-filter:blur(12px)} .signup-hero__metrics strong,.signup-hero__metrics span{display:block} .signup-hero__metrics strong{color:#fff; font-size:clamp(1.45rem,3vw,2.2rem); line-height:1; font-weight:900} .signup-hero__metrics span{margin-top:0.4rem; color:#cfe6f3; font-size:0.82rem; font-weight:800} .signup-card{display:grid; grid-template-rows:auto auto auto 1fr; height:100vh; padding:clamp(5.8rem,8vw,6.6rem) clamp(1.2rem,3vw,2.3rem) clamp(1.2rem,3vw,2rem); overflow:auto; background:linear-gradient(90deg,rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(0deg,rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(145deg,#ffffff 0%,#f7fcff 58%,#f0fbf5 100%); background-size:34px 34px,34px 34px,auto} .signup-panel{min-width:0; min-height:100vh} .signup-head span,.signup-step-indicator{display:inline-flex; width:fit-content; padding:0.42rem 0.75rem; border-radius:999px; background:var(--sky-050); color:var(--sky); font-size:0.82rem; font-weight:900} .signup-head h2{margin-top:0.85rem; margin-bottom:0.25rem; font-size:clamp(2rem,4vw,3.15rem); font-weight:900} .signup-head p{max-width:720px; color:var(--muted); font-size:0.94rem} .signup-progress{height:10px; margin:0.8rem 0 1rem; border-radius:999px; background:#e2e8f0; overflow:hidden} .signup-progress span{display:block; width:20%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sky),var(--mint)); transition:width 0.22s ease} .signup-step-indicator{margin-bottom:1rem} .signup-wizard{min-height:0; display:grid; grid-template-rows:1fr auto auto; gap:1rem} .signup-step{display:none; min-height:0; padding:clamp(1rem,2vw,1.35rem); border:1px solid rgba(203,213,225,0.9); border-radius:22px; background:radial-gradient(circle at 100% 0%,rgba(56,189,248,0.09),transparent 34%),#fff; box-shadow:var(--shadow-sm)} .signup-step.is-active{display:block; animation:quoteStepIn 0.22s ease both} .signup-step h3{margin-bottom:0.25rem; font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:900} .signup-step p{color:var(--muted); font-size:0.92rem} .signup-fields{display:grid; gap:0.85rem; margin-top:1rem} .signup-fields--two{grid-template-columns:repeat(2,minmax(0,1fr))} .signup-field{display:grid; gap:0.45rem; color:var(--navy); font-size:0.9rem; font-weight:900} .signup-field input,.signup-field select,.signup-field textarea{width:100%; border:1px solid #d5e3ee; border-radius:16px; background:rgba(255,255,255,0.96); color:var(--text); font:inherit; font-weight:700; outline:0; box-shadow:var(--shadow-sm)} .signup-field input,.signup-field select{min-height:54px; padding:0 0.9rem} .signup-field textarea{resize:vertical; padding:0.85rem 0.9rem} .signup-field input:focus,.signup-field select:focus,.signup-field textarea:focus{border-color:var(--sky); box-shadow:0 0 0 4px rgba(56,189,248,0.13),var(--shadow-sm)} .signup-field.is-invalid input,.signup-field.is-invalid select,.signup-field.is-invalid textarea{border-color:#fb923c; background:#fff7ed} .signup-choice-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; margin:1rem 0} .signup-choice-grid--services{grid-template-columns:repeat(3,minmax(0,1fr))} .signup-choice{min-height:62px; display:flex; align-items:center; gap:0.7rem; padding:0.85rem; border:1px solid #d8e6f2; border-radius:16px; background:#fff; color:var(--navy); font-size:0.92rem; font-weight:900; cursor:pointer; box-shadow:var(--shadow-sm)} .signup-choice input{width:20px; height:20px; accent-color:var(--mint)} .signup-choice:has(input:checked){border-color:rgba(34,197,94,0.52); background:radial-gradient(circle at 94% 18%,rgba(34,197,94,0.15),transparent 34%),#f7fffb} .signup-summary{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.75rem; margin:1rem 0} .signup-summary__item{padding:0.85rem; border:1px solid #dbe7f1; border-radius:16px; background:#f8fbff} .signup-summary__item span,.signup-summary__item strong{display:block} .signup-summary__item span{color:var(--muted); font-size:0.75rem; font-weight:900} .signup-summary__item strong{margin-top:0.2rem; color:var(--navy); font-size:1rem; font-weight:900; word-break:break-word} .signup-check{display:flex; align-items:flex-start; gap:0.65rem; padding:0.9rem; border:1px solid #d8e6f2; border-radius:16px; background:#fff; color:var(--muted); font-size:0.9rem; font-weight:800} .signup-check input{width:20px; height:20px; margin-top:0.15rem; accent-color:var(--mint)} .signup-status{display:none; padding:0.85rem 1rem; border-radius:16px; border:1px solid #dbe7f1; background:#fff; color:var(--muted); font-size:0.92rem; font-weight:800} .signup-status.is-visible{display:block} .signup-status.is-success{border-color:#bbf7d0; background:#effaf4; color:#166534} .signup-status.is-error{border-color:#fed7aa; background:#fff7ed; color:#9a3412} .signup-actions{display:flex; justify-content:space-between; gap:0.75rem} .signup-actions .btn{min-height:52px; min-width:150px} .signup-actions [data-signup-submit]{display:none} .signup-wizard.is-final .signup-actions [data-signup-next]{display:none} .signup-wizard.is-final .signup-actions [data-signup-submit]{display:inline-flex} @media (max-width:980px){.signup-header{position:sticky} .signup-shell{grid-template-columns:1fr} .signup-hero,.signup-card{min-height:auto} .signup-card{height:auto; padding:clamp(1.15rem,3vw,1.7rem); overflow:visible} .signup-panel{min-height:auto} .signup-hero__content{min-height:420px; padding:clamp(1.35rem,4vw,2rem)}} @media (max-width:680px){.signup-header{align-items:flex-start; flex-direction:column} .signup-header__nav{width:100%; flex-wrap:wrap} .signup-header__nav .btn{flex:1} .signup-shell{padding:0} .signup-hero{border-radius:0} .signup-hero__content{min-height:360px} .signup-hero__metrics,.signup-fields--two,.signup-choice-grid,.signup-choice-grid--services,.signup-summary{grid-template-columns:1fr} .signup-card{padding:1rem; border-radius:0} .signup-actions{position:sticky; bottom:0; z-index:4; margin:0 -1rem -1rem; padding:0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(248,251,255,0),rgba(248,251,255,0.98) 26%,rgba(248,251,255,0.98))} .signup-actions .btn{flex:1; min-width:0; padding-inline:1rem}} .section-head{max-width:720px; margin:0 auto 2.75rem; text-align:center} .section-head p{color:var(--muted); font-size:1.05rem} .section--navy .section-head p{color:var(--on-dark-muted)} .lead{font-size:1.12rem; color:var(--muted)} .u-nowrap{white-space:nowrap} .btn{display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:inherit; font-size:1rem; font-weight:600; padding:14px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform 0.15s ease,background-color 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease; text-align:center; line-height:1.2} .btn:active{transform:translateY(1px)} .btn--primary{background:var(--orange); color:#fff; box-shadow:0 6px 16px rgba(255,138,0,0.32)} .btn--primary:hover{background:var(--orange-600)} .btn--line{background:var(--mint); color:#fff} .btn--line:hover{background:#1ba54c} .btn--ghost{background:transparent; border-color:var(--border); color:var(--navy)} .btn--ghost:hover{border-color:var(--sky); color:var(--sky)} .section--navy .btn--ghost{border-color:rgba(255,255,255,0.3); color:#fff} .section--navy .btn--ghost:hover{border-color:var(--sky); color:var(--sky)} .btn--block{width:100%} .btn--lg{padding:16px 32px; font-size:1.05rem}:focus-visible{outline:3px solid var(--sky); outline-offset:2px; border-radius:6px} .header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.9); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border)} .header__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px} .brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.25rem; color:var(--navy)} .brand__logo{display:block; width:auto; height:34px; max-width:112px; object-fit:contain} .footer .brand__logo{height:38px; max-width:124px} .brand__mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--navy),var(--sky)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1rem} .brand__mark span{color:#fff} .nav{display:flex; align-items:center; gap:1.5rem} .nav__list{display:flex; gap:1.4rem} .nav__list a{color:var(--text); font-weight:500; font-size:0.98rem; padding:6px 2px; border-bottom:2px solid transparent} .nav__list a:hover{color:var(--sky); border-color:var(--sky)} .nav__cta{display:inline-flex; gap:0.6rem; align-items:center} .nav-toggle{display:none; background:transparent; border:1px solid var(--border); border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--navy); align-items:center; justify-content:center} .nav-toggle svg{width:24px; height:24px} .hero{background:linear-gradient(180deg,#fff 0%,var(--sky-050) 100%); padding-block:clamp(2.25rem,5.5vw,4rem); overflow:hidden} .hero__grid{position:relative; display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); min-height:clamp(560px,43vw,650px); padding:clamp(2rem,5vw,4.2rem); align-items:center; border-radius:32px; background:#f8fbff; box-shadow:var(--shadow-lg); overflow:hidden; isolation:isolate} .hero__grid::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(248,251,255,1) 0%,rgba(248,251,255,0.96) 31%,rgba(248,251,255,0.62) 47%,rgba(248,251,255,0.12) 60%,transparent 70%); pointer-events:none} .hero__content{position:relative; z-index:2; min-width:0; max-width:590px} .hero__content::before{content:""; position:absolute; inset:-18px -32px -18px -22px; z-index:-1; border-radius:28px; background:linear-gradient(90deg,rgba(248,251,255,0.98) 0%,rgba(248,251,255,0.93) 66%,rgba(248,251,255,0.72) 100%); box-shadow:0 18px 42px rgba(18,58,90,0.08); backdrop-filter:blur(3px); pointer-events:none} .hero h1{margin-bottom:1rem} .hero__sub{font-size:1.15rem; color:var(--muted); max-width:38ch; margin-bottom:1.75rem; overflow-wrap:anywhere} .hero__cta{display:flex; flex-wrap:wrap; gap:0.8rem; margin-bottom:1.5rem} .hero__badges{display:flex; flex-wrap:wrap; gap:0.5rem 1.1rem} .hero__badges li{display:inline-flex; align-items:center; gap:6px; font-size:0.9rem; color:var(--navy); font-weight:500} .hero__badges svg{width:18px; height:18px; color:var(--mint); flex:none} .hero__media{position:absolute; inset:0; z-index:0} .hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(248,251,255,0.82) 0%,rgba(248,251,255,0.18) 20%,transparent 38%); pointer-events:none} .hero__media img{width:100%; height:100%; object-fit:cover; object-position:center center} .integration-section{background:linear-gradient(180deg,#fff 0%,#f8fbff 54%,#fff 100%); padding-block:clamp(3rem,6vw,5rem)} .integration-section .section-head{margin-bottom:1.75rem} .sme-showcase{position:relative; overflow:hidden; max-width:1040px; margin:0 auto clamp(1rem,2.4vw,1.35rem); border:1px solid rgba(203,213,225,0.78); border-radius:26px; background:#edf6ff; box-shadow:0 24px 58px rgba(18,58,90,0.13); isolation:isolate} .sme-showcase::before{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.62); border-radius:inherit; pointer-events:none; z-index:2} .sme-showcase::after{content:""; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(180deg,transparent,rgba(18,58,90,0.54)); pointer-events:none; z-index:1} .sme-showcase picture,.sme-showcase img{display:block; width:100%} .sme-showcase img{aspect-ratio:16 / 9; object-fit:cover; object-position:center} .sme-showcase figcaption{position:absolute; left:clamp(18px,3vw,34px); bottom:clamp(16px,2.6vw,28px); z-index:3; display:grid; gap:5px; max-width:min(460px,calc(100% - 40px)); margin:0; color:#fff} .sme-showcase figcaption span{width:fit-content; border-radius:999px; padding:6px 11px; color:#dcfce7; background:rgba(34,197,94,0.72); font-size:0.78rem; font-weight:800} .sme-showcase figcaption strong{font-size:clamp(1.35rem,3vw,2.2rem); line-height:1.15; text-shadow:0 3px 14px rgba(0,0,0,0.28)} .api-chain{display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.5vw,14px); width:100%; max-width:1040px; margin:0 auto clamp(1rem,2.4vw,1.35rem); padding:12px 14px; border:1px solid rgba(203,213,225,0.72); border-radius:20px; background:linear-gradient(90deg,rgba(239,246,255,0.92),rgba(236,253,243,0.82)),rgba(255,255,255,0.92); box-shadow:var(--shadow-sm); overflow:hidden} .api-chain__sources{display:grid; grid-template-columns:1fr 1fr 0.86fr; align-items:center; flex:0 1 500px; min-width:0; gap:8px} .api-chain__sources span,.api-chain__hub{display:grid; place-items:center; min-width:0; max-width:100%; height:42px; padding:7px 10px; overflow:hidden; border:1px solid rgba(226,232,240,0.9); border-radius:14px; background:rgba(255,255,255,0.94); box-shadow:0 8px 20px rgba(18,58,90,0.06)} .api-chain__sources img{width:auto; min-width:0; max-width:100%; height:auto; max-height:24px; object-fit:contain} .api-chain__hub img{width:auto; min-width:0; max-width:96px; height:auto; max-height:30px; object-fit:contain} .api-chain b{color:var(--sky); font-size:1.25rem; line-height:1} .api-chain__hub{min-width:118px} .api-chain small{flex:0 1 190px; color:var(--navy); font-size:0.86rem; font-weight:700; line-height:1.35} .integration-visual{position:relative; display:grid; grid-template-rows:auto 1fr; gap:clamp(16px,2.4vw,22px); padding:clamp(18px,3vw,28px); max-width:1040px; margin-inline:auto; border:1px solid rgba(226,232,240,0.9); border-radius:28px; background:linear-gradient(rgba(56,189,248,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.04) 1px,transparent 1px),radial-gradient(ellipse at 18% 16%,rgba(56,189,248,0.16),transparent 34%),radial-gradient(ellipse at 78% 74%,rgba(34,197,94,0.13),transparent 36%),linear-gradient(180deg,#ffffff,#f8fafc); background-size:42px 42px,42px 42px,auto,auto,auto; box-shadow:var(--shadow-lg); overflow:hidden; isolation:isolate} .integration-visual::before{content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,0.72); border-radius:22px; pointer-events:none; z-index:-1} .integration-visual::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 50% 52%,rgba(34,197,94,0.2),transparent 48%); opacity:0; pointer-events:none; transition:opacity 0.35s ease} .integration-visual.is-flow-complete::after{opacity:1; animation:completeGlow 1.1s ease-out} .integration-visual__top{display:flex; align-items:center; justify-content:space-between; gap:10px} .sync-title,.sync-actions{display:inline-flex; align-items:center; gap:8px} .sync-title span,.sync-actions span{color:var(--muted); font-size:0.82rem; font-weight:600} .sync-dot{width:10px; height:10px; border-radius:999px; background:var(--mint); box-shadow:0 0 0 7px rgba(34,197,94,0.12),0 0 18px rgba(34,197,94,0.45); animation:none} .integration-visual.is-active .sync-dot{animation:syncPulse 1.9s ease-in-out infinite} .sync-actions{padding:4px 5px 4px 10px; border-radius:999px; background:rgba(255,255,255,0.7); box-shadow:0 10px 28px rgba(18,58,90,0.06)} .sync-actions span{color:var(--navy); font-weight:800} .sync-actions strong{position:relative; isolation:isolate; color:#fff; background:linear-gradient(135deg,#22c55e 0%,#16a34a 58%,#0f9f4a 100%); border-radius:999px; padding:10px 18px; font-size:0.88rem; box-shadow:0 16px 34px rgba(34,197,94,0.34),inset 0 1px 0 rgba(255,255,255,0.28)} .sync-actions strong::before{content:""; position:absolute; inset:-7px; z-index:-1; border:1px solid rgba(34,197,94,0.3); border-radius:inherit; background:radial-gradient(circle,rgba(34,197,94,0.18),transparent 64%); opacity:0.9; animation:none} .integration-visual.is-active .sync-actions strong::before{animation:autoBadgePulse 2.15s ease-in-out infinite} .integration-map{position:relative; display:grid; grid-template-columns:1.05fr 0.62fr 1.05fr; align-items:center; gap:clamp(22px,3.2vw,38px); min-height:460px} .integration-map::before,.integration-map::after{display:none} .integration-lines{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible} .line-path{fill:none; stroke:rgba(56,189,248,0.78); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:10 12; opacity:0.22; filter:drop-shadow(0 0 7px rgba(56,189,248,0.38)); animation:none; transition:opacity 0.22s ease,stroke-width 0.22s ease} .integration-visual.is-active .line-path{animation:lineFlow 1.9s linear infinite} .line-path--in{stroke:rgba(56,189,248,0.82)} .line-path--out{stroke:rgba(34,197,94,0.78); animation-delay:0.5s; opacity:0} .line-path--s{animation-delay:0s} .line-path--l{animation-delay:0.18s} .line-path--t{animation-delay:0.36s} .line-path--one{animation-delay:0.5s} .line-path--two{animation-delay:0.66s} .line-path--three{animation-delay:0.82s} .line-path--four{animation-delay:0.98s} .integration-visual.is-importing .line-path--in,.integration-visual.is-flow-complete .line-path--in,.integration-visual.is-flow-complete .line-path--four{opacity:1; stroke-width:4} .integration-visual.is-importing .line-path--one,.integration-visual.is-stage-2 .line-path--two,.integration-visual.is-stage-3 .line-path--three,.integration-visual.is-stage-4 .line-path--four{opacity:1; stroke-width:4} .integration-visual.is-stage-2 .line-path--in,.integration-visual.is-stage-3 .line-path--in,.integration-visual.is-stage-4 .line-path--in{opacity:0.28} .source-cloud{position:absolute; inset:20px auto 20px 36px; width:min(376px,39%); z-index:2; pointer-events:none} .source-chip{position:absolute; display:grid; grid-template-columns:1fr; place-items:center; gap:2px; width:66px; height:66px; padding:7px 6px; overflow:hidden; border:1px solid rgba(203,213,225,0.86); border-radius:15px; background:linear-gradient(135deg,#ffffff,#f7fbff); box-shadow:0 12px 26px rgba(18,58,90,0.1); animation:none; opacity:0.98} .integration-visual.is-active .source-chip{animation:sourceFloat 5.8s ease-in-out infinite} .source-chip::before{content:""; position:absolute; top:7px; left:7px; width:7px; height:7px; border-radius:999px; background:var(--mint); box-shadow:0 0 0 5px rgba(34,197,94,0.1)} .source-chip img{width:auto; max-width:52px; height:auto; max-height:17px; object-fit:contain} .source-chip em{color:var(--navy); font-size:0.58rem; font-style:normal; font-weight:800; line-height:1; white-space:nowrap} .source-chip--shopee-live{top:18px; left:24px; --source-x:8px; --source-y:-7px} .source-chip--shopee-video{top:16px; right:30px; --source-x:-7px; --source-y:-5px; animation-delay:-1.4s} .source-chip--lazada{top:0; left:164px; --source-x:9px; --source-y:6px; animation-delay:-2.1s} .source-chip--tiktok-live{left:70px; bottom:34px; --source-x:-8px; --source-y:7px; animation-delay:-0.7s} .source-chip--tiktok-aff{right:92px; bottom:16px; --source-x:-7px; --source-y:6px; animation-delay:-2.8s} .platform-stack,.flow-stack{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px} .platform-stack{z-index:3} .platform,.flow-step{position:relative; overflow:visible; min-width:0; display:flex; align-items:center; gap:10px; min-height:64px; padding:12px; border:1px solid rgba(203,213,225,0.72); border-radius:18px; background:rgba(255,255,255,0.99); box-shadow:0 10px 24px rgba(18,58,90,0.08); transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease} .flow-step::before{content:""; position:absolute; left:-15px; top:50%; width:12px; height:12px; border:2px solid rgba(34,197,94,0.78); border-radius:999px; background:#fff; box-shadow:0 0 0 6px rgba(34,197,94,0.08),0 0 18px rgba(34,197,94,0.26); transform:translateY(-50%); z-index:2} .flow-step.is-processing{border-color:rgba(56,189,248,0.54); box-shadow:0 18px 38px rgba(56,189,248,0.16)} .flow-step.is-complete{border-color:rgba(34,197,94,0.42); box-shadow:0 16px 34px rgba(34,197,94,0.12)} .flow-step.is-complete::before{background:var(--mint)} .platform:hover,.flow-step:hover{transform:translateY(-2px); border-color:rgba(56,189,248,0.42); box-shadow:0 16px 34px rgba(18,58,90,0.12)} .platform__mark{width:58px; height:42px; max-width:100%; display:grid; place-items:center; padding:7px; overflow:hidden; border-radius:13px; background:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.7),0 10px 20px rgba(18,58,90,0.1)} .platform__mark img{width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain} .platform--shopee .platform__mark{background:#fff4f0} .platform--lazada .platform__mark{background:#f7f5ff} .platform--tiktok .platform__mark{background:#f8fafc} .platform b,.flow-step b,.integration-hub b{display:block; color:var(--navy); font-size:0.96rem; line-height:1.2} .platform small,.integration-hub small,.flow-step small{display:block; color:var(--muted); font-size:0.74rem} .platform small span,.flow-step small span{color:var(--navy); font-weight:800} .platform em{margin-left:auto; color:var(--mint); background:var(--mint-050); border-radius:999px; padding:4px 8px; font-size:0.7rem; font-style:normal; font-weight:800} .integration-hub{position:relative; z-index:2; display:grid; justify-items:center; align-content:center; gap:5px; min-height:142px; max-width:180px; justify-self:center; padding:18px 14px; border:1px solid rgba(56,189,248,0.38); border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(239,246,255,0.94)); box-shadow:0 18px 45px rgba(18,58,90,0.12); text-align:center; animation:none} .integration-visual.is-active .integration-hub{animation:hubFloat 4.4s ease-in-out infinite} .integration-hub::before,.integration-hub::after{content:""; position:absolute; inset:-7px; border:1px solid rgba(56,189,248,0.28); border-radius:32px; pointer-events:none; animation:none} .integration-visual.is-active .integration-hub::before,.integration-visual.is-active .integration-hub::after{animation:hubRing 2.8s ease-in-out infinite} .integration-hub::after{inset:-14px; border-color:rgba(34,197,94,0.18); animation-delay:0.5s} .hub-logo{display:grid; place-items:center; width:88px; height:44px; padding:6px 9px; border:1px solid rgba(203,213,225,0.86); border-radius:14px; background:#fff; box-shadow:0 12px 24px rgba(18,58,90,0.12)} .hub-logo img{width:100%; height:100%; object-fit:contain} .hub-meter{width:min(104px,78%); height:7px; margin-top:4px; overflow:hidden; border-radius:999px; background:rgba(226,232,240,0.9)} .hub-meter span{display:block; width:var(--hub-progress,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sky),var(--mint)); box-shadow:0 0 0 rgba(34,197,94,0); transition:width 0.18s linear,box-shadow 0.24s ease} .integration-visual.is-flow-complete .hub-meter span{box-shadow:0 0 18px rgba(34,197,94,0.42)} .hub-order-count{display:grid; gap:0; margin-top:2px} .hub-order-count strong{color:var(--navy); font-size:1.42rem; line-height:1} .hub-order-count span{color:var(--muted); font-size:0.68rem; font-weight:600} .flow-step__num{width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--sky-050); color:var(--sky); font-size:0.75rem; font-weight:800; flex:none} .flow-step i{width:22px; height:22px; margin-left:auto; border-radius:999px; background:var(--mint); box-shadow:0 0 0 6px rgba(34,197,94,0.1); position:relative; flex:none; opacity:0; transform:scale(0.72); transition:opacity 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease} .flow-step i::before{content:""; position:absolute; left:7px; top:4px; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)} .flow-step.is-processing{animation:stepLift 1.05s ease-in-out infinite} .flow-step.is-complete i{opacity:1; transform:scale(1); animation:checkPop 0.58s ease-out} .flow-step.is-complete small span{color:var(--mint)} .sla-section{position:relative; padding-block:clamp(1rem,2.6vw,2rem) clamp(1rem,2.4vw,1.5rem); background:linear-gradient(rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(180deg,#fff 0%,#f8fbff 100%); background-size:44px 44px,44px 44px,auto} .sla-panel{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,0.95fr) minmax(360px,1.05fr); gap:clamp(16px,2.4vw,28px); max-width:1040px; margin-inline:auto; padding:clamp(16px,2.4vw,24px); border:1px solid rgba(203,213,225,0.82); border-radius:28px; background:radial-gradient(ellipse at 88% 12%,rgba(34,197,94,0.18),transparent 34%),linear-gradient(135deg,rgba(255,255,255,0.98),rgba(239,246,255,0.94)); box-shadow:0 24px 58px rgba(18,58,90,0.11); isolation:isolate} .sla-panel::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:linear-gradient(180deg,var(--mint),var(--sky),var(--orange))} .sla-copy{position:relative; z-index:1; align-self:center; padding:clamp(6px,1vw,10px) clamp(4px,1vw,8px)} .sla-copy h2{max-width:520px; margin-bottom:0.55rem} .sla-copy p{max-width:58ch; color:var(--muted)} .sla-points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:1rem} .sla-points li{min-width:0; min-height:92px; padding:12px; border:1px solid rgba(226,232,240,0.86); border-radius:16px; background:rgba(255,255,255,0.78); box-shadow:0 10px 24px rgba(18,58,90,0.06)} .sla-points b,.sla-points span{display:block} .sla-points b{color:var(--navy); font-size:0.9rem; line-height:1.25} .sla-points span{margin-top:4px; color:var(--muted); font-size:0.78rem; line-height:1.45} .sla-board{position:relative; z-index:1; overflow:hidden; display:grid; gap:14px; padding:clamp(16px,2.4vw,22px); border:1px solid rgba(56,189,248,0.22); border-radius:24px; background:linear-gradient(rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.055) 1px,transparent 1px),linear-gradient(145deg,#0f3552 0%,#123a5a 58%,#0b2942 100%); background-size:32px 32px,32px 32px,auto; color:#fff; box-shadow:0 20px 44px rgba(18,58,90,0.2)} .sla-board::after{content:""; position:absolute; inset:auto -14% -48px 30%; height:100px; background:linear-gradient(90deg,rgba(34,197,94,0.35),rgba(56,189,248,0.18)); transform:rotate(-4deg); pointer-events:none} .sla-board__top,.sla-timeline,.sla-platforms{position:relative; z-index:1} .sla-board__top{display:flex; align-items:center; justify-content:space-between; gap:12px} .sla-board__top span{color:#bde8ff; font-size:0.84rem; font-weight:700} .sla-board__top strong{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:999px; color:#dcfce7; background:rgba(34,197,94,0.18); border:1px solid rgba(187,247,208,0.28); font-size:0.84rem} .sla-board__top strong::before,.sla-platform span::before{content:""; width:10px; height:6px; border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-1px)} .sla-timeline{display:grid; gap:10px} .sla-timeline li{position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:center; min-height:58px; padding:10px 12px; border:1px solid rgba(255,255,255,0.12); border-radius:16px; background:rgba(255,255,255,0.08)} .sla-timeline li::after{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg,var(--sky),var(--mint)); opacity:0.9} .sla-timeline li span{grid-row:span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:var(--sky); background:rgba(239,246,255,0.12); font-size:0.76rem; font-weight:800} .sla-timeline b{color:#fff; font-size:0.96rem; line-height:1.2} .sla-timeline small{color:#bcd2e4; font-size:0.78rem} .sla-platforms{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .sla-platform{min-width:0; display:grid; gap:8px; justify-items:center; padding:10px 8px; border-radius:15px; background:rgba(255,255,255,0.94); box-shadow:0 12px 24px rgba(8,36,58,0.16)} .sla-platform img{width:auto; max-width:86px; height:auto; max-height:24px; object-fit:contain} .sla-platform span{display:inline-flex; align-items:center; gap:5px; color:#0f9f4a; font-size:0.72rem; font-weight:800} .metric-section{position:relative; padding-block:0 clamp(2.6rem,5vw,4.2rem); background:linear-gradient(rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(180deg,#f8fbff 0%,#fff 100%); background-size:44px 44px,44px 44px,auto} .metric-panel{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(220px,0.44fr) minmax(0,1fr); gap:clamp(14px,2vw,22px); max-width:1040px; margin-inline:auto; padding:clamp(16px,2.4vw,22px); border:1px solid rgba(18,58,90,0.18); border-radius:26px; background:radial-gradient(ellipse at 92% 12%,rgba(34,197,94,0.24),transparent 34%),linear-gradient(145deg,#123a5a 0%,#0d2c45 72%,#08243a 100%); box-shadow:0 24px 58px rgba(18,58,90,0.18); isolation:isolate} .metric-panel::after{content:""; position:absolute; inset:auto -16% -54px 40%; height:112px; background:linear-gradient(90deg,rgba(34,197,94,0.36),rgba(56,189,248,0.2)); transform:rotate(-4deg); pointer-events:none} .metric-intro,.metric-list{position:relative; z-index:1} .metric-intro{align-self:center} .metric-intro .eyebrow{background:rgba(239,246,255,0.12); color:#7dd3fc} .metric-intro h2{max-width:360px; margin-bottom:0; color:#fff; font-size:clamp(1.35rem,2.8vw,2rem)} .metric-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px} .metric-card{min-width:0; display:grid; align-content:start; gap:5px; min-height:138px; padding:14px; border:1px solid rgba(255,255,255,0.13); border-radius:18px; background:rgba(255,255,255,0.08); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)} .metric-card strong{display:flex; align-items:baseline; gap:3px; min-width:0; color:#fff; font-size:clamp(2rem,4vw,3.2rem); font-weight:800; line-height:0.95; letter-spacing:0} .metric-card small{color:#d8ecff; font-size:clamp(0.9rem,1.4vw,1.02rem); font-weight:800; line-height:1.1} .metric-card b{color:#fff; font-size:0.9rem; line-height:1.28} .metric-card em{color:#bcd2e4; font-size:0.76rem; font-style:normal; line-height:1.4} .cost-section{position:relative; overflow:hidden; padding-bottom:clamp(2.2rem,4vw,3rem); background:linear-gradient(rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(180deg,#fff 0%,#f7fbff 54%,#f8fafc 100%); background-size:44px 44px,44px 44px,auto} .pain-section{position:relative; overflow:hidden; padding-top:clamp(2.2rem,4vw,3.2rem); padding-bottom:clamp(2rem,4.5vw,3.5rem); background:linear-gradient(rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(180deg,#fff 0%,#f8fbff 100%); background-size:44px 44px,44px 44px,auto} .cost-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,0.72fr); gap:clamp(1rem,2.5vw,1.5rem); align-items:stretch; margin-top:clamp(1rem,2.4vw,1.5rem)} .cost-copy,.cost-price-card,.cost-showcase,.free-item,.product-fit{min-width:0; border:1px solid rgba(203,213,225,0.78); background:rgba(255,255,255,0.95); box-shadow:var(--shadow)} .cost-copy{position:relative; overflow:hidden; padding:clamp(1.4rem,3vw,2.35rem); border-radius:var(--radius-lg)} .cost-copy::before{content:""; position:absolute; inset:0 auto 0 0; width:6px; background:linear-gradient(180deg,var(--orange),var(--sky),var(--mint))} .cost-copy h2{max-width:680px; margin-bottom:0.45em} .cost-copy .lead{max-width:760px; margin-bottom:1.25rem} .cost-proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .cost-proof span{display:grid; gap:2px; min-height:78px; padding:12px; border-radius:14px; background:#f8fafc; color:var(--muted); font-size:0.9rem} .cost-proof b{color:var(--navy); font-size:0.96rem} .cost-price-card{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; min-height:100%; padding:clamp(1.35rem,3vw,2rem); border-color:rgba(18,58,90,0.18); border-radius:var(--radius-lg); color:#fff; background:linear-gradient(135deg,rgba(56,189,248,0.22),transparent 42%),linear-gradient(160deg,var(--navy) 0%,var(--navy-700) 68%,#08243a 100%); box-shadow:0 22px 48px rgba(18,58,90,0.2)} .cost-price-card::after{content:""; position:absolute; inset:auto -20% -48px 18%; height:92px; background:linear-gradient(90deg,rgba(34,197,94,0.34),rgba(56,189,248,0.22)); transform:rotate(-4deg)} .cost-price-card>*{position:relative; z-index:1} .cost-price-card__tag{width:fit-content; border-radius:999px; padding:7px 12px; color:#bbf7d0; background:rgba(34,197,94,0.16); border:1px solid rgba(187,247,208,0.26); font-size:0.82rem; font-weight:700} .cost-price{display:flex; align-items:flex-end; gap:12px} .cost-price strong{color:#fff; font-size:clamp(4.5rem,9vw,6.9rem); font-weight:800; line-height:0.82; letter-spacing:0} .cost-price span{padding-bottom:0.45rem; color:#d8ecff; font-size:clamp(1rem,2.4vw,1.35rem); font-weight:700; line-height:1.15} .cost-price-card p{color:#c7dced; margin-bottom:0} .cost-showcase{position:relative; overflow:hidden; margin:0; border-radius:var(--radius-lg); background:#08243a; box-shadow:0 24px 58px rgba(18,58,90,0.14); isolation:isolate} .cost-showcase::before{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,0.62); border-radius:inherit; pointer-events:none; z-index:1} .cost-showcase picture,.cost-showcase img{display:block; width:100%} .cost-showcase img{aspect-ratio:3 / 2; object-fit:cover; object-position:center} .free-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:1rem} .free-item{position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:2px; align-items:center; min-height:108px; padding:16px; border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,0.98),rgba(248,251,255,0.94)); isolation:isolate} .free-item::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--mint),var(--sky))} .free-item::after{content:""; position:absolute; top:-38px; right:-34px; width:112px; height:112px; border-radius:999px; background:radial-gradient(circle,rgba(34,197,94,0.14),transparent 68%); pointer-events:none} .free-item span{position:relative; z-index:1; grid-row:span 2; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:56px; height:38px; padding:0 12px; border-radius:999px; color:#0f9f4a; background:linear-gradient(135deg,#dcfce7,#f0fdf4); border:1px solid rgba(34,197,94,0.18); box-shadow:0 10px 22px rgba(34,197,94,0.14); font-size:0.92rem; font-weight:800; line-height:1; letter-spacing:0} .free-item span::before{content:""; width:12px; height:7px; border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(-45deg) translateY(-1px)} .free-item b,.free-item small{position:relative; z-index:1} .free-item b{color:var(--navy); font-size:1.02rem; line-height:1.2} .free-item small{color:var(--muted); font-size:0.82rem; line-height:1.45} .product-fit{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:16px 18px; border-radius:var(--radius)} .product-fit span{display:block; color:var(--sky); font-size:0.82rem; font-weight:700} .product-fit b{color:var(--navy)} .product-fit ul{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end} .product-fit li{border-radius:999px; padding:8px 14px; color:var(--navy); background:#fff; border:1px solid rgba(203,213,225,0.85); box-shadow:var(--shadow-sm); font-weight:700} @keyframes syncPulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(0.82); opacity:0.72}} @keyframes beamSweep{from{transform:translateX(-100%)} to{transform:translateX(100%)}} @keyframes lineFlow{from{stroke-dashoffset:0} to{stroke-dashoffset:-44}} @keyframes sourceFloat{0%,100%{transform:translate3d(0,0,0); opacity:1} 50%{transform:translate3d(var(--source-x,6px),var(--source-y,-6px),0); opacity:1}} @keyframes hubFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}} @keyframes hubRing{0%,100%{opacity:0.5; transform:scale(1)} 50%{opacity:0.95; transform:scale(1.025)}} @keyframes meterLoad{0%,100%{width:68%} 50%{width:94%}} @keyframes stepLift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)}} @keyframes checkPop{0%,28%,100%{transform:scale(0.9); box-shadow:0 0 0 6px rgba(34,197,94,0.1)} 40%,58%{transform:scale(1.08); box-shadow:0 0 0 10px rgba(34,197,94,0.14),0 0 18px rgba(34,197,94,0.28)}} @keyframes completeGlow{0%{opacity:0; transform:scale(0.98)} 45%{opacity:1} 100%{opacity:0.45; transform:scale(1)}} @keyframes autoBadgePulse{0%,100%{opacity:0.76; transform:scale(0.98)} 50%{opacity:1; transform:scale(1.06)}} @keyframes freeSweep{0%,62%{transform:translateX(-100%)} 82%,100%{transform:translateX(100%)}} .hero__card{position:absolute; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:14px 16px; display:flex; align-items:center; gap:12px} .hero__card--orders{left:-12px; bottom:26px} .hero__card--packed{right:-8px; top:30px} .hero__card .ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none} .hero__card .ic svg{width:22px; height:22px} .ic--sky{background:var(--sky-050); color:var(--sky)} .ic--mint{background:var(--mint-050); color:var(--mint)} .hero__card b{display:block; font-size:1.15rem; color:var(--navy); line-height:1.1} .hero__card small{color:var(--muted); font-size:0.8rem} .grid{display:grid; gap:1.25rem} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s} .card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfe6f7} .card__icon{width:52px; height:52px; border-radius:14px; background:var(--sky-050); color:var(--sky); display:grid; place-items:center; margin-bottom:1rem} .card__icon svg{width:26px; height:26px} .card h3{margin-bottom:0.4rem} .card p{color:var(--muted); margin:0; font-size:0.98rem} .card--pain .card__icon{background:#fff2ec; color:var(--orange)} .pain-layout{display:grid; grid-template-columns:minmax(300px,0.82fr) minmax(0,1.18fr); gap:clamp(1.2rem,3vw,2rem); align-items:center} .pain-copy{position:relative; padding:clamp(1.35rem,3vw,2.2rem) 0 clamp(1.35rem,3vw,2.2rem) clamp(1rem,2vw,1.4rem)} .pain-copy::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:999px; background:linear-gradient(180deg,var(--orange),var(--sky),var(--mint))} .pain-copy h2{max-width:560px; font-size:clamp(2rem,4.2vw,3.1rem); margin-bottom:0.55rem} .pain-copy p{max-width:600px; color:var(--muted); font-size:1.06rem} .pain-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.65rem; margin-top:1.2rem} .pain-summary span{min-width:0; padding:0.85rem; border:1px solid rgba(255,138,0,0.18); border-radius:15px; background:rgba(255,255,255,0.78); box-shadow:var(--shadow-sm)} .pain-summary b,.pain-summary small{display:block} .pain-summary b{color:var(--navy); font-size:0.92rem} .pain-summary small{color:var(--muted); font-size:0.76rem; line-height:1.35} .pain-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.8rem} .pain-card{position:relative; overflow:hidden; min-height:132px; padding:1.05rem; border:1px solid rgba(203,213,225,0.82); border-radius:18px; background:rgba(255,255,255,0.94); box-shadow:0 12px 28px rgba(18,58,90,0.08); transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease} .pain-card::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--orange),rgba(56,189,248,0.7)); opacity:0.82} .pain-card:hover{transform:translateY(-3px); border-color:rgba(255,138,0,0.34); box-shadow:0 18px 40px rgba(18,58,90,0.12)} .pain-card .card__icon{width:42px; height:42px; margin-bottom:0.75rem; border-radius:13px; background:#fff2ec; color:var(--orange)} .pain-card .card__icon svg{width:22px; height:22px} .pain-card h3{margin-bottom:0.25rem; font-size:1rem} .pain-card p{margin:0; color:var(--muted); font-size:0.9rem; line-height:1.5} .services-section{position:relative; overflow:hidden; padding-top:clamp(1.35rem,3vw,2.2rem); padding-bottom:clamp(2rem,4.5vw,3.4rem); background:linear-gradient(rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.035) 1px,transparent 1px),linear-gradient(180deg,#eaf5ff 0%,#f7fbff 100%); background-size:44px 44px,44px 44px,auto} .services-head{max-width:760px; margin:0 auto 1.6rem; text-align:center} .services-head p{color:var(--muted); font-size:1.04rem} .service-flow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.9rem} .service-step{position:relative; overflow:hidden; min-height:158px; padding:1.15rem; border:1px solid rgba(203,213,225,0.82); border-radius:18px; background:rgba(255,255,255,0.96); box-shadow:0 14px 32px rgba(18,58,90,0.08); transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease} .service-step::before{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--sky),var(--mint)); transform:scaleX(0.38); transform-origin:left; transition:transform 0.18s ease} .service-step:hover{transform:translateY(-3px); border-color:rgba(56,189,248,0.42); box-shadow:0 18px 40px rgba(18,58,90,0.12)} .service-step:hover::before{transform:scaleX(1)} .service-step__num{position:absolute; right:1rem; top:1rem; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:var(--sky-050); color:var(--sky); font-size:0.75rem; font-weight:800} .service-step .card__icon{width:46px; height:46px; margin-bottom:0.8rem; border-radius:14px} .service-step .card__icon svg{width:23px; height:23px} .service-step h3{padding-right:2.2rem; margin-bottom:0.3rem; font-size:1.02rem} .service-step p{margin:0; color:var(--muted); font-size:0.92rem; line-height:1.5} .service-step--highlight{background:linear-gradient(145deg,var(--navy) 0%,#0e4f72 100%); border-color:rgba(34,197,94,0.3); box-shadow:0 18px 42px rgba(18,58,90,0.16)} .service-step--highlight .service-step__num{background:rgba(255,255,255,0.13); color:#a7f3d0} .service-step--highlight .card__icon{background:rgba(56,189,248,0.16); color:#7dd3fc} .service-step--highlight h3,.service-step--highlight p{color:#fff} .service-step--highlight p{color:#cfe4f4} .compare-section{position:relative; overflow:hidden; padding-top:clamp(1.55rem,3.8vw,2.9rem); background:linear-gradient(180deg,#eaf5ff 0%,#f8fbff 48%,#eef8f3 100%)} .compare-section::before{content:""; position:absolute; inset:0; opacity:0.5; pointer-events:none; background-image:linear-gradient(rgba(56,189,248,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.1) 1px,transparent 1px); background-size:48px 48px} .compare-section .container{position:relative; z-index:1} .compare-head{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,0.85fr); gap:clamp(1rem,3vw,2rem); align-items:end; margin-bottom:1.1rem} .compare-head .eyebrow{margin-bottom:0.85rem; background:rgba(255,255,255,0.82); border:1px solid rgba(56,189,248,0.24); box-shadow:0 10px 26px rgba(18,58,90,0.08)} .compare-head h2{max-width:720px; margin-bottom:0.55rem; font-size:clamp(1.9rem,4vw,2.75rem)} .compare-head p{max-width:760px; margin:0; color:var(--muted); font-size:1.08rem} .compare-switch{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.65rem; padding:0.55rem; border:1px solid rgba(148,163,184,0.32); border-radius:22px; background:rgba(255,255,255,0.9); box-shadow:0 22px 48px rgba(18,58,90,0.12)} .compare-switch__side{min-height:116px; display:flex; flex-direction:column; justify-content:center; gap:0.45rem; padding:1rem; border-radius:16px; border:1px solid rgba(226,232,240,0.9)} .compare-switch__side span{font-size:0.78rem; font-weight:700; color:var(--muted)} .compare-switch__side b{color:var(--navy); font-size:1rem; line-height:1.35} .compare-switch__side--old{background:#f8fafc} .compare-switch__side--new{background:linear-gradient(135deg,var(--navy) 0%,#0e4f72 100%); border-color:rgba(34,197,94,0.35)} .compare-switch__side--new span{color:#9fe9bd} .compare-switch__side--new b{color:#fff} .compare-switch__arrow{width:36px; height:36px; display:grid; place-items:center; color:#fff; background:var(--sky); border-radius:999px; font-size:1.05rem; font-weight:800; box-shadow:0 12px 28px rgba(56,189,248,0.32); animation:compare-arrow-nudge 2.2s ease-in-out infinite} .compare-points{display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; margin-bottom:1.15rem} .compare-points>div{position:relative; min-height:132px; overflow:hidden; padding:1rem 1rem 0.95rem; border:1px solid rgba(148,163,184,0.28); border-radius:18px; background:rgba(255,255,255,0.88); box-shadow:0 14px 34px rgba(18,58,90,0.08); transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease} .compare-points>div::after{content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:4px; border-radius:999px 999px 0 0; background:linear-gradient(90deg,var(--orange),var(--sky),var(--mint)); transform:scaleX(0.44); transform-origin:left; transition:transform 0.22s ease} .compare-points>div:hover{transform:translateY(-3px); border-color:rgba(56,189,248,0.45); box-shadow:0 18px 44px rgba(18,58,90,0.12)} .compare-points>div:hover::after{transform:scaleX(1)} .compare-points span{width:36px; height:36px; display:grid; place-items:center; margin-bottom:0.75rem; border-radius:12px; background:#eaf6ff; color:var(--sky); font-size:0.82rem; font-weight:800} .compare-points b{display:block; margin-bottom:0.3rem; color:var(--navy); font-size:1.03rem} .compare-points p{margin:0; color:var(--muted); font-size:0.92rem; line-height:1.55} .compare{position:relative; overflow:hidden; border-radius:24px; border:1px solid rgba(148,163,184,0.34); background:rgba(255,255,255,0.96); box-shadow:0 26px 58px rgba(18,58,90,0.16)} .compare::before{content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--orange),var(--sky),var(--mint)); z-index:1} .compare table{width:100%; border-collapse:separate; border-spacing:0; font-size:1rem} .compare th,.compare td{padding:17px 20px; text-align:left; border-bottom:1px solid rgba(226,232,240,0.95); vertical-align:middle} .compare thead th{background:#123a5a; color:#fff; font-weight:700} .compare thead th:first-child{background:#0f314e} .compare thead th:last-child{background:#0d2c45; color:#dffdea} .compare tbody tr{transition:background 0.2s ease} .compare tbody tr:hover{background:#f8fbff} .compare tbody th{width:30%; font-weight:700; color:var(--navy); background:linear-gradient(90deg,#f3f8fd 0%,#ffffff 100%)} .compare .col-self{color:var(--muted); background:#fff} .compare .col-isabuy{color:var(--text); font-weight:600; background:linear-gradient(90deg,#f1fbf5 0%,#ffffff 100%)} .compare td .tick{display:inline-flex; align-items:center; gap:0.65rem} .compare td .tick svg{width:22px; height:22px; flex:none; padding:4px; border-radius:999px} .tick--yes svg{color:var(--mint); background:#dcfce7} .tick--no svg{color:#94a3b8; background:#f1f5f9} .compare tr:last-child td,.compare tr:last-child th{border-bottom:none} @keyframes compare-arrow-nudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)}} .pricing__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:1.5rem; align-items:start} .price-facts{display:grid; gap:0.85rem} .price-fact{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.2rem; box-shadow:var(--shadow-sm)} .price-fact svg{width:24px; height:24px; color:var(--mint); flex:none; margin-top:2px} .price-fact b{color:var(--navy); display:block} .price-fact span{color:var(--muted); font-size:0.95rem} .calc{background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2rem)} .calc h3{margin-bottom:0.3rem} .calc__hint{color:var(--muted); font-size:0.95rem; margin-bottom:1.4rem} .calc-sliders{display:grid; gap:1.15rem} .range-field{padding:1rem; border:1px solid rgba(203,213,225,0.86); border-radius:18px; background:linear-gradient(135deg,rgba(239,249,255,0.85),rgba(255,255,255,0.96) 42%),#fff; box-shadow:0 12px 28px rgba(18,58,90,0.06)} .range-field__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.8rem} .range-field label{color:var(--navy); font-weight:800} .range-field output{flex:none; min-width:108px; padding:8px 12px; border-radius:999px; background:#eaf6ff; color:var(--navy); text-align:center; font-weight:900; box-shadow:inset 0 0 0 1px rgba(56,189,248,0.18)} .range-field input[type="range"]{--range-progress:0%; width:100%; height:12px; appearance:none; border-radius:999px; background:linear-gradient(90deg,var(--sky) 0%,var(--mint) var(--range-progress),rgba(226,232,240,0.95) var(--range-progress),rgba(226,232,240,0.95) 100%); cursor:pointer} .range-field input[type="range"]:focus{outline:none; box-shadow:0 0 0 4px rgba(56,189,248,0.18)} .range-field input[type="range"]::-webkit-slider-thumb{appearance:none; width:28px; height:28px; border:5px solid #fff; border-radius:50%; background:var(--mint); box-shadow:0 10px 22px rgba(34,197,94,0.32),0 0 0 1px rgba(18,58,90,0.12)} .range-field input[type="range"]::-moz-range-thumb{width:18px; height:18px; border:5px solid #fff; border-radius:50%; background:var(--mint); box-shadow:0 10px 22px rgba(34,197,94,0.32),0 0 0 1px rgba(18,58,90,0.12)} .range-scale{display:flex; justify-content:space-between; margin-top:0.55rem; color:var(--muted); font-size:0.78rem; font-weight:700} .field{margin-bottom:1rem} .field label{display:block; font-weight:500; font-size:0.95rem; margin-bottom:6px; color:var(--navy)} .field input{width:100%; font-family:inherit; font-size:1rem; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fbfdff; color:var(--text); transition:border-color 0.15s ease,box-shadow 0.15s ease} .field input:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(56,189,248,0.2)} .field__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem} .calc__result{margin-top:1.4rem; border-radius:var(--radius); background:var(--navy); color:#fff; padding:1.4rem 1.5rem} .calc__result h4{color:#fff; margin:0 0 1rem; font-size:1.05rem} .cost-vs{position:relative; display:grid; grid-template-columns:1fr 42px 1fr; gap:0.65rem; align-items:stretch; margin-bottom:0.9rem} .cost-vs__card{min-height:158px; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; border:1px solid rgba(125,211,252,0.18); border-radius:18px; background:rgba(255,255,255,0.07)} .cost-vs__card span,.cost-vs__card small{color:var(--on-dark-muted); font-size:0.86rem} .cost-vs__card strong{display:block; color:#e0f2fe; font-size:clamp(1.55rem,3vw,2.25rem); line-height:1; font-weight:900; white-space:nowrap} .cost-vs__card small b{color:#fff; font-weight:900} .cost-vs__card--isabuy{border-color:rgba(74,222,128,0.28); background:radial-gradient(circle at 88% 10%,rgba(34,197,94,0.22),transparent 42%),rgba(22,101,52,0.26)} .cost-vs__card--isabuy strong,.cost-vs__card--isabuy small b{color:#bbf7d0} .cost-vs__badge{align-self:center; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--sky)); color:#fff; font-size:0.78rem; font-weight:900; box-shadow:0 14px 30px rgba(56,189,248,0.22)} .cost-breakdown{display:grid; gap:0.5rem; padding:0.65rem; border:1px solid rgba(255,255,255,0.12); border-radius:16px; background:rgba(4,31,50,0.38)} .cost-breakdown>div{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.55rem 0.65rem; border-radius:12px; background:rgba(255,255,255,0.05)} .cost-breakdown span{color:var(--on-dark-muted); font-size:0.88rem} .cost-breakdown b{color:#fff; font-weight:900; white-space:nowrap} .result-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.18)} .result-row:last-of-type{border-bottom:none} .result-row span{color:var(--on-dark-muted); font-size:0.95rem} .result-row b{font-size:1.35rem; color:var(--sky); font-weight:800; white-space:nowrap} .result-note{margin:1rem 0 0; font-size:0.9rem; color:var(--on-dark-muted)} body.quote-open{overflow:hidden} .quote-modal{position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.22s ease,visibility 0.22s ease} .quote-modal.is-open{opacity:1; visibility:visible; pointer-events:auto} .quote-modal__backdrop{position:absolute; inset:0; background:radial-gradient(circle at 72% 22%,rgba(56,189,248,0.2),transparent 36%),rgba(4,19,31,0.62); backdrop-filter:blur(12px)} .quote-modal__panel{position:relative; width:min(1120px,100%); height:min(860px,calc(100vh - 40px)); max-height:min(860px,calc(100vh - 40px)); overflow:hidden; border:1px solid rgba(226,232,240,0.9); border-radius:28px; background:linear-gradient(135deg,rgba(248,251,255,0.96),rgba(255,255,255,0.98) 42%,rgba(236,253,243,0.88)),#fff; box-shadow:0 30px 90px rgba(4,31,50,0.28)} .quote-modal__close{position:absolute; top:18px; right:18px; z-index:4; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(203,213,225,0.85); border-radius:50%; background:rgba(255,255,255,0.92); color:var(--navy); cursor:pointer; box-shadow:var(--shadow-sm)} .quote-modal__close svg{width:20px; height:20px} .quote-studio{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,0.78fr); height:100%; min-height:0} .quote-studio__form{display:grid; grid-template-rows:auto auto minmax(0,1fr); padding:clamp(1.4rem,4vw,2.6rem); padding-right:clamp(1.4rem,3vw,2rem); min-height:0; overflow:hidden} .quote-studio__form h2{max-width:620px; font-size:clamp(1.8rem,3.4vw,2.65rem)} .quote-studio__form>p{max-width:620px; color:var(--muted)} .quote-intro{transition:opacity 0.18s ease,transform 0.18s ease,max-height 0.18s ease,margin 0.18s ease} .quote-modal.is-box-step .quote-intro{max-height:0; margin:0; overflow:hidden; opacity:0; transform:translateY(-8px)} .quote-modal.is-box-step .quote-progress{margin-top:0.25rem} .quote-modal.is-box-step .quote-progress span{background:linear-gradient(90deg,#38bdf8,#60a5fa 48%,#ffb454)} .quote-progress{height:10px; margin:1.4rem 0 1.5rem; overflow:hidden; border-radius:999px; background:rgba(226,232,240,0.9)} .quote-progress span{display:block; width:20%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--sky),var(--mint)); box-shadow:0 10px 24px rgba(34,197,94,0.24); transition:width 0.28s ease} .quote-form{display:grid; grid-template-rows:minmax(0,1fr) auto; gap:1.15rem; min-height:0; overflow:hidden} .quote-honeypot{position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important} .quote-step{display:none; min-height:270px; padding:clamp(1rem,2.4vw,1.4rem); border:1px solid rgba(203,213,225,0.85); border-radius:22px; background:rgba(255,255,255,0.78); box-shadow:0 14px 34px rgba(18,58,90,0.07)} .quote-step.is-active{display:block; min-height:0; overflow:auto; animation:quoteStepIn 0.22s ease both} .quote-step__label{display:inline-flex; margin-bottom:0.7rem; color:var(--sky); font-size:0.82rem; font-weight:900} .quote-step h3{margin-bottom:1rem; font-size:clamp(1.25rem,2.4vw,1.65rem)} .quote-box-context{display:inline-flex; flex-wrap:wrap; align-items:center; gap:0.45rem; margin:-0.25rem 0 1rem; padding:0.46rem 0.72rem; border:1px solid rgba(203,213,225,0.82); border-radius:999px; background:#fff} .quote-box-context span,.quote-box-context small{color:var(--muted); font-size:0.78rem; font-weight:800} .quote-box-context strong{color:var(--navy); font-size:0.88rem; font-weight:900} .quote-options{display:flex; flex-wrap:wrap; gap:0.7rem} .quote-options--grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))} .quote-box-picker__head,.quote-box-kpi__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.85rem} .quote-box-picker__head span,.quote-box-kpi__head span{color:var(--muted); font-size:0.86rem; font-weight:900} .quote-box-picker__head strong{flex:none; min-width:54px; padding:0.35rem 0.65rem; border-radius:999px; background:var(--sky-050); color:var(--sky); font-size:0.86rem; text-align:center} .quote-box-kpi{display:none} .quote-step.is-box-complete .quote-box-picker{display:none} .quote-step.is-box-complete .quote-box-kpi{display:block} .quote-box-kpi__head{align-items:flex-start; margin-bottom:1.05rem} .quote-box-kpi__head strong{display:block; color:var(--navy); font-size:clamp(1.15rem,2vw,1.45rem); letter-spacing:0} .quote-box-kpi__head small{display:block; max-width:560px; margin-top:0.22rem; color:var(--muted); font-size:0.86rem; font-weight:700} .quote-box-kpi__head .btn{flex:none; padding:10px 16px; font-size:0.88rem} .quote-box-slots{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.8rem; margin-bottom:0} .quote-box-slot{--slot-accent:var(--sky); --slot-soft:#eaf6ff; min-width:0; display:grid; gap:0.8rem; padding:0.95rem; border:1px solid rgba(203,213,225,0.95); border-radius:20px; background:#fff; color:var(--navy); font:inherit; text-align:left; box-shadow:0 12px 30px rgba(18,58,90,0.07)} .quote-box-slot__pick{width:100%; min-width:0; display:grid; grid-template-columns:1fr; gap:0.36rem; align-items:start; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:default} .quote-box-slot small{color:var(--muted); font-size:0.75rem; font-weight:800} .quote-box-slot b{display:block; font-size:clamp(1.55rem,3.2vw,2rem); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .quote-box-slot__pick em{justify-self:stretch; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:0.34rem; padding:0.5rem 0.62rem; border:1px solid rgba(203,213,225,0.64); border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,0.96),rgba(248,251,255,0.92)),#fff; color:var(--navy); font-style:normal; font-weight:900; white-space:nowrap; box-shadow:inset 0 -1px 0 rgba(18,58,90,0.05)} .quote-box-orders__num{color:var(--slot-accent); font-size:1.08rem; line-height:1; font-weight:900} .quote-box-orders__unit{min-width:0; color:var(--muted); font-size:0.72rem; line-height:1.05; font-weight:900; overflow:hidden; text-overflow:ellipsis} .quote-box-slot.is-active{border-color:var(--slot-accent); box-shadow:0 0 0 4px rgba(56,189,248,0.1),0 16px 36px rgba(18,58,90,0.1)} .quote-box-slot.is-filled .quote-box-slot__pick em{border-color:color-mix(in srgb,var(--slot-accent) 34%,rgba(203,213,225,0.68)); background:radial-gradient(circle at 92% 16%,color-mix(in srgb,var(--slot-accent) 13%,transparent),transparent 44%),linear-gradient(135deg,#fff,rgba(248,251,255,0.94))} .quote-box-slot:nth-child(1){--slot-accent:var(--sky); --slot-soft:#eaf6ff; --slot-track:#7dd3fc} .quote-box-slot:nth-child(2){--slot-accent:var(--mint); --slot-soft:#ecfdf3; --slot-track:#86efac} .quote-box-slot:nth-child(3){--slot-accent:var(--orange); --slot-soft:#fff7ed; --slot-track:#fdba74} .quote-box-weight{display:grid; grid-template-columns:1fr; gap:0.58rem; align-items:start} .quote-box-weight span{justify-self:start; min-width:0; padding:0.38rem 0.5rem; border-radius:999px; background:var(--slot-soft); color:var(--slot-accent); font-size:0.85rem; font-weight:900; text-align:center; white-space:nowrap} .quote-box-weight input[type="range"]{--range-progress:70%; --slot-track:var(--slot-accent); width:100%; height:10px; appearance:none; border-radius:999px; background:linear-gradient(90deg,var(--slot-track),var(--slot-accent) var(--range-progress),rgba(226,232,240,0.92) var(--range-progress),rgba(226,232,240,0.92) 100%); cursor:pointer} .quote-box-weight input[type="range"]::-webkit-slider-thumb{appearance:none; width:21px; height:21px; border:4px solid #fff; border-radius:50%; background:var(--slot-accent); box-shadow:0 8px 18px rgba(18,58,90,0.16),0 0 0 1px rgba(18,58,90,0.1)} .quote-box-weight input[type="range"]::-moz-range-thumb{width:13px; height:13px; border:4px solid #fff; border-radius:50%; background:var(--slot-accent); box-shadow:0 8px 18px rgba(18,58,90,0.16),0 0 0 1px rgba(18,58,90,0.1)} .quote-box-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0.65rem; max-height:430px; overflow:auto; padding:2px 4px 2px 2px; scrollbar-width:thin} .quote-box-card{position:relative; min-height:122px; display:grid; align-content:space-between; gap:0.5rem; padding:0.75rem; border:1px solid rgba(203,213,225,0.9); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,0.96),rgba(239,249,255,0.86)),#fff; color:var(--navy); font:inherit; text-align:left; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform 0.16s ease,border-color 0.16s ease,box-shadow 0.16s ease} .quote-box-card:hover{transform:translateY(-2px); border-color:rgba(56,189,248,0.55); box-shadow:0 16px 32px rgba(18,58,90,0.12)} .quote-box-card.is-selected{border-color:rgba(34,197,94,0.58); background:radial-gradient(circle at 88% 16%,rgba(34,197,94,0.18),transparent 38%),linear-gradient(145deg,rgba(236,253,243,0.95),rgba(255,255,255,0.96))} .quote-box-card__rank{position:absolute; top:9px; right:9px; min-width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--mint); color:#fff; font-size:0.78rem; font-weight:900} .quote-box-visual{--box-color:#f3b166; width:48px; height:38px; position:relative; margin-top:0.25rem; transform:scale(var(--box-scale,1)); transform-origin:left bottom} .quote-box-visual::before,.quote-box-visual::after,.quote-box-visual span{content:""; position:absolute; border-radius:5px; background:var(--box-color)} .quote-box-visual::before{width:40px; height:28px; left:6px; bottom:0; box-shadow:inset 0 -8px 0 rgba(109,57,13,0.11)} .quote-box-visual::after{width:28px; height:14px; left:12px; bottom:26px; transform:skewX(-24deg); filter:brightness(1.08)} .quote-box-visual span{width:18px; height:28px; right:0; bottom:0; transform:skewY(-32deg); filter:brightness(0.9)} .quote-box-card b{font-size:1.15rem; line-height:1} .quote-box-card small{display:none; color:var(--muted); font-size:0.78rem; line-height:1.35} .quote-box-card em{justify-self:start; max-width:100%; padding:0.3rem 0.55rem; border-radius:999px; background:rgba(56,189,248,0.1); color:var(--sky); font-style:normal; font-size:0.72rem; font-weight:900; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .quote-chip{position:relative; min-width:0} .quote-chip input{position:absolute; opacity:0; pointer-events:none} .quote-chip span{min-height:54px; display:flex; align-items:center; justify-content:center; padding:0.85rem 1rem; border:1px solid rgba(203,213,225,0.9); border-radius:16px; background:#fff; color:var(--navy); font-weight:900; text-align:center; box-shadow:var(--shadow-sm); transition:transform 0.16s ease,border-color 0.16s ease,background 0.16s ease,box-shadow 0.16s ease} .quote-chip input:checked + span{border-color:rgba(34,197,94,0.45); background:linear-gradient(135deg,rgba(236,253,243,0.95),rgba(239,249,255,0.9)),#fff; box-shadow:0 14px 28px rgba(34,197,94,0.14)} .quote-chip input:focus-visible + span{outline:3px solid rgba(56,189,248,0.26); outline-offset:2px} .quote-chip span::before{content:""; width:10px; height:10px; margin-right:8px; border-radius:50%; border:2px solid rgba(91,112,133,0.42)} .quote-chip input:checked + span::before{border-color:var(--mint); background:var(--mint); box-shadow:inset 0 0 0 2px #fff} .quote-range{margin-bottom:1rem; box-shadow:none} .quote-fields{display:grid; gap:0.85rem} .quote-fields label{display:grid; gap:0.45rem; color:var(--navy); font-weight:900} .quote-fields input{width:100%; min-height:54px; padding:0.85rem 1rem; border:1px solid rgba(203,213,225,0.95); border-radius:16px; background:#fff; color:var(--text); font:inherit} .quote-fields input:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(56,189,248,0.16)} .quote-fields input:invalid:not(:placeholder-shown){border-color:rgba(239,68,68,0.55); box-shadow:0 0 0 4px rgba(239,68,68,0.1)} .quote-status{display:none; margin-top:1rem; padding:0.85rem 1rem; border:1px solid rgba(203,213,225,0.82); border-radius:16px; background:#fff; color:var(--muted); font-size:0.92rem; font-weight:800; line-height:1.5} .quote-status.is-visible{display:block} .quote-status.is-success{border-color:rgba(34,197,94,0.32); background:rgba(236,253,243,0.86); color:#166534} .quote-status.is-error{border-color:rgba(251,146,60,0.42); background:rgba(255,247,237,0.92); color:#9a3412} .quote-note{margin:1rem 0 0; color:var(--muted); font-size:0.9rem} .quote-actions{position:relative; z-index:5; display:flex; justify-content:space-between; gap:0.75rem; margin:0 -0.25rem 0; padding:0.9rem 0.25rem 1rem; border-radius:18px 18px 0 0; background:linear-gradient(180deg,rgba(248,251,255,0),rgba(248,251,255,0.96) 22%,rgba(248,251,255,0.98)); backdrop-filter:blur(10px)} .quote-actions__left{display:flex; gap:0.75rem} .quote-actions .btn{min-width:134px} .quote-box-edit-action{display:none} .quote-modal.is-box-step.is-box-complete .quote-box-edit-action{display:inline-flex} .quote-preview{position:relative; display:grid; align-content:start; gap:1rem; padding:clamp(1.4rem,3.5vw,2.2rem); background:radial-gradient(circle at 88% 8%,rgba(34,197,94,0.3),transparent 32%),linear-gradient(160deg,#123a5a 0%,#0d2c45 54%,#0b3d43 100%); color:#fff; overflow:hidden} .quote-preview::before{content:""; position:absolute; inset:auto -18% -22% 18%; height:180px; border-radius:50%; background:rgba(34,197,94,0.18); transform:rotate(-7deg)} .quote-preview>*{position:relative; z-index:1} .quote-preview__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-right:44px} .quote-preview__head span,.quote-preview__price small,.quote-preview__price span,.quote-preview__stats span{color:var(--on-dark-muted)} .quote-preview__head strong{padding:8px 12px; border-radius:999px; background:rgba(34,197,94,0.18); color:#bbf7d0; font-size:0.86rem} .quote-preview__price{position:relative; padding:1.2rem; border:1px solid rgba(125,211,252,0.18); border-radius:20px; background:rgba(255,255,255,0.08)} .quote-preview__price-head{display:flex; align-items:center; justify-content:space-between; gap:0.75rem} .quote-cost-trigger{flex:none; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(125,211,252,0.24); border-radius:12px; background:rgba(255,255,255,0.1); color:#e0f2fe; cursor:pointer; transition:transform 0.16s ease,background 0.16s ease,border-color 0.16s ease} .quote-cost-trigger svg{width:19px; height:19px} .quote-cost-trigger:hover{transform:translateY(-1px); border-color:rgba(125,211,252,0.48); background:rgba(255,255,255,0.16)} .quote-cost-trigger:focus-visible{outline:3px solid rgba(56,189,248,0.34); outline-offset:2px} .quote-preview__price strong{display:block; margin:0.2rem 0 0.35rem; color:#fff; font-size:clamp(2.1rem,4vw,3rem); line-height:1; font-weight:900; letter-spacing:0} .quote-preview__price span{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.1); font-size:0.88rem; font-weight:800} .quote-preview__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0.65rem} .quote-preview__stats div{min-width:0; padding:0.9rem; border:1px solid rgba(125,211,252,0.14); border-radius:16px; background:rgba(255,255,255,0.07)} .quote-preview__stats span{display:block; font-size:0.76rem} .quote-preview__stats b{display:block; margin-top:0.2rem; color:var(--sky); font-size:1.2rem; line-height:1.1; font-weight:900} .quote-preview__stats small{display:block; margin-top:0.25rem; color:rgba(216,236,247,0.82); font-size:0.66rem; line-height:1.25; font-weight:800} .quote-cost-modal{position:absolute; inset:0; z-index:6; display:grid; place-items:center; padding:clamp(1rem,3vw,2rem); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.18s ease,visibility 0.18s ease} .quote-cost-modal.is-open{opacity:1; visibility:visible; pointer-events:auto} .quote-cost-modal__backdrop{position:absolute; inset:0; border:0; background:rgba(4,19,31,0.52); backdrop-filter:blur(10px); cursor:pointer} .quote-cost-modal__card{position:relative; z-index:1; width:min(720px,100%); max-height:min(760px,calc(100vh - 76px)); overflow:auto; padding:clamp(1.2rem,3.2vw,1.8rem); border:1px solid rgba(226,232,240,0.9); border-radius:24px; background:radial-gradient(circle at 88% 8%,rgba(34,197,94,0.16),transparent 34%),linear-gradient(145deg,#fff,#f8fbff 54%,#effaf4); color:var(--navy); box-shadow:0 28px 90px rgba(4,31,50,0.32)} .quote-cost-modal__close{position:absolute; top:16px; right:16px; width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(203,213,225,0.86); border-radius:50%; background:#fff; color:var(--navy); cursor:pointer; box-shadow:var(--shadow-sm)} .quote-cost-modal__close svg{width:18px; height:18px} .quote-cost-modal__eyebrow{display:inline-flex; margin-bottom:0.75rem; padding:0.42rem 0.7rem; border-radius:999px; background:var(--sky-050); color:var(--sky); font-size:0.78rem; font-weight:900} .quote-cost-modal h3{max-width:520px; margin:0 2.5rem 0.65rem 0; font-size:clamp(1.45rem,3vw,2rem); line-height:1.18} .quote-cost-modal p{max-width:600px; margin:0 0 1rem; color:var(--muted)} .quote-cost-model__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.8rem; margin-top:1rem} .quote-cost-model__grid>div{min-width:0; padding:1rem; border:1px solid rgba(203,213,225,0.86); border-radius:18px; background:rgba(255,255,255,0.84); box-shadow:var(--shadow-sm)} .quote-cost-model__grid>div.is-isabuy{border-color:rgba(34,197,94,0.35); background:radial-gradient(circle at 90% 12%,rgba(34,197,94,0.16),transparent 40%),#fff} .quote-cost-model__grid small{display:block; color:var(--muted); font-weight:900} .quote-cost-model__grid strong{display:block; margin:0.22rem 0 0.3rem; color:var(--navy); font-size:clamp(1.55rem,4vw,2.3rem); line-height:1; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .quote-cost-model__grid span{display:block; color:var(--muted); font-size:0.82rem; font-weight:800; line-height:1.35} .quote-cost-model__result{margin-top:0.85rem; padding:1rem; border:1px solid rgba(56,189,248,0.22); border-radius:18px; background:linear-gradient(135deg,rgba(239,249,255,0.96),rgba(255,255,255,0.9)),#fff} .quote-cost-model__result span{display:block; color:var(--muted); font-weight:900} .quote-cost-model__result strong{display:block; margin-top:0.25rem; color:var(--navy); font-size:clamp(1.55rem,4vw,2.5rem); line-height:1; font-weight:900} .quote-cost-model__result.is-good{border-color:rgba(34,197,94,0.32); background:linear-gradient(135deg,rgba(236,253,243,0.98),rgba(255,255,255,0.92)),#fff} .quote-cost-model__result.is-good strong{color:#16a34a} .quote-cost-model__result.is-bad{border-color:rgba(251,146,60,0.38); background:linear-gradient(135deg,rgba(255,247,237,0.98),rgba(255,255,255,0.92)),#fff} .quote-cost-model__result.is-bad strong{color:var(--orange)} .quote-cost-model__rows{display:grid; gap:0.55rem; margin-top:0.85rem; padding:0.8rem; border:1px solid rgba(203,213,225,0.72); border-radius:18px; background:rgba(255,255,255,0.64)} .quote-cost-model__rows div{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.58rem 0.68rem; border-radius:12px; background:rgba(248,251,255,0.92)} .quote-cost-model__rows span{color:var(--muted); font-weight:850} .quote-cost-model__rows strong{color:var(--navy); font-weight:900; white-space:nowrap} .quote-cost-model__note{margin:0.85rem 0 0 !important; font-size:0.86rem} .quote-summary{display:grid; gap:0.7rem; padding:1rem; border-radius:18px; background:rgba(4,31,50,0.34)} .quote-summary li{display:flex; gap:0.55rem; color:var(--on-dark); font-size:0.94rem} .quote-summary li::before{content:"✓"; color:#86efac; font-weight:900} .quote-preview__cta{display:grid; gap:0.7rem; margin-top:0.25rem} .quote-preview__cta .btn--ghost{border-color:rgba(255,255,255,0.22); color:#fff} .quote-preview__cta .btn--ghost:hover{border-color:var(--sky); color:var(--sky)} @keyframes quoteStepIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}} .trust__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center} .trust__media{display:grid; grid-template-columns:1fr 1fr; gap:1rem} .trust__media img{border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:1/1; object-fit:cover; width:100%} .trust__media img:first-child{grid-row:span 2; aspect-ratio:3/4} .checklist{display:grid; gap:0.75rem; margin-top:1.25rem} .checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--text)} .checklist svg{width:22px; height:22px; color:var(--mint); flex:none; margin-top:3px} .reviews-shell{margin-top:3rem} .reviews-head{display:flex; align-items:end; justify-content:space-between; gap:1.25rem; margin-bottom:1rem} .reviews-head .eyebrow{margin-bottom:0.45rem} .reviews-head h3{margin:0; color:var(--navy); font-size:clamp(1.45rem,3vw,2rem)} .reviews-controls{display:flex; gap:0.6rem; flex:none} .review-nav{width:46px; height:46px; display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:50%; background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform 0.15s ease,border-color 0.15s ease,color 0.15s ease} .review-nav:hover{border-color:var(--sky); color:var(--sky); transform:translateY(-1px)} .review-nav svg{width:22px; height:22px} .reviews{display:flex; gap:1.25rem; overflow-x:auto; overscroll-behavior-inline:contain; scroll-padding-inline:2px; scroll-snap-type:x mandatory; padding:4px 2px 18px; scrollbar-width:thin; scrollbar-color:rgba(56,189,248,0.55) rgba(226,232,240,0.7)} .review{position:relative; flex:0 0 clamp(300px,calc((100% - 2.5rem) / 3),390px); scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm)} .review::before{content:""; position:absolute; top:0; left:22px; right:22px; height:3px; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--sky),var(--mint))} .review--video{flex-basis:clamp(320px,calc((100% - 2.5rem) / 3),420px)} .review-video{position:relative; overflow:hidden; aspect-ratio:16 / 9; margin-bottom:1rem; border-radius:14px; background:#0f2740; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)} .review-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .review__top{display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.9rem} .review__tag{display:inline-flex; align-items:center; min-height:30px; padding:5px 10px; border-radius:999px; background:#eff9ff; color:var(--sky); font-size:0.78rem; font-weight:900} .review__top small{color:var(--muted); font-size:0.78rem; font-weight:700; text-align:right} .review__stars{color:var(--orange); display:flex; gap:2px; margin-bottom:0.75rem} .review__stars svg{width:18px; height:18px} .review p{color:var(--text); font-size:0.98rem; line-height:1.75} .review__result{display:grid; grid-template-columns:auto 1fr; gap:0.35rem 0.65rem; margin-top:1rem; padding:0.85rem; border-radius:14px; background:linear-gradient(135deg,#f8fbff,#effdf5); border:1px solid rgba(203,213,225,0.75)} .review__result span{color:var(--muted); font-size:0.72rem; font-weight:800} .review__result b{color:var(--navy); font-size:0.86rem} .review__by{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:1rem} .review__avatar{width:42px; height:42px; border-radius:50%; background:var(--sky-050); color:var(--navy); display:grid; place-items:center; font-weight:700} .review__by b{display:block; color:var(--navy); font-size:0.95rem} .review__by small{color:var(--muted)} .faq{max-width:800px; margin-inline:auto; display:grid; gap:0.75rem} .faq__item{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden} .faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:18px 20px; background:transparent; border:none; font-family:inherit; font-size:1.02rem; font-weight:600; color:var(--navy); text-align:left; cursor:pointer} .faq__q .chev{width:22px; height:22px; flex:none; transition:transform 0.2s ease; color:var(--sky)} .faq__item[open] .chev{transform:rotate(180deg)} .faq__a{padding:0 20px 18px; color:var(--muted); margin:0} .faq__item summary{list-style:none} .faq__item summary::-webkit-details-marker{display:none} .final-cta{background:linear-gradient(135deg,var(--navy) 0%,#14507e 100%); color:#fff; text-align:center} .final-cta h2{color:#fff} .final-cta p{color:var(--on-dark-muted); max-width:52ch; margin-inline:auto; font-size:1.1rem} .final-cta .hero__cta{justify-content:center; margin-top:1.75rem} .footer{background:var(--navy-700); color:var(--on-dark-muted); padding-block:3rem 1.5rem} .footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem} .footer h3{color:#fff; font-size:1rem; margin-bottom:1rem} .footer a{color:var(--on-dark-muted); font-size:0.95rem; line-height:2} .footer a:hover{color:var(--sky)} .footer .brand{color:#fff} .footer .brand__logo{filter:brightness(0) invert(1)} .footer__about{max-width:34ch; font-size:0.95rem; margin-top:1rem} .footer__bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:1.25rem; font-size:0.88rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem} .line-float{position:fixed; right:18px; bottom:18px; z-index:70; width:58px; height:58px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center; box-shadow:0 8px 24px rgba(34,197,94,0.4); transition:transform 0.15s ease} .line-float:hover{transform:scale(1.06)} .line-float svg{width:30px; height:30px} .sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:65; background:#fff; border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(18,58,90,0.1); padding:10px 16px; display:none; gap:10px; align-items:center; justify-content:space-between; transform:translateY(110%); transition:transform 0.25s ease} .sticky-cta.is-visible{transform:translateY(0)} .sticky-cta strong{color:var(--navy); font-size:0.95rem} .sticky-cta small{display:block; color:var(--muted); font-weight:400; font-size:0.8rem} .sticky-cta .btn{padding:12px 18px; font-size:0.95rem} .reveal{opacity:1; transform:none; transition:opacity 0.6s ease,transform 0.6s ease} .reveal.is-in{opacity:1; transform:none} @media (max-width:960px){.hero__grid{grid-template-columns:1fr; min-height:auto; padding:0; border-radius:24px} .hero__grid::before{display:none} .hero__content{grid-row:2; padding:clamp(1.35rem,6vw,2rem); margin-top:-34px; max-width:none} .hero__content::before{inset:0; border-radius:24px 24px 0 0; background:linear-gradient(180deg,rgba(248,251,255,0.98),#f8fbff 88%); box-shadow:0 -16px 36px rgba(18,58,90,0.07); backdrop-filter:blur(2px)} .hero__media{position:relative; inset:auto; z-index:0; grid-row:1; overflow:hidden; aspect-ratio:16 / 10} .hero__sub{max-width:none} .hero__media::after{background:linear-gradient(180deg,transparent 0%,transparent 66%,rgba(248,251,255,0.76) 88%,#f8fbff 100%),linear-gradient(90deg,rgba(248,251,255,0.08) 0%,transparent 18%,transparent 82%,rgba(248,251,255,0.08) 100%)} .hero__media img{width:100%; height:100%; object-fit:cover; object-position:66% center; transform:scale(1.06); transform-origin:66% center} .integration-map{min-height:310px} .api-chain{flex-wrap:wrap} .api-chain small{flex-basis:100%; text-align:center} .grid--3,.reviews{grid-template-columns:repeat(2,1fr)} .pricing__grid,.trust__grid{grid-template-columns:1fr} .quote-modal{padding:14px; align-items:start; overflow-y:auto} .quote-modal__panel{height:auto; max-height:none; overflow:visible} .quote-studio{grid-template-columns:1fr; height:auto; min-height:0} .quote-studio__form{display:block; overflow:visible} .quote-form{display:grid; overflow:visible} .quote-step.is-active{overflow:visible} .quote-preview{min-height:auto} .quote-cost-model__grid{grid-template-columns:1fr} .quote-box-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .sla-panel{grid-template-columns:1fr} .metric-panel{grid-template-columns:1fr} .metric-intro h2{max-width:none} .metric-list{grid-template-columns:repeat(2,minmax(0,1fr))} .pain-layout{grid-template-columns:1fr; align-items:start} .pain-copy{max-width:820px; padding-bottom:0.5rem} .service-flow{grid-template-columns:repeat(2,minmax(0,1fr))} .compare-head{grid-template-columns:1fr; align-items:start} .compare-switch{max-width:680px} .compare-points{grid-template-columns:1fr} .compare-points>div{min-height:auto} .cost-grid{grid-template-columns:1fr} .free-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer__grid{grid-template-columns:1fr 1fr}} @media (max-width:720px){body{font-size:16px} .nav__list,.nav .nav__cta{display:none} .nav-toggle{display:inline-flex} .nav.is-open{position:absolute; top:68px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; box-shadow:var(--shadow)} .nav.is-open .nav__list{display:flex; flex-direction:column; gap:0} .nav.is-open .nav__list a{padding:12px 0; border-bottom:1px solid var(--border)} .nav.is-open .nav__cta{display:flex; flex-direction:column; margin-top:12px} .grid--3,.grid--2,.reviews,.field__row,.trust__media{grid-template-columns:1fr} .quote-modal{padding:0; place-items:stretch} .quote-modal__panel{width:100%; height:auto; min-height:100dvh; border-radius:0; border:0} .quote-modal__close{top:10px; right:10px; width:36px; height:36px; border-radius:12px; box-shadow:0 8px 18px rgba(18,58,90,0.1)} .quote-studio__form,.quote-preview{padding:1rem} .quote-preview{padding-top:3.7rem} .quote-cost-modal{position:fixed; padding:0.9rem} .quote-cost-modal__card{max-height:calc(100dvh - 1.8rem); border-radius:22px} .quote-cost-modal h3{margin-right:2.4rem} .quote-options--grid,.quote-preview__stats,.quote-box-slots{grid-template-columns:repeat(3,minmax(0,1fr))} .quote-box-kpi__head,.quote-box-picker__head{align-items:flex-start; flex-direction:column; gap:0.55rem} .quote-box-kpi__head .btn{width:100%} .quote-box-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; max-height:min(44dvh,330px); overflow:auto; padding:2px 4px 4px 2px; overscroll-behavior:contain} .quote-box-card{min-height:102px; padding:0.55rem; border-radius:14px; gap:0.28rem} .quote-box-visual{width:30px; height:25px; margin-top:0} .quote-box-visual::before{width:25px; height:18px; left:4px; box-shadow:inset 0 -6px 0 rgba(109,57,13,0.11)} .quote-box-visual::after{width:18px; height:9px; left:8px; bottom:17px} .quote-box-visual span{width:12px; height:18px} .quote-box-card b{font-size:0.98rem} .quote-box-card small{display:block; font-size:0.68rem; line-height:1.22} .quote-box-card em{padding:0.28rem 0.4rem; font-size:0.6rem; line-height:1.15; white-space:normal} .quote-step{min-height:auto; padding:0.9rem; border-radius:20px} .quote-step__label{margin-bottom:0.45rem; font-size:0.76rem} .quote-step h3{margin-bottom:0.7rem; font-size:1.18rem; line-height:1.22} .quote-box-context{margin-bottom:0.7rem; padding:0.38rem 0.58rem} .quote-box-context span,.quote-box-context small,.quote-box-context strong,.quote-box-picker__head span,.quote-box-picker__head strong{font-size:0.72rem} .quote-box-picker__head{margin-bottom:0.6rem} .quote-box-slot{gap:0.42rem; padding:0.55rem; border-radius:14px; box-shadow:0 8px 18px rgba(18,58,90,0.06)} .quote-box-slot small{display:none} .quote-box-slot b{font-size:1.22rem} .quote-box-slot__pick{gap:0.28rem} .quote-box-slot__pick em{grid-template-columns:1fr; gap:0.12rem; padding:0.36rem 0.42rem; border-radius:12px} .quote-box-orders__num{font-size:0.95rem} .quote-box-orders__unit{font-size:0.58rem; white-space:normal} .quote-box-weight{gap:0.32rem} .quote-box-weight span{padding:0.26rem 0.36rem; font-size:0.7rem} .quote-box-weight input[type="range"]{height:8px} .quote-box-weight input[type="range"]::-webkit-slider-thumb{width:18px; height:18px; border-width:3px} .quote-box-weight input[type="range"]::-moz-range-thumb{width:12px; height:12px; border-width:3px} .quote-actions{position:sticky; bottom:0; z-index:2; align-items:center; gap:0.55rem; margin-inline:-1rem; padding:0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(248,251,255,0),rgba(248,251,255,0.98) 24%,rgba(248,251,255,0.98))} .quote-actions__left{flex:0 1 auto; min-width:0; gap:0.45rem} .quote-actions .btn{flex:0 1 auto; min-width:0; min-height:44px; padding:0.64rem 0.78rem; border-radius:16px; font-size:0.86rem; line-height:1.12} .quote-actions>[data-quote-next]{flex:1 1 142px; min-width:132px; font-size:0.95rem} .quote-box-edit-action{max-width:86px} .pain-section,.services-section{padding-block:2rem} .pain-copy{padding-left:1rem} .pain-copy h2,.services-head h2{font-size:clamp(1.75rem,7vw,2.25rem)} .pain-summary,.pain-grid,.service-flow{grid-template-columns:1fr} .pain-card,.service-step{min-height:auto} .services-head{margin-bottom:1rem; text-align:left} .sla-section{padding-block:1.5rem 2.5rem} .sla-panel{padding:14px; border-radius:22px} .sla-points,.sla-platforms{grid-template-columns:1fr} .sla-board{border-radius:20px} .sla-board__top{align-items:flex-start; flex-direction:column} .metric-section{padding-block:0 2.5rem} .metric-panel{padding:14px; border-radius:22px} .metric-list{gap:8px} .metric-card{min-height:118px; padding:12px; border-radius:16px} .metric-card strong{font-size:2.15rem} .metric-card small{font-size:0.82rem} .compare-section{padding-top:2rem} .compare-head{margin-bottom:0.9rem} .compare-head h2{font-size:clamp(1.8rem,8vw,2.25rem)} .compare-head p{font-size:1rem} .compare-switch{grid-template-columns:1fr; gap:0.45rem; border-radius:18px} .compare-switch__side{min-height:92px; border-radius:14px} .compare-switch__arrow{justify-self:center; animation:none; transform:rotate(90deg)} .compare-points{gap:0.65rem} .compare-points>div{border-radius:16px} .footer__grid{grid-template-columns:1fr; gap:1.5rem} .hero__card{display:none} .sme-showcase{border-radius:20px} .sme-showcase::after{height:46%} .sme-showcase img{aspect-ratio:16 / 10; object-position:center} .sme-showcase figcaption{left:14px; right:14px; bottom:14px; max-width:none} .sme-showcase figcaption span{font-size:0.7rem} .hero__media{aspect-ratio:16 / 9} .hero__media img{width:168%; max-width:none; object-fit:cover; object-position:center center; margin-left:-68%; transform:none; transform-origin:center center} .api-chain{display:grid; grid-template-columns:1fr; justify-content:flex-start; padding:10px; border-radius:16px} .api-chain__sources{width:100%; display:grid; grid-template-columns:1fr; flex:none; min-width:0; gap:7px} .api-chain__sources span,.api-chain__hub{min-width:0; height:36px; padding:6px} .api-chain b{display:none} .api-chain__hub{width:108px; justify-self:center} .api-chain small{width:100%; flex:none; text-align:center} .integration-visual{padding:12px; border-radius:22px} .integration-visual__top{display:grid; grid-template-columns:1fr; align-items:start; gap:10px} .sync-actions{justify-self:start; max-width:100%; padding:5px} .sync-actions span{min-width:0; font-size:0.78rem; white-space:nowrap} .sync-actions strong{padding:10px 14px; font-size:0.82rem; white-space:nowrap} .integration-map{grid-template-columns:1fr; align-content:center; gap:12px; min-height:auto} .integration-map::before,.integration-map::after,.integration-lines,.data-beam{display:none} .source-cloud{display:none} .platform-stack{display:grid; grid-template-columns:1fr; gap:8px} .platform{min-height:56px; flex-direction:row; justify-content:flex-start; gap:6px; padding:8px 10px; text-align:left; overflow:hidden} .platform>div{min-width:0} .platform em{margin-left:auto; padding:3px 7px; font-size:0.64rem} .platform__mark{width:70px; height:34px; border-radius:8px; padding:5px} .platform b,.flow-step b,.integration-hub b{font-size:0.82rem} .platform b{display:block} .platform small,.integration-hub small{font-size:0.68rem} .integration-hub{min-height:96px; padding:12px} .hub-logo{width:82px; height:40px; padding:6px 8px; border-radius:12px} .flow-stack{display:grid; grid-template-columns:1fr; gap:8px; padding-left:16px} .flow-step{min-height:48px; padding:8px} .flow-step::before{left:-10px} .flow-step__num{width:26px; height:26px; border-radius:8px; font-size:0.68rem} .cost-copy,.cost-price-card,.cost-showcase{border-radius:20px} .cost-showcase img{aspect-ratio:3 / 2; object-position:center} .cost-proof,.free-grid{grid-template-columns:1fr} .cost-price{align-items:center} .free-item{min-height:92px} .product-fit{align-items:flex-start; flex-direction:column} .product-fit ul{justify-content:flex-start} .range-field{padding:0.9rem; border-radius:16px} .range-field__head{align-items:flex-start; flex-direction:column; gap:0.45rem} .range-field output{min-width:0; width:100%; text-align:left} .cost-vs{grid-template-columns:1fr; gap:0.6rem} .cost-vs__card{min-height:132px} .cost-vs__badge{justify-self:center} .cost-breakdown>div{align-items:flex-start; flex-direction:column; gap:0.25rem} .review__top{align-items:flex-start; flex-direction:column; gap:0.45rem} .review__top small{text-align:left} .reviews-head{align-items:flex-start; flex-direction:column} .reviews-controls{width:100%; justify-content:flex-end} .review,.review--video{flex-basis:min(88vw,350px)} .sticky-cta{display:flex} .line-float{display:none} .compare{overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none} .compare::before,.compare thead{display:none} .compare table{min-width:0; display:block; width:100%; font-size:0.95rem} .compare tbody{display:grid; gap:12px} .compare tr{display:grid; overflow:hidden; border:1px solid rgba(203,213,225,0.92); border-radius:18px; background:#fff; box-shadow:0 12px 28px rgba(18,58,90,0.08)} .compare tbody tr:hover{background:#fff} .compare tbody th{display:block; width:auto; padding:13px 14px; border-bottom:1px solid var(--border); background:linear-gradient(90deg,#eaf6ff,#fff); font-size:1rem} .compare th,.compare td{display:block; padding:12px 14px; border-bottom:1px solid var(--border)} .compare td:last-child{border-bottom:0} .compare .col-self,.compare .col-isabuy{background:#fff} .compare .col-isabuy{background:linear-gradient(90deg,#effdf5,#ffffff)} .compare .col-self::before,.compare .col-isabuy::before{display:block; margin-bottom:5px; font-size:0.72rem; font-weight:800; letter-spacing:0} .compare .col-self::before{content:"ทำเอง"; color:#94a3b8} .compare .col-isabuy::before{content:"ใช้ i-Sabuy"; color:var(--mint)} .compare td .tick{align-items:flex-start; gap:0.55rem; line-height:1.45}} @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important; animation-duration:0.001ms !important; transition-duration:0.001ms !important} .reveal{opacity:1; transform:none}}