/* Pontaj UI 10.11.18: responsive operating interface. */
:root { --bg:#0a0d12; --surface:#121720; --surface-raised:#181f2b; --line:rgba(205,219,238,.12); --line-strong:rgba(205,219,238,.22); --text:#f6f8fc; --muted:#98a4b7; --accent:#ff7a1a; --accent-soft:#ffc089; --green:#36d399; --red:#fb7185; --yellow:#fbbf24; --blue:#7dd3fc; }
body { background:radial-gradient(950px 550px at 4% -10%,rgba(255,122,26,.18),transparent 62%),radial-gradient(800px 500px at 102% 7%,rgba(77,151,255,.12),transparent 58%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { min-height:40px; border-radius:10px; transition:transform .16s ease,background-color .16s ease,border-color .16s ease; }
button:hover { transform:translateY(-1px); }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(255,122,26,.35); outline-offset:2px; }
.login-stage { min-height:100svh; padding:clamp(18px,4vw,56px); align-items:center; }
.login-stage-grid { opacity:.42; background-size:42px 42px; mask-image:radial-gradient(ellipse 76% 72% at 42% 40%,black,transparent 80%); }
.login-stage-content { width:min(1220px,100%); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:clamp(30px,6vw,92px); align-items:center; }
.login-copy { max-width:760px; }
.login-stage-kicker { border:1px solid rgba(255,122,26,.4); background:rgba(255,122,26,.08); color:var(--accent-soft); letter-spacing:.11em; }
.login-stage-title { font-size:clamp(42px,6vw,78px); line-height:.98; letter-spacing:-.065em; max-width:720px; text-wrap:balance; }
.login-stage-text { font-size:clamp(16px,1.45vw,20px); line-height:1.62; max-width:670px; color:#c0cada; }
.login-stage .card { background:linear-gradient(148deg,rgba(26,33,45,.96),rgba(15,19,27,.96)); border:1px solid var(--line-strong); box-shadow:0 28px 80px rgba(0,0,0,.35); border-radius:22px; }
.login-downloads { grid-template-columns:1fr 1fr; }
.login-downloads button,#install-pwa { border-color:var(--line-strong); background:#1b2330; }
.product-story-card,.pro-sol-card,.login-preview-window { border-color:var(--line); background:rgba(18,23,32,.74); border-radius:16px; }
.product-story-card { padding:18px; }
.product-story-card strong { color:#fff; font-size:15px; }
.product-story-note { color:var(--muted); border-top-color:var(--line); }
#app-view > header { position:sticky; top:0; z-index:20; backdrop-filter:blur(18px); background:rgba(10,13,18,.84); border-bottom:1px solid var(--line); box-shadow:0 10px 32px rgba(0,0,0,.15); }
header .logo { gap:11px; letter-spacing:-.02em; }
header .logo::before { content:''; width:10px; height:10px; flex:none; border-radius:99px; background:var(--green); box-shadow:0 0 0 4px rgba(54,211,153,.13),0 0 16px rgba(54,211,153,.62); }
nav { gap:2px; padding:4px; border-radius:12px; background:rgba(255,255,255,.025); }
nav button { border-radius:8px; color:var(--muted); }
nav button.active { color:#fff; background:rgba(255,122,26,.14); box-shadow:inset 0 0 0 1px rgba(255,122,26,.24); }
.mobile-app-nav,.mobile-more-menu { display:none; }
main { max-width:1600px; margin:0 auto; padding:clamp(18px,3vw,36px); gap:20px; }
.card,section.card { background:linear-gradient(155deg,rgba(25,32,44,.96),rgba(16,21,30,.98)); border-color:var(--line); border-radius:16px; box-shadow:0 14px 36px rgba(0,0,0,.12); }
.overview-hero { position:relative; overflow:hidden; border-color:rgba(255,122,26,.25); background:linear-gradient(115deg,rgba(255,122,26,.16),rgba(24,31,43,.98) 45%,rgba(15,20,29,.98)); }
.overview-hero::after { content:''; position:absolute; width:440px; height:440px; right:-180px; top:-260px; border:1px solid rgba(255,192,137,.18); border-radius:50%; box-shadow:0 0 0 54px rgba(255,122,26,.03),0 0 0 110px rgba(255,122,26,.025); pointer-events:none; }
.overview-hero h2 { font-size:clamp(24px,3vw,38px); letter-spacing:-.04em; }
.metric,.stat,.kpi { background:rgba(8,11,16,.33); border:1px solid var(--line); border-radius:13px; }
.table-wrap { border:1px solid var(--line); border-radius:13px; overflow:auto; }
table { border-collapse:separate; border-spacing:0; }
th { background:rgba(7,10,15,.42); color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
td,th { border-bottom-color:var(--line) !important; }
tbody tr { transition:background-color .16s ease; }
tbody tr:hover { background:rgba(255,122,26,.055); }
input,select,textarea { color:var(--text); background:rgba(5,8,12,.43); border-color:var(--line-strong); border-radius:9px; }
input::placeholder,textarea::placeholder { color:#718097; }
button.primary,button[type="submit"],.primary { background:linear-gradient(135deg,#ff8b37,#ff6416); border:0; color:#211006; font-weight:800; box-shadow:0 10px 22px rgba(255,100,22,.18); }
.badge,.chip { border-radius:99px; border-color:var(--line-strong); }
@media (max-width:980px) { .login-stage-content { grid-template-columns:1fr; gap:30px; } .login-copy { max-width:none; } #app-view > header { position:relative; } }
@media (max-width:700px) {
  .login-stage,.login-stage-content,.login-copy,.login-visual { min-width:0; max-width:100%; }
  .login-stage { padding:14px; align-items:start; overflow:hidden; }
  .login-stage-kicker { width:auto; max-width:100%; white-space:normal; line-height:1.35; }
  .login-stage-title { font-size:clamp(32px,10vw,42px); letter-spacing:-.045em; overflow-wrap:anywhere; text-wrap:pretty; }
  .login-stage-text { font-size:16px; }
  .product-story { display:none; }
  .login-stage .card { border-radius:17px; }
  #app-view > header { padding:12px 14px; }
  #app-view > header nav { display:none; }
  main { padding:14px 14px calc(92px + env(safe-area-inset-bottom)); }
  .card,section.card { border-radius:14px; }
  .overview-hero::after { right:-250px; }
  .mobile-app-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); background:rgba(8,11,16,.96);
    backdrop-filter:blur(18px); box-shadow:0 -16px 32px rgba(0,0,0,.34);
  }
  .mobile-nav-button {
    min-width:0; min-height:54px; padding:6px 2px; border:0; border-radius:11px;
    background:transparent; color:var(--muted); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px; font-size:10px; font-weight:800;
  }
  .mobile-nav-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-nav-button.active { color:#fff; background:rgba(255,122,26,.16); box-shadow:inset 0 0 0 1px rgba(255,122,26,.28); }
  .mobile-more-menu {
    position:fixed; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:41;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px;
    max-height:min(64dvh,460px); overflow:auto; border:1px solid var(--line); border-radius:18px;
    background:rgba(18,24,34,.98); box-shadow:0 24px 70px rgba(0,0,0,.56);
  }
  .mobile-more-menu[hidden] { display:none; }
  .mobile-more-menu button { min-height:48px; padding:11px; text-align:left; background:var(--surface-raised); color:var(--text); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }