@layer legacy { .signature-content *{box-sizing:border-box;margin:0;padding:0} :root{ --page:#f2f6fb; --white:#ffffff; --ink:#0f172a; --muted:#475569; --line:#d8e2ec; --brand:#5ABA4A; --brand-dark:#3D9B35; } .signature-content,.signature-content{overflow-x:hidden} .signature-content{font-family:'Inter',sans-serif;background:var(--page);color:var(--ink);line-height:1.65} .signature-content a{text-decoration:none;color:inherit} .signature-content .container{width:min(1240px,92%);margin:0 auto} .signature-content .promo{ background:linear-gradient(90deg,#0a1322,#121f37 60%,#182843); color:#d9e5f3; text-align:center; font-size:.82rem; font-weight:600; padding:.48rem 1rem; } .signature-content .hero{ padding:2.3rem 0 1.8rem; background: radial-gradient(circle at 7% 5%, rgba(90,186,74,.16) 0%, transparent 43%), radial-gradient(circle at 86% 2%, rgba(74,222,128,.11) 0%, transparent 39%), linear-gradient(180deg,#fdfefe 0%,#f2f6fb 70%,#edf3f8 100%); border-bottom:1px solid #dfebf4; } .signature-content .hero-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:1.2rem;align-items:center} .signature-content .hero-copy h1{font-size:clamp(1.92rem,4.3vw,3rem);line-height:1.12;margin-bottom:.8rem;letter-spacing:-.3px} .signature-content .hero-copy p{font-size:1rem;color:var(--muted);max-width:760px;margin-bottom:1.1rem} .signature-content .hero-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.52rem;margin-bottom:1.1rem} .signature-content .hero-point{background:rgba(255,255,255,.84);border:1px solid var(--line);border-radius:11px;padding:.58rem .72rem;font-size:.84rem;font-weight:700;color:#314155} .signature-content .hero-actions{display:flex;gap:.62rem;flex-wrap:wrap} .signature-content .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;font-size:.9rem;padding:.74rem 1.08rem} .signature-content .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;box-shadow:0 10px 22px rgba(61,155,53,.27)} .signature-content .btn-outline{border:1px solid #bccbdb;background:#fff;color:#1f2937} .signature-content .hero-panel{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:1rem; box-shadow:0 14px 30px rgba(15,23,42,.1); } .signature-content .hero-panel h3{font-size:1.06rem;margin-bottom:.28rem} .signature-content .hero-panel p{font-size:.88rem;color:var(--muted);margin-bottom:.8rem} .signature-content .metric-grid{display:grid;grid-template-columns:1fr;gap:.55rem} .signature-content .metric{background:linear-gradient(170deg,#ffffff,#f2f8ff);border:1px solid #d3e1ef;border-radius:14px;padding:.68rem .72rem} .signature-content .metric strong{display:block;font-size:.9rem;line-height:1.25;color:#0f172a;margin-bottom:.14rem} .signature-content .metric span{font-size:.8rem;color:#5c6e85;line-height:1.45} .signature-content .compare-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.72rem;box-shadow:0 8px 20px rgba(15,23,42,.05)} .signature-content .compare-card h3{font-size:.89rem;margin-bottom:.45rem} .signature-content .compare-line{display:flex;justify-content:space-between;gap:.7rem;border-top:1px dashed #e2ebf4;padding-top:.34rem;margin-top:.34rem;font-size:.8rem} .signature-content .compare-line span{color:#64748b} .signature-content .compare-line strong{font-size:.8rem;color:#0f172a;text-align:right} .signature-content .core-suite{padding:1.2rem 0 .4rem} .signature-content .core-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.72rem} .signature-content .core-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.88rem} .signature-content .core-card h3{font-size:1rem;margin-bottom:.32rem} .signature-content .core-card p{font-size:.86rem;color:var(--muted)} .signature-content .section-title{padding:1.45rem 0 .72rem} .signature-content .section-title h2{font-size:1.5rem;line-height:1.2;margin-bottom:.34rem} .signature-content .section-title p{color:var(--muted);max-width:860px} .signature-content .products-stage{position:relative} .signature-content .quick-inquiry{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:row-reverse; align-items:flex-start; gap:.55rem; } .signature-content .quick-inquiry-toggle{ width:auto; min-width:auto; min-height:176px; border:none; cursor:pointer; border-radius:12px 0 0 12px; padding:.78rem .46rem; font:inherit; font-size:.84rem; font-weight:700; line-height:1.15; letter-spacing:.25px; writing-mode:vertical-rl; text-orientation:mixed; color:#ffffff; background:linear-gradient(135deg,var(--brand),var(--brand-dark)); box-shadow:0 12px 24px rgba(61,155,53,.32); } .signature-content .quick-inquiry-panel{ margin-top:0; width:min(320px,88vw); background:#fff; border:1px solid #d6e2ef; border-radius:16px; box-shadow:0 18px 34px rgba(15,23,42,.12); padding:.9rem; } .signature-content .quick-inquiry.collapsed .quick-inquiry-panel{display:none} .signature-content .quick-inquiry h3{font-size:1rem;line-height:1.2;margin-bottom:.2rem} .signature-content .quick-inquiry p{font-size:.82rem;color:var(--muted);margin-bottom:.65rem} .signature-content .quick-form{display:grid;gap:.45rem} .signature-content .quick-form input,.signature-content .quick-form select,.signature-content .quick-form textarea{ width:100%;border:1px solid #cedae8;background:#f8fbff;border-radius:10px;padding:.57rem .62rem; font:inherit;font-size:.83rem;color:#1f2937;outline:none } .signature-content .quick-form textarea{min-height:70px;resize:vertical} .signature-content .quick-form input:focus,.signature-content .quick-form select:focus,.signature-content .quick-form textarea:focus{border-color:#93c5a4;background:#fff} .signature-content .quick-form button{width:100%;border:none;cursor:pointer} .signature-content .quick-note{font-size:.74rem;color:#6b7b90;line-height:1.45} .signature-content #product-list{display:block} .signature-content .product-band{width:100%;border-top:1px solid #dde7f0;border-bottom:1px solid #dde7f0} .signature-content .product-band:nth-child(odd){background:#ffffff} .signature-content .product-band:nth-child(even){background:#f7fbff} .signature-content .band-inner{width:min(1240px,92%);margin:0 auto;padding:1.5rem 0;display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start} .signature-content .product-main h3{font-size:1.34rem;line-height:1.24;margin-bottom:.4rem} .signature-content .product-main p{font-size:.94rem;color:#44556a;margin-bottom:.6rem;max-width:860px} .signature-content .feature-list{list-style:none;display:grid;gap:.28rem} .signature-content .feature-list li{position:relative;padding-left:1.1rem;font-size:.9rem;color:#2f3e53} .signature-content .feature-list li::before{content:'-';position:absolute;left:0;top:0;color:#2d8b2a;font-weight:700} .signature-content .product-cta{margin-top:.72rem;display:flex;gap:.55rem;flex-wrap:wrap} .signature-content .module-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.86rem;box-shadow:0 10px 22px rgba(15,23,42,.06)} .signature-content .module-panel h4{font-size:.8rem;letter-spacing:.5px;text-transform:uppercase;color:#64748b;margin-bottom:.45rem} .signature-content .module-wrap{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.68rem} .signature-content .module{font-size:.77rem;font-weight:700;color:#1f2937;background:#f4f9ff;border:1px solid #d8e3f0;border-radius:999px;padding:.23rem .56rem} .signature-content .module-note{font-size:.82rem;color:#607086} .signature-content .final-cta{padding:1.6rem 0 2rem} .signature-content .final-cta-box{ background:linear-gradient(110deg,#0f172a,#152742 65%,#1c3153); color:#e7eef7; border-radius:16px; border:1px solid rgba(255,255,255,.08); padding:1.08rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; } .signature-content .final-cta-box p{font-size:.93rem;max-width:760px} .signature-content .popup-overlay{ position: fixed; inset: 0; background: rgba(3, 10, 20, 0.56); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; z-index: 300; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .signature-content .popup-overlay.active{ opacity: 1; visibility: visible; } .signature-content .popup-box{ background: linear-gradient(160deg,#FFFFFF 0%,#F8FAFC 100%); width: min(860px, 92vw); border-radius: 16px; border: 1px solid #d8e2ec; box-shadow: 0 28px 70px rgba(15,23,42,0.22); padding: 1.4rem; transform: translateY(14px) scale(.98); transition: transform .25s ease; position: relative; } .signature-content .popup-overlay.active .popup-box{ transform: translateY(0) scale(1); } .signature-content .popup-close{ position: absolute; right: .8rem; top: .8rem; width: 34px; height: 34px; border: 1px solid #d5deea; border-radius: 50%; background: #fff; color: #334155; font-size: 1rem; cursor: pointer; } .signature-content .popup-close:hover{ background:#f8fafc; } .signature-content .popup-box .section-tag{ color:#334155; margin-bottom:.45rem; display:inline-block; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; } .signature-content .popup-box h3{ font-size:1.35rem; color:#0f172a; margin-bottom:.25rem; } .signature-content .popup-box > p{ color:#64748b; font-size:.9rem; margin-bottom:.7rem; } .signature-content .popup-box .contact-form{ margin-top:.5rem; } .signature-content .popup-box .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; } .signature-content .popup-box .form-field{ margin-bottom:.46rem; } .signature-content .popup-box .form-field label{ display:block; font-size:.74rem; color:#334155; font-weight:700; margin-bottom:.22rem; letter-spacing:.2px; } .signature-content .popup-box .form-field input,.signature-content .popup-box .form-field textarea,.signature-content .popup-box .form-field select{ width:100%; border:1px solid #cfd9e6; border-radius:10px; background:#ffffff; color:#0f172a; font:inherit; font-size:.87rem; padding:.6rem .64rem; outline:none; } .signature-content .popup-box .form-field input:focus,.signature-content .popup-box .form-field textarea:focus,.signature-content .popup-box .form-field select:focus{ border-color:#9dcfa8; box-shadow:0 0 0 2px rgba(90,186,74,.12); } .signature-content .popup-box .form-submit{ margin-top:.35rem; width:100%; border:none; cursor:pointer; } .signature-content .popup-box .form-success{ display:none; margin-top:.6rem; padding:.55rem .7rem; border-radius:8px; background:#ecfdf3; border:1px solid #86efac; color:#166534; font-size:.84rem; font-weight:600; } .signature-content{ background: radial-gradient(circle at 10% -5%, rgba(90,186,74,.14), transparent 34%), radial-gradient(circle at 90% 0%, rgba(14,165,233,.10), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%); } .signature-content .hero{ padding:2.8rem 0 2.2rem; border-bottom:1px solid #d8e5f1; } .signature-content .hero-copy h1{ font-size:clamp(2.05rem,4.4vw,3.25rem); letter-spacing:-.45px; } .signature-content .hero-copy p{font-size:1.02rem; color:#516072;} .signature-content .hero-point{ background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,252,255,.92)); border:1px solid #d7e4f0; } .signature-content .hero-panel{ border-radius:20px; border:1px solid #d4e0ec; box-shadow:0 18px 36px rgba(15,23,42,.11); } .signature-content .compare-card{ border:1px solid #d7e3ef; border-radius:16px; box-shadow:0 10px 22px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease; } .signature-content .compare-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(15,23,42,.12);} .signature-content .core-card{ border:1px solid #d9e4ef; border-radius:16px; box-shadow:0 10px 24px rgba(15,23,42,.05); } .signature-content .section-title{padding:1.8rem 0 .85rem;} .signature-content .section-title h2{font-size:1.62rem;} .signature-content .section-title p{font-size:.96rem; color:#58667a;} .signature-content .product-band{ border:none; background:transparent ; padding:.55rem 0; } .signature-content .band-inner{ background:linear-gradient(170deg,#ffffff,#f8fbff); border:1px solid #d8e3ef; border-radius:18px; padding:1.22rem 1.12rem; box-shadow:0 12px 28px rgba(15,23,42,.06); } .signature-content .product-main h3{font-size:1.42rem;} .signature-content .product-main p{color:#4a5a6d;} .signature-content .feature-list li{line-height:1.5;} .signature-content .feature-list li::before{content:"•";} .signature-content .module-panel{ border-radius:14px; background:linear-gradient(170deg,#ffffff,#f5faff); border:1px solid #d6e2ef; } .signature-content .module{ background:#ffffff; border:1px solid #cfdeec; } .signature-content .btn{border-radius:11px;} .signature-content .btn-primary{box-shadow:0 12px 24px rgba(61,155,53,.25);} .signature-content .quick-inquiry-toggle{box-shadow:0 14px 28px rgba(61,155,53,.35);} .signature-content .popup-box{ border-radius:18px; border:1px solid #d6e2ef; box-shadow:0 30px 70px rgba(15,23,42,.24); } .signature-content .hero{ position:relative; overflow:hidden; } .signature-content .hero::before,.signature-content .hero::after{ content:""; position:absolute; border-radius:999px; filter:blur(4px); pointer-events:none; } .signature-content .hero::before{ width:340px; height:340px; background:radial-gradient(circle, rgba(90,186,74,.18), rgba(90,186,74,0)); top:-140px; right:8%; } .signature-content .hero::after{ width:260px; height:260px; background:radial-gradient(circle, rgba(14,165,233,.16), rgba(14,165,233,0)); bottom:-130px; left:6%; } .signature-content .hero-grid{ position:relative; z-index:1; background:linear-gradient(165deg, rgba(255,255,255,.84), rgba(246,251,255,.74)); border:1px solid #d6e3ef; border-radius:24px; padding:1.15rem; box-shadow:0 18px 42px rgba(15,23,42,.10); } .signature-content .hero-copy h1{ line-height:1.08; max-width:780px; } .signature-content .hero-actions .btn{ min-width:182px; } .signature-content .hero-actions .btn-outline{ border:1px solid #c9d8e7; background:linear-gradient(180deg,#ffffff,#f8fbff); } .signature-content .core-suite{ padding:1.45rem 0 .65rem; } .signature-content .core-grid{ gap:.9rem; } .signature-content .core-card{ padding:1rem; background:linear-gradient(165deg,#ffffff,#f7fbff); transition:transform .2s ease, box-shadow .2s ease; } .signature-content .core-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(15,23,42,.12); } .signature-content #product-list{ margin-top:.45rem; } .signature-content .product-band{ padding:.65rem 0; } .signature-content .band-inner{ position:relative; overflow:hidden; } .signature-content .band-inner::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#5ABA4A,#6fd95f); border-radius:10px; opacity:.7; } .signature-content .product-main,.signature-content .module-panel{ position:relative; z-index:1; } .signature-content .product-main h3{ margin-bottom:.5rem; } .signature-content .product-main p{ margin-bottom:.72rem; } .signature-content .product-cta .btn{ min-width:170px; } .signature-content .module-panel{ box-shadow:0 12px 28px rgba(15,23,42,.08); } .signature-content .final-cta-box{ border-radius:18px; box-shadow:0 18px 38px rgba(15,23,42,.2); } .signature-content .quick-inquiry-panel{ border-radius:18px; } .signature-content .popup-box{ background:linear-gradient(165deg,#ffffff 0%,#f5faff 100%); } @media (max-width:1050px){.signature-content .hero-grid{ padding:.95rem; border-radius:18px; } .signature-content .band-inner::before{display:none;} } @media (max-width:1279px){.signature-content .quick-inquiry{ position:fixed; right:0; top:96px; width:min(300px,88vw); margin:0; } } @media (max-width:1050px){.signature-content .hero-grid,.signature-content .band-inner{grid-template-columns:1fr} } @media (max-width:820px){.signature-content .quick-inquiry{ top:auto; right:0; bottom:12px; width:min(290px,92vw); } .signature-content .core-grid,.signature-content .hero-points{grid-template-columns:1fr} .signature-content .popup-box{ padding:1rem; } .signature-content .popup-box .form-row{ grid-template-columns:1fr; } } @supports (content-visibility: auto){.signature-content > section:not(:first-of-type),.signature-content footer{ content-visibility: auto; contain-intrinsic-size: 1px 900px; } } }