/* ==========================================================================
   SBD Management — v2.css  (the "tech" layer on top of styles.css)
   Glass, glow, animated hero network, timeline, photo frames, form states,
   rent panel, app install. Delete this file to go back to the plain look.
   ========================================================================== */
:root{--glass:rgba(22,22,26,.55);--glass-line:rgba(210,174,94,.22);--glow:0 0 0 1px rgba(210,174,94,.35),0 18px 60px -18px rgba(210,174,94,.55)}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none}
.progress-bar{height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold-3),var(--gold-2),var(--gold));box-shadow:0 0 12px rgba(241,216,143,.7)}

/* glass utility + cards */
.glass{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 60%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(241,216,143,.55),transparent 35%,transparent 65%,rgba(210,174,94,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{box-shadow:0 30px 70px -30px rgba(210,174,94,.45)}
.section-light .card{-webkit-backdrop-filter:none;backdrop-filter:none}
.card .icon{box-shadow:0 0 0 1px rgba(210,174,94,.25),0 0 24px -6px rgba(210,174,94,.6)}

/* buttons: shine sweep + glow */
.btn{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-gold:hover::after{left:130%}
.btn-ghost:hover{box-shadow:var(--glow)}
.btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* ---------- HERO ---------- */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(10,10,11,.96) 0%,rgba(10,10,11,.82) 45%,rgba(10,10,11,.55) 100%),radial-gradient(80% 60% at 80% 30%,rgba(210,174,94,.18),transparent 70%)}
.hero-beam{position:absolute;z-index:-1;top:-30%;left:40%;width:2px;height:160%;background:linear-gradient(180deg,transparent,rgba(241,216,143,.6),transparent);transform:rotate(28deg);filter:blur(1px);animation:beam 9s ease-in-out infinite;opacity:.5;pointer-events:none}
@keyframes beam{0%,100%{transform:translateX(-180px) rotate(28deg);opacity:0}40%,60%{opacity:.55}50%{transform:translateX(220px) rotate(28deg)}}
.hero-layout{display:grid;gap:40px;align-items:center}
.hero-content{max-width:680px}
.hero h1 .gold-text{text-shadow:0 0 40px rgba(210,174,94,.35)}
.hero-visual{position:relative;max-width:560px;width:100%;margin:0 auto}
.hv-frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3.1;border:1px solid rgba(241,216,143,.35);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(210,174,94,.5);transition:transform .25s ease-out;transform-style:preserve-3d}
.hv-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.hv-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(210,174,94,.28),transparent 45%),linear-gradient(0deg,rgba(10,10,11,.55),transparent 45%);mix-blend-mode:normal;pointer-events:none}
.hv-shine{position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(-100%);animation:shine 6s ease-in-out 1.2s infinite}
@keyframes shine{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}}
.hv-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(18,18,21,.72);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 40px -18px rgba(0,0,0,.8);font-size:.86rem;line-height:1.3;animation:bob 6s ease-in-out infinite}
.hv-chip b{display:block;font-weight:600}
.hv-chip small{color:var(--muted);font-size:.76rem}
.hv-chip-1{left:-14px;bottom:18%}
.hv-chip-2{right:-10px;top:8%;animation-delay:-3s}
.hv-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#141008;flex:none}
.hv-ic svg{width:16px;height:16px}
.pulse{position:relative;width:10px;height:10px;border-radius:50%;background:#7be08f;flex:none;box-shadow:0 0 0 0 rgba(123,224,143,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(123,224,143,0)}100%{box-shadow:0 0 0 0 rgba(123,224,143,0)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(max-width:600px){.hv-chip{font-size:.78rem;padding:10px 12px}.hv-chip-1{left:8px;bottom:10px}.hv-chip-2{right:8px;top:10px}.hv-chip small{display:none}}
@media(min-width:1000px){.hero-layout{grid-template-columns:1.1fr .9fr;gap:56px}.hero-visual{margin:0}}
@media(max-width:999px){.hero{min-height:auto;padding-top:110px}}

/* stats: glowing numbers */
.stat-num{text-shadow:0 0 30px rgba(210,174,94,.35)}
.stats-grid{position:relative}
.stats-grid::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}

/* dashboard mock: live feel */
.dash{background:linear-gradient(180deg,rgba(26,26,30,.85),rgba(14,14,16,.92));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 70px -25px rgba(210,174,94,.55)}
.dash .bars b{transform-origin:bottom;animation:grow 1.4s var(--ease) both}
.dash .bars b:nth-child(2){animation-delay:.08s}.dash .bars b:nth-child(3){animation-delay:.16s}.dash .bars b:nth-child(4){animation-delay:.24s}.dash .bars b:nth-child(5){animation-delay:.32s}.dash .bars b:nth-child(6){animation-delay:.4s}.dash .bars b:nth-child(7){animation-delay:.48s}.dash .bars b:nth-child(8){animation-delay:.56s}.dash .bars b:nth-child(9){animation-delay:.64s}.dash .bars b:nth-child(10){animation-delay:.72s}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- HOW IT WORKS: timeline ---------- */
.how{position:relative;overflow:hidden}
.how::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,rgba(210,174,94,.12),transparent 70%);pointer-events:none}
.flow{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:22px}
.flow::before{content:"";position:absolute;left:23px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(210,174,94,.1));box-shadow:0 0 14px rgba(210,174,94,.6)}
.tl-item{position:relative;display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start}
.tl-node{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#121214;border:1px solid var(--gold);color:var(--gold-2);box-shadow:0 0 0 6px rgba(210,174,94,.08),0 0 24px rgba(210,174,94,.45)}
.tl-node svg{width:22px;height:22px}
.tl-card{padding:22px 22px 20px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));border:1px solid var(--line);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.tl-card:hover{border-color:rgba(210,174,94,.5);transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(210,174,94,.5)}
.tl-step{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:600}
.tl-card h3{font-size:1.2rem}
.tl-card p{color:var(--muted);font-size:.95rem;margin:0}
@media(min-width:900px){
  .flow{grid-template-columns:repeat(4,1fr);gap:22px}
  .flow::before{left:24px;right:24px;top:23px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--gold),rgba(210,174,94,.15))}
  .tl-item{grid-template-columns:1fr;gap:18px}
}

/* ---------- photos with gold tint ---------- */
.photo-frame{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/2;border:1px solid rgba(241,216,143,.3);box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 60px -28px rgba(210,174,94,.6);transition:transform .25s ease-out}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.gold-tint::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(210,174,94,.25),transparent 50%),linear-gradient(0deg,rgba(10,10,11,.45),transparent 40%);pointer-events:none}
.gold-tint::after{content:"";position:absolute;inset:12px;z-index:2;border:1px solid rgba(241,216,143,.25);border-radius:16px;pointer-events:none}

/* ---------- forms ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-card{position:relative;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 70px -30px rgba(210,174,94,.5)}
.field input,.field select,.field textarea{transition:border-color .25s,box-shadow .25s,background .25s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px rgba(210,174,94,.15),0 0 24px -6px rgba(210,174,94,.6)!important;outline:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#e07b7b!important;box-shadow:0 0 0 3px rgba(224,123,123,.18)!important}
.field.invalid label::after{content:" · required";color:#f0a3a3;font-weight:500}
.form-note{display:flex;align-items:center;gap:8px}
.form-note svg{width:15px;height:15px;color:var(--gold);flex:none}
.btn-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(20,16,8,.35);border-top-color:#141008;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
form.sending .btn-spin{display:inline-block}
form.sending [type=submit] svg{display:none}
form.sending [type=submit]{opacity:.85;cursor:progress}
.form-ok{text-align:center;padding:30px 22px;background:linear-gradient(160deg,rgba(210,174,94,.14),rgba(210,174,94,.04));border:1px solid rgba(210,174,94,.45);color:var(--white)}
.form-ok:focus{outline:none}
.form-ok h4{font-family:var(--serif);font-size:1.4rem;margin:10px 0 6px}
.form-ok p{color:#d8d8dd;margin:0 0 16px}
.form-ok a{color:var(--gold-2);white-space:nowrap}
.form-err a{white-space:nowrap}
.ok-icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:#141008;box-shadow:0 0 0 8px rgba(210,174,94,.12),0 0 40px rgba(210,174,94,.6);animation:pop .5s var(--ease)}
.ok-icon svg{width:28px;height:28px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
form.sent>*:not(.form-ok){display:none!important}
form.sent .form-ok{display:block;margin:0}
.form-err{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:rgba(224,123,123,.1);border:1px solid rgba(224,123,123,.4);color:#f6d0d0;font-size:.92rem}
.form-err.show{display:block}
.form-err a{color:#fff;font-weight:600}

/* ---------- rent "coming soon" panel ---------- */
.soon{margin-top:22px;padding:26px 24px;border-radius:22px}
.soon h3{font-size:1.35rem;margin-bottom:.4em}
.soon p{color:#cfcfd5}
.soon-tag{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:12px}
.soon-tag .pulse{background:var(--gold);animation-name:pulseg}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(210,174,94,.7)}70%{box-shadow:0 0 0 10px rgba(210,174,94,0)}100%{box-shadow:0 0 0 0 rgba(210,174,94,0)}}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:inset 0 0 0 2px rgba(241,216,143,.9)}100%{box-shadow:inset 0 0 0 2px rgba(241,216,143,0)}}
section[id]{scroll-margin-top:70px}

/* ---------- app install ---------- */
.install{display:grid;gap:24px;align-items:center;padding:30px 24px;border-radius:28px;position:relative;overflow:hidden}
.install::before{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(210,174,94,.35),transparent 70%);filter:blur(30px);pointer-events:none}
.install-icon img{width:96px;height:96px;border-radius:24px;border:1px solid rgba(241,216,143,.4);box-shadow:0 0 40px -6px rgba(210,174,94,.7)}
.install h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.install-hint{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.92rem;color:#e4e4e8}
.kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;border:1px solid rgba(241,216,143,.5);color:var(--gold-2);font-weight:700}
@media(min-width:800px){.install{grid-template-columns:auto 1fr;padding:44px 48px;gap:36px}.install-icon img{width:120px;height:120px;border-radius:28px}}

/* offline page */
.offline{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.offline img{margin-bottom:28px}

@media(prefers-reduced-motion:reduce){.hero-beam,.hv-shine,.hv-chip,.pulse{animation:none!important}.hero-canvas{display:none}}