/* Concept 3 — The Journey: White → Dark Explosion → Dark Spotlights → White → Dark CTA */

body { background: var(--color-white); color: var(--color-charcoal); }

/* Nav — starts transparent over white, switches to dark mode */
.nav { background: transparent; }
.nav--scrolled { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.nav--dark { background: transparent; }
.nav--scrolled.nav--dark { background: rgba(10,15,30,.85); backdrop-filter: blur(14px); }
.logo-text { color: var(--color-charcoal); transition: color .3s; }
.nav--dark .logo-text { color: var(--color-white); }
.nav__links a:not(.btn) { transition: color .3s; }
.nav--dark .nav__links a:not(.btn) { color: var(--color-white); }

/* Hero — white, Three.js canvas */
.hero { background: var(--color-white); }
.hero__headline { color: var(--color-charcoal); }
.hero__sub { color: rgba(26,26,46,.65); }
.hero__label { color: var(--color-blue); }
.hero__ctas .btn--outline { color: var(--color-charcoal); border-color: rgba(26,26,46,.3); }
.hero__scroll-indicator { color: var(--color-charcoal); }

/* Abstract explosion section */
.abstract-explosion {
  position: relative; padding: 8rem 0; overflow: hidden;
  background: #070B18;
}
.explosion__bg {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 50% 70% at 15% 50%, rgba(0,212,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 45% 65% at 85% 40%, rgba(123,47,255,.2) 0%, transparent 55%),
    radial-gradient(ellipse 35% 50% at 50% 90%, rgba(255,77,109,.15) 0%, transparent 55%),
    radial-gradient(ellipse 25% 35% at 30% 20%, rgba(201,168,76,.12) 0%, transparent 55%);
  animation: explosionBreath 10s ease-in-out infinite alternate;
}
@keyframes explosionBreath {
  0%   { opacity: .8; transform: scale(1) rotate(0deg); }
  50%  { opacity: 1;  transform: scale(1.06) rotate(.5deg); }
  100% { opacity: .85; transform: scale(.97) rotate(-.3deg); }
}
.explosion__content { position: relative; z-index: 2; text-align: center; }
.explosion__headline {
  font-family: var(--font-display); font-size: var(--font-h1); font-weight: 800;
  color: var(--color-white); line-height: 1.2; margin-bottom: 3rem;
}
.explosion__pillars { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.explosion__pillar {
  display: flex; align-items: center; gap: .75rem;
  color: rgba(255,255,255,.85); font-size: 1rem; font-weight: 600;
  padding: .75rem 1.75rem; border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px; background: rgba(255,255,255,.04);
}
.pillar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-blue); flex-shrink: 0;
}

/* ── Showcase: floating tiles over tie-dye background ── */
.showcase {
  position: relative;
  padding: var(--section-padding) 0;
  overflow: hidden;
}
.showcase__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 10% 20%, rgba(201,168,76,.6) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 90% 80%, rgba(26,92,255,.55) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 10%, rgba(0,212,255,.45) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 75%, rgba(26,92,255,.4) 0%, transparent 50%),
    radial-gradient(ellipse 35% 45% at 75% 35%, rgba(201,168,76,.4) 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 45% 55%, rgba(0,212,255,.25) 0%, transparent 50%);
  background-color: #dce4f0;
  animation: tieDyeShift 18s ease-in-out infinite alternate;
}
@keyframes tieDyeShift {
  0%   { filter: saturate(1.0) brightness(1.05); }
  50%  { filter: saturate(1.15) brightness(1.0); }
  100% { filter: saturate(0.95) brightness(1.08); }
}
.showcase__rows {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 5rem;
}
.showcase__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.showcase__row--img-right .showcase__text { order: -1; }
.showcase__tile {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.18), 0 6px 20px rgba(0,0,0,.1);
  transform: scale(1);
  transition: transform .55s cubic-bezier(.23,1,.32,1), box-shadow .55s ease;
  position: relative;
  z-index: 1;
}
.showcase__row--img-right .showcase__tile { transform: scale(1); }
.showcase__tile:hover {
  transform: scale(1.5);
  z-index: 10;
  box-shadow: 0 48px 120px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.18);
}
.showcase__tile img { width: 100%; display: block; }
.showcase__tile--3d {
  border: 1.5px solid rgba(0,212,255,.25);
  box-shadow:
    8px 8px 0 0 rgba(0,212,255,.08),
    16px 16px 0 0 rgba(26,92,255,.05),
    0 30px 80px rgba(0,0,0,.35);
  transform: perspective(1000px) rotateY(4deg) rotateX(-2deg) scale(1) !important;
  transition: transform .55s cubic-bezier(.23,1,.32,1), box-shadow .55s ease !important;
}
.showcase__tile--3d:hover {
  transform: perspective(1000px) rotateY(1deg) rotateX(-0.5deg) scale(1.45) !important;
  box-shadow:
    4px 4px 0 0 rgba(0,212,255,.12),
    0 50px 120px rgba(0,0,0,.45);
}
.showcase__text .section__label { color: rgba(26,26,46,.55); }
.showcase__text h3 {
  font-family: var(--font-display); font-size: var(--font-h2);
  font-weight: 800; color: var(--color-charcoal); margin: .75rem 0 1rem; line-height: 1.15;
}
.showcase__text p { color: rgba(26,26,46,.7); margin-bottom: 1.75rem; line-height: 1.7; }
.showcase__text .btn--outline { color: var(--color-charcoal); border-color: rgba(26,26,46,.3); }

/* Services — white */
.services { background: var(--color-white); }
.service-card { background: var(--color-gray); }
.service-card:hover { background: var(--color-white); box-shadow: 0 8px 32px rgba(26,92,255,.08); }
.service-card h3 { color: var(--color-charcoal); }
.section__headline { color: var(--color-charcoal); }

/* Framework */
.framework { background: var(--color-gray); }
.step h3 { color: var(--color-charcoal); }
.step p { color: rgba(26,26,46,.55); }

/* Portfolio */
.portfolio { background: var(--color-white); }
.portfolio .service-card { background: var(--color-gray); }
.portfolio .service-card h3 { color: var(--color-charcoal); }
.portfolio .service-card p { color: rgba(26,26,46,.6); }

/* ── Portfolio Teaser ── */
.portfolio { background: var(--color-gray); }
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.portfolio-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(26,26,46,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,92,255,.1); }
.portfolio-card__img { position: relative; aspect-ratio: 4/3; }
.portfolio-card__placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--color-navy) 0%, #1a2a4a 100%);
  display: flex; align-items: center; justify-content: center;
}
.portfolio-card__placeholder--open {
  background: linear-gradient(135deg, rgba(26,92,255,.15) 0%, rgba(0,212,255,.1) 100%);
  border: 2px dashed rgba(26,92,255,.25);
}
.portfolio-card__initials {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800;
  color: rgba(255,255,255,.25); letter-spacing: .05em;
}
.portfolio-card__placeholder--open .portfolio-card__initials { color: var(--color-blue); opacity: .4; }
.portfolio-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(26,92,255,.9); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  padding: .25rem .65rem; border-radius: 100px; text-transform: uppercase;
}
.portfolio-card__badge--live {
  background: rgba(40,200,64,.9);
}
.portfolio-card--link,
.portfolio-card--link:visited,
.portfolio-card--link:hover,
.portfolio-card--link:focus {
  display: block; text-decoration: none; color: var(--color-charcoal);
}
.portfolio-card--link:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(26,92,255,.1); }

/* 3D card treatment */
.portfolio-card--3d {
  border: 2px solid rgba(26,92,255,.18);
  box-shadow:
    6px 6px 0 0 rgba(26,92,255,.12),
    12px 12px 0 0 rgba(26,92,255,.06),
    0 20px 50px rgba(26,92,255,.1);
  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);
  transition: transform .4s ease, box-shadow .4s ease;
}
.portfolio-card--3d:hover {
  transform: perspective(900px) rotateY(-1deg) rotateX(0deg) translateY(-6px) !important;
  box-shadow:
    4px 4px 0 0 rgba(26,92,255,.15),
    0 28px 60px rgba(26,92,255,.15);
}

/* Logo image inside card */
.portfolio-card__logo-bg {
  width: 100%; aspect-ratio: 4/3;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.portfolio-card__logo-img {
  width: 60%; height: 60%; object-fit: contain;
}
.portfolio-card__meta { padding: 1.5rem; }
.portfolio-card__tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-blue); opacity: .7;
}
.portfolio-card__meta h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--color-charcoal) !important; margin: .4rem 0 .5rem;
}
.portfolio-card__meta p { color: rgba(26,26,46,.55); font-size: .875rem; line-height: 1.55; }

@media (max-width: 900px) {
  .portfolio__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .portfolio__grid { grid-template-columns: 1fr; }
}

/* Promise — dark left panel */
.promise { background: var(--color-white); }
.promise__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.promise__left {
  background: var(--color-navy); padding: 4rem;
  border-radius: var(--radius) 0 0 var(--radius);
  position: relative; overflow: hidden;
}
.promise__left::after {
  content: ''; position: absolute; top: -50%; right: -30%; width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(0,212,255,.08) 0%, transparent 60%);
}
.promise__left h2 { color: var(--color-white); font-size: var(--font-h2); position: relative; z-index: 1; }
.promise__right { background: var(--color-gray); padding: 4rem; border-radius: 0 var(--radius) var(--radius) 0; }
.deliverables li { color: var(--color-charcoal); }

/* CTA — dark navy */
.cta { background: var(--color-navy); position: relative; overflow: hidden; }
.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(26,92,255,.15) 0%, transparent 60%);
}
.cta .container { position: relative; z-index: 1; }
.cta__headline { color: var(--color-white); }
.cta__sub { color: rgba(255,255,255,.6); }
.cta-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.cta-card h3 { color: var(--color-white); }
.cta-card p { color: rgba(255,255,255,.55); }
.cta-card .btn--outline { color: var(--color-white); border-color: rgba(255,255,255,.3); }
.cta__reassurance { color: rgba(255,255,255,.4); }

/* Footer */
.footer { background: rgba(0,0,0,.5); border-top: 1px solid rgba(255,255,255,.06); color: var(--color-white); }
.footer__name { color: var(--color-white); }
.footer__inner { border-bottom-color: rgba(255,255,255,.06); }

/* Nav mobile */
.nav__mobile { background: rgba(255,255,255,.97); color: var(--color-charcoal); }
.nav--dark .nav__mobile { background: rgba(10,15,30,.97); color: var(--color-white); }

/* Responsive */
@media (max-width: 768px) {
  .showcase__row { grid-template-columns: 1fr; gap: 2rem; }
  .showcase__row--img-right .showcase__text { order: 0; }
  .showcase__tile, .showcase__row--img-right .showcase__tile { transform: none; }
  .promise__inner { grid-template-columns: 1fr; }
  .promise__left { border-radius: var(--radius) var(--radius) 0 0; padding: 2.5rem; }
  .promise__right { border-radius: 0 0 var(--radius) var(--radius); padding: 2.5rem; }
  .explosion__pillars { flex-direction: column; align-items: center; gap: 1rem; }
  .abstract-explosion { padding: 4rem 0; }
}

/* ── Services — scattered bento tiles ── */
.services__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding-bottom: 2.5rem;
}
.bento {
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--color-gray);
  transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s ease;
}
/* Unique tilt + Y offset per card — scattered feel */
.bento:nth-child(1) { background: var(--color-navy); transform: translateY(0) rotate(-0.6deg); }
.bento:nth-child(2) { transform: translateY(22px) rotate(0.5deg); }
.bento:nth-child(3) { transform: translateY(-10px) rotate(-0.4deg); }
.bento:nth-child(4) { transform: translateY(14px) rotate(0.4deg); }
.bento:nth-child(5) { transform: translateY(-6px) rotate(-0.5deg); }
.bento:nth-child(6) { transform: translateY(10px) rotate(0.3deg); }
.bento:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 20px 64px rgba(26,92,255,.13); }
/* Colored top accent bar per card */
.bento { --bento-color: var(--color-blue); }
.bento:nth-child(1) { --bento-color: var(--color-cyan); }
.bento:nth-child(2) { --bento-color: var(--color-blue); }
.bento:nth-child(3) { --bento-color: var(--color-cyan); }
.bento:nth-child(4) { --bento-color: var(--color-gold); }
.bento:nth-child(5) { --bento-color: var(--color-purple); }
.bento:nth-child(6) { --bento-color: var(--color-cyan); }
.bento::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bento-color);
  border-radius: 20px 20px 0 0;
  transition: height .3s ease;
}
.bento:hover::after { height: 5px; }
/* Elements */
.bento__num {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bento-color); opacity: .8;
}
.bento__icon { font-size: 2rem; line-height: 1; margin-bottom: .15rem; }
.bento h3 {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700;
  color: var(--color-charcoal); line-height: 1.3;
}
.bento p { color: rgba(26,26,46,.5); font-size: .875rem; line-height: 1.6; flex: 1; }
/* Hero card (first) overrides — dark navy */
.bento:nth-child(1) .bento__num { color: var(--color-cyan); opacity: .9; }
.bento:nth-child(1) h3 { color: var(--color-white); }
.bento:nth-child(1) p { color: rgba(255,255,255,.5); }
.bento:nth-child(1):hover { box-shadow: 0 20px 64px rgba(0,0,0,.28); }

@media (max-width: 900px) {
  .services__bento { grid-template-columns: 1fr 1fr; padding-bottom: 0; }
  .bento:nth-child(n) { transform: none !important; }
}
@media (max-width: 600px) {
  .services__bento { grid-template-columns: 1fr; }
}

/* ── Framework — rolling drum animation, no line ── */
.framework__build { position: relative; margin: 3rem 0 2rem; }
.framework__track { display: none; }
.framework__track-fill { display: none; }
.framework__steps {
  display: flex; justify-content: space-between;
  align-items: flex-start; position: relative; z-index: 1;
  gap: 0; flex-wrap: nowrap; margin: 0;
}
.step {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  width: 130px; flex-shrink: 0;
}
.step__circle { opacity: 0; }
.step h3, .step p { opacity: 0; transform: translateY(8px); }
.step__connector { display: none; }
#framework-tagline { opacity: 0; }

@media (max-width: 768px) {
  .framework__steps { flex-direction: column; align-items: center; gap: 2rem; }
  .step { width: 100%; max-width: 280px; }
  .step__circle { opacity: 0; }
}

/* ── Footer — professional legal layout ── */
.footer {
  background: #04060F;
  color: rgba(255,255,255,.65);
  padding: 5rem 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer__upper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer__brand { display: flex; flex-direction: column; gap: .75rem; }
.footer__logo-row { display: flex; align-items: center; gap: .6rem; }
.footer__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.footer__tagline { color: var(--color-blue); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.footer__desc { font-size: .82rem; opacity: .4; line-height: 1.65; max-width: 240px; }
.footer__col-title {
  font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-bottom: 1.25rem;
}
.footer__col nav { display: flex; flex-direction: column; gap: .65rem; }
.footer__col nav a { font-size: .875rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer__col nav a:hover { color: #fff; }
.footer__contact-block { display: flex; flex-direction: column; gap: .65rem; }
.footer__contact-block a { font-size: .875rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer__contact-block a:hover { color: #fff; }
.footer__location { font-size: .8rem; color: rgba(255,255,255,.25); margin-top: .4rem; }
.footer__lower {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 0; font-size: .78rem;
}
.footer__legal { color: rgba(255,255,255,.3); }
.footer__legal-links { display: flex; gap: .75rem; align-items: center; }
.footer__legal-links a { color: rgba(255,255,255,.3); transition: color .2s; }
.footer__legal-links a:hover { color: rgba(255,255,255,.6); }
.footer__legal-links span { color: rgba(255,255,255,.15); }

@media (max-width: 900px) {
  .footer__upper { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer__upper { grid-template-columns: 1fr; }
  .footer__lower { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ── Showcase detail panels ── */
.showcase__rows { display: block; }
.showcase__row { margin-bottom: 4.5rem; }
.showcase__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .75s cubic-bezier(.23,1,.32,1);
  margin-bottom: 0;
}
.showcase__detail.open {
  max-height: 1400px;
  margin-bottom: 4.5rem;
}
.showcase__detail-inner {
  background: rgba(4,6,15,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 2.5rem;
}
.detail-title {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 800;
  color: #fff; margin-bottom: 1.5rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.detail-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 1.4rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: background .2s, border-color .2s;
}
.detail-card:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(26,92,255,.25);
}
.detail-card__icon { font-size: 1.35rem; line-height: 1; }
.detail-card h4 {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700; color: #fff;
}
.detail-card p { font-size: .82rem; color: rgba(255,255,255,.42); line-height: 1.65; }
.detail-card--highlight { background: rgba(26,92,255,.08); border-color: rgba(26,92,255,.2); }
.detail-card--secure { background: rgba(40,200,64,.05); border-color: rgba(40,200,64,.15); }
.showcase__expand-btn.active { opacity: .7; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .detail-grid { grid-template-columns: 1fr; } .showcase__detail-inner { padding: 1.5rem; } }

/* ── Logo image ── */
.nav__logo { overflow: hidden; height: 72px; }
.nav__logo-img { height: 158px; width: auto; display: block; margin-top: 3px; }
.footer__logo-img { height: 28px; width: auto; display: block; opacity: .85; }

/* ── AI Card Mockup Tiles ── */
.ai-card {
  background: #07091a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 310px;
}
.ai-card__bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.ai-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.ai-card__dot:nth-child(1) { background: #ff5f57; }
.ai-card__dot:nth-child(2) { background: #febc2e; }
.ai-card__dot:nth-child(3) { background: #28c840; }
.ai-card__label {
  font-size: .68rem; color: rgba(255,255,255,.3);
  letter-spacing: .05em; text-transform: uppercase;
  margin-left: .4rem; font-family: var(--font-display); font-weight: 600;
}
.ai-card__body {
  padding: 1.1rem; display: flex; flex-direction: column; gap: .65rem; flex: 1;
}
.ai-card__input {
  margin-top: auto; padding: .45rem .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 6px; min-height: 30px;
}
.ai-card__cursor { color: var(--color-blue); animation: blink .9s step-end infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* Chat bubbles */
.ai-bubble { display: flex; gap: .55rem; align-items: flex-start; }
.ai-bubble__icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: #fff; font-weight: 700; flex-shrink: 0;
}
.ai-bubble__icon--sys { background: rgba(40,200,64,.2); color: #28c840; }
.ai-bubble__text {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: 0 8px 8px 8px; padding: .45rem .7rem;
  color: rgba(255,255,255,.7); font-size: .78rem; line-height: 1.5; flex: 1;
}
.ai-bubble__text--green { border-color: rgba(40,200,64,.2); color: rgba(40,200,64,.85); }
.ai-bubble__text--blue { border-color: rgba(26,92,255,.2); }
.ai-bubble__text--user {
  background: rgba(26,92,255,.12); border-color: rgba(26,92,255,.2);
  border-radius: 8px 0 8px 8px; margin-left: 2rem;
}

/* CRM rows */
.crm-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: 7px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
}
.crm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.crm-dot--green { background: #28c840; }
.crm-dot--yellow { background: #febc2e; }
.crm-dot--blue { background: var(--color-blue); }
.crm-name { color: rgba(255,255,255,.75); font-size: .79rem; font-weight: 600; flex: 1; }
.crm-tag {
  font-size: .67rem; color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.05); padding: .12rem .45rem; border-radius: 100px; white-space: nowrap;
}
.crm-stat { font-size: .72rem; color: rgba(255,255,255,.35); white-space: nowrap; }
.crm-footer {
  margin-top: auto; padding: .55rem .7rem;
  background: rgba(26,92,255,.08); border: 1px solid rgba(26,92,255,.14);
  border-radius: 7px; color: rgba(26,92,255,.9); font-size: .75rem; font-weight: 600;
}

/* Business intelligence */
.bi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.bi-title { color: rgba(255,255,255,.35); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.bi-trend { color: #28c840; font-size: .78rem; font-weight: 700; }
.bar-row { display: flex; align-items: center; gap: .65rem; font-size: .76rem; }
.bar-label { color: rgba(255,255,255,.35); width: 18px; text-align: right; font-weight: 600; }
.bar-track { flex: 1; height: 7px; background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--color-blue), var(--color-cyan)); }
.bar-val { color: rgba(255,255,255,.55); font-size: .73rem; width: 34px; }
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .65rem; background: rgba(255,255,255,.03);
  border-radius: 6px; border: 1px solid rgba(255,255,255,.04);
}
.stat-label { color: rgba(255,255,255,.35); font-size: .76rem; }
.stat-val { font-weight: 700; font-size: .82rem; }
.stat-val--up { color: #28c840; }
.stat-val small { font-weight: 400; opacity: .7; margin-left: .25rem; }
.stat-val--blue { color: var(--color-cyan); }

/* Extended bento — items 7-9 */
.bento:nth-child(7) { transform: translateY(8px) rotate(-0.5deg); --bento-color: var(--color-gold); }
.bento:nth-child(8) { transform: translateY(20px) rotate(0.4deg); --bento-color: var(--color-blue); }
.bento:nth-child(9) { transform: translateY(-6px) rotate(-0.35deg); --bento-color: var(--color-purple); }

/* ── Footer disclaimer block ── */
.footer__disclaimer {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .74rem; color: rgba(255,255,255,.2); line-height: 1.75;
  display: flex; flex-direction: column; gap: .4rem;
}
.footer__disclaimer strong { color: rgba(255,255,255,.28); font-weight: 600; }

/* ── CTA data privacy notice ── */
.cta__privacy-box {
  max-width: 580px; margin: 3.5rem auto 0;
  padding: .75rem 1.25rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; font-size: .55rem; color: rgba(255,255,255,.3);
  line-height: 1.8; text-align: center;
}
.cta__privacy-box strong { color: rgba(255,255,255,.45); }

/* ── Cycling headline size ── */
.hero__cycling { font-size: .7em; }

/* ── Website design mockup tile ── */
.web-mock {
  background: #f0f2f8; flex: 1;
  display: flex; flex-direction: column; overflow: hidden;
}
.web-mock__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .9rem; background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.web-mock__logo-pill { width: 44px; height: 8px; background: #1a5cff; border-radius: 4px; }
.web-mock__nav-links { display: flex; align-items: center; gap: .45rem; }
.web-mock__link { width: 26px; height: 6px; background: rgba(0,0,0,.14); border-radius: 3px; }
.web-mock__nav-cta { width: 34px; height: 14px; background: #1a5cff; border-radius: 4px; }
.web-mock__hero {
  padding: 1.25rem 1rem .9rem;
  background: linear-gradient(135deg, #07091a 0%, #0d1a3a 60%, #070B18 100%);
  display: flex; flex-direction: column; gap: .35rem;
}
.web-mock__eyebrow { width: 48px; height: 5px; background: rgba(26,92,255,.55); border-radius: 3px; }
.web-mock__h1 { width: 92%; height: 10px; background: rgba(255,255,255,.85); border-radius: 4px; }
.web-mock__h1--accent { background: #1a5cff; width: 72%; }
.web-mock__sub { width: 84%; height: 5px; background: rgba(255,255,255,.22); border-radius: 3px; }
.web-mock__btns { display: flex; gap: .4rem; margin-top: .4rem; }
.web-mock__btn--primary { width: 52px; height: 15px; background: #1a5cff; border-radius: 4px; }
.web-mock__btn--ghost { width: 44px; height: 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; }
.web-mock__section-label { width: 38px; height: 5px; background: rgba(0,0,0,.14); border-radius: 3px; margin: .8rem 1rem .5rem; }
.web-mock__cards { display: flex; gap: .45rem; padding: 0 .75rem .85rem; }
.web-mock__card {
  flex: 1; background: #fff; border-radius: 7px; padding: .6rem .55rem;
  display: flex; flex-direction: column; gap: .28rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.web-mock__card-icon { width: 14px; height: 14px; border-radius: 4px; }
.web-mock__card-icon--blue { background: rgba(26,92,255,.18); }
.web-mock__card-icon--cyan { background: rgba(0,212,255,.18); }
.web-mock__card-icon--gold { background: rgba(201,168,76,.22); }
.web-mock__card-h { width: 74%; height: 6px; background: rgba(0,0,0,.16); border-radius: 3px; margin-top: .12rem; }
.web-mock__card-p { width: 90%; height: 4px; background: rgba(0,0,0,.07); border-radius: 3px; }

/* ── KPI strip & deal rows (BI tile) ── */
.kpi-strip { display: flex; gap: .4rem; }
.kpi-block {
  flex: 1; padding: .5rem .55rem;
  background: rgba(26,92,255,.1); border: 1px solid rgba(26,92,255,.18);
  border-radius: 8px; display: flex; flex-direction: column; gap: .12rem;
}
.kpi-val { font-size: .95rem; font-weight: 800; color: #fff; font-family: var(--font-display); line-height: 1; }
.kpi-label { font-size: .62rem; color: rgba(255,255,255,.35); display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.kpi-badge { font-size: .62rem; font-weight: 700; padding: .05rem .28rem; border-radius: 100px; }
.kpi-badge--up { background: rgba(40,200,64,.15); color: #28c840; }
.bi-section-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.25); margin-top: .1rem;
}
.deal-row {
  display: flex; align-items: center; gap: .4rem;
  padding: .38rem .5rem; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04);
}
.deal-name { font-size: .72rem; color: rgba(255,255,255,.7); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.deal-prob { width: 32px; height: 4px; background: rgba(255,255,255,.08); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.deal-prob-fill { height: 100%; background: linear-gradient(90deg, var(--color-blue), var(--color-cyan)); border-radius: 100px; }
.deal-close { font-size: .7rem; font-weight: 700; width: 26px; text-align: right; flex-shrink: 0; }
.deal-close--high { color: #28c840; }
.deal-close--mid { color: #febc2e; }
.deal-amt { font-size: .72rem; color: rgba(255,255,255,.45); width: 32px; text-align: right; flex-shrink: 0; }
.bar-fill--projected { background: linear-gradient(90deg, rgba(0,212,255,.7), rgba(0,212,255,.35)); }

/* ── Chatbot window (top of website tile) ── */
.web-mock__chat-window {
  background: #0a0e1f;
  border-bottom: 1px solid rgba(26,92,255,.15);
  display: flex; flex-direction: column;
}
.chat-win__header {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: rgba(26,92,255,.1);
  border-bottom: 1px solid rgba(26,92,255,.12);
}
.chat-win__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: #fff; font-weight: 700; flex-shrink: 0;
}
.chat-win__info { display: flex; flex-direction: column; gap: .08rem; }
.chat-win__name { font-size: .68rem; color: rgba(255,255,255,.8); font-weight: 600; }
.chat-win__status { font-size: .6rem; color: #28c840; }
.chat-win__body {
  padding: .6rem .65rem;
  display: flex; flex-direction: column; gap: .42rem;
}
.chat-msg {
  font-size: .7rem; line-height: 1.45;
  padding: .38rem .6rem; max-width: 88%;
}
.chat-msg--agent {
  background: rgba(26,92,255,.14); border: 1px solid rgba(26,92,255,.2);
  color: rgba(255,255,255,.7); align-self: flex-start;
  border-radius: 0 8px 8px 8px;
}
.chat-msg--user {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55); align-self: flex-end;
  border-radius: 8px 0 8px 8px;
}

/* ── Security status panel (website tile) ── */
.web-mock__security {
  background: #07091a;
  margin: .5rem .6rem .7rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(26,92,255,.22);
}
.sec-header {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .65rem;
  background: rgba(26,92,255,.12);
  border-bottom: 1px solid rgba(26,92,255,.18);
}
.sec-icon { font-size: .82rem; line-height: 1; }
.sec-title {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(26,92,255,.95); text-transform: uppercase;
}
.sec-row {
  display: flex; align-items: center; gap: .45rem;
  padding: .32rem .65rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.sec-check { color: #28c840; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.sec-label { flex: 1; font-size: .69rem; color: rgba(255,255,255,.55); }
.sec-status {
  font-size: .58rem; font-weight: 700; padding: .1rem .32rem;
  border-radius: 3px; letter-spacing: .06em; flex-shrink: 0;
}
.sec-status--on { background: rgba(40,200,64,.15); color: #28c840; }
.sec-status--blocked { background: rgba(255,77,109,.12); color: rgba(255,100,120,.9); }
.sec-footer {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .42rem; font-size: .64rem; color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.025);
}

/* ── Showcase AWS privacy badge ── */
.showcase__privacy-badge {
  display: flex; gap: .7rem; align-items: flex-start;
  background: rgba(7,9,26,.07); border: 1px solid rgba(26,92,255,.2);
  border-left: 3px solid var(--color-blue);
  border-radius: 0 10px 10px 0; padding: .9rem 1rem;
  margin: .5rem 0 1.5rem;
}
.showcase__privacy-badge .badge-icon { font-size: 1.1rem; line-height: 1; margin-top: .1rem; flex-shrink: 0; }
.showcase__privacy-badge strong { font-size: .84rem; color: var(--color-charcoal); font-weight: 700; display: block; margin-bottom: .25rem; }
.showcase__privacy-badge p { font-size: .79rem; color: rgba(26,26,46,.6); line-height: 1.6; margin: 0; }

/* ── Website + App dual tile ── */
.web-app-dual {
  display: flex; gap: .85rem; flex: 1; align-items: stretch;
}

/* Browser mockup */
.browser-mini {
  flex: 1.5; background: #07091a; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column;
}
.browser-mini__bar {
  display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem;
  background: #0f1326; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.browser-mini__dots { display: flex; gap: .22rem; }
.browser-mini__dot { width: 7px; height: 7px; border-radius: 50%; }
.browser-mini__dot:nth-child(1) { background: #ff5f57; }
.browser-mini__dot:nth-child(2) { background: #febc2e; }
.browser-mini__dot:nth-child(3) { background: #28c840; }
.browser-mini__url {
  flex: 1; height: 13px; background: rgba(255,255,255,.06); border-radius: 3px;
  font-size: .48rem; color: rgba(255,255,255,.28); display: flex; align-items: center;
  padding: 0 .45rem; font-family: monospace; letter-spacing: 0;
}
.browser-mini__body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* Nav strip */
.browser-mini__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .38rem .6rem; background: #fff; border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.browser-mini__logo { width: 34px; height: 6px; background: #1a5cff; border-radius: 3px; }
.browser-mini__nav-links { display: flex; align-items: center; gap: .28rem; }
.browser-mini__nav-link { width: 20px; height: 5px; background: rgba(0,0,0,.12); border-radius: 3px; }
.browser-mini__nav-cta { width: 26px; height: 11px; background: #1a5cff; border-radius: 3px; }

/* Hero section */
.browser-mini__hero {
  padding: .8rem .6rem .65rem;
  background: linear-gradient(160deg, #070B18 0%, #0f1630 100%);
  flex-shrink: 0;
}
.browser-mini__hero-tag { width: 36px; height: 4px; background: rgba(26,92,255,.65); border-radius: 2px; margin-bottom: .28rem; }
.browser-mini__hero-h1 { width: 90%; height: 8px; background: rgba(255,255,255,.82); border-radius: 3px; margin-bottom: .15rem; }
.browser-mini__hero-h1--accent { background: #1a5cff; width: 62%; margin-bottom: .28rem; }
.browser-mini__hero-sub { width: 82%; height: 4px; background: rgba(255,255,255,.22); border-radius: 2px; margin-bottom: .38rem; }
.browser-mini__hero-btns { display: flex; gap: .28rem; }
.browser-mini__hero-btn-p { width: 40px; height: 11px; background: #1a5cff; border-radius: 3px; }
.browser-mini__hero-btn-g { width: 32px; height: 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; }

/* Services cards row */
.browser-mini__services {
  background: #f4f6fb; padding: .55rem .55rem .45rem; flex-shrink: 0;
}
.browser-mini__svc-label {
  width: 52px; height: 4px; background: rgba(0,0,0,.15); border-radius: 2px; margin-bottom: .35rem;
}
.browser-mini__svc-cards { display: flex; gap: .32rem; }
.browser-mini__svc-card {
  flex: 1; background: #fff; border-radius: 5px; padding: .38rem .38rem .32rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.browser-mini__svc-icon {
  width: 14px; height: 14px; border-radius: 4px; margin-bottom: .22rem;
}
.bm-icon--blue { background: rgba(26,92,255,.2); }
.bm-icon--cyan { background: rgba(0,212,255,.18); }
.bm-icon--gold { background: rgba(201,168,76,.22); }
.browser-mini__svc-h { width: 80%; height: 5px; background: rgba(0,0,0,.2); border-radius: 2px; margin-bottom: .14rem; }
.browser-mini__svc-p { width: 95%; height: 3.5px; background: rgba(0,0,0,.08); border-radius: 2px; margin-bottom: .08rem; }
.bm-p--short { width: 70%; }

/* CTA strip */
.browser-mini__cta-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: .42rem .6rem; background: linear-gradient(90deg, #1a5cff, #0041cc);
  flex-shrink: 0; margin-top: auto;
}
.browser-mini__cta-text { width: 55%; height: 5px; background: rgba(255,255,255,.55); border-radius: 2px; }
.browser-mini__cta-btn { width: 30px; height: 11px; background: #fff; border-radius: 3px; opacity: .9; }

/* Phone mockup */
.phone-mini {
  flex: 1; background: #111827; border-radius: 20px; padding: 0 .4rem .35rem;
  border: 2px solid rgba(255,255,255,.12); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.phone-mini__status {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: .35rem .45rem .2rem; flex-shrink: 0;
}
.phone-mini__time { font-size: .42rem; color: rgba(255,255,255,.6); font-weight: 600; letter-spacing: 0; }
.phone-mini__status-icons { display: flex; align-items: center; gap: .3rem; }
.phone-mini__signal { display: flex; align-items: flex-end; gap: 1.5px; }
.phone-mini__signal span { width: 2px; border-radius: 1px; background: rgba(255,255,255,.55); }
.phone-mini__signal span:nth-child(1) { height: 4px; }
.phone-mini__signal span:nth-child(2) { height: 6px; }
.phone-mini__signal span:nth-child(3) { height: 8px; }
.phone-mini__battery { width: 10px; height: 5px; border: 1px solid rgba(255,255,255,.45); border-radius: 1.5px; position: relative; }
.phone-mini__battery::after {
  content: ''; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 65%;
  background: rgba(255,255,255,.55); border-radius: 1px;
}
.phone-mini__screen {
  flex: 1; width: 100%; background: #070b18; border-radius: 10px;
  padding: .5rem .42rem .0rem; display: flex; flex-direction: column; gap: .3rem; overflow: hidden;
}
.phone-mini__header {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
}
.phone-mini__app-icon {
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a5cff, #00d4ff);
  display: flex; align-items: center; justify-content: center;
  font-size: .42rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.phone-mini__header-info { display: flex; flex-direction: column; gap: 1.5px; }
.phone-mini__app-name { font-size: .46rem; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .01em; line-height: 1; }
.phone-mini__app-sub { font-size: .38rem; color: rgba(255,255,255,.35); line-height: 1; }
.phone-mini__kpi-card {
  background: rgba(26,92,255,.12); border: 1px solid rgba(26,92,255,.25);
  border-radius: 7px; padding: .38rem .42rem; flex-shrink: 0;
}
.phone-mini__kpi-row { display: flex; align-items: center; gap: .5rem; }
.phone-mini__kpi-block { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.phone-mini__kpi-val {
  font-size: .7rem; font-weight: 800; color: rgba(255,255,255,.9); line-height: 1;
}
.phone-mini__kpi-val--cyan { color: #00d4ff; }
.phone-mini__kpi-label { font-size: .38rem; color: rgba(255,255,255,.4); }
.phone-mini__kpi-divider { width: 1px; height: 18px; background: rgba(255,255,255,.1); flex-shrink: 0; }
.phone-mini__list-label {
  font-size: .38rem; font-weight: 700; color: rgba(255,255,255,.3);
  letter-spacing: .07em; text-transform: uppercase; flex-shrink: 0;
}
.phone-mini__activity { display: flex; flex-direction: column; gap: .2rem; flex-shrink: 0; }
.phone-mini__act-row {
  display: flex; align-items: center; gap: .28rem;
  padding: .24rem .3rem; background: rgba(255,255,255,.03); border-radius: 5px;
}
.phone-mini__act-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.phone-mini__act-dot--green { background: #28c840; }
.phone-mini__act-dot--blue { background: #1a5cff; }
.phone-mini__act-dot--yellow { background: #febc2e; }
.phone-mini__act-lines { flex: 1; display: flex; flex-direction: column; gap: 2.5px; }
.phone-mini__act-name { width: 75%; height: 4px; background: rgba(255,255,255,.35); border-radius: 2px; }
.phone-mini__act-desc { width: 90%; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; }
.phone-mini__act-time { width: 14px; height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; flex-shrink: 0; }
.phone-mini__bottom-nav {
  display: flex; justify-content: space-around; align-items: center;
  padding: .3rem 0 .18rem; border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto; flex-shrink: 0;
}
.phone-mini__nav-icon {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.phone-mini__nav-icon--active { background: rgba(26,92,255,.2); }
.phone-mini__nav-glyph { border-radius: 1px; }
.pni--home { width: 10px; height: 9px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 2px; }
.phone-mini__nav-icon--active .pni--home { border-color: #5b8fff; }
.pni--clients { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); }
.pni--docs { width: 7px; height: 9px; border: 1.5px solid rgba(255,255,255,.2); border-radius: 1.5px; }
.pni--settings { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); }
.phone-mini__home-bar { width: 30px; height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; margin-top: .28rem; flex-shrink: 0; }

/* ── Document Studio tile ── */
.doc-studio {
  background: #07091a; border-radius: 14px; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.06);
}
.doc-studio__bar {
  display: flex; align-items: center; gap: .45rem; padding: .55rem .85rem;
  background: #0f1326; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.doc-studio__body {
  padding: .85rem; display: flex; flex-direction: column; gap: .6rem; flex: 1;
}
.doc-preview {
  background: #fff; border-radius: 8px; padding: .6rem .75rem;
  border: 1px solid rgba(0,0,0,.1);
}
.doc-preview__header {
  border-bottom: 1.5px solid #1a5cff; padding-bottom: .32rem; margin-bottom: .42rem;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.doc-preview__co {
  font-size: .44rem; font-weight: 800; color: #1a5cff; letter-spacing: .07em; text-transform: uppercase;
}
.doc-preview__doc-type { font-size: .4rem; color: rgba(0,0,0,.35); }
.doc-field {
  display: flex; align-items: center; gap: .35rem; margin-bottom: .28rem;
}
.doc-field__label { font-size: .42rem; color: rgba(0,0,0,.4); min-width: 32px; font-weight: 600; }
.doc-field__line {
  flex: 1; height: 1px; background: rgba(0,0,0,.18); position: relative;
}
.doc-field__line--filled::after {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px;
  width: 70%; background: rgba(26,92,255,.35); border-radius: 1px;
}
.doc-templates { display: grid; grid-template-columns: 1fr 1fr; gap: .38rem; }
.doc-tmpl {
  background: #0f1326; border-radius: 6px; padding: .38rem .48rem;
  display: flex; align-items: center; gap: .32rem; border: 1px solid rgba(255,255,255,.06);
}
.doc-tmpl__icon {
  font-size: .44rem; font-weight: 800; padding: .18rem .26rem;
  border-radius: 3px; line-height: 1; flex-shrink: 0;
}
.doc-tmpl--word .doc-tmpl__icon { background: rgba(26,92,255,.25); color: #6b9fff; }
.doc-tmpl--pdf .doc-tmpl__icon { background: rgba(255,77,109,.2); color: #ff6b86; }
.doc-tmpl__name { font-size: .42rem; color: rgba(255,255,255,.48); line-height: 1.25; }