:root{
  --text:#f5efe4;
  --text-dim:#a3adc8;
  --text-mute:#6b7592;
  --line:rgba(245,239,228,0.10);
  --line-soft:rgba(245,239,228,0.05);
  --line-strong:rgba(245,239,228,0.18);
  --shadow:0 30px 60px -25px rgba(0,0,0,0.5);
  --shadow-sm:0 8px 24px -8px rgba(0,0,0,0.4);
  --max:1320px;
  --pad:clamp(20px,4vw,64px);

  --teg-grad:linear-gradient(135deg,#3d1843 0%,#7a3658 35%,#d4783e 70%,#f0c948 100%);
  --tenet-bg:#0a1130;
  --tenet-bg-2:#0d1838;
  --tenet-text:#f5efe4;
  --tenet-dim:#8b94b3;
  --tenet-mute:#5a6587;
  --tenet-line:rgba(245,239,228,0.12);
  --tenet-gold:#d4a574;
  --tenet-gold-bright:#e8c890;

  --bg:#0a1632;
  --bg-elev:#0e1c3e;
  --bg-deep:#070f24;
  --bg-card:#13234c;
  --bg-warm:#0c1838;
  --accent:#d4a574;
  --accent-soft:#e8c890;
  --tint:rgba(212,165,116,0.08);
  --tint-strong:rgba(212,165,116,0.18);
  --panel-grad:linear-gradient(135deg,#13234c 0%,#0a1632 100%);
}

[data-mode="her"]{
  --bg:#0a1632;
  --bg-elev:#0e1c3e;
  --bg-deep:#070f24;
  --bg-card:#13234c;
  --bg-warm:#0c1838;
  --text:#f5efe4;
  --text-dim:#a3adc8;
  --text-mute:#6b7592;
  --accent:#d4a574;
  --accent-soft:#e8c890;
  --tint:rgba(212,165,116,0.08);
  --tint-strong:rgba(212,165,116,0.18);
  --panel-grad:linear-gradient(135deg,#13234c 0%,#0a1632 100%);
  --line:rgba(245,239,228,0.10);
  --line-soft:rgba(245,239,228,0.05);
  --line-strong:rgba(245,239,228,0.18);
}

[data-mode="him"]{
  --bg:#0a2e1f;
  --bg-elev:#0d3a28;
  --bg-deep:#072518;
  --bg-card:#11472f;
  --bg-warm:#0b3324;
  --text:#f5efe4;
  --text-dim:#9eb6a5;
  --text-mute:#6a8475;
  --accent:#c9a87c;
  --accent-soft:#dabd92;
  --tint:rgba(201,168,124,0.08);
  --tint-strong:rgba(201,168,124,0.18);
  --panel-grad:linear-gradient(135deg,#11472f 0%,#0a2e1f 100%);
  --line:rgba(245,239,228,0.10);
  --line-soft:rgba(245,239,228,0.05);
  --line-strong:rgba(245,239,228,0.18);
}

.tech__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}

.tech-card {
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:36px 32px;
  position:relative;
  transition:all 0.4s;
  overflow:hidden;
}

.tech-card::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity 0.4s;
}

.tech-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--line-strong);
}

.tech-card:hover::before {
  opacity:1;
}

.tech-card.featured {
  background:var(--panel-grad);
  grid-column:span 2;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:center;
}

.tech-card.featured .tech-card__visual {
  aspect-ratio:1.2;
  background:radial-gradient(circle at 30% 30%,var(--tint-strong) 0%,transparent 60%),var(--bg-deep);
  border:1px solid var(--line);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tech-card.featured .tech-card__visual::before {
  content:"";
  position:absolute;
  inset:30px;
  border:1px solid var(--accent);
  opacity:0.3;
}

.tech-card.featured .tech-card__visual::after {
  content:attr(data-mark);
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(64px,10vw,140px);
  font-weight:300;
  font-style:italic;
  color:var(--accent);
}

.tech-card.featured .tech-card__visual.has-image::before,
.tech-card.featured .tech-card__visual.has-image::after {
  display:none !important;
}

.tech-card__visual-img {
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}

.tech-card__tag {
  font-size:10px;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
  display:block;
  font-weight:500;
}

.tech-card__name {
  font-family:'Cormorant Garamond',serif;
  font-size:36px;
  font-weight:400;
  line-height:1.05;
  margin-bottom:14px;
  color:var(--text);
}

.tech-card__sub {
  font-style:italic;
  color:var(--text-dim);
  font-size:14px;
  margin-bottom:20px;
  font-family:'Cormorant Garamond',serif;
}

.tech-card__desc {
  font-size:14px;
  color:var(--text-dim);
  line-height:1.7;
  margin-bottom:24px;
}

.tech-card__feats {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}

.tech-card__feats span {
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#e9d5ff;
  padding:6px 12px;
  border:1px solid rgba(168, 85, 247, 0.25);
  background:rgba(107, 33, 168, 0.15);
}

.tech-card__more {
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.tech-card__new {
  position:absolute;
  top:24px;
  right:24px;
  font-size:9px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--bg-deep);
  padding:5px 10px;
  font-weight:600;
}

@media(max-width:880px){
  .tech-card.featured {
    grid-column:span 1;
    grid-template-columns:1fr;
  }
}