/* ============================================ System Managera - field manual design system ============================================ */ /* --- Google Fonts loaded in HTML --- */ :root { /* Colors */ --bg: #f4f5f3; --bg-alt: #e7eceb; --surface: #ffffff; --surface-hover:#eef2f1; --border: #c9d2cf; --border-light: #9fafaa; --accent: #b8621b; --accent-hover: #8f4612; --accent-soft: rgba(184,98,27,.11); --accent-glow: rgba(184,98,27,.18); --text: #151918; --text-muted: #4f5b58; --text-dim: #7a8884; --green: #2f7d52; --red: #b64035; --blue: #406a82; /* Typography */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: 'Space Grotesk', 'Inter', sans-serif; /* Spacing (8px grid) */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem; --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 8px; --r-xl: 8px; /* Shadows */ --shadow-card: 0 6px 22px rgba(22,35,32,.08); --shadow-glow: 0 0 0 3px var(--accent-glow); /* Layout */ --max-w: 1120px; --nav-h: 64px; } /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px} body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg{display:block;max-width:100%} a{color:var(--accent);text-decoration:none;transition:color .2s} a:hover{color:var(--accent-hover)} ul,ol{list-style:none} button,input,textarea{font:inherit;color:inherit;border:none;background:none} h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2;letter-spacing:0} /* ---- Utilities ---- */ .container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s6)} .text-accent{color:var(--accent)} .text-muted{color:var(--text-muted)} .text-center{text-align:center} .text-sm{font-size:.875rem} .text-xs{font-size:.8rem} .text-lg{font-size:1.125rem} .font-heading{font-family:var(--font-heading)} .mt-1{margin-top:var(--s4)}.mt-2{margin-top:var(--s8)}.mt-3{margin-top:var(--s12)}.mt-4{margin-top:var(--s16)} .mb-1{margin-top:var(--s4)}.mb-2{margin-bottom:var(--s8)}.mb-3{margin-bottom:var(--s12)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} /* ---- Gradient text ---- */ .gradient-text{ color:var(--accent); } /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.75rem 1.5rem;border-radius:var(--r-md);font-weight:600; font-size:.95rem;cursor:pointer;transition:all .25s;white-space:nowrap; } .btn-primary{ background:var(--accent);color:#fff; box-shadow:none; } .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-card);color:#fff} .btn-outline{ border:1.5px solid var(--border-light);color:var(--text);background:transparent; } .btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .btn-ghost{color:var(--text-muted);padding:.5rem .75rem} .btn-ghost:hover{color:var(--text)} .btn-lg{padding:1rem 2rem;font-size:1.05rem;border-radius:var(--r-lg)} .btn-sm{padding:.5rem 1rem;font-size:.85rem} .btn-block{width:100%} /* ---- Navigation ---- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--nav-h); background:rgba(244,245,243,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); transition:background .3s; } .nav-inner{ display:flex;align-items:center;justify-content:space-between; height:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--s6); } .nav-logo{ font-family:var(--font-heading);font-weight:800;font-size:1.2rem; color:var(--text);display:flex;align-items:center;gap:.4rem; } .nav-logo .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;display:inline-block} .nav-links{display:flex;align-items:center;gap:var(--s6)} .nav-links a{color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .2s} .nav-links a:hover{color:var(--text)} .nav-cta{margin-left:var(--s4)} /* Hamburger */ .nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:110} .nav-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s} .nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .nav-toggle.active span:nth-child(2){opacity:0} .nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} @media(max-width:768px){ .nav-toggle{display:flex} .nav-menu{ position:fixed;top:0;right:-100%;width:280px;height:100vh; background:var(--surface);padding:calc(var(--nav-h) + var(--s8)) var(--s6) var(--s6); flex-direction:column;gap:var(--s4);transition:right .35s ease; border-left:1px solid var(--border); display:flex; } .nav-menu.open{right:0} .nav-menu a{font-size:1.1rem;padding:var(--s3) 0;color:var(--text)} .nav-cta{margin-left:0;margin-top:var(--s4)} .nav-cta .btn{width:100%;justify-content:center} } @media(min-width:769px){ .nav-menu{display:flex;align-items:center;gap:var(--s6)} } /* ---- Hero ---- */ .hero{ padding:calc(var(--nav-h) + var(--s20)) 0 var(--s20); text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--border); } .hero::before{ content:'';position:absolute;inset:0; background: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:56px 56px; pointer-events:none;opacity:.22; } .hero h1{ font-size:clamp(2rem,5.5vw,3.5rem); font-weight:800;max-width:800px;margin:0 auto var(--s6); position:relative; } .hero .subtitle{ font-size:clamp(1rem,2.2vw,1.25rem);color:var(--text-muted); max-width:600px;margin:0 auto var(--s10);line-height:1.7; } .hero-buttons{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap} .page-actions{margin-top:var(--s8)} /* ---- Funnel hero / product pages ---- */ .hero-funnel{ text-align:left; padding:calc(var(--nav-h) + var(--s16)) 0 var(--s16); } .hero-funnel-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px); gap:var(--s12);align-items:center; } .hero-funnel .hero-copy{position:relative;z-index:1} .hero-funnel h1{ max-width:760px;margin:0 0 var(--s6); font-size:clamp(2.4rem,5.8vw,4.7rem); } .hero-funnel .subtitle{ max-width:700px;margin:0 0 var(--s8); font-size:clamp(1rem,1.7vw,1.18rem); } .hero-funnel .hero-buttons{justify-content:flex-start} .hero-assurance{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)} .hero-assurance span{ font-size:.78rem;color:var(--text-muted);border:1px solid var(--border); background:rgba(255,255,255,.58);border-radius:var(--r-sm);padding:.35rem .55rem; } .conversation-file{ position:relative;z-index:1;background:var(--surface);border:1px solid var(--border); border-top:4px solid var(--accent);border-radius:var(--r-lg);padding:var(--s6); box-shadow:var(--shadow-card); } .file-top{display:flex;justify-content:space-between;gap:var(--s4);align-items:flex-start;margin-bottom:var(--s5)} .file-top span,.file-compare span{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; text-transform:uppercase;font-size:.72rem;color:var(--text-dim);font-weight:700; } .file-top strong{font-family:var(--font-heading);font-size:1.15rem;text-align:right} .file-alert{ padding:var(--s4);border:1px solid rgba(182,64,53,.28);background:rgba(182,64,53,.06); color:var(--red);border-radius:var(--r-md);font-size:.88rem;line-height:1.55;margin-bottom:var(--s5); } .file-compare{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s5)} .file-compare div{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s4);background:var(--bg)} .file-compare p{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin-top:var(--s2)} .file-compare div:last-child{border-left:3px solid var(--green)} .timer-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} .timer-list div{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--r-sm);padding:var(--s3)} .timer-list b{display:block;color:var(--accent);font-family:var(--font-heading);font-size:.95rem} .timer-list span{font-size:.72rem;color:var(--text-muted)} @media(max-width:980px){ .hero-funnel-grid{grid-template-columns:1fr;gap:var(--s8)} .conversation-file{max-width:620px} } @media(max-width:560px){ .hero-funnel{padding:calc(var(--nav-h) + var(--s10)) 0 var(--s10)} .hero-funnel h1{font-size:2.25rem} .hero-funnel .hero-buttons .btn{width:100%} .timer-list{grid-template-columns:repeat(2,1fr)} } /* ---- Field manual strip ---- */ .field-strip{ border-top:1px solid var(--border);border-bottom:1px solid var(--border); background:var(--bg-alt);padding:var(--s6) 0; } .manual-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4); } .manual-card{ min-height:144px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2); } .manual-card strong{font-family:var(--font-heading);font-size:1rem;line-height:1.25} .manual-card p{font-size:.85rem;color:var(--text-muted);line-height:1.55} .manual-label{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.72rem;text-transform:uppercase;color:var(--accent);font-weight:700; } .manual-card-price{border-color:var(--accent)} .manual-card-price strong{font-size:1.85rem;color:var(--accent)} @media(max-width:900px){ .manual-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .field-strip{padding:var(--s4) 0} .manual-grid{grid-template-columns:1fr;gap:var(--s3)} .manual-card{min-height:0;padding:var(--s4)} } /* ---- Pain and product depth ---- */ .pain-ledger{ max-width:900px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-lg); overflow:hidden;background:var(--surface); } .pain-row{ display:grid;grid-template-columns:64px 1fr;gap:var(--s5); padding:var(--s6);border-bottom:1px solid var(--border);align-items:start; } .pain-row:last-child{border-bottom:0} .pain-mark{ width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center; font-family:var(--font-heading);font-weight:800;font-size:.9rem; } .pain-mark.risk{background:rgba(182,64,53,.08);color:var(--red);border:1px solid rgba(182,64,53,.26)} .pain-mark.ok{background:rgba(47,125,82,.08);color:var(--green);border:1px solid rgba(47,125,82,.25)} .pain-row strong{display:block;font-family:var(--font-heading);font-size:1.1rem;margin-bottom:var(--s2)} .pain-row p{color:var(--text-muted);font-size:.95rem;line-height:1.65} .manual-spread{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr); gap:var(--s10);align-items:start;margin-bottom:var(--s8); } .spread-copy h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin-bottom:var(--s4)} .spread-copy p{color:var(--text-muted);line-height:1.75;font-size:1.03rem} .spread-sheet{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-card);overflow:hidden; } .sheet-title{ font-family:var(--font-heading);font-weight:800;padding:var(--s5) var(--s6); border-bottom:1px solid var(--border);background:var(--bg-alt); } .sheet-row{ display:grid;grid-template-columns:130px 1fr;gap:var(--s4); padding:var(--s4) var(--s6);border-bottom:1px solid var(--border); } .sheet-row:last-child{border-bottom:0} .sheet-row b{font-size:.9rem} .sheet-row span{font-size:.9rem;color:var(--text-muted)} .artifact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} .artifact-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); padding:var(--s5);min-height:148px; } .artifact-card span{ display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; color:var(--accent);font-weight:800;font-size:.78rem;margin-bottom:var(--s4); } .artifact-card strong{display:block;font-family:var(--font-heading);margin-bottom:var(--s2)} .artifact-card p{font-size:.88rem;color:var(--text-muted);line-height:1.55} .buy-section{ display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--s10);align-items:center; } .buy-copy h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin-bottom:var(--s4)} .buy-copy p{color:var(--text-muted);line-height:1.75;font-size:1.03rem;margin-bottom:var(--s5)} .fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} .fit-grid div{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:var(--s5)} .fit-grid strong{display:block;font-family:var(--font-heading);margin-bottom:var(--s2)} .fit-grid span{display:block;font-size:.9rem;color:var(--text-muted);line-height:1.6} .buy-section .price-box{margin:0} @media(max-width:920px){ .manual-spread,.buy-section{grid-template-columns:1fr} .artifact-grid{grid-template-columns:repeat(2,1fr)} .buy-section .price-box{margin:0 auto} } @media(max-width:620px){ .pain-row{grid-template-columns:1fr;gap:var(--s3);padding:var(--s5)} .sheet-row{grid-template-columns:1fr;gap:var(--s1)} .artifact-grid,.fit-grid{grid-template-columns:1fr} } /* ---- Section base ---- */ .section{padding:var(--s20) 0} .section-alt{background:var(--bg-alt)} .section-header{text-align:center;max-width:680px;margin:0 auto var(--s12)} .section-header h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:var(--s4)} .section-header p{color:var(--text-muted);font-size:1.05rem;line-height:1.7} .section-label{ display:inline-block;font-size:.8rem;font-weight:600;text-transform:uppercase; letter-spacing:0;color:var(--accent);margin-bottom:var(--s3); } /* ---- Cards Grid ---- */ .cards-grid{display:grid;gap:var(--s6)} .cards-grid.cols-2{grid-template-columns:repeat(2,1fr)} .cards-grid.cols-3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.cards-grid.cols-3{grid-template-columns:1fr}} @media(max-width:700px){.cards-grid.cols-2{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s8);transition:all .3s;position:relative;overflow:hidden; } .card:hover{border-color:var(--border-light);transform:translateY(-1px);box-shadow:var(--shadow-card)} .card-icon{ width:48px;height:48px;border-radius:var(--r-md); background:var(--accent-soft);display:flex;align-items:center;justify-content:center; font-size:1.4rem;margin-bottom:var(--s4); } .card h3{font-size:1.15rem;margin-bottom:var(--s2)} .card p{color:var(--text-muted);font-size:.92rem;line-height:1.65} .card .card-tag{ display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase; letter-spacing:0;padding:.25rem .6rem;border-radius:var(--r-sm); margin-bottom:var(--s4); } /* ---- Manual split blocks ---- */ .split-manual{ display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:var(--s10);align-items:start;padding:var(--s10); background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); } .split-manual h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:var(--s4)} .split-manual p{color:var(--text-muted);line-height:1.75} .decision-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden} .decision-list div{display:grid;grid-template-columns:180px 1fr;gap:var(--s4);padding:var(--s4);background:var(--bg);border-bottom:1px solid var(--border)} .decision-list div:last-child{border-bottom:0} .decision-list strong{font-size:.9rem} .decision-list span{font-size:.88rem;color:var(--text-muted)} @media(max-width:820px){ .split-manual{grid-template-columns:1fr;padding:var(--s6);gap:var(--s6)} .decision-list div{grid-template-columns:1fr;gap:var(--s1)} } .card .tag-free{background:rgba(34,197,94,.12);color:var(--green)} .card .tag-paid{background:var(--accent-soft);color:var(--accent)} .card .tag-premium{background:rgba(59,130,246,.12);color:var(--blue)} .card-footer{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border)} /* ---- Featured card (product highlight) ---- */ .card-featured{ border-color:var(--accent); background:var(--surface); } .card-featured::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--accent); } /* ---- Pain points ---- */ .pain-list{display:flex;flex-direction:column;gap:var(--s4);max-width:640px;margin:0 auto} .pain-item{ display:flex;align-items:flex-start;gap:var(--s4); padding:var(--s4) var(--s5);border-radius:var(--r-md); background:var(--surface);border:1px solid var(--border); } .pain-icon{font-size:1.2rem;flex-shrink:0;margin-top:2px} .pain-text{font-size:.95rem;color:var(--text-muted);line-height:1.6} .pain-text strong{color:var(--text)} /* ---- About / Bio ---- */ .about-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--s10);align-items:center} .about-avatar{ width:160px;height:160px;border-radius:50%; background:var(--accent); display:flex;align-items:center;justify-content:center; font-size:3.5rem;font-weight:800;color:#fff;font-family:var(--font-heading); flex-shrink:0; } .about-content h3{font-size:1.5rem;margin-bottom:var(--s2)} .about-content .role{color:var(--accent);font-weight:600;margin-bottom:var(--s4);font-size:.95rem} .about-content p{color:var(--text-muted);margin-bottom:var(--s4);line-height:1.7} .about-stats{display:flex;gap:var(--s8);margin-top:var(--s6)} .about-stat{text-align:center} .about-stat .val{font-family:var(--font-heading);font-weight:800;font-size:1.3rem;color:var(--accent)} .about-stat .lbl{font-size:.8rem;color:var(--text-muted)} @media(max-width:700px){ .about-grid{grid-template-columns:1fr;text-align:center;justify-items:center} .about-stats{justify-content:center} } /* ---- Newsletter CTA ---- */ .cta-section{ background:var(--bg-alt); border-top:1px solid var(--border);border-bottom:1px solid var(--border); } .cta-box{ text-align:center;max-width:560px;margin:0 auto; } .cta-box h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:var(--s3)} .cta-box p{color:var(--text-muted);margin-bottom:var(--s8)} .cta-form{display:flex;gap:var(--s3);max-width:440px;margin:0 auto} .cta-input{ flex:1;padding:.75rem 1rem;border-radius:var(--r-md); background:var(--surface);border:1.5px solid var(--border);color:var(--text); font-size:.95rem;transition:border-color .2s; } .cta-input:focus{outline:none;border-color:var(--accent)} .cta-input::placeholder{color:var(--text-dim)} .cta-note{font-size:.8rem;color:var(--text-dim);margin-top:var(--s3)} @media(max-width:500px){ .cta-form{flex-direction:column} } /* ---- Footer ---- */ .footer{ padding:var(--s12) 0 var(--s8);border-top:1px solid var(--border); } .footer-inner{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4); } .footer-brand{font-family:var(--font-heading);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.4rem} .footer-links{display:flex;gap:var(--s6)} .footer-links a{color:var(--text-muted);font-size:.85rem} .footer-links a:hover{color:var(--text)} .footer-copy{width:100%;text-align:center;color:var(--text-dim);font-size:.8rem;margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--border)} /* ---- Content pages (subpages) ---- */ .page-hero{ padding:calc(var(--nav-h) + var(--s12)) 0 var(--s10); text-align:center;position:relative; border-bottom:1px solid var(--border); background:var(--bg-alt); } .page-hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:var(--s3);max-width:700px;margin-left:auto;margin-right:auto} .page-hero .page-desc{color:var(--text-muted);font-size:1.05rem;max-width:560px;margin:0 auto} .page-hero .page-badge{ display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase; letter-spacing:0;padding:.3rem .8rem;border-radius:var(--r-sm); margin-bottom:var(--s4); } .page-content{padding:var(--s12) 0 var(--s20)} /* ---- Script block (for cold call scripts page) ---- */ .script-block{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s8);margin-bottom:var(--s8);position:relative; } .script-block::before{ content:attr(data-num);position:absolute;top:var(--s6);right:var(--s6); font-family:var(--font-heading);font-size:3rem;font-weight:800; color:var(--accent-soft);line-height:1; } .script-block h3{font-size:1.2rem;margin-bottom:var(--s2);padding-right:3rem} .script-context{ font-size:.85rem;color:var(--accent);font-weight:600;margin-bottom:var(--s4); display:flex;align-items:center;gap:.4rem; } .script-body{ background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md); padding:var(--s5);margin:var(--s4) 0;font-size:.93rem;line-height:1.8; border-left:3px solid var(--accent); } .script-body .you{color:var(--accent);font-weight:600} .script-body .client{color:var(--text-muted);font-style:italic} .script-body .note{color:var(--text-dim);font-size:.82rem} .script-why{margin-top:var(--s4)} .script-why h4{font-size:.85rem;text-transform:uppercase;letter-spacing:0;color:var(--text-muted);margin-bottom:var(--s2)} .script-why p{font-size:.9rem;color:var(--text-muted);line-height:1.65} .script-tip{ margin-top:var(--s4);padding:var(--s4);border-radius:var(--r-md); background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.15); font-size:.88rem;line-height:1.6; } .script-tip strong{color:var(--green)} /* ---- Objection block ---- */ .objection-category{margin-bottom:var(--s12)} .objection-category h2{ font-size:1.3rem;margin-bottom:var(--s6);padding-bottom:var(--s3); border-bottom:2px solid var(--accent);display:inline-block; } .objection-item{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s6);margin-bottom:var(--s4); } .objection-item h4{font-size:1rem;margin-bottom:var(--s1);display:flex;align-items:center;gap:var(--s2)} .objection-item .obj-label{ font-size:.72rem;font-weight:700;text-transform:uppercase; padding:.2rem .5rem;border-radius:var(--r-sm); background:rgba(239,68,68,.1);color:var(--red); } .objection-item .obj-response{ margin-top:var(--s3);padding:var(--s4);border-radius:var(--r-md); background:var(--bg);border-left:3px solid var(--green); font-size:.92rem;line-height:1.7;color:var(--text); } .objection-item .obj-why{font-size:.82rem;color:var(--text-muted);margin-top:var(--s3);line-height:1.5;font-style:italic} /* ---- Framework page ---- */ .framework-step{ display:grid;grid-template-columns:56px 1fr;gap:var(--s5);margin-bottom:var(--s8); } .framework-num{ width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent); font-family:var(--font-heading);font-weight:800;font-size:1.4rem;flex-shrink:0; } .framework-content h3{font-size:1.1rem;margin-bottom:var(--s2)} .framework-content p{font-size:.92rem;color:var(--text-muted);line-height:1.65} .framework-content .questions{ margin-top:var(--s3);padding-left:var(--s5); } .framework-content .questions li{ color:var(--text-muted);font-size:.9rem;line-height:1.7; position:relative;padding-left:var(--s5);margin-bottom:var(--s1); } .framework-content .questions li::before{ content:'→';position:absolute;left:0;color:var(--accent);font-weight:600; } /* ---- Starter Kit ---- */ .kit-features{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} .kit-feature{ display:flex;align-items:flex-start;gap:var(--s3); padding:var(--s4);border-radius:var(--r-md); background:var(--surface);border:1px solid var(--border); } .kit-feature .feat-icon{font-size:1.3rem;flex-shrink:0;margin-top:2px} .kit-feature .feat-text{font-size:.9rem;color:var(--text-muted);line-height:1.5} .kit-feature .feat-text strong{color:var(--text);display:block;margin-bottom:2px} @media(max-width:600px){.kit-features{grid-template-columns:1fr}} .price-box{ text-align:center;padding:var(--s10);border-radius:var(--r-xl); background:var(--surface); border:2px solid var(--accent);max-width:420px;margin:var(--s10) auto 0; } .price-box .price{ font-family:var(--font-heading);font-size:3rem;font-weight:800;color:var(--accent); } .price-box .price-note{font-size:.9rem;color:var(--text-muted);margin:var(--s2) 0 var(--s6)} .price-box .price-list{text-align:left;margin-bottom:var(--s6)} .price-box .price-list li{ font-size:.9rem;color:var(--text-muted);padding:var(--s2) 0; border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s2); } .price-box .price-list li::before{content:'✓';color:var(--green);font-weight:700} /* ---- Back to top ---- */ .back-top{ position:fixed;bottom:2rem;right:2rem;z-index:90; width:44px;height:44px;border-radius:50%; background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center; font-size:1.2rem;cursor:pointer;opacity:0;transform:translateY(10px); transition:all .3s;box-shadow:0 4px 16px rgba(249,115,22,.3); } .back-top.visible{opacity:1;transform:translateY(0)} .back-top:hover{background:var(--accent-hover)} /* ---- Breadcrumb ---- */ .breadcrumb{ display:flex;align-items:center;gap:var(--s2); font-size:.82rem;color:var(--text-dim);margin-bottom:var(--s4); } .breadcrumb a{color:var(--text-muted)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb .sep{color:var(--text-dim)} /* ---- Animations ---- */ .fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .fade-in.visible{opacity:1;transform:translateY(0)} /* ---- Scroll progress bar ---- */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;z-index:200; background:var(--accent); width:0%;transition:width .1s linear; } /* ---- Sticky mobile CTA ---- */ .sticky-cta{ display:none;position:fixed;bottom:0;left:0;right:0;z-index:95; padding:.75rem var(--s6); background:rgba(244,245,243,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--border); text-align:center; transform:translateY(100%);transition:transform .3s ease; } .sticky-cta.visible{transform:translateY(0)} .sticky-cta .btn{width:100%;max-width:360px} @media(max-width:768px){ .sticky-cta{display:block} .back-top{bottom:5rem} } /* ---- Testimonials ---- */ .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)} .testimonial{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s6);position:relative; } .testimonial::before{ content:'"';font-family:var(--font-heading);font-size:3rem; color:var(--accent-soft);line-height:1;position:absolute;top:var(--s4);right:var(--s5); } .testimonial .t-text{font-size:.9rem;color:var(--text-muted);line-height:1.7;font-style:italic;margin-bottom:var(--s4)} .testimonial .t-author{font-size:.82rem;font-weight:600;color:var(--text)} .testimonial .t-role{font-size:.78rem;color:var(--text-dim)} @media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}} /* ---- Product ladder ---- */ .ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);align-items:end} .ladder-step{ text-align:center;padding:var(--s6) var(--s4);border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--border);transition:all .3s; } .ladder-step:hover{border-color:var(--border-light);transform:translateY(-2px)} .ladder-step.active{border-color:var(--accent);background:var(--surface)} .ladder-step .l-price{font-family:var(--font-heading);font-weight:800;font-size:1.3rem;color:var(--accent);margin-bottom:var(--s2)} .ladder-step .l-name{font-size:.88rem;font-weight:600;margin-bottom:var(--s1)} .ladder-step .l-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5} .ladder-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:1.2rem} @media(max-width:700px){ .ladder{grid-template-columns:1fr;gap:var(--s3)} } /* ---- Free tools hub ---- */ .tool-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); padding:var(--s8);display:grid;grid-template-columns:64px 1fr auto;gap:var(--s5);align-items:center; transition:all .3s;text-decoration:none;color:inherit; } .tool-card:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-card);color:inherit} .tool-icon{ width:64px;height:64px;border-radius:var(--r-md); background:var(--accent-soft);display:flex;align-items:center;justify-content:center; font-size:1.8rem;flex-shrink:0; } /* ---- Revenue OS additions ---- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} @media(max-width:700px){.form-grid{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:.35rem} .field label{font-size:.82rem;color:var(--text-muted);font-weight:600} .select,.input{ width:100%;padding:.8rem 1rem;border-radius:var(--r-md); background:var(--surface);border:1.5px solid var(--border);color:var(--text); } .select:focus,.input:focus{outline:none;border-color:var(--accent)} .question-group{margin-bottom:var(--s8)} .question-group h3{font-size:1.15rem;margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s3)} .question-row{ display:grid;grid-template-columns:1fr 160px;gap:var(--s4);align-items:center; padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-md); background:var(--surface);margin-bottom:var(--s3); } .question-row p{color:var(--text-muted);font-size:.92rem;line-height:1.55} @media(max-width:700px){.question-row{grid-template-columns:1fr}} .result-box{ display:none;margin-top:var(--s8);padding:var(--s8);border-radius:var(--r-lg); border:2px solid var(--accent);background:var(--surface); } .result-score{font-family:var(--font-heading);font-size:3.5rem;font-weight:800;color:var(--accent);line-height:1} .result-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);margin:var(--s6) 0} @media(max-width:800px){.result-grid{grid-template-columns:1fr}} .result-tile{padding:var(--s4);border-radius:var(--r-md);background:var(--bg);border:1px solid var(--border)} .result-tile .val{font-family:var(--font-heading);font-size:1.4rem;color:var(--accent);font-weight:800} .result-tile .lbl{font-size:.8rem;color:var(--text-muted)} .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)} .data-table{width:100%;border-collapse:collapse;min-width:720px;background:var(--surface)} .data-table th,.data-table td{padding:var(--s4);border-bottom:1px solid var(--border);text-align:left;vertical-align:top} .data-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:0;color:var(--text-muted);background:var(--bg-alt)} .data-table td{font-size:.9rem;color:var(--text-muted)} .data-table strong{color:var(--text)} .notice{ padding:var(--s4) var(--s5);border-radius:var(--r-md); background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.22); color:var(--text-muted);font-size:.9rem;line-height:1.6; } .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:stretch} @media(max-width:900px){.price-grid{grid-template-columns:1fr}} .check-list{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s5) 0} .check-list li{color:var(--text-muted);font-size:.92rem;line-height:1.55;display:flex;gap:var(--s3)} .check-list li::before{content:'✓';color:var(--green);font-weight:800;flex-shrink:0} .tool-info h3{font-size:1.05rem;margin-bottom:.25rem} .tool-info p{font-size:.88rem;color:var(--text-muted);line-height:1.5} .tool-arrow{font-size:1.5rem;color:var(--text-dim);transition:color .2s} .tool-card:hover .tool-arrow{color:var(--accent)} @media(max-width:600px){ .tool-card{grid-template-columns:48px 1fr;gap:var(--s3)} .tool-icon{width:48px;height:48px;font-size:1.3rem} .tool-arrow{display:none} } /* ---- Checklist items ---- */ .checklist-group{margin-bottom:var(--s10)} .checklist-group h3{ font-size:1.1rem;margin-bottom:var(--s4);padding-bottom:var(--s2); border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s2); } .checklist-item{ display:flex;align-items:flex-start;gap:var(--s3); padding:var(--s3) var(--s4);border-radius:var(--r-md); margin-bottom:var(--s2);transition:background .2s; } .checklist-item:hover{background:var(--surface)} .check-box{ width:22px;height:22px;border-radius:var(--r-sm);flex-shrink:0;margin-top:1px; border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center; color:transparent;font-size:.7rem;transition:all .2s;cursor:pointer; } .checklist-item.checked .check-box{background:var(--green);border-color:var(--green);color:#fff} .check-text{font-size:.92rem;color:var(--text-muted);line-height:1.6} .check-text strong{color:var(--text)} /* ---- Time block (plan wydajności) ---- */ .time-block{ display:grid;grid-template-columns:80px 1fr;gap:var(--s4); padding:var(--s4) 0;border-bottom:1px solid var(--border); } .time-range{ font-family:var(--font-heading);font-weight:700;font-size:.85rem; color:var(--accent);white-space:nowrap;padding-top:2px; } .time-content h4{font-size:.95rem;margin-bottom:.25rem} .time-content p{font-size:.85rem;color:var(--text-muted);line-height:1.55} /* ---- Reading time badge ---- */ .reading-time{ display:inline-flex;align-items:center;gap:.3rem; font-size:.78rem;color:var(--text-dim);margin-top:var(--s2); } /* ---- Responsive fine-tuning ---- */ @media(max-width:480px){ :root{--s20:3rem;--s16:2.5rem;--s12:2rem} .hero h1{font-size:1.8rem} .btn-lg{padding:.8rem 1.4rem;font-size:.95rem} } /* ========================================================= Official Sales Tips inspired funnel direction Scoped to Trudny Feedback landing only. ========================================================= */ .tf-official{ --ost-bg:#111513; --ost-bg-2:#171c19; --ost-panel:#1e2521; --ost-panel-2:#252d28; --ost-paper:#f6f1e7; --ost-paper-2:#e9ddc7; --ost-line:#344039; --ost-text:#f7f2e8; --ost-muted:#c9c0b0; --ost-dim:#90897d; --ost-pink:#d39a36; --ost-pink-2:#f0b64a; --ost-amber:#f0c66b; --ost-green:#6fbd83; --ost-red:#d56a59; --ost-blue:#7d9aad; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --font-heading:'Barlow Condensed','DM Sans',sans-serif; background:var(--ost-bg); color:var(--ost-text); } .tf-official .scroll-progress{background:var(--ost-pink)} .ost-container{width:100%;max-width:1216px;margin:0 auto;padding:0 32px} .ost-nav{ height:60px;display:flex;align-items:center;justify-content:space-between; padding:0 36px;border-bottom:1px solid var(--ost-line); background:rgba(19,13,25,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); position:sticky;top:0;z-index:80; } .ost-logo{display:flex;align-items:center;gap:10px;color:var(--ost-text);font-weight:800} .ost-logo:hover{color:var(--ost-text)} .ost-logo span{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; background:#241c10;border:1px solid #5b4322;color:var(--ost-pink); font-size:.72rem;border-radius:4px;font-weight:900; } .ost-nav-links{display:flex;align-items:center;gap:28px} .ost-nav-links a{color:var(--ost-muted);font-weight:700;font-size:.92rem} .ost-nav-links a:hover{color:var(--ost-text)} .ost-pill{ background:var(--ost-pink);color:#fff!important;border-radius:10px; padding:10px 18px;box-shadow:0 12px 30px rgba(211,154,54,.22); } .ost-hero{ min-height:740px;padding:58px 0 56px; background: radial-gradient(circle at 82% 22%,rgba(211,154,54,.14),transparent 28%), linear-gradient(180deg,#111513 0%,#171c19 100%); } .ost-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:72px;align-items:center} .ost-copy,.ost-product-stage{min-width:0} .ost-eyebrow{ color:var(--ost-pink);text-transform:uppercase;letter-spacing:0; font-size:.86rem;font-weight:900;margin-bottom:18px; } .ost-copy h1{ font-family:var(--font-heading);font-size:7.4rem; line-height:.89;letter-spacing:0;font-weight:800; color:var(--ost-text);margin:0 0 28px;max-width:720px; } .ost-lead{ max-width:660px;color:var(--ost-muted);font-size:1.2rem;line-height:1.55; margin:0 0 28px; } .ost-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px} .ost-assurance{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 16px} .ost-assurance span{ border:1px solid var(--ost-line);background:rgba(255,255,255,.04);color:var(--ost-muted); border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:800; } .ost-btn{ display:inline-flex;align-items:center;justify-content:center;min-height:48px; padding:14px 24px;border-radius:10px;font-weight:900;color:#fff; border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease; max-width:100%;text-align:center; } .ost-btn:hover{transform:translateY(-1px);color:#fff} .ost-btn-primary{background:var(--ost-pink);box-shadow:0 16px 36px rgba(211,154,54,.24)} .ost-btn-primary:hover{background:var(--ost-pink-2)} .ost-btn-secondary{background:transparent;border-color:#536159;color:var(--ost-text)} .ost-btn-secondary:hover{border-color:var(--ost-pink);background:rgba(211,154,54,.08)} .ost-under{display:flex;gap:8px;flex-wrap:wrap;color:var(--ost-muted);font-size:.92rem} .ost-under::before{content:'•';color:var(--ost-pink);font-weight:900} .ost-product-stage{position:relative;min-height:560px} .ost-product-card{ position:absolute;right:0;top:0;width:380px;height:520px;border-radius:16px; background:var(--ost-panel);border:1px solid var(--ost-line); overflow:hidden;box-shadow:0 36px 80px rgba(0,0,0,.42); transform:rotate(1.5deg); } .ost-product-top{ padding:18px 18px 14px;border-bottom:1px solid var(--ost-line); display:grid;gap:4px;background:linear-gradient(180deg,#30213a,#24192c); } .ost-product-top span{ color:var(--ost-pink);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:0; } .ost-product-top strong{font-family:var(--font-heading);font-size:1.55rem;line-height:1;color:var(--ost-text)} .ost-product-card img{ width:100%;height:438px;object-fit:cover;object-position:left top;filter:saturate(.9) contrast(1.03); } .ost-floating-note{ position:absolute;left:0;bottom:28px;width:300px;border-radius:14px; background:#fff;color:#171018;padding:22px;border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.36); } .ost-floating-note span{ display:block;color:var(--ost-pink);text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:0;margin-bottom:8px; } .ost-floating-note strong{display:block;font-family:var(--font-heading);font-size:1.55rem;line-height:1;margin-bottom:8px} .ost-floating-note p{color:#4c4052;font-size:.92rem;line-height:1.5} .ost-manual-stack{ position:absolute;right:0;top:0;width:420px;height:540px; } .ost-file-card{ position:absolute;border-radius:14px;border:1px solid rgba(20,25,22,.16); background:var(--ost-paper);color:#161b18;box-shadow:0 34px 90px rgba(0,0,0,.34); } .ost-file-card span{ display:block;color:#8f551b;text-transform:uppercase;font-size:.72rem;font-weight:900; letter-spacing:0;margin-bottom:10px; } .ost-file-card strong{ display:block;font-family:var(--font-heading);font-size:2rem;line-height:.96;color:#121712;margin-bottom:12px; } .ost-file-card p{color:#424a45;font-size:.94rem;line-height:1.55} .ost-file-main{right:0;top:0;width:360px;min-height:390px;padding:30px;transform:rotate(1.5deg)} .ost-file-main::before{ content:'';position:absolute;left:0;right:0;top:0;height:9px;background:linear-gradient(90deg,var(--ost-pink),var(--ost-green),var(--ost-blue)); border-radius:14px 14px 0 0; } .ost-file-offset{left:0;bottom:78px;width:305px;padding:24px;transform:rotate(-2.2deg);background:#fffaf0} .ost-file-small{right:16px;bottom:10px;width:240px;padding:22px;background:#e8f0ea;transform:rotate(1deg)} .ost-file-small strong{font-size:1.45rem} .ost-file-rows{display:grid;gap:10px;margin-top:24px} .ost-file-rows div{ display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center; border:1px solid #d8cdb9;background:#fffaf0;border-radius:10px;padding:12px; } .ost-file-rows b{font-family:var(--font-heading);font-size:1.5rem;color:#8f551b;line-height:1} .ost-file-rows small{color:#38413b;font-weight:700;line-height:1.3} .ost-receipt{ position:absolute;left:0;bottom:26px;width:310px;border-radius:14px; background:#111513;color:var(--ost-text);padding:22px;border:1px solid var(--ost-line); box-shadow:0 30px 70px rgba(0,0,0,.38); } .ost-receipt span{ display:block;color:var(--ost-pink);text-transform:uppercase;font-size:.72rem;font-weight:900;margin-bottom:8px; } .ost-receipt strong{display:block;font-family:var(--font-heading);font-size:1.65rem;line-height:1;margin-bottom:8px} .ost-receipt p{color:var(--ost-muted);font-size:.92rem;line-height:1.5} .ost-proof{border-top:1px solid var(--ost-line);border-bottom:1px solid var(--ost-line);background:#141916} .ost-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:30px;padding-bottom:30px} .ost-proof-grid div{display:grid;gap:2px} .ost-proof-grid strong{font-family:var(--font-heading);font-size:2.4rem;line-height:1;color:var(--ost-pink)} .ost-proof-grid span{color:var(--ost-muted);font-size:.92rem} .ost-section{padding:86px 0;background:var(--ost-bg)} .ost-tight{padding:62px 0} .ost-dark-band{background:#0d110f;border-top:1px solid var(--ost-line);border-bottom:1px solid var(--ost-line)} .ost-section-title{text-align:center;max-width:760px;margin:0 auto 36px} .ost-section-title.left{text-align:left;margin:0} .ost-section-title h2,.ost-inside-grid h2,.ost-author h2,.ost-final h2{ font-family:var(--font-heading);font-weight:800;font-size:4.2rem; line-height:.98;margin:0;color:var(--ost-text); } .ost-section-title p+h2{margin-top:0} .ost-offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:960px;margin:0 auto} .ost-offer-card{ position:relative;background:var(--ost-panel);border:2px solid var(--ost-line); border-radius:16px;padding:34px;min-height:430px;display:flex;flex-direction:column; } .ost-offer-primary{border-color:var(--ost-pink)} .ost-badge{ display:inline-flex;align-self:flex-start;margin:-48px 0 22px; background:var(--ost-pink);color:#fff;border-radius:999px;padding:8px 16px; font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:0; } .ost-offer-card h3{ font-family:var(--font-heading);font-size:2.25rem;line-height:1;margin:0 0 14px;color:var(--ost-text); } .ost-offer-card p{color:var(--ost-muted);line-height:1.6;margin-bottom:18px} .ost-offer-card ul{display:grid;gap:10px;margin:0 0 24px} .ost-offer-card li{color:var(--ost-muted);font-size:.95rem;display:flex;gap:10px} .ost-offer-card li::before{content:'→';color:var(--ost-pink);font-weight:900} .ost-offer-card .ost-btn{margin-top:auto} .ost-soft-note{ border-top:1px solid var(--ost-line);padding-top:16px;margin:8px 0 0!important; color:var(--ost-dim)!important;font-size:.9rem;overflow-wrap:anywhere; } .ost-section-lead{ color:var(--ost-muted);font-size:1.05rem;line-height:1.65;max-width:520px;margin-top:22px; } .ost-problem-grid{ display:grid;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);gap:64px;align-items:start; } .ost-problem-stack{display:grid;gap:16px;min-width:0} .ost-problem-list{display:grid;gap:16px;min-width:0} .ost-problem-card{ display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start; padding:24px 26px;background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:12px; } .ost-problem-card>span{ color:var(--ost-pink);font-family:var(--font-heading);font-size:2.15rem;font-weight:900;line-height:1; } .ost-problem-body{min-width:0} .ost-problem-card strong{ display:block;font-size:1.08rem;line-height:1.35;color:var(--ost-text);margin-bottom:8px; } .ost-problem-card p{ color:var(--ost-muted);line-height:1.6;max-width:640px;overflow-wrap:normal; } .ost-field-note{ display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center; padding:18px 22px;background:#121814;border:1px dashed rgba(211,154,54,.48);border-radius:12px; } .ost-field-note span{ color:var(--ost-pink);text-transform:uppercase;font-size:.72rem;font-weight:900;letter-spacing:0; } .ost-field-note strong{color:var(--ost-text);font-size:.98rem;line-height:1.45} .ost-decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ost-decision-card{ background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:16px; padding:28px;min-height:286px;display:flex;flex-direction:column; } .ost-decision-card span{ color:var(--ost-pink);text-transform:uppercase;font-size:.76rem;font-weight:900; letter-spacing:0;margin-bottom:16px; } .ost-decision-card h3{ font-family:var(--font-heading);font-size:2rem;line-height:1;margin:0 0 14px;color:var(--ost-text); } .ost-decision-card p{color:var(--ost-muted);line-height:1.6;margin-top:auto} .ost-decision-accent{border-color:var(--ost-pink);box-shadow:0 22px 60px rgba(0,0,0,.22)} .ost-inside-grid{display:grid;grid-template-columns:430px minmax(0,1fr);gap:64px;align-items:center} .ost-product-preview{ border:1px solid var(--ost-line);border-radius:16px;background:var(--ost-panel); padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.32);transform:rotate(-1deg); } .ost-product-preview img{width:100%;height:560px;object-fit:cover;object-position:left top;border-radius:10px} .ost-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px} .ost-checks div{background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:14px;padding:20px} .ost-checks strong{display:block;color:var(--ost-text);margin-bottom:8px} .ost-checks span{color:var(--ost-muted);font-size:.92rem;line-height:1.5} .ost-example{background:#151a17} .ost-script{display:grid;grid-template-columns:.65fr 1.35fr;gap:18px;max-width:980px;margin:0 auto} .ost-script div{border-radius:16px;padding:28px;border:1px solid var(--ost-line)} .ost-script span{display:block;text-transform:uppercase;letter-spacing:0;font-size:.76rem;font-weight:900;margin-bottom:14px} .ost-script p{font-size:1.05rem;line-height:1.65} .ost-script .bad{background:rgba(255,118,107,.08);color:var(--ost-muted)} .ost-script .bad span{color:var(--ost-red)} .ost-script .good{background:rgba(105,215,155,.08);color:var(--ost-text);border-color:rgba(105,215,155,.24)} .ost-script .good span{color:var(--ost-green)} .ost-author{display:grid;grid-template-columns:180px 1fr;gap:40px;align-items:center;max-width:920px} .ost-author-mark{ width:180px;height:180px;border-radius:999px;background:var(--ost-pink); display:flex;align-items:center;justify-content:center;font-family:var(--font-heading); font-size:4.2rem;font-weight:900;color:#fff;box-shadow:0 26px 70px rgba(211,154,54,.22); } .ost-author p{color:var(--ost-muted);font-size:1.05rem;line-height:1.65;margin-top:18px} .ost-disclaimer{font-size:.9rem!important;color:var(--ost-dim)!important} .ost-final{background:#0d110f} .ost-final-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:center} .ost-final p{color:var(--ost-muted);font-size:1.1rem;line-height:1.6;max-width:640px;margin-top:18px} .ost-price{ background:var(--ost-panel);border:2px solid var(--ost-pink);border-radius:16px;padding:28px; box-shadow:0 26px 70px rgba(0,0,0,.3);min-width:0;max-width:100%; } .ost-price>span{display:block;font-family:var(--font-heading);font-size:4rem;color:var(--ost-pink);font-weight:900;line-height:1;margin-bottom:18px} .ost-price ul{display:grid;gap:10px;margin-bottom:22px} .ost-price li{color:var(--ost-muted);display:flex;gap:10px} .ost-price li::before{content:'✓';color:var(--ost-green);font-weight:900} .ost-price .ost-btn{width:100%} .ost-alt-link{ display:block;text-align:center;margin-top:14px;color:var(--ost-muted);font-weight:800;font-size:.92rem; } .ost-alt-link:hover{color:var(--ost-text)} .ost-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ost-flow-grid div{ background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:16px; padding:24px;min-height:230px; } .ost-flow-grid span{ display:block;color:var(--ost-pink);font-family:var(--font-heading);font-size:2.1rem; font-weight:900;line-height:1;margin-bottom:18px; } .ost-flow-grid strong{display:block;color:var(--ost-text);font-size:1.02rem;margin-bottom:10px} .ost-flow-grid p{color:var(--ost-muted);line-height:1.58;font-size:.94rem} .ost-comparison-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start} .ost-compare-table{display:grid;gap:14px} .ost-compare-table div{ background:var(--ost-panel);border:1px solid var(--ost-line);border-radius:16px;padding:26px; } .ost-compare-table div:last-child{border-color:var(--ost-pink)} .ost-compare-table span{ display:block;color:var(--ost-pink);text-transform:uppercase;font-size:.76rem;font-weight:900; letter-spacing:0;margin-bottom:12px; } .ost-compare-table strong{ display:block;font-family:var(--font-heading);font-size:2rem;line-height:1;color:var(--ost-text);margin-bottom:10px; } .ost-compare-table p{color:var(--ost-muted);line-height:1.6} .ost-step-hero{min-height:620px} .ost-step-grid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:62px;align-items:center} .ost-step-grid h1{ font-family:var(--font-heading);font-size:6.4rem; line-height:.92;color:var(--ost-text);margin:0 0 24px; } .ost-step-panel{ background:var(--ost-panel);border:2px solid var(--ost-pink);border-radius:18px; padding:30px;box-shadow:0 32px 80px rgba(0,0,0,.36); } .ost-step-panel>span{ display:block;color:var(--ost-pink);text-transform:uppercase;letter-spacing:0; font-size:.76rem;font-weight:900;margin-bottom:14px; } .ost-step-panel>strong{ display:block;font-family:var(--font-heading);font-size:2.4rem;line-height:1; color:var(--ost-text);margin-bottom:24px; } .ost-mini-timeline{display:grid;gap:12px} .ost-mini-timeline div{background:var(--ost-bg-2);border:1px solid var(--ost-line);border-radius:12px;padding:16px} .ost-mini-timeline b{display:block;color:var(--ost-text);margin-bottom:4px} .ost-mini-timeline p,.ost-script-panel p{color:var(--ost-muted);line-height:1.55} .ost-script-panel p{font-size:1.08rem} .ost-footer{ border-top:1px solid var(--ost-line);background:#0d110f;color:var(--ost-muted); padding:28px 0;font-size:.88rem; } .ost-footer-grid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .ost-footer strong{color:var(--ost-text);font-weight:900} .ost-footer-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .ost-footer a{color:var(--ost-muted);font-weight:800} .ost-footer a:hover{color:var(--ost-text)} .ost-mobile-sticky{display:none} @media(max-width:1180px){ .ost-copy h1{font-size:6.4rem} .ost-section-title h2,.ost-inside-grid h2,.ost-author h2,.ost-final h2{font-size:3.7rem} .ost-step-grid h1{font-size:5.4rem} } @media(max-width:980px){ .ost-nav{padding:0 20px} .ost-nav-links a:not(.ost-pill){display:none} .ost-container{padding:0 20px;max-width:100%;overflow:hidden} .ost-hero{padding:18px 0 60px;overflow:hidden} .ost-hero-grid{grid-template-columns:minmax(0,1fr);gap:34px;max-width:100%;overflow:hidden} .ost-copy{order:2;width:100%;max-width:100%;overflow:hidden} .ost-product-stage{order:1;min-height:220px} .ost-product-card{position:relative;width:min(280px,78vw);height:250px;margin:0 auto;right:auto} .ost-product-card img{height:175px} .ost-floating-note{display:none} .ost-manual-stack{position:relative;width:min(260px,78vw);height:220px;margin:0 auto;right:auto;top:auto} .ost-file-main{left:0;right:auto;width:260px;max-width:100%;min-height:206px;padding:20px;transform:rotate(1deg)} .ost-file-main strong{font-size:1.55rem} .ost-file-main p{display:none} .ost-file-rows{margin-top:16px;gap:7px} .ost-file-rows div{grid-template-columns:42px 1fr;padding:8px} .ost-file-rows b{font-size:1.1rem} .ost-file-rows small{font-size:.72rem} .ost-file-offset{display:none} .ost-file-small{display:none} .ost-file-small strong{font-size:1.05rem} .ost-receipt{display:none} .ost-copy h1{font-size:4.2rem} .ost-proof-grid,.ost-offer-grid,.ost-problem-grid,.ost-inside-grid,.ost-script,.ost-author,.ost-final-grid,.ost-step-grid,.ost-decision-grid,.ost-flow-grid,.ost-comparison-grid{grid-template-columns:1fr} .ost-step-grid h1{font-size:4rem} .ost-section-title.left{text-align:center;margin:0 auto 28px} .ost-section-title.left .ost-section-lead{margin-left:auto;margin-right:auto} .ost-offer-card{min-height:auto} .ost-inside-grid{gap:28px} .ost-product-preview{display:none} .ost-checks{grid-template-columns:1fr} .ost-author{justify-items:center;text-align:center} .ost-footer-grid{align-items:flex-start;flex-direction:column} } @media(max-width:720px){ .tf-official{padding-bottom:76px} .ost-mobile-sticky{ position:fixed;left:12px;right:12px;bottom:12px;z-index:110; display:flex;align-items:center;justify-content:space-between;gap:14px; background:rgba(16,12,19,.94);border:1px solid var(--ost-line);border-radius:14px; padding:10px 10px 10px 16px;box-shadow:0 18px 48px rgba(0,0,0,.42); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); opacity:0;transform:translateY(18px);pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .ost-mobile-sticky.is-visible{opacity:1;transform:translateY(0);pointer-events:auto} .ost-mobile-sticky span{color:var(--ost-text);font-weight:900;font-size:.9rem} .ost-mobile-sticky a{ background:var(--ost-pink);color:#fff;border-radius:10px;padding:11px 16px;font-weight:900; } } @media(max-width:520px){ .ost-logo{font-size:.95rem} .ost-pill{padding:9px 13px} .ost-copy{max-width:320px} .ost-copy h1{font-size:2.05rem;line-height:1.06;max-width:320px;overflow-wrap:break-word;word-break:normal} .ost-step-grid h1{font-size:2.35rem;line-height:1.08;max-width:320px;overflow-wrap:break-word;word-break:normal} .ost-lead{font-size:.96rem;max-width:320px} .ost-actions{width:100%;max-width:320px} .ost-assurance,.ost-under{max-width:320px} .ost-under{display:block} .ost-under::before{content:none} .ost-price{width:100%;padding:24px} .ost-step-grid .ost-price{max-width:320px} .ost-actions .ost-btn{width:100%;white-space:normal} .ost-copy .ost-btn-secondary{display:none} .ost-proof-grid{grid-template-columns:1fr;gap:12px} .ost-proof-grid strong{font-size:1.55rem} .ost-proof-grid span{font-size:.78rem;line-height:1.25} .ost-section{padding:58px 0} .ost-section-title h2,.ost-inside-grid h2,.ost-author h2,.ost-final h2{font-size:2.7rem} .ost-offer-card{padding:26px} .ost-badge{margin:-40px 0 20px} .ost-problem-card{grid-template-columns:1fr;gap:14px;padding:20px} .ost-problem-card>span{font-size:1.75rem} .ost-field-note{grid-template-columns:1fr;gap:8px;padding:18px 20px} .ost-author-mark{width:132px;height:132px;font-size:3.2rem} }