/* Site-level overrides for the "inMate" landing page.
   Loaded after design-system.css - retunes the Modernist tokens to inMate's
   blue palette and adds the layout/responsive rules the static page needs.

   Look: "kính mờ" (frosted glass) - white ground, soft blue gradients on
   rounded cards, a blurred sticky nav, and slow-drifting background blobs.
   Ported from the Claude Design mockup "Inmate - Trang giới thiệu v5 kính mờ".
   Section- and component-level styling stays inline on the markup (that is how
   it came out of the mockup); only the grid CONTAINERS carry a class here so
   their column counts can collapse on mobile. */

:root{
  --color-bg:#ffffff;
  --color-surface:#f2f7ff;
  --color-text:#1d2330;
  --color-divider:#e2ebfa;
  --color-accent:#2c6bd6;
  --color-accent-100:#eef4ff;
  --color-accent-200:#d9e6fd;
  --color-accent-300:#b3ccf7;
  --color-accent-400:#5b8ee1;
  --color-accent-500:#2c6bd6;
  --color-accent-600:#2257ae;
  --color-accent-700:#0a5cad;
  --color-accent-800:#153263;
  --color-accent-900:#0e2242;
  --color-accent-2:#2c6bd6;
  --color-accent-2-100:#eef4ff;
  --color-accent-2-500:#2c6bd6;
  --color-accent-2-700:#0a5cad;
}

html{scroll-behavior:smooth}
body{margin:0;background:#ffffff;color:#1d2330;font-family:var(--font-body);text-wrap:pretty}
a{color:#0a5cad;text-decoration:none}
a:hover{color:#0a8ff0}

/* - drifting background blobs (decorative, behind everything) - */
@keyframes inmate-float{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-30px,0)}
  100%{transform:translate3d(0,0,0)}
}
.bg-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-blob{position:absolute;border-radius:50%;will-change:transform}

@media (prefers-reduced-motion: reduce){
  .bg-blob{animation:none !important}
}

/* - image placeholders (stand in for the design canvas's <image-slot>) - */
.img-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px;font-size:14px;line-height:1.5;color:var(--color-accent-700);
  background:repeating-linear-gradient(135deg,var(--color-accent-100),var(--color-accent-100) 12px,#fff 12px,#fff 24px);
  border:1px dashed var(--color-accent-300);
}

/* - nav "Dịch vụ lẻ" dropdown (click/tap via <details>, no JS needed) - */
.nav-dropdown{position:relative}
.nav-dropdown > summary{list-style:none;cursor:pointer}
.nav-dropdown > summary::-webkit-details-marker{display:none}
.nav-dropdown[open] > summary{color:var(--color-accent)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:40;
  min-width:240px;padding:8px;
  background:rgba(255,255,255,0.98);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(44,107,214,0.14);border-radius:16px;
  box-shadow:0 24px 48px -24px rgba(10,92,173,0.35);
}
.nav-dropdown-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:15px;color:#1d2330}
.nav-dropdown-menu a:hover{background:var(--color-accent-100);color:var(--color-accent-700)}

/* - responsive grids (kept in inline styles on markup for layout;
     column counts collapse below 860px / 600px) - */
@media (max-width: 860px){
  .nav{flex-wrap:wrap; row-gap:10px;}
  .grid-hero,
  .grid-screens,
  .grid-webshots,
  .grid-features,
  .grid-steps,
  .grid-faq,
  .grid-footer{grid-template-columns:minmax(0,1fr) !important;}
  .grid-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .grid-stats > div{border-left:0 !important;border-top:1px solid rgba(44,107,214,0.12);}
  .grid-stats > div:first-child{border-top:0;}
  .grid-screens-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .grid-testimonials{grid-template-columns:minmax(0,1fr) !important;}
  .grid-testimonials > figure{grid-column:span 1 !important;}
  .grid-features > div{grid-column:span 1 !important;}
  .grid-service-list{grid-template-columns:minmax(0,1fr) !important;}
}

@media (max-width: 600px){
  .grid-screens-row{grid-template-columns:minmax(0,1fr) !important;}
}