/* OCULITH marketing landing — dark, modern, orange-accent. Standalone (no app CSS). */
:root{
  --bg:#0b0b0c; --bg2:#101015; --ink:#f4f5f7; --muted:#9aa3ae;
  --line:#1e1f25; --accent:#ff7a00; --accent2:#F26B1F; --accent-deep:#b24e00;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.lp{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{line-height:1.08; letter-spacing:-.02em; margin:0;}

/* ---- backdrop: aurora glows + faint grid ---- */
.lp-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.lp-aurora{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;}
.lp-aurora.a1{width:60vw; height:60vw; top:-20vw; right:-10vw;
  background:radial-gradient(circle,rgba(255,122,0,.45),transparent 60%);}
.lp-aurora.a2{width:55vw; height:55vw; bottom:-25vw; left:-15vw;
  background:radial-gradient(circle,rgba(120,60,255,.22),transparent 60%);}
.lp-grid{position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.25;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 30%,transparent 80%);}

main,.lp-nav,.lp-footer{position:relative; z-index:1;}

/* ---- nav ---- */
.lp-nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px,5vw,56px); backdrop-filter:blur(12px);
  background:rgba(11,11,12,.55); border-bottom:1px solid transparent; transition:border-color .2s,background .2s;}
.lp-nav.scrolled{border-bottom-color:var(--line); background:rgba(11,11,12,.8);}
.lp-brand{display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:.02em; font-size:1.1rem;}
.lp-links{display:flex; gap:26px; margin-left:auto; color:var(--muted); font-size:.95rem;}
.lp-links a:hover{color:var(--ink);}
.lp-nav .lp-btn{margin-left:24px;}
@media(max-width:760px){ .lp-links{display:none;} .lp-nav .lp-btn{margin-left:auto;} }

/* ---- buttons ---- */
.lp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid var(--line); transition:transform .12s,box-shadow .2s,background .2s; white-space:nowrap;}
.lp-btn--lg{padding:14px 26px; font-size:1.02rem;}
.lp-btn--solid{background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#0b0b0c; border-color:transparent;
  box-shadow:0 8px 30px rgba(255,122,0,.28);}
.lp-btn--solid:hover{transform:translateY(-1px); box-shadow:0 12px 38px rgba(255,122,0,.4);}
.lp-btn--ghost{background:rgba(255,255,255,.03); color:var(--ink);}
.lp-btn--ghost:hover{background:rgba(255,255,255,.08);}

/* ---- hero (full-bleed section; scene is the background, text overlaid) ---- */
.lp-hero{position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(560px,86vh,840px); padding:clamp(40px,8vw,96px) 0;}
.lp-hero-inner{position:relative; z-index:6; width:100%; max-width:1240px; margin:0 auto;
  padding:0 clamp(16px,5vw,56px);}
.lp-hero-copy{max-width:620px;}
.lp-eyebrow{display:inline-block; color:var(--accent); font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:18px;}
.lp-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem); font-weight:850;}
.grad{background:linear-gradient(100deg,var(--accent),#ffb066); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lp-sub{color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:34ch; margin:22px 0 30px;}
.lp-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- atmospheric monolith scene: FULL-BLEED hero background ---- */
.ms{position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(90% 80% at 72% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
    linear-gradient(180deg, #060608 0%, #0a0a0e 45%, #140f0b 80%, #1b1206 100%);}
/* left scrim keeps the headline legible over the scene */
.ms-scrim{position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,6,8,.92) 0%, rgba(6,6,8,.7) 34%, rgba(6,6,8,.15) 62%, transparent 78%);}
/* a real photo can replace the CGI: .ms.has-photo{background-image:var(--hero-photo)} */
.ms.has-photo{background-size:cover; background-position:center;}
.ms.has-photo::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,6,8,.55), rgba(6,6,8,.2) 40%, rgba(28,18,6,.55)),
    radial-gradient(120% 80% at 50% 115%, rgba(255,122,0,.45), transparent 55%);}
.ms.has-photo .ms-glow,.ms.has-photo .ms-ground{opacity:.5;}

.ms-glow{position:absolute; left:72%; bottom:8%; width:48%; height:62%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,140,0,.55), transparent 65%); filter:blur(34px); z-index:1;}
.ms-ground{position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:radial-gradient(70% 100% at 72% 100%, rgba(255,122,0,.38), transparent 60%);
  filter:blur(16px);}

.ms-monolith{position:absolute; left:72%; bottom:9%; transform:translateX(-50%);
  width:clamp(96px,11vw,168px); height:74%; z-index:2;
  clip-path:polygon(30% 0, 70% 0, 86% 100%, 14% 100%);  /* tapered: narrower at top */
  background:linear-gradient(100deg, #2a2b32 0%, #141519 28%, #050506 60%, #0c0d11 100%);
  box-shadow:0 30px 60px rgba(0,0,0,.6);}
.ms-face{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%);}
.ms-rim{position:absolute; top:0; bottom:0; left:14%; width:5px;
  background:linear-gradient(180deg, rgba(255,170,80,.95), rgba(255,122,0,.65));
  filter:blur(1.5px) drop-shadow(0 0 10px rgba(255,122,0,.9)); border-radius:4px;}
.ms-eye{position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:clamp(40px,5.4vw,64px); height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(255,122,0,.95)) drop-shadow(0 0 38px rgba(255,122,0,.6));
  animation:eyePulse 4.2s ease-in-out infinite;}
@keyframes eyePulse{0%,100%{opacity:.9; filter:drop-shadow(0 0 12px rgba(255,122,0,.7)) drop-shadow(0 0 30px rgba(255,122,0,.4));}
  50%{opacity:1; filter:drop-shadow(0 0 22px rgba(255,122,0,1)) drop-shadow(0 0 52px rgba(255,122,0,.65));}}

/* drifting fog */
.ms-fog{position:absolute; left:-20%; right:-20%; height:42%; z-index:3; pointer-events:none;
  background:radial-gradient(60% 80% at 30% 50%, rgba(180,180,200,.10), transparent 70%),
    radial-gradient(50% 70% at 70% 60%, rgba(255,180,120,.08), transparent 70%);
  filter:blur(8px);}
.ms-fog-1{bottom:6%; animation:fog 26s linear infinite;}
.ms-fog-2{bottom:22%; opacity:.7; animation:fog 38s linear infinite reverse;}
@keyframes fog{0%{transform:translateX(-6%);}50%{transform:translateX(6%);}100%{transform:translateX(-6%);}}

/* floating embers */
.ms-embers{position:absolute; inset:0; z-index:3; pointer-events:none;}
.ms-embers i{position:absolute; bottom:12%; width:3px; height:3px; border-radius:50%;
  background:#ffb066; box-shadow:0 0 8px 2px rgba(255,140,0,.7); opacity:0; animation:ember 7s linear infinite;}
.ms-embers i:nth-child(1){left:64%; animation-delay:0s;}
.ms-embers i:nth-child(2){left:74%; animation-delay:1.4s;}
.ms-embers i:nth-child(3){left:70%; animation-delay:2.8s; width:2px; height:2px;}
.ms-embers i:nth-child(4){left:80%; animation-delay:3.6s;}
.ms-embers i:nth-child(5){left:60%; animation-delay:4.6s; width:2px; height:2px;}
.ms-embers i:nth-child(6){left:77%; animation-delay:5.3s;}
.ms-embers i:nth-child(7){left:68%; animation-delay:6s; width:4px; height:4px;}
@keyframes ember{0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.9;} 80%{opacity:.5;} 100%{transform:translateY(-220px) translateX(12px); opacity:0;}}

.ms::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 110px 30px rgba(4,4,6,.85);}

@media(prefers-reduced-motion:reduce){ .ms-eye,.ms-fog,.ms-embers i{animation:none;} }
@media(max-width:860px){
  .lp-hero{min-height:auto; padding:clamp(48px,14vw,96px) 0;}
  .ms-monolith{left:80%; opacity:.7;}
  .ms-scrim{background:linear-gradient(180deg, rgba(6,6,8,.5), rgba(6,6,8,.78)),
    linear-gradient(90deg, rgba(6,6,8,.88), rgba(6,6,8,.4) 72%, transparent);}
}
/* Phones: stop overlaying the headline on the monolith. Stack the copy on top
   and render the monolith + eye as its own clean panel beneath the text. */
@media(max-width:760px){
  .lp-hero{flex-direction:column; align-items:stretch; min-height:auto; padding:32px 0 4px;}
  .lp-hero-inner{order:1;}
  .lp-hero-copy{max-width:none; text-align:center; margin:0 auto;}
  .lp-sub{max-width:42ch; margin:18px auto 26px;}
  .lp-cta{justify-content:center;}
  .ms{position:relative; inset:auto; order:2; width:100%;
    height:clamp(280px,66vw,380px); margin-top:24px; border-radius:18px;
    background:
      radial-gradient(95% 80% at 50% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
      linear-gradient(180deg,#060608 0%,#0a0a0e 45%,#140f0b 80%,#1b1206 100%);}
  .ms-scrim{display:none;}
  .ms-embers{display:none;}
  .ms-glow{left:50%; bottom:4%; width:74%; height:68%;}
  .ms-ground{background:radial-gradient(72% 100% at 50% 100%, rgba(255,122,0,.4), transparent 60%);}
  .ms-monolith{left:50%; bottom:5%; opacity:1; height:88%; width:clamp(124px,36vw,170px);}
  .ms-eye{width:clamp(50px,13vw,68px);}
}

/* ---- trust strip ---- */
.lp-trust{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  color:var(--muted); font-size:.9rem; padding:8px 16px 40px;}
.lp-trust .dot{opacity:.5;}

/* ---- sections ---- */
.lp-section{max-width:1180px; margin:0 auto; padding:clamp(48px,7vw,96px) clamp(16px,5vw,56px);}
.lp-section-head{text-align:center; max-width:680px; margin:0 auto clamp(36px,5vw,64px);}
.lp-section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:820;}
.lp-section-head p{color:var(--muted); font-size:1.1rem; margin-top:14px;}

/* alternating feature rows */
.lp-feat{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,64px); align-items:center; margin:clamp(40px,6vw,88px) 0;}
.lp-feat:nth-child(even) .lp-feat-text{order:2;}
.lp-feat-tag{color:var(--accent); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px;}
.lp-feat-text h3{font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:800;}
.lp-feat-text p{color:var(--muted); font-size:1.08rem; margin-top:14px; max-width:46ch;}
.lp-feat-list{list-style:none; margin:20px 0 0; padding:0; max-width:48ch; display:grid; gap:11px;}
.lp-feat-list li{position:relative; padding-left:28px; color:var(--text); font-size:.99rem; line-height:1.45;}
.lp-feat-list li::before{content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 0 4px rgba(255,122,0,.14); transform:rotate(45deg);}
.lp-feat-shot{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bg2);
  box-shadow:0 30px 80px rgba(0,0,0,.5); position:relative;}
.lp-feat-shot img{display:block; width:100%; height:auto;}
.lp-feat-shot.noimg{aspect-ratio:16/10; background:
  radial-gradient(120% 120% at 20% 0%,rgba(255,122,0,.18),transparent 55%),linear-gradient(160deg,#15161c,#0d0d11);}
.lp-feat-shot.noimg img{display:none;}
/* Modules with no screenshot (e.g. Resource Planning) span the full width and
   lay their feature list out in two columns so the block doesn't look empty. */
.lp-feat--noshot{grid-template-columns:1fr;}
.lp-feat--noshot .lp-feat-text p{max-width:70ch;}
.lp-feat--noshot .lp-feat-list{max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px;}
@media(max-width:820px){ .lp-feat{grid-template-columns:1fr;} .lp-feat:nth-child(even) .lp-feat-text{order:0;}
  .lp-feat--noshot .lp-feat-list{grid-template-columns:1fr;} }

/* why cards */
.lp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.lp-card{border:1px solid var(--line); border-radius:14px; padding:24px; background:rgba(255,255,255,.02);}
.lp-card h4{font-size:1.15rem; margin-bottom:8px;}
.lp-card p{color:var(--muted); font-size:.98rem;}

/* final CTA */
.lp-final{text-align:center; max-width:760px; margin:0 auto; padding:clamp(56px,8vw,120px) 16px;}
.lp-final h2{font-size:clamp(2rem,4vw,3rem); font-weight:840; margin-bottom:28px;}

/* footer */
.lp-footer{border-top:1px solid var(--line); padding:34px clamp(16px,5vw,56px);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--muted);}
.lp-footer .lp-brand{font-size:1rem; color:var(--ink);}

/* scroll reveal — only hides when JS is present (progressive enhancement),
   so no-JS / pre-scroll content is always visible. */
html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ html.js .reveal{opacity:1; transform:none; transition:none;} .lp-eye{animation:none;} html{scroll-behavior:auto;} }

/* =================================================================
   Split login — monolith scene on one side, modern card on the other.
   Reuses the hero .ms scene so it's continuous with the landing page.
   ================================================================= */
.lp-login-body{margin:0; background:var(--bg); color:var(--ink); overflow:hidden;}
.lp-login{min-height:100vh; min-height:100dvh; display:grid;
  grid-template-columns:1.05fr .95fr; background:var(--bg);}

/* scene panel */
.lp-login-scene{position:relative; overflow:hidden; border-right:1px solid var(--line);}
.lp-login-scene .ms{position:absolute; inset:0;
  background:
    radial-gradient(95% 80% at 50% 116%, rgba(255,122,0,.5), rgba(255,90,0,.12) 32%, transparent 60%),
    linear-gradient(180deg,#060608 0%,#0a0a0e 45%,#140f0b 80%,#1b1206 100%);}
.lp-login-scene .ms-monolith{left:50%;}
.lp-login-scene .ms-glow{left:50%;}
.lp-login-scene .ms-ground{background:radial-gradient(70% 100% at 50% 100%, rgba(255,122,0,.38), transparent 60%);}
/* soft fade toward the form panel instead of the left-edge headline scrim */
.lp-login-scene .ms-scrim{background:linear-gradient(90deg, transparent 45%, rgba(6,6,8,.6) 100%);}
.lp-login-scene-copy{position:absolute; left:clamp(28px,4vw,60px); bottom:clamp(30px,6vw,64px);
  z-index:6; max-width:22ch;}
.lp-login-scene-copy h2{font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:840;}
.lp-login-scene-copy p{color:var(--muted); margin-top:12px; font-size:1.02rem; line-height:1.5;}

/* form panel + card */
.lp-login-panel{display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,5vw,72px); position:relative; z-index:2;}
.lp-login-card{width:100%; max-width:410px;
  border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3vw,38px);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  box-shadow:0 30px 80px rgba(0,0,0,.45);}
.lp-login-brand{display:flex; align-items:center; gap:11px; margin-bottom:26px;}
.lp-login-brand img{display:block; filter:drop-shadow(0 0 14px rgba(255,122,0,.45));}
.lp-login-brand span{font-weight:800; font-size:1.35rem; letter-spacing:.02em;}
.lp-login-card h1{font-size:1.55rem; font-weight:820;}
.lp-login-sub{color:var(--muted); font-size:.96rem; margin:6px 0 24px;}
.lp-login-note{font-size:.88rem; color:var(--muted); background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:16px;}
.lp-login-note code{color:var(--accent); word-break:break-all;}
.lp-login-alert{font-size:.9rem; color:#ffd7c2; background:rgba(220,53,69,.14);
  border:1px solid rgba(220,53,69,.4); border-radius:10px; padding:10px 13px; margin-bottom:16px;}
.lp-field{margin-bottom:16px;}
.lp-field label{display:block; font-size:.84rem; color:var(--muted); margin-bottom:7px; font-weight:600;}
.lp-input{width:100%; padding:13px 15px; border-radius:12px; color:var(--ink); font-size:1rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  transition:border-color .15s, box-shadow .15s, background .15s; -webkit-appearance:none; appearance:none;}
.lp-input:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,0,.18); background:rgba(255,255,255,.06);}
select.lp-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239aa3ae' viewBox='0 0 16 16'%3E%3Cpath d='M1.6 4.6a.5.5 0 0 1 .7 0L8 10.3l5.6-5.7a.5.5 0 1 1 .8.8l-6 6a.5.5 0 0 1-.8 0l-6-6a.5.5 0 0 1 0-.8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;}
.lp-field-err{color:#ff9a7a; font-size:.82rem; margin-top:6px;}
.lp-login-card .lp-btn{width:100%; margin-top:8px;}
.lp-login-foot{margin-top:18px; font-size:.9rem; color:var(--muted); text-align:center;}
.lp-login-foot a{color:var(--accent);}
.lp-login-foot a:hover{text-decoration:underline;}

/* Mobile: login centered, no scroll; the scene becomes a dimmed full-bg. */
@media(max-width:860px){
  .lp-login{grid-template-columns:1fr;}
  /* Full-screen monolith behind, but raised so the eye sits clearly ABOVE the
     card; card anchors to the bottom so it stays center-of-attention with no
     scroll. Scrim is light up top (monolith visible) and dark behind the card. */
  .lp-login-scene{position:fixed; inset:0; z-index:0; border:none;}
  .lp-login-scene-copy{display:none;}
  .lp-login-scene .ms-monolith{bottom:auto; top:1%; height:62%; width:clamp(132px,36vw,176px);}
  .lp-login-scene .ms-glow{bottom:auto; top:4%; height:48%; width:88%;}
  .lp-login-scene .ms-eye{width:clamp(56px,16vw,76px);}
  .lp-login-scene .ms-ground{opacity:.5;}
  .lp-login-scene .ms-scrim{background:linear-gradient(180deg,
    rgba(6,6,8,.18) 0%, rgba(6,6,8,.5) 46%, rgba(6,6,8,.9) 78%);}
  .lp-login-panel{min-height:100dvh; z-index:2; padding:20px; align-items:flex-end;}
  .lp-login-card{background:rgba(13,13,18,.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 30px 80px rgba(0,0,0,.7); margin-bottom:6px;}
}
/* Very short phones: keep everything in one screen — trim card padding. */
@media(max-width:860px) and (max-height:680px){
  .lp-login-scene .ms-monolith{height:52%;}
  .lp-login-card{padding:20px 18px;}
  .lp-login-brand{margin-bottom:16px;}
  .lp-login-sub{margin:6px 0 16px;}
}