/* tokens/colors.css */
:root{
/* --- base neutrals (Gravital-style deep dark mode) --- */
--black:#09090b;
--surface-1:#121215;
--surface-2:#18181b;
--surface-3:#202024;
--border-subtle:#27272a;
--border-strong:#3f3f46;
--white:#ffffff;
--gray-300:#d4d4d8;
--gray-400:#a1a1aa;
--gray-500:#8e8e93;
--gray-600:#6b6b70;

/* --- DORA brand accents (from logo) --- */
--dora-pink-500:#ff1483;
--dora-pink-400:oklch(from var(--dora-pink-500) calc(l + 0.08) c h);
--dora-pink-300:oklch(from var(--dora-pink-500) calc(l + 0.18) calc(c - 0.03) h);
--dora-pink-700:oklch(from var(--dora-pink-500) calc(l - 0.12) c h);
--dora-navy-900:#23376d;
--dora-navy-700:oklch(from var(--dora-navy-900) calc(l + 0.08) c h);
--dora-navy-500:oklch(from var(--dora-navy-900) calc(l + 0.22) calc(c + 0.02) h);
--dora-navy-300:oklch(from var(--dora-navy-900) calc(l + 0.42) calc(c - 0.02) h);

/* glow gradient: pink -> navy, DORA's own two brand hues standing in for the
   purple/cyan tech glow called for by the visual spec */
--glow-gradient:linear-gradient(135deg, var(--dora-pink-500), var(--dora-navy-500));

/* --- semantic aliases --- */
--bg-page:var(--black);
--bg-surface:var(--surface-2);
--bg-surface-raised:var(--surface-3);
--border-default:var(--border-subtle);
--border-hover:var(--border-strong);

--text-primary:var(--white);
--text-secondary:var(--gray-400);
--text-tertiary:var(--gray-600);
--text-on-accent:var(--white);
--text-on-white:var(--black);

--accent-primary:var(--dora-pink-500);
--accent-primary-hover:var(--dora-pink-400);
--accent-secondary:var(--dora-navy-500);
--link-color:var(--dora-navy-300);
--link-color-hover:var(--dora-pink-300);

--success:#3ecf8e;
--warning:#f5b942;
--danger:#ff5c5c;
}

/* tokens/typography.css */
:root{
--font-sans:'Plus Jakarta Sans',-apple-system,'SF Pro Display',ui-sans-serif,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;

--text-badge:12px;
--text-xs:13px;
--text-sm:15px;
--text-body:17px;
--text-lg:20px;
--text-h4:28px;
--text-h3:36px;
--text-h2:48px;
--text-h1:64px;
--text-display:88px;

--leading-tight:1.05;
--leading-snug:1.2;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-badge:0.12em;
--tracking-tight:-0.02em;
--tracking-tighter:-0.03em;
--tracking-normal:0;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--weight-extrabold:800;
}

/* tokens/spacing.css */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

--container-max:1200px;
--section-padding-y:120px;
--section-padding-y-mobile:64px;
}

/* tokens/effects.css */
:root{
--radius-sm:8px;
--radius-md:14px;
--radius-lg:20px;
--radius-xl:24px;
--radius-pill:999px;

--shadow-card:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,0,0.45);
--shadow-raised:0 20px 60px rgba(0,0,0,0.55);
--shadow-glow-pink:0 0 0 1px rgba(255,20,131,0.4), 0 0 32px rgba(255,20,131,0.25);
--shadow-glow-navy:0 0 0 1px rgba(59,89,181,0.4), 0 0 32px rgba(59,89,181,0.22);

--ease-standard:cubic-bezier(0.16,1,0.3,1); /* @kind other */
--ease-out:cubic-bezier(0.22,1,0.36,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-standard:220ms; /* @kind other */
--duration-slow:400ms; /* @kind other */

--blur-glass:14px;
}

/* tokens/base.css */
*{box-sizing:border-box}
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);margin:0}
a{color:var(--link-color);text-decoration:none}
a:hover{color:var(--link-color-hover)}
::selection{background:var(--accent-primary);color:var(--text-on-accent)}

/* page */
    body{margin:0;background:var(--bg-page);}
    a{color:var(--text-secondary);text-decoration:none}
    a:hover{color:var(--accent-primary)}
    details summary{cursor:pointer;list-style:none}
    details summary::-webkit-details-marker{display:none}
    :root{
      --bg-page:#F7F9FC;
      --surface-1:#FFFFFF;
      --surface-2:#F0F4FA;
      --surface-3:#E7EDF6;
      --border-subtle:#DCE3EE;
      --border-strong:#C3CEE0;
      --text-primary:#0B1220;
      --text-secondary:#4B5670;
      --text-tertiary:#7C879C;
      --text-on-white:#0B1220;
      --accent-primary:#2563EB;
      --accent-primary-hover:#3B78F0;
      --accent-secondary:#0EA5E9;
      --link-color:#2563EB;
      --link-color-hover:#1D4ED8;
      --glow-gradient:linear-gradient(135deg,#2563EB,#0EA5E9);
      --shadow-card:0 1px 0 rgba(255,255,255,0.6) inset, 0 12px 32px rgba(15,23,42,0.08);
      --shadow-raised:0 24px 60px rgba(15,23,42,0.12);
      --shadow-glow-pink:0 0 0 1px rgba(37,99,235,0.35), 0 0 32px rgba(37,99,235,0.18);
    }
    @keyframes dora-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    @keyframes dora-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* hover states (were style-hover attributes) */
.hv0:hover{color:var(--accent-primary) !important}
.hv1:hover{transform:translateY(-3px) !important;box-shadow:0 14px 32px -8px rgba(37,99,235,0.45) !important}
.hv2:hover{transform:translateX(120%) !important}
.hv3:hover{transform:translateY(-50%) rotate(0deg) scale(1.12) !important;box-shadow:0 0 0 6px rgba(255,255,255,0.18) !important}
.hv4:hover{border-color:var(--accent-primary) !important;color:var(--accent-primary) !important;box-shadow:0 0 0 3px rgba(37,99,235,0.25) !important;transform:translateY(-3px) !important}
.hv5:hover{transform:translateY(-6px) !important;box-shadow:var(--shadow-card) !important;border-color:var(--accent-primary) !important}
.hv6:hover{transform:translateY(-8px) !important;box-shadow:0 20px 40px -12px rgba(37,99,235,0.28) !important;border-color:var(--accent-primary) !important;background-color:color-mix(in oklab, var(--accent-primary) 3%, white) !important;--ic-scale:1.12 !important;--ic-rot:8deg !important}
.hv7:hover{opacity:1 !important;transform:translateY(0) !important}
.hv8:hover{transform:translateY(-8px) !important;box-shadow:0 20px 40px -12px rgba(37,99,235,0.28) !important;border-color:var(--accent-primary) !important;background-color:color-mix(in oklab, var(--accent-primary) 3%, white) !important;--ic-scale:1.15 !important;--ic-rot:-8deg !important}
.hv9:hover{animation-play-state:paused !important}
.hv10:hover{border-color:var(--accent-primary) !important;color:var(--accent-primary) !important;background-color:#fff !important}
.hv11:hover{filter:brightness(1.08) !important}

/* leadership slogans shown automatically by js/main.js (same look as :hover) */
.team-quote.is-active{opacity:1 !important;transform:translateY(0) !important}

/* design-system components (Button / Badge / Input) */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);
  font-weight:var(--weight-semibold);border-radius:var(--radius-pill);cursor:pointer;opacity:1;
  transition:all var(--duration-fast) var(--ease-out)}
.ds-btn:hover{filter:brightness(1.08)}
.ds-btn--sm{gap:6px;padding:8px 16px;font-size:var(--text-xs)}
.ds-btn--lg{gap:10px;padding:16px 30px;font-size:var(--text-body)}
.ds-btn--accent{background:var(--accent-primary);color:var(--text-on-accent);
  border:1px solid var(--accent-primary);box-shadow:var(--shadow-glow-pink)}
.ds-btn--secondary{background:rgba(255,255,255,0.04);color:var(--text-primary);
  border:1px solid var(--border-default);backdrop-filter:blur(var(--blur-glass))}
.ds-badge{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:rgba(255,255,255,0.04);
  backdrop-filter:blur(var(--blur-glass));font-size:var(--text-badge);font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-badge);text-transform:uppercase;color:var(--text-secondary);
  font-family:var(--font-sans)}
.ds-badge--glow{box-shadow:var(--shadow-glow-pink)}
.ds-input{display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans)}
.ds-input input{background:var(--surface-1);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:12px 16px;font-size:var(--text-sm);color:var(--text-primary);
  outline:none;opacity:1;box-shadow:none;transition:all var(--duration-fast) var(--ease-out)}
.ds-input input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.15)}

/* image slots */
.image-slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;
  font:13px/1.3 system-ui,-apple-system,sans-serif}
.image-slot__frame{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}
.image-slot__frame img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover}
.image-slot__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;user-select:none}
.image-slot__empty svg{opacity:.45}
.image-slot__empty .cap,.image-slot__empty .sub{opacity:.75}
.image-slot__empty .cap{max-width:90%;font-weight:500;letter-spacing:.01em}
.image-slot__empty .sub{font-size:11px}
.image-slot__empty .sub u{text-underline-offset:2px}
.image-slot__ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed currentColor;opacity:.35}

/* ==========================================================================
   Responsive
   Desktop (> 900px) is exactly the authored design. The rules below only
   apply to iPad / tablet (<= 900px) and iPhone / phone (<= 640px). Most
   inline styles in index.html need !important to be overridden.
   ========================================================================== */
html{-webkit-text-size-adjust:100%}

/* menu button: hidden on desktop */
.site-header__toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--border-default);
  background:#fff;color:var(--text-primary);cursor:pointer}
.site-header__toggle .i-close{display:none}
.site-header__toggle[aria-expanded="true"] .i-menu{display:none}
.site-header__toggle[aria-expanded="true"] .i-close{display:inline}

.br-phone{display:none}

/* ---------------------------------------------------------------- tablet */
@media (max-width:900px){
  :root{--section-padding-y:88px;--space-16:48px;--text-h2:40px;--text-h4:24px}

  /* header: logo + CTA + menu button, links collapse into a dropdown */
  .site-header__inner{justify-content:flex-start !important;align-items:center !important;gap:12px;
    height:calc(var(--banner-h,38px) + 50px) !important;padding:var(--banner-h,38px) 24px 0 !important}
  .site-header__logo{margin:0 !important}
  .site-header__cta{margin-left:auto;white-space:nowrap}
  .site-header__toggle{display:inline-flex}
  .site-nav{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0 !important;padding:8px 24px 16px;background:#E1F1FF;border-bottom:1px solid var(--border-default);
    box-shadow:0 16px 32px -16px rgba(15,23,42,.25)}
  .site-header.is-open .site-nav{display:flex !important}
  .site-nav a{display:block;padding:14px 4px !important;font-size:16px;border-top:1px solid var(--border-subtle)}
  .site-nav a:first-child{border-top:0}

  /* hero */
  .hero{padding-top:84px !important}
  .hero__title{font-size:44px !important;line-height:1.2 !important;width:auto !important;height:auto !important}
  .hero__lead{width:auto !important;max-width:560px}
  h1,h2{text-wrap:balance}
  #hero-team-shot{height:340px !important}

  /* stats */
  .stats [data-count]{font-size:44px !important}

  /* grids */
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr) !important}
  .team-grid{grid-template-columns:repeat(2,1fr) !important;gap:var(--space-8) !important}
  .quote-grid{grid-template-columns:1fr !important}
  .timeline{row-gap:var(--space-12) !important}
  .timeline__line{display:none}
  .split{grid-template-columns:1fr !important;gap:var(--space-16) !important}
  .split > *{min-width:0}
  .image-slot{aspect-ratio:auto}
  .footer-grid{grid-template-columns:1fr 1fr !important}
  .footer-grid > :last-child{grid-column:1 / -1}

  /* photos and the floating cards on them */
  #story-photo,#culture-team-photo{height:340px !important}
  .float-card{left:16px !important;bottom:-24px !important}

  .h2--md{font-size:28px !important}
  .careers__title{white-space:normal !important}
}

/* ----------------------------------------------------------------- phone */
@media (max-width:640px){
  :root{--section-padding-y:64px;--space-8:20px;--space-12:32px;--space-16:40px;
    --text-h2:30px;--text-h4:22px;--text-body:16px}

  .site-header__inner{padding:var(--banner-h,38px) 16px 0 !important;gap:10px}
  .site-nav{padding:8px 16px 16px}

  /* hero */
  .hero{padding-top:80px !important}
  .hero__title{font-size:28px !important}
  .hero__title .br-desktop{display:none}
  .hero__title .br-phone{display:inline}
  .hero__actions{flex-direction:column;align-items:center !important;gap:12px !important}
  /* hero buttons: 80% of the desktop size, sized explicitly (no zoom) so they centre exactly */
  .hero__btn{zoom:1 !important;width:240px !important;max-width:100%}
  .hero__btn button{width:100% !important;padding:12.8px 4px !important;font-size:12.8px !important}
  .hero__btn button > span{width:32px !important;height:32px !important;left:6px !important}
  .hero__btn button > span svg{width:16px !important;height:16px !important}
  .hero__btn + .hero__btn button{border-width:1.2px !important}
  #hero-team-shot{height:240px !important}

  /* stats: three equal columns, number over label */
  .stats{display:grid !important;grid-template-columns:repeat(3,1fr);gap:12px !important}
  .stats > div{flex-direction:column !important;justify-content:center !important;gap:6px !important;
    text-align:center}
  .stats [data-count]{font-size:30px !important}
  .stats > div > div:last-child{font-size:11px !important}

  /* grids */
  .grid-4,.grid-3,.timeline{grid-template-columns:1fr !important}
  .grid-4,.grid-3{gap:16px !important}
  .team-grid{gap:20px 12px !important}
  .team-meta{flex-direction:column;align-items:flex-start !important;gap:2px !important}
  .footer-grid{grid-template-columns:1fr !important;gap:28px !important}

  #story-photo,#culture-team-photo{height:260px !important}
  /* white card: the photo's bottom edge cuts it into two equal halves */
  .float-card{bottom:0 !important;translate:0 50%}
  /* ...and the section keeps room for its lower half, so the divider line is not cut */
  #culture > div{padding-bottom:calc(var(--section-padding-y) + 48px) !important}
  /* the white cards start lower, so their slide-up reads clearly (desktop: 24px, phone: 64px) */
  .float-card:not(.is-visible){transform:translateY(64px) !important}

  /* section titles ("01 - ...", "02 - ...") and their headings are centred */
  .section-label,.h2--md,.contact__title{text-align:center}
  .h2--md{font-size:24px !important}

  /* leadership: slogan only, covering at most half of the photo */
  .team-quote{left:8px !important;right:8px !important;bottom:8px !important;
    padding:6px 9px !important;border-radius:10px !important}
  .team-quote__text{font-size:clamp(9.5px,2.9vw,11px) !important;line-height:1.3 !important}
  .team-quote__author{display:none}

  /* careers intro: three lines */
  .careers__br{display:none}
  .careers__lead{font-size:clamp(12px,4vw,16px) !important;max-width:24em !important;text-wrap:balance}

  /* careers buttons stack full width */
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row > *,.cta-row .ds-btn{width:100%}
}

/* very narrow phones: the CTA is hidden ("Tuyển dụng" is in the menu) */
@media (max-width:359px){
  .site-header__cta{display:none}
  .site-header__toggle{margin-left:auto}
}