/* ============================================================
   NeuroRoute — Landing page (public) + 3 hero variations
   ============================================================ */
const {useState:useStateL, useEffect:useEffectL, useRef:useRefL} = React;

/* Sales contact. Self-serve signup is closed for now, so every conversion CTA on
   the public page opens the lead form (lead-form.jsx) instead of the Google
   login. Resolved off window at call time, not import time, so it works
   regardless of Babel script load order; the mailto is the fallback for the
   (impossible in practice) case where lead-form.jsx failed to load. */
function salesContact(){
  if(typeof window.openLeadForm === 'function'){ window.openLeadForm(); return; }
  window.location.href = 'mailto:CloudSales@sislinfotech.com?subject=NeuroRoute - Sales enquiry';
}

/* Phones get a purpose-built, curated edition (landing-mobile.jsx) instead of this
   page collapsed to one column: the desktop tree is ~17k tall and would run ~40k
   on a phone. Defined locally, not read off window, so the hook always runs
   regardless of Babel script load order (React requires a stable hook count). */
function useNarrowViewport(bp){
  var q='(max-width:'+bp+'px)';
  var read=function(){
    return typeof window.matchMedia==='function' ? window.matchMedia(q).matches : window.innerWidth<=bp;
  };
  var pair=useStateL(read);
  useEffectL(function(){
    var sync=function(){ pair[1](read()); };
    /* resize as well as the media query: a tablet rotating across the breakpoint
       must switch editions, and the mq change event alone has proven unreliable. */
    window.addEventListener('resize',sync);
    var mq=typeof window.matchMedia==='function'?window.matchMedia(q):null;
    if(mq){
      if(mq.addEventListener) mq.addEventListener('change',sync); else mq.addListener(sync);
    }
    sync();
    return function(){
      window.removeEventListener('resize',sync);
      if(mq){
        if(mq.removeEventListener) mq.removeEventListener('change',sync); else mq.removeListener(sync);
      }
    };
  },[q]);
  return pair[0];
}

/* smooth in-page scroll without touching the hash router */
function lpScroll(id){
  const el=document.getElementById(id);
  if(el) window.scrollTo({top:el.getBoundingClientRect().top+window.scrollY-70, behavior:'smooth'});
}

/* shared animated routing diagram: 1 request -> 3 routed models */
function RoutingViz({compact}){
  const targets=[
    {c:COL.cyan,   m:'Gemini Flash',  t:'factual'},
    {c:COL.magenta,m:'Claude Sonnet', t:'creative'},
    {c:COL.amber,  m:'GPT-4o-mini',   t:'extraction'},
    {c:COL.purple, m:'Grok 3',        t:'analysis'},
    {c:'#5ea2ff',  m:'Llama 3.3 70B', t:'chat'},
    {c:COL.green,  m:'Mistral Large', t:'summarize'},
  ];
  const N=targets.length, top=12, gap=43, hub=150;
  const yOf=(i)=>top+i*gap;                 // top of label box
  const cyOf=(i)=>yOf(i)+13;                 // arrow/curve center
  const [active,setActive]=useStateL(0);
  useEffectL(()=>{const id=setInterval(()=>setActive(a=>(a+1)%N),1300);return ()=>clearInterval(id);},[]);
  const H = yOf(N-1)+26+12;
  return (
    <div className="rviz">
      <svg viewBox={`0 0 440 ${H}`} width="100%" style={{display:'block'}}>
        {/* request source */}
        <circle cx="52" cy={hub} r="30" fill="rgba(59,130,246,.12)" stroke="rgba(59,130,246,.5)"/>
        <circle cx="52" cy={hub} r="30" fill="none" stroke="#3b82f6" strokeWidth="2" opacity=".5">
          <animate attributeName="r" values="30;40;30" dur="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values=".5;0;.5" dur="2.4s" repeatCount="indefinite"/>
        </circle>
        <text x="52" y={hub-4} textAnchor="middle" fill="#7db0ff" fontSize="11" fontFamily="JetBrains Mono">POST</text>
        <text x="52" y={hub+10} textAnchor="middle" fill="#aab2c5" fontSize="9.5" fontFamily="JetBrains Mono">/chat</text>
        {/* router hub */}
        <g>
          <rect x="146" y={hub-22} width="44" height="44" rx="11" fill="rgba(139,92,246,.14)" stroke="#8b5cf6"/>
          <circle cx="168" cy={hub} r="4" fill="#a06cf2"/>
          <path d={`M160 ${hub}h16M168 ${hub-8}v16`} stroke="#8b5cf6" strokeWidth="1.6" strokeLinecap="round"/>
        </g>
        <path d={`M82 ${hub} H146`} stroke="#5b6480" strokeWidth="2" strokeDasharray="4 4">
          <animate attributeName="stroke-dashoffset" values="16;0" dur="0.7s" repeatCount="indefinite"/>
        </path>
        {targets.map((t,i)=>{
          const on=active===i; const cy=cyOf(i);
          return (
            <g key={i} opacity={on?1:.38} style={{transition:'opacity .4s'}}>
              <path d={`M190 ${hub} C 248 ${hub}, 252 ${cy}, 300 ${cy}`} fill="none"
                stroke={t.c} strokeWidth={on?3:1.8} strokeDasharray="5 5" strokeLinecap="round">
                {on&&<animate attributeName="stroke-dashoffset" values="20;0" dur="0.6s" repeatCount="indefinite"/>}
              </path>
              <path d={`M298 ${cy-4} l6 4 -6 4`} fill="none" stroke={t.c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
              <rect x="314" y={yOf(i)} width="116" height="26" rx="7" fill={t.c+'1f'} stroke={on?t.c:'transparent'}/>
              <circle cx="326" cy={cy} r="3.2" fill={t.c}/>
              <text x="336" y={cy+4} fill={on?'#fff':'#aab2c5'} fontSize="11" fontFamily="Manrope" fontWeight="600">{t.m}</text>
            </g>
          );
        })}
      </svg>
      <div className="rviz-cap mono">classified · scored · routed in milliseconds · 10+ providers</div>
    </div>
  );
}

/* ---- HERO VARIATION 1: Aurora ---- */
function HeroAurora(){
  return (
    <header className="hero hero-aurora">
      <div className="aurora-bg"><span/><span/><span/></div>
      <div className="hero-inner" style={{textAlign:'center',maxWidth:880}}>
        <div className="chip" style={{margin:'0 auto 22px'}}><span className="badge b-purple" style={{padding:'1px 8px'}}>NEW</span> Fusion routing + agent run budgets are live</div>
        <h1 className="display hero-h1">Route AI requests to the<br/><span className="route-text">right model.</span> Save 60–80%.</h1>
        <p className="hero-sub">NeuroRoute sits between your app and every AI provider — classifying each request and routing it to the optimal model on quality, cost, and latency. One endpoint. Measurable savings.</p>
        <div className="row" style={{justifyContent:'center',marginTop:30}}>
          <a className="btn btn-grad btn-lg" onClick={salesContact} style={{cursor:'pointer'}}><Icon name="send" size={17}/>Contact NeuroRoute Sales Team</a>
          <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('how')} style={{cursor:'pointer'}}><Icon name="playground" size={17}/>See how it works</a>
        </div>
        <div className="hero-viz-card" style={{marginTop:44}}><RoutingViz/></div>
      </div>
    </header>
  );
}

/* ---- HERO VARIATION 2: Split + live viz ---- */
function HeroSplit(){
  return (
    <header className="hero hero-split">
      <div className="aurora-bg dim"><span/><span/></div>
      <div className="hero-inner hsplit">
        <div>
          <div className="eyebrow" style={{marginBottom:16}}>AI COST OPTIMIZATION PLATFORM</div>
          <h1 className="display hero-h1" style={{fontSize:'min(6.4vw,60px)'}}>Stop overpaying for <span className="gradient-text">GPT-4o</span> on every request.</h1>
          <p className="hero-sub" style={{margin:'20px 0 0'}}>NeuroRoute classifies each request and routes it to the cheapest model that clears your quality bar — across OpenAI, Anthropic, Google, Groq & more.</p>
          <div className="row" style={{marginTop:30}}>
            <a className="btn btn-grad btn-lg" onClick={salesContact} style={{cursor:'pointer'}}>Contact NeuroRoute Sales Team<Icon name="arrowright" size={16}/></a>
            <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('roi')} style={{cursor:'pointer'}}>Calculate savings</a>
          </div>
          <div className="row" style={{marginTop:26,gap:22,color:'var(--tx-2)',fontSize:13}}>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>BYOK-ready</span>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>OpenAI-compatible</span>
            <span className="row" style={{gap:7}}><Icon name="checkcircle" size={15} style={{color:'var(--green)'}}/>BYOK</span>
          </div>
        </div>
        <div className="hero-viz-card"><RoutingViz/></div>
      </div>
    </header>
  );
}

/* ---- HERO VARIATION 3: Proof / terminal ---- */
function HeroProof(){
  return (
    <header className="hero hero-proof">
      <div className="aurora-bg dim"><span/><span/><span/></div>
      <div className="hero-inner" style={{textAlign:'center',maxWidth:820}}>
        <h1 className="display hero-h1">The same request.<br/><span className="route-text">A fraction of the cost.</span></h1>
        <p className="hero-sub">Drop-in replacement for the OpenAI API. Change one URL — keep your code, your keys, your quality. Watch the savings add up on every call.</p>
        <div className="proof-grid">
          <div className="codeblock proof-code">
            <div className="proof-line"><span className="tok-com"># before — every call to GPT-4o</span></div>
            <div className="proof-line"><span className="tok-key">curl</span> https://api.openai.com/v1/...</div>
            <div className="proof-line proof-cost bad">$0.0366 <span>/ request</span></div>
            <div style={{height:14}}/>
            <div className="proof-line"><span className="tok-com"># after — routed by NeuroRoute</span></div>
            <div className="proof-line"><span className="tok-key">curl</span> https://api.neuroroute.ai/v1/...</div>
            <div className="proof-line proof-cost good">$0.0112 <span>/ request · 69% saved</span></div>
          </div>
          <div className="hero-viz-card" style={{margin:0}}><RoutingViz/></div>
        </div>
        <div className="row" style={{justifyContent:'center',marginTop:30}}>
          <a className="btn btn-grad btn-lg" onClick={salesContact} style={{cursor:'pointer'}}>Contact NeuroRoute Sales Team</a>
          <a className="btn btn-ghost btn-lg" onClick={()=>lpScroll('pricing')} style={{cursor:'pointer'}}>View pricing</a>
        </div>
      </div>
    </header>
  );
}

const HEROES=[
  {id:'aurora',label:'Aurora',C:HeroAurora},
  {id:'split', label:'Split + viz',C:HeroSplit},
  {id:'proof', label:'Proof / terminal',C:HeroProof},
];

/* ---- ROI calculator ---- */
function ROICalc(){
  const [spend,setSpend]=useStateL(4000);
  const pct=0.66;
  const fmt=(n)=>'$'+Math.round(n).toLocaleString();
  const saving=spend*pct, bill=spend-saving, annual=saving*12;
  const p=((spend-100)/(50000-100))*100;
  return (
    <section id="roi" className="lp-sec">
      <div className="lp-head"><div className="eyebrow">ROI CALCULATOR</div><h2 className="display lp-h2">See what you'd save</h2>
        <p className="lp-p">Drag to match your current monthly AI spend. Estimate based on 66% average savings across mixed task workloads.</p></div>
      <div className="card card-pad roi-card">
        <div className="roi-slider">
          <div className="spread"><span className="label">Monthly AI spend</span><span className="display tnum" style={{fontSize:26}}>{fmt(spend)}</span></div>
          <input className="range" type="range" min="100" max="50000" step="100" value={spend}
            style={{'--p':p+'%'}} onChange={e=>setSpend(+e.target.value)}/>
          <div className="spread faint mono" style={{fontSize:11}}><span>$100</span><span>$50,000</span></div>
        </div>
        <div className="roi-out">
          <div className="roi-stat"><div className="roi-v route-text tnum">{fmt(saving)}</div><div className="faint">Monthly savings</div></div>
          <div className="roi-stat"><div className="roi-v tnum">{fmt(bill)}</div><div className="faint">Your new bill</div></div>
          <div className="roi-stat"><div className="roi-v tnum" style={{color:'var(--green)'}}>{fmt(annual)}</div><div className="faint">Annual savings</div></div>
        </div>
      </div>
    </section>
  );
}

function LandingPage(){
  const HeroC=HeroAurora;   // locked to Aurora for production
  var PS=window.PricingSection||null; // resolved from window to survive async Babel load order
  var SS=window.StoryStyles||null;
  var ML=window.MobileLanding||null;
  var isMobile=useNarrowViewport(760);
  if(isMobile && ML) return <ML/>;
  const principles=[
    {ic:'billing', c:'green', t:'Transparent, predictable pricing', d:'A flat platform fee plus a metered per-token rate. Bring your own keys and pay providers directly, or let us manage them at cost. Model your bill before you send a request.'},
    {ic:'trenddown', c:'blue', t:'Proof on every request', d:'Actual cost vs the premium-model counterfactual, logged per call. No black-box pricing — export it, audit it, take it to finance.'},
    {ic:'shield', c:'amber', t:'Your data stays yours', d:'A router, not a model owner. Choose zero-retention and nothing is stored; choose retain and it’s encrypted under a key you can hold. Erase or export everything, any time.'},
  ];
  return (
    <div className="lp">
      <LandingStyles/>
      {SS&&<SS/>}
      {window.LeadForm && <window.LeadForm/>}

      <nav className="lp-nav">
        <div className="lp-nav-in">
          <div className="row brand-row">
            <CloudWorxMark height={24}/>
            <span className="brand-div"/>
            <div className="row" style={{gap:10}}><LogoMark size={40}/><span className="display" style={{fontSize:19,fontWeight:700}}>NeuroRoute</span></div>
          </div>
          <div className="lp-links">
            <a style={{cursor:'pointer'}} onClick={()=>lpScroll('spend-control')}>Spend control</a>
            <a style={{cursor:'pointer'}} onClick={()=>lpScroll('security')}>Security</a>
            <a style={{cursor:'pointer'}} onClick={()=>go('resources')}>Resources</a>
            <a style={{cursor:'pointer'}} onClick={()=>lpScroll('pricing')}>Pricing</a>
            <a className="btn btn-grad btn-sm" onClick={()=>go('login')} style={{cursor:'pointer'}}>Login</a>
          </div>
        </div>
      </nav>

      <HeroC/>

      {/* stats bar — directional, defensible */}
      <div className="lp-stats">
        {[['up to 80%','Cut in AI spend'],['30+','Models · one API'],['Negligible','Routing overhead vs. the LLM call'],['4-tier','$ spend quotas']].map((s,i)=>(
          <div key={i} className="lp-stat"><div className="display route-text" style={{fontSize:30}}>{s[0]}</div><div className="faint" style={{fontSize:13}}>{s[1]}</div></div>
        ))}
      </div>

      {/* the narrative */}
      <TheLeakSection/>
      <RightModelSection/>
      <OneApiSection/>
      <HowItWorksDemo/>
      <CompressionSection/>
      <SpendControlSection/>
      <SecuritySection/>
      <CompareSection/>
      <EnterpriseSection/>
      <MoreSection/>

      <ROICalc/>
      {PS && <PS/>}

      {/* honest principles — no fabricated customers or logos */}
      <section className="lp-sec">
        <div className="lp-head">
          <div className="eyebrow">WHY TEAMS TRUST IT</div>
          <h2 className="display lp-h2">Built on principles,<br/><span className="route-text">not promises.</span></h2>
        </div>
        <div className="feat-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
          {principles.map(p=>(
            <div key={p.t} className="card card-pad">
              <div className="m-ico" style={{background:`var(--${p.c}-t)`,color:`var(--${p.c})`,width:44,height:44,borderRadius:12}}><Icon name={p.ic} size={22}/></div>
              <h3 style={{fontSize:16.5,margin:'15px 0 8px'}}>{p.t}</h3>
              <p className="muted" style={{fontSize:13.5,margin:0,lineHeight:1.6}}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="lp-cta">
        <div className="aurora-bg"><span/><span/></div>
        <h2 className="display" style={{fontSize:38,position:'relative'}}>Take back control of your AI bill.</h2>
        <p className="lp-p" style={{position:'relative'}}>One endpoint, every model, hard spend limits, and proof on every request. Pick the tier that fits your scale and start routing today.</p>
        <a className="btn btn-grad btn-lg" style={{position:'relative',cursor:'pointer'}} onClick={salesContact}><Icon name="send" size={18}/>Contact NeuroRoute Sales Team</a>
      </section>

      <footer className="lp-foot">
        <div className="row" style={{gap:12}}><LogoMark size={38}/><div><div className="display" style={{fontSize:16}}>NeuroRoute</div><div style={{marginTop:4}}><CloudWorxMark height={26} variant="full"/></div></div></div>
        <div className="faint" style={{fontSize:12.5}}>© 2026 SISL CloudWorx. All rights reserved.</div>
        <div className="lp-links" style={{gap:18,fontSize:13}}><a>Docs</a><a>Status</a><a onClick={()=>go('privacy')} style={{cursor:'pointer'}}>Privacy</a><a onClick={()=>go('terms')} style={{cursor:'pointer'}}>Terms</a><a onClick={()=>go('code')} style={{cursor:'pointer'}}>Code of Conduct</a><a href="mailto:raman@sislinfotech.com">Contact</a></div>
      </footer>
    </div>
  );
}

function LandingStyles(){
  return <style>{`
.lp{background:var(--bg-0);min-height:100vh;overflow-x:hidden}
.lp a{transition:.15s}
.hero-switch{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;
  background:rgba(17,20,31,.9);backdrop-filter:blur(12px);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:6px 8px 6px 14px;box-shadow:var(--sh-2)}
.hero-switch button{border:none;background:none;color:var(--tx-2);font-family:var(--font-ui);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:99px;cursor:pointer;transition:.13s}
.hero-switch button:hover{color:var(--tx-0)}
.hero-switch button.active{background:var(--grad-brand);color:#fff}

.lp-nav{position:sticky;top:0;z-index:80;background:rgba(7,8,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.lp-nav-in{max-width:1200px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.brand-row{gap:14px;align-items:center}
.brand-div{width:1px;height:24px;background:var(--line-2);flex-shrink:0}
.lp-links{display:flex;align-items:center;gap:24px;font-size:14px;color:var(--tx-1);white-space:nowrap}
.lp-links a:hover{color:var(--tx-0)}

.hero{position:relative;overflow:hidden;padding:96px 28px 60px;display:flex;justify-content:center}
.hero-inner{position:relative;z-index:2;width:100%;max-width:1120px}
.hero-h1{font-size:min(8vw,68px);font-weight:700}
.hero-sub{color:var(--tx-1);font-size:18px;line-height:1.6;max-width:620px;margin:22px auto 0}
.hero-aurora .hero-sub,.hero-proof .hero-sub{margin-left:auto;margin-right:auto}
.hsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-split .hero-sub{max-width:520px;margin-left:0}

.aurora-bg{position:absolute;inset:0;z-index:0;filter:blur(60px);opacity:.85}
.aurora-bg.dim{opacity:.5}
.aurora-bg span{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora-bg span:nth-child(1){width:540px;height:540px;background:radial-gradient(circle,#3b82f6,transparent 65%);top:-160px;left:-80px;animation:float1 14s ease-in-out infinite}
.aurora-bg span:nth-child(2){width:520px;height:520px;background:radial-gradient(circle,#e24fd6,transparent 65%);top:-120px;right:-60px;animation:float2 17s ease-in-out infinite}
.aurora-bg span:nth-child(3){width:460px;height:460px;background:radial-gradient(circle,#f59e0b,transparent 68%);bottom:-200px;left:40%;animation:float1 20s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,40px)}}

.hero-viz-card{background:rgba(13,16,24,.7);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:22px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);max-width:520px;margin:0 auto}
.rviz-cap{margin-top:10px;text-align:center;font-size:11px;color:var(--tx-2);letter-spacing:.06em}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;text-align:left}
.proof-code{font-size:13px;line-height:1.9}
.proof-line{white-space:nowrap}
.proof-cost{font-weight:700;font-size:15px;margin-top:2px}
.proof-cost span{font-size:11.5px;font-weight:500;color:var(--tx-2)}
.proof-cost.bad{color:#ff8095}.proof-cost.good{color:#43d6a3}

.lp-stats{max-width:1000px;margin:0 auto;padding:8px 28px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lp-stat{text-align:center;padding:18px;border-right:1px solid var(--line)}
.lp-stat:last-child{border-right:none}

.lp-sec{max-width:1120px;margin:0 auto;padding:64px 28px}
.lp-head{text-align:center;max-width:680px;margin:0 auto 42px}
.lp-h2{font-size:min(6vw,38px);margin:12px 0 0}
.lp-p{color:var(--tx-1);font-size:16px;line-height:1.6;margin:14px auto 0}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.feat{position:relative;overflow:hidden}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
.step{position:relative}
.step-n{font-size:34px;font-weight:700}
.step-line{position:absolute;top:20px;right:-28px;width:56px;height:2px;background:linear-gradient(90deg,var(--line-2),transparent)}

.roi-card{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.roi-slider{display:flex;flex-direction:column;gap:16px}
.roi-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-left:1px solid var(--line);padding-left:32px}
.roi-stat{text-align:center}
.roi-v{font-family:var(--font-display);font-weight:600;font-size:30px;line-height:1.1}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.price-card{position:relative;overflow:visible}
.price-card.hot{border-color:rgba(226,79,214,.5);box-shadow:0 24px 60px -28px rgba(226,79,214,.5)}
.price-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;padding:5px 12px;border-radius:99px;font-family:var(--font-mono)}
.price-feat{display:flex;flex-direction:column;gap:11px;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}

.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:32px}
.logo-ph{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--tx-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:12px 20px;background:var(--bg-2)}
.quote{max-width:720px;margin:0 auto;text-align:center}

.lp-cta{position:relative;overflow:hidden;text-align:center;padding:88px 28px;margin:40px 28px;border-radius:var(--r-xl);
  border:1px solid var(--line-2);background:var(--bg-2)}
.lp-foot{max-width:1120px;margin:0 auto;padding:36px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);flex-wrap:wrap}

@media(max-width:860px){
  .hsplit,.proof-grid,.roi-card,.feat-grid,.steps-grid,.price-grid{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-links a:not(.btn){display:none}
  .roi-out{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .step-line{display:none}
}
@media(max-width:520px){
  .brand-row .brand-div,.brand-row img[alt="SISL CloudWorx"]{display:none}
}
`}</style>;
}

window.PAGES = Object.assign(window.PAGES||{}, {landing:LandingPage});