/* ==========================================================================
   Premium dark/glass theme overlay — applied to every page via body.dark-3d.
   Kept as a separate overlay file (rather than merged into style.css) so the
   Corporate Cloud light tokens in style.css stay untouched and easy to
   restore per-page if ever needed.
   ========================================================================== */

body.dark-3d{
  --bg:#05070e;
  --bg-soft:#0a0e1c;
  --bg-soft-2:#0f1426;
  --border:rgba(255,255,255,.1);
  --ink-900:#f3f5fb;
  --ink-700:#b7bfdb;
  --ink-500:#8089ab;
  --ink-300:#555e80;
  --navy-900:#f3f5fb;
  --navy-800:#e7ebf7;
  --navy-700:#dbe1f2;
  /* Shadows on a near-black page need their own tuning: plain dark shadows
     barely read against a dark background, so every shadow token here
     carries a soft colour-tinted glow in addition to the black falloff. */
  --shadow-sm:0 2px 14px rgba(0,0,0,.45);
  --shadow-md:0 18px 40px rgba(0,0,0,.55),0 0 34px -14px rgba(28,124,242,.4);
  --shadow-lg:0 34px 80px rgba(0,0,0,.6),0 0 60px -16px rgba(28,124,242,.4);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(28,124,242,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(31,182,214,.10), transparent 55%),
    var(--bg);
}
body.dark-3d h1,body.dark-3d h2,body.dark-3d h3,body.dark-3d h4{color:var(--ink-900);}
body.dark-3d p{color:var(--ink-700);}

/* Gradient headline text needs a soft glow on dark backgrounds, otherwise
   it reads flat — a subtle drop-shadow in the brand blue lifts it off the page. */
body.dark-3d .text-gradient{filter:drop-shadow(0 0 26px rgba(28,124,242,.35));}

/* Eyebrow badges were low-contrast on a near-black background; give them a
   visible border and a touch more fill so they read as a defined chip. */
body.dark-3d .eyebrow{
  background:rgba(111,180,255,.12);
  border:1px solid rgba(111,180,255,.28);
  color:#8fc4ff;
}
body.dark-3d .page-hero .eyebrow,
body.dark-3d .hero .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#bcd0ff;}

/* Richer button glow on a dark page */
body.dark-3d .btn-primary:hover{box-shadow:0 24px 50px -10px rgba(28,124,242,.65);}
body.dark-3d .card-icon{box-shadow:0 16px 32px -10px var(--accent-glow,rgba(28,124,242,.5));}
body.dark-3d .hero-card-icon{box-shadow:0 10px 24px -8px rgba(28,124,242,.55);}
body.dark-3d .brand-logo{box-shadow:0 10px 24px -8px rgba(28,124,242,.55);}
body.dark-3d .avatar{box-shadow:0 10px 22px -8px rgba(28,124,242,.5);}
body.dark-3d .icon-circle{box-shadow:0 4px 12px -4px rgba(28,124,242,.6);}

/* Header: dark glass */
body.dark-3d .site-header{
  background:rgba(5,7,14,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
body.dark-3d .site-header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45);}
body.dark-3d .nav-links a.nav-link{color:var(--ink-700);}
body.dark-3d .nav-links a.nav-link:hover,
body.dark-3d .nav-links a.nav-link.active{background:rgba(255,255,255,.07);color:#fff;}
body.dark-3d .brand-text strong{color:var(--ink-900);}
body.dark-3d .dropdown{
  background:#0b0f1e;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 54px rgba(0,0,0,.55);
}
body.dark-3d .dropdown a{color:var(--ink-900);}
body.dark-3d .dropdown a small{color:var(--ink-500);}
body.dark-3d .dropdown a:hover{background:rgba(255,255,255,.06);color:#6fb4ff;}
body.dark-3d .btn-outline{color:var(--ink-900);border-color:rgba(255,255,255,.18);}
body.dark-3d .btn-outline:hover{background:rgba(255,255,255,.06);border-color:#6fb4ff;color:#6fb4ff;}
body.dark-3d .theme-toggle{background:rgba(255,255,255,.08);color:#fff;}
body.dark-3d .theme-toggle:hover{background:rgba(255,255,255,.14);}
body.dark-3d .nav-toggle{background:rgba(255,255,255,.08);}
body.dark-3d .nav-toggle span,
body.dark-3d .nav-toggle span::before,
body.dark-3d .nav-toggle span::after{background:#fff;}
body.dark-3d .nav-links.mobile-open{background:#070a14;border-bottom:1px solid rgba(255,255,255,.08);}

/* Glass cards */
body.dark-3d .card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.dark-3d .card:hover{border-color:rgba(111,180,255,.35);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 50px -16px var(--accent-glow,rgba(28,124,242,.5));}
body.dark-3d .card-icon::after{opacity:.75;}
body.dark-3d .card-link{color:#6fb4ff;}

/* Perspective wrapper for 3D tilt cards */
.tilt-3d{transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;}

/* Section-soft: dark glass panel instead of light dot grid */
body.dark-3d .section-soft{
  background-color:var(--bg-soft);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:26px 26px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Logo strip */
body.dark-3d .logo-strip{border-bottom:1px solid rgba(255,255,255,.08);}
body.dark-3d .logo-strip p{color:var(--ink-500);}
body.dark-3d .logo-row span{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--ink-700);
}

/* Split-visual card already dark-gradient; add glass border for depth */
body.dark-3d .split-visual{box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07);}

/* Steps */
body.dark-3d .step::before{box-shadow:0 10px 24px -8px rgba(28,124,242,.7);}
body.dark-3d .step:not(:last-child)::after{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.14) 0 6px,transparent 6px 12px);}

/* Testimonials -> glass */
body.dark-3d .testi-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.dark-3d .testi-person span{color:var(--ink-500);}

/* CTA banner: add cinematic glow on dark bg */
body.dark-3d .cta-banner{box-shadow:0 40px 90px -20px rgba(28,124,242,.55);}

/* Back to top already theme-neutral gradient circle, fine as is */

/* Pricing cards */
body.dark-3d .price-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.dark-3d .price-card:hover{border-color:rgba(111,180,255,.35);}
body.dark-3d .price-card.featured{box-shadow:0 40px 80px -16px rgba(28,124,242,.5);}
body.dark-3d .price-sub{color:var(--ink-500);}
body.dark-3d .save-badge{background:rgba(15,157,110,.18);}

/* Compare table */
body.dark-3d .compare-table{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none;
}
body.dark-3d .compare-table th,body.dark-3d .compare-table td{border-color:rgba(255,255,255,.08);}
body.dark-3d .compare-table thead th{background:rgba(255,255,255,.05);}
body.dark-3d .compare-table td.no{color:var(--ink-300);}

/* FAQ */
body.dark-3d .faq-item{border-color:rgba(255,255,255,.1);}
body.dark-3d .faq-q .plus{background:rgba(255,255,255,.08);}
body.dark-3d .faq-q .plus::before,body.dark-3d .faq-q .plus::after{background:var(--ink-900);}

/* Contact form */
body.dark-3d .form-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:none;
}

/* Support team cards */
body.dark-3d .team-card{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
body.dark-3d .team-card:hover{border-color:rgba(111,180,255,.35);}
body.dark-3d .team-card strong{color:var(--ink-900);}
body.dark-3d .team-phone{color:#6fb4ff;}
body.dark-3d .team-phone:hover{color:#9fd0ff;}
body.dark-3d .form-group input,
body.dark-3d .form-group select,
body.dark-3d .form-group textarea{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--ink-900);
}
body.dark-3d .form-group input:focus,
body.dark-3d .form-group select:focus,
body.dark-3d .form-group textarea:focus{background:rgba(255,255,255,.07);border-color:#6fb4ff;}
/* The <select> element itself picks up the dark/light tokens above, but the
   native dropdown *popup list* keeps its own OS background in most browsers —
   without this, light option text lands on a default white popup and
   disappears. Setting background+color on <option> fixes the popup itself. */
body.dark-3d .form-group select option{background:#0f1426;color:#f3f5fb;}
body.dark-3d .form-group label{color:var(--ink-900);}
body.dark-3d .form-note{color:var(--ink-500);}
body.dark-3d .contact-info-card{box-shadow:0 30px 70px rgba(0,0,0,.5);}

/* Google map: dark-mode tint so the embed doesn't look like a bright white hole */
body.dark-3d .map-embed{
  filter:grayscale(.3) invert(.9) contrast(.88) brightness(.95) hue-rotate(180deg);
  border-color:rgba(255,255,255,.1);
}

/* Avatars / icon circles / check-list text already token-driven or gradient-based — no change needed */
body.dark-3d .check-list li{color:var(--ink-900);}
body.dark-3d .pill{background:rgba(255,255,255,.06);color:var(--ink-700);}
body.dark-3d .feature-row .ico{background:rgba(255,255,255,.06);color:#6fb4ff;}

/* "Technology We Run On" 3D showcase (homepage) */
.tech-section{position:relative;}
.tech-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.tech-card{
  --accent-grad:var(--grad-primary);--accent-glow:var(--glow-blue);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:26px 14px;text-align:center;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.tech-card:nth-child(3n+2){--accent-grad:var(--grad-violet);--accent-glow:var(--glow-violet);}
.tech-card:nth-child(3n+3){--accent-grad:var(--grad-teal);--accent-glow:var(--glow-teal);}
.tech-card:hover{border-color:rgba(111,180,255,.4);box-shadow:0 30px 60px -14px var(--accent-glow);transform:translateY(-4px);}
.tech-card-icon{
  width:50px;height:50px;margin:0 auto 14px;border-radius:13px;
  background:var(--accent-grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px var(--accent-glow);
}
.tech-card strong{display:block;font-size:.88rem;color:var(--ink-900);margin-bottom:4px;font-family:var(--ff-head);}
.tech-card span:last-child{font-size:.7rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
@media(max-width:1024px){.tech-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.tech-grid{grid-template-columns:repeat(2,1fr);}}

/* Magnetic button marker (actual motion handled in JS) */
.btn-magnetic{will-change:transform;}

/* ==========================================================================
   Hero illustration v2 — cloud + server stack + shield, a wireframe globe,
   floating status badges and a product-style dashboard panel. Real HTML
   (not a flat image), so text stays selectable/SEO-friendly.
   ========================================================================== */
.hero-visual-v2{
  position:relative;min-height:640px;
  padding:70px 56px 20px 54px;
  transform:none;margin-top:0;align-self:center;
}

/* Cloud + server + shield cluster, tucked behind the top-left of the panel */
.cs-cloud{
  position:absolute;top:-10px;left:18px;width:190px;height:auto;z-index:1;
  filter:drop-shadow(0 18px 30px rgba(28,124,242,.45));
}
.cs-cloud path{fill:#1c5fe0;}
.cs-server-stack{position:absolute;top:92px;left:14px;z-index:2;display:flex;flex-direction:column;gap:6px;}
.cs-server-unit{
  width:180px;height:34px;border-radius:7px;
  background:linear-gradient(135deg,#132a5e,#0a1838);
  border:1px solid rgba(110,180,255,.35);
  box-shadow:0 10px 20px -8px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;align-items:center;gap:10px;padding:0 13px;
}
.cs-bar{
  width:40px;height:6px;border-radius:3px;
  --bar-c1:#4ade80;--bar-c2:#16a34a;--bar-glow:#4ade80;
  background:linear-gradient(90deg,var(--bar-c1),var(--bar-c2));
  box-shadow:0 0 10px var(--bar-glow);flex-shrink:0;
  animation:csBarBlink 1.1s ease-in-out infinite;
}
.cs-server-unit:nth-child(1) .cs-bar{animation-delay:0s;}
.cs-server-unit:nth-child(2) .cs-bar{animation-delay:.09s;}
.cs-server-unit:nth-child(3) .cs-bar{animation-delay:.18s;}
.cs-server-unit:nth-child(4) .cs-bar{animation-delay:.27s;}
.cs-server-unit:nth-child(5) .cs-bar{animation-delay:.36s;}
.cs-server-unit:nth-child(6) .cs-bar{animation-delay:.45s;}
.cs-server-unit:nth-child(7) .cs-bar{animation-delay:.54s;}
.cs-server-unit:nth-child(8) .cs-bar{animation-delay:.63s;}
.cs-server-unit:nth-child(9) .cs-bar{animation-delay:.72s;}
@keyframes csBarBlink{
  0%,60%,100%{opacity:1;box-shadow:0 0 10px var(--bar-glow);}
  80%{opacity:.35;box-shadow:0 0 3px var(--bar-glow);}
}
.cs-vents{display:flex;gap:4px;margin-left:auto;--vent-glow:#4ade80;}
.cs-server-unit:nth-child(3) .cs-vents,
.cs-server-unit:nth-child(8) .cs-vents{--vent-glow:#f87171;}
.cs-vents i{
  width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);display:block;
  animation:csVentBlink 0.9s ease-in-out infinite;
}
.cs-vents i:nth-child(1){animation-delay:0s;}
.cs-vents i:nth-child(2){animation-delay:.3s;}
.cs-vents i:nth-child(3){animation-delay:.6s;}
@keyframes csVentBlink{
  0%,70%,100%{background:rgba(255,255,255,.3);}
  85%{background:var(--vent-glow);}
}
@media(prefers-reduced-motion:reduce){
  .cs-bar,.cs-vents i{animation:none;}
}
.cs-shield{
  position:absolute;top:458px;left:76px;z-index:3;width:56px;height:56px;border-radius:14px;
  background:var(--grad-primary);display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 32px -8px rgba(28,124,242,.7);
}
.cs-shield svg{width:28px;height:28px;}
.cs-glow-base{
  position:absolute;top:494px;left:-6px;width:230px;height:90px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(28,124,242,.4),transparent 70%);
  filter:blur(4px);
}

/* Wireframe globe, sitting behind the lower-right badges */
.globe-art{
  position:absolute;bottom:18px;right:-26px;width:190px;height:190px;z-index:1;
  fill:none;stroke:#3b82f6;stroke-width:1;opacity:.55;
}
.globe-art circle:first-child{fill:rgba(28,124,242,.08);stroke:none;}
.globe-pin{
  position:absolute;bottom:92px;right:46px;width:30px;height:30px;z-index:2;
  fill:#22d3ee;filter:drop-shadow(0 6px 14px rgba(34,211,238,.6));
}

/* Floating status badges */
.float-badge{
  position:absolute;z-index:4;display:flex;align-items:center;gap:12px;
  background:rgba(10,20,48,.88);border:1px solid rgba(110,180,255,.25);
  border-radius:14px;padding:12px 16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 44px -14px rgba(0,0,0,.55);
}
.float-badge strong{display:block;color:#fff;font-size:.85rem;font-family:var(--ff-head);}
.float-badge span{color:#9fb0e0;font-size:.74rem;}
.fb-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fb-icon svg{width:19px;height:19px;}
.fb-amber{background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 10px 22px -6px rgba(245,158,11,.6);}
.fb-green{background:linear-gradient(135deg,#0f9d6e,#14b8a6);box-shadow:0 10px 22px -6px rgba(15,157,110,.6);}
.fb-blue{background:var(--grad-primary);box-shadow:0 10px 22px -6px rgba(28,124,242,.6);}
.fb-1{top:-4px;right:-22px;}
.fb-2{top:220px;right:-62px;}
.fb-3{bottom:52px;right:-44px;}

/* Dashboard panel */
.dash-panel{
  position:relative;z-index:2;margin-left:220px;
  width:680px;max-width:calc(100% - 80px);
  background:linear-gradient(170deg,#0b1430,#081025);
  border:1px solid rgba(110,180,255,.18);border-radius:20px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65);overflow:hidden;
}
.dash-top{
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);min-width:0;
}
.dash-dots{display:flex;gap:6px;flex-shrink:0;}
.dash-dots i{width:10px;height:10px;border-radius:50%;display:block;}
.dash-dots i:nth-child(1){background:#ff5f57;}
.dash-dots i:nth-child(2){background:#febc2e;}
.dash-dots i:nth-child(3){background:#28c840;}
.dash-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-family:var(--ff-head);color:#fff;font-size:.95rem;flex-shrink:0;}
.dash-brand svg{width:20px;height:20px;}
.dash-tabs{display:flex;gap:4px;flex:1;}
.dash-tabs a{padding:7px 13px;border-radius:8px;font-size:.78rem;font-weight:600;color:#9fb0e0;}
.dash-tabs a.active{background:var(--grad-primary);color:#fff;}
.dash-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dash-avatar svg{width:16px;height:16px;}

.dash-split{display:flex;min-width:0;}
.dash-side{
  width:128px;flex-shrink:0;padding:18px 8px;display:flex;flex-direction:column;gap:3px;
  border-right:1px solid rgba(255,255,255,.07);
}
.dash-side a{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  font-size:.78rem;font-weight:600;color:#8fa2cf;
}
.dash-side a svg{width:15px;height:15px;flex-shrink:0;}
.dash-side a.active{background:rgba(28,124,242,.16);color:#fff;}

.dash-content{flex:1;padding:20px 20px;min-width:0;}
.dash-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.chip{
  display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;
  font-size:.7rem;font-weight:600;color:#9fb0e0;flex:1;min-width:0;
}
.chip-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chip-icon svg{width:16px;height:16px;}
.chip-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.chip-text small{font-size:.66rem;color:#9fb0e0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip-text b{display:block;color:#fff;font-size:.95rem;font-family:var(--ff-head);white-space:nowrap;}
.chip-green{background:rgba(15,157,110,.14);border:1px solid rgba(15,157,110,.3);}
.chip-green .chip-icon{background:#0f9d6e;box-shadow:0 6px 14px -4px rgba(15,157,110,.7);}
.chip-blue{background:rgba(28,124,242,.14);border:1px solid rgba(28,124,242,.3);}
.chip-blue .chip-icon{background:var(--grad-primary);box-shadow:0 6px 14px -4px rgba(28,124,242,.7);}
.chip-purple{background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);}
.chip-purple .chip-icon{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 6px 14px -4px rgba(168,85,247,.7);}

.dash-mid{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;margin-bottom:18px;min-width:0;}
.usage-panel,.traffic-panel{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 14px;min-width:0;}
.dash-content h5{font-size:.74rem;font-weight:700;color:#c3cbee;margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em;}
.traffic-val{color:#4ade80;font-weight:700;margin-left:6px;text-transform:none;letter-spacing:0;}
.donuts{display:flex;justify-content:space-between;gap:8px;}
.donut-item{display:flex;flex-direction:column;align-items:center;gap:7px;}
.donut{
  width:56px;height:56px;border-radius:50%;position:relative;
  background:conic-gradient(var(--c) calc(var(--p)*1%), rgba(255,255,255,.1) 0);
}
.donut::before{content:'';position:absolute;inset:6px;border-radius:50%;background:#0b1430;}
.donut span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:.72rem;font-weight:800;color:#fff;}
.donut-item label{font-size:.68rem;color:#8fa2cf;font-weight:600;}
.traffic-svg{width:100%;height:56px;}
.traffic-svg polyline{fill:none;stroke:#22d3ee;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(34,211,238,.6));}

.dash-apps{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 14px;min-width:0;}
.apps-row{display:flex;gap:8px;min-width:0;}
.app-chip{
  flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:14px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.app-chip:hover{transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(28,124,242,.4);}
.app-name{display:flex;align-items:center;gap:6px;font-weight:800;font-size:1.05rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-name svg{width:20px;height:20px;flex-shrink:0;}
.app-name-tally{font-style:italic;color:#ff7a45;}
.app-chip:nth-child(2){background:var(--grad-primary);border-color:transparent;box-shadow:0 14px 28px -10px rgba(28,124,242,.6);}
.app-chip:nth-child(2) .app-status{color:#d7f5e6;}
.app-chip:nth-child(2) .app-status i{background:#d7f5e6;box-shadow:0 0 6px #d7f5e6;}
.app-status{display:flex;align-items:center;gap:6px;font-size:.68rem;color:#4ade80;font-weight:600;}
.app-status i{width:6px;height:6px;border-radius:50%;background:#4ade80;display:block;box-shadow:0 0 6px #4ade80;}

@media(max-width:1200px){
  .hero-visual-v2{padding:60px 20px 0 44px;}
  .fb-1{right:-6px;} .fb-2{right:-40px;} .fb-3{right:-20px;}
}
@media(max-width:1024px){
  .hero-visual-v2{min-height:0;padding:50px 10px 0 10px;max-width:640px;margin:0 auto;}
  .dash-panel{margin-left:0;}
  .cs-cloud,.cs-server-stack,.cs-shield,.cs-glow-base{display:none;}
  .globe-art,.globe-pin{display:none;}
  .float-badge{position:static;margin:10px auto 0;max-width:260px;}
  .dash-side{display:none;}
}
@media(max-width:640px){
  .dash-tabs{display:none;}
  .dash-mid{grid-template-columns:1fr;}
}

/* Reduced motion: never animate on this page regardless of JS checks */
@media (prefers-reduced-motion: reduce){
  .tilt-3d{transition:none;}
}