/* Nos Media full rebrand - July 2026 */
:root{
  --rb-bg:#030814;
  --rb-bg-2:#071126;
  --rb-surface:rgba(9,18,36,.78);
  --rb-surface-2:rgba(9,18,36,.92);
  --rb-line:rgba(191,209,255,.14);
  --rb-line-strong:rgba(191,209,255,.26);
  --rb-text:#edf4ff;
  --rb-muted:#9fb1cc;
  --rb-shadow:0 22px 70px rgba(0,0,0,.45);
  --rb-radius:24px;
  --rb-radius-sm:16px;
  --rb-glow:0 0 0 rgba(0,0,0,0);
  --brand-primary:#2998ff;
  --brand-primary-2:#0d6eff;
  --brand-soft:rgba(41,152,255,.16);
  --brand-soft-2:rgba(41,152,255,.28);
  --brand-rgb:41,152,255;
}

body:not([data-brand]), body[data-brand="media"]{
  --brand-primary:#2aa0ff;
  --brand-primary-2:#1760ff;
  --brand-soft:rgba(42,160,255,.16);
  --brand-soft-2:rgba(42,160,255,.30);
  --brand-rgb:42,160,255;
}
body[data-brand="design"]{ --brand-primary:#a855f7; --brand-primary-2:#7c3aed; --brand-soft:rgba(168,85,247,.17); --brand-soft-2:rgba(168,85,247,.32); --brand-rgb:168,85,247; }
body[data-brand="game"]{ --brand-primary:#53df67; --brand-primary-2:#16a34a; --brand-soft:rgba(83,223,103,.15); --brand-soft-2:rgba(83,223,103,.28); --brand-rgb:83,223,103; }
body[data-brand="hosting"]{ --brand-primary:#ffad28; --brand-primary-2:#ff7b00; --brand-soft:rgba(255,173,40,.16); --brand-soft-2:rgba(255,173,40,.30); --brand-rgb:255,173,40; }
body[data-brand="onmi"]{ --brand-primary:#36a8ff; --brand-primary-2:#195eff; --brand-soft:rgba(54,168,255,.16); --brand-soft-2:rgba(54,168,255,.30); --brand-rgb:54,168,255; }
body[data-brand="shop"]{ --brand-primary:#ffd52b; --brand-primary-2:#ffab00; --brand-soft:rgba(255,213,43,.16); --brand-soft-2:rgba(255,213,43,.30); --brand-rgb:255,213,43; }
body[data-brand="studio"]{ --brand-primary:#ff4343; --brand-primary-2:#cf1515; --brand-soft:rgba(255,67,67,.16); --brand-soft-2:rgba(255,67,67,.30); --brand-rgb:255,67,67; }
body[data-brand="music"]{ --brand-primary:#ff3b87; --brand-primary-2:#bd165d; --brand-soft:rgba(255,59,135,.16); --brand-soft-2:rgba(255,59,135,.30); --brand-rgb:255,59,135; }
body[data-brand="ai"]{ --brand-primary:#4bc6ff; --brand-primary-2:#2f78ff; --brand-soft:rgba(75,198,255,.16); --brand-soft-2:rgba(75,198,255,.30); --brand-rgb:75,198,255; }

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1100px 760px at 85% 12%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 620px at 10% 82%, color-mix(in srgb, var(--brand-primary-2) 14%, transparent), transparent 58%),
    linear-gradient(180deg, #020612 0%, #051022 46%, #08152b 100%) !important;
  color:var(--rb-text) !important;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(120deg, rgba(255,255,255,.04), transparent 25%, transparent 75%, rgba(255,255,255,.03)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 80px);
  opacity:.45;
}
body::after{ background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.52) 100%) !important; }

.bg-blur{ opacity:.95 !important; filter:saturate(1.15); }
.bg-orbit{ border-color: rgba(var(--brand-rgb), .18) !important; box-shadow: 0 0 100px rgba(var(--brand-rgb), .22) !important; }

#site-header, header{
  background: linear-gradient(180deg, rgba(6,13,28,.92), rgba(6,13,28,.76), rgba(6,13,28,.48)) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(var(--brand-rgb), .14) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
}
.nav, .topbar-inner{
  min-height:74px;
}
.brand{
  gap:12px !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
}
.brand span:last-child, .brand-text strong{ color:var(--rb-text); }
.logo-box{
  width:54px !important; height:54px !important; border-radius:18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 38px rgba(var(--brand-rgb), .22) !important;
}
.logo-box img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.menu, .topnav{ gap:10px !important; }
.menu a, .topnav a{
  border:1px solid transparent;
  padding:10px 14px !important;
  border-radius:999px !important;
  color:#d6e0ef !important;
  transition:all .22s ease;
}
.menu a:hover, .topnav a:hover,
.menu a.is-current, .topnav a.active{
  color:#fff !important;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color:rgba(var(--brand-rgb), .26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.16);
}
.cta, .menu .cta, .nav-cta, .btn.primary, .btn.btn-primary, .hero-actions .btn-primary, .send-button{
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2)) !important;
  color:#04101d !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 36px rgba(var(--brand-rgb), .26), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn, .btn-secondary, .btn.secondary-ghost, button, .console-newchat, .sidebar-full-btn{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  color:var(--rb-text) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.btn:hover, button:hover{ transform:translateY(-1px); }
.btn.primary:hover, .menu .cta:hover, .nav-cta:hover{ filter:saturate(1.08); }
.secondary-ghost{ background: rgba(255,255,255,.03) !important; }

h1,h2,h3,h4,.section-head h2,.hero-copy h1,.hero-title-row h1{
  letter-spacing:.08em !important;
  text-transform:uppercase;
}
.hero-title-row h1, .hero-copy h1, h1{
  color:#f8fbff;
  text-shadow: 0 0 26px rgba(var(--brand-rgb), .12);
}
.kicker, .hero-kicker, .section-kicker, .pill, .section-head .pill, .hero-pill, .hero-tag, .info-pill, .badge, .meta-chip, .console-address, .status-badge, .welcome-chip, .release-count{
  background: rgba(var(--brand-rgb), .12) !important;
  border: 1px solid rgba(var(--brand-rgb), .22) !important;
  color: #eff7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-underline, .dot{ background:linear-gradient(90deg, var(--brand-primary), var(--brand-primary-2)) !important; box-shadow:0 0 20px rgba(var(--brand-rgb), .35); }
.lead, p, .muted, small, .hero-banner-title span, .hero-card p, .section-head p{ color:var(--rb-muted); }

.hero-banner, .hero-card, .panel, .card, .project-card, .svc-card, .glass-panel, .team-info-card, .team-structure-card, .team-cta-card, .dash-card, .admin-table-wrap, .modal, .cart-drawer, .release-spotlight, .release-card, .stat-card, .mini-panel, .console-item, .message, .composer, .welcome-state, .chat-topbar, .chat-sidebar, .chat-viewport, .product-card, .status-card, .staff-form-card, .team-card, .policy-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(9,18,36,.82) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow: var(--rb-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}

.hero-banner img, .project-image img, .svc-card img, .ef-team-media img, .team-photo img, .modal-img img, .cart-item img{
  border-radius:24px !important;
  object-fit:contain !important;
  background:
    radial-gradient(circle at top, rgba(var(--brand-rgb), .12), transparent 55%),
    linear-gradient(180deg, rgba(5,10,22,.98), rgba(7,14,28,.94)) !important;
  padding:14px;
}
.hero-banner{ overflow:hidden; border-radius:30px !important; }
.hero-banner img{ width:100%; min-height:320px; max-height:520px; }
.hero-banner::after, .hero-card::after, .glass-panel::after{
  content:""; position:absolute; inset:auto -18% -22% auto; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(var(--brand-rgb), .18), transparent 70%);
  pointer-events:none;
}

.section, .hero-section{ position:relative; }
.section::before, .hero-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.01), transparent);
}
.section-head h2{ font-size:clamp(26px,3vw,38px); }
.section-head p, .hero-lead{ max-width: 760px; }

input, textarea, select, .sidebar-search{
  background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  color:#f2f7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
input::placeholder, textarea::placeholder{ color:#95a7c4 !important; }
input:focus, textarea:focus, select:focus{ outline:none; border-color: rgba(var(--brand-rgb), .45) !important; box-shadow:0 0 0 4px rgba(var(--brand-rgb), .12) !important; }

footer, .footer, .site-footer, .footer-grid{
  color:#d6e0ef;
}
.footer, footer{ border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(5,10,20,.3), rgba(4,8,16,.8)); }

.table, table, .admin-table-wrap table{ border-color: rgba(255,255,255,.08) !important; }
.table th, .table td, table th, table td{ border-color: rgba(255,255,255,.08) !important; }

a{ transition: color .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
a:hover{ color:#fff; }

/* brand specific helpers */
.brand-accent, .highlight, .price, .cart-badge, .status-badge.online, .release-count strong, .mini-label{
  color: var(--brand-primary) !important;
}
.cart-badge{ background: rgba(var(--brand-rgb), .18) !important; border-color: rgba(var(--brand-rgb), .35) !important; }

@media (max-width: 960px){
  .brand{ letter-spacing:.12em !important; font-size:.74rem !important; }
  .logo-box{ width:48px !important; height:48px !important; }
  .hero-banner img{ min-height:260px; }
}

/* Card and media system — stable layout for every Nos branch */
:root{
  --card-media-ratio: 16 / 9;
  --card-gap: 14px;
}

/* Prevent any grid card from stretching, overflowing or cutting the content. */
:where(.projects-grid, .services-grid, .svc-cards, .svc-card-grid, .team-grid, .product-grid, .portfolio-grid) > *{
  min-width:0;
}

:where(.project-card, .svc-card, .service-card, .team-card, .product-card, .panel, .card){
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

/* Every project/branch card: one clean media frame, balanced content and no duplicated borders. */
.project-card{
  display:flex !important;
  flex-direction:column !important;
  gap:0;
  height:100%;
  padding:12px !important;
  border-radius:24px !important;
  isolation:isolate;
}
.project-card::before{
  inset:0 !important;
  border-radius:inherit !important;
  border:1px solid color-mix(in srgb, var(--accent, var(--brand-primary)) 58%, transparent) !important;
  opacity:.5 !important;
}
.project-card > a:first-child{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:var(--card-media-ratio);
  margin:0 0 var(--card-gap) !important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--accent, var(--brand-primary)) 14%, transparent), transparent 58%),
    #030815;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 28px rgba(0,0,0,.22);
}
.project-card > a:first-child::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%, rgba(0,0,0,.15));
}
.project-card .project-image,
.project-card > a:first-child > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  border-radius:inherit !important;
  background:none !important;
  transform:none;
  transition:transform .35s ease, filter .35s ease;
}
.project-card:hover .project-image,
.project-card:hover > a:first-child > img{
  transform:scale(1.025) !important;
  filter:saturate(1.06) contrast(1.02);
}
.project-card h3{
  margin:0 4px 10px !important;
  padding:0 !important;
  min-height:0 !important;
  font-size:clamp(1rem, 1.8vw, 1.18rem) !important;
  line-height:1.25 !important;
  letter-spacing:.10em !important;
  color:var(--accent, var(--brand-primary)) !important;
  text-wrap:balance;
}
.project-card .project-socials{
  display:flex !important;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px !important;
  min-height:34px;
  margin:0 0 12px !important;
  padding:0 !important;
}
.project-card .social-btn{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.045) !important;
  color:#dceaff !important;
  font-size:.78rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.project-card .social-btn:hover{
  background:color-mix(in srgb, var(--accent, var(--brand-primary)) 20%, transparent) !important;
  border-color:color-mix(in srgb, var(--accent, var(--brand-primary)) 48%, transparent) !important;
  color:#fff !important;
}
.project-card p{
  margin:auto 4px 4px !important;
  padding:0 !important;
  color:var(--rb-muted) !important;
  font-size:.92rem !important;
  line-height:1.62 !important;
  text-wrap:pretty;
}

/* Similar cards keep their own layout but share balanced radius, spacing and safe media. */
:where(.svc-card, .service-card, .team-card, .product-card){
  border-radius:22px !important;
}
:where(.svc-card, .service-card, .team-card, .product-card) img{
  max-width:100%;
  height:auto;
}

/* Desktop cards stay aligned even where descriptions have different lengths. */
@media (min-width:641px){
  .projects-grid .project-card p{ min-height:74px; }
}

/* Mobile: no cropped card, no squeezed text, no excess empty area. */
@media (max-width:640px){
  .project-card{ padding:12px !important; border-radius:20px !important; }
  .project-card > a:first-child{ border-radius:15px; margin-bottom:12px !important; }
  .project-card h3{ margin-bottom:9px !important; }
  .project-card p{ margin-top:0 !important; font-size:.9rem !important; }
  .projects-grid .project-card p{ min-height:0; }
}