/* ==========================================================================
   Marketing-only visual/animation layer — loaded ONLY on the homepage.
   Restores richer elements from the original smartrise-live.html concept
   site that were left out of the first PHP port: animated hero shaft,
   IoT status card, floor indicator, automation "how it works" funnel,
   specialty-lift mini-shafts, and the trust strip. Deliberately kept
   separate from style.css (shared by admin/portal/wizard) so none of this
   can affect already-tested pages.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Nav extras: Instagram/WhatsApp icons + floor readout ---------- */
.icon-link{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:4px; color:var(--fog); border:1px solid var(--line-dark); transition:color .2s ease, border-color .2s ease; }
.icon-link:hover{ color:#fff; border-color:var(--orange); }
.icon-link svg{ width:16px; height:16px; }
.icon-link--dark{ color:var(--ink-soft); border-color:var(--line-light); }
.icon-link--dark:hover{ color:var(--orange-dark); border-color:var(--orange); }
.readout{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--teal-deep); border:1px solid var(--line-dark); border-radius:3px; }
.readout-label{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:var(--fog); text-transform:uppercase; }
.readout-value{ font-family:'JetBrains Mono',monospace; font-size:.95rem; font-weight:600; color:var(--orange); text-shadow:0 0 8px rgba(246,152,16,.5); min-width:26px; text-align:center; transition:opacity .15s ease; }
@media (max-width:1024px){ .readout-label{ display:none; } }
@media (max-width:640px){ .readout{ display:none; } }

/* ---------- Hero CTAs / proof line ---------- */
.hero-ctas{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-scrolldown{ font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-light); padding-bottom:2px; transition:border-color .2s ease, color .2s ease; }
.hero-scrolldown:hover{ color:var(--orange-dark); border-color:var(--orange-dark); }
.hero-proof{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line-light); font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--ink-soft); }

/* ---------- Hero visual: animated shaft ---------- */
.hero-grid{ display:grid; grid-template-columns:1.05fr .85fr; gap:56px; align-items:center; }
.hero-visual{ position:relative; margin-bottom:76px; }
.shaft{ position:relative; height:400px; background:var(--teal); border-radius:6px; border:1px solid var(--line-dark); overflow:hidden; box-shadow:var(--shadow); }
.shaft::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.5px); background-size:24px 24px; }
.shaft-floors{ position:absolute; inset:0; display:flex; flex-direction:column-reverse; }
.shaft-floor{ flex:1; border-top:1px dashed var(--line-dark); display:flex; align-items:center; padding:0 16px; }
.shaft-floor:first-child{ border-top:none; }
.shaft-floor span{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--fog); letter-spacing:.08em; }
.shaft-cable{ position:absolute; top:0; left:50%; width:1px; height:100%; background:linear-gradient(to bottom, var(--orange), transparent 85%); opacity:.55; }
.shaft-cab{ position:absolute; left:50%; width:72px; height:52px; margin-left:-36px; background:linear-gradient(180deg,#0C4A54,var(--teal-deep)); border:1px solid var(--orange); border-radius:4px; box-shadow:0 0 24px rgba(246,152,16,.22); animation:cabRise 9s ease-in-out infinite; display:flex; align-items:center; justify-content:center; }
.shaft-cab::before, .shaft-cab::after{ content:''; position:absolute; inset:-6px; border:1px solid var(--orange); border-radius:8px; opacity:0; animation:cabPing 2.6s ease-out infinite; }
.shaft-cab::after{ animation-delay:1.3s; }
.shaft-cab img{ width:20px; height:auto; position:relative; z-index:1; filter:brightness(0) invert(1); opacity:.95; }
@keyframes cabRise{ 0%{ top:82%; } 45%{ top:14%; } 55%{ top:14%; } 100%{ top:82%; } }
@keyframes cabPing{ 0%{ opacity:.55; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
@media (prefers-reduced-motion: reduce){ .shaft-cab{ animation:none; top:60%; } .shaft-cab::before, .shaft-cab::after{ animation:none; opacity:0; } }

.doors{ position:absolute; inset:0; z-index:5; display:flex; pointer-events:none; }
.door{ flex:1; background:var(--teal); border:1px solid var(--line-dark); }
.door--l{ animation:doorL .9s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.35s; }
.door--r{ animation:doorR .9s cubic-bezier(.65,0,.35,1) forwards; animation-delay:.35s; }
@keyframes doorL{ to{ transform:translateX(-101%); } }
@keyframes doorR{ to{ transform:translateX(101%); } }
@media (prefers-reduced-motion: reduce){ .doors{ display:none; } }

/* ---------- Live dot (nav readout + IoT card + automation eyebrow) ---------- */
.live-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:#2ECC71; flex-shrink:0; display:inline-block; }
.live-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid #2ECC71; animation:livePing 1.8s ease-out infinite; }
@keyframes livePing{ 0%{ opacity:.75; transform:scale(.6); } 100%{ opacity:0; transform:scale(2.3); } }
@media (prefers-reduced-motion: reduce){ .live-dot::after{ animation:none; opacity:0; } }

/* ---------- Floating IoT status card ---------- */
.iot-card{ position:absolute; left:20px; right:20px; bottom:-56px; z-index:6; background:#fff; border-radius:8px; border:1px solid var(--line-light); box-shadow:var(--shadow); padding:18px 20px; }
.iot-card-top{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.iot-card-top span{ font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.iot-devices{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.iot-device{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.iot-device-icon{ position:relative; width:34px; height:34px; border-radius:8px; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; }
.iot-device-icon svg{ width:15px; height:15px; }
.iot-device-icon .dot{ position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#2ECC71; border:2px solid #fff; }
.iot-device span{ font-size:.64rem; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; }
@media (max-width:520px){ .iot-devices{ grid-template-columns:repeat(2,1fr); row-gap:14px; } }
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .shaft{ height:320px; }
  .iot-card{ left:12px; right:12px; padding:15px; bottom:-62px; }
}

/* ---------- Product section layout (commercial/residential/automation) ---------- */
.product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.product-h2{ font-size:clamp(1.7rem,2.8vw,2.3rem); font-weight:700; line-height:1.2; color:var(--teal); }
.section--dark .product-h2{ color:#fff; }
.product-body{ margin-top:18px; font-size:1.02rem; max-width:520px; color:var(--ink-soft); }
.section--dark .product-body{ color:var(--fog); }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- Partner card enrichments (badge + title) ---------- */
.partner-badge{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; padding:8px 14px; border-radius:4px; background:var(--teal); color:#fff; font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.section--dark .partner-badge{ background:var(--orange); }
.partner-title{ display:flex; align-items:center; gap:12px; }
.product-eyebrow{ margin-bottom:0; }

/* ---------- Automation "How it works" funnel ---------- */
.how-smart-wrap{ margin-top:80px; padding-top:64px; border-top:1px solid var(--line-dark); }
.how-smart-head{ text-align:center; max-width:520px; margin:0 auto; }
.how-smart-title{ font-size:clamp(1.35rem,2.3vw,1.7rem); font-weight:700; color:#fff; margin-top:12px; font-family:'Sora',sans-serif; }
.how-smart-sub{ font-size:.9rem; color:var(--fog); margin-top:10px; }

.how-icon-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(102px,1fr)); gap:28px 12px; max-width:620px; margin:48px auto 0; }
.how-icon-item{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.how-icon-item span{ font-size:.66rem; color:var(--fog); font-family:'JetBrains Mono',monospace; line-height:1.35; }

.how-connector-v{ width:1px; height:42px; background:var(--line-dark); position:relative; margin:8px auto 32px; }
.flow-dot-v{ position:absolute; left:-3px; top:0; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.7); opacity:0; animation:flowDotVertical 2.1s linear infinite; }
.flow-dot-v:nth-child(2){ animation-delay:.7s; }
.flow-dot-v:nth-child(3){ animation-delay:1.4s; }
@keyframes flowDotVertical{ 0%{ top:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:96%; opacity:0; } }

.how-smart{ display:flex; align-items:flex-start; justify-content:center; gap:0; max-width:860px; margin-left:auto; margin-right:auto; }
.how-stage{ flex:1; text-align:center; padding:0 14px; max-width:220px; }
.how-icon-group{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.how-icon{ width:36px; height:36px; border-radius:8px; background:var(--teal-raised); border:1px solid var(--line-dark); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.how-icon svg{ width:16px; height:16px; }
.how-icon-group.single .how-icon{ width:50px; height:50px; border-radius:50%; position:relative; }
.how-icon.hub{ background:var(--orange); color:#fff; border-color:transparent; }
.how-icon.hub::after{ content:''; position:absolute; inset:-6px; border:1px solid var(--orange); border-radius:50%; opacity:0; animation:cabPing 2.6s ease-out infinite; }
.how-stage h4{ font-family:'Sora',sans-serif; font-size:.98rem; font-weight:700; color:#fff; margin-bottom:6px; }
.how-stage p{ font-size:.84rem; color:var(--fog); }
.how-connector{ flex:0 0 56px; height:1px; background:var(--line-dark); position:relative; margin-top:18px; }
.flow-dot{ position:absolute; top:-3px; left:0; width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px rgba(246,152,16,.7); opacity:0; animation:flowDot 2.1s linear infinite; }
.flow-dot:nth-child(2){ animation-delay:.7s; }
.flow-dot:nth-child(3){ animation-delay:1.4s; }
@keyframes flowDot{ 0%{ left:0; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:96%; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .flow-dot, .flow-dot-v{ animation:none; opacity:.6; } .how-icon.hub::after{ animation:none; opacity:0; } }
@media (max-width:720px){
  .how-smart{ flex-direction:column; align-items:center; gap:26px; }
  .how-connector{ width:1px; height:32px; flex:none; margin:0; }
  .flow-dot{ left:-3px; top:0; animation-name:flowDotVertical; }
  .how-icon-grid{ max-width:320px; gap:24px 10px; }
}

/* ---------- Specialty lifts: mini animated shafts ---------- */
.lift-types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:52px; }
.lift-type-card{ text-align:center; }
.mini-shaft{ position:relative; height:104px; width:54px; margin:0 auto 20px; background:var(--teal); border-radius:6px; overflow:hidden; border:1px solid var(--line-light); box-shadow:var(--shadow); }
.mini-track{ position:absolute; left:50%; top:0; width:1px; height:100%; background:linear-gradient(to bottom, var(--orange), transparent 85%); opacity:.55; }
.mini-car{ position:absolute; left:50%; width:34px; height:24px; margin-left:-17px; background:linear-gradient(180deg,#0C4A54,var(--teal-deep)); border:1px solid var(--orange); border-radius:3px; display:flex; align-items:center; justify-content:center; color:var(--orange); animation:miniRise 4.8s ease-in-out infinite; }
.mini-car svg{ width:14px; height:14px; }
@keyframes miniRise{ 0%{ top:76%; } 45%{ top:8%; } 55%{ top:8%; } 100%{ top:76%; } }
@media (prefers-reduced-motion: reduce){ .mini-car{ animation:none; top:42%; } }
.lift-type-card h3{ font-size:1rem; font-weight:700; color:var(--teal); margin-bottom:8px; }
.lift-type-card p{ font-size:.87rem; color:var(--ink-soft); }
@media (max-width:860px){ .lift-types-grid{ grid-template-columns:1fr 1fr; row-gap:38px; } }
@media (max-width:480px){ .lift-types-grid{ grid-template-columns:1fr; } }

/* ---------- Trust strip ---------- */
.trust{ padding:90px 0; background:#fff; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:16px; }
.trust-card{ text-align:left; }
.trust-card .icon-wrap{ width:44px; height:44px; border-radius:6px; background:var(--orange-tint); color:var(--orange-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.trust-card .icon-wrap svg{ width:20px; height:20px; }
.trust-card h3{ font-size:1.05rem; font-weight:700; color:var(--teal); margin-bottom:8px; }
.trust-card p{ font-size:.9rem; color:var(--ink-soft); }
@media (max-width:800px){ .trust-grid{ grid-template-columns:1fr; } }

/* ---------- Floating Staff Login button ---------- */
.staff-login-fab{ position:fixed; left:20px; bottom:20px; z-index:150; display:flex; align-items:center; gap:8px; background:var(--teal); color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:99px; padding:11px 16px 11px 13px; font-size:.82rem; font-weight:600; box-shadow:0 6px 20px rgba(0,20,24,.35); transition:background .2s ease, transform .15s ease; }
.staff-login-fab:hover{ background:var(--orange); transform:translateY(-2px); }
.staff-login-fab svg{ width:17px; height:17px; flex-shrink:0; }
@media (max-width:600px){ .staff-login-fab span{ display:none; } .staff-login-fab{ padding:12px; } }

/* ---------- SwiftLifts "Build your own lift" CTA ---------- */
.build-lift-cta{ display:flex; align-items:center; gap:10px; margin-top:20px; padding:12px 16px; background:var(--orange-tint); border:1px solid var(--orange); border-radius:8px; color:var(--orange-dark); font-size:.86rem; font-weight:600; transition:background .2s ease, transform .15s ease; }
.build-lift-cta:hover{ background:var(--orange); color:#fff; transform:translateY(-1px); }
.build-lift-cta span:nth-child(2){ flex:1; }
.build-lift-cta svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- Final CTA enrichments ---------- */
.pattern-bg{ position:absolute; inset:0; background-repeat:repeat; opacity:.05; pointer-events:none; }
.cta{ text-align:center; position:relative; }
.cta-contact{ margin-top:26px; font-family:'JetBrains Mono',monospace; font-size:.85rem; color:rgba(255,255,255,.85); }
.cta-contact a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; margin-top:44px; align-items:start; }
.contact-card{ padding:32px; }
.contact-card .field:last-of-type{ margin-bottom:20px; }
.contact-success{ text-align:center; padding:20px 10px; }
.contact-success-icon{ width:56px; height:56px; border-radius:50%; background:var(--orange); color:#fff; font-size:1.6rem; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.contact-details{ display:flex; flex-direction:column; gap:26px; }
.contact-detail-item h3{ font-size:.78rem; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); margin-bottom:8px; }
.contact-detail-item address, .contact-detail-item a{ font-size:.94rem; color:var(--ink-soft); line-height:1.6; }
.contact-detail-item a:hover{ color:var(--orange-dark); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } .contact-details{ order:-1; } }
@media (max-width:480px){ .contact-card{ padding:22px; } }

/* ---------- About page ---------- */
.about-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; margin-top:20px; }
.about-facts{ display:flex; flex-direction:column; gap:20px; background:var(--paper); border:1px solid var(--line-light); border-radius:8px; padding:26px; }
.about-fact h3{ font-size:.95rem; color:var(--teal); margin-bottom:6px; }
.about-fact p{ font-size:.88rem; color:var(--ink-soft); }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:32px; } }

.about-partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.about-partner-card{ background:var(--teal-raised); border:1px solid var(--line-dark); border-radius:8px; padding:26px; text-align:center; }
.about-partner-card .logo-chip{ margin:0 auto 16px; }
.about-partner-card p{ font-size:.86rem; color:var(--fog); }
@media (max-width:760px){ .about-partners{ grid-template-columns:1fr; } }

/* ---------- Leadership spotlight ---------- */
.leader-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:44px; }
.leader-card{ background:var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:32px; text-align:center; transition:transform .25s ease, box-shadow .25s ease; }
.leader-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.leader-avatar{ position:relative; width:84px; height:84px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.leader-avatar span{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; color:#fff; }
.leader-avatar--alt{ background:linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.leader-avatar::after{ content:''; position:absolute; inset:-6px; border-radius:50%; border:1px solid var(--orange); opacity:0; animation:cabPing 3s ease-out infinite; }
.leader-avatar--alt::after{ border-color:var(--teal); }
@media (prefers-reduced-motion: reduce){ .leader-avatar::after{ animation:none; opacity:0; } }
.leader-card h3{ font-size:1.05rem; color:var(--teal); margin-bottom:2px; }
.leader-title{ font-size:.78rem; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.06em; color:var(--orange-dark); margin-bottom:14px; }
.leader-bio{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
.leader-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.leader-tags span{ font-size:.7rem; font-family:'JetBrains Mono',monospace; background:var(--orange-tint); color:var(--orange-dark); padding:5px 10px; border-radius:99px; }
@media (max-width:700px){ .leader-grid{ grid-template-columns:1fr; } }

/* ---------- Departments ---------- */
.dept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.dept-card{ background:var(--teal-raised); border:1px solid var(--line-dark); border-radius:8px; padding:26px; transition:transform .2s ease; }
.dept-card:hover{ transform:translateY(-3px); }
.dept-icon{ width:38px; height:38px; border-radius:8px; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.dept-icon svg{ width:18px; height:18px; }
.dept-card h3{ font-size:.98rem; color:#fff; margin-bottom:6px; }
.dept-count{ font-size:.74rem; font-family:'JetBrains Mono',monospace; color:var(--orange); margin-bottom:10px; }
.dept-count em{ font-style:normal; color:var(--fog); }
.dept-card p:last-child{ font-size:.85rem; color:var(--fog); }
@media (max-width:900px){ .dept-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .dept-grid{ grid-template-columns:1fr; } }

/* ---------- Vision & Mission ---------- */
.vision-mission-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.vm-card{ background:var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:32px; }
@media (max-width:760px){ .vision-mission-grid{ grid-template-columns:1fr; } }