/*
 * ═══════════════════════════════════════════════════════════════════
 * PROPMS — Property Management System for Qatar
 * Stylesheet: styles.css
 * Version: 2.1.8
 * Built for: Qatar Property Managers | Doha, Qatar
 * ═══════════════════════════════════════════════════════════════════
 */


:root{
  --f:'Inter',-apple-system,sans-serif;
  --white:#fff;
  --bg:#f6f9fc;
  --bg2:#eef2f7;
  --navy:#0a2540;
  --navy2:#091e35;
  --navy3:#04111e;
  --t1:#0a2540;
  --t2:#425466;
  --t3:#6b7c93;
  --t4:#8898aa;
  --b1:rgba(50,50,93,.08);
  --b2:rgba(50,50,93,.13);
  --b3:rgba(50,50,93,.20);
  --i:#635bff;
  --i2:#7a73ff;
  --ib:rgba(99,91,255,.18);
  --ig:rgba(99,91,255,.07);
  /* Stripe exact product colors */
  --c-orange:#ff7849;
  --c-pink:#e96fd9;
  --c-purple:#7c3aed;
  --c-blue:#0073e6;
  --c-teal:#00d4aa;
  --c-green:#0ea66a;
  --c-amber:#f5a623;
  --c-red:#e25950;
  /* Semantic */
  --green:#0ea66a;--gbg:rgba(14,166,106,.08);--gbr:rgba(14,166,106,.18);
  --red:#e25950;--rbg:rgba(226,89,80,.07);--rbr:rgba(226,89,80,.16);
  --amber:#f5a623;--abg:rgba(245,166,35,.08);--abr:rgba(245,166,35,.18);
  --blue:#0069d9;--bbg:rgba(0,105,217,.07);--bbr:rgba(0,105,217,.16);
  --s1:0 1px 3px rgba(50,50,93,.1),0 1px 0 rgba(0,0,0,.04);
  --s2:0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
  --s3:0 7px 14px rgba(50,50,93,.1),0 3px 6px rgba(0,0,0,.08);
  --s4:0 13px 27px rgba(50,50,93,.12),0 8px 16px rgba(0,0,0,.08);
  --s5:0 30px 60px rgba(50,50,93,.14),0 18px 36px rgba(0,0,0,.1);
  --r1:4px;--r2:8px;--r3:12px;--r4:16px;--r5:20px;--r6:28px;--pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* Industry section variables */
  --off:#f7f8fc;
  --white:#ffffff;
  --ink:#0a2540;
  --ink3:#425466;
  --muted:#6b7c93;
  --border:rgba(50,50,93,.1);
  --border2:rgba(50,50,93,.18);
  --teal:#00b899;
  --teal-bg:rgba(0,184,153,.12);
  --violet:#7c3aed;
  --violet-bg:rgba(124,58,237,.1);
  --coral:#e25950;
  --coral-bg:rgba(226,89,80,.1);
  --amber:#f5a623;
  --amber-bg:rgba(245,166,35,.1);
  --blue:#0069d9;
  --blue-bg:rgba(0,105,217,.1);
  --ff-head:'Inter',-apple-system,sans-serif;
  --ff-mono:'SF Mono','Fira Code',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:#fff;color:var(--t1);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
[data-r]{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.07s!important}[data-d="2"]{transition-delay:.14s!important}
[data-d="3"]{transition-delay:.21s!important}[data-d="4"]{transition-delay:.28s!important}
[data-d="5"]{transition-delay:.35s!important}[data-d="6"]{transition-delay:.42s!important}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:700;height:60px;display:flex;align-items:center;transition:all .3s var(--ease)}
.nav.on{background:rgba(255,255,255,.94);border-bottom:1px solid var(--b1);box-shadow:0 2px 8px rgba(50,50,93,.07);backdrop-filter:blur(20px)}
.nav-i{width:100%;max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:0;cursor:pointer}
.logo-word{font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.04em}
.nav-links{display:flex;align-items:center;list-style:none;gap:0;margin-left:32px}
.nav-links a{padding:6px 13px;font-size:13.5px;font-weight:500;color:var(--t2);transition:color .14s;letter-spacing:-.01em}
.nav-links a:hover{color:var(--navy)}
.nav-drop{font-size:10px;opacity:.5;margin-left:2px}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-signin{padding:8px 18px;border-radius:var(--pill);border:1.5px solid var(--b3);background:#fff;color:var(--navy);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .18s var(--ease);letter-spacing:-.01em}
.nav-signin:hover{background:var(--bg)}
.nav-cta-btn{padding:8px 18px;border-radius:var(--pill);background:var(--i);color:#fff;font-size:13.5px;font-weight:600;border:none;cursor:pointer;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;transition:all .18s var(--ease)}
.nav-cta-btn:hover{background:#5249d9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(99,91,255,.35)}
.nav-ham{display:none;width:36px;height:36px;border-radius:var(--r2);background:var(--bg);border:1px solid var(--b2);align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4.5px;flex-shrink:0}
.nav-ham span{display:block;width:14px;height:1.5px;background:var(--t2);border-radius:2px;transition:all .26s var(--ease)}
.nav-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mob-menu{display:none;position:fixed;inset:0;top:60px;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);z-index:690;flex-direction:column;padding:24px 40px}
.mob-menu.open{display:flex}
.mob-menu a{font-size:17px;font-weight:700;color:var(--t2);padding:13px 0;border-bottom:1px solid var(--b1);transition:color .14s}
.mob-menu a:hover{color:var(--navy)}
.mob-cta{margin-top:20px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border-radius:var(--pill);font-size:14.5px;font-weight:700;letter-spacing:-.01em;border:none;cursor:pointer;transition:all .18s var(--ease);white-space:nowrap}
.btn-indigo{background:var(--i);color:#fff}
.btn-indigo:hover{background:#5249d9;transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,91,255,.4)}
.btn-border{background:#fff;color:var(--navy);border:1.5px solid var(--b3)}
.btn-border:hover{background:var(--bg);border-color:var(--b3)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--s3)}
.btn-outline-lt{background:transparent;color:rgba(255,255,255,.82);border:1.5px solid rgba(255,255,255,.22)}
.btn-outline-lt:hover{background:rgba(255,255,255,.09);color:#fff}
.btn-lg{padding:14px 28px;font-size:15.5px}
.btn svg{transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(2px)}




/* ═══════════════════════════════════════════════════════════════
   MODERN PREMIUM TYPOGRAPHY SECTION — Add to your styles.css
   ═══════════════════════════════════════════════════════════════ */

.modern-caption-section {
  padding: 100px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.modern-caption {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.badge-accent {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #635bff;
  margin-bottom: 24px;
  padding: 8px 14px;
  border: 1px solid rgba(99, 91, 255, 0.3);
  border-radius: 20px;
  background: rgba(99, 91, 255, 0.05);
}

.mega-heading {
  font-size: 76px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin: 0 0 20px 0;
  word-spacing: 9999px;
}

.gradient-text {
  background: linear-gradient(135deg, #635bff 0%, #c084fc 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(99, 91, 255, 0.1));
}

.accent-line {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #635bff, #7c3aed);
  margin: 20px auto 0;
  border-radius: 2px;
}

.subheading {
  font-size: 20px;
  line-height: 1.5;
  color: #6b7c93;
  max-width: 750px;
  margin: 0 auto 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ═══ TABLET RESPONSIVE ═══ */
@media (max-width: 768px) {
  .modern-caption-section {
    padding: 80px 24px;
  }

  .mega-heading {
    font-size: 48px;
    line-height: 1.15;
  }

  .badge-accent {
    font-size: 11px;
  }

  .subheading {
    font-size: 18px;
  }
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 480px) {
  .modern-caption-section {
    padding: 60px 20px;
  }

  .mega-heading {
    font-size: 36px;
    line-height: 1.2;
  }

  .subheading {
    font-size: 16px;
  }
}









.hero{
  min-height:100svh;
  background:#fff;
  padding:0;
  display:grid;
  grid-template-columns:5fr 7fr;
  align-items:center;
  position:relative;
}




.apple-typo-section {
  padding: 100px 40px;
  background: #ffffff;
}

.apple-typo-container {
  max-width: 1200px;
  margin: 0 auto;
}

.apple-typo-heading {
  font-size: 96px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #000000;
  margin: 0 0 16px 0;
}

.apple-typo-subheading {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  color: #555555;
  margin: 0;
  max-width: 900px;
  letter-spacing: -0.01em;
}

/* ═══ DESKTOP (1200px+) ═══ */
@media (min-width: 1200px) {
  .apple-typo-heading {
    font-size: 96px;
  }

  .apple-typo-subheading {
    font-size: 28px;
  }
}

/* ═══ LARGE TABLET (1024px) ═══ */
@media (max-width: 1024px) {
  .apple-typo-section {
    padding: 80px 40px;
  }

  .apple-typo-heading {
    font-size: 72px;
    line-height: 1.08;
  }

  .apple-typo-subheading {
    font-size: 24px;
  }
}

/* ═══ TABLET (768px) ═══ */
@media (max-width: 768px) {
  .apple-typo-section {
    padding: 70px 32px;
  }

  .apple-typo-heading {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 12px;
  }

  .apple-typo-subheading {
    font-size: 20px;
    line-height: 1.35;
  }
}

/* ═══ MOBILE (480px) ═══ */
@media (max-width: 480px) {
  .apple-typo-section {
    padding: 60px 20px;
  }

  .apple-typo-heading {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .apple-typo-subheading {
    font-size: 17px;
    line-height: 1.4;
  }
}

/* ═══ DARK MODE SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  .apple-typo-section {
    background: #000000;
  }

  .apple-typo-heading {
    color: #ffffff;
  }

  .apple-typo-subheading {
    color: #d0d0d0;
  }
}







  #propnet-wrap { position:relative; width:100%; height:520px; background:#06091a; border-radius:0px; overflow:hidden; }
  #propnet-canvas { position:absolute; inset:0; width:100%; height:100%; }
  .propnet-label { position:absolute; bottom:0; left:0; right:0; padding:28px 32px; background:linear-gradient(to top, rgba(6,9,26,0.95) 60%, transparent); z-index:10; pointer-events:none; }
  .propnet-label h2 { font-family:'Inter',-apple-system,sans-serif; font-size:clamp(22px,3.5vw,38px); font-weight:700; color:#fff; line-height:1.1; letter-spacing:-0.03em; margin:0 0 8px; }
  .propnet-label p { font-family:'Inter',-apple-system,sans-serif; font-size:clamp(13px,1.8vw,17px); color:rgba(255,255,255,0.55); margin:0; font-weight:400; letter-spacing:-0.01em; max-width:560px; }
  .propnet-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(99,91,255,0.18); border:1px solid rgba(99,91,255,0.35); border-radius:100px; padding:4px 12px; margin-bottom:14px; }
  .propnet-badge span { font-family:'Inter',-apple-system,sans-serif; font-size:12px; font-weight:600; color:#a09bff; letter-spacing:0.04em; text-transform:uppercase; }
  .propnet-dot { width:6px; height:6px; border-radius:50%; background:#635bff; animation:pdot 1.6s ease-in-out infinite; }
  @keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.3} }







/* Right mesh gradient */
.hero-gradient{
  position:absolute;
  top:0;right:0;
  width:60%;height:100%;
  z-index:0;
  background:
    radial-gradient(ellipse 80% 70% at 80% 30%,#ff9a3c 0%,transparent 50%),
    radial-gradient(ellipse 60% 80% at 60% 60%,#e96fd9 0%,transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 70%,#7c3aed 0%,transparent 55%),
    radial-gradient(ellipse 50% 50% at 40% 20%,#635bff 0%,transparent 50%),
    radial-gradient(ellipse 60% 60% at 70% 10%,#0073e6 0%,transparent 50%),
    radial-gradient(ellipse 40% 40% at 100% 50%,#00d4aa 0%,transparent 45%);
  animation:swirl 18s ease-in-out infinite alternate;
}
@keyframes swirl{
  0%{filter:blur(0px) saturate(1.1);transform:scale(1)}
  100%{filter:blur(3px) saturate(1.2);transform:scale(1.04)}
}
.hero-gradient::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:45%;
  background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.55) 55%,transparent 100%);
  z-index:1;
}

/* Left content */
.hero-left{
  position:relative;z-index:2;
  padding:120px 40px 80px 7vw;
  display:flex;flex-direction:column;justify-content:center;
}

/* Ticker */
.hero-ticker{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t3);margin-bottom:28px;letter-spacing:-.01em}
.ticker-line{width:40px;height:1px;background:var(--t3)}

/* Headline */
.hero-h{font-size:clamp(36px,4.8vw,66px);font-weight:900;letter-spacing:-.055em;line-height:1.01;color:var(--navy);margin-bottom:18px}
.hero-h .grad-word{background:linear-gradient(135deg,#7c3aed,#e96fd9,#ff9a3c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Sub */
.hero-sub{font-size:clamp(15px,1.6vw,19px);font-weight:400;color:var(--t3);line-height:1.62;max-width:460px;margin-bottom:32px;letter-spacing:-.01em}
.hero-sub .colored{background:linear-gradient(135deg,#7c3aed,#e96fd9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.hero-logos{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.hl-items{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hl-item{font-size:13px;font-weight:700;color:rgba(10,37,64,.3);letter-spacing:-.02em;transition:color .16s}
.hl-item:hover{color:var(--navy)}

/* ═══ 3D SCENE — RIGHT SIDE HERO ═══ */
.hero-right{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  padding:80px 10px 40px 0;
  overflow:visible;
}
.hero-3d-scene{
  position:relative;
  width:100%;max-width:760px;
  height:600px;
  overflow:visible;
}

/* Person standing BEHIND the mockup */
.person-behind{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-46%);
  z-index:1;
  width:300px;
  animation:personBob 3s ease-in-out infinite;
}
@keyframes personBob{
  0%,100%{transform:translateX(-46%) translateY(0)}
  50%{transform:translateX(-46%) translateY(-10px)}
}
.person-png{
  width:300%;
  height:auto;
  filter:drop-shadow(0 20px 40px rgba(10,37,64,0.22));
  display:block;
}
.person-svg{
  width:100%;
  filter:drop-shadow(0 20px 40px rgba(10,37,64,0.22));
}

/* Main mockup card — in FRONT of person */
.mockup-main{
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-46%) perspective(1400px) rotateY(-5deg) rotateX(2deg);
  width:96%;
  max-width:640px;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(50,50,93,.12);
  box-shadow:
    0 2px 4px rgba(50,50,93,.06),
    0 12px 32px rgba(50,50,93,.14),
    0 40px 80px rgba(50,50,93,.18),
    0 60px 120px rgba(99,91,255,.1);
  overflow:hidden;
  z-index:3;
  animation:mockupFloat 5s ease-in-out infinite;
}
@keyframes mockupFloat{
  0%,100%{transform:translateX(-46%) perspective(1400px) rotateY(-5deg) rotateX(2deg) translateY(0)}
  50%{transform:translateX(-46%) perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-8px)}
}
.mockup-main:hover{
  transform:translateX(-46%) perspective(1400px) rotateY(-2deg) rotateX(0deg) translateY(-4px);
  transition:transform .4s ease;
}

/* ── LIVE DASHBOARD inside screen ── */
.ldb{font-family:var(--f);background:#f6f9fc}
.ldb-nav{background:#fff;border-bottom:1px solid rgba(50,50,93,.08);padding:7px 12px;display:flex;align-items:center;justify-content:space-between}
.ldb-logo{font-size:9px;font-weight:900;color:#0a2540;letter-spacing:-.03em}
.ldb-month{font-size:8px;font-weight:600;color:#6b7c93;padding:2px 8px;border:1px solid rgba(50,50,93,.12);border-radius:4px}
.ldb-content{padding:10px}
.ldb-title{font-size:10px;font-weight:800;color:#0a2540;letter-spacing:-.02em;margin-bottom:2px}
.ldb-sub{font-size:7.5px;color:#8898aa;margin-bottom:10px}
.ldb-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.ldk{background:#fff;border:1px solid rgba(50,50,93,.09);border-radius:7px;padding:7px;position:relative;overflow:hidden}
.ldk::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.ldk-g::before{background:linear-gradient(90deg,#0ea66a,#0dc888)}
.ldk-a::before{background:linear-gradient(90deg,#f5a623,#ffd470)}
.ldk-r::before{background:linear-gradient(90deg,#e25950,#ff7675)}
.ldk-dark{background:#0a2540}
.ldk-dark::before{background:linear-gradient(90deg,#635bff,#a78bfa)}
.ldk-l{font-size:6px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:#8898aa;margin-bottom:2px}
.ldk-dark .ldk-l{color:rgba(255,255,255,.4)}
.ldk-v{font-size:12px;font-weight:900;letter-spacing:-.04em;line-height:1}
.ldb-table{display:flex;flex-direction:column;gap:3px}
.ldt-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ldt-hdr-t{font-size:7.5px;font-weight:800;color:#0a2540;letter-spacing:-.01em}
.ldt-badge{font-size:7px;font-weight:700;padding:1px 6px;border-radius:99px;background:rgba(245,166,35,.1);color:#f5a623;border:1px solid rgba(245,166,35,.2)}
.ldt-row{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:#fff;border:1px solid rgba(50,50,93,.07);border-radius:6px}
.ldt-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;color:#fff;flex-shrink:0;margin-right:5px}
.ldt-n{font-size:8.5px;font-weight:700;color:#0a2540;letter-spacing:-.015em}
.ldt-s{font-size:6.5px;color:#8898aa}
.ldt-amt{font-size:8.5px;font-weight:800;letter-spacing:-.02em}
.ldt-cash{font-size:6px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(14,166,106,.1);color:#0ea66a;border:1px solid rgba(14,166,106,.18);margin-top:1px}

/* Animated notification ping */
.notif-ping{
  position:absolute;top:-8px;right:-8px;
  width:20px;height:20px;
  background:#e25950;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:900;color:#fff;
  border:2px solid #fff;
  animation:pingPulse 2s ease infinite;
  z-index:6;
}
@keyframes pingPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(226,89,80,.4)}
  50%{box-shadow:0 0 0 6px rgba(226,89,80,0)}
}

/* Floating stat card TOP LEFT — truly separate, 3D lifted */
.dash-3d-side2{
  position:absolute;
  left:-32px;top:30px;
  width:165px;
  background:linear-gradient(135deg,#041a0d,#073318);
  border-radius:18px;
  border:1px solid rgba(14,166,106,.3);
  box-shadow:
    0 0 0 1px rgba(14,166,106,.12),
    0 4px 12px rgba(0,0,0,.25),
    0 16px 40px rgba(14,166,106,.18),
    0 32px 64px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(74,222,128,.12);
  padding:14px;
  animation:floatSide2 7s ease-in-out .5s infinite;
  z-index:10;
  transform-origin:center center;
}
@keyframes floatSide2{
  0%,100%{transform:translateY(0) rotate(2deg) perspective(600px) rotateY(4deg)}
  50%{transform:translateY(-12px) rotate(1deg) perspective(600px) rotateY(2deg)}
}
/* Mobile: hide far-left card, show below main card instead */
@media(max-width:900px){
  .dash-3d-side2{
    position:relative;
    left:auto;top:auto;
    width:100%;
    margin-bottom:10px;
    animation:floatSide2Mobile 5s ease-in-out infinite;
    transform:none;
  }
  @keyframes floatSide2Mobile{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
  }
}

/* Floating notification card */
.dash-notif-card{
  position:absolute;
  bottom:120px;right:-30px;
  width:185px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(50,50,93,.1);
  box-shadow:0 8px 32px rgba(50,50,93,.2),0 2px 8px rgba(50,50,93,.1);
  padding:12px 14px;
  animation:floatSide 5s ease-in-out 1s infinite;
  z-index:6;
  display:flex;align-items:flex-start;gap:9px;
}
@keyframes floatSide{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(0deg)}
}
.notif-icon-wrap{width:30px;height:30px;border-radius:8px;background:rgba(14,166,106,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.notif-t{font-size:9px;font-weight:800;color:#0a2540;letter-spacing:-.02em;margin-bottom:2px}
.notif-s{font-size:8px;color:#6b7c93;line-height:1.4}
.notif-time{font-size:7.5px;color:#b0bec5;margin-top:4px}

/* Glow rings behind the dashboard */
.scene-glow{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(99,91,255,.08) 0%,transparent 70%);
  animation:glowPulse 4s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes glowPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}

/* Orbit ring */
.orbit-ring{
  position:absolute;
  top:50%;left:45%;
  transform:translate(-50%,-50%);
  width:420px;height:420px;
  border-radius:50%;
  border:1px solid rgba(99,91,255,.08);
  animation:orbitSpin 30s linear infinite;
  pointer-events:none;z-index:1;
}
.orbit-ring::after{
  content:'';position:absolute;
  top:-5px;left:50%;
  width:10px;height:10px;
  border-radius:50%;
  background:rgba(99,91,255,.5);
  box-shadow:0 0 12px rgba(99,91,255,.8);
  transform:translateX(-50%);
}
@keyframes orbitSpin{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}

/* Side floating card (old .dash-3d-side) - kept for compat */
.dash-3d-side{display:none}

/* Dashboard internal styles */
.d3-header{background:linear-gradient(135deg,#0a2540,#1a3a5c);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.d3-logo{font-size:11px;font-weight:900;color:#fff;letter-spacing:-.02em}
.d3-pill{font-size:8px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(14,166,106,.2);color:#4ade80;border:1px solid rgba(14,166,106,.3)}
.d3-body{padding:14px;background:var(--bg)}
.d3-greeting{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-bottom:2px}
.d3-date{font-size:9px;color:var(--t3);margin-bottom:12px}
.d3-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.d3k{background:#fff;border:1px solid var(--b1);border-radius:8px;padding:9px 8px;position:relative;overflow:hidden}
.d3k::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.d3k-g::before{background:linear-gradient(90deg,#0ea66a,#0dc888)}
.d3k-a::before{background:linear-gradient(90deg,#f5a623,#ffd470)}
.d3k-i::before{background:linear-gradient(90deg,#635bff,#a78bfa)}
.d3k-l{font-size:7px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--t3);margin-bottom:3px}
.d3k-v{font-size:14px;font-weight:900;letter-spacing:-.04em;line-height:1}
.d3k-v.g{color:#0ea66a}.d3k-v.a{color:#f5a623}.d3k-v.i{color:#635bff}
.d3-rows{display:flex;flex-direction:column;gap:4px}
.d3r{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#fff;border:1px solid var(--b1);border-radius:7px}
.d3r-l{display:flex;align-items:center;gap:6px}
.d3r-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
.d3r-n{font-size:10px;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.d3r-s{font-size:8px;color:var(--t3)}
.d3r-amt{font-size:10px;font-weight:800;letter-spacing:-.02em}

/* Dashboard internal styles */
.d3-header{background:linear-gradient(135deg,#0a2540,#1a3a5c);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.d3-logo{font-size:11px;font-weight:900;color:#fff;letter-spacing:-.02em}
.d3-pill{font-size:8px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(14,166,106,.2);color:#4ade80;border:1px solid rgba(14,166,106,.3)}
.d3-body{padding:14px;background:var(--bg)}
.d3-greeting{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-bottom:2px}
.d3-date{font-size:9px;color:var(--t3);margin-bottom:12px}
.d3-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.d3k{background:#fff;border:1px solid var(--b1);border-radius:8px;padding:9px 8px;position:relative;overflow:hidden}
.d3k::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.d3k-g::before{background:linear-gradient(90deg,#0ea66a,#0dc888)}
.d3k-a::before{background:linear-gradient(90deg,#f5a623,#ffd470)}
.d3k-i::before{background:linear-gradient(90deg,#635bff,#a78bfa)}
.d3k-l{font-size:7px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--t3);margin-bottom:3px}
.d3k-v{font-size:14px;font-weight:900;letter-spacing:-.04em;line-height:1}
.d3k-v.g{color:#0ea66a}.d3k-v.a{color:#f5a623}.d3k-v.i{color:#635bff}
.d3-rows{display:flex;flex-direction:column;gap:4px}
.d3r{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#fff;border:1px solid var(--b1);border-radius:7px}
.d3r-l{display:flex;align-items:center;gap:6px}
.d3r-av{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
.d3r-n{font-size:10px;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.d3r-s{font-size:8px;color:var(--t3)}
.d3r-amt{font-size:10px;font-weight:800;letter-spacing:-.02em}

/* ═══ FULL-SCREEN PUBLIC PORTAL ═══ */
.portal-full{
  background:#f0f4f8;
  padding:0;
  position:relative;
  overflow:hidden;
}
.portal-full-intro{
  padding:80px 40px 60px;
  text-align:center;
  background:#fff;
  border-bottom:1px solid var(--b1);
}
.pf-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#b8860b;margin-bottom:16px}
.pf-eyebrow::before,.pf-eyebrow::after{content:'';flex:1;max-width:40px;height:1px;background:#b8860b;opacity:.5}
.pf-title{font-size:clamp(32px,5vw,64px);font-weight:900;letter-spacing:-.055em;line-height:1.0;color:var(--navy);margin-bottom:12px}
.pf-title .green-word{color:#16a34a}
.pf-sub{font-size:16px;color:var(--t3);line-height:1.65;max-width:540px;margin:0 auto}
/* Browser frame */
.portal-browser{
  margin:0 auto;
  max-width:1200px;
  padding:0 40px 80px;
}
.browser-chrome{
  background:#e8eaed;
  border-radius:14px 14px 0 0;
  padding:12px 18px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.browser-dots{display:flex;gap:6px}
.bd{width:12px;height:12px;border-radius:50%}
.bd-r{background:#ff5f57}.bd-y{background:#febc2e}.bd-g{background:#28c840}
.browser-bar{
  flex:1;background:#fff;border-radius:6px;padding:6px 12px;
  font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.browser-lock{font-size:10px;color:var(--green)}
.browser-content{
  background:#fff;
  border-radius:0 0 14px 14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(50,50,93,.15),0 8px 24px rgba(50,50,93,.1);
}

/* Portal inner styles */
.portal-topnav{background:#fff;border-bottom:1px solid var(--b1);padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.ptn-logo{display:flex;align-items:center;gap:8px}
.ptn-icon{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#16a34a,#22c55e);display:flex;align-items:center;justify-content:center;font-size:12px}
.ptn-name{font-size:13px;font-weight:900;color:var(--navy);letter-spacing:-.03em}
.ptn-name span{color:#16a34a}
.ptn-r{display:flex;align-items:center;gap:8px}
.ptn-avail-pill{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:99px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);font-size:11px;font-weight:700;color:#16a34a}
.ptn-dot{width:6px;height:6px;border-radius:50%;background:#16a34a;animation:glow 2s ease infinite}
.ptn-contact{background:#0a2540;color:#fff;border:none;border-radius:99px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}

/* Portal hero - dark green exact match */
.portal-green-hero{
  background:linear-gradient(155deg,#052e0f 0%,#0a4a1a 30%,#0f5c22 60%,#0a4a1a 100%);
  padding:32px 32px 0;
  position:relative;overflow:hidden;
}
.portal-green-hero::before{content:'';position:absolute;top:-60px;right:-40px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.02);pointer-events:none}
.portal-green-hero::after{content:'';position:absolute;bottom:-40px;left:-30px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.015);pointer-events:none}
.pgh-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:4px 12px;font-size:10px;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px}
.pgh-h{font-size:clamp(20px,2.5vw,32px);font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1.1;margin-bottom:6px}
.pgh-h em{font-style:normal;color:#4ade80}
.pgh-sub{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:20px;letter-spacing:-.01em}

/* Stats row */
.pgh-stats{display:flex;gap:28px;margin-bottom:20px}
.pghs-v{font-size:22px;font-weight:900;letter-spacing:-.045em;color:#fff;line-height:1}
.pghs-l{font-size:8.5px;color:rgba(255,255,255,.4);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* Search bar — floating white card */
.pgh-search{
  background:#fff;border-radius:12px 12px 0 0;padding:18px 20px 14px;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
  position:relative;z-index:2;
}
.pgh-search-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;align-items:end}
.pghf{display:flex;flex-direction:column;gap:4px}
.pghf label{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t3)}
.pghf select{background:var(--bg);border:1px solid var(--b2);border-radius:7px;padding:7px 10px;font-size:11.5px;color:var(--navy);font-family:var(--f);font-weight:500}
.pgh-search-btn{background:#16a34a;color:#fff;border:none;border-radius:9px;padding:10px 18px;font-size:12px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;height:36px;align-self:end}

/* Notice period banner */
.portal-notice{
  background:#1e3a5f;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.pn-left{display:flex;align-items:center;gap:10px}
.pn-ico{font-size:16px;flex-shrink:0}
.pn-t{font-size:12px;font-weight:700;color:#fff;letter-spacing:-.01em}
.pn-s{font-size:11px;color:rgba(255,255,255,.5);margin-top:1px}
.pn-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:5px 14px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0}

/* Listings body */
.portal-listings{background:#f8faf9;padding:20px 24px}
.pl-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pl-count{font-size:13px;color:var(--t2);letter-spacing:-.01em}
.pl-count b{color:var(--navy);font-weight:800}
.pl-sort{font-size:11.5px;color:var(--t3);background:#fff;border:1px solid var(--b2);border-radius:7px;padding:5px 10px;cursor:pointer}
.pl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plc{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--b1);box-shadow:0 2px 8px rgba(0,0,0,.05);transition:all .22s var(--ease)}
.plc:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.12);border-color:var(--b2)}
.plc:hover .plc-img img{transform:scale(1.05)}
.plc-img img{transition:transform .4s var(--ease)}
.plc:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.plc-img{height:148px;display:flex;align-items:center;justify-content:center;font-size:44px;position:relative;overflow:hidden}
.plc-img.green{background:linear-gradient(160deg,#f0fdf4,#dcfce7)}
.plc-img.blue{background:linear-gradient(160deg,#eff6ff,#dbeafe)}
.plc-img.yellow{background:linear-gradient(160deg,#fefce8,#fef9c3)}
.plc-badges{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start}
.plc-avail{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;background:#fff;display:flex;align-items:center;gap:4px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.plc-avail.avail{color:#16a34a;border:1px solid rgba(22,163,74,.25)}
.plc-avail.soon{color:#d97706;border:1px solid rgba(217,119,6,.25)}
.plc-avdot{width:5px;height:5px;border-radius:50%;background:currentColor}
.plc-new{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;background:#0a2540;color:#fff}
.plc-notice{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;background:#d97706;color:#fff}
.plc-body{padding:14px}
.plc-type{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t4);margin-bottom:4px}
.plc-t{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-bottom:4px}
.plc-loc{font-size:11px;color:var(--t3);display:flex;align-items:center;gap:4px;margin-bottom:8px}
.plc-specs{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.plc-spec{font-size:10.5px;color:var(--t2);display:flex;align-items:center;gap:3px}
.plc-price{font-size:20px;font-weight:900;letter-spacing:-.045em;color:var(--navy);margin-bottom:10px}
.plc-price span{font-size:12px;font-weight:500;color:var(--t3)}
.plc-btn{width:100%;padding:10px;border-radius:9px;border:none;font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:-.01em;font-family:var(--f);transition:all .15s}
.plc-btn.green-btn{background:#16a34a;color:#fff}
.plc-btn.green-btn:hover{background:#15803d}
.plc-btn.amber-btn{background:#d97706;color:#fff}
.plc-btn.amber-btn:hover{background:#b45309}

/* Portal features below */
.portal-feats-row{background:#fff;border-top:1px solid var(--b1);padding:32px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pfr{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pfr-ico{width:44px;height:44px;border-radius:12px;background:var(--bg);border:1px solid var(--b1);display:flex;align-items:center;justify-content:center;font-size:18px}
.pfr-t{font-size:13.5px;font-weight:800;color:var(--navy);letter-spacing:-.025em}
.pfr-d{font-size:12px;color:var(--t3);line-height:1.65;letter-spacing:-.01em}

/* ═══ STRIPE PRODUCT BENTO GRID ═══ */
.bento-sec{
  padding:80px 0;
  background:#fff;
  border-top:1px solid var(--b1);
}
.bento-intro{padding:0 80px 56px;max-width:1200px;margin:0 auto}
.bento-intro-h{font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--navy);letter-spacing:-.04em;margin-bottom:10px}
.bento-intro-h span{color:var(--t3)}
.bento-intro-p{font-size:17px;color:var(--t3);line-height:1.6;letter-spacing:-.01em;max-width:560px;font-weight:400}
/* Grid layout — Stripe exact */
.bento-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:0;max-width:1200px;margin:0 auto;padding:0 40px;gap:16px}
.bcard{border-radius:16px;overflow:hidden;position:relative;background:#fff;border:1px solid var(--b2);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)}
.bcard:hover{transform:translateY(-4px) scale(1.005);box-shadow:0 20px 48px rgba(50,50,93,.15),0 8px 16px rgba(0,0,0,.08)}
.bcard-inner{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)}
.bcard-inner:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(50,50,93,.14),0 6px 12px rgba(0,0,0,.07)}
.bcard-wide{grid-column:1;grid-row:1}
.bcard-top-r1{grid-column:2;grid-row:1}
.bcard-top-r2{grid-column:3;grid-row:1}
.bcard-bot-1{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;background:transparent;border:none;padding:0}
.bcard-bot-1 .bcard-inner{border-radius:16px;overflow:hidden;border:1px solid var(--b2)}
.bcard-label{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.28;padding:22px 22px 0}
.bcard-label.dark{color:var(--navy);text-shadow:none}

/* Bento card backgrounds — strong, deep gradients for clear text */
.bc-payments{background:linear-gradient(160deg,#e8630a 0%,#d4420a 35%,#b02060 75%,#8a1550 100%);min-height:320px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.bc-billing{background:linear-gradient(160deg,#4a35e0 0%,#6420c8 45%,#8810c0 100%);min-height:320px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.bc-commerce{background:linear-gradient(160deg,#b8108a 0%,#9010b0 40%,#6020d0 75%,#4030e0 100%);min-height:320px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.bc-card{background:linear-gradient(160deg,#c0106a 0%,#a80e88 45%,#8818a8 100%);min-height:280px}
.bc-crypto{background:linear-gradient(160deg,#1428a0 0%,#1840c8 38%,#0e60d8 75%,#0878d0 100%);min-height:280px}
.bc-embed{background:linear-gradient(160deg,#0a6a3a 0%,#0a8040 45%,#108850 100%);min-height:280px}

/* Dashboard mockup inside bcard */
.bc-dash{padding:16px;margin-top:14px}



/* ═══ REPORTS TABS ═══ */
.reports-sec{padding:88px 40px;background:#fff}
.sec-center{text-align:center;margin-bottom:48px}
.ey{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--i)}
.sh{font-size:clamp(28px,3.5vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1.04;color:var(--navy);margin-top:8px;margin-bottom:10px}
.sh em{font-style:normal;background:linear-gradient(135deg,var(--i),var(--c-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sh.lt{color:#fff}
.sh.lt em{background:linear-gradient(135deg,#a5b4fc,#7dd3fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sp{font-size:16px;color:var(--t2);line-height:1.72;letter-spacing:-.01em;max-width:480px}
.sp.lt{color:rgba(255,255,255,.48)}
.rtabs{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-bottom:44px}
.rtab{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--pill);border:1.5px solid var(--b2);background:transparent;font-size:12.5px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;letter-spacing:-.015em}
.rtab:hover{border-color:var(--i);color:var(--i)}
.rtab.active{background:var(--i);border-color:var(--i);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(99,91,255,.28)}
.rpanel{display:none;animation:rpIn .38s var(--ease) both}
.rpanel.active{display:grid!important;grid-template-columns:1fr 1.55fr;gap:52px;align-items:start;max-width:1120px;margin:0 auto}
@keyframes rpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ri-ico{width:46px;height:46px;border-radius:var(--r4);display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--ig);border:1px solid var(--ib);margin-bottom:16px}
.ri-t{font-size:22px;font-weight:800;letter-spacing:-.045em;color:var(--navy);margin-bottom:8px;line-height:1.06}
.ri-d{font-size:14.5px;color:var(--t2);line-height:1.72;margin-bottom:16px;letter-spacing:-.01em}
.ri-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.chip{display:inline-flex;padding:3px 10px;border-radius:var(--pill);font-size:10.5px;font-weight:700}
.ci{background:var(--ig);color:var(--i);border:1px solid var(--ib)}
.cg{background:var(--gbg);color:var(--green);border:1px solid var(--gbr)}
.cb{background:var(--bbg);color:var(--blue);border:1px solid var(--bbr)}
.cam{background:var(--abg);color:var(--amber);border:1px solid var(--abr)}
.ri-ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ri-ul li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--t2);line-height:1.55;letter-spacing:-.01em}
.rck{width:15px;height:15px;border-radius:50%;background:var(--ig);border:1px solid var(--ib);display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--i);font-weight:700;flex-shrink:0;margin-top:1px}
.rck::after{content:'✓'}
.rwin{background:#fff;border:1px solid var(--b2);border-radius:var(--r5);box-shadow:var(--s4);overflow:hidden}
.rw-bar{background:var(--bg);border-bottom:1px solid var(--b1);padding:10px 14px;display:flex;align-items:center;gap:8px}
.rw-dots{display:flex;gap:4px}
.rwd{width:9px;height:9px;border-radius:50%}
.rd1{background:#ff5f57}.rd2{background:#febc2e}.rd3{background:#28c840}
.rw-t{font-size:10.5px;font-weight:600;color:var(--t2);flex:1;text-align:center;letter-spacing:-.01em}
.rw-acts{display:flex;gap:4px}
.rb{font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:4px;border:1px solid var(--b2);background:#fff;color:var(--t2);cursor:pointer}
.rb.ac{background:var(--ig);border-color:var(--ib);color:var(--i)}
.rw-body{padding:13px}
.rfs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:11px}
.rf{display:inline-flex;padding:3px 9px;border-radius:4px;background:var(--bg);border:1px solid var(--b1);font-size:9.5px;font-weight:600;color:var(--t3);cursor:pointer}
.rf.on{background:var(--ig);border-color:var(--ib);color:var(--i)}
.krow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:11px}
.kc{background:var(--bg);border:1px solid var(--b1);border-radius:var(--r2);padding:9px 10px}
.kcl{font-size:8px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--t3);margin-bottom:3px}
.kcv{font-size:17px;font-weight:900;letter-spacing:-.045em;color:var(--navy);line-height:1}
.kcv.g{color:var(--green)}.kcv.r{color:var(--red)}.kcv.a{color:var(--amber)}
.kcs{font-size:8px;color:var(--t4);margin-top:2px}
.kcs b{color:var(--green)}
.rtbl{width:100%;border-collapse:collapse}
.rtbl th{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t4);text-align:left;padding:0 6px 7px}
.rtbl td{font-size:11px;color:var(--t2);padding:6px 6px;border-top:1px solid var(--b1);letter-spacing:-.01em}
.rtbl tr:hover td{background:var(--bg)}
.tg{color:var(--green)!important;font-weight:700}.ta{color:var(--amber)!important;font-weight:700}.tr{color:var(--red)!important;font-weight:700}
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:54px;padding-bottom:14px;position:relative}
.bar-chart::after{content:'';position:absolute;bottom:14px;left:0;right:0;height:1px;background:var(--b1)}
.bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bc-b{width:100%;border-radius:2px 2px 0 0;background:rgba(99,91,255,.14);border:1px solid rgba(99,91,255,.24);transition:background .16s}
.bc:hover .bc-b{background:rgba(99,91,255,.32)}
.bc-l{font-size:7px;color:var(--t4)}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:7px}
.vu{border-radius:5px;padding:5px 3px;text-align:center;font-size:8.5px;font-weight:700}
.vuo{background:var(--gbg);border:1px solid var(--gbr);color:var(--green)}
.vuv{background:var(--rbg);border:1px solid var(--rbr);color:var(--red)}
.vun{background:var(--abg);border:1px solid var(--abr);color:var(--amber)}
.cqrow{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:var(--bg);border:1px solid var(--b1);border-radius:var(--r2);margin-bottom:4px}
.cqn{font-size:11px;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.cqm{font-size:9px;color:var(--t3);margin-top:1px}
.cqa{font-size:11.5px;font-weight:800;letter-spacing:-.03em}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:48px;max-width:1120px;margin-left:auto;margin-right:auto}
.rg{background:var(--bg);border:1px solid var(--b1);border-radius:var(--r4);padding:18px;cursor:pointer;transition:all .18s var(--ease);position:relative;overflow:hidden}
.rg::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .18s}
.rg:hover{background:#fff;border-color:var(--b2);box-shadow:var(--s3);transform:translateY(-2px)}
.rg:hover::before{opacity:1}
.rg.gd::before{background:linear-gradient(90deg,var(--i),var(--c-pink),var(--c-orange))}
.rg.gr::before{background:linear-gradient(90deg,var(--green),#0dc888)}
.rg.bl::before{background:linear-gradient(90deg,var(--blue),#4da6ff)}
.rg.rd::before{background:linear-gradient(90deg,var(--red),#ff8a80)}
.rg.pu::before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.rg.am::before{background:linear-gradient(90deg,var(--amber),#fde68a)}
.rg-ico{font-size:20px;margin-bottom:10px}
.rg-t{font-size:13.5px;font-weight:800;color:var(--navy);letter-spacing:-.025em;margin-bottom:5px}
.rg-d{font-size:12px;color:var(--t2);line-height:1.62;letter-spacing:-.01em}

/* ═══ OWNER PORTAL ═══ */
.portal-sec{background:var(--bg);padding:88px 0}
.portal-inner{max-width:1200px;margin:0 auto;padding:0 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.phone-scene{display:flex;justify-content:center;position:relative}
.phone-scene::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(ellipse,rgba(99,91,255,.09),transparent 65%);pointer-events:none}
.phone{width:300px;background:#fff;border-radius:46px;border:7px solid #0a2540;box-shadow:0 40px 80px rgba(10,37,64,.28),0 8px 24px rgba(10,37,64,.12);overflow:hidden;position:relative;z-index:1}
.phone::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:88px;height:26px;background:#0a2540;border-radius:0 0 18px 18px;z-index:10}
.phone-screen{padding:38px 18px 18px}
.ps-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ps-time{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.ps-sig{font-size:10px;color:var(--t3)}
.ps-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ps-greet{font-size:11px;color:var(--t3);font-weight:500;margin-bottom:1px}
.ps-name{font-size:18px;font-weight:900;letter-spacing:-.04em;color:var(--navy)}
.ps-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--i),var(--c-pink));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.ps-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pskpi{background:var(--bg);border:1px solid var(--b1);border-radius:13px;padding:12px;position:relative;overflow:hidden}
.pskpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.pskpi.gn::before{background:linear-gradient(90deg,var(--green),#0dc888)}
.pskpi.am::before{background:linear-gradient(90deg,var(--amber),#ffd470)}
.pskpi.bl::before{background:linear-gradient(90deg,var(--i),var(--c-pink))}
.pskpi.gr::before{background:linear-gradient(90deg,var(--green),#0dc888)}
.pskpi-l{font-size:8px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--t3);margin-bottom:5px}
.pskpi-v{font-size:18px;font-weight:900;letter-spacing:-.04em;color:var(--navy);line-height:1;margin-bottom:2px}
.pskpi-v.g{color:var(--green)}.pskpi-v.a{color:var(--amber)}
.pskpi-t{font-size:8px;color:var(--t4)}
.pskpi-t b{color:var(--green)}
.ps-sl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);margin-bottom:7px}
.ps-units{display:flex;flex-direction:column;gap:5px}
.punit{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--b1);border-radius:10px;padding:9px 11px}
.punit-n{font-size:12px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.punit-s{font-size:9px;color:var(--t3);margin-top:1px}
.punit-st{font-size:9px;font-weight:700;padding:3px 8px;border-radius:var(--pill)}
.st-paid{background:var(--gbg);color:var(--green);border:1px solid var(--gbr)}
.st-pend{background:var(--abg);color:var(--amber);border:1px solid var(--abr)}
.st-vac{background:var(--rbg);color:var(--red);border:1px solid var(--rbr)}
.ps-nav{display:flex;justify-content:space-around;padding-top:9px;border-top:1px solid var(--b1);margin-top:8px}
.pnav-i{display:flex;flex-direction:column;align-items:center;gap:2px}
.pnav-ic{font-size:13px}
.pnav-l{font-size:7px;color:var(--t4);font-weight:600}
.pnav-l.a{color:var(--i)}
.notice{background:var(--ig);border:1px solid var(--ib);border-radius:var(--r3);padding:14px 17px;display:flex;gap:11px;margin-bottom:22px}
.n-t{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:2px}
.n-d{font-size:12px;color:var(--t2);line-height:1.58;letter-spacing:-.01em}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:20px;overflow:hidden;margin-top:24px}
.pf{background:#fff;padding:20px 18px;transition:background .14s}
.pf:hover{background:var(--bg)}
.pf-ico{font-size:19px;margin-bottom:8px;display:block}
.pf-t{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:-.02em;margin-bottom:4px}
.pf-d{font-size:11.5px;color:var(--t3);line-height:1.58;letter-spacing:-.01em}

/* ═══ PUBLIC PORTAL ═══ */
.portal-pub{background:#fff;padding:88px 0}
.pp-inner{max-width:1200px;margin:0 auto;padding:0 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.pp-frame{background:#fff;border:1px solid var(--b2);border-radius:18px;box-shadow:var(--s5);overflow:hidden}
.pp-nav{background:#fff;border-bottom:1px solid var(--b1);padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.pp-logo{font-size:11.5px;font-weight:900;color:var(--navy);letter-spacing:-.04em;line-height:1}
.pp-logo small{font-size:7px;display:block;font-weight:500;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.pp-nav-r{display:flex;align-items:center;gap:6px}
.pp-avail{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--green);background:var(--gbg);border:1px solid var(--gbr);border-radius:var(--pill);padding:3px 9px}
.ppa-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:glow 2s ease infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(14,166,106,.4)}50%{box-shadow:0 0 0 5px rgba(14,166,106,0)}}
.pp-contact{background:var(--navy);color:#fff;border:none;border-radius:var(--pill);padding:5px 11px;font-size:9.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}
.pp-hero{background:linear-gradient(140deg,#0a3d1f 0%,#166b34 50%,#0d5228 100%);padding:22px 16px;position:relative;overflow:hidden}
.pp-hero::before{content:'';position:absolute;top:-40px;right:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none}
.pp-hl{font-size:16px;font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1.1;margin-bottom:10px;position:relative;z-index:1}
.pp-hl em{font-style:normal;color:#4ade80}
.pp-search{background:#fff;border-radius:10px;padding:11px 13px;position:relative;z-index:1;box-shadow:0 4px 20px rgba(0,0,0,.28)}
.pp-srow{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:7px;align-items:end}
.pp-field label{font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);display:block;margin-bottom:3px}
.pp-field select{width:100%;background:var(--bg);border:1px solid var(--b2);border-radius:6px;padding:5px 7px;font-size:9.5px;color:var(--navy)}
.pp-sbtn{background:#155c30;color:#fff;border:none;border-radius:6px;padding:6px 11px;font-size:9.5px;font-weight:800;cursor:pointer;height:27px;display:flex;align-items:center;gap:3px;white-space:nowrap}
.pp-stats{display:flex;gap:18px;margin-top:9px;position:relative;z-index:1}
.ppst-v{font-size:18px;font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1}
.ppst-l{font-size:8px;color:rgba(255,255,255,.45);font-weight:500;margin-top:2px;text-transform:uppercase;letter-spacing:.07em}
.pp-body{padding:11px 13px}
.pp-count{font-size:10px;font-weight:700;color:var(--t2);margin-bottom:8px;letter-spacing:-.01em}
.pp-count b{color:var(--navy)}
.pp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ppc{background:#fff;border:1px solid var(--b1);border-radius:10px;overflow:hidden;transition:all .14s}
.ppc:hover{border-color:var(--b2);box-shadow:var(--s1)}
.ppc-img{background:var(--bg);height:62px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative}
.ppc-badges{position:absolute;top:5px;left:5px;right:5px;display:flex;justify-content:space-between}
.ppc-av{font-size:7.5px;font-weight:700;padding:2px 6px;border-radius:var(--pill);background:rgba(255,255,255,.95);border:1px solid var(--gbr);color:var(--green);display:flex;align-items:center;gap:2px}
.ppc-av.soon{color:var(--amber);border-color:var(--abr)}
.ppc-avdot{width:4px;height:4px;border-radius:50%;background:currentColor}
.ppc-new{font-size:7.5px;font-weight:700;padding:2px 5px;border-radius:var(--pill);background:var(--navy);color:#fff}
.ppc-body{padding:7px 8px}
.ppc-t{font-size:10px;font-weight:800;color:var(--navy);letter-spacing:-.025em;margin-bottom:2px}
.ppc-s{font-size:8px;color:var(--t3);margin-bottom:2px}
.ppc-loc{font-size:7.5px;color:var(--t4)}


/* ═══ 24 MODULES GRID ═══ */
.modules-sec{background:#0d1117;padding:88px 40px}
.modules-hd{text-align:center;margin-bottom:48px}
.mod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:24px;overflow:hidden;max-width:1180px;margin:0 auto}
.mod-cell-custom{border-radius:0 0 22px 0}
.mod-cell{background:#111827;padding:26px 16px;text-align:center;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);cursor:default;position:relative}
.mod-cell:hover{background:#1c2742;transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(99,91,255,.2)}
.mod-cell:hover .mod-ico{transform:scale(1.15) translateY(-2px)}
.mod-ico{font-size:26px;margin-bottom:10px;display:block;transition:transform .2s var(--ease)}
.mod-t{font-size:13px;font-weight:800;color:rgba(255,255,255,.88);letter-spacing:-.025em;margin-bottom:3px;line-height:1.3}
.mod-s{font-size:11px;color:rgba(255,255,255,.35);line-height:1.5;letter-spacing:-.01em}
/* Row accent colors — 26 modules = 5 rows (rows 1-4 = 6 each, row 5 = 2) */
.mod-cell:nth-child(-n+6){border-top:2px solid rgba(99,91,255,.4)}
.mod-cell:nth-child(n+7):nth-child(-n+12){border-top:2px solid rgba(0,115,230,.4)}
.mod-cell:nth-child(n+13):nth-child(-n+18){border-top:2px solid rgba(0,212,170,.4)}
.mod-cell:nth-child(n+19):nth-child(-n+24){border-top:2px solid rgba(245,166,35,.4)}
.mod-cell:nth-child(n+25){border-top:2px solid rgba(233,111,217,.4)}


@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseGlow{0%,100%{box-shadow:inset 0 0 0 1px rgba(99,91,255,.2),0 0 0 0 rgba(99,91,255,.0)}50%{box-shadow:inset 0 0 0 1px rgba(99,91,255,.5),0 0 20px 4px rgba(99,91,255,.08)}}
@keyframes starSpin{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
.mod-cell-custom:hover{background:linear-gradient(110deg,#0d0f1e 40%,#1a1c3e 50%,#0d0f1e 60%) !important;background-size:200% 100% !important;animation:shimmer 1.6s linear infinite !important}
/* ═══ TESTIMONIALS ═══ */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1120px;margin:0 auto}
.pcard{background:var(--bg);border:1.5px solid var(--b1);border-radius:22px;padding:24px 20px;transition:all .18s var(--ease)}
.pcard:hover{background:#fff;border-color:var(--b2);box-shadow:var(--s3);transform:translateY(-2px)}
.pstars{color:var(--amber);letter-spacing:3px;font-size:12px;margin-bottom:13px}
.pq{font-size:13.5px;color:var(--navy);line-height:1.75;margin-bottom:18px;font-style:italic;letter-spacing:-.01em}
.pq strong{font-style:normal;font-weight:800}
.pauthor{display:flex;align-items:center;gap:9px}
.pav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--i),var(--c-pink));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0}
.pname{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.025em}
.prole{font-size:11px;color:var(--t3);margin-top:1px}



/* ══════════════════════════════════════════
   METRICS STRIP  — like Ada's 8× 162% 357%
══════════════════════════════════════════ */
.metrics { border-top:1px solid var(--gray3); border-bottom:1px solid var(--gray3); background:var(--white); }
.metrics-in { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.metric-item { padding:40px 32px; text-align:center; border-right:1px solid var(--gray3); position:relative; }
.metric-item:last-child { border-right:none; }
.metric-num { font-size:48px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.04em; margin-bottom:6px; }
.metric-num .unit { font-size:32px; vertical-align:top; margin-top:4px; display:inline-block; }
.metric-label { font-size:13px; font-weight:500; color:var(--muted); line-height:1.45; }


/* ═══ FAQ ═══ */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:24px;overflow:hidden;max-width:1040px;margin:0 auto}
.faqc{background:#fff;padding:26px 24px;transition:background .15s}
.faqc:hover{background:var(--bg)}
.faqq{font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.03em;margin-bottom:8px}
.faqa{font-size:13px;color:var(--t3);line-height:1.7;letter-spacing:-.01em}

/* ═══ HYPERLINE-STYLE STATS — pure black with large numbers ═══ */
.stats-sec{background:#0a0a09;padding:88px 40px}
.stats-inner{max-width:1120px;margin:40px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);border-radius:24px;overflow:hidden}
.statc{background:#111110;padding:52px 44px;text-align:left}
.stat-eyebrow{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:16px}
.stat-v{font-size:72px;font-weight:900;letter-spacing:-.07em;line-height:1;color:#fff;margin-bottom:8px}
.stat-l{font-size:13px;color:rgba(255,255,255,.38);letter-spacing:-.01em;line-height:1.5}

/* ═══ CTA ═══ */
.cta-sec{background:#0a0a09;padding:110px 40px;text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.cta-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 50% 0%,rgba(99,91,255,.15),transparent 65%);pointer-events:none}
.cta-inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta-h{font-size:clamp(36px,5.5vw,64px);font-weight:900;letter-spacing:-.055em;line-height:.97;color:#fff;margin-bottom:18px}
.cta-h em{font-style:normal;background:linear-gradient(135deg,var(--i),var(--c-pink),var(--c-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-p{font-size:16px;color:rgba(255,255,255,.4);line-height:1.7;margin-bottom:34px;letter-spacing:-.01em;max-width:400px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.cta-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.ct{font-size:12px;color:rgba(255,255,255,.26);letter-spacing:-.01em;padding:0 12px;border-right:1px solid rgba(255,255,255,.08)}
.ct:last-child{border:none}

/* FOOTER */
.footer{background:#091e35;border-top:1px solid rgba(255,255,255,.06);padding:52px 40px 28px}
.ft-inner{max-width:1200px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.ft-brand{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ft-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--i),var(--c-pink));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff}
.ft-name{font-size:14px;font-weight:800;color:rgba(255,255,255,.6);letter-spacing:-.03em}
.ft-desc{font-size:12.5px;color:rgba(255,255,255,.24);line-height:1.65;letter-spacing:-.01em;max-width:230px}
.ft-ch{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.26);margin-bottom:13px}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.ft-links a{font-size:13px;color:rgba(255,255,255,.36);letter-spacing:-.015em;transition:color .13s}
.ft-links a:hover{color:rgba(255,255,255,.7)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);padding-top:22px;flex-wrap:wrap;gap:11px}
.ft-copy{font-size:12px;color:rgba(255,255,255,.17);letter-spacing:-.01em}

/* ═══════════════════════════════
   MOBILE-FIRST — Most users on phone
═══════════════════════════════ */
@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .hero-right{
    display:flex !important;
    padding:0 20px 60px;
    justify-content:center;
  }
  .hero-3d-scene{
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    max-width:420px;
    width:100%;
  }
  .person-behind{display:none}
  .mockup-main{
    position:relative;
    top:auto;left:auto;
    transform:none !important;
    animation:none !important;
    width:100%;
    max-width:420px;
    box-shadow:0 4px 24px rgba(50,50,93,.14),0 16px 40px rgba(50,50,93,.1);
    border-radius:14px;
    order:1;
  }
  .scene-glow,.orbit-ring{display:none}
  .dash-3d-side2{
    position:relative !important;
    left:auto !important;top:auto !important;
    width:100% !important;
    border-radius:14px !important;
    transform:none !important;
    animation:floatCardMobile 4s ease-in-out infinite !important;
    order:2;
  }
  @keyframes floatCardMobile{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
  }
  .toast-stack{
    position:relative !important;
    bottom:auto !important;right:auto !important;
    width:100% !important;
    filter:none !important;
    order:3;
  }
  .notif-ping{display:none}
  .hero-gradient{width:100%;opacity:.35}
}
@media(max-width:1024px){
  .custom-reports-grid{grid-template-columns:1fr!important;gap:40px!important}
  .nav-links{display:none}.nav-ham{display:flex}.nav-signin{display:none}
  .hero-left{padding:100px 32px 64px}
  .feat-inner{grid-template-columns:1fr;gap:40px;padding:0 24px}
  .feat-inner.flip{direction:ltr}
  .portal-inner{grid-template-columns:1fr;gap:48px;padding:0 24px}
  .phone-scene{display:none}
  .backbone-stats{grid-template-columns:1fr 1fr}
  .rpanel.active{grid-template-columns:1fr!important;gap:40px}
  .proof-grid{grid-template-columns:1fr 1fr}
  .matters-grid{grid-template-columns:1fr 1fr}
  .mod-grid{grid-template-columns:repeat(4,1fr)}
  .stats-inner{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr 1fr}
  .bento-grid{grid-template-columns:1fr 1fr;gap:10px}
  .bcard-wide,.bcard-top-r1,.bcard-top-r2{grid-column:auto;grid-row:auto}
  .bcard-bot-1{grid-column:1 / -1;grid-template-columns:1fr 1fr;gap:10px}
  .bento-intro{padding:0 24px 40px}
  .portal-full-intro{padding:60px 24px 40px}
  .portal-browser{padding:0 24px 60px}
  .pgh-search-row{grid-template-columns:1fr 1fr}
  .pl-cards{grid-template-columns:1fr 1fr}
  .portal-feats-row{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-i{padding:0 20px}
  .hero-left{padding:88px 20px 56px}
  .hero-h{font-size:clamp(32px,9vw,48px)}
  .hero-sub{font-size:15px}
  .hero-btns{gap:8px}
  .hero-btns .btn{padding:12px 18px;font-size:13.5px}
  .hl-items{gap:14px}
  .hl-item{font-size:11px}
  .bento-sec{padding:56px 0}
  .bento-intro{padding:0 20px 28px}
  .bento-intro-h{font-size:15px}
  .bento-grid{grid-template-columns:1fr;padding:0 20px}
  .bcard-bot-1{grid-template-columns:1fr!important;display:flex!important;flex-direction:column!important;background:transparent;border:none}
  .bc-payments,.bc-billing,.bc-commerce{min-height:auto}
  .bc-card,.bc-crypto,.bc-embed{min-height:auto}
  .bcard-inner{border-radius:16px!important;overflow:hidden}
  .backbone{padding:56px 20px}
  .backbone-stats{grid-template-columns:1fr 1fr;max-width:100%}
  .bbs{padding:22px 10px}
  .bbs-v{font-size:clamp(20px,6vw,30px)}
  .bbs-l{font-size:10px}
  .feat-sec{padding:56px 0}
  .feat-inner{padding:0 20px;gap:28px}
  .feat-h{font-size:clamp(20px,5.5vw,28px)}
  .reports-sec{padding:56px 0} /* side padding handled per-child */
  .rtab span{display:inline!important}
  .rtabs{gap:6px;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:none}
  .rtabs::-webkit-scrollbar{display:none}
  .rtab{flex-shrink:0;padding:8px 14px;font-size:12px;white-space:nowrap}
  .rpanel.active{grid-template-columns:1fr;gap:28px}
  .portal-sec{padding:56px 0}
  .portal-inner{padding:0 20px}
  .portal-full-intro{padding:48px 20px 32px}
  .pf-title{font-size:clamp(24px,7vw,38px)}
  .portal-browser{padding:0 20px 48px}
  .browser-chrome{padding:10px 14px;border-radius:10px 10px 0 0}
  .bd{width:10px;height:10px}
  .portal-topnav{padding:12px 16px}
  .ptn-name{font-size:12px}
  .portal-green-hero{padding:22px 16px 0}
  .pgh-h{font-size:clamp(17px,4.5vw,24px)}
  .pgh-stats{gap:16px}
  .pghs-v{font-size:18px}
  .pgh-search{padding:14px}
  .pgh-search-row{grid-template-columns:1fr 1fr;gap:6px}
  .pgh-search-btn{grid-column:1 / -1;justify-content:center}
  .portal-listings{padding:14px}
  .pl-cards{grid-template-columns:1fr}
  .portal-feats-row{grid-template-columns:1fr;padding:20px 16px;gap:14px}
  .portal-notice{padding:12px 16px;flex-direction:column;gap:8px}
  .pn-btn{align-self:flex-start}
  .matters-sec{padding:56px 20px}
  .matters-h{font-size:clamp(22px,6vw,34px);margin-bottom:28px}
  .matters-grid{grid-template-columns:1fr}
  .mcard-visual{height:180px}
  .modules-sec{padding:56px 20px}
  .mod-grid{grid-template-columns:repeat(3,1fr)}
  .mod-ico{font-size:20px;margin-bottom:7px}
  .mod-t{font-size:11px}
  .mod-s{font-size:9.5px}
  .mod-cell{padding:16px 8px}
  .stats-sec{padding:56px 20px}
  .stats-inner{grid-template-columns:1fr}
  .statc{padding:32px 24px}
  .stat-v{font-size:clamp(44px,12vw,58px)}
  .proof-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .faqgrid{grid-template-columns:1fr}
  .cta-sec{padding:64px 20px}
  .cta-h{font-size:clamp(26px,8vw,40px)}
  .cta-btns{flex-direction:column;align-items:stretch;gap:8px}
  .cta-btns .btn{justify-content:center}
  .ct{border:none;padding:4px 0}
  .footer{padding:40px 20px 24px}
  .ft-top{grid-template-columns:1fr;gap:24px}
  .ft-bot{flex-direction:column;gap:8px}
  .rgrid{grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}
  .sec-center .sh{font-size:clamp(22px,6vw,34px)}
}
@media(max-width:480px){
  .hero-left{padding:76px 16px 44px}
  .hero-h{font-size:clamp(28px,9vw,36px)}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center;width:100%}
  .hl-items{gap:8px}
  .hl-item{font-size:10px}
  .hero-3d-scene{height:420px}
  .laptop-wrap{transform:scale(.85);transform-origin:bottom center}
  .human-wrap{right:0;bottom:40px}
  .dash-3d-side2{left:-10px;top:20px;width:130px}
  .dash-notif-card{display:none}
  .bcard-label{font-size:13px;padding:14px 14px 0}
  .backbone-stats{grid-template-columns:1fr 1fr}
  .bbs{padding:18px 8px}
  .bbs-v{font-size:24px}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .pgh-search-row{grid-template-columns:1fr}
  .pl-cards{grid-template-columns:1fr}
  .rtabs{overflow-x:auto;justify-content:flex-start;padding:0 0 4px}
  .stat-v{font-size:clamp(36px,10vw,48px)}
  .ft-top{gap:20px}
  .rgrid{grid-template-columns:1fr}
  .matters-grid{gap:8px}
  .proof-grid{max-width:100%}
  .mod-cta-row [style*="padding:28px"]{padding:20px 18px!important;flex-direction:column;gap:16px}
}

/* ═══════════════════════════════════════════
   COMPREHENSIVE MOBILE — Every section fixed
═══════════════════════════════════════════ */

/* ── METRICS STRIP ── */
@media(max-width:768px){
  .metrics-in{grid-template-columns:1fr 1fr}
  .metric-item{padding:24px 16px;border-right:none;border-bottom:1px solid var(--gray3)}
  .metric-item:nth-child(odd){border-right:1px solid var(--gray3)}
  .metric-item:nth-child(3),.metric-item:nth-child(4){border-bottom:none}
  .metric-num{font-size:36px}
}
@media(max-width:480px){
  .metrics-in{grid-template-columns:1fr 1fr}
  .metric-num{font-size:30px}
  .metric-num .unit{font-size:22px}
  .metric-label{font-size:11px}
}

/* ── INDUSTRY / ROLES SECTION — mobile overrides placed AFTER desktop CSS ── */
/* (moved to after desktop .industry-layout definition to avoid cascade override) */

/* ── EXCEL / FEATURE CALLOUT ── */
@media(max-width:900px){
  .excel-sec{padding:48px 20px}
  .excel-banner{
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 24px;
    border-radius:20px;
  }
  .eb-h{font-size:clamp(22px,5.5vw,30px)}
  .eb-sub{font-size:13.5px;margin-bottom:24px}
  .eb-item{font-size:13px}
}

/* ── CASE STUDIES ── */
@media(max-width:900px){
  .cases-sec{padding:0 20px 64px}
  .cases-grid{margin-top:36px;border-radius:16px}
  .case-row{
    grid-template-columns:1fr;
    display:flex;
    flex-direction:column;
  }
  .case-visual{min-height:140px}
  .case-main{padding:20px 20px;border-left:none;border-right:none;border-top:1px solid var(--border)}
  .cm-h{font-size:18px}
  .cm-body{font-size:13px}
  .cm-stat{font-size:28px}
  .case-quote{padding:20px;border-top:1px solid var(--border)}
  .cq-text{font-size:13px;padding-top:22px}
}

/* ── REPORTS SECTION ── */
@media(max-width:900px){
  .reports-sec{padding:56px 0} /* full-bleed: children manage own padding */
  .rpanel.active{gap:0}
}

/* ── BENTO / FEATURES ── */
@media(max-width:900px){
  .bento-sec{padding:56px 0}
  .bento-intro{padding:0 20px 28px}
  .bento-grid{padding:0 20px;gap:12px}
}

/* ── MODULES GRID ── */
@media(max-width:900px){
  .modules-sec{padding:56px 20px}
  .mod-grid{grid-template-columns:repeat(3,1fr);border-radius:16px}
}
@media(max-width:480px){
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mod-cell{padding:18px 10px}
  .mod-ico{font-size:18px}
  .mod-t{font-size:11px}
}

/* ── STATS SECTION ── */
@media(max-width:900px){
  .stats-sec{padding:56px 20px}
  .stats-inner{grid-template-columns:1fr;border-radius:16px}
  .statc{padding:28px 24px}
  .stat-v{font-size:clamp(48px,12vw,64px)}
}

/* ── PROOF / TESTIMONIALS ── */
@media(max-width:900px){
  .proof-grid{grid-template-columns:1fr}
  .pcard{border-radius:16px}
}

/* ── PORTAL FULL ── */
@media(max-width:900px){
  .portal-full-intro{padding:48px 20px 32px}
  .pf-title{font-size:clamp(22px,7vw,36px)}
  .portal-browser{padding:0 20px 40px}
  .browser-chrome{padding:8px 12px}
  .pgh-search-row{grid-template-columns:1fr}
  .pgh-search-btn{grid-column:1/-1;justify-content:center}
  .pl-cards{grid-template-columns:1fr}
  .portal-feats-row{grid-template-columns:1fr;gap:12px;padding:16px}
}

/* ── FAQ ── */
@media(max-width:768px){
  .faqgrid{grid-template-columns:1fr;border-radius:16px}
  .faqc{padding:20px}
  .faqq{font-size:13px}
  .faqa{font-size:12px}
}

/* ── CTA ── */
@media(max-width:768px){
  .cta-sec{padding:64px 20px}
  .cta-h{font-size:clamp(26px,8vw,40px)}
  .cta-btns{flex-direction:column;align-items:stretch;gap:8px}
  .cta-btns .btn{justify-content:center}
}

/* ── FOOTER ── */
@media(max-width:768px){
  .footer{padding:40px 20px 24px}
  .ft-top{grid-template-columns:1fr;gap:24px}
  .ft-bot{flex-direction:column;gap:8px;text-align:center}
}

/* ── GENERAL SECTION HEADINGS ── */
@media(max-width:768px){
  .sec-center{padding:0 20px}
  .sec-center .sh{font-size:clamp(22px,6vw,32px)}
  .sec-center .sd{font-size:14px}
}

/* ── SCROLLBAR HIDE GLOBALLY ON MOBILE ── */
@media(max-width:900px){
  *{-ms-overflow-style:none;scrollbar-width:none}
  *::-webkit-scrollbar{display:none}
}




/* ─── .r reveal system (used by industry section) ─── */
.r{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.r.on{opacity:1;transform:none}
.d1{transition-delay:.1s!important}
.d2{transition-delay:.2s!important}
.d3{transition-delay:.3s!important}
/* Force industry section elements always visible — tabs must work on load */
.industry-sec .r,
.industry-sec .r.on{opacity:1!important;transform:none!important}

/* Section eyebrow + heading (used by industry section) */
.sec-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sec-h{font-size:clamp(28px,3.2vw,44px);font-weight:900;letter-spacing:-.055em;line-height:1.06;color:var(--ink);margin-bottom:0}
.sec-h em{font-style:normal}

/* ─── INDUSTRY TABS SECTION (Ada-inspired) ─── */
.industry-sec{padding:112px 0;background:var(--off);overflow:hidden}
.industry-inner{max-width:1280px;margin:0 auto;padding:0 48px}
.industry-layout{display:grid;grid-template-columns:220px 1fr 280px;gap:24px;margin-top:56px;align-items:start}
.ind-tabs{display:flex;flex-direction:column;gap:4px}
.ind-tab{padding:12px 18px;border-radius:10px;border:1.5px solid transparent;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .22s;display:flex;align-items:center;gap:10px;background:transparent}
.ind-tab .it-icon{font-size:16px;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s}
.ind-tab:hover{color:var(--ink);background:var(--white)}
.ind-tab.active{color:var(--ink);background:var(--white);border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ind-tab.active .it-icon.tl{background:var(--teal-bg)}.ind-tab.active .it-icon.vl{background:var(--violet-bg)}.ind-tab.active .it-icon.cl{background:var(--coral-bg)}.ind-tab.active .it-icon.al{background:var(--amber-bg)}.ind-tab.active .it-icon.bl{background:var(--blue-bg)}.ind-tab.active .it-icon.gl{background:var(--gbg)}
/* Center preview */
.ind-preview{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.07);background:var(--white);min-height:360px;position:relative}
.ind-panel{display:none;animation:fadeIn .3s ease}
.ind-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ip-img{height:220px;display:flex;align-items:center;justify-content:center;font-size:56px;position:relative;overflow:hidden}
.ip-img.teal-bg{background:linear-gradient(135deg,#E8FFF8,#C8FFF0,#A8F5E0)}
.ip-img.violet-bg{background:linear-gradient(135deg,#F0EEFF,#E0D5FF,#C8B8FF)}
.ip-img.coral-bg{background:linear-gradient(135deg,#FFF0F0,#FFE0E0,#FFCCCC)}
.ip-img.amber-bg{background:linear-gradient(135deg,#FFFBEE,#FFF3CC,#FFE8A0)}
.ip-img.blue-bg{background:linear-gradient(135deg,#EEF6FF,#D8EBFF,#BBDBFF)}
.ip-img.green-bg{background:linear-gradient(135deg,#EDFAF4,#C9F0DC,#A0E4C2)}
.ip-chat{position:absolute;bottom:20px;left:20px;background:var(--white);border-radius:12px;padding:14px 16px;box-shadow:0 4px 20px rgba(0,0,0,.1);max-width:260px}
.ipc-q{font-size:11.5px;color:var(--ink);margin-bottom:8px;line-height:1.5}
.ipc-a{font-size:11px;color:var(--muted);line-height:1.5}
.ipc-a strong{color:var(--teal);font-weight:600}
.ip-body{padding:20px 24px}
.ip-label{font-family:var(--ff-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.ip-title{font-family:var(--ff-head);font-size:18px;font-weight:800;color:var(--ink);line-height:1.3}
/* Right case study card */
.ind-case{background:var(--white);border-radius:20px;border:1px solid var(--border);padding:28px;box-shadow:0 4px 20px rgba(0,0,0,.05)}
.ic-logo{font-family:var(--ff-head);font-size:13px;font-weight:700;color:var(--ink);padding:8px 14px;border-radius:8px;border:1.5px solid var(--border);display:inline-block;margin-bottom:20px}
.ic-stat-big{margin-bottom:6px}
.icsb-val{font-family:var(--ff-head);font-size:36px;font-weight:800;line-height:1}
.icsb-val.teal{color:var(--teal)}.icsb-val.violet{color:var(--violet)}.icsb-val.coral{color:var(--coral)}.icsb-val.amber{color:var(--amber)}.icsb-val.blue{color:var(--blue)}.icsb-val.green{color:var(--green)}
.icsb-label{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:20px}
.ic-div{height:1px;background:var(--border);margin:16px 0}
.ic-link{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:4px;transition:gap .18s}
.ic-link:hover{gap:8px}
/* stats wrapper — transparent on desktop */
.ind-case-stats-row{display:contents}

/* ── INDUSTRY / ROLES SECTION — MOBILE (must come AFTER desktop rules) ── */
@media(max-width:900px){
  .industry-sec{padding:64px 0}
  .industry-inner{padding:0 20px}
  /* Stack all 3 columns vertically: tabs → preview → stats */
  .industry-layout{
    grid-template-columns:1fr !important;
    gap:20px;
    margin-top:32px;
  }
  /* Tabs: horizontal scrollable pills */
  .ind-tabs{
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .ind-tabs::-webkit-scrollbar{display:none}
  .ind-tab{
    flex-shrink:0;
    padding:10px 14px;
    font-size:13px;
    gap:7px;
    border-radius:99px;
    white-space:nowrap;
  }
  .ind-tab .it-icon{width:22px;height:22px;font-size:13px}
  /* Preview: full width, visible */
  .ind-preview{min-height:auto;border-radius:16px;width:100%}
  .ip-img{height:180px;font-size:40px}
  .ip-chat{max-width:calc(100% - 32px);padding:10px 12px;left:16px;bottom:16px;right:16px}
  .ipc-q{font-size:10.5px}
  .ipc-a{font-size:10px}
  .ip-body{padding:16px 18px}
  .ip-title{font-size:15px}
  /* Stats card: 2-col grid on tablet */
  .ind-case{
    padding:20px;
    border-radius:16px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
  }
  .ind-case-stats-row{display:block}
  .ind-case-stats-row .ic-div{display:block}
  .ic-logo{grid-column:1/-1;margin-bottom:0;font-size:12px}
  .ind-case > a.ic-link{grid-column:1/-1}
  .ind-case > .ic-div{grid-column:1/-1;margin:4px 0}
  .icsb-val{font-size:26px}
  .icsb-label{font-size:11px;margin-bottom:4px}
  .sec-h{font-size:clamp(24px,6vw,36px)}
}
@media(max-width:600px){
  .industry-layout{gap:16px}
  .ind-tabs{gap:6px}
  .ind-tab{padding:9px 12px;font-size:12px}
  .ip-img{height:160px;font-size:36px}
  .ip-chat{
    position:static;
    margin:12px;
    max-width:100%;
    box-shadow:none;
    border:1px solid rgba(0,0,0,.07);
  }
  .ip-body{padding:14px 16px}
  /* Stats card: single col with side-by-side stats */
  .ind-case{
    grid-template-columns:1fr;
    padding:18px 16px;
    gap:0;
  }
  .ic-logo{grid-column:1;margin-bottom:12px}
  .ind-case > a.ic-link{grid-column:1;margin-top:8px}
  .ind-case > .ic-div{grid-column:1;margin:12px 0}
  .ind-case-stats-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
  }
  .ind-case-stats-row .ic-div{display:none}
  .icsb-val{font-size:28px}
  .icsb-label{font-size:10.5px;line-height:1.4}
}



/* ══════════════════════════════════════════════
   REPORTS SECTION — PRO MOBILE (must be after desktop CSS)
══════════════════════════════════════════════ */
@media(max-width:900px){
  /* Section container — NO side padding so rwin can go full bleed */
  .reports-sec{padding:64px 0 56px !important}

  /* Heading area — padded separately */
  .reports-sec .sec-center{padding:0 20px;margin-bottom:32px;text-align:left}
  .reports-sec .sec-center .sh{font-size:clamp(24px,6vw,36px)}
  .reports-sec .sec-center .sp{font-size:14px;max-width:100%}

  /* Tab bar: full-width scrollable strip with a subtle bottom border */
  .rtabs{
    display:flex;
    gap:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 20px 0;
    margin-bottom:0;
    border-bottom:1px solid var(--b1);
    background:#fff;
    position:sticky;
    top:60px;
    z-index:10;
  }
  .rtabs::-webkit-scrollbar{display:none}
  .rtab{
    flex-shrink:0;
    padding:12px 16px;
    border-radius:0;
    border:none;
    border-bottom:2.5px solid transparent;
    background:transparent;
    font-size:12.5px;
    font-weight:600;
    color:var(--t3);
    white-space:nowrap;
    margin-bottom:-1px;
    box-shadow:none;
  }
  .rtab.active{
    color:var(--i);
    border-bottom-color:var(--i);
    background:transparent;
    box-shadow:none;
  }

  /* Panel: single column, no horizontal padding (children control their own) */
  .rpanel.active{
    display:flex !important;
    flex-direction:column;
    gap:0;
    grid-template-columns:unset;
    max-width:100%;
    padding:0;
    margin:0;
  }

  /* Left info block: padded inward */
  .rpanel.active > div:first-child{
    padding:20px 20px 16px;
  }
  .ri-ico{
    width:36px;height:36px;font-size:16px;
    border-radius:10px;margin-bottom:12px;
  }
  .ri-t{font-size:18px;margin-bottom:6px}
  .ri-d{font-size:13.5px;margin-bottom:12px;line-height:1.6}
  .ri-chips{margin-bottom:14px;gap:4px}
  .chip{font-size:10px;padding:3px 9px}

  /* Feature checklist: 2-column grid on mobile */
  .ri-ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 12px;
    margin-bottom:0;
  }
  .ri-ul li{font-size:12px;gap:6px;line-height:1.45}
  .rck{width:13px;height:13px;font-size:6px;flex-shrink:0;margin-top:1px}

  /* Window mock: TRUE full-bleed — no border-radius, no side borders, full width */
  .rwin{
    width:100% !important;
    min-width:0;
    margin:0 !important;
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
    border-top:1px solid var(--b1) !important;
    border-bottom:none !important;
    box-shadow:none !important;
    background:var(--bg);
  }

  /* Window chrome bar */
  .rw-bar{
    padding:10px 16px;
    background:#fff;
    border-bottom:1px solid var(--b1);
  }
  .rwd{width:8px;height:8px}
  .rw-t{font-size:10px}
  .rb{font-size:9px;padding:3px 7px}

  /* Window body: full width, padded */
  .rw-body{padding:14px 16px;width:100%}

  /* Filter pills row */
  .rfs{gap:5px;margin-bottom:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .rfs::-webkit-scrollbar{display:none}
  .rf{font-size:9px;padding:3px 8px;white-space:nowrap;flex-shrink:0}

  /* KPI cards: always 3 cols but smaller */
  .krow{gap:5px;margin-bottom:10px}
  .kc{padding:8px 9px;border-radius:8px}
  .kcl{font-size:7.5px}
  .kcv{font-size:15px}
  .kcs{font-size:7.5px}

  /* Table: full width, smaller text */
  .rtbl{width:100%;table-layout:fixed}
  .rtbl th{font-size:8px;padding:0 5px 6px}
  .rtbl td{font-size:10.5px;padding:6px 5px}

  /* Bottom report grid: 2 cols */
  .rgrid{
    grid-template-columns:1fr 1fr !important;
    gap:8px;
    margin-top:32px;
    padding:0 20px;
    max-width:100%;
  }
  .rg{padding:14px 14px}
  .rg-ico{font-size:18px;margin-bottom:8px}
  .rg-t{font-size:12.5px}
  .rg-d{font-size:11px}
}

@media(max-width:480px){
  /* On very small phones, checklist back to 1 col */
  .ri-ul{grid-template-columns:1fr}

  /* KPI row: tighter */
  .kcv{font-size:14px}

  /* Report grid: still 2 cols but tighter */
  .rgrid{gap:6px}
  .rg{padding:12px 12px}
  .rg-t{font-size:12px}
  .rg-d{font-size:10.5px}
}

/* ─── EXCEL GRAVEYARD — Feature callout ─── */
.excel-sec{padding:80px 48px;background:var(--white)}
.excel-inner{max-width:1280px;margin:0 auto}
.excel-banner{
  background:var(--ink);border-radius:28px;padding:56px 64px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.eb-glow{position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:conic-gradient(from 0deg,var(--teal),var(--violet),var(--coral));filter:blur(80px);opacity:.15;pointer-events:none}
.eb-left{position:relative;z-index:1}
.eb-eyebrow{font-family:var(--ff-mono);font-size:10px;color:var(--coral);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.eb-h{font-family:var(--ff-head);font-size:clamp(28px,3vw,40px);font-weight:800;color:var(--white);line-height:1.14;margin-bottom:16px}
.eb-sub{font-size:15px;color:rgba(255,255,255,.5);line-height:1.72;margin-bottom:32px}
.eb-items{display:flex;flex-direction:column;gap:12px}
.eb-item{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.75)}
.ebi-check{width:22px;height:22px;border-radius:6px;background:var(--teal-bg);border:1px solid rgba(0,184,148,.3);display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:12px;flex-shrink:0}
.eb-right{position:relative;z-index:1}
/* Excel-to-PROPMS mockup */
.excel-compare{display:flex;flex-direction:column;gap:14px}
.ec-bad{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.2);border-radius:14px;padding:16px 20px}
.ec-good{background:rgba(0,184,148,.08);border:1px solid rgba(0,184,148,.25);border-radius:14px;padding:16px 20px}
.ec-label{font-family:var(--ff-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;font-weight:600}
.ec-bad .ec-label{color:var(--coral)}.ec-good .ec-label{color:var(--teal)}
.ec-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ec-row:last-child{border-bottom:none}
.ec-row-left{font-size:12px;color:rgba(255,255,255,.55)}
.ec-row-right{font-family:var(--ff-mono);font-size:11px;color:var(--coral);font-weight:500}
.ec-row-right.good{color:var(--teal)}
.ec-arrow{text-align:center;color:var(--teal);font-size:18px}

/* ─── ADA-STYLE CASE STUDIES GRID ─── */
.cases-sec{padding:0 48px 112px;background:var(--white)}
.cases-inner{max-width:1280px;margin:0 auto}
.cases-grid{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:24px;overflow:hidden;margin-top:56px}
.case-row{display:grid;grid-template-columns:440px 1fr 320px;align-items:stretch;border-bottom:1px solid var(--border)}
.case-row:last-child{border-bottom:none}
.case-visual{position:relative;overflow:hidden;min-height:220px}
.cv-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px}
.cv-bg.b1{background:linear-gradient(160deg,#E8FFF8,#C8FFE8)}
.cv-bg.b2{background:linear-gradient(160deg,#F0EEFF,#E0D0FF)}
.cv-bg.b3{background:linear-gradient(160deg,#FFF8E8,#FFE8B0)}
.cv-top-bar{position:absolute;top:0;left:0;right:0;height:4px}
.cv-top-bar.teal{background:linear-gradient(90deg,var(--teal),#00D2A8)}
.cv-top-bar.violet{background:linear-gradient(90deg,var(--violet),#A29BFE)}
.cv-top-bar.amber{background:linear-gradient(90deg,var(--amber),#FDE69A)}
.case-main{padding:36px 40px;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.cm-tag{font-family:var(--ff-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:6px;display:inline-block;margin-bottom:16px;font-weight:600}
.cm-tag.teal{background:var(--teal-bg);color:var(--teal)}.cm-tag.violet{background:var(--violet-bg);color:var(--violet)}.cm-tag.amber{background:var(--amber-bg);color:var(--amber)}
.cm-h{font-family:var(--ff-head);font-size:22px;font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:12px}
.cm-body{font-size:14px;color:var(--muted);line-height:1.72;margin-bottom:24px}
.cm-stat{font-family:var(--ff-head);font-size:38px;font-weight:800;line-height:1;margin-bottom:4px}
.cm-stat.teal{color:var(--teal)}.cm-stat.violet{color:var(--violet)}.cm-stat.amber{color:var(--amber)}
.cm-stat-label{font-size:13px;color:var(--muted)}
.case-quote{padding:36px;background:var(--off);display:flex;flex-direction:column;justify-content:space-between}
.cq-text{font-size:14px;color:var(--ink3);line-height:1.72;font-style:italic;margin-bottom:20px;position:relative;padding-top:28px}
.cq-text::before{content:'\201C';font-family:var(--ff-head);font-size:56px;color:var(--border2);position:absolute;top:-8px;left:0;line-height:1}
.cq-author-name{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.cq-author-role{font-size:12px;color:var(--muted)}
.cq-link{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:4px;margin-top:16px;transition:gap .18s}
.cq-link:hover{gap:8px}





/* ===== Additional Styles ===== */

@keyframes barFill{from{width:0}to{width:59%}}

/* ===== Additional Styles ===== */


.toast-stack{
  position:absolute;
  bottom:180px;right:53px;
  width:235px;
  display:flex;flex-direction:column;gap:8px;
  z-index:10;
  pointer-events:none;
  filter:drop-shadow(0 20px 40px rgba(50,50,93,.22));
}
/* Mobile: move toasts below the main card */
@media(max-width:900px){
  .toast-stack{
    position:relative;
    bottom:auto;right:auto;
    width:100%;
    filter:none;
    margin-top:10px;
  }
}
.htoast{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(50,50,93,.1);
  box-shadow:
    0 1px 2px rgba(50,50,93,.06),
    0 8px 24px rgba(50,50,93,.14),
    0 20px 40px rgba(50,50,93,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding:12px 14px;
  display:flex;align-items:flex-start;gap:9px;
  opacity:0;
  transform:translateX(32px) scale(.94);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1),max-height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),margin .42s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
  max-height:200px;
  overflow:hidden;
}
.htoast.show{opacity:1;transform:translateX(0) scale(1)}
.htoast.hide{opacity:0;transform:translateX(16px) scale(.96);max-height:0;padding-top:0;padding-bottom:0;margin:0;pointer-events:none}
.ht-icon{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.ht-icon.success{background:rgba(14,166,106,.12)}
.ht-icon.warning{background:rgba(245,166,35,.12)}
.ht-icon.error{background:rgba(226,89,80,.1)}
.ht-icon.info{background:rgba(99,91,255,.1)}
.ht-body{flex:1;min-width:0}
.ht-title{font-size:9.5px;font-weight:800;color:#0a2540;letter-spacing:-.02em;margin-bottom:2px;line-height:1.3}
.ht-sub{font-size:8px;color:#6b7c93;line-height:1.45}
.ht-time{font-size:7.5px;color:#b0bec5;margin-top:3px;font-weight:500}
.ht-bar{
  position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 14px 14px;
  width:100%;transform-origin:left;
}
.ht-bar.success{background:linear-gradient(90deg,#0ea66a,#0dc888)}
.ht-bar.warning{background:linear-gradient(90deg,#f5a623,#fbbf24)}
.ht-bar.error{background:linear-gradient(90deg,#e25950,#ff7675)}
.ht-bar.info{background:linear-gradient(90deg,#635bff,#a78bfa)}
.ht-bar.running{animation:barShrink var(--dur,3.5s) linear forwards}
@keyframes barShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ===== Hero Bar Fill Animation ===== */
@keyframes barFill {
  from { width: 0; }
  to   { width: 59%; }
}

/* ===== Apple-style Modules Grid (.amod) ===== */
.amod {
  background: #fff;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: background .16s;
  cursor: default;
}
.amod:hover { background: #f8f9fc; }
.amod-ico {
  font-size: 26px;
  margin-bottom: 14px;
  display: block;
  line-height: 1;
}
.amod-t {
  font-size: 13.5px;
  font-weight: 700;
  color: #0a2540;
  letter-spacing: -.02em;
  margin-bottom: 5px;
  line-height: 1.3;
}
.amod-s {
  font-size: 12px;
  color: #8898aa;
  line-height: 1.55;
  letter-spacing: -.005em;
}

/* Mobile — modules grid */
@media (max-width: 900px) {
  #modules { padding: 72px 20px 64px; }
  #modules > div:nth-child(1) { margin-bottom: 48px; }
  #modules [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
    border-radius: 16px;
  }
  .amod { padding: 20px 16px; }
  .amod-ico { font-size: 22px; margin-bottom: 10px; }
  .amod-t { font-size: 12.5px; }
  .amod-s { font-size: 11px; }
}
@media (max-width: 480px) {
  #modules [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .amod { padding: 16px 14px; }
}

/* ===== Contact Form Section ===== */
@media (max-width: 900px) {
  #contact {
    padding: 72px 20px;
  }
  #contact > div {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}
@media (max-width: 480px) {
  #contact {
    padding: 56px 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO MOBILE — Fix mockup vertical collapse & layout shifts
   The mockup uses a flex app-shell with height:100% children,
   which collapses to nothing when no explicit height is given.
   We pin the card height and disable the problematic flex growth.
═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO: no forced full-screen on mobile ── */
@media (max-width: 1100px) {
  .hero {
    min-height: unset !important;
    padding-bottom: 0;
  }
  .hero-left {
    padding-bottom: 40px !important;
  }
}

/* ── 2. HERO RIGHT — centered column, no overflow issues ── */
@media (max-width: 1100px) {
  .hero-right {
    padding: 0 16px 48px !important;
    width: 100%;
  }
  .hero-3d-scene {
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
}

/* ── 3. MOCKUP MAIN — explicit height so flex children don't collapse ── */
@media (max-width: 1100px) {
  .mockup-main {
    /* Pin to a fixed height that matches the dashboard content */
    height: 440px !important;
    min-height: 440px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    animation: none !important;
    width: 100% !important;
    max-width: 480px !important;
    align-self: center;
    overflow: hidden !important;
    /* Kill the 3d perspective tilt */
    perspective: none !important;
  }

  /* The inner app-shell div needs a full height to fill the card */
  .mockup-main > div[style] {
    height: 100% !important;
  }

  /* Sidebar: slightly narrower on small screens */
  .mockup-main [style*="width:120px"] {
    width: 100px !important;
    flex-shrink: 0 !important;
  }

  /* The bottom 2-col grid inside the main content area:
     let it scroll instead of squishing */
  .mockup-main [style*="grid-template-columns:1fr 1fr"][style*="flex:1"] {
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  /* Kill notif ping on mobile (causes layout jump) */
  .notif-ping {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mockup-main {
    height: 400px !important;
    min-height: 400px !important;
    max-width: 100% !important;
  }
  /* Sidebar: even narrower, hide section labels */
  .mockup-main [style*="width:120px"] {
    width: 88px !important;
  }
}

@media (max-width: 480px) {
  .mockup-main {
    height: 360px !important;
    min-height: 360px !important;
    border-radius: 12px !important;
  }
}

/* ── 4. FLOATING GREEN CARD (dash-3d-side2) — clean stacking ── */
@media (max-width: 1100px) {
  .dash-3d-side2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    align-self: center;
    transform: none !important;
    animation: floatCardMobile 4s ease-in-out infinite !important;
    border-radius: 16px !important;
    order: 2;
    margin: 0 auto;
  }
  @keyframes floatCardMobile {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
}

/* ── 5. TOAST STACK — stacks below green card, full width ── */
@media (max-width: 1100px) {
  .toast-stack {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    filter: none !important;
    align-self: center;
    margin: 0 auto;
    order: 3;
  }
}

/* ── 6. HERO GRADIENT — reduce opacity so it doesn't bleed weirdly ── */
@media (max-width: 1100px) {
  .hero-gradient {
    width: 100% !important;
    height: 50% !important;
    top: auto !important;
    bottom: 0 !important;
    opacity: 0.25 !important;
  }
}

/* ── 7. Scene decorations — hide on mobile (cause layout artifacts) ── */
@media (max-width: 1100px) {
  .scene-glow,
  .orbit-ring,
  .person-behind,
  .dash-notif-card {
    display: none !important;
  }
}

/* ── 8. Prevent [data-r] opacity:0 from creating invisible gaps ── */
@media (max-width: 1100px) {
  [data-r] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 9. Kill all sections' large desktop padding on mobile ── */
@media (max-width: 900px) {
  .hero { padding-bottom: 0 !important; }
  section#proof   { padding: 56px 20px !important; }
  section#faq     { padding: 56px 20px !important; }
  section#modules { padding: 56px 20px 48px !important; }
  .stats-sec      { padding: 56px 20px !important; }
  .cta-sec        { padding: 72px 20px !important; }
  .bento-sec      { padding: 56px 0 !important; }
  .portal-sec     { padding: 56px 0 !important; }
  .industry-sec   { padding: 56px 0 !important; }
  .excel-sec      { padding: 44px 20px !important; }
  .cases-sec      { padding: 0 20px 56px !important; }
  .portal-full-intro { padding: 44px 20px 28px !important; }
}
@media (max-width: 480px) {
  section#proof   { padding: 44px 16px !important; }
  section#faq     { padding: 44px 16px !important; }
  section#modules { padding: 44px 16px 36px !important; }
  section#contact { padding: 56px 16px !important; }
  .cta-sec        { padding: 56px 16px !important; }
}