/*
Theme Name: CueFlo
Theme URI: https://cueflo.co.uk
Author: CueFlo
Description: CueFlo marketing site — homepage release with CueFlo Cloud and CueFlo Local positioning.
Version: 1.2.0
Text Domain: cueflo
*/
:root{--bg:#050914;--bg2:#080d18;--panel:#0c1220;--panel2:#101827;--text:#f7f9ff;--muted:#a9b2c5;--muted2:#7f8ba3;--line:#202b3f;--purple:#b04cff;--violet:#7655ff;--cyan:#25c8f2;--pink:#f8469d;--green:#58dfaa;--red:#ff6f86;--max:1220px;--radius:24px;--shadow:0 28px 80px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:radial-gradient(circle at 72% -10%,rgba(95,50,160,.2),transparent 30%),linear-gradient(180deg,#050914 0,#070b15 55%,#050914 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.58;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button,input{font:inherit}.wrap{width:min(var(--max),calc(100% - 44px));margin-inline:auto}.section-pad{padding:92px 0}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.gradient-text{background:linear-gradient(90deg,var(--purple),#8a60ff 48%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.eyebrow{display:inline-block;color:#c596ff;font-size:.74rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.lead{color:#c0c7d5;font-size:1.12rem;max-width:700px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:11px;border:1px solid #31405a;font-size:.92rem;font-weight:850;letter-spacing:.01em;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{border-color:transparent;background:linear-gradient(100deg,#8d3df0,#6744d8 60%,#397ddf);box-shadow:0 10px 34px rgba(116,65,226,.25)}.btn-primary:hover{box-shadow:0 14px 42px rgba(116,65,226,.38)}.btn-secondary{background:rgba(255,255,255,.035)}.btn-secondary:hover{border-color:#7253a7;background:rgba(255,255,255,.06)}
.site-header{height:82px;position:sticky;top:0;z-index:100;background:rgba(5,9,20,.88);border-bottom:1px solid rgba(255,255,255,.065);backdrop-filter:blur(18px)}.nav-shell{height:100%;display:flex;align-items:center;gap:30px}.site-logo{width:242px;display:flex;align-items:center;flex:0 0 auto}.site-logo .custom-logo-link{display:flex}.site-logo .custom-logo{max-height:58px;width:auto}.primary-nav{margin-left:auto;display:flex;align-items:center;gap:25px}.primary-nav>a:not(.btn){color:#b8c1d0;font-weight:760;font-size:.91rem}.primary-nav>a:not(.btn):hover{color:#fff}.nav-login{padding-left:18px;border-left:1px solid var(--line)}.nav-trial{min-height:42px;padding-inline:17px}.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);background:#0c1320;border-radius:9px;padding:10px;cursor:pointer}.nav-toggle span:not(.screen-reader-text){display:block;height:2px;background:#fff;margin:5px 0;border-radius:3px}
.hero{position:relative;overflow:hidden;padding-top:92px;padding-bottom:78px}.hero-glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.hero-glow-one{width:560px;height:560px;right:-180px;top:-250px;background:radial-gradient(circle,rgba(112,57,204,.20),transparent 69%)}.hero-glow-two{width:420px;height:420px;left:-210px;bottom:-210px;background:radial-gradient(circle,rgba(37,200,242,.08),transparent 70%)}.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center;position:relative}.hero h1{font-size:clamp(3.4rem,6.3vw,6.4rem);line-height:.91;letter-spacing:-.062em;margin:20px 0 18px}.hero-flow{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:800;margin:0 0 16px}.hero-flow strong{color:#c494ff}.hero-copy .lead strong{color:#fff}.hero-proof{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#8f9bb0;font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.hero-proof span{display:flex;align-items:center;gap:8px}.hero-proof span:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan))}.hero-visual{position:relative}.visual-frame{overflow:hidden;border-radius:26px;border:1px solid #28344b;background:#0b111e;box-shadow:var(--shadow);transform:perspective(1300px) rotateY(-2deg)}.visual-frame img{width:100%}.status-pill{position:absolute;right:24px;bottom:-18px;background:rgba(8,14,24,.94);border:1px solid #28384d;box-shadow:0 16px 40px rgba(0,0,0,.3);border-radius:999px;padding:10px 15px;font-size:.78rem;font-weight:850;color:#dbe1eb}.status-pill i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(88,223,170,.7)}
.trust-ribbon{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(247,70,157,.92),rgba(128,69,200,.86) 52%,rgba(43,92,169,.8));padding:13px 0}.trust-ribbon-grid{display:flex;align-items:center;justify-content:center;gap:24px;text-align:center;font-size:.9rem;letter-spacing:.075em}.trust-ribbon-grid span{width:1px;height:20px;background:rgba(255,255,255,.55)}
.section-head{max-width:780px;margin-bottom:40px}.section-head.centered{text-align:center;margin-inline:auto}.section-head h2,.showcase-copy h2,.remote-copy h2,.experience h2,.cta-card h2{font-size:clamp(2.25rem,4.5vw,4rem);line-height:1.03;letter-spacing:-.045em;margin:12px 0 16px}.section-head p{font-size:1.08rem;color:var(--muted);margin:0}.versions{background:linear-gradient(180deg,rgba(255,255,255,.016),transparent)}.version-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.version-card{position:relative;padding:35px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(18,27,43,.95),rgba(8,14,24,.95));overflow:hidden}.version-card:after{content:"";position:absolute;width:300px;height:300px;right:-150px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(171,73,255,.19),transparent 69%);pointer-events:none}.version-card.local:after{background:radial-gradient(circle,rgba(37,200,242,.16),transparent 69%)}.version-top{display:flex;align-items:center;gap:13px}.version-icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#52287c,#1d2d67);font-size:1.5rem;border:1px solid rgba(255,255,255,.08)}.local .version-icon{background:linear-gradient(145deg,#1c3d65,#153e51)}.product-label{font-size:.75rem;color:#d5b4ff;font-weight:900;letter-spacing:.14em}.local .product-label{color:#82dff7}.version-card h3{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.08;margin:23px 0 13px;letter-spacing:-.035em}.version-card p{color:var(--muted);margin:0}.tick-list{list-style:none;padding:0;margin:24px 0}.tick-list li{position:relative;padding:7px 0 7px 25px;color:#c5ccda}.tick-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.text-link{display:inline-flex;align-items:center;gap:8px;color:#d6b7ff;font-weight:850;margin-top:4px}.local .text-link{color:#86ddf4}.text-link span{transition:transform .18s}.text-link:hover span{transform:translateX(4px)}.same-experience{text-align:center;max-width:850px;margin:30px auto 0;color:var(--muted)}.same-experience strong{color:#fff}
.dark-panel{background:#070c16;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature-card{padding:28px 24px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,#0d1522,#0a101b)}.line-icon{height:49px;width:49px;border-radius:13px;display:grid;place-items:center;color:#d4b8ff;font-size:1.35rem;font-weight:900;border:1px solid #52357b;background:linear-gradient(145deg,#26163c,#111a2d)}.feature-card h3{font-size:1.16rem;margin:18px 0 8px}.feature-card p{color:var(--muted);margin:0;font-size:.96rem}.product-showcase{overflow:hidden}.showcase-grid{display:grid;grid-template-columns:1.18fr .82fr;align-items:center;gap:56px}.showcase-image{border-radius:23px;border:1px solid #27344a;background:#0a101b;overflow:hidden;box-shadow:var(--shadow)}.showcase-copy p,.remote-copy p,.experience-copy p{color:var(--muted);font-size:1.05rem}.mini-list{margin-top:27px;display:grid;gap:14px}.mini-list>div{display:grid;grid-template-columns:45px 1fr;gap:13px;align-items:start;padding-top:14px;border-top:1px solid var(--line)}.mini-list b{color:#b47aff}.mini-list strong{display:block}.mini-list small{display:block;color:var(--muted2);font-size:.88rem;margin-top:3px}.workflow{background:linear-gradient(180deg,rgba(12,18,32,.8),rgba(7,12,22,.75))}.workflow-grid{display:grid;grid-template-columns:repeat(5,1fr);position:relative}.workflow-grid:before{content:"";position:absolute;top:28px;left:9%;right:9%;height:1px;background:linear-gradient(90deg,var(--purple),#715bff,var(--cyan));opacity:.45}.workflow-step{position:relative;text-align:center;padding:0 15px}.workflow-step>span{position:relative;z-index:2;margin:auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#101827;border:1px solid #69459c;box-shadow:0 0 0 8px #080e18;font-weight:900;color:#c995ff}.workflow-step h3{font-size:1.05rem;margin:19px 0 7px}.workflow-step p{color:var(--muted);font-size:.91rem;margin:0}.remote-grid{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:54px}.remote-image{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#070b14;box-shadow:var(--shadow)}.experience{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(circle at 12% 25%,rgba(159,70,255,.13),transparent 30%),radial-gradient(circle at 88% 75%,rgba(37,200,242,.08),transparent 30%),#080d18}.experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.experience h2{margin-bottom:0}.trusted-line{font-size:1.45rem!important;font-weight:900!important;color:#fff!important;margin-top:27px!important}.trusted-line:after{content:"";display:inline-block;vertical-align:middle;width:60px;height:3px;margin-left:14px;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:4px}.final-cta{padding-top:74px}.cta-card{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:42px;border:1px solid #31405b;border-radius:28px;background:radial-gradient(circle at 12% 20%,rgba(171,72,255,.20),transparent 32%),radial-gradient(circle at 88% 72%,rgba(37,200,242,.12),transparent 30%),#0c1422}.cta-card h2{font-size:clamp(2rem,4vw,3.4rem);margin-bottom:10px}.cta-card p{color:var(--muted);margin:0}.cta-card .actions{flex:0 0 auto;margin-top:0}
.site-footer{margin-top:30px;padding:58px 0 24px;border-top:1px solid var(--line);background:#050812;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:40px}.footer-brand img{width:235px;margin-bottom:12px}.footer-brand p{margin:0 0 10px}.footer-brand strong{font-size:.88rem;color:#c6cddd}.footer-grid h4{color:#fff;margin:0 0 14px}.footer-grid>div:not(.footer-brand) a{display:block;margin:8px 0;color:#97a2b6}.footer-grid a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:42px;padding-top:22px;font-size:.85rem}.content-page{max-width:850px}.content-page h1{font-size:clamp(2.8rem,5vw,4.8rem);line-height:1;margin-top:0}.content-page p{color:var(--muted);font-size:1.05rem}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.text-link span{transition:none}}
@media(max-width:1080px){.primary-nav{gap:16px}.primary-nav>a:not(.btn){font-size:.86rem}.site-logo{width:210px}.hero-grid{gap:35px}.feature-grid{grid-template-columns:repeat(2,1fr)}.workflow-grid{grid-template-columns:repeat(3,1fr);gap:28px 10px}.workflow-grid:before{display:none}.workflow-step>span{box-shadow:none}.showcase-grid,.remote-grid{gap:36px}.cta-card{align-items:flex-start;flex-direction:column}.cta-card .actions{margin-top:0}}
@media(max-width:860px){.section-pad{padding:72px 0}.nav-toggle{display:block}.primary-nav{display:none;position:absolute;left:22px;right:22px;top:72px;padding:15px;background:#0a101b;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:2px}.primary-nav.open{display:flex}.primary-nav>a:not(.btn){padding:11px 9px}.nav-login{border-left:0;border-top:1px solid var(--line);padding-left:9px!important}.nav-trial{margin-top:7px}.hero-grid,.version-grid,.showcase-grid,.remote-grid,.experience-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy .lead{margin-inline:auto}.hero-copy .actions,.hero-proof{justify-content:center}.hero-visual{margin-top:14px}.showcase-copy,.remote-copy{max-width:720px}.workflow-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.trust-ribbon-grid{font-size:.72rem}}
@media(max-width:620px){.wrap{width:min(var(--max),calc(100% - 26px))}.site-header{height:72px}.site-logo{width:190px}.primary-nav{top:64px;left:13px;right:13px}.hero{padding-top:62px;padding-bottom:58px}.hero h1{font-size:3.35rem}.hero-proof{display:grid;gap:8px}.visual-frame{border-radius:18px;transform:none}.status-pill{right:12px;bottom:-15px}.trust-ribbon-grid{gap:10px;flex-direction:column}.trust-ribbon-grid span{width:70px;height:1px}.version-card{padding:27px 22px}.feature-grid,.workflow-grid{grid-template-columns:1fr}.workflow-step{text-align:left;display:grid;grid-template-columns:58px 1fr;column-gap:15px}.workflow-step>span{grid-row:1/3;margin:0}.workflow-step h3{margin:5px 0 4px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.cta-card{padding:30px 22px}.cta-card .actions{width:100%}.cta-card .btn{width:100%}}