/* Vrandex Studio home page: the finish layer (trial).
   Loaded after site.css and only refines surfaces: no content, layout or animation changes.
   Restraint is the rule: white, ink and one blue. No coloured glows, no gradient type, no texture.
   What it adds: hairline rims, soft neutral depth, a glass bezel on the app window, quieter buttons.
   To go back to the plain look, remove the rich.css <link> in index.html. */

:root{
  --rim:rgba(0,0,0,.07);
  --soft:0 0 0 1px var(--rim),0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.14);
  --deep:0 0 0 1px var(--rim),0 2px 4px rgba(0,0,0,.04),0 28px 60px -28px rgba(0,0,0,.28);
}

/* ---------- Buttons ---------- */
.btn.black{background:#1d1d1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.2)}
.btn.black:hover{background:#000}
.btn.blue{background:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(20,40,140,.3),0 10px 24px -12px rgba(36,87,245,.55)}
.btn.blue:hover{background:#1f4de0}
.btn.grey{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.04)}
.btn.grey:hover{background:#fafafa;box-shadow:0 0 0 1px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.04)}

/* ---------- Nav ---------- */
.nav{background:rgba(255,255,255,.72)}
.nav.scrolled{border-bottom-color:var(--rim)}

/* ---------- 3. Hero: plain white; the window sits on a glass bezel ---------- */
.hero h1 .g{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue)}
.win{box-shadow:0 0 0 1px rgba(0,0,0,.09),0 0 0 8px rgba(245,245,247,.75),0 0 0 9px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.04),0 50px 100px -40px rgba(0,0,0,.3)}
.paper{box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 24px 44px -26px rgba(0,0,0,.35)}
.wurl{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.ai{box-shadow:var(--deep)}

/* ---------- 4. The tools ---------- */
.seg{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.seg .knob{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 6px -1px rgba(0,0,0,.12)}
.tview,.stage2{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.fig,.bld,.pln,.sw{box-shadow:var(--deep)}
.brd{box-shadow:0 0 0 1px var(--rim)}

/* ---------- 5. AI built in: white cards on the soft band ---------- */
.mc{background:#fff;box-shadow:var(--soft)}
.mc:hover{box-shadow:var(--deep)}
.mc .pv{box-shadow:0 0 0 1px var(--rim),0 -16px 36px -22px rgba(0,0,0,.3)}

/* ---------- 6. Your store, everywhere ---------- */
.st{transition:background .3s,box-shadow .3s}
.st.on{background:#fff;box-shadow:var(--soft)}
.st.on .n{background:var(--ink)}
.row,.plat{box-shadow:var(--soft)}
.plat.on{box-shadow:0 0 0 1.5px var(--blue),0 12px 32px -16px rgba(0,0,0,.14)}
.plat i[style*="--grad"]{background:var(--blue)!important}

/* ---------- 7. Four small features ---------- */
.ft{background:#fff;box-shadow:0 0 0 1px var(--rim)}
.ft:hover{box-shadow:var(--deep)}
.ft .fi{background:var(--tile);box-shadow:none;color:var(--ink)}

/* ---------- 8. Gallery ---------- */
.gi .c{box-shadow:0 0 0 1px var(--rim),0 22px 40px -28px rgba(0,0,0,.35)}

/* ---------- 9. For agencies ---------- */
.agency{background:#0a0a0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.45)}
.agency::before{background:radial-gradient(circle,rgba(110,124,255,.28),transparent 65%)}
.agency .eyebrow{color:#c3ccff;background:rgba(159,176,255,.12);box-shadow:inset 0 0 0 .5px rgba(159,176,255,.25)}
.agency li svg{color:#fff}

/* ---------- 10. The pilot ---------- */
.pcard{background:#fff;box-shadow:0 0 0 1px var(--rim)}
.pcard.main{background:var(--tile);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.soon{box-shadow:0 0 0 1px var(--rim)}
.pcard .soon{background:#fff}
.pcard:not(.main) .soon{background:var(--tile);box-shadow:none}

/* ---------- 11. FAQ ---------- */
.qa button i{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.qa.open button i{box-shadow:none}

/* ---------- 12. Sign-up ---------- */
.fstack>div{box-shadow:0 0 0 1px var(--rim),0 22px 40px -24px rgba(0,0,0,.35)}
.join{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.04),0 20px 44px -24px rgba(0,0,0,.2)}
.join:focus-within{box-shadow:0 0 0 1.5px var(--blue),0 0 0 5px rgba(36,87,245,.12)}

/* ---------- Small screens ---------- */
@media (max-width:680px){
  .win{box-shadow:0 0 0 1px rgba(0,0,0,.09),0 0 0 5px rgba(245,245,247,.75),0 0 0 6px rgba(0,0,0,.05),0 36px 70px -36px rgba(0,0,0,.3)}
}