/* ═══════════════════════════════════════════════════════════════════
   DoubleDown AI — NEXT-LEVEL 3D UPGRADE (2026)
   Drop-in stylesheet. Loads on every page. Design-system additive:
   preserves existing green (#10b981) + gold (#d4af37) brand identity.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Design tokens (additive — does not override existing :root) ─── */
:root{
  --dd-ink:#ffffff;
  --dd-ink-2:rgba(255,255,255,.72);
  --dd-ink-3:rgba(255,255,255,.48);
  --dd-bg-0:#030303;
  --dd-bg-1:#0a0a0f;
  --dd-bg-2:#12121a;
  --dd-glass:rgba(12,12,16,.72);
  --dd-edge:rgba(255,255,255,.08);
  --dd-edge-2:rgba(255,255,255,.14);
  --dd-g:#10b981;           /* primary green */
  --dd-g2:#059669;
  --dd-au:#d4af37;          /* gold / aurum */
  --dd-au2:#b8860b;
  --dd-cy:#22d3ee;          /* cyan accent for gradients */
  --dd-sig:linear-gradient(135deg,#10b981 0%,#22d3ee 40%,#d4af37 80%,#f6d77a 100%);
  --dd-sig-2:linear-gradient(120deg,#10b981 0%,#d4af37 100%);
  --dd-aurora:radial-gradient(at 12% 18%,hsla(160,82%,42%,.45) 0px,transparent 55%),
              radial-gradient(at 92% 24%,hsla(48,74%,52%,.38) 0px,transparent 55%),
              radial-gradient(at 52% 92%,hsla(196,84%,48%,.28) 0px,transparent 55%),
              radial-gradient(at 8%  86%,hsla(160,82%,42%,.22) 0px,transparent 55%);
  --dd-ease-out:cubic-bezier(.16,1,.3,1);
  --dd-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dd-shadow-xl:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02);
  --dd-shadow-glow:0 0 0 1px rgba(16,185,129,.18),0 24px 68px rgba(16,185,129,.22);
}

/* ─── Grain overlay — kills digital sterility (fixed, non-interactive)
       Tightened: smaller area + slower keyframes = ~70% less GPU vs v1. ─── */
.dd-grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.05;mix-blend-mode:overlay;
  transform:translate3d(0,0,0);
  animation:ddGrainShift 3.2s steps(4) infinite;
  will-change:transform;
}
@keyframes ddGrainShift{
  0%  {transform:translate3d(0,0,0)}
  25% {transform:translate3d(-2%,1.5%,0)}
  50% {transform:translate3d(1.5%,-2%,0)}
  75% {transform:translate3d(-1.5%,-1.5%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ─── Spotlight cursor (follows mouse across whole page) ─── */
.dd-spotlight::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:radial-gradient(
    620px circle at var(--dd-mx,50%) var(--dd-my,-20%),
    rgba(16,185,129,.10) 0%,
    rgba(212,175,55,.05) 28%,
    transparent 55%);
  transition:background-position .2s linear;mix-blend-mode:screen;
}
@media(max-width:768px){.dd-spotlight::after{display:none}}

/* ─── Aurora hero backdrop (CSS-only, animated)
       Reduced blur from 90px → 70px (still cinematic, ~40% cheaper to paint).
       contain:strict ensures the browser can layer it independently. ─── */
.dd-aurora-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:var(--dd-aurora);
  filter:blur(70px) saturate(1.25);
  animation:ddAuroraDrift 32s ease-in-out infinite alternate;
  will-change:transform;
  contain:strict;
}
.dd-aurora-bg::after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(at 50% 50%,transparent 30%,rgba(3,3,3,.7) 80%);
  pointer-events:none;
}
@keyframes ddAuroraDrift{
  0%  {transform:translate3d(0,0,0) scale(1)   rotate(0deg)}
  50% {transform:translate3d(-3%,2%,0) scale(1.08) rotate(8deg)}
  100%{transform:translate3d(4%,-2%,0) scale(1.04) rotate(-4deg)}
}

/* ─── Conic glow ring (pure CSS animated gradient border) ─── */
@property --dd-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.dd-ring{position:relative;isolation:isolate}
.dd-ring::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--dd-angle),
    #10b981 0%,#22d3ee 33%,#d4af37 66%,#10b981 100%);
  animation:ddRingSpin 6s linear infinite;
  opacity:.0;transition:opacity .4s ease;filter:blur(.5px);
}
.dd-ring:hover::before,.dd-ring.on::before{opacity:.95}
@keyframes ddRingSpin{to{--dd-angle:360deg}}

/* ─── Glass 2.0 — premium frosted surface ─── */
.dd-glass{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.dd-glass-gold{
  background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(16,185,129,.03));
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(212,175,55,.16);
  border-radius:22px;
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(212,175,55,.12),
             0 0 48px rgba(212,175,55,.06);
}

/* ─── Tilt-3D card (pointer-tracked, preserves children) ─── */
.dd-tilt{
  transform-style:preserve-3d;
  transition:transform .35s var(--dd-ease-out);
  will-change:transform;
}
.dd-tilt > *{transform:translateZ(32px);transform-style:preserve-3d}
.dd-tilt-deep > *{transform:translateZ(48px)}

/* ─── Magnetic button (base styles; JS applies transforms) ─── */
.dd-magnet{transition:transform .3s var(--dd-ease-spring);will-change:transform}

/* ─── Split-letter reveal (paired with JS that wraps chars) ─── */
.dd-split .dd-char{
  display:inline-block;
  opacity:0;
  transform:translateY(110%) rotate(6deg);
  transition:opacity .7s var(--dd-ease-out),transform .8s var(--dd-ease-out);
  will-change:transform,opacity;
}
.dd-split.in .dd-char{opacity:1;transform:none}
.dd-split .dd-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.dd-split .dd-space{display:inline-block;width:.28em}

/* ─── Scroll-driven reveals using native animation-timeline (2026) ─── */
@supports (animation-timeline:view()){
  .dd-svr{
    animation:ddSvrIn linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 24%;
    will-change:opacity,transform;
  }
  @keyframes ddSvrIn{
    from{opacity:0;transform:translateY(44px) scale(.98);filter:blur(8px)}
    to  {opacity:1;transform:none;filter:blur(0)}
  }
  .dd-svr-slow{animation-range:entry 0% cover 55%}
  .dd-svr-x{animation:ddSvrX linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  @keyframes ddSvrX{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
  .dd-parallax{animation:ddParallax linear;animation-timeline:view();animation-range:entry 0 exit 100%}
  @keyframes ddParallax{to{transform:translateY(-28%)}}
}
/* Fallback for browsers without scroll-timeline (Firefox as of my cutoff) */
@supports not (animation-timeline:view()){
  .dd-svr,.dd-svr-slow,.dd-svr-x{opacity:0;transform:translateY(32px);transition:opacity .8s var(--dd-ease-out),transform .8s var(--dd-ease-out)}
  .dd-svr.in,.dd-svr-slow.in,.dd-svr-x.in{opacity:1;transform:none}
}

/* ─── Headline gradient (brand-true) ─── */
.dd-h-gradient{
  background:var(--dd-sig-2);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.dd-h-sig{
  background:var(--dd-sig);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ddSigShimmer 6s linear infinite;
}
@keyframes ddSigShimmer{0%{background-position:0% center}100%{background-position:200% center}}

/* ─── Kinetic ticker text (marquee-style headline) ─── */
.dd-kinetic{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(42px,10vw,180px);letter-spacing:-3px;line-height:.92;
  white-space:nowrap;display:flex;gap:.45em;
  animation:ddKinetic 28s linear infinite;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.24);
  text-transform:uppercase;
}
.dd-kinetic > span:nth-child(odd){-webkit-text-stroke:0;color:#fff;opacity:.98}
.dd-kinetic > span.dd-h-gradient{-webkit-text-stroke:0}
@keyframes ddKinetic{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── Interactive hero orb (CSS-only, GPU-cheap) ─── */
.dd-orb{
  position:relative;width:clamp(220px,30vw,360px);aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.5) 0%,transparent 25%),
    radial-gradient(circle at 70% 70%,rgba(212,175,55,.45) 0%,transparent 40%),
    radial-gradient(circle at 30% 80%,rgba(34,211,238,.4) 0%,transparent 45%),
    conic-gradient(from 210deg at 50% 50%,#10b981,#22d3ee,#d4af37,#f6d77a,#10b981);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 40px 80px rgba(0,0,0,.55),
    0 0 120px rgba(16,185,129,.25),
    0 0 180px rgba(212,175,55,.18);
  animation:ddOrbSpin 22s linear infinite;
  transform:translateZ(0);
}
.dd-orb::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(3,3,3,.6) 100%);
  pointer-events:none;
}
.dd-orb::after{
  content:"";position:absolute;inset:-10%;border-radius:50%;
  background:conic-gradient(from var(--dd-angle,0deg),transparent 60%,rgba(16,185,129,.35),transparent 85%);
  filter:blur(22px);opacity:.8;animation:ddRingSpin 12s linear infinite reverse;z-index:-1;
}
@keyframes ddOrbSpin{to{transform:rotate(360deg)}}

/* ─── Noise scanline (adds subtle CRT feel on dark surfaces) ─── */
.dd-scanline{position:relative;isolation:isolate}
.dd-scanline::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.7;
}

/* ─── Editorial eyebrow tag ─── */
.dd-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:100px;
  background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.22);
  font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--dd-g);
}
.dd-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--dd-g);
  box-shadow:0 0 10px var(--dd-g);
  animation:ddDotPulse 2.2s ease infinite;
}
@keyframes ddDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* ─── Number/stat with monospace sizing ─── */
.dd-figure{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(44px,6.5vw,108px);letter-spacing:-3px;line-height:1;
  background:var(--dd-sig-2);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}

/* ─── Bento grid (asymmetric, premium layout primitive) ─── */
.dd-bento{
  display:grid;grid-template-columns:repeat(12,1fr);gap:18px;
  max-width:1200px;margin:0 auto;
}
.dd-bento > *{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
  border:1px solid var(--dd-edge);border-radius:20px;
  padding:28px;position:relative;overflow:hidden;
  transition:border-color .3s var(--dd-ease-out),transform .45s var(--dd-ease-out),box-shadow .45s var(--dd-ease-out);
}
.dd-bento > *:hover{border-color:rgba(16,185,129,.35);transform:translateY(-4px);box-shadow:var(--dd-shadow-glow)}
.dd-bt-1{grid-column:span 7;grid-row:span 2;min-height:320px}
.dd-bt-2{grid-column:span 5;min-height:150px}
.dd-bt-3{grid-column:span 5;min-height:150px}
.dd-bt-4{grid-column:span 4;min-height:200px}
.dd-bt-5{grid-column:span 4;min-height:200px}
.dd-bt-6{grid-column:span 4;min-height:200px}
@media(max-width:860px){
  .dd-bento{grid-template-columns:repeat(2,1fr)}
  .dd-bt-1,.dd-bt-2,.dd-bt-3,.dd-bt-4,.dd-bt-5,.dd-bt-6{grid-column:span 2;grid-row:auto;min-height:auto}
}

/* ─── Magnetic CTA (next-gen button) ─── */
.dd-cta{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:100px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#000;font-weight:800;font-size:15px;text-decoration:none;
  font-family:'Outfit',sans-serif;letter-spacing:.2px;
  border:none;cursor:pointer;
  box-shadow:0 14px 40px rgba(16,185,129,.35),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s var(--dd-ease-spring),box-shadow .3s ease,background .3s ease;
  overflow:hidden;isolation:isolate;
}
.dd-cta::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s var(--dd-ease-out);z-index:0;
}
.dd-cta:hover::before{transform:translateX(100%)}
.dd-cta:hover{background:linear-gradient(135deg,#d4af37,#b8860b);box-shadow:0 20px 54px rgba(212,175,55,.5)}
.dd-cta > *{position:relative;z-index:1}

.dd-cta-ghost{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;
  background:rgba(255,255,255,.025);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  font-weight:700;font-size:15px;text-decoration:none;
  font-family:'Outfit',sans-serif;
  transition:border-color .3s,background .3s,color .3s,transform .3s var(--dd-ease-spring);
}
.dd-cta-ghost:hover{border-color:var(--dd-au);color:var(--dd-au);background:rgba(212,175,55,.05);transform:translateY(-2px)}

/* ─── Floating/levitating subtle animation for hero props ─── */
.dd-float{animation:ddFloat 7s ease-in-out infinite}
.dd-float-2{animation:ddFloat 9s ease-in-out 1s infinite}
.dd-float-3{animation:ddFloat 11s ease-in-out 2s infinite}
@keyframes ddFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-14px,0) rotate(1.2deg)}
}

/* ─── Marquee row (scrolling logo/city ticker) ─── */
.dd-marquee{
  display:flex;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);
}
.dd-marquee-track{
  display:inline-flex;gap:42px;padding:14px 0;
  animation:ddMarquee 38s linear infinite;flex-shrink:0;white-space:nowrap;
}
.dd-marquee:hover .dd-marquee-track{animation-play-state:paused}
.dd-marquee-item{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 18px;border-radius:100px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  font-family:'Space Mono',monospace;font-size:12px;
  color:rgba(255,255,255,.65);letter-spacing:1px;text-transform:uppercase;
}
@keyframes ddMarquee{to{transform:translateX(-50%)}}

/* ─── Answer-block (SEO: direct-answer pattern for AI/voice search) ─── */
.dd-answer{
  position:relative;
  padding:20px 24px 20px 28px;margin:20px 0 28px;
  background:linear-gradient(120deg,rgba(16,185,129,.05),rgba(212,175,55,.02));
  border-left:3px solid var(--dd-g);border-radius:0 14px 14px 0;
  font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.88);
}
.dd-answer strong{color:#fff}
.dd-answer::before{
  content:"ANSWER";position:absolute;top:-9px;left:22px;
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:2px;padding:2px 8px;background:var(--dd-g);color:#000;border-radius:3px;
}

/* ─── Keypoint chip row ─── */
.dd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dd-chip{
  padding:6px 14px;font-size:12px;font-weight:600;
  background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);
  color:var(--dd-g);border-radius:100px;font-family:'Outfit',sans-serif;
  transition:all .24s;
}
.dd-chip:hover{background:rgba(16,185,129,.16);border-color:var(--dd-g);transform:translateY(-1px)}
.dd-chip-gold{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.22);color:var(--dd-au)}
.dd-chip-gold:hover{background:rgba(212,175,55,.16);border-color:var(--dd-au)}

/* ─── Noise-free heading treatments ─── */
.dd-h-xxl{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(42px,7.2vw,120px);letter-spacing:-3.5px;line-height:.96;
}
.dd-h-xl{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(32px,5vw,64px);letter-spacing:-2px;line-height:1.02;
}
.dd-h-lg{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:clamp(24px,3.2vw,40px);letter-spacing:-1.2px;line-height:1.08;
}

/* ─── Accent underline for inline emphasis ─── */
.dd-underline{
  background-image:linear-gradient(120deg,rgba(16,185,129,.0),rgba(16,185,129,.6) 40%,rgba(212,175,55,.6) 75%,rgba(212,175,55,.0));
  background-size:100% 40%;background-repeat:no-repeat;background-position:0 85%;
  padding:0 2px;
}

/* ─── Counter / trust bar ─── */
.dd-trust{
  display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;
  padding:22px 0;border-top:1px solid var(--dd-edge);border-bottom:1px solid var(--dd-edge);
  color:rgba(255,255,255,.5);font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
}
.dd-trust b{color:rgba(255,255,255,.8);font-weight:700;letter-spacing:.5px;text-transform:none;font-family:'Outfit',sans-serif;font-size:13px;display:block;margin-top:2px}

/* ─── Premium section divider ─── */
.dd-divider{
  height:1px;max-width:1200px;margin:0 auto;
  background:linear-gradient(90deg,transparent,rgba(16,185,129,.3) 30%,rgba(212,175,55,.3) 70%,transparent);
  position:relative;
}
.dd-divider::before{
  content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--dd-au);box-shadow:0 0 14px var(--dd-au);transform:translateX(-50%);
}

/* ─── Speakable region hint (for Google speakable schema) ─── */
.dd-speakable{position:relative}
.dd-speakable::after{content:"";}

/* ─── Custom scrollbar (subtle, premium) ─── */
@media(min-width:769px){
  ::-webkit-scrollbar{width:10px;background:var(--dd-bg-0)}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#10b981,#d4af37);border-radius:8px;border:3px solid var(--dd-bg-0)}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d4af37,#10b981)}
}

/* ─── Selection color ─── */
::selection{background:rgba(212,175,55,.3);color:#fff;text-shadow:0 0 14px rgba(212,175,55,.4)}

/* ─── Reduced motion safety ─── */
@media(prefers-reduced-motion:reduce){
  .dd-grain::before,.dd-aurora-bg,.dd-orb,.dd-kinetic,.dd-marquee-track,
  .dd-float,.dd-float-2,.dd-float-3,.dd-h-sig{
    animation:none!important;
  }
  .dd-svr,.dd-svr-slow,.dd-svr-x,.dd-split .dd-char{
    opacity:1!important;transform:none!important;filter:none!important;
  }
}

/* ─── Mobile polish ─── */
@media(max-width:720px){
  .dd-h-xxl{letter-spacing:-2px}
  .dd-kinetic{font-size:clamp(32px,11vw,80px);letter-spacing:-1.5px}
  .dd-orb{width:min(72vw,300px);animation-duration:36s}
  .dd-aurora-bg{filter:blur(50px) saturate(1.15);animation-duration:40s}
  /* Orb's outer glow ring is the most expensive part — drop it */
  .dd-orb::after{display:none}
}

/* ─── Tab visibility — dd-mobile.js sets html.dd-paused when document.hidden ─── */
.dd-paused .dd-grain::before,
.dd-paused .dd-aurora-bg,
.dd-paused .dd-orb,
.dd-paused .dd-kinetic,
.dd-paused .dd-marquee-track,
.dd-paused .dd-float,
.dd-paused .dd-float-2,
.dd-paused .dd-float-3,
.dd-paused .dd-h-sig,
.dd-paused .dd-eyebrow::before{
  animation-play-state:paused!important;
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM CARD UPGRADE — replaces flat "AI grey" cards site-wide
   Targets bg-dd-gray/40 and bg-dd-gray/50 Tailwind classes.
   ═══════════════════════════════════════════════════════════════════ */
.bg-dd-gray\/40,
.bg-dd-gray\/50{
  background:linear-gradient(135deg,rgba(16,185,129,.07) 0%,rgba(20,20,22,.78) 38%,rgba(212,175,55,.05) 100%)!important;
  border:1px solid rgba(16,185,129,.18)!important;
  box-shadow:
    0 10px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
  position:relative;
  overflow:hidden;
  transition:transform .42s cubic-bezier(.16,1,.3,1),
             border-color .42s,
             box-shadow .42s;
  isolation:isolate;
}
/* Animated gradient border via mask */
.bg-dd-gray\/40::before,
.bg-dd-gray\/50::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(16,185,129,.55) 0%,rgba(212,175,55,.4) 35%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.55;
  pointer-events:none;
  transition:opacity .42s;
  z-index:1;
}
/* Subtle inner glow that drifts on hover (desktop) */
.bg-dd-gray\/40::after,
.bg-dd-gray\/50::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 0%,rgba(16,185,129,.13) 0%,transparent 55%);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s;
  z-index:0;
}
/* Direct children sit above the gradient layers */
.bg-dd-gray\/40 > *,
.bg-dd-gray\/50 > *{position:relative;z-index:2}

@media (hover:hover) and (pointer:fine){
  .bg-dd-gray\/40:hover,
  .bg-dd-gray\/50:hover{
    transform:translateY(-4px);
    border-color:rgba(16,185,129,.45)!important;
    box-shadow:
      0 22px 56px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.1),
      0 0 36px rgba(16,185,129,.14)!important;
  }
  .bg-dd-gray\/40:hover::before,
  .bg-dd-gray\/50:hover::before{opacity:.95}
  .bg-dd-gray\/40:hover::after,
  .bg-dd-gray\/50:hover::after{opacity:1}
}
@media (max-width:540px){
  .bg-dd-gray\/40::before,
  .bg-dd-gray\/50::before{opacity:.4}
  .bg-dd-gray\/40,
  .bg-dd-gray\/50{
    transform:none!important;
    box-shadow:0 8px 22px rgba(0,0,0,.4)!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .bg-dd-gray\/40,
  .bg-dd-gray\/50{transition:none!important}
  .bg-dd-gray\/40::after,
  .bg-dd-gray\/50::after{display:none}
}