:root { --primary: #107c41; --primary-dark: #0b5f32; --primary-deep: #063d24; --primary-soft: #eaf8f0; --primary-faint: #f7fcf9; --secondary: #0d9aaa; --secondary-dark: #08727f; --secondary-soft: #e9fbfc; --green: #21a366; --green-soft: #eaf8f0; --orange: #f47a17; --orange-soft: #fff5e9; --blue: #1769d2; --blue-soft: #edf5ff; --red: #e6332a; --red-soft: #fff0ef; --yellow: #f4b400; --success: #199b55; --success-dark: #11713e; --success-soft: #edfbf3; --text: #111827; --muted: #5d6678; --muted-light: #8891a2; --white: #ffffff; --paper: #ffffff; --gray-bg: #f8f9fc; --gray-bg-2: #f1f3f8; --border: #d7e6dd; --border-strong: #b8d5c4; --ink: #111827; --ink2: #5d6678; --shadow-xs: 0 2px 10px rgba(7, 56, 32, 0.06); --shadow: 0 10px 30px rgba(7, 56, 32, 0.09); --shadow-md: 0 18px 48px rgba(7, 56, 32, 0.14); --shadow-lg: 0 26px 70px rgba(3, 36, 20, 0.2); --radius-xs: 8px; --radius-sm: 12px; --radius: 18px; --radius-lg: 28px; --max-w: 1080px; --transition: 220ms ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; } body { min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--text); font-family: "Poppins", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.modal-open { overflow: hidden; } ::selection { background: rgba(16, 124, 65, 0.18); color: var(--primary-deep); } img, picture, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; } button { border: 0; background: none; cursor: pointer; } button:disabled { cursor: wait; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid rgba(13, 154, 170, 0.38); outline-offset: 3px; } .container { width: min(100%, var(--max-w)); margin-inline: auto; padding-inline: 22px; } .section-title { max-width: 820px; margin: 0 auto 14px; color: var(--text); font-size: clamp(1.55rem, 4vw, 2.35rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.16; text-align: center; text-transform: uppercase; } .section-title::after { content: ""; display: block; width: 76px; height: 5px; margin: 16px auto 0; border-radius: 999px; background: linear-gradient( 90deg, var(--primary), var(--secondary), var(--orange) ); } .section-subtitle { max-width: 700px; margin: 0 auto 34px; color: var(--muted); font-size: clamp(0.94rem, 2vw, 1.06rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.7; text-align: center; } .highlight { color: var(--primary); background: linear-gradient(100deg, var(--primary), var(--secondary-dark)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .check-icon { display: inline-flex; flex: 0 0 22px; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 3px 9px rgba(25, 155, 85, 0.2); color: var(--white); font-size: 0.7rem; font-weight: 900; } .btn-cta { position: relative; display: inline-flex; width: 100%; max-width: 470px; min-height: 58px; align-items: center; justify-content: center; overflow: hidden; padding: 17px 34px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: linear-gradient( 135deg, var(--primary-dark) 0%, var(--primary) 48%, #21a366 100% ); box-shadow: 0 12px 28px rgba(16, 124, 65, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.2); color: var(--white); cursor: pointer; font-size: clamp(0.92rem, 2.4vw, 1.06rem); font-weight: 900; letter-spacing: 0.045em; line-height: 1.25; text-align: center; text-transform: uppercase; transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); } .btn-cta::before { content: ""; position: absolute; top: -70%; left: -40%; width: 32%; height: 240%; transform: rotate(20deg); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.28), transparent ); transition: left 600ms ease; } .btn-cta:hover, .btn-cta:focus-visible { transform: translateY(-3px); filter: saturate(1.08); box-shadow: 0 18px 40px rgba(16, 124, 65, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .btn-cta:hover::before { left: 120%; } .btn-cta:active { transform: translateY(-1px); } .btn-cta.is-loading { opacity: 0.75; } .btn-sm { min-height: 50px; max-width: 330px; padding: 14px 28px; font-size: 0.9rem; } .checkout-not-configured { cursor: not-allowed; filter: grayscale(0.15); opacity: 0.72; } .cta-area { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: 24px; } @keyframes btnPulse { 0%, 100% { box-shadow: 0 12px 28px rgba(16, 124, 65, 0.26), 0 0 0 0 rgba(16, 124, 65, 0.18); } 50% { box-shadow: 0 14px 34px rgba(16, 124, 65, 0.34), 0 0 0 9px rgba(16, 124, 65, 0); } } .btn-pulse { animation: btnPulse 2.4s ease-in-out infinite; } .urgency-bar { position: sticky; z-index: 1000; top: 0; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: radial-gradient(circle at 15% 20%, rgba(13, 154, 170, 0.3), transparent 28%), linear-gradient(100deg, #15102b, #321261 52%, #13294d); box-shadow: 0 5px 20px rgba(20, 12, 42, 0.18); color: var(--white); } .urgency-inner { display: flex; max-width: var(--max-w); align-items: center; justify-content: center; gap: 9px; margin-inline: auto; } .urgency-label { overflow: hidden; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.045em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .timer { min-width: 70px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.12); text-align: center; } #timer-display { font-variant-numeric: tabular-nums; color: #ffffff; font-size: 0.98rem; font-weight: 900; letter-spacing: 0.06em; line-height: 1; } .hero { position: relative; isolation: isolate; overflow: hidden; padding: 44px 0 34px; background: radial-gradient(circle at 8% 10%, rgba(16, 124, 65, 0.1), transparent 28%), radial-gradient(circle at 92% 18%, rgba(13, 154, 170, 0.11), transparent 27%), radial-gradient(circle at 80% 88%, rgba(244, 122, 23, 0.07), transparent 22%), linear-gradient(180deg, #ffffff 0%, #fbfaff 100%); } .hero::before, .hero::after { position: absolute; z-index: -1; color: var(--primary); font-family: "Courier New", monospace; font-weight: 900; opacity: 0.045; pointer-events: none; } .hero::before { content: "{ }"; top: 6%; left: -1%; transform: rotate(-8deg); font-size: clamp(5rem, 13vw, 10rem); } .hero::after { content: "</>"; right: -1%; bottom: 3%; transform: rotate(7deg); color: var(--secondary); font-size: clamp(4.5rem, 11vw, 9rem); } .hero .container { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .security-badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 17px; border: 1.5px solid rgba(16, 124, 65, 0.42); border-radius: 999px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--shadow-xs); color: var(--primary-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.065em; line-height: 1.25; text-transform: uppercase; backdrop-filter: blur(7px); } .security-badge svg { flex-shrink: 0; color: var(--secondary-dark); } .hero-headline { max-width: 880px; color: var(--text); font-size: clamp(1.85rem, 5.6vw, 3.25rem); font-weight: 950; letter-spacing: -0.045em; line-height: 1.09; text-transform: uppercase; } .hero-sub { max-width: 720px; color: var(--muted); font-size: clamp(0.98rem, 2.4vw, 1.14rem); line-height: 1.75; } .vsl-wrapper { display: flex; width: 100%; justify-content: center; padding: 7px 0; } .vsl-container { position: relative; width: 100%; max-width: 350px; overflow: hidden; aspect-ratio: 9 / 16; border: 5px solid var(--white); border-radius: 22px; outline: 1px solid rgba(16, 124, 65, 0.2); background: #090712; box-shadow: 0 20px 55px rgba(30, 18, 61, 0.2), 0 0 0 7px rgba(16, 124, 65, 0.04); } .vsl-container video { width: 100%; height: 100%; object-fit: cover; } .play-btn { position: absolute; z-index: 10; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, transparent 45%, rgba(8, 6, 16, 0.24)); cursor: pointer; opacity: 1; transition: opacity 260ms ease; } .play-btn.hidden { opacity: 0; pointer-events: none; } .play-circle { position: relative; z-index: 2; display: flex; width: 76px; height: 76px; align-items: center; justify-content: center; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: linear-gradient(135deg, var(--primary), #21a366); box-shadow: 0 12px 32px rgba(24, 12, 50, 0.42); color: var(--white); } .play-circle svg { margin-left: 4px; } @keyframes playPulse { 0% { transform: scale(1); opacity: 0.48; } 75%, 100% { transform: scale(1.65); opacity: 0; } } .play-pulse { position: absolute; z-index: 1; width: 76px; height: 76px; border-radius: 50%; background: var(--primary); animation: playPulse 2s ease-out infinite; } .cta-trust { color: var(--muted); font-size: 0.86rem; text-align: center; } .cta-channels { display: flex; align-items: center; justify-content: center; gap: 18px 24px; flex-wrap: wrap; } .channel-item { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 0.87rem; font-weight: 650; } .carousel-section { overflow: hidden; padding: 58px 0; background: linear-gradient(rgba(16, 124, 65, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 124, 65, 0.035) 1px, transparent 1px), var(--gray-bg); background-size: 28px 28px; } .carousel-section .section-title { margin-bottom: 16px; } .carousel-subtitle { max-width: 650px; margin: 0 auto 28px; color: var(--muted); font-size: 0.94rem; text-align: center; } .carousel-wrapper { position: relative; display: flex; width: 100%; align-items: center; gap: 11px; } .carousel-track-wrapper { width: 100%; min-width: 0; flex: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); touch-action: pan-y; } .carousel-track { display: flex; align-items: stretch; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .carousel-track.no-transition { transition: none !important; } .carousel-slide { display: flex; width: 100%; min-width: 100%; flex: 0 0 100%; align-items: center; justify-content: center; padding: 12px; aspect-ratio: 3 / 2; background: var(--white); } .carousel-slide img { width: 100%; height: 100%; border-radius: 11px; background: var(--white); object-fit: contain; } .carousel-slide.is-clone { pointer-events: none; } .carousel-btn { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-xs); color: var(--primary); cursor: pointer; font-size: 1.25rem; font-weight: 900; transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition); } .carousel-btn:hover, .carousel-btn:focus-visible { transform: translateY(-2px); border-color: var(--primary); background: var(--primary); color: var(--white); } .carousel-dots { display: flex; max-width: 340px; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 20px auto 0; } .dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #b8d5c4; cursor: pointer; transition: width var(--transition), transform var(--transition), background var(--transition); } .dot.active { width: 25px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: none; } .material-preview-section { position: relative; overflow: hidden; padding: 60px 0 54px; background: radial-gradient(circle at 5% 15%, rgba(16, 124, 65, 0.46), transparent 28%), radial-gradient(circle at 95% 80%, rgba(13, 154, 170, 0.26), transparent 30%), linear-gradient(140deg, #100a24, #211047 50%, #0d2940); } .material-preview-section::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; } .material-preview-section .material-carousel-container { position: relative; z-index: 1; width: min(100%, 1180px); margin-inline: auto; padding-inline: 22px; } .material-title { max-width: 880px; margin: 0 auto 34px; padding-inline: 8px; color: var(--white); font-size: clamp(1.55rem, 4vw, 2.45rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.2; text-align: center; } .material-title span { color: #67e8f9; } .material-carousel { position: relative; display: block; width: 100%; } .material-preview-section .carousel-track-wrapper { overflow: hidden; border: 0; border-radius: 18px; background: transparent; box-shadow: none; } .material-preview-section .carousel-track { gap: 18px; } .material-preview-section .carousel-slide { width: calc((100% - 18px) / 2); min-width: calc((100% - 18px) / 2); flex-basis: calc((100% - 18px) / 2); overflow: hidden; padding: 0; border: 4px solid rgba(255, 255, 255, 0.93); border-radius: 17px; aspect-ratio: 3 / 2; background: var(--white); box-shadow: 0 18px 42px rgba(2, 2, 12, 0.35); } .material-preview-section .carousel-slide img { border-radius: 12px; object-fit: contain; } .material-preview-section .carousel-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; } .material-preview-section .carousel-dots { margin: 0 auto; } .material-preview-section .dot { background: rgba(255, 255, 255, 0.28); } .material-preview-section .dot.active { background: linear-gradient(90deg, #86efac, #67e8f9); } .material-preview-section .carousel-arrows { display: flex; align-items: center; justify-content: center; gap: 14px; } .material-preview-section .carousel-btn { width: 48px; height: 48px; flex-basis: 48px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.12); box-shadow: 0 10px 25px rgba(2, 2, 12, 0.25); color: var(--white); backdrop-filter: blur(8px); } .material-preview-section .carousel-btn:hover, .material-preview-section .carousel-btn:focus-visible { border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--secondary)); } .learn-section { padding: 58px 0; background: var(--white); } .learn-grid { display: grid; grid-template-columns: 1fr; gap: 13px; margin-bottom: 38px; } .learn-card { --card-accent: var(--primary); position: relative; display: flex; min-height: 80px; align-items: flex-start; gap: 9px; padding: 17px 17px 17px 19px; overflow: hidden; border: 1px solid var(--border); border-left: 4px solid var(--card-accent); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-xs); color: var(--text); font-size: 0.92rem; font-weight: 600; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .learn-card:nth-child(6n + 1) { --card-accent: var(--primary); } .learn-card:nth-child(6n + 2) { --card-accent: var(--secondary); } .learn-card:nth-child(6n + 3) { --card-accent: var(--green); } .learn-card:nth-child(6n + 4) { --card-accent: var(--orange); } .learn-card:nth-child(6n + 5) { --card-accent: var(--blue); } .learn-card:nth-child(6n) { --card-accent: var(--red); } .learn-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-accent) 42%, var(--border)); box-shadow: var(--shadow); } .learn-card .check-icon { margin-top: 1px; margin-right: 0; background: var(--card-accent); } .compare-box { display: grid; grid-template-columns: 1fr; gap: 16px; } .compare-col { padding: 27px 23px; border-radius: var(--radius); text-align: center; } .compare-col.problem { border: 1.5px solid #f3c1bd; background: var(--red-soft); } .compare-col.solution { border: 1.5px solid #b8e1c7; background: var(--success-soft); } .compare-icon { margin-bottom: 11px; font-size: 2rem; } .compare-col h3 { margin-bottom: 9px; font-size: 1rem; font-weight: 850; letter-spacing: 0.025em; text-transform: uppercase; } .compare-col.problem h3 { color: #b4231c; } .compare-col.solution h3 { color: var(--success-dark); } .compare-col p { color: var(--muted); font-size: 0.91rem; line-height: 1.67; } .ideal-section { padding: 58px 0; background: radial-gradient(circle at 15% 12%, rgba(13, 154, 170, 0.06), transparent 26%), var(--gray-bg); } .ideal-grid { display: grid; grid-template-columns: 1fr; gap: 17px; } .ideal-card { --ideal-accent: var(--primary); position: relative; overflow: hidden; padding: 27px 23px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-xs); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .ideal-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--ideal-accent); } .ideal-card:nth-child(4n + 1) { --ideal-accent: var(--primary); } .ideal-card:nth-child(4n + 2) { --ideal-accent: var(--secondary); } .ideal-card:nth-child(4n + 3) { --ideal-accent: var(--orange); } .ideal-card:nth-child(4n) { --ideal-accent: var(--blue); } .ideal-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } .ideal-icon { margin-bottom: 13px; font-size: 2.05rem; } .ideal-card h3 { margin-bottom: 9px; color: var(--text); font-size: 1.03rem; font-weight: 800; line-height: 1.35; } .ideal-card p { color: var(--muted); font-size: 0.89rem; line-height: 1.65; } .product-section { padding: 58px 0; background: var(--white); } .product-card { position: relative; isolation: isolate; max-width: 620px; margin-inline: auto; overflow: hidden; padding: 40px 32px 36px; border: 2px solid var(--primary); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); text-align: center; } .product-card::before { content: ""; position: absolute; z-index: -1; top: -130px; right: -120px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 124, 65, 0.16), transparent 68%); } .bestseller-badge { display: inline-block; margin-bottom: 19px; padding: 7px 17px; border-radius: 999px; background: linear-gradient(100deg, var(--primary), #21a366); box-shadow: 0 8px 20px rgba(16, 124, 65, 0.2); color: var(--white); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.085em; text-transform: uppercase; } .product-title { margin-bottom: 23px; color: var(--text); font-size: clamp(1.35rem, 4vw, 1.95rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.2; text-transform: uppercase; } .product-list { margin-bottom: 18px; text-align: left; } .product-list li, .offer-list li { display: flex; align-items: flex-start; gap: 7px; padding: 10px 0; border-bottom: 1px dashed var(--border); color: var(--text); font-size: 0.91rem; font-weight: 550; } .product-list li:last-child, .offer-list li:last-child { border-bottom: 0; } .product-more { margin-bottom: 26px; color: var(--muted); font-size: 0.88rem; font-style: italic; text-align: center; } .bonus-section { padding: 58px 0; background: radial-gradient(circle at 100% 0%, rgba(13, 154, 170, 0.09), transparent 27%), radial-gradient(circle at 0% 100%, rgba(16, 124, 65, 0.08), transparent 29%), var(--primary-faint); } .bonus-section .section-title { margin-bottom: 13px; } .bonus-section .section-subtitle { margin-bottom: 36px; } .bonus-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .bonus-card { position: relative; overflow: hidden; padding: 24px 19px 23px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-xs); transition: transform var(--transition), box-shadow var(--transition); } .bonus-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .bonus-free { position: absolute; z-index: 2; top: 0; right: 18px; padding: 5px 12px; border-radius: 0 0 9px 9px; background: var(--success); color: var(--white); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.075em; text-transform: uppercase; } .bonus-num { margin-bottom: 8px; color: var(--primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .bonus-card h3 { margin-bottom: 9px; color: var(--text); font-size: 1rem; font-weight: 800; line-height: 1.35; } .bonus-card p { color: var(--muted); font-size: 0.87rem; line-height: 1.62; } .bonus-image { display: flex; width: 100%; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 13px; aspect-ratio: 16 / 10; background: linear-gradient(145deg, var(--primary-soft), var(--secondary-soft)); } .bonus-image img { width: 100%; height: 100%; padding: 8px; object-fit: contain; } .bonus-value { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--gray-bg); color: var(--muted); font-size: 0.76rem; font-weight: 750; } .bonus-value s { color: var(--red); } .bonus-grid-premium { display: grid; grid-template-columns: 1fr; gap: 23px; margin-top: 36px; } .bonus-card-premium { position: relative; overflow: hidden; padding: 25px 22px 29px; border: 1px solid rgba(16, 124, 65, 0.16); border-radius: 24px; background: var(--white); box-shadow: var(--shadow); text-align: center; } .bonus-card-premium::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(13, 154, 170, 0.1), transparent 34%), radial-gradient(circle at bottom left, rgba(16, 124, 65, 0.08), transparent 38%); pointer-events: none; } .bonus-image-premium { position: relative; z-index: 1; display: flex; width: 100%; min-height: 225px; align-items: center; justify-content: center; margin-bottom: 20px; } .bonus-image-premium img { max-width: 95%; max-height: 255px; filter: drop-shadow(0 16px 23px rgba(7, 56, 32, 0.16)); object-fit: contain; } .bonus-card-premium h3 { position: relative; z-index: 1; max-width: 430px; margin: 0 auto 11px; color: var(--ink); font-size: 1.12rem; font-weight: 850; line-height: 1.32; } .bonus-description { position: relative; z-index: 1; max-width: 390px; margin: 0 auto 17px; color: var(--ink2); font-size: 0.94rem; line-height: 1.58; } .bonus-old-price { position: relative; z-index: 1; margin-bottom: 13px; color: var(--muted-light); font-size: 0.94rem; } .bonus-old-price s { color: var(--red); text-decoration-thickness: 2px; } .bonus-free-pill { position: relative; z-index: 1; display: inline-flex; min-width: 160px; align-items: center; justify-content: center; padding: 10px 21px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--secondary-dark)); box-shadow: 0 10px 21px rgba(16, 124, 65, 0.23); color: var(--white); font-size: 0.87rem; font-weight: 900; letter-spacing: 0.025em; } .guarantee-section { padding: 58px 0; background: var(--white); } .guarantee-card { position: relative; max-width: 620px; margin-inline: auto; overflow: hidden; padding: 43px 31px; border: 2px solid var(--success); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 0%, rgba(25, 155, 85, 0.1), transparent 43%), var(--white); box-shadow: 0 18px 48px rgba(25, 155, 85, 0.13); text-align: center; } .guarantee-icon { margin-bottom: 17px; } .guarantee-card h2 { margin-bottom: 14px; color: var(--text); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 900; letter-spacing: -0.025em; line-height: 1.2; text-transform: uppercase; } .guarantee-card p { color: var(--muted); font-size: 0.94rem; line-height: 1.72; } .comments-section { padding: 58px 0; background: var(--gray-bg); } .comments-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto 38px; } .comment-card { display: flex; align-items: flex-start; gap: 13px; padding: 19px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-xs); } .comment-empty { padding: 24px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: rgba(255, 255, 255, 0.65); color: var(--muted); font-size: 0.9rem; text-align: center; } .comment-avatar, .comment-avatar-placeholder { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; } .comment-avatar { border: 2px solid #cfe4d8; background: var(--primary-soft); object-fit: cover; } .comment-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 5px 14px rgba(16, 124, 65, 0.2); color: var(--white); font-size: 1rem; font-weight: 850; } .comment-body { min-width: 0; flex: 1; } .comment-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; } .comment-name { color: var(--text); font-size: 0.91rem; font-weight: 800; } .comment-time { color: var(--muted-light); font-size: 0.77rem; } .comment-text { overflow-wrap: anywhere; color: #303748; font-size: 0.89rem; line-height: 1.62; } .comment-form-wrapper { max-width: 600px; margin-inline: auto; padding: 29px 25px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); } .comment-form-wrapper h3 { margin-bottom: 22px; color: var(--text); font-size: 1.07rem; font-weight: 850; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; } .form-group { margin-bottom: 17px; } .form-group label { display: block; margin-bottom: 6px; color: var(--text); font-size: 0.84rem; font-weight: 700; } .form-group input[type="text"], .form-group textarea { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text); font-size: 0.9rem; outline: 0; resize: vertical; transition: border-color var(--transition), box-shadow var(--transition); } .form-group input[type="text"]:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(16, 124, 65, 0.1); } .form-error { display: block; min-height: 18px; margin-top: 4px; color: #bd241d; font-size: 0.77rem; } .file-upload-wrapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .form-group input[type="file"] { display: none; } .file-upload-label { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--gray-bg); color: var(--text); cursor: pointer; font-size: 0.82rem; font-weight: 700; transition: color var(--transition), border-color var(--transition), background var(--transition); } .file-upload-label:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .file-name { color: var(--muted); font-size: 0.77rem; } .file-name.file-error { color: #bd241d; font-weight: 650; } .comment-form .btn-cta { max-width: 100%; } .faq-section { padding: 58px 0; background: var(--white); } .faq-list { display: flex; max-width: 760px; flex-direction: column; gap: 10px; margin-inline: auto; } .faq-item { overflow: hidden; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); } .faq-item.open { border-color: rgba(16, 124, 65, 0.58); box-shadow: 0 8px 24px rgba(16, 124, 65, 0.09); } .faq-question { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 13px; padding: 18px 19px; border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 0.93rem; font-weight: 750; line-height: 1.45; text-align: left; transition: color var(--transition), background var(--transition); } .faq-question:hover, .faq-item.open .faq-question { background: var(--primary-faint); color: var(--primary-dark); } .faq-arrow { flex-shrink: 0; color: var(--muted); font-size: 1.35rem; line-height: 1; transition: transform 300ms ease, color 300ms ease; } .faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--primary); } .faq-answer { max-height: 0; overflow: hidden; padding: 0 19px; transition: max-height 350ms ease; } .faq-answer p { padding: 14px 0 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.89rem; line-height: 1.7; } .offer-section { position: relative; overflow: hidden; padding: 60px 0; background: radial-gradient(circle at 10% 10%, rgba(16, 124, 65, 0.1), transparent 29%), radial-gradient(circle at 93% 86%, rgba(13, 154, 170, 0.1), transparent 26%), linear-gradient(180deg, #f1fbf5, #eefbfc); } .offer-tag { margin-bottom: 27px; color: var(--primary-dark); font-size: 0.77rem; font-weight: 900; letter-spacing: 0.095em; text-align: center; text-transform: uppercase; } .offer-card { position: relative; max-width: 620px; margin-inline: auto; overflow: hidden; padding: 39px 29px; border: 2px solid var(--primary); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); text-align: center; } .offer-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 7px; background: linear-gradient( 90deg, var(--primary), var(--secondary), var(--green), var(--orange), var(--red) ); } .offer-title { margin-bottom: 6px; color: var(--text); font-size: clamp(1.45rem, 4.5vw, 2.05rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.17; text-transform: uppercase; } .offer-subtitle { margin-bottom: 25px; color: var(--primary); font-size: 0.86rem; font-weight: 750; letter-spacing: 0.055em; text-transform: uppercase; } .offer-list { margin-bottom: 28px; text-align: left; } .offer-price-box { margin-bottom: 25px; padding: 22px; border: 1px solid #cfe4d8; border-radius: var(--radius); background: radial-gradient(circle at 50% 0%, rgba(16, 124, 65, 0.1), transparent 62%), var(--primary-faint); } .price-from { margin-bottom: 3px; color: var(--muted); font-size: 0.86rem; } .price-from s { color: var(--red); text-decoration-thickness: 2px; } .price-main { color: var(--text); font-size: clamp(2.45rem, 8vw, 3.45rem); font-weight: 950; font-variant-numeric: tabular-nums; letter-spacing: -0.055em; line-height: 1.05; } .price-type { margin: 4px 0 9px; color: var(--muted); font-size: 0.8rem; } .price-save { color: var(--success-dark); font-size: 0.86rem; font-weight: 800; } .offer-trust { margin-top: 14px; color: var(--muted); font-size: 0.78rem; } .offer-mockup { display: flex; width: 100%; max-width: 390px; align-items: center; justify-content: center; margin: 17px auto 21px; } .offer-mockup img { width: 100%; object-fit: contain; filter: drop-shadow(0 15px 27px rgba(7, 56, 32, 0.18)); } .basic-offer-card { max-width: 620px; margin: 24px auto 0; padding: 27px 23px; border: 1.5px dashed rgba(16, 124, 65, 0.6); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.85); box-shadow: var(--shadow-xs); text-align: center; } .basic-eyebrow { display: inline-block; margin-bottom: 9px; padding: 5px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; } .basic-offer-card h3 { margin-bottom: 9px; color: var(--text); font-size: clamp(1.13rem, 3vw, 1.48rem); font-weight: 900; line-height: 1.25; text-transform: uppercase; } .basic-description { margin-bottom: 16px; color: var(--muted); font-size: 0.89rem; line-height: 1.65; } .basic-price-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; margin: 19px 0; padding: 16px 19px; border: 1px solid #cfe4d8; border-radius: var(--radius); background: var(--primary-faint); text-align: center; } .basic-price-box span { color: var(--muted); font-size: 0.82rem; font-weight: 650; letter-spacing: 0.035em; text-transform: uppercase; } .basic-price-box strong { color: var(--primary); font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 950; letter-spacing: -0.05em; line-height: 1.05; } .btn-secondary-offer { width: 100%; max-width: 440px; padding: 15px 23px; border: 1px solid var(--primary-deep); border-radius: 999px; background: var(--primary-deep); color: var(--white); font-size: 0.9rem; font-weight: 850; letter-spacing: 0.035em; text-transform: uppercase; transition: transform var(--transition), background var(--transition), box-shadow var(--transition); } .btn-secondary-offer:hover, .btn-secondary-offer:focus-visible { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 12px 27px rgba(6, 61, 36, 0.22); } .upsell-modal { position: fixed; z-index: 2000; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; } .upsell-modal.active { display: flex; } .upsell-backdrop { position: absolute; inset: 0; background: rgba(2, 26, 15, 0.76); backdrop-filter: blur(6px); } .upsell-box { position: relative; z-index: 2; width: 100%; max-width: 540px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px 25px 28px; border: 2px solid #21a366; border-radius: 25px; background: radial-gradient(circle at 50% 0%, rgba(16, 124, 65, 0.12), transparent 35%), var(--white); box-shadow: var(--shadow-lg); text-align: center; animation: modalIn 240ms ease both; } @keyframes modalIn { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-close { position: absolute; top: 12px; right: 13px; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--gray-bg-2); color: var(--text); font-size: 1.35rem; line-height: 1; transition: color var(--transition), background var(--transition), transform var(--transition); } .modal-close:hover { transform: rotate(6deg); background: var(--red-soft); color: var(--red); } .upsell-icon { margin-bottom: 7px; font-size: 2.05rem; } .upsell-kicker { margin-bottom: 9px; color: var(--primary); font-size: 0.77rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .upsell-box h2 { margin-bottom: 13px; color: var(--text); font-size: clamp(1.45rem, 5vw, 2.15rem); font-weight: 950; letter-spacing: -0.035em; line-height: 1.17; text-transform: uppercase; } .upsell-box h2 span { color: var(--primary); } .upsell-text { margin-bottom: 17px; color: var(--muted); font-size: 0.92rem; line-height: 1.65; } .upsell-benefits { display: grid; gap: 8px; margin-bottom: 19px; padding: 14px; border: 1px solid #d7e6dd; border-radius: 14px; background: var(--primary-faint); color: var(--text); font-size: 0.86rem; font-weight: 700; } .btn-basic-link { display: inline-block; margin-top: 13px; color: var(--muted); font-size: 0.85rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .btn-basic-link:hover { color: var(--primary); } .final-cta-section { position: relative; overflow: hidden; padding: 65px 0; background: radial-gradient(circle at 20% 50%, rgba(16, 124, 65, 0.08), transparent 29%), radial-gradient(circle at 85% 50%, rgba(13, 154, 170, 0.08), transparent 27%), var(--white); } .final-cta-section .container { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .final-headline { max-width: 780px; color: var(--text); font-size: clamp(1.55rem, 5vw, 2.55rem); font-weight: 950; letter-spacing: -0.04em; line-height: 1.17; text-transform: uppercase; } .footer { padding: 31px 20px; background: radial-gradient(circle at 50% 0%, rgba(16, 124, 65, 0.24), transparent 38%), #0d0a18; color: #a8afbd; text-align: center; } .footer .container { display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer p { font-size: 0.78rem; } .footer-links { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 3px; font-size: 0.78rem; } .footer-links a { color: #86efac; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); } .footer-links a:hover { color: #67e8f9; } @keyframes fadeInUp { from { transform: translateY(22px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hero .container > * { animation: fadeInUp 520ms ease both; } .hero .container > *:nth-child(1) { animation-delay: 40ms; } .hero .container > *:nth-child(2) { animation-delay: 100ms; } .hero .container > *:nth-child(3) { animation-delay: 160ms; } .hero .container > *:nth-child(4) { animation-delay: 220ms; } .hero .container > *:nth-child(5) { animation-delay: 280ms; } @media (min-width: 600px) { .learn-grid, .ideal-grid, .bonus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .compare-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bonus-grid-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vsl-container { max-width: 380px; } } @media (min-width: 900px) { .hero { padding: 54px 0 42px; } .carousel-section, .learn-section, .ideal-section, .product-section, .bonus-section, .guarantee-section, .comments-section, .faq-section, .offer-section { padding-top: 68px; padding-bottom: 68px; } .learn-grid, .ideal-grid, .bonus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vsl-container { max-width: 365px; } } @media (max-width: 899px) { .material-preview-section .material-carousel-container { padding-inline: 18px; } .material-preview-section .carousel-track { gap: 14px; } .material-preview-section .carousel-slide { width: calc((100% - 14px) / 2); min-width: calc((100% - 14px) / 2); flex-basis: calc((100% - 14px) / 2); } } @media (max-width: 700px) { .material-preview-section .carousel-track { gap: 0; } .material-preview-section .carousel-slide { width: 100%; min-width: 100%; flex-basis: 100%; } } @media (max-width: 599px) { .container { padding-inline: 17px; } .hero { padding: 34px 0 28px; } .hero::before, .hero::after { opacity: 0.027; } .hero-headline { font-size: clamp(1.72rem, 8.2vw, 2.28rem); } .section-title { font-size: clamp(1.4rem, 7.2vw, 1.88rem); } .carousel-section, .learn-section, .ideal-section, .product-section, .bonus-section, .guarantee-section, .comments-section, .faq-section, .offer-section, .final-cta-section { padding-top: 46px; padding-bottom: 46px; } .carousel-wrapper { display: block; } .carousel-wrapper > .carousel-btn { position: absolute; z-index: 6; top: 50%; width: 39px; height: 39px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.94); } .carousel-wrapper > .carousel-btn:hover, .carousel-wrapper > .carousel-btn:focus-visible { transform: translateY(-50%); background: var(--primary); } .carousel-wrapper > .carousel-btn.prev { left: 8px; } .carousel-wrapper > .carousel-btn.next { right: 8px; } .product-card, .offer-card { padding: 34px 20px 29px; border-radius: 23px; } .guarantee-card { padding: 37px 23px; border-radius: 23px; } .comment-form-wrapper { padding: 25px 18px; } .basic-offer-card { padding: 25px 18px; border-radius: 22px; } .upsell-box { padding: 33px 19px 25px; border-radius: 21px; } .bonus-image-premium { min-height: 205px; } } @media (max-width: 520px) { .urgency-bar { padding: 7px 9px; } .urgency-inner { gap: 6px; } .urgency-label { font-size: 0.66rem; letter-spacing: 0.025em; } .timer { min-width: 62px; padding: 3px 8px; } #timer-display { font-size: 0.9rem; } .security-badge { max-width: 100%; padding: 7px 13px; font-size: 0.64rem; } .btn-cta { min-height: 55px; padding: 16px 23px; font-size: 0.88rem; } .material-preview-section { padding: 45px 0 41px; } .material-preview-section .material-carousel-container { padding-inline: 10px; } .material-title { margin-bottom: 25px; font-size: clamp(1.38rem, 7vw, 1.82rem); } .material-preview-section .carousel-track-wrapper, .material-preview-section .carousel-slide { border-radius: 12px; } .material-preview-section .carousel-slide { border-width: 3px; } .material-preview-section .carousel-slide img { border-radius: 8px; } .material-preview-section .carousel-controls { gap: 15px; margin-top: 20px; } .material-preview-section .carousel-btn { width: 44px; height: 44px; flex-basis: 44px; } .comment-card { gap: 11px; padding: 16px 14px; } .comment-avatar, .comment-avatar-placeholder { width: 41px; height: 41px; flex-basis: 41px; } .file-upload-wrapper { align-items: flex-start; flex-direction: column; } } @media (max-width: 380px) { .urgency-label { max-width: 205px; } .hero-headline { font-size: 1.6rem; } .btn-cta { padding-inline: 18px; font-size: 0.84rem; } .price-main { font-size: 2.3rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body.python-site { --primary: #3776ab; --primary-dark: #285a85; --primary-deep: #071a33; --primary-soft: #eaf4fb; --primary-faint: #f6faff; --secondary: #ffd43b; --secondary-dark: #d4a900; --secondary-soft: #fff9db; --green: #21a366; --green-soft: #f0fdf4; --blue: #3b82f6; --blue-soft: #eff6ff; --orange: #f97316; --orange-soft: #fff7ed; --red: #ef4444; --red-soft: #fef2f2; --text: #101525; --muted: #5f6b82; --border: #d5e3f0; --border-strong: #b4cada; --paper: #ffffff; --gray-bg: #f6f8fc; background: #ffffff; } .scroll-progress { position: sticky; z-index: 999; top: 41px; width: 100%; height: 3px; margin-bottom: -3px; overflow: hidden; background: rgba(255, 255, 255, 0.08); pointer-events: none; } .scroll-progress span { display: block; width: 0; height: 100%; border-radius: 0 999px 999px 0; background: linear-gradient( 90deg, var(--primary), #5ba5d8 52%, var(--yellow) ); box-shadow: 0 0 14px rgba(55, 118, 171, 0.7); transition: width 90ms linear; } body.python-site .urgency-bar { background: radial-gradient(circle at 15% 0%, rgba(55, 118, 171, 0.28), transparent 30%), linear-gradient(90deg, #06152b, #0b3154 50%, #071d38); border-bottom-color: rgba(255, 212, 59, 0.24); } body.python-site .timer { min-width: 116px; border-color: rgba(255, 212, 59, 0.38); background: rgba(255, 212, 59, 0.12); color: #fff2a8; } .access-now { color: inherit; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.045em; line-height: 1; } body.python-site .hero { min-height: calc(100vh - 44px); padding: 46px 0 48px; background: linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px), radial-gradient(circle at 14% 16%, rgba(55, 118, 171, 0.4), transparent 30%), radial-gradient(circle at 88% 22%, rgba(255, 212, 59, 0.16), transparent 29%), radial-gradient(circle at 72% 92%, rgba(69, 185, 255, 0.12), transparent 24%), linear-gradient(145deg, #051326 0%, #082846 48%, #0a345d 100%); background-size: 34px 34px, 34px 34px, auto, auto, auto, auto; } body.python-site .hero::before { content: ">>>"; top: 8%; left: -2%; color: #ffd43b; opacity: 0.09; } body.python-site .hero::after { content: "py"; right: -2%; bottom: 5%; color: #8ecfff; opacity: 0.08; } .hero-code-signature { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; padding: 8px 14px; border: 1px solid rgba(34, 211, 238, 0.18); border-radius: 10px; background: rgba(9, 13, 26, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.15); color: #b8c5d9; font-family: "Courier New", monospace; font-size: 0.76rem; line-height: 1.2; backdrop-filter: blur(8px); } .hero-code-signature .code-symbol { color: #22d3ee; font-size: 0.95rem; font-weight: 900; } .hero-code-signature code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.python-site .security-badge { border-color: rgba(142, 207, 255, 0.35); background: rgba(5, 26, 51, 0.74); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16); color: #e5f4ff; } body.python-site .security-badge svg { color: var(--green); } body.python-site .hero-headline { color: #f8fafc; text-shadow: 0 8px 35px rgba(0, 0, 0, 0.24); } body.python-site .hero .highlight { background: linear-gradient(100deg, #8ecfff, #ffffff 48%, #ffd43b); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.python-site .hero-sub { color: #b7c1d2; } .tech-path { display: flex; max-width: 760px; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 4px; } .tech-path span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; background: rgba(15, 23, 42, 0.66); color: #d9e1ed; font-family: "Courier New", monospace; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.02em; } .tech-path strong { color: #ffd43b; font-size: 0.66rem; } .tech-path i { color: #64748b; font-style: normal; } body.python-site .vsl-container { border-color: #f8fafc; outline: 1px solid rgba(34, 211, 238, 0.34); box-shadow: 0 25px 65px rgba(0, 0, 0, 0.42), 0 0 0 8px rgba(91, 165, 216, 0.11), 0 0 42px rgba(6, 182, 212, 0.1); } body.python-site .video-placeholder video { object-fit: contain; padding: 12px; background: linear-gradient(rgba(142, 207, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 207, 255, 0.045) 1px, transparent 1px), #051326; background-size: 28px 28px; } body.python-site .play-circle { border-color: rgba(255, 255, 255, 0.76); background: linear-gradient(135deg, var(--primary), var(--secondary-dark)); } body.python-site .hero .btn-cta { background: linear-gradient(135deg, #285a85 0%, #3776ab 48%, #ffd43b 145%); box-shadow: 0 14px 34px rgba(55, 118, 171, 0.38), 0 0 28px rgba(255, 212, 59, 0.1); } body.python-site .hero .cta-trust { color: #95a3b8; } body.python-site .hero .channel-item { color: #d9e1ed; } body.python-site .hero .channel-item:last-child svg path { fill: #22d3ee; } body.python-site .section-title::before { content: ">_"; display: inline-block; margin-right: 9px; color: var(--secondary-dark); font-family: "Courier New", monospace; font-size: 0.72em; font-weight: 900; letter-spacing: -0.04em; vertical-align: 0.08em; } body.python-site .section-title::after { height: 4px; background: linear-gradient( 90deg, var(--primary), var(--secondary), var(--green) ); } body.python-site .material-preview-section { background: linear-gradient(rgba(71, 85, 105, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(71, 85, 105, 0.045) 1px, transparent 1px), radial-gradient(circle at 8% 8%, rgba(91, 165, 216, 0.12), transparent 25%), radial-gradient(circle at 92% 88%, rgba(6, 182, 212, 0.1), transparent 28%), #f5f7fb; background-size: 30px 30px, 30px 30px, auto, auto, auto; } body.python-site .material-preview-section::before { display: none; } body.python-site .material-title { color: var(--text); } body.python-site .material-title span { color: var(--primary); } body.python-site .material-preview-section .carousel-slide { border-color: #ffffff; box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(55, 118, 171, 0.12); } body.python-site .material-preview-section .dot { background: #cbd5e1; } body.python-site .material-preview-section .dot.active { background: linear-gradient(90deg, var(--primary), var(--secondary)); } body.python-site .material-preview-section .carousel-btn { border-color: rgba(55, 118, 171, 0.2); background: #ffffff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); color: var(--primary); backdrop-filter: none; } body.python-site .material-preview-section .carousel-btn:hover, body.python-site .material-preview-section .carousel-btn:focus-visible { border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--secondary-dark)); color: #ffffff; } body.python-site .learn-card, body.python-site .ideal-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)); } body.python-site .learn-card::after { content: ""; position: absolute; right: 13px; bottom: 9px; width: 17px; height: 5px; border-right: 2px solid var(--card-accent); border-bottom: 2px solid var(--card-accent); opacity: 0.22; } body.python-site .product-card::after { content: "PY:150"; position: absolute; z-index: -1; right: 18px; bottom: 10px; color: var(--primary); font-family: "Courier New", monospace; font-size: 2.2rem; font-weight: 900; opacity: 0.045; pointer-events: none; } body.python-site .bonus-section { background: linear-gradient(rgba(55, 118, 171, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(55, 118, 171, 0.035) 1px, transparent 1px), radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.1), transparent 28%), radial-gradient(circle at 0% 100%, rgba(91, 165, 216, 0.1), transparent 30%), #f6faff; background-size: 32px 32px, 32px 32px, auto, auto, auto; } body.python-site .bonus-card-premium { border-color: rgba(55, 118, 171, 0.18); } body.python-site .bonus-free-pill { background: linear-gradient(135deg, var(--primary), var(--secondary-dark)); } body.python-site .offer-section { background: linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px), radial-gradient(circle at 8% 10%, rgba(91, 165, 216, 0.34), transparent 29%), radial-gradient(circle at 94% 90%, rgba(6, 182, 212, 0.18), transparent 27%), #051326; background-size: 34px 34px, 34px 34px, auto, auto, auto; } body.python-site .offer-tag { color: #ffd43b; } body.python-site .offer-card { border-color: #5ba5d8; box-shadow: 0 28px 75px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(34, 211, 238, 0.08); } body.python-site .basic-offer-card { border-color: rgba(103, 232, 249, 0.45); background: rgba(255, 255, 255, 0.97); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26); } body.python-site .final-cta-section { background: radial-gradient(circle at 18% 50%, rgba(91, 165, 216, 0.28), transparent 28%), radial-gradient(circle at 84% 50%, rgba(6, 182, 212, 0.14), transparent 25%), linear-gradient(145deg, #051326, #0a345d); } body.python-site .final-headline { color: #f8fafc; } body.python-site .final-cta-section .highlight { background: linear-gradient(100deg, #8ecfff, #ffd43b); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body.python-site .footer { background: #041124; border-top: 1px solid rgba(34, 211, 238, 0.1); } .reveal-enabled .reveal-item { transform: translateY(24px); opacity: 0; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), opacity 480ms ease var(--reveal-delay, 0ms), box-shadow var(--transition), border-color var(--transition); } .reveal-enabled .reveal-item.is-visible { transform: translateY(0); opacity: 1; } .reveal-enabled .learn-card.reveal-item.is-visible:hover, .reveal-enabled .ideal-card.reveal-item.is-visible:hover, .reveal-enabled .bonus-card-premium.reveal-item.is-visible:hover { transform: translateY(-4px); } @media (max-width: 599px) { .scroll-progress { top: 37px; } body.python-site .hero { min-height: 0; padding-top: 34px; } .hero-code-signature { max-width: calc(100vw - 34px); font-size: 0.66rem; } .tech-path { gap: 6px; } .tech-path span { padding: 7px 9px; font-size: 0.66rem; } .tech-path i { display: none; } } @media (max-width: 380px) { .hero-code-signature code { max-width: 215px; } .tech-path span:last-of-type { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .scroll-progress span { transition: none; } .reveal-enabled .reveal-item { transform: none; opacity: 1; } } @media (min-width: 900px) and (max-width: 1199px) { .bonus-section .container { width: min(100%, 1120px); padding-inline: 22px; } .bonus-grid.bonus-grid-premium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .bonus-grid-premium > .bonus-card-premium { grid-column: auto !important; width: 100% !important; min-width: 0; } } @media (min-width: 1200px) { .bonus-section .container { width: min(100%, 1440px); padding-inline: 22px; } .bonus-grid.bonus-grid-premium { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .bonus-grid-premium > .bonus-card-premium { grid-column: auto !important; width: 100% !important; min-width: 0; padding: 21px 13px 25px; } .bonus-image-premium { min-height: 185px; margin-bottom: 16px; } .bonus-image-premium img { max-width: 100%; max-height: 205px; } .bonus-card-premium h3 { font-size: 0.94rem; line-height: 1.32; } .bonus-description { font-size: 0.84rem; line-height: 1.5; } } html,body{max-width:100%;overflow-x:hidden}body{font-family:Arial,Helvetica,sans-serif}*,*:before,*:after{box-sizing:border-box}img{max-width:100%;height:auto}h1,h2,h3,p,a,button{overflow-wrap:break-word}.container{width:100%;max-width:1080px;padding-left:20px;padding-right:20px}.hero-product{max-width:620px;margin:24px auto 10px}.hero-product img{display:block;width:100%;height:auto;object-fit:contain}.product-explanation{max-width:690px;margin:0 auto 24px;text-align:center;font-size:17px;line-height:1.7;color:var(--muted)}.map-window{overflow:hidden;width:100%;margin:18px 0}.map-track{display:flex;width:max-content;animation:maps-slide 65s linear infinite;will-change:transform}.map-track.right{animation-direction:reverse}.map-group{display:flex;flex-shrink:0;gap:16px;padding-right:16px}.map-group figure{margin:0;width:360px;flex-shrink:0;border:1px solid #b8d5c4;border-radius:14px;overflow:hidden;background:white}.map-group img{display:block;width:100%;height:220px;object-fit:contain}.paused .map-track{animation-play-state:paused}.motion-toggle{display:block;margin:18px auto;border:1px solid #107c41;color:#107c41;background:white;border-radius:24px;padding:10px 20px;cursor:pointer}.bonus-grid.bonus-grid-premium{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px}.bonus-grid-premium>.bonus-card-premium{grid-column:auto!important;min-width:0}.bonus-image-premium{background:transparent!important;aspect-ratio:1;display:flex;align-items:center;justify-content:center}.bonus-image-premium img{width:100%;height:100%;object-fit:contain}.offer-card,.basic-offer-card{max-width:740px;width:100%;margin-left:auto;margin-right:auto}.upsell-box{max-height:90vh;overflow-y:auto}.hero .container>*{animation:none!important}.btn-cta,.btn-secondary-offer{white-space:normal;max-width:100%;text-align:center}.offer-mockup img{max-height:460px;object-fit:contain}.footer-links{flex-wrap:wrap}@keyframes maps-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}@media(max-width:700px){.bonus-grid.bonus-grid-premium{grid-template-columns:1fr!important;max-width:430px;margin-left:auto;margin-right:auto}.hero-headline{font-size:clamp(25px,7.3vw,40px)!important;line-height:1.2!important}.map-group figure{width:280px}.map-group img{height:180px}.hero-product{max-width:430px}.offer-card,.basic-offer-card{padding:25px 18px}.urgency-inner{gap:8px}.product-explanation{font-size:15px}.hero{padding-top:28px!important}.hero-product{margin-top:16px}.bonus-image-premium{max-height:340px}.material-title{padding:0 20px}}@media(prefers-reduced-motion:reduce){.map-track{animation-duration:130s}} .hero .product-explanation{color:#e1edf4}.hero-product img{height:auto}.material-preview-section{padding-top:34px}.offer-title,.basic-offer-card h3{line-height:1.3}.map-group img{background:#fff} #material .cta-area{padding:12px 20px 0;text-align:center} #material .cta-area .btn-cta{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;max-width:340px;padding:15px 22px;font-size:14px;line-height:1.4;letter-spacing:.01em} @media(max-width:420px){#material .cta-area .btn-cta{max-width:290px;padding:14px 18px;font-size:13px}} .guarantee-icon{width:180px;height:auto;margin:0 auto 20px;background:transparent;border-radius:0}.guarantee-icon img{display:block;width:100%;height:auto} .map-group figure{width:250px;aspect-ratio:2/3;background:white} .map-group img{width:100%;height:100%;object-fit:contain} @media(max-width:700px){.map-group figure{width:190px}.map-group img{height:100%}} /* Old mobile browser layout and inexpensive animations */ .hero-product picture,.bonus-image-premium picture,.offer-mockup picture{display:block;width:100%} .bonus-image-premium picture{height:100%} .map-track{width:2660px} .map-group{width:1330px;gap:0;padding-right:0} .map-group figure{width:250px;height:354px;aspect-ratio:auto;margin-right:16px} .map-group picture{display:block;width:100%;height:100%} .map-group img{width:100%;height:100%;object-fit:contain} .bonus-image-premium{height:320px;aspect-ratio:auto} .btn-pulse{animation:none!important} html{scroll-behavior:smooth} @media(max-width:700px){.map-track{width:2060px}.map-group{width:1030px}.map-group figure{width:190px;height:269px}.hero-headline{font-size:28px!important}.bonus-image-premium{height:330px}.upsell-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}} @media(max-width:350px){.hero-headline{font-size:25px!important}.container{padding-left:14px;padding-right:14px}.security-badge{font-size:10px}.urgency-label{font-size:11px}} @supports not (display:grid){.bonus-grid.bonus-grid-premium{display:block!important}.bonus-card-premium{max-width:430px;margin:0 auto 24px}}