/* crm.ewwesolutions.work — shared stylesheet for niche long-tail landing pages. Neon-glass brand, consistent with the root microsite (index.html). Per-page accent hue set via inline `--ac` on . */ :root{ --bg:#0a0814; --ink:#f4f1fb; --vio:#8b6cff; --cy:#22d3ee; --mag:#ff4fd8; --lime:#9bf043; --amber:#ffb020; --ok:#46e3a0; --muted:#a89fc4; --line:rgba(255,255,255,.11); --ac:#8b6cff; /* default accent, overridden per niche */ } *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{background:var(--bg); color:var(--ink); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; line-height:1.5} .wrap{max-width:1080px; margin:0 auto; padding:0 28px; position:relative; z-index:2} a{color:inherit} /* background */ .aurora{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none} .aurora i{position:absolute; border-radius:50%; filter:blur(86px); opacity:.42; mix-blend-mode:screen} .a1{width:46vw;height:46vw;left:-12%;top:-10%;background:radial-gradient(circle,var(--ac),transparent 62%);animation:fl1 26s ease-in-out infinite alternate} .a2{width:38vw;height:38vw;right:-8%;top:-4%;background:radial-gradient(circle,var(--cy),transparent 62%);animation:fl2 31s ease-in-out infinite alternate} .a3{width:40vw;height:40vw;right:6%;top:60%;background:radial-gradient(circle,var(--mag),transparent 62%);animation:fl3 29s ease-in-out infinite alternate; opacity:.26} @keyframes fl1{to{transform:translate(7vw,5vh)}} @keyframes fl2{to{transform:translate(-6vw,8vh)}} @keyframes fl3{to{transform:translate(5vw,-6vh)}} .grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(120% 55% at 50% 0%,#000 26%,transparent 72%)} /* nav */ nav{position:sticky; top:0; z-index:50; background:rgba(10,8,20,.6); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:14px} .brand{font-family:Anton; font-size:21px; letter-spacing:.02em; color:#fff; text-decoration:none; white-space:nowrap} .brand b{background:linear-gradient(120deg,var(--ac),var(--mag)); -webkit-background-clip:text; background-clip:text; color:transparent} .nav-links{display:flex; gap:22px; align-items:center} .nav-links a{color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; opacity:.78} .nav-links a:hover{opacity:1} .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; text-decoration:none; padding:11px 19px; border-radius:9px; cursor:pointer; border:0; font-family:inherit; transition:transform .15s, box-shadow .25s, background .2s} .btn-pri{color:#0a0814; background:linear-gradient(110deg,var(--lime),var(--cy),var(--ac)); background-size:160% 100%; box-shadow:0 6px 26px rgba(124,108,255,.36); animation:shift 6s ease infinite} @keyframes shift{50%{background-position:100% 0}} .btn-pri:hover{transform:translateY(-1px); box-shadow:0 10px 34px rgba(255,79,216,.45)} .btn-ghost{color:#fff; border:1px solid rgba(255,255,255,.24); background:transparent} .btn-ghost:hover{border-color:var(--ac); background:color-mix(in srgb,var(--ac) 12%,transparent)} /* hero */ .hero{padding:74px 0 28px} .eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#d9d2f0; border:1px solid var(--line); padding:7px 13px; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 16%,transparent),rgba(34,211,238,.08))} .eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(70,227,160,.16)} h1.mega{font-family:Anton; font-weight:400; line-height:.92; font-size:clamp(40px,6.4vw,82px); text-transform:uppercase; color:#fff; margin-top:22px; max-width:920px} h1.mega .grad{background:linear-gradient(105deg,var(--lime),var(--cy),var(--mag)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shift 7s ease infinite} .lede{max-width:640px; margin-top:22px; font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:#d3cdec} .cta-row{display:flex; gap:13px; margin-top:28px; flex-wrap:wrap; align-items:center} .reassure{display:flex; gap:8px; align-items:center; margin-top:22px; color:var(--muted); font-size:13px; flex-wrap:wrap} .reassure b{color:var(--ok); font-weight:600} /* section heads */ .sec-head{padding:60px 0 4px} .sec-head .lbl{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ac)} .sec-head h2{font-family:Anton; font-weight:400; text-transform:uppercase; font-size:clamp(28px,4.6vw,50px); line-height:.98; color:#fff; margin-top:10px} .sec-head p{color:var(--muted); max-width:600px; margin-top:12px; font-size:16px} /* cards grid (pains + features) */ .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px} @media(max-width:860px){.cards{grid-template-columns:1fr 1fr}} @media(max-width:560px){.cards{grid-template-columns:1fr}} .card{position:relative; border:1px solid var(--line); border-radius:14px; padding:22px 21px; background:rgba(20,17,36,.6); backdrop-filter:blur(12px); overflow:hidden; transition:border-color .2s, transform .15s, box-shadow .25s} .card::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--ac),transparent); opacity:.85} .card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--ac) 45%,transparent); box-shadow:0 18px 40px rgba(0,0,0,.42), 0 0 30px color-mix(in srgb,var(--ac) 16%,transparent)} .card .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:19px; margin-bottom:14px; background:color-mix(in srgb,var(--ac) 14%,transparent); border:1px solid color-mix(in srgb,var(--ac) 35%,transparent)} .card h3{font-size:16.5px; font-weight:700; color:#fff; margin-bottom:8px; line-height:1.3} .card p{font-size:13.8px; line-height:1.62; color:#c4bce0} .card .tag{display:inline-block; margin-top:12px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.05em; color:var(--ac); border:1px solid color-mix(in srgb,var(--ac) 40%,transparent); background:color-mix(in srgb,var(--ac) 9%,transparent); padding:4px 9px; border-radius:6px} /* demo band */ .demoband{margin-top:40px; border:1px solid color-mix(in srgb,var(--ac) 30%,transparent); border-radius:16px; padding:34px 32px; text-align:center; background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 14%,transparent),rgba(34,211,238,.05))} .demoband .db-eye{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cy)} .demoband h2{font-family:Anton; font-weight:400; text-transform:uppercase; font-size:clamp(26px,4vw,42px); color:#fff; margin:10px 0 8px; line-height:1} .demoband p{color:#d3cdec; max-width:560px; margin:0 auto 22px; font-size:15.5px} .demoband .note{margin-top:14px; font-family:'Space Mono',monospace; font-size:11px; color:var(--muted)} /* proof */ .proof{margin-top:44px; display:flex; gap:30px; align-items:center; flex-wrap:wrap; border:1px solid var(--line); border-left:2px solid var(--cy); border-radius:14px; padding:26px 28px; background:linear-gradient(120deg,rgba(34,211,238,.08),color-mix(in srgb,var(--ac) 6%,transparent))} .proof .pi{font-size:30px; flex:0 0 auto} .proof p{color:#dcd6ef; font-size:15.5px; line-height:1.6; flex:1; min-width:260px; margin:0} .proof p b{color:var(--cy)} /* model */ .model{margin-top:44px; border:1px solid var(--line); border-radius:16px; padding:30px 30px; background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 12%,transparent),rgba(34,211,238,.05)); display:flex; gap:28px; align-items:center; flex-wrap:wrap; justify-content:space-between} .model h3{font-family:Anton;font-weight:400;text-transform:uppercase;font-size:24px;color:#fff} .model p{color:#cdc6e6;font-size:14.5px;margin-top:8px;max-width:540px;line-height:1.55} .model .price{display:flex;gap:24px} .model .pc{text-align:center} .model .pn{font-family:Anton;font-size:28px;background:linear-gradient(120deg,var(--lime),var(--cy));-webkit-background-clip:text;background-clip:text;color:transparent} .model .pl{font-size:11px;color:var(--muted);margin-top:4px} /* faq */ .faq{margin-top:18px; display:flex; flex-direction:column; gap:10px} .faq details{border:1px solid var(--line); border-radius:12px; background:rgba(20,17,36,.55); overflow:hidden} .faq summary{cursor:pointer; padding:16px 18px; font-weight:600; font-size:15.5px; color:#fff; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; color:var(--ac); font-size:22px; line-height:1; flex:0 0 auto} .faq details[open] summary::after{content:"–"} .faq .ans{padding:0 18px 16px; color:#c4bce0; font-size:14.5px; line-height:1.65} /* lead */ .closer{margin:54px 0 0; border:1px solid var(--line); border-radius:18px; padding:42px 34px; overflow:hidden; background:linear-gradient(120deg,color-mix(in srgb,var(--ac) 16%,transparent),rgba(34,211,238,.06),rgba(255,79,216,.08))} .closer .cl-head{text-align:center; margin-bottom:24px} .closer h2{font-family:Anton; font-weight:400; text-transform:uppercase; font-size:clamp(28px,4.6vw,48px); line-height:.98; color:#fff} .closer .cl-sub{color:#d3cdec; margin:12px auto 0; max-width:520px; font-size:15.5px} .lead-form{display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto} .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px} @media(max-width:460px){.row2{grid-template-columns:1fr}} .fld{display:flex; flex-direction:column; gap:5px} .fld label{font-size:11px; font-family:'Space Mono',monospace; letter-spacing:.06em; color:var(--muted); text-transform:uppercase} .fld input,.fld textarea{background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px; padding:11px 12px; color:#fff; font-family:inherit; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s} .fld input:focus,.fld textarea:focus{border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)} .fld textarea{resize:vertical} .m-note{font-size:13.5px; margin:2px 0 0; text-align:center} .m-or{text-align:center; color:var(--muted); font-size:12px; margin:20px auto 12px; max-width:560px; position:relative} .m-or::before,.m-or::after{content:""; position:absolute; top:50%; width:30%; height:1px; background:var(--line)} .m-or::before{left:0} .m-or::after{right:0} .m-phones{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:560px; margin:0 auto} .m-phones a{flex:1; min-width:185px; text-align:center; text-decoration:none; color:#fff; border:1px solid var(--line); border-radius:9px; padding:12px; font-weight:600; font-size:14px; transition:border-color .15s, background .15s} .m-phones a:hover{border-color:var(--ok); background:rgba(70,227,160,.08)} .ph-ic{width:15px; height:15px; fill:#46e3a0; vertical-align:-2px; margin-right:7px} .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none} /* other-niches strip */ .others{margin-top:48px} .others .ot-h{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:16px} .ot-grid{display:flex; gap:10px; flex-wrap:wrap; justify-content:center} .ot-grid a{text-decoration:none; font-size:13.5px; color:#dcd6ef; border:1px solid var(--line); padding:9px 15px; border-radius:9px; background:rgba(255,255,255,.03); transition:border-color .15s, background .15s, transform .12s} .ot-grid a:hover{border-color:color-mix(in srgb,var(--ac) 45%,transparent); background:color-mix(in srgb,var(--ac) 8%,transparent); transform:translateY(-1px)} /* footer */ .site-foot{border-top:1px solid var(--line); margin-top:54px; padding:44px 0 38px; background:rgba(255,255,255,.015); position:relative; z-index:2} .foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px} @media(max-width:760px){.foot-grid{grid-template-columns:1fr; gap:24px}} .foot-note{color:var(--muted); font-size:14px; line-height:1.6; margin-top:12px; max-width:380px} .foot-note a, .foot-col a{color:#cdc6e6; text-decoration:none} .foot-note a:hover, .foot-col a:hover{color:var(--cy)} .foot-h{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px} .foot-col{display:flex; flex-direction:column; gap:9px; font-size:14px} .foot-sub{color:var(--muted); font-size:12px; margin-top:6px} .foot-bar{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px} /* scroll reveal */ .rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease} .rv.in{opacity:1; transform:none} @media(max-width:600px){ nav .wrap{padding:0 16px} .nav-links{gap:10px} .nav-links a:not(.btn){display:none} .nav-links .btn{padding:9px 14px; font-size:13px} .hero{padding:54px 0 20px} }