/* ══════════════════════════════════════════════
   MOTO AI — Main Stylesheet
   Structure: assets/css/style.css
══════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* clip vs hidden — doesn't break browser fast-scroll path */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cyan:   #00e5ff;
  --purple: #b44eff;
  --orange: #ff7b00;
  --dark:   #06081a;
  --border: rgba(255,255,255,.10);
}

body {
  font-family: 'jost', sans-serif;
  background: var(--dark);
  color: #fff;
}



/* ══════════════════════════════════
   FLOATING PARTICLES CANVAS
══════════════════════════════════ */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ══════════════════════════════════
   BANNER
══════════════════════════════════ */
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 20px 64px;
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,  rgba(80,0,180,.55)   0%, transparent 65%),
    radial-gradient(ellipse  55% 45% at 88% 70%,  rgba(0,70,160,.30)   0%, transparent 55%),
    radial-gradient(ellipse  45% 35% at  6% 88%,  rgba(160,60,255,.20) 0%, transparent 50%),
    linear-gradient(180deg, #07091c 0%, #0a0c22 100%);
}

.banner-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,229,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.032) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 56px 56px; }
}

.ai-mark {
  position: absolute;
  left: 18px;
  top: 40%;
  transform: translateY(-50%);
  font-size: 13rem;
  font-weight: 900;
  color: rgba(160,60,255,.1);
  pointer-events: none;
  z-index: 1;
  letter-spacing: -.04em;
  line-height: 1;
  user-select: none;
  animation: aiMarkPulse 6s ease-in-out infinite;
}

@keyframes aiMarkPulse {
  0%,100% { color: rgba(160,60,255,.1); text-shadow: none; }
  50%      { color: rgba(160,60,255,.18); text-shadow: 0 0 80px rgba(180,78,255,.25); }
}

/* ══════════════════════════════════
   DECO PANELS
══════════════════════════════════ */
.deco-panel {
  position: absolute;
  z-index: 2;
  border-radius: 10px;
  border: 1.5px solid rgba(0,229,255,.55);
  background: linear-gradient(135deg,
    rgba(0,229,255,.04) 0%,
    rgba(100,0,255,.06) 50%,
    rgba(0,229,255,.02) 100%);
  box-shadow: 0 0 18px rgba(0,229,255,.18), inset 0 0 30px rgba(100,0,255,.08);
  overflow: hidden;
  pointer-events: none;
  animation: panelPulse 4s ease-in-out infinite;
}

.deco-panel::before,
.deco-panel::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--cyan);
  border-style: solid;
  opacity: .7;
}
.deco-panel::before {
  top: 8px; left: 8px;
  border-width: 2px 0 0 2px;
  border-radius: 3px 0 0 0;
}
.deco-panel::after {
  bottom: 8px; right: 8px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 3px 0;
}

.deco-panel .scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.6), transparent);
  animation: scan 3s linear infinite;
}
.deco-panel .dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,229,255,.15) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .5;
}
.deco-panel .top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  border-radius: 10px 10px 0 0;
}
.deco-panel .lines {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
}
.deco-panel .line {
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,229,255,.35), rgba(180,78,255,.25), transparent);
}
.deco-panel .line:nth-child(2) { width: 75%; opacity: .7; }
.deco-panel .line:nth-child(3) { width: 55%; opacity: .5; }
.deco-panel .line:nth-child(4) { width: 80%; opacity: .6; }

.deco-tl { top:  55px; left:  24px; width: 210px; height: 185px; animation-delay: 0s;   }
.deco-bl { top: 295px; left:  24px; width: 170px; height: 145px; animation-delay: 1.4s; }
.deco-tr { top:  55px; right: 24px; width: 210px; height: 185px; animation-delay: .8s;  }
.deco-br { top: 295px; right: 24px; width: 170px; height: 145px; animation-delay: 2.2s; }

@keyframes panelPulse {
  0%,100% {
    box-shadow: 0 0 18px rgba(0,229,255,.18), inset 0 0 30px rgba(100,0,255,.08);
    border-color: rgba(0,229,255,.55);
  }
  50% {
    box-shadow: 0 0 34px rgba(0,229,255,.38), inset 0 0 40px rgba(100,0,255,.16);
    border-color: rgba(0,229,255,.9);
  }
}

@keyframes scan {
  0%   { top: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ══════════════════════════════════
   BANNER CONTENT
══════════════════════════════════ */
.banner-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  width: 100%;
}

.hero-text {
  text-align: center;
  max-width: 850px;
  width: 100%;  
  margin: 0 auto;
}
.demo-card .card-thumb img{
  width: 100%;
}
/* ── WORD-SPLIT HEADING ── */
.split-heading {
  font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.55;
}

.split-heading .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) skewY(4deg);
  transition: none; /* driven by JS */
  margin-right: .22em;
}
.split-heading .word.animate-in {
  animation: wordSlideUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
.split-heading .word.c { color: var(--cyan); }
.split-heading .word.p { color: var(--purple); }

/* "AI" gets a special continuous glow pulse */
.split-heading .word.glow-ai {
  animation: wordSlideUp .55s cubic-bezier(.22,1,.36,1) forwards,
             aiGlow 2.5s 1.4s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(180,78,255,.6);
}
@keyframes aiGlow {
  0%,100% { text-shadow: 0 0 20px rgba(180,78,255,.5), 0 0 40px rgba(180,78,255,.2); }
  50%      { text-shadow: 0 0 40px rgba(180,78,255,.9), 0 0 80px rgba(0,229,255,.3); }
}

@keyframes wordSlideUp {
  0%   { opacity:0; transform: translateY(28px) skewY(4deg); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) skewY(0); }
}

/* ── INTRO LABEL with expanding lines ── */
.intro-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--purple);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
}
.intro-label.animate-in {
  animation: fadeDown .6s ease forwards;
}
.intro-label .label-line {
  display: inline-block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--purple));
  transition: width .8s .3s ease;
}
.intro-label.animate-in .label-line:first-child {
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--purple));
}
.intro-label.animate-in .label-line:last-child {
  width: 60px;
  background: linear-gradient(90deg, var(--purple), transparent);
}

/* ── BRAND PILL: letter-by-letter bounce ── */
.brand-pill {
  display: inline-block;
  margin-top: 14px;
  background: var(--orange);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
  padding: 12px 52px;
  border-radius: 60px;
  box-shadow: 0 0 36px rgba(255,123,0,.55);
  letter-spacing: .04em;
  opacity: 0;
  transform: scale(.7);
  position: relative;
  overflow: hidden;
}
.brand-pill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
}
.brand-pill.animate-in {
  animation: pillPop .65s cubic-bezier(.34,1.56,.64,1) forwards,
             pillShimmer 3s 1.2s ease-in-out infinite,
             glitchPill 7s 1.8s ease-in-out infinite;
}
@keyframes pillPop {
  0%   { opacity:0; transform: scale(.7) rotate(-2deg); }
  70%  { opacity:1; transform: scale(1.06) rotate(.5deg); }
  100% { opacity:1; transform: scale(1) rotate(0); }
}
@keyframes pillShimmer {
  0%,80%,100% { box-shadow: 0 0 36px rgba(255,123,0,.55); }
  85% { box-shadow: 0 0 60px rgba(255,123,0,.9), 0 0 100px rgba(255,123,0,.3); }
}
@keyframes glitchPill {
  0%,93%,100% { transform:none; filter:none; }
  94% { transform:translate(-3px,1px); filter:hue-rotate(90deg); }
  95% { transform:translate(3px,-1px); filter:hue-rotate(-90deg); }
  96% { transform:none; filter:none; }
  97% { transform:translate(1px,2px); filter:brightness(1.4); }
  98% { transform:none; filter:none; }
}

.pill-char, .pill-space {
  display: inline-block;
  opacity: 0;
}
.pill-char.bounce-in {
  animation: charBounce .45s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes charBounce {
  0%   { opacity:0; transform: translateY(-20px) scale(.5); }
  60%  { opacity:1; transform: translateY(4px) scale(1.1); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* ── TAGLINE BOX: typewriter ── */
.tagline-box {
  margin: 22px auto 0;
  max-width: 580px;
  background: rgba(255,255,255,.055);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #dce8ff;
  line-height: 1.55;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  transform: scaleX(.9);
  transform-origin: center;
}
.tagline-box.animate-in {
  animation: taglineReveal .5s ease forwards;
}
@keyframes taglineReveal {
  to { opacity:1; transform:scaleX(1); }
}
.typewriter-cursor {
  display: inline-block;
  color: var(--cyan);
  font-weight: 300;
  animation: cursorBlink .75s step-end infinite;
  opacity: 0;
}
.typewriter-cursor.active { opacity:1; }
@keyframes cursorBlink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}

.launch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
  animation: fadeDown .7s .34s ease both;
}

.coming-badge {
  background: linear-gradient(135deg, #0055cc, var(--purple));
  padding: 10px 26px 12px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  border-radius: 4px 0 0 4px;
  min-width: 190px;
  text-align: left;
}
.coming-badge .cb-top  { font-size:.68rem; font-weight:700; letter-spacing:.22em; color:var(--cyan); text-transform:uppercase; }
.coming-badge .cb-date { font-size:1.6rem; font-weight:900; line-height:1.1; }
.coming-badge .cb-time {
  display: inline-block;
  margin-top: 3px;
  background: var(--cyan);
  color: var(--dark);
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
}

.countdown { display:flex; gap:12px; align-items:center; }
.cd-unit   { text-align:center; }
.cd-num {
  font-size: 2rem;
  font-weight: 900;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: transform .15s, color .15s;
}
.cd-num.flip {
  animation: numFlip .3s ease;
}
@keyframes numFlip {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0); color: var(--cyan); }
  100% { transform: scaleY(1); }
}
.cd-lbl { font-size:.58rem; font-weight:600; letter-spacing:.1em; color:#7788aa; text-transform:uppercase; margin-top:4px; }
.cd-sep  { font-size:1.8rem; font-weight:900; color:var(--cyan); margin-bottom:18px; }

/* ══════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 36px 0 26px;
  animation: fadeDown .6s .42s ease both;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.3), transparent);
}
.section-divider span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--cyan);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ══════════════════════════════════
   DEMO SECTION
══════════════════════════════════ */
.demo-section {
  position: relative;
  z-index: 2;
  padding: 0 20px 60px;
}
.demo-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* ══════════════════════════════════
   DEMO CARDS
══════════════════════════════════ */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

/* Center last card when it's alone in the final row */
.demo-card:last-child:nth-child(3n+1) {
  grid-column: 2;
}

/* scroll-reveal: start hidden */
.demo-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #0c0e22;
  display: flex;
  flex-direction: column;
  transition: transform .35s, box-shadow .35s, border-color .35s;
  opacity: 0;
  transform: translateY(36px);
}
.demo-card.visible {
  animation: cardReveal .6s ease forwards;
}
@keyframes cardReveal {
  to { opacity:1; transform:none; }
}

.demo-card:hover {
  transform: translateY(-7px) scale(1.01);
  border-color: rgba(0,229,255,.4);
  box-shadow: 0 20px 55px rgba(0,229,255,.14), 0 4px 18px rgba(0,0,0,.6);
}

/* ── THUMBNAIL ── */
.card-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* .demo-card:nth-child(1) .card-thumb { background: linear-gradient(160deg,#091830 0%,#0d2255 60%,#06101e 100%); }
.demo-card:nth-child(2) .card-thumb { background: linear-gradient(160deg,#170832 0%,#2a0850 60%,#0b031c 100%); }
.demo-card:nth-child(3) .card-thumb { background: linear-gradient(160deg,#061816 0%,#093525 60%,#040e0c 100%); }
.demo-card:nth-child(4) .card-thumb { background: linear-gradient(160deg,#260810 0%,#420a16 60%,#150407 100%); }
.demo-card:nth-child(5) .card-thumb { background: linear-gradient(160deg,#171700 0%,#2a2800 60%,#0b0b00 100%); }
.demo-card:nth-child(6) .card-thumb { background: linear-gradient(160deg,#050f1e 0%,#081b36 60%,#020810 100%); } */

.mock-site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  gap: 8px;
  transition: transform .35s;
}
.demo-card:hover .mock-site { transform: scale(1.03); }

.mock-nav {
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.mock-nav .dot { width:6px; height:6px; border-radius:50%; }
.mock-nav .bar {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,.10);
  margin-left: 6px;
  position: relative;
  overflow: hidden;
}
/* shimmer on nav bar when card hovered */
.mock-nav .bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
  transform: translateX(-100%);
}
.demo-card:hover .mock-nav .bar::after {
  animation: shimmerBar .8s ease forwards;
}
@keyframes shimmerBar {
  to { transform: translateX(100%); }
}

.mock-hero {
  border-radius: 6px;
  height: 68px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mock-hero .mh-title {
  width: 55%; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.55);
}
.mock-hero .mh-sub {
  position: absolute; bottom:16px; left:8px;
  width:38%; height:5px; border-radius:4px;
  background: rgba(255,255,255,.28);
}
.mock-hero .mh-btn {
  position: absolute; bottom:8px; left:8px;
  width:52px; height:14px; border-radius:10px;
}

.mock-cols { display:flex; gap:7px; flex:1; }
.mock-col {
  flex:1; border-radius:6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  display:flex; flex-direction:column;
  padding:8px; gap:5px;
}
.mock-col .mc-icon { width:20px; height:20px; border-radius:4px; }
.mock-col .mc-line { height:4px; border-radius:3px; background:rgba(255,255,255,.18); }
.mock-col .mc-line.s { width:70%; background:rgba(255,255,255,.10); }

/* per-card accent colors */
.demo-card:nth-child(1) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(1) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(1) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(1) .mock-hero { background:linear-gradient(120deg,#0d2a6e,#1a3c8e); }
.demo-card:nth-child(1) .mh-btn    { background:#3a7fff; }
.demo-card:nth-child(1) .mc-icon   { background:rgba(60,140,255,.35); }

.demo-card:nth-child(2) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(2) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(2) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(2) .mock-hero { background:linear-gradient(120deg,#2a0a50,#4a1a8a); }
.demo-card:nth-child(2) .mh-btn    { background:#9a40ff; }
.demo-card:nth-child(2) .mc-icon   { background:rgba(154,64,255,.35); }

.demo-card:nth-child(3) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(3) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(3) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(3) .mock-hero { background:linear-gradient(120deg,#0a3020,#165535); }
.demo-card:nth-child(3) .mh-btn    { background:#22c878; }
.demo-card:nth-child(3) .mc-icon   { background:rgba(34,200,120,.3); }

.demo-card:nth-child(4) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(4) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(4) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(4) .mock-hero { background:linear-gradient(120deg,#420a14,#7a1222); }
.demo-card:nth-child(4) .mh-btn    { background:#ff4060; }
.demo-card:nth-child(4) .mc-icon   { background:rgba(255,64,96,.3); }

.demo-card:nth-child(5) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(5) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(5) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(5) .mock-hero { background:linear-gradient(120deg,#2e2800,#503e00); }
.demo-card:nth-child(5) .mh-btn    { background:#ffc820; }
.demo-card:nth-child(5) .mc-icon   { background:rgba(255,200,32,.3); }

.demo-card:nth-child(6) .dot:nth-child(1) { background:#ff5f57; }
.demo-card:nth-child(6) .dot:nth-child(2) { background:#febc2e; }
.demo-card:nth-child(6) .dot:nth-child(3) { background:#28c840; }
.demo-card:nth-child(6) .mock-hero { background:linear-gradient(120deg,#082040,#103568); }
.demo-card:nth-child(6) .mh-btn    { background:#20a8ff; }
.demo-card:nth-child(6) .mc-icon   { background:rgba(32,168,255,.3); }

/* bottom overlay */
/* .card-thumb::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:60px;
  background:linear-gradient(to top,#0c0e22,transparent);
  pointer-events:none; z-index:1;
} */

.card-cat-row {
  position:absolute; bottom:0; left:0; right:0;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:8px 12px 10px;
}
.card-cat-icon  { font-size:1.6rem; line-height:1; }
.card-cat-label {
  font-size:.65rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
}

.demo-card:nth-child(1) .card-cat-label { color:#4dd9ff; }
.demo-card:nth-child(2) .card-cat-label { color:#c97aff; }
.demo-card:nth-child(3) .card-cat-label { color:#30ffb0; }
.demo-card:nth-child(4) .card-cat-label { color:#ff6060; }
.demo-card:nth-child(5) .card-cat-label { color:#ffe040; }
.demo-card:nth-child(6) .card-cat-label { color:#40c0ff; }

.demo-card:nth-child(1) { border-top:2px solid rgba(77,217,255,.4); }
.demo-card:nth-child(2) { border-top:2px solid rgba(201,122,255,.4); }
.demo-card:nth-child(3) { border-top:2px solid rgba(48,255,176,.4); }
.demo-card:nth-child(4) { border-top:2px solid rgba(255,96,96,.4); }
.demo-card:nth-child(5) { border-top:2px solid rgba(255,224,64,.4); }
.demo-card:nth-child(6) { border-top:2px solid rgba(64,192,255,.4); }

/* ── CARD BODY ── */
.card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body h3 { font-size:1rem; font-weight:800; color:#fff; margin-bottom:6px;text-align: center; }
.card-body p  {
  font-size:.8rem; color:#8899bb;
  font-family:'Rajdhani',sans-serif;
  font-weight:500; line-height:1.5;
  flex:1; margin-bottom:14px;
}

/* ── VIEW DEMO BUTTON with shimmer ── */
.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 0;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 800;
  font-family: 'Exo 2',sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: none;
  background: linear-gradient(90deg,#1a6bff 0%,#7b2fff 100%);
  box-shadow: 0 4px 18px rgba(80,0,255,.35);
  transition: filter .22s, transform .18s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}
.view-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
}
.view-btn:hover::after { animation: btnShimmer .55s ease forwards; }
@keyframes btnShimmer {
  to { left: 140%; }
}
.view-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.02);
  box-shadow: 0 6px 28px rgba(80,0,255,.55);
}
.view-btn .btn-icon {
  width:18px; height:18px;
  border:1.5px solid rgba(255,255,255,.6);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: transform .22s;
}
.view-btn:hover .btn-icon { transform: rotate(90deg); }
.view-btn .btn-icon svg { width:9px; height:9px; }

/* ══════════════════════════════════
   SUPPORT ROW
══════════════════════════════════ */
.support-row {
  text-align: center;
  margin-top: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s, transform .6s;
}
.support-row.visible { opacity:1; transform:none; }
.support-row p { color:#7788aa; font-size:.88rem; font-family:'Rajdhani',sans-serif; margin-bottom:14px; }

.support-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 40px;
  background: transparent;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-family: 'Exo 2',sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 50px;
  text-decoration: none;
  transition: background .24s, color .24s, box-shadow .24s, transform .2s;
  box-shadow: 0 0 18px rgba(0,229,255,.18);
  position: relative;
  overflow: hidden;
}
.support-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: -1;
}
.support-btn:hover::before { transform: scaleX(1); }
.support-btn > * { position:relative; z-index:1; }
.support-btn:hover { color:var(--dark); box-shadow:0 0 36px rgba(0,229,255,.55); transform:scale(1.04); }
.support-btn svg  { transition:transform .24s; }
.support-btn:hover svg { transform:rotate(15deg); }

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 16px;
  font-size: .72rem;
  color: #2e3a52;
  font-family: 'Rajdhani',sans-serif;
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════
   GLOBAL KEYFRAMES
══════════════════════════════════ */
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:none; }
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:900px) {
  .deco-tl,.deco-bl,.deco-tr,.deco-br { display:none; }
  .demo-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:520px) {
  .demo-grid { grid-template-columns:1fr; }
  .cd-num { width:50px; height:50px; font-size:1.6rem; }
}