@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* Medianet Design System — Colors & Type */
:root {
  --mn-navy: #121733; --mn-navy-90: #1B2143; --mn-navy-80: #2A305A; --mn-indigo: #28315C;
  --mn-coral: #E53749; --mn-coral-700: #C42637; --mn-coral-100: #FCE3E6;
  --mn-ocean: #0782FF; --mn-ocean-700: #0467CC; --mn-ocean-300: #66B0FF;
  --mn-orange: #F05929; --mn-ai-blue: #7287EE; --mn-bg: #F2F2F6;
  --mn-surface: #FFFFFF; --mn-grey-100: #EDEEF2; --mn-grey-200: #DCDEE5;
  --mn-grey-300: #C5C8D2; --mn-grey-500: #7A7E8C; --mn-grey-700: #5E5F6E;
  --mn-success: #1F9D55; --fg-1: var(--mn-navy); --fg-2: var(--mn-grey-700);
  --bg-page: var(--mn-bg); --bg-surface: var(--mn-surface); --bg-inverse: var(--mn-navy);
  --border-subtle: var(--mn-grey-200); --border-strong: var(--mn-grey-300);
  --r-sm: 6px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18,23,51,.06), 0 1px 1px rgba(18,23,51,.04);
  --shadow-lg: 0 12px 32px rgba(18,23,51,.12), 0 2px 6px rgba(18,23,51,.06);
  --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
  --tracking-tight: -0.025em; --accent: var(--mn-ocean); --accent-700: var(--mn-ocean-700);
  --hero-glow: 1; --ease: cubic-bezier(.22,.61,.36,1);
  --hero-1: #1B2143; --hero-2: #121733; --hero-3: #0C0F22;
}

/* (Keep the rest of your CSS below this exactly as it was) */

/* Hero */
.mn-hero { position:relative; background: radial-gradient(120% 90% at 100% 0%, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%); color:#fff; overflow:hidden; border-radius:0 0 var(--r-xl) var(--r-xl); }
.mn-hero .mn-orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:calc(.55 * var(--hero-glow)); pointer-events:none; }
.mn-orb-1 { width:540px; height:540px; top:-160px; right:-60px; background:radial-gradient(circle, #7287EE 0%, rgba(114,135,238,0) 70%); }
.mn-orb-2 { width:460px; height:460px; bottom:-200px; left:-120px; background:radial-gradient(circle, var(--mn-ocean) 0%, rgba(7,130,255,0) 70%); }
.mn-orb-3 { width:360px; height:360px; top:40px; left:38%; background:radial-gradient(circle, #F05929 0%, rgba(240,89,41,0) 72%); opacity:calc(.28 * var(--hero-glow)); }
.mn-hero .mn-inner { position:relative; z-index:2; padding-top:clamp(34px,5vw,56px); padding-bottom:clamp(48px,6vw,76px); }
.mn-hero-top { display:flex; align-items:center; justify-content:center; margin-bottom:clamp(26px,3.5vw,40px); }
.mn-pill { display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); font-size:13px; font-weight:600; color:#fff; backdrop-filter:blur(8px); margin:0 auto; width:fit-content; }
.mn-pill .dot { width:7px; height:7px; border-radius:50%; background:#3DDc8a; box-shadow:0 0 0 4px rgba(61,220,138,.18); }
.mn-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(40px,6.4vw,78px); line-height:1.02; letter-spacing:var(--tracking-tight); margin:22px auto 0; max-width:18ch; text-align:center; color:#fff;}
.mn-hero h1 .grad { background:linear-gradient(95deg,#fff 10%, var(--mn-ocean-300) 60%, #9FB4FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mn-hero .lede { font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:rgba(255,255,255,.78); max-width:62ch; margin:22px auto 0; text-align:center; }

/* Tools */
.mn-tools { padding:clamp(44px,5vw,72px) 0 clamp(20px,3vw,32px); }
.mn-sec-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; margin-bottom:clamp(22px,3vw,34px); }
.mn-eyebrow { font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mn-coral); display:flex; align-items:center; gap:8px; justify-content:center; }
.mn-sec-head h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,42px); line-height:1.06; margin-top:10px; color:var(--fg-1); }
.mn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.mn-card { position:relative; background:var(--bg-surface); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--border-subtle); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.mn-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.mn-viz { position:relative; height:188px; border-bottom:1px solid var(--border-subtle); }
.mn-badge { position:absolute; top:14px; right:14px; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; text-transform:uppercase; }
.mn-badge.live { background:rgba(255,255,255,.92); color:var(--mn-success); }
.mn-badge.live .dot { width:7px; height:7px; border-radius:50%; background:var(--mn-success); }
.mn-badge.soon { background:rgba(18,23,51,.55); color:#fff; border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); }
.mn-card-body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.mn-card .num { font-weight:800; font-size:13px; color:var(--mn-grey-300); }
.mn-card h3 { font-family:var(--font-display); font-weight:800; font-size:22px; margin:8px 0 0; color:var(--fg-1); }
.mn-card .ctitle-sub { font-size:13px; font-weight:600; color:var(--accent); margin-top:6px; }
.mn-card p { font-size:14px; line-height:1.55; color:var(--fg-2); margin:12px 0 0; }
.mn-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; border-radius:var(--r-sm); padding:11px 18px; text-decoration:none; cursor:pointer; }
.mn-btn-primary { background:var(--accent); color:#fff; width:100%; margin-top:20px;}

/* Early Access */
.mn-ea { padding:clamp(32px,4vw,56px) 0 clamp(48px,6vw,80px); }
.mn-ea-card { background:var(--bg-inverse); color:#fff; border-radius:var(--r-xl); padding:clamp(30px,4vw,52px); position:relative; overflow:hidden; }
.mn-ea-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); margin-top:30px; }
.mn-ea-item h4 { font-size:17px; margin-bottom:7px; }
.mn-ea-item p { font-size:13.5px; color:rgba(255,255,255,.72); }

@media (max-width:920px){ .mn-grid, .mn-ea-grid { grid-template-columns:1fr; } }
/* --- Entrance Animation --- */
@keyframes popIn {
  0% { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.pop-in {
  opacity: 0; /* Keeps it hidden before the animation starts */
  animation: popIn 0.8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: 0.2s; /* Adds a tiny pause before it pops in */
}
/* --- Early Access Section --- */
.mn-ea { padding:clamp(32px,4vw,56px) 0 clamp(48px,6vw,80px); }
.mn-ea-card { background:var(--bg-inverse); color:#fff; border-radius:var(--r-xl); padding:clamp(30px,4vw,52px) clamp(26px,4vw,52px); position:relative; overflow:hidden; }
.mn-ea-card .mn-orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.4; pointer-events:none; }
.mn-ea-card .mn-o1 { width:380px; height:380px; right:-100px; top:-140px; background:radial-gradient(circle,#7287EE 0%,rgba(114,135,238,0) 70%); }
.mn-ea-card .mn-o2 { width:300px; height:300px; left:-80px; bottom:-140px; background:radial-gradient(circle,var(--mn-ocean) 0%,rgba(7,130,255,0) 70%); }

.mn-ea-head { position:relative; z-index:2; max-width:54ch; margin:0 auto; text-align:center; }
.mn-ea-head h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,38px); line-height:1.08; margin-top:12px; }

.mn-ea-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px); margin-top:clamp(28px,3vw,40px); }
.mn-ea-item .mn-ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; margin-bottom:14px; }
.mn-ea-item h4 { font-family:var(--font-display); font-weight:700; font-size:17px; margin-bottom:7px; }
.mn-ea-item p { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.72); }

.mn-ea-foot { position:relative; z-index:2; margin-top:clamp(28px,3vw,40px); padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.mn-ea-foot .mn-launch-note { font-size:14px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:10px; }

@media (max-width:920px){ 
  .mn-ea-foot { flex-direction: column; align-items: flex-start; }
}
/* --- Card Visual Graphics --- */
.mn-glass { position:absolute; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); border-radius:10px; box-shadow:0 8px 24px rgba(10,12,24,.18); }

/* Bars */
.mn-srow { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.mn-srow:last-child { margin-bottom:0; }
.mn-srow .lbl { font-size:11.5px; font-weight:600; color:#fff; width:74px; flex:none; white-space:nowrap; }
.mn-srow .track { flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden; }
.mn-srow .fill { height:100%; border-radius:99px; background:#fff; transform-origin:left; transform:scaleX(var(--v,.6)); }

/* Gauge */
.mn-gauge { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:128px; height:128px; }
.mn-gauge .num { font-family:var(--font-display); font-weight:800; font-size:40px; color:#fff; letter-spacing:-.02em; line-height:1; }
.mn-gauge .lab { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:3px; text-align:center; }
.mn-ticks { position:absolute; right:16px; top:54px; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.mn-tick { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:5px 9px; border-radius:99px; backdrop-filter:blur(6px); }
.mn-tick svg { flex:none; }

/* Chat Bubbles */
.mn-bubble { font-size:11.5px; font-weight:500; line-height:1.35; padding:9px 12px; border-radius:13px; max-width:84%; }
.mn-bubble.me { background:#fff; color:var(--mn-navy); margin-left:auto; border-bottom-right-radius:4px; box-shadow:0 6px 18px rgba(10,12,24,.16); }
.mn-bubble.bot { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.25); border-bottom-left-radius:4px; backdrop-filter:blur(6px); }

/* --- Custom Left/Right Padding for Tools & Early Access Sections --- */
.mn-tools .mn-inner, 
.mn-ea .mn-inner {
  padding-left: 280px !important;  
  padding-right: 280px !important; 
}

/* Make sure it doesn't get too squished on mobile screens */
@media (max-width: 768px) {
  .mn-tools .mn-inner {
    padding-left: 63px !important;  
    padding-right: 63px !important; 
  }
   .mn-ea .mn-inner {
    padding-left: 0px !important;  
    padding-right: 0px !important; 
     
     /* Custom Content Gradients */
.card.t-llm {
  background: radial-gradient(135% 130% at 0% 0%, #5A64DA 0%, #2E3563 50%, #181D42 100%) !important;
}
.card.t-pr {
  background: radial-gradient(140% 135% at 100% 100%, #E53749 0%, #BF1F2E 40%, #231D42 100%) !important;
}
.card.play {
  background: radial-gradient(135% 120% at 100% 0%, #1B2143 0%, #121733 55%, #0C0F22 100%) !important;
}

/* Structural Heights & Perfect Alignment Fixes */
.grid.live {
  display: flex !important;
  gap: 24px !important;
  align-items: stretch !important; /* Forces all cards to match the tallest one exactly */
}

.grid.live .card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: auto !important; /* Lets flexbox stretch heights uniformly */
}

/* Keeps text fields perfectly aligned row-by-row */
.card .ctitle-sub {
  min-height: 38px !important; /* Prevents varied line wraps from pushing paragraphs down */
  display: flex;
  align-items: center;
}

.card-body p {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* Precise Rotations for the Arcade Mini-Game Modules */
.mini.wn {
  transform: rotate(-5deg) !important;
}
.mini.se {
  transform: rotate(5deg) !important;
}
}
  /* Base setup for smooth motion */
.grid.live .card {
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s cubic-bezier(.22,.61,.36,1) !important;
  cursor: pointer;
}

/* The Pickup Hover State */
.grid.live .card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(18, 23, 51, 0.15), 0 4px 12px rgba(18, 23, 51, 0.08) !important;
}

/* Deep hover dimension layer for the tilted mini-game modules in the Arcade card */
.grid.live .card.play:hover .mini {
  box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;
  transition: box-shadow 0.25s ease !important;
}
  /* Universal Landing Page Hover Lift */
.hover-lift {
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1), box-shadow 0.25s cubic-bezier(.22,.61,.36,1) !important;
  cursor: pointer;
}
.hover-lift:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(18, 23, 51, 0.15) !important;
}
/* Highly specific selector to force the background to render */
.grid.live a.card.empty, 
.card.empty {
  display: flex !important;           /* Forces it to behave like a structural box */
  flex-direction: column !important;  /* Aligns contents cleanly top-to-bottom */
  background: #ffffff !important;     /* Forces a solid white card background */
  border: 1.5px dashed #C5C8D2 !important; /* Explicit gray dashed border fallback */
  border-radius: 16px !important;    /* Matches the exact corner roundness of the others */
  padding: 40px 24px !important;      /* Sets the inner spacing inside the card */
  min-height: 380px !important;       /* Matches the physical height of the live cards */
  box-shadow: 0 4px 12px rgba(18,23,51,.08) !important; /* Adds subtle depth dropdown */
  text-decoration: none !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Hover state override */
.grid.live a.card.empty:hover,
.card.empty:hover {
  background: #FAFAFC !important;     /* Changes background to a soft light grey on hover */
  border-color: #9DA1AE !important;   /* Darkens the dashed lines slightly */
  transform: translateY(-4px) !important;
}
  @media (max-width: 920px) {
  .arcade-banner {
    grid-template-columns: 1fr !important; /* Forces layout to stack single column */
  }
  .ab-stage {
    min-height: 240px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
}