/* IVVI — "Final site" preview (draft). Full top navigation + scaffold pages for
   Pricing, Product tour, Tutorials and Other apps, all in the existing visual
   language. Toggled by the Tweaks panel; nothing here loads unless finalSite is on. */

/* ---------- top navigation injected into the topbar ---------- */
.site-nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.site-nav a{position:relative;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.2px;color:#b9c6e8;padding:9px 13px;border-radius:10px;transition:.18s;white-space:nowrap}
.site-nav a:hover{color:#fff;background:rgba(159,216,255,.08)}
.site-nav a.active{color:#fff;background:rgba(159,216,255,.12)}
.site-nav a.has-menu::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;margin-left:2px}

/* modules dropdown */
.nav-drop{position:relative}
.nav-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:230px;
  background:linear-gradient(180deg,#151b3d,#0e1330);border:1px solid rgba(159,216,255,.2);
  border-radius:14px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-weight:600;color:#c8d4f0}
.nav-menu a:hover{background:rgba(159,216,255,.08)}
.nav-menu .nm-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 10px currentColor}
.nav-menu .nm-acr{font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;opacity:.7;margin-left:auto}

/* login link + demo button on the right */
.top-right .nav-login{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;color:#b9c6e8;padding:9px 12px;border-radius:10px;transition:.18s}
.top-right .nav-login:hover{color:#fff;background:rgba(159,216,255,.08)}

@media (max-width:1180px){ .site-nav a{padding:9px 10px;font-size:13.5px} }
@media (max-width:1020px){ .site-nav,.top-right .nav-login{display:none} }

/* ---------- left-rail side menu (landing) — in tune with the app's left menu ---------- */
.fs-sidemenu{display:flex;flex-direction:column;gap:5px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(159,216,255,.14);max-width:320px}
.fs-sidemenu a{display:flex;align-items:center;gap:13px;padding:10px 13px;border-radius:12px;text-decoration:none;
  font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:.2px;color:#c3d0ee;
  border:1px solid transparent;transition:.18s}
.fs-sidemenu a:hover{background:rgba(159,216,255,.08);color:#fff}
.fs-sidemenu a.active{background:rgba(159,216,255,.12);color:#fff;border-color:rgba(159,216,255,.2)}
.fs-sidemenu .sm-ico{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:rgba(159,216,255,.09);color:#9fd8ff;transition:.18s}
.fs-sidemenu .sm-ico svg{width:18px;height:18px}
.fs-sidemenu a:hover .sm-ico,.fs-sidemenu a.active .sm-ico{background:color-mix(in srgb,#4f8fff 30%,transparent);color:#fff}
.fs-sidemenu .sm-soon{margin-left:auto;font-family:'Chakra Petch',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:#8ea0c8}
@media (max-width:860px){ .fs-sidemenu{max-width:560px;margin-left:auto;margin-right:auto} }

/* keep the left rail from clipping the menu on shorter viewports */
body.fs-on #view-landing .rail-left{overflow-y:auto;scrollbar-width:none;padding-top:72px;padding-bottom:60px}
body.fs-on #view-landing .rail-left::-webkit-scrollbar{display:none}
body.fs-on #view-landing .headline{margin-bottom:18px}
body.fs-on #view-landing .adv{margin-bottom:14px}

/* ---------- shared scaffold view chrome ---------- */
.fs-view .field{position:fixed;inset:0;z-index:0;pointer-events:none}
.fs-view .field::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 116%, color-mix(in srgb, var(--c) 34%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 50% 18%, #1c2350 0%, #141a3c 50%, #0c1028 100%)}
.fs-view .spiral-field{position:absolute;inset:0;overflow:hidden;color:var(--c);opacity:.5;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 45%, transparent 85%);
          mask-image:radial-gradient(circle at 50% 30%, #000 45%, transparent 85%)}
.fs-view .spiral-field svg{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%)}

/* ---------- app-style shell: fixed left sidebar + scrolling main ---------- */
.fs-shell{position:relative;z-index:2;display:flex;min-height:100vh}
.fs-side{position:fixed;top:0;left:0;bottom:0;width:264px;z-index:6;display:flex;flex-direction:column;
  padding:22px 18px 20px;gap:8px;
  background:linear-gradient(180deg,rgba(18,24,54,.86),rgba(11,16,40,.92));
  border-right:1px solid rgba(159,216,255,.12);backdrop-filter:blur(8px)}
.fs-side .brand{display:flex;align-items:center;gap:9px;text-decoration:none;padding:4px 8px 16px;
  margin-bottom:6px;border-bottom:1px solid rgba(159,216,255,.1)}
.fs-side .brand-icon{height:54px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(120,170,255,.4))}
.fs-side .brand .wordmark{height:30px;width:auto;display:block}
.fs-sidemenu.side{margin:6px 0 0;padding:0;border:0;max-width:none;gap:4px;flex:1}
.fs-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:16px;
  border-top:1px solid rgba(159,216,255,.1)}
.fs-side-foot .lang-toggle{align-self:flex-start}
.fs-side-foot .contact{justify-content:center}
.fs-main{flex:1;min-width:0;margin-left:264px;min-height:100vh}

.fs-topbar{display:none}
.fs-view .contact{display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:15px;letter-spacing:.4px;color:#0a0a18;
  background:var(--c);padding:12px 24px;border-radius:999px;
  box-shadow:0 8px 26px color-mix(in srgb,var(--c) 50%,transparent);transition:.2s}
.fs-view .contact:hover{transform:translateY(-2px);box-shadow:0 12px 32px color-mix(in srgb,var(--c) 65%,transparent)}

.fs-stage{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:56px 44px 90px}
.fs-hero{text-align:left;max-width:760px;margin:0 0 40px}
.fs-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Chakra Petch',monospace;font-size:12px;
  font-weight:600;letter-spacing:5px;text-transform:uppercase;color:var(--c);margin:0 0 14px}
.fs-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.fs-h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(30px,4vw,46px);line-height:1.06;
  letter-spacing:.3px;color:#fff;margin:0 0 14px;text-wrap:balance}
.fs-lead{font-family:'Chakra Petch',sans-serif;font-size:16px;line-height:1.6;color:#b9c6e8;margin:0;max-width:46em}

.fs-draft{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:6px 14px;border-radius:999px;
  font-family:'Chakra Petch',sans-serif;font-size:12px;font-weight:600;letter-spacing:.4px;color:#ffd8a8;
  background:rgba(255,174,66,.1);border:1px solid rgba(255,174,66,.32)}
.fs-draft::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffae42;box-shadow:0 0 8px #ffae42}

/* ---------- pricing ---------- */
.fs-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;padding:26px 24px 28px;border-radius:18px;
  background:rgba(159,216,255,.045);border:1px solid rgba(159,216,255,.16)}
.price-card.feature{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,#101638),#0e1330);
  border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.price-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:'Chakra Petch',sans-serif;
  font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#0a0a18;background:var(--c);
  padding:5px 14px;border-radius:999px;white-space:nowrap}
.price-name{font-family:'Oswald',sans-serif;font-weight:600;font-size:20px;letter-spacing:.4px;color:#fff;margin:0 0 4px}
.price-for{font-family:'Chakra Petch',sans-serif;font-size:13px;color:#9fb0d6;margin:0 0 18px;min-height:2.6em}
.price-amt{display:flex;align-items:baseline;gap:6px;margin:0 0 20px}
.price-amt b{font-family:'Oswald',sans-serif;font-weight:700;font-size:34px;color:#fff;letter-spacing:.5px}
.price-amt span{font-family:'Chakra Petch',sans-serif;font-size:13px;color:#9fb0d6}
.price-feats{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.price-feats li{position:relative;padding-left:26px;font-family:'Chakra Petch',sans-serif;font-size:14px;
  line-height:1.4;color:#c8d4f0}
.price-feats li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 26%,transparent)}
.price-feats li::after{content:"";position:absolute;left:5px;top:6px;width:5px;height:8px;
  border-right:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(42deg)}
.price-cta{margin-top:auto;display:inline-flex;justify-content:center;text-decoration:none;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:11px;transition:.2s}
.price-cta.solid{color:#0a0a18;background:var(--c)}
.price-cta.solid:hover{filter:brightness(1.08);transform:translateY(-2px)}
.price-cta.ghost{color:#dbe6ff;border:1px solid rgba(159,216,255,.28)}
.price-cta.ghost:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}

/* ---------- product tour (screenshots) ---------- */
.fs-tour{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.shot{border-radius:16px;overflow:hidden;background:#0d1330;border:1px solid rgba(159,216,255,.16);
  box-shadow:0 16px 46px rgba(0,0,0,.4)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:rgba(159,216,255,.05);
  border-bottom:1px solid rgba(159,216,255,.1)}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:rgba(159,216,255,.28)}
.shot-bar .shot-url{margin-left:10px;font-family:'Chakra Petch',monospace;font-size:11.5px;color:#8ea0c8;
  letter-spacing:.3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.shot-body{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  position:relative;background:
    linear-gradient(135deg,color-mix(in srgb,var(--sc,#4f8fff) 16%,#0e1430),#0b1128);
  color:color-mix(in srgb,var(--sc,#4f8fff) 78%,#fff)}
.shot-body svg{width:42px;height:42px;opacity:.9}
.shot-cap{font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.3px;color:#fff;text-align:center;padding:0 20px}
.shot-hint{font-family:'Chakra Petch',sans-serif;font-size:12px;color:#8ea0c8}
.shot-tag{position:absolute;top:12px;left:12px;font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:1px;color:#0a0a18;background:var(--sc,#4f8fff);padding:3px 9px;border-radius:6px}

/* ---------- tutorials ---------- */
.fs-tuts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tut{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:14px;
  background:rgba(159,216,255,.05);border:1px solid rgba(159,216,255,.14);transition:.2s;text-decoration:none}
.tut:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:rgba(159,216,255,.08)}
.tut-thumb{flex:0 0 auto;width:78px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tc,#4f8fff) 32%,#0e1430),#0b1128);color:#fff}
.tut-thumb svg{width:22px;height:22px;transform:translateX(1px)}
.tut-body{min-width:0;flex:1}
.tut-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;letter-spacing:.2px;color:#fff;margin:0 0 5px}
.tut-meta{display:flex;align-items:center;gap:10px;font-family:'Chakra Petch',sans-serif;font-size:12.5px;color:#9fb0d6}
.tut-mod{font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;letter-spacing:1px;padding:2px 8px;border-radius:6px;
  color:#0a0a18;background:var(--tc,#4f8fff)}
.tut-soon{margin-left:auto;font-family:'Chakra Petch',sans-serif;font-size:11px;font-weight:600;color:#ffd8a8;
  background:rgba(255,174,66,.12);border:1px solid rgba(255,174,66,.3);padding:3px 9px;border-radius:999px;white-space:nowrap}

/* ---------- other apps ---------- */
.fs-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.appc{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 22px 26px;border-radius:18px;
  background:rgba(159,216,255,.045);border:1px solid rgba(159,216,255,.15);transition:.2s;overflow:hidden}
.appc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ac,#4f8fff) 50%,transparent)}
.appc::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ac,#4f8fff);opacity:.9}
.app-ico{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ac,#4f8fff) 20%,#0e1430);color:var(--ac,#4f8fff)}
.app-ico svg{width:26px;height:26px}
.app-name{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:.3px;color:#fff;margin:0}
.app-desc{font-family:'Chakra Petch',sans-serif;font-size:13.5px;line-height:1.5;color:#b9c6e8;margin:0}
.app-soon{align-self:flex-start;margin-top:2px;font-family:'Chakra Petch',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.4px;color:#cdd8f2;background:rgba(159,216,255,.1);border:1px solid rgba(159,216,255,.24);
  padding:4px 11px;border-radius:999px}

.fs-secttitle{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;letter-spacing:.4px;color:#fff;
  margin:44px 0 20px;text-align:left}

/* ---------- pricing: included strip + FAQ ---------- */
.fs-incl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:24px;padding:18px 22px;border-radius:14px;
  background:rgba(159,216,255,.045);border:1px solid rgba(159,216,255,.14)}
.fs-incl-t{font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;letter-spacing:.6px;color:#fff;margin-right:6px}
.fs-incl-i{display:inline-flex;align-items:center;gap:8px;font-family:'Chakra Petch',sans-serif;font-size:13.5px;color:#c8d4f0}
.fs-incl-i svg{width:16px;height:16px;color:var(--c);flex:0 0 auto}
.fs-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.faq-q{padding:18px 20px;border-radius:14px;background:rgba(159,216,255,.045);border:1px solid rgba(159,216,255,.14)}
.faq-q h4{font-family:'Oswald',sans-serif;font-weight:600;font-size:15.5px;color:#fff;margin:0 0 8px;letter-spacing:.2px}
.faq-q p{font-family:'Chakra Petch',sans-serif;font-size:13.5px;line-height:1.5;color:#b9c6e8;margin:0}

.fs-note{font-family:'Chakra Petch',sans-serif;font-size:14px;color:#9fb0d6;margin:22px 0 0;text-align:center;
  padding:14px;border-radius:12px;background:rgba(159,216,255,.04);border:1px solid rgba(159,216,255,.1)}

/* ---------- tutorials: category chips ---------- */
.fs-cats{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px}
.fs-cat{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:13px;color:#b9c6e8;cursor:pointer;
  padding:8px 15px;border-radius:999px;background:rgba(159,216,255,.05);border:1px solid rgba(159,216,255,.16);transition:.18s}
.fs-cat:hover{color:#fff;border-color:rgba(159,216,255,.34)}
.fs-cat.on{color:#0a0a18;background:var(--c);border-color:transparent}

/* ---------- apps: notify strip ---------- */
.fs-notify{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:22px 26px;border-radius:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 14%,#101638),#0e1330);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent)}
.fs-notify span{font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;color:#fff;letter-spacing:.3px}

/* ---------- integrations ---------- */
.fs-integr{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.intg{display:flex;flex-direction:column;gap:11px;padding:22px 22px 24px;border-radius:18px;
  background:rgba(159,216,255,.045);border:1px solid rgba(159,216,255,.15);transition:.2s}
.intg:hover{border-color:color-mix(in srgb,var(--c) 42%,transparent)}
.intg .app-ico{width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,#0e1430);color:var(--c)}
.intg .app-ico svg{width:24px;height:24px}
.intg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.intg-chip{font-family:'Chakra Petch',sans-serif;font-size:12.5px;font-weight:600;color:#cdd8f2;
  padding:5px 11px;border-radius:8px;background:rgba(159,216,255,.08);border:1px solid rgba(159,216,255,.16)}

@media (max-width:900px){
  .fs-pricing,.fs-apps,.fs-faq,.fs-integr{grid-template-columns:1fr}
  .fs-tour,.fs-tuts{grid-template-columns:1fr}
}
@media (max-width:820px){
  .fs-side{position:sticky;width:auto;inset:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 16px}
  .fs-side .brand{border:0;padding:4px 8px;margin:0}
  .fs-sidemenu.side{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;order:3}
  .fs-side-foot{margin:0 0 0 auto;flex-direction:row;border:0;padding:0}
  .fs-main{margin-left:0}
  .fs-stage{padding:32px 22px 70px}
}