.home-page {background:#f2f4f7;} .haojue-hero {min-height:100vh;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(300px, 41%) 1fr;align-items:center;padding:var(--header-height) clamp(20px, 5vw, 86px) 84px;color:var(--white);background:radial-gradient(circle at 74% 46%, rgba(237, 28, 36, 0.18), transparent 24%), linear-gradient(122deg, #0b2246 0%, #123568 100%);} .haojue-hero:before, .haojue-hero:after {content:"";position:absolute;pointer-events:none;} .haojue-hero:before {inset:0;background:linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 76px), linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 45%);transform:skewX(-8deg);} .haojue-hero:after {right:-12vw;top:0;width:56vw;height:100%;background:linear-gradient(140deg, rgba(227, 6, 19, 0.86), rgba(227, 6, 19, 0.1) 56%, transparent 57%);clip-path:polygon(26% 0, 100% 0, 72% 100%, 0 100%);opacity:0.86;} .hero-bg-word {position:absolute;left:clamp(20px, 4vw, 70px);bottom:-58px;font-family:var(--font-head);font-size:clamp(170px, 27vw, 430px);font-weight:900;letter-spacing:-24px;line-height:0.8;color:rgba(255, 255, 255, 0.035);pointer-events:none;} .hero-rail {position:absolute;left:28px;bottom:104px;z-index:3;display:flex;align-items:center;gap:14px;transform:rotate(-90deg);transform-origin:left center;font-family:var(--font-head);font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255, 255, 255, 0.48);} .hero-rail i {width:90px;height:1px;background:var(--red);} .hero-panel {position:relative;z-index:4;} .hero-copy-panel {max-width:620px;} .haojue-hero h1 {font-family:var(--font-head);font-size:clamp(3.2rem, 7vw, 7.4rem);font-weight:900;line-height:0.88;text-transform:uppercase;letter-spacing:-5px;} .hero-lead {max-width:520px;margin:28px 0 34px;color:#aab6c8;font-size:1.02rem;line-height:1.85;} .hero-actions {display:flex;flex-wrap:wrap;gap:14px;} .hero-product-shell {position:relative;z-index:4;min-height:660px;display:grid;place-items:center;} .hero-ring {position:absolute;width:min(57vw, 760px);aspect-ratio:1;border:1px solid rgba(255, 255, 255, 0.14);border-radius:50%;background:radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 58%);box-shadow:inset 0 0 0 70px rgba(255, 255, 255, 0.012);} .hero-ring:after {content:"";position:absolute;inset:-16px;border-radius:50%;border:1px dashed rgba(255, 255, 255, 0.18);animation:heroSpin 48s linear infinite;} @keyframes heroSpin {to {transform:rotate(360deg);}} .hero-slide {position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateX(7vw) scale(0.92);transition:opacity 0.75s ease, transform 0.85s cubic-bezier(0.18, 0.82, 0.22, 1);pointer-events:none;} .hero-slide.is-active {opacity:1;transform:translateX(0) scale(1);pointer-events:auto;} .hero-slide img {width:min(760px, 90%);max-height:520px;object-fit:contain;filter:drop-shadow(0 44px 30px rgba(0, 0, 0, 0.56));} .hero-product-info {position:absolute;right:0;bottom:62px;min-width:min(370px, 80%);padding:22px 26px;background:rgba(3, 7, 14, 0.74);border:1px solid rgba(255, 255, 255, 0.14);backdrop-filter:blur(14px);} .hero-product-info span {color:var(--red);font-family:var(--font-head);font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;} .hero-product-info h2 {margin:6px 0;font-family:var(--font-head);font-size:clamp(1.5rem, 3vw, 2.6rem);font-weight:900;line-height:1;text-transform:uppercase;} .hero-product-info p {color:#9ba7ba;font-size:12px;} .hero-bottom-bar {position:absolute;z-index:5;right:clamp(20px, 5vw, 86px);bottom:32px;display:flex;align-items:center;gap:16px;padding:12px 14px;background:rgba(255, 255, 255, 0.07);border:1px solid rgba(255, 255, 255, 0.12);backdrop-filter:blur(10px);} .slider-btn {min-width:72px;height:38px;border:0;background:var(--white);color:var(--navy);font-family:var(--font-head);font-size:10px;font-weight:900;text-transform:uppercase;cursor:pointer;} .slider-btn:hover {background:var(--red);color:var(--white);} .slide-counter b {font-family:var(--font-head);font-size:18px;font-weight:900;} .slide-counter span {color:#7c8798;font-size:12px;} .model-tabs {position:relative;z-index:8;width:min(1280px, calc(100% - 40px));margin:-54px auto 0;display:grid;grid-template-columns:1.2fr repeat(4, 1fr);background:var(--white);box-shadow:0 28px 70px rgba(7, 16, 31, 0.16);} .tabs-intro {padding:30px;background:var(--red);color:var(--white);} .tabs-intro .eyebrow {color:var(--white);margin-bottom:12px;} .tabs-intro h2 {font-family:var(--font-head);font-size:1.35rem;font-weight:900;line-height:1.1;text-transform:uppercase;} .model-tabs a {min-height:180px;padding:24px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;} .model-tabs a:hover {background:var(--blue);color:var(--white);} .model-tabs img {height:72px;object-fit:contain;align-self:flex-end;transition:transform var(--transition);} .model-tabs a:hover img {transform:translateX(8px) scale(1.08);} .model-tabs span {color:var(--red);font-family:var(--font-head);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;} .model-tabs strong {font-family:var(--font-head);font-size:1.02rem;font-weight:900;text-transform:uppercase;} .product-showcase {background:linear-gradient(180deg, #f2f4f7 0%, #ffffff 28%, #ffffff 100%);} .quick-filters {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;} .quick-filters .filter-btn {border-radius:0;background:var(--white);color:var(--navy);border:1px solid var(--line);} .quick-filters .filter-btn.active, .quick-filters .filter-btn:hover {color:var(--white);background:var(--red);border-color:var(--red);} .haojue-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;} .haojue-card {min-height:460px;background:var(--white);border:1px solid #e5e8ee;overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition), box-shadow var(--transition), border var(--transition);} .haojue-card:hover {transform:translateY(-10px);border-color:rgba(227, 6, 19, 0.35);box-shadow:0 24px 54px rgba(7, 16, 31, 0.12);} .haojue-card.hidden {display:none;} .card-image {min-height:230px;display:grid;place-items:center;padding:26px 22px;background:radial-gradient(circle, rgba(227, 6, 19, 0.08), transparent 62%), linear-gradient(140deg, #f7f8fa, #eceff4);} .card-image img {width:100%;height:190px;object-fit:contain;transition:transform var(--transition);} .haojue-card:hover .card-image img {transform:scale(1.08);} .card-copy {padding:26px;display:flex;flex-direction:column;flex:1;} .card-copy>span {color:var(--red);font-family:var(--font-head);font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;} .card-copy h3 {margin:8px 0 18px;font-family:var(--font-head);font-size:1.45rem;font-weight:900;line-height:1;color:var(--navy);text-transform:uppercase;} .card-copy dl {display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-bottom:24px;} .card-copy dl div {border-top:1px solid var(--line);padding-top:10px;} .card-copy dt {color:#8992a1;font-size:9px;font-weight:800;text-transform:uppercase;} .card-copy dd {color:var(--navy);font-family:var(--font-head);font-size:11px;font-weight:800;} .card-copy a {margin-top:auto;color:var(--red);font-family:var(--font-head);font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;} .dynamic-band {display:grid;grid-template-columns:54% 46%;min-height:720px;background:var(--navy-light);color:var(--white);} .band-image {min-height:520px;clip-path:polygon(0 0, 92% 0, 76% 100%, 0 100%);} .band-image img {width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.08);} .band-copy {padding:clamp(50px, 7vw, 110px) clamp(24px, 6vw, 80px) clamp(50px, 7vw, 110px) 0;align-self:center;} .band-copy h2 {font-family:var(--font-head);font-size:clamp(2.3rem, 4.5vw, 4.7rem);font-weight:900;line-height:0.98;letter-spacing:-3px;text-transform:uppercase;} .band-copy p:not(.eyebrow) {margin:24px 0 28px;color:#a7b2c4;line-height:1.8;} .band-stats {display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin:0 0 32px;} .band-stats div {padding:18px 14px;background:rgba(255, 255, 255, 0.06);border:1px solid rgba(255, 255, 255, 0.1);} .band-stats strong {display:block;font-family:var(--font-head);font-size:1.35rem;font-weight:900;} .band-stats span {color:#8f9bad;font-size:10px;text-transform:uppercase;} .guide-section {background:#f2f4f7;} .guide-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;} .guide-card {min-height:260px;padding:30px;background:var(--white);border:1px solid #e3e6ec;transition:var(--transition);} .guide-card:hover {transform:translateY(-8px);background:var(--navy);color:var(--white);} .guide-card span {display:block;color:var(--red);font-family:var(--font-head);font-weight:900;margin-bottom:48px;} .guide-card h3 {font-family:var(--font-head);font-size:1rem;font-weight:900;text-transform:uppercase;} .guide-card p {margin-top:14px;color:#7d8795;font-size:13px;} .guide-card:hover p {color:#b8c1cf;} .video-strip {display:grid;grid-template-columns:repeat(3, 1fr);background:#05070d;} .video-strip .video-card {min-height:420px;position:relative;overflow:hidden;border:0;background:#000;color:var(--white);text-align:left;cursor:pointer;} .video-strip .video-card:before {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.84) 100%);} .video-strip img {width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;} .video-strip .video-card:hover img {transform:scale(1.08);} .video-strip .video-card span {position:absolute;z-index:2;left:28px;top:28px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--red);color:var(--white);font-family:var(--font-head);font-size:10px;font-weight:900;text-transform:uppercase;} .video-strip h3 {position:absolute;left:28px;bottom:30px;z-index:2;max-width:330px;font-family:var(--font-head);font-size:clamp(1.35rem, 2.5vw, 2.2rem);font-weight:900;line-height:1;text-transform:uppercase;} .cta-section {padding:110px 20px;text-align:center;color:var(--white);background:linear-gradient(135deg, rgba(227, 6, 19, 0.95), rgba(151, 0, 10, 0.95)), url("../assets/promo-hlx.webp") center/cover;} .cta-section .eyebrow {color:var(--white);} .cta-section blockquote {max-width:980px;margin:0 auto 34px;font-family:var(--font-head);font-size:clamp(2rem, 5vw, 5rem);font-weight:900;line-height:0.95;letter-spacing:-3px;text-transform:uppercase;} .cta-section .hero-actions {justify-content:center;} .cta-section .btn-primary {background:var(--navy);} .modal {position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:20px;} .modal.open {display:grid;} .modal-backdrop {position:absolute;inset:0;background:rgba(2, 5, 10, 0.92);backdrop-filter:blur(10px);} .modal-dialog {position:relative;z-index:2;width:min(850px, 95vw);padding:30px;background:#0f1622;color:var(--white);border:1px solid rgba(255, 255, 255, 0.1);} .modal-close {position:absolute;right:18px;top:15px;border:0;background:none;color:var(--white);font-size:32px;z-index:10;cursor:pointer;} .modal-media {height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px;background:radial-gradient(circle, #213247 0%, #070e17 80%);} .modal-media iframe, .modal-media video {width:100%;height:100%;border:0;} .modal-play {color:var(--red);font-size:50px;} .modal-dialog h3 {font-family:var(--font-head);font-size:1.5rem;font-weight:900;text-transform:uppercase;} .modal-dialog p {color:#9ca8b8;} @media (max-width:1100px) {.haojue-hero {grid-template-columns:1fr;padding-top:120px;} .hero-product-shell {min-height:520px;} .model-tabs {grid-template-columns:1fr 1fr;} .tabs-intro {grid-column:1 / -1;} .haojue-grid, .guide-grid {grid-template-columns:repeat(2, 1fr);} .dynamic-band {grid-template-columns:1fr;} .band-image {clip-path:none;} .band-copy {padding:60px 24px;}} @media (max-width:760px) {.haojue-hero {min-height:auto;padding:104px 15px 90px;} .haojue-hero h1 {font-size:clamp(2.2rem, 8vw, 2.8rem);letter-spacing:-1px;line-height:1.1;} .hero-product-shell {min-height:420px;} .hero-slide img {width:100%;max-height:310px;} .hero-product-info {right:0;bottom:15px;min-width:100%;padding:15px;} .hero-bottom-bar {left:15px;right:15px;justify-content:space-between;bottom:15px;} .model-tabs, .haojue-grid, .guide-grid, .video-strip, .band-stats {grid-template-columns:1fr;} .section {padding:50px 15px;} .dynamic-band {min-height:auto;} .band-image {min-height:330px;} .video-strip .video-card {min-height:310px;} .modal-media {height:250px;}} .testimonials-head {text-align:center;margin-bottom:50px;display:flex;flex-direction:column;align-items:center;gap:12px;} .testimonials-section {background:var(--white);padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .testimonials-slider-container {max-width:800px;margin:40px auto 0;padding:0 20px;position:relative;overflow:hidden;} .testimonials-track {position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;} .testimonial-slide {position:absolute;opacity:0;transform:translateY(20px) scale(0.98);transition:opacity 0.5s ease, transform 0.5s ease;pointer-events:none;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1;} .testimonial-slide.active {position:relative;opacity:1;transform:translateY(0) scale(1);pointer-events:auto;z-index:2;} .testimonial-rating {color:#ffc107;font-size:20px;margin-bottom:15px;letter-spacing:2px;} .testimonial-text {font-size:clamp(16px, 2.5vw, 19px);font-weight:500;line-height:1.6;color:var(--navy);margin-bottom:25px;font-style:italic;} .testimonial-author {display:flex;align-items:center;gap:15px;} .author-avatar {width:48px;height:48px;border-radius:50%;color:var(--white);font-family:var(--font-head);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,0.1);} .author-info {display:flex;flex-direction:column;align-items:flex-start;text-align:left;} .author-info strong {font-size:15px;color:var(--navy);font-weight:700;} .author-info span {font-size:12px;color:var(--muted);font-weight:600;} .testimonials-controls {display:flex;align-items:center;justify-content:center;gap:30px;margin-top:30px;} .slider-dots {display:flex;gap:8px;} .slider-dots .dot {width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:var(--transition);} .slider-dots .dot.active {background:var(--red);transform:scale(1.3);} @media (max-width:600px) {.testimonials-track {min-height:280px;}}