/* Shared landing-page CSS for all Khaled Media tool landings */ :root{ --bg:#040406;--surface:#0f0f17;--surface2:#15151f;--surface3:#1a1a26; --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14); --text:#fff;--muted:#8a8a99;--muted2:#666;--gold:#FFD700;--gold-dim:#B8860B; --green:#10b981;--green2:#34d399;--cyan:#06b6d4;--cyan2:#22d3ee; --purple:#8b5cf6;--purple2:#a78bfa;--purple3:#c4b5fd;--pink:#ec4899;--pink2:#f472b6; --amber:#f59e0b;--red:#ef4444; /* Per-tool accent (override in via inline style or override class) */ --acc1:#8b5cf6; --acc2:#ec4899; --acc3:#f59e0b; --grad-main:linear-gradient(135deg,var(--acc1) 0%,var(--acc2) 50%,var(--acc3) 100%); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5} .mono{font-family:'JetBrains Mono',monospace} a{color:inherit;text-decoration:none} ::selection{background:rgba(139,92,246,.4);color:#fff} body::before{content:'';position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 20% 0%,rgba(139,92,246,.07),transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(236,72,153,.05),transparent 50%),radial-gradient(ellipse at 50% 100%,rgba(6,182,212,.04),transparent 60%)} body::after{content:'';position:fixed;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:24px 24px;pointer-events:none} nav.nav{position:sticky;top:0;z-index:50;background:rgba(4,4,6,.82);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between} .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px} .brand .k{background:var(--gold);color:#000;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900} .brand .g{color:var(--gold)} .nav-links{display:flex;gap:6px;align-items:center} .nav-links a{font-size:12px;color:var(--muted);font-weight:600;padding:8px 12px;border-radius:8px;transition:all .15s} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.04)} .nav-cta{background:var(--grad-main);color:#fff!important;padding:9px 18px!important;border-radius:10px;font-weight:800!important;box-shadow:0 6px 20px rgba(139,92,246,.3)} .nav-cta:hover{transform:translateY(-1px)} .hero{padding:80px 28px 60px;max-width:1280px;margin:0 auto;text-align:center;position:relative} .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.32);border-radius:24px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:24px;color:var(--acc1)} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--acc1);box-shadow:0 0 14px var(--acc1);animation:livepulse 1.8s infinite} @keyframes livepulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}} .hero h1{font-size:clamp(48px,7.5vw,96px);line-height:.94;letter-spacing:-3.6px;font-weight:900;margin-bottom:24px} .hero h1 .grad{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero .lead{color:var(--muted);font-size:19px;max-width:680px;margin:0 auto 36px;line-height:1.55;font-weight:500} .hero .lead strong{color:#fff;font-weight:700} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:42px} .cta-primary{background:var(--grad-main);color:#fff;border:none;padding:16px 32px;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .25s;box-shadow:0 12px 40px rgba(139,92,246,.32);text-decoration:none;letter-spacing:.3px} .cta-primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(139,92,246,.5)} .cta-secondary{background:rgba(255,255,255,.04);border:1px solid var(--border2);color:#fff;padding:16px 30px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s;text-decoration:none} .cta-secondary:hover{background:rgba(255,255,255,.08);border-color:#fff} .trust-row{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:12px;font-weight:600} .trust-row .item{display:inline-flex;align-items:center;gap:8px} .trust-row .item i{color:var(--green2)} .trust-row .sep{color:#333} .stats-strip{max-width:1280px;margin:0 auto;padding:0 28px 60px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:linear-gradient(135deg,rgba(139,92,246,.04),rgba(236,72,153,.04));border:1px solid var(--border);border-radius:18px;padding:22px} @media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{text-align:center} .stat .n{font-size:32px;font-weight:900;letter-spacing:-1.5px;background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .stat .l{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-top:4px} section.sec{max-width:1280px;margin:0 auto;padding:80px 28px} .sec-h{text-align:center;margin-bottom:56px} .sec-eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--acc1);margin-bottom:14px} .sec-h h2{font-size:clamp(34px,4.5vw,52px);line-height:1.05;letter-spacing:-1.6px;font-weight:900;margin-bottom:14px} .sec-h h2 .grad{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sec-h p{color:var(--muted);font-size:16px;max-width:640px;margin:0 auto;line-height:1.6} .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:880px){.problem-grid{grid-template-columns:1fr}} .pcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;position:relative;overflow:hidden;transition:all .25s} .pcard:hover{border-color:rgba(239,68,68,.35);transform:translateY(-3px)} .pcard::before{content:'';position:absolute;top:0;left:0;width:60px;height:60px;background:radial-gradient(circle,rgba(239,68,68,.18),transparent);border-radius:50%} .pcard .pic{width:48px;height:48px;border-radius:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);display:flex;align-items:center;justify-content:center;color:#fca5a5;font-size:20px;margin-bottom:18px} .pcard h3{font-size:18px;font-weight:800;margin-bottom:10px} .pcard p{color:var(--muted);font-size:13.5px;line-height:1.65} .pcard .quote{font-size:12px;font-style:italic;color:#999;margin-top:14px;padding:10px 12px;background:rgba(0,0,0,.3);border-left:3px solid rgba(239,68,68,.4);border-radius:0 8px 8px 0} .solution-bg{background:linear-gradient(180deg,transparent,rgba(139,92,246,.04),transparent);padding-top:0} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px} @media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;position:relative;transition:all .25s} .step:hover{border-color:var(--border2)} .step .num{position:absolute;top:-12px;left:18px;width:30px;height:30px;border-radius:50%;background:var(--grad-main);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;font-family:'JetBrains Mono',monospace} .step h4{font-size:15px;font-weight:800;margin-top:18px;margin-bottom:8px} .step p{font-size:12.5px;color:var(--muted);line-height:1.55} .step .icon{font-size:22px;color:var(--acc1);margin-bottom:6px} .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:980px){.features-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.features-grid{grid-template-columns:1fr}} .fcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;transition:all .25s;position:relative;overflow:hidden} .fcard:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:0 16px 50px rgba(0,0,0,.4)} .fcard .fic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(236,72,153,.12));border:1px solid rgba(139,92,246,.25);color:var(--acc1)} .fcard h3{font-size:17px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px} .fcard p{font-size:13px;color:var(--muted);line-height:1.65} .fcard .ftags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px} .fcard .ftags span{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:3px 8px;border-radius:5px;font-size:10px;font-weight:600;color:#aaa;font-family:'JetBrains Mono',monospace} .compare-wrap{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px;overflow-x:auto} .compare-table{width:100%;border-collapse:collapse;min-width:680px} .compare-table th,.compare-table td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--border)} .compare-table th{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)} .compare-table th.us{color:var(--acc1);position:relative} .compare-table th.us::before{content:'\2B50';position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-size:14px} .compare-table td:first-child,.compare-table th:first-child{text-align:left;font-weight:700;color:#fff} .compare-table td{font-size:13px;color:var(--muted)} .compare-table td.us{background:rgba(139,92,246,.04);color:#fff;font-weight:700} .compare-table td .check{color:var(--green2);font-size:18px} .compare-table td .x{color:var(--red);font-size:18px} .compare-table td .partial{color:var(--amber);font-size:13px} .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:980px){.pricing-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pricing-grid{grid-template-columns:1fr}} .tier{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:all .3s;position:relative;overflow:hidden} .tier:hover{transform:translateY(-3px);border-color:var(--border2)} .tier.featured{border-color:var(--acc1);background:linear-gradient(135deg,rgba(139,92,246,.06),var(--surface));box-shadow:0 16px 50px rgba(139,92,246,.18)} .tier.featured::before{content:'MOST POPULAR';position:absolute;top:14px;right:14px;background:var(--grad-main);color:#fff;font-size:9px;font-weight:900;letter-spacing:1.2px;padding:5px 10px;border-radius:5px} .tier .pname{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .tier.featured .pname{color:var(--acc1)} .tier .ptext{display:flex;align-items:baseline;gap:4px;margin-bottom:6px} .tier .pprice{font-size:42px;font-weight:900;letter-spacing:-1.8px} .tier.featured .pprice{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .tier .pper{font-size:13px;color:var(--muted);font-weight:600} .tier .psub{font-size:12px;color:var(--muted);margin-bottom:20px;font-weight:500} .tier .pcta{margin-top:20px;width:100%;padding:13px;border-radius:10px;font-weight:800;font-size:13px;border:none;cursor:pointer;transition:all .2s;letter-spacing:.3px;text-decoration:none;text-align:center;display:block} .tier .pcta.primary{background:var(--grad-main);color:#fff;box-shadow:0 6px 20px rgba(139,92,246,.25)} .tier .pcta.primary:hover{transform:translateY(-1px)} .tier .pcta.ghost{background:rgba(255,255,255,.04);border:1px solid var(--border);color:#fff} .tier .pcta.ghost:hover{border-color:#fff} .tier ul{list-style:none;margin-top:20px;flex:1} .tier ul li{font-size:13px;color:#bbb;display:flex;align-items:flex-start;gap:8px;padding:6px 0;line-height:1.5} .tier ul li i{color:var(--green2);margin-top:3px;flex-shrink:0;font-size:11px} .tier ul li.dim{color:#555} .tier ul li.dim i{color:#333} .faq-list{max-width:780px;margin:0 auto} .faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:all .2s} .faq summary{padding:18px 22px;font-weight:700;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;color:#fff} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-size:24px;color:var(--acc1);transition:transform .25s;line-height:1} .faq[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 22px 20px;color:var(--muted);font-size:14px;line-height:1.7} .faq:hover{border-color:var(--border2)} .final-cta{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(236,72,153,.08),rgba(245,158,11,.05));border:1px solid rgba(139,92,246,.35);border-radius:24px;padding:60px 40px;text-align:center;margin-top:40px} .final-cta h2{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-1.4px;font-weight:900;margin-bottom:16px} .final-cta h2 .grad{background:var(--grad-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .final-cta p{color:var(--muted);font-size:16px;max-width:540px;margin:0 auto 28px;line-height:1.6} footer{margin-top:40px;padding:32px 28px;border-top:1px solid var(--border);text-align:center;color:#555;font-size:11px;line-height:1.8} footer .ftools{display:inline-flex;gap:16px;margin:8px 0;flex-wrap:wrap;justify-content:center} footer .ftools a{color:#888;font-weight:600} footer .ftools a:hover{color:#fff}