dashboard/styles.css

/* ============================================================
   RESO — Landing styles
   Font: Uncut Sans (Fontsource CDN)
   Icons: Font Awesome
   Theme: Light, Sky Blue accent
   ============================================================ */

:root{
  --ink:#09090B;
  --ink-2:#3F3F46;
  --muted:#71717A;
  --faint:#A1A1AA;
  --canvas:#FFFFFF;
  --soft:#F8F8FA;
  --soft-2:#F2F2F5;
  --line:#E4E4E7;
  --line-2:#D4D4D8;
  --indigo:#0EA5E9;
  --indigo-2:#38BDF8;
  --indigo-light:#E0F2FE;
  --indigo-border:#BAE6FD;
  --blue:#0284C7;
  --green:#16A34A;
  --green-light:#F0FDF4;
  --green-border:#BBF7D0;
  --radius:12px;
  --radius-lg:18px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 2px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Uncut Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--canvas);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img,svg{display:block}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}

/* ---- BUTTONS ---- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:500; font-size:14.5px;
  padding:10px 18px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), background .2s, box-shadow .25s var(--ease), border-color .2s;
  white-space:nowrap; font-family:inherit;
}
.btn i{font-size:16px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.btn-accent{background:var(--indigo); color:#fff; border-color:var(--indigo)}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 10px 24px -6px rgba(14,165,233,.5); background:#0284C7}
.btn-ghost{background:var(--canvas); color:var(--ink-2); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--soft); border-color:var(--line); transform:translateY(-1px)}
.btn-white{background:#fff; color:var(--indigo); border-color:#fff; font-weight:600}
.btn-white:hover{background:#F5F5FF; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.15)}
.btn-ghost-white{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25)}
.btn-ghost-white:hover{background:rgba(255,255,255,.18); transform:translateY(-1px)}
.btn-lg{padding:13px 22px; font-size:15.5px; border-radius:13px}

/* ---- NAV (iOS-style glass) ---- */
header{position:sticky; top:0; z-index:200; padding:14px 0; transition:padding .3s var(--ease)}
header.scrolled{padding:10px 0}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  height:54px; padding:0 10px 0 18px;
  background:rgba(255,255,255,.38);
  backdrop-filter:blur(22px) saturate(1.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:
    0 1px 1px rgba(255,255,255,.6) inset,
    0 -1px 12px rgba(186,230,253,.35) inset,
    0 12px 28px -12px rgba(2,132,199,.22),
    0 2px 10px rgba(15,23,42,.05);
  transition:all .3s var(--ease);
  overflow:hidden;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(224,242,254,.45), rgba(255,255,255,0) 45%, rgba(255,255,255,0) 60%, rgba(186,230,253,.3));
}
.nav > *{position:relative; z-index:1}
header.scrolled .nav{
  background:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.7);
  box-shadow:
    0 1px 1px rgba(255,255,255,.7) inset,
    0 -1px 14px rgba(186,230,253,.4) inset,
    0 16px 34px -12px rgba(2,132,199,.26),
    0 2px 10px rgba(15,23,42,.06);
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:18px; letter-spacing:-.02em;
  transition:opacity .2s;
}
.brand:hover{opacity:.82}
.brand .logo{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo); color:#fff;
  transition:transform .3s var(--ease);
}
.brand:hover .logo{transform:rotate(-8deg) scale(1.07)}
.brand .logo i{font-size:15px}
.nav-links{
  display:flex; gap:2px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.5);
  border-radius:100px; padding:3px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.nav-links a{
  color:var(--ink-2); font-size:13.5px; font-weight:500;
  padding:7px 13px; border-radius:100px;
  transition:background .2s, color .2s, box-shadow .2s;
}
.nav-links a:hover{background:rgba(255,255,255,.6); color:var(--ink)}
.nav-links a.active{
  background:rgba(255,255,255,.92);
  color:var(--indigo); font-weight:600;
  box-shadow:0 2px 8px rgba(15,23,42,.12), inset 0 0 0 1px rgba(14,165,233,.2);
}
.nav-cta{display:flex; align-items:center; gap:8px}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; font-size:20px; color:var(--ink); border-radius:8px; transition:background .15s}
.nav-toggle:hover{background:rgba(255,255,255,.6)}

/* ---- HERO ---- */
.hero{
  position:relative;
  padding:80px 0 48px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(180deg, #E4F3FF 0%, #EFF8FF 22%, #F8FCFF 45%, #FFFFFF 72%);
}
.grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,0,0,.5) 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(0,0,0,.5) 0%,transparent 80%);
  opacity:.6;
}
.hero .wrap{position:relative; z-index:1}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 8px 5px 6px; margin-bottom:28px;
  background:var(--canvas); border:1px solid var(--line);
  border-radius:100px; font-size:13px; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s;
}
.pill:hover{box-shadow:var(--shadow-md)}
.pill .tag{
  background:var(--indigo-light); color:var(--indigo);
  font-weight:600; font-size:11.5px; padding:3px 8px;
  border-radius:100px;
}
.pill i{font-size:14px; color:var(--indigo); transition:transform .2s}
.pill:hover i{transform:translateX(3px)}

h1.display{
  font-size:clamp(36px,6vw,70px);
  line-height:1.03; letter-spacing:-.04em; font-weight:700;
  max-width:14ch; margin:0 auto 20px;
  color:var(--ink);
}
.hero-sub{
  font-size:clamp(16px,2vw,19px);
  color:var(--muted); max-width:54ch;
  margin:0 auto 28px; line-height:1.6;
}
.hero-cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:20px}
.hero-note{
  font-size:13px; color:var(--faint);
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}
.hero-note span{display:inline-flex; align-items:center; gap:6px}
.hero-note i{font-size:14px; color:var(--green)}

/* ---- CONSOLE MOCKUP ---- */
.console{
  max-width:920px; margin:52px auto 0;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  border:1px solid rgba(228,228,231,.8);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 60px -20px rgba(15,23,42,.28),
    0 10px 24px -12px rgba(2,132,199,.16),
    0 2px 6px rgba(15,23,42,.06);
  overflow:hidden; text-align:left;
  transform:translateZ(0);
}
.console-bar{
  display:flex; align-items:center;
  padding:11px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FCFCFD,#F5F5F7);
  gap:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.cb-left{display:flex; gap:6px; align-items:center}
.cb-dot{width:10px; height:10px; border-radius:50%; display:block; box-shadow:0 1px 1px rgba(0,0,0,.15) inset, 0 0.5px 0 rgba(255,255,255,.4)}
.d1{background:#FF5F57} .d2{background:#FEBC2E} .d3{background:#28C840}
.addr{
  flex:1; display:flex; align-items:center; gap:7px;
  background:var(--canvas); border:1px solid var(--line);
  border-radius:7px; padding:5px 12px;
  font-family:'Courier New',monospace; font-size:12px;
  color:var(--muted); max-width:280px; margin:0 auto;
  box-shadow:0 1px 2px rgba(15,23,42,.06) inset;
}
.addr i{font-size:13px; color:var(--green)}
.cb-right{display:flex; align-items:center}
.live-badge{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:500; color:var(--green);
  background:var(--green-light); border:1px solid var(--green-border);
  padding:3px 9px; border-radius:100px;
  box-shadow:0 1px 2px rgba(22,163,74,.08);
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.4)}70%{box-shadow:0 0 0 6px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.console-body{display:grid; grid-template-columns:180px 1fr; min-height:300px}
.c-side{
  border-right:1px solid var(--line);
  padding:14px 10px;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(180deg, rgba(248,248,250,.6), rgba(248,248,250,.15));
  box-shadow:1px 0 0 rgba(255,255,255,.6) inset;
}
.s-label{
  font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--faint);
  font-weight:600; padding:10px 10px 5px;
}
.s-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:7px;
  font-size:12.5px; color:var(--muted);
  cursor:pointer; transition:background .15s, color .15s, box-shadow .15s;
}
.s-item i{font-size:14px}
.s-item:hover{background:var(--soft-2); color:var(--ink)}
.s-item.active{
  background:linear-gradient(180deg,#EAF7FF,#E0F2FE);
  color:var(--indigo); font-weight:500;
  box-shadow:0 2px 6px -2px rgba(14,165,233,.35), inset 0 0 0 1px rgba(14,165,233,.15);
}
.c-main{padding:20px 22px}
.c-header{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; gap:12px}
.c-main h4{font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px}
.c-desc{font-size:12px; color:var(--muted)}
.badge-ok{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; color:var(--green);
  background:var(--green-light); border:1px solid var(--green-border);
  padding:3px 9px; border-radius:100px;
  white-space:nowrap; flex-shrink:0;
  box-shadow:0 1px 2px rgba(22,163,74,.08);
}
.badge-ok .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.proof-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px;
  background:linear-gradient(180deg,#FFFFFF,var(--soft));
  box-shadow:0 1px 3px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.8) inset;
  opacity:0; transform:translateY(8px);
}
.proof-row.show{opacity:1; transform:none; transition:all .4s var(--ease)}
.proof-ico{
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.proof-ico i{font-size:16px}
.pi-indigo{background:var(--indigo-light); color:var(--indigo)}
.pi-blue{background:#E0F2FE; color:var(--blue)}
.pi-green{background:var(--green-light); color:var(--green)}
.proof-txt{flex:1}
.proof-txt .t{color:var(--ink); font-size:12.5px; font-weight:500}
.proof-txt .s{color:var(--muted); font-size:11px; font-family:'Courier New',monospace}
.c-proofbar{
  margin-top:8px; height:4px; border-radius:100px;
  background:var(--soft-2); overflow:hidden;
  box-shadow:0 1px 1px rgba(15,23,42,.05) inset;
}
.c-proofbar i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--indigo),var(--indigo-2));
}

/* ---- MARQUEE ---- */
.trust{padding:44px 0 12px; text-align:center}
.trust p{
  font-size:11.5px; text-transform:uppercase;
  letter-spacing:.13em; color:var(--faint);
  font-weight:600; margin-bottom:20px;
}
.marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex; gap:44px; width:max-content; animation:scroll 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.logo-item{
  display:flex; align-items:center; gap:8px;
  color:var(--faint); font-weight:600; font-size:15px;
  transition:color .2s; white-space:nowrap;
}
.logo-item:hover{color:var(--ink)}
.logo-item i{font-size:20px}

/* ---- SECTIONS ---- */
section{position:relative}
.sec{padding:96px 0}
.sec-alt{background:var(--soft)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  color:var(--indigo); margin-bottom:14px;
}
.eyebrow::before{content:""; width:20px; height:1.5px; background:var(--indigo); display:inline-block; border-radius:2px}
h2.sec-title{
  font-size:clamp(28px,4vw,44px);
  line-height:1.07; letter-spacing:-.03em;
  font-weight:700; max-width:22ch;
}
.sec-lead{
  font-size:17px; color:var(--muted);
  max-width:58ch; margin-top:16px; line-height:1.6;
}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-head.center h2.sec-title,
.sec-head.center .sec-lead{margin-left:auto; margin-right:auto}

/* reveal animation */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}

/* ---- STEPS ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.step{
  position:relative; padding:26px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--canvas);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.step .num{
  font-family:'Courier New',monospace;
  font-size:12px; font-weight:600; color:var(--indigo);
  background:var(--indigo-light); width:32px; height:32px;
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.step .s-ic{
  font-size:24px; color:var(--ink);
  display:block; margin-bottom:14px;
}
.step h3{font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px}
.step p{color:var(--muted); font-size:14.5px; line-height:1.6}
.step .connector{
  position:absolute; top:40px; right:-18px;
  font-size:18px; color:var(--line-2); z-index:2;
}

/* ---- BENTO ---- */
.bento{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px}
.card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--canvas); padding:26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card .c-ic{
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo-light); color:var(--indigo);
  margin-bottom:16px;
}
.card .c-ic i{font-size:20px}
.card h3{font-size:19px; font-weight:600; letter-spacing:-.015em; margin-bottom:8px}
.card p{color:var(--muted); font-size:14px; line-height:1.6}
.card-hero{grid-row:span 2}
.card-hero .mini-viz{
  margin-top:22px; border:1px solid var(--line);
  border-radius:10px; padding:14px;
  background:var(--soft);
}
.viz-row{
  display:flex; align-items:center;
  justify-content:space-between; padding:8px 0;
  border-bottom:1px solid var(--line); font-size:12.5px;
}
.viz-row:last-child{border-bottom:none}
.viz-row .k{color:var(--muted); font-family:'Courier New',monospace; font-size:11.5px}
.viz-row .v{display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:500; font-family:'Courier New',monospace}
.viz-row .v i{font-size:12px}
.v.locked{color:var(--indigo)}
.v.proven{color:var(--green)}

/* ---- FEATURES GRID ---- */
.feat-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden;
}
.feat{
  background:var(--canvas); padding:28px 26px;
  transition:background .2s;
}
.feat:hover{background:var(--soft)}
.feat .f-ic{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo-light); color:var(--indigo);
  margin-bottom:16px; transition:transform .3s var(--ease);
}
.feat:hover .f-ic{transform:translateY(-2px)}
.feat .f-ic i{font-size:19px}
.feat .f-tag{
  font-size:11px; color:var(--faint);
  text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; margin-bottom:8px;
}
.feat h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:7px}
.feat p{color:var(--muted); font-size:13.5px; line-height:1.6}

/* ---- INTEGRATIONS ---- */
.integ-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.integ{
  display:flex; align-items:center; gap:12px;
  padding:18px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--canvas);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.integ:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm)}
.integ .i-ic{
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--soft-2); color:var(--ink); flex-shrink:0;
}
.integ .i-ic i{font-size:20px}
.integ .i-t{font-weight:600; font-size:14px}
.integ .i-s{font-size:12px; color:var(--muted); margin-top:2px}

/* ---- USE CASES ---- */
.uc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.uc{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; background:var(--canvas);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.uc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.uc .uc-ic{
  width:42px; height:42px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo-light); color:var(--indigo);
  margin-bottom:14px;
}
.uc .uc-ic i{font-size:20px}
.uc .uc-cat{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--indigo); font-weight:600; margin-bottom:8px;
}
.uc h3{font-size:16.5px; font-weight:600; margin-bottom:7px; letter-spacing:-.01em}
.uc p{font-size:13.5px; color:var(--muted); line-height:1.55}

/* ---- STATS ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.stat{
  padding:28px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--canvas);
}
.stat .n{
  font-size:clamp(36px,5vw,52px); font-weight:700;
  letter-spacing:-.04em; line-height:1;
  color:var(--indigo);
}
.stat .l{color:var(--muted); font-size:14px; margin-top:10px}

/* ---- TESTIMONIALS ---- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; background:var(--canvas);
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.quote:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.quote .stars{display:flex; gap:3px; color:#FBBF24; margin-bottom:14px}
.quote .stars i{font-size:14px}
.quote blockquote{font-size:15px; line-height:1.65; color:var(--ink-2); flex:1}
.quote .who{display:flex; align-items:center; gap:11px; margin-top:20px}
.quote .av{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; font-size:14px; flex-shrink:0;
}
.quote .who .nm{font-weight:600; font-size:14px}
.quote .who .rl{font-size:12px; color:var(--muted)}

/* ---- CTA ---- */
.cta-wrap{
  border-radius:22px; overflow:hidden;
  background:var(--indigo);
  padding:72px 40px; text-align:center;
  color:#fff; position:relative;
}
.cta-wrap::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
}
.cta-wrap .eyebrow{margin-bottom:12px; position:relative; z-index:1}
.cta-wrap .eyebrow::before{background:rgba(255,255,255,.5)}
.cta-wrap h2{
  font-size:clamp(30px,4.5vw,50px);
  letter-spacing:-.03em; font-weight:700;
  line-height:1.05; margin-bottom:16px;
  position:relative; z-index:1;
}
.cta-wrap p{
  color:rgba(255,255,255,.75); font-size:17px;
  max-width:50ch; margin:0 auto 28px;
  position:relative; z-index:1; line-height:1.6;
}
.cta-wrap .hero-cta{position:relative; z-index:1}
.publish-bar{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:28px; padding:7px 7px 7px 14px;
  border-radius:10px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  position:relative; z-index:1;
}
.publish-bar i{font-size:14px}
.publish-bar .u{font-family:'Courier New',monospace; font-size:12.5px; color:rgba(255,255,255,.75)}
.publish-bar .pb-btn{background:#fff; color:var(--indigo); font-size:12px; font-weight:600; padding:5px 12px; border-radius:7px}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--line); padding:60px 0 32px; background:var(--soft)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:28px; margin-bottom:44px}
.foot-brand p{color:var(--muted); font-size:13.5px; max-width:28ch; margin:14px 0 0; line-height:1.6}
.foot-col h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--faint); margin-bottom:14px; font-weight:600;
}
.foot-col a{display:block; color:var(--ink-2); font-size:13.5px; padding:5px 0; transition:color .15s}
.foot-col a:hover{color:var(--indigo)}
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:22px; border-top:1px solid var(--line);
  flex-wrap:wrap; gap:14px;
}
.foot-bottom p{color:var(--faint); font-size:12.5px}
.foot-social{display:flex; gap:8px}
.foot-social a{
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); background:var(--canvas);
  font-size:16px; transition:all .2s;
}
.foot-social a:hover{color:#fff; background:var(--ink); border-color:var(--ink); transform:translateY(-2px)}

/* ---- GLOBAL 3D PROOF NETWORK ---- */
.globe-sec{overflow:hidden}
.globe-stage{
  position:relative; max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1fr 300px; align-items:center; gap:24px;
  padding:0 24px 8px;
}
.globe-canvas-wrap{
  position:relative; width:100%; aspect-ratio:1/1; max-width:520px; margin:0 auto;
}
#globeCanvas{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#globeCanvas:active{cursor:grabbing}
.globe-glow{
  position:absolute; inset:-12%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(14,165,233,.2), transparent 70%);
  filter:blur(24px); animation:globePulse 4s ease-in-out infinite;
}
@keyframes globePulse{0%,100%{opacity:.55; transform:scale(1)}50%{opacity:1; transform:scale(1.07)}}
.globe-feed{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--canvas); padding:16px; box-shadow:var(--shadow-sm);
  max-height:400px; display:flex; flex-direction:column;
}
.gf-label{
  display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600;
  color:var(--ink-2); text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.gf-label .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.gf-list{display:flex; flex-direction:column; gap:8px; overflow:hidden; flex:1; min-height:220px}
.gf-item{
  display:flex; align-items:flex-start; gap:8px; padding:9px 10px;
  border:1px solid var(--line); border-radius:9px; background:var(--soft);
  font-size:12px; line-height:1.5; color:var(--ink-2); opacity:0; transform:translateY(-6px);
  animation:gfIn .5s var(--ease) forwards;
}
@keyframes gfIn{to{opacity:1; transform:none}}
.gf-item i{color:var(--green); font-size:14px; flex-shrink:0; margin-top:1px}
.gf-item b{color:var(--ink); font-weight:600}
.globe-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px}
.gstat{text-align:center; padding:20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--canvas)}
.gstat .gn{font-size:30px; font-weight:700; letter-spacing:-.03em; color:var(--indigo)}
.gstat .gl{font-size:12.5px; color:var(--muted); margin-top:4px}
@media(max-width:860px){
  .globe-stage{grid-template-columns:1fr}
  .globe-feed{max-height:220px}
  .gf-list{min-height:120px}
}

/* ---- GRADIENT TEXT ---- */
.grad-text{
  background:linear-gradient(90deg,var(--indigo),#7DD3FC,var(--blue),var(--indigo));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 5s linear infinite;
}
@keyframes gradShift{to{background-position:300% center}}

/* ---- SCROLL PROGRESS BAR ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--indigo),var(--indigo-2),#7DD3FC);
  z-index:999; transition:width .12s linear;
}

/* ---- CURSOR SPOTLIGHT ---- */
.spotlight{
  position:fixed; width:440px; height:440px; border-radius:50%;
  pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(14,165,233,.08), transparent 70%);
  transform:translate(-50%,-50%); left:0; top:0; opacity:0; transition:opacity .3s;
}

/* ---- RESPONSIVE ---- */
@media(max-width:920px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav{overflow:visible}
  .steps,.integ-grid,.uc-grid,.stats,.quotes,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr 1fr} .card-hero{grid-column:span 2; grid-row:auto}
  .console-body{grid-template-columns:1fr} .c-side{display:none}
  .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:span 2}
  .step .connector{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .steps,.integ-grid,.uc-grid,.stats,.quotes,.feat-grid,.bento{grid-template-columns:1fr}
  .card-hero{grid-column:auto}
  .sec{padding:68px 0} .hero{padding:56px 0 32px}
  .foot-grid{grid-template-columns:1fr} .foot-brand{grid-column:auto}
  .hero-note{gap:10px}
  .cta-wrap{padding:48px 20px}
  .nav{padding:0 8px 0 14px}
  .brand{font-size:16px}
  .nav-cta .btn{padding:9px 14px; font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
}

/* ---- HERO ORBS (wow factor) ---- */
.orb{position:absolute; z-index:0; border-radius:50%; filter:blur(60px); opacity:.32; pointer-events:none}
.orb-1{width:340px; height:340px; background:var(--indigo); top:-100px; left:-70px; animation:orbFloat1 15s ease-in-out infinite}
.orb-2{width:260px; height:260px; background:#7DD3FC; top:20px; right:-50px; animation:orbFloat2 19s ease-in-out infinite}
.orb-3{width:220px; height:220px; background:var(--blue); bottom:-70px; left:40%; animation:orbFloat3 17s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,42px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-32px,30px)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-26px)}}

/* ---- 3D TILT (JS-driven, desktop pointer only) ---- */
.card, .feat, .step, .uc, .integ, .quote, .gstat{transition:transform .18s ease-out, box-shadow .3s var(--ease)}

/* ---- MOBILE / PERFORMANCE POLISH ---- */
#globeCanvas{touch-action:pan-y}
@media(max-width:860px){
  .globe-canvas-wrap{max-width:320px}
}
@media(max-width:560px){
  .orb{display:none}
}