/* ============================================================
   DNX AGENCY — Credential 2026
   Extends brand.css with site-specific components
   ============================================================ */

/* ---------- link defaults ---------- */
a{color:var(--blue-deep);}
a:hover{color:var(--blue);}
.dark a,.section.dark a{color:#7c93ff;}
.dark a:hover,.section.dark a:hover{color:#a9b8ff;}

/* ---------- i18n toggle ---------- */
.vi{display:none;}
body.lang-vi .en{display:none;}
body.lang-vi .vi{display:inline;}
body.lang-vi .vi.block{display:block;}
.en.block{display:block;}

/* ---------- Top nav (site header, not sidebar) ---------- */
/* fixed + transparent by default so it reads as part of the hero;
   .on-light is toggled by JS once the hero scrolls out of view */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(24px,4vw,56px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,padding .25s ease;
}
.topnav__brand{display:flex;align-items:center;gap:10px;color:var(--white);}
.topnav__brand .mk{width:24px;height:auto;}
.topnav__brand .mk.on-light-mk{display:none;}
.topnav__brand span{font-family:var(--display);font-weight:500;letter-spacing:.06em;font-size:15px;color:var(--white);transition:color .25s;}
.topnav__links{display:flex;gap:2px;}
.topnav__links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#eaf2f9cc;padding:9px 12px;border-radius:2px;transition:color .18s,background .18s;white-space:nowrap;
}
.topnav__links a:hover{color:var(--white);background:#ffffff22;}
.topnav__right{display:flex;align-items:center;gap:16px;}
.langsw{display:flex;border:1px solid #ffffff55;border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:11px;letter-spacing:.06em;transition:border-color .25s;}
.langsw button{background:none;border:none;color:#eaf2f9cc;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;transition:color .25s;}
.langsw button.is-on{background:var(--white);color:var(--blue-deep);}
@media(max-width:980px){.topnav__links{display:none;}}

/* ---------- Mobile nav toggle + panel ---------- */
.navToggle{display:none;background:none;border:1px solid #ffffff55;border-radius:3px;width:38px;height:34px;align-items:center;justify-content:center;cursor:pointer;color:var(--white);flex-direction:column;gap:4px;}
.navToggle span{display:block;width:16px;height:1.5px;background:currentColor;}
.topnav.on-light .navToggle{border-color:var(--line);color:var(--ink);}
@media(max-width:980px){.navToggle{display:flex;}}
.mobileNav{position:fixed;inset:0;z-index:60;background:var(--void);display:none;flex-direction:column;padding:100px 32px 40px;overflow-y:auto;}
.mobileNav.is-open{display:flex;}
.mobileNav a{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.01em;text-transform:uppercase;color:var(--white);padding:16px 0;border-bottom:1px solid #1a1f3a;}
.mobileNav__close{position:absolute;top:20px;right:20px;background:none;border:1px solid #ffffff55;border-radius:3px;width:38px;height:34px;color:var(--white);cursor:pointer;font-size:18px;}
body.nav-open{overflow:hidden;}

.topnav.on-light{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line-soft);box-shadow:0 1px 0 #00000006;padding-top:16px;padding-bottom:16px;}
.topnav.on-light .topnav__brand span{color:var(--ink);}
.topnav.on-light .topnav__brand .mk.on-dark-mk{display:none;}
.topnav.on-light .topnav__brand .mk.on-light-mk{display:block;}
.topnav.on-light .topnav__links a{color:var(--slate);}
.topnav.on-light .topnav__links a:hover{color:var(--blue-deep);background:#f0f3fa;}
.topnav.on-light .langsw{border-color:var(--line);}
.topnav.on-light .langsw button{color:var(--slate);}
.topnav.on-light .langsw button.is-on{background:var(--blue);color:var(--white);}

/* ---------- Hero — precision reticle, technical/future ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:0;
  background:radial-gradient(ellipse 130% 100% at 50% 42%, #060a1e 0%, #030414 48%, #010108 100%);
  color:var(--white);position:relative;overflow:hidden;
  padding:clamp(120px,14vw,148px) var(--pad) clamp(56px,7vw,72px);
  isolation:isolate;
}
/* vignette for deep-space edge falloff */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 100% 90% at 50% 45%, transparent 55%, #00000090 100%);}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(#8fa8ff10 1px,transparent 1px),linear-gradient(90deg,#8fa8ff10 1px,transparent 1px);
  background-size:62px 62px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 46%,#000 24%,transparent 82%);
  mask-image:radial-gradient(ellipse 78% 68% at 50% 46%,#000 24%,transparent 82%);}
.hero__scan{position:absolute;left:0;right:0;top:0;height:200px;z-index:0;pointer-events:none;
  background:linear-gradient(#7ea0ff00,#7ea0ff10,#7ea0ff00);animation:scanDown 8s linear infinite;}
@keyframes scanDown{0%{transform:translateY(-200px);}100%{transform:translateY(100vh);}}
@media (prefers-reduced-motion: reduce){ .hero__scan{display:none;} }

/* reticle centerpiece */
.hero__reticle{position:relative;z-index:2;width:min(320px,58vw);height:min(320px,58vw);display:flex;align-items:center;justify-content:center;margin-bottom:56px;transition:transform .3s ease-out;}
.hero__cross{position:absolute;pointer-events:none;}
.hero__cross--h{top:50%;left:-50vw;right:-50vw;height:1px;transform:translateY(-.5px);
  background:linear-gradient(90deg,transparent,#7ea0ff00 12%,#7ea0ff4d 46%,#7ea0ff4d 54%,#7ea0ff00 88%,transparent);}
.hero__cross--v{left:50%;top:-42vh;bottom:-42vh;width:1px;transform:translateX(-.5px);
  background:linear-gradient(#7ea0ff00,#7ea0ff33 44%,#7ea0ff33 56%,#7ea0ff00);}
.hero__tag{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#7f8fc4;white-space:nowrap;display:flex;align-items:center;gap:7px;}
.hero__tag--tl{top:-26px;left:0;}
.hero__tag--br{bottom:-26px;right:0;color:#8fe3c0;}
.hero__tag--br i{width:6px;height:6px;border-radius:50%;background:#8fe3c0;box-shadow:0 0 0 0 #8fe3c080;animation:pulseDot 2.2s ease-out infinite;}

.hero__box{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#7ea0ff0c,transparent 66%);}
.hero__box .c{position:absolute;width:22px;height:22px;border:1.5px solid #8fa8ffb0;}
.c--tl{top:0;left:0;border-right:0;border-bottom:0;}
.c--tr{top:0;right:0;border-left:0;border-bottom:0;}
.c--bl{bottom:0;left:0;border-right:0;border-top:0;}
.c--br{bottom:0;right:0;border-left:0;border-top:0;}
.hero__box-scan{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#8fd0ff,transparent);box-shadow:0 0 14px 1px #8fd0ffaa;
  animation:boxScan 4.6s ease-in-out infinite;}
@keyframes boxScan{0%,100%{top:4%;opacity:0;}8%{opacity:1;}50%{top:94%;opacity:1;}58%{opacity:0;}}
.hero__ring{position:absolute;width:64%;height:64%;border-radius:50%;border:1px solid #7ea0ff2e;
  box-shadow:inset 0 0 40px #3a5ad022;}
@media (prefers-reduced-motion: reduce){ .hero__box-scan{display:none;} }
.hero__mark{position:relative;z-index:2;width:42%;height:auto;
  filter:drop-shadow(0 0 12px #cfe0ff88) drop-shadow(0 0 34px #6f8fff55) drop-shadow(0 0 70px #2c4ad044);}

.hero__main{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:820px;margin-top:-8px;}
.hero__kicker{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:#c9d6f5;display:flex;align-items:center;gap:14px;}
.hero__kicker::before{content:"";width:32px;height:2px;background:#c9d6f5;display:inline-block;}
.hero__kicker::after{content:"";width:6px;height:6px;border-radius:50%;background:#8fe3c0;box-shadow:0 0 0 0 #8fe3c080;animation:pulseDot 2.2s ease-out infinite;}
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 #8fe3c080;} 70%{box-shadow:0 0 0 10px #8fe3c000;} 100%{box-shadow:0 0 0 0 #8fe3c000;} }
.hero__title{position:relative;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,29px);line-height:1.18;letter-spacing:.006em;text-transform:uppercase;}
.hero__title .accent{color:var(--white);position:relative;}
.hero__title .accent::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.08em;background:linear-gradient(90deg,#8fe3c0,#7ea0ff);border-radius:2px;}
.hero__lede{position:relative;max-width:56ch;font-size:clamp(15px,1.3vw,17px);color:#9daad6;}
.hero__cta{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:2px;}
.hbtn{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:14px 24px;border-radius:2px;transition:transform .15s,background .15s,color .15s;}
.hbtn.primary{background:var(--white);color:var(--blue-deep);}
.hbtn.primary:hover{background:var(--blue);color:var(--white);transform:translateY(-2px);}
.hbtn.ghost{border:1px solid #ffffff40;color:var(--white);}
.hbtn.ghost:hover{background:#ffffff14;transform:translateY(-2px);}

/* cursor-reactive spotlight */
.hero__spot{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%), #ffffff0e, transparent 60%);
  transition:opacity .3s;opacity:0;}
.hero:hover .hero__spot{opacity:1;}

/* stat cards */
.hero__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px;width:100%;max-width:900px;}
.hero__stats .st{background:#ffffff06;border:1px solid #ffffff1a;border-radius:3px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;backdrop-filter:blur(6px);transition:border-color .2s,background .2s,transform .2s;}
.hero__stats .st:hover{border-color:#ffffff55;background:#ffffff12;transform:translateY(-3px);}
.hero__stats .num{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,30px);color:var(--white);line-height:1;font-variant-numeric:tabular-nums;}
.hero__stats .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:#9daad6;line-height:1.4;text-align:center;}
@media(max-width:700px){.hero__stats{grid-template-columns:1fr 1fr;}}

/* ---------- Portfolio filters ---------- */
.filterbar{margin:8px 0 40px;}
.filterbar .frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;}
.filterbar .flbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);width:88px;flex:none;}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.03em;padding:8px 15px;border:1px solid var(--line);border-radius:999px;color:var(--slate);background:var(--white);cursor:pointer;transition:all .15s;}
.chip:hover{border-color:var(--blue);color:var(--blue-deep);}
.chip.is-active{background:var(--blue);border-color:var(--blue);color:var(--white);}
.filterlink{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--slate);margin-top:6px;}
.filterlink button{font-family:inherit;font-size:inherit;letter-spacing:.03em;background:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;color:var(--blue-deep);}
.filterlink button:hover{border-color:var(--blue);}
.case-card{transition:opacity .2s;}
.case-card.is-hidden{display:none;}
@media(max-width:860px){#caseGrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#caseGrid{grid-template-columns:1fr;}}

/* ---------- Values ---------- */
.value-card{padding:28px 0;border-top:1px solid var(--line-soft);}
.value-card .idx{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:.05em;}

/* ---------- Mission / Vision split ---------- */
.mv{border:1px solid #1a1f3a;border-radius:3px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:760px){.mv{grid-template-columns:1fr;}}
.mv > div{padding:32px 34px;}
.mv .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5b7bff;margin-bottom:12px;}
.mv .vision{border-left:1px solid #1a1f3a;}
@media(max-width:760px){.mv .vision{border-left:none;border-top:1px solid #1a1f3a;}}

/* ---------- Line of business tiles ---------- */
.lob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px;}
@media(max-width:860px){.lob-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.lob-grid{grid-template-columns:1fr;}}
.lob-tile{border:1px solid #1a1f3a;border-radius:4px;padding:28px 22px;background:#0a0c1a;transition:border-color .2s,transform .2s;}
.lob-tile:hover{border-color:var(--blue);transform:translateY(-2px);}
.lob-tile .idx{display:block;font-family:var(--mono);color:var(--blue);font-size:12px;letter-spacing:.05em;margin-bottom:16px;}
.lob-tile h4{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--white);line-height:1.3;}

/* ---------- Service cards ---------- */
.svc-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:860px){.svc-cards{grid-template-columns:1fr;}}
.svc-card{position:relative;border:1px solid #1a1f3a;border-radius:6px;padding:clamp(32px,4vw,44px) clamp(28px,3.4vw,38px);background:var(--abyss);overflow:hidden;}
.svc-card.blue{background:var(--blue);border-color:var(--blue);}
.svc-card .num{position:absolute;top:22px;right:28px;font-family:var(--display);font-weight:600;font-size:64px;line-height:1;color:#ffffff14;}
.svc-card h3{position:relative;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);text-transform:uppercase;letter-spacing:.01em;color:var(--white);margin-bottom:28px;}
.svc-card ul{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;}
.svc-card li{font-size:15px;color:#dbe4ff;display:flex;align-items:baseline;gap:12px;}
.svc-card li::before{content:"";width:6px;height:6px;background:var(--white);border-radius:1px;flex:none;transform:translateY(-2px);opacity:.7;}
.svc-card.blue li{color:#eaf2ff;}

/* ---------- Line of business chips (legacy, still used elsewhere) ---------- */
.lob{display:flex;flex-wrap:wrap;gap:10px;}
.lob span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--slate);}

/* ---------- Service groups ---------- */
.svc-group{padding:26px 0;border-top:1px solid var(--line-soft);}
.svc-group:last-child{border-bottom:none;}
.svc-group__head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;}
.svc-group__head h3{font-size:clamp(17px,2vw,20px);}
.svc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px;}
@media(max-width:760px){.svc-list{grid-template-columns:1fr;}}
.svc-list li{list-style:none;color:var(--ink);font-size:14.5px;padding:6px 0;display:flex;gap:10px;align-items:baseline;}
.svc-list li::before{content:"";width:5px;height:5px;background:var(--blue);border-radius:1px;flex:none;transform:translateY(-2px);}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #1a1f3a;border-bottom:1px solid #1a1f3a;}
@media(max-width:860px){.process{grid-template-columns:1fr;}}
.process__step{padding:30px 26px;border-right:1px solid #1a1f3a;position:relative;}
.process__step:last-child{border-right:none;}
@media(max-width:860px){.process__step{border-right:none;border-bottom:1px solid #1a1f3a;} .process__step:last-child{border-bottom:none;}}
.process__num{font-family:var(--display);font-weight:600;font-size:34px;color:var(--blue);margin-bottom:14px;}
.process__step h4{font-size:16px;letter-spacing:.02em;margin-bottom:10px;color:var(--white);}
.process__step p{font-size:13.5px;color:#8b94ae;line-height:1.6;}

/* ---------- Case study placeholder cards ---------- */
.case-card{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--white);transition:opacity .2s,border-color .2s,box-shadow .2s,transform .2s;}
.case-card:hover{border-color:var(--blue);box-shadow:0 10px 28px #0b1f5a1a;transform:translateY(-2px);}
.case-card:hover .case-card__view{color:var(--blue);}
.case-card .ph{aspect-ratio:16/10;overflow:hidden;}
.case-card .ph img{transition:transform .35s ease;}
.case-card:hover .ph img{transform:scale(1.04);}
.case-card__body{padding:22px 24px;}
.case-card__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.case-card__meta span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:4px 10px;}
.case-card h4{font-size:16px;margin-bottom:6px;text-transform:none;font-family:var(--body);font-weight:600;}
.case-card .tag{font-family:var(--mono);font-size:11px;color:var(--blue-deep);letter-spacing:.04em;margin-bottom:8px;display:block;}
.case-card__view{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--blue-deep);}
.case-card__view:hover{color:var(--blue);}
/* whole card is the click target: this link is stretched over it */
.case-card__view::after{content:"";position:absolute;inset:0;z-index:1;}
.case-card__view:focus-visible{outline:none;}
.case-card:has(.case-card__view:focus-visible){outline:2px solid var(--blue);outline-offset:3px;}

/* ---------- Logo grid (uniform-size client logo tiles) ---------- */
.clients-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);}
@media(max-width:860px){.clients-cols{grid-template-columns:1fr;}}
.clients-col__head{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--blue-deep);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.logogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.logogrid .tile{min-height:104px;display:flex;align-items:center;justify-content:center;padding:18px 14px;}
.logogrid .tile img{max-width:100%;max-height:44px;width:auto;height:auto;display:block;}
/* white-only logos: thin dark outline so they read on the light tile, artwork untouched */
.logogrid .tile img.logo-outline{filter:drop-shadow(.5px 0 0 var(--ink)) drop-shadow(-.5px 0 0 var(--ink)) drop-shadow(0 .5px 0 var(--ink)) drop-shadow(0 -.5px 0 var(--ink));}
.logogrid .tile .txt{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--slate);text-transform:uppercase;text-align:center;line-height:1.35;white-space:normal;word-break:break-word;}

/* ---------- Logo wall ---------- */
.logowall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
@media(max-width:760px){.logowall{grid-template-columns:repeat(2,1fr);}}
.logowall span{background:var(--white);min-height:88px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.03em;color:#aab2cc;text-transform:uppercase;padding:10px;text-align:center;}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr;}}
.team-card__photo{aspect-ratio:1;border-radius:3px;margin-bottom:16px;}
.team-card h4{font-size:16px;font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;margin-bottom:4px;}
.team-card .role{font-family:var(--mono);font-size:11.5px;color:var(--blue-deep);letter-spacing:.03em;margin-bottom:10px;}
.team-card p{font-size:13.5px;color:var(--slate);line-height:1.55;}
.team-card.advisor .role{color:#5b7bff;}

/* ---------- Offices ---------- */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:56px;}
@media(max-width:760px){.office-grid{grid-template-columns:1fr;}}
.office-cap{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:#aab2cc;line-height:1.6;}
.office-cap b{color:var(--white);font-weight:600;letter-spacing:.02em;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #1a1f3a;font-family:var(--mono);font-size:13px;}
.contact-row dt{color:#7c86a6;}
.contact-row dd{margin:0;color:var(--white);text-align:right;}
.cta-big{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,52px);letter-spacing:.006em;text-transform:uppercase;color:var(--white);}
.cta-big a{color:var(--blue);}
.cta-big a:hover{color:#5b7bff;}

/* ---------- Footer ---------- */
.credfoot{background:var(--void);color:#7c86a6;padding:36px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;border-top:1px solid #1a1f3a;}