:root{
  --bg: #101114;
  --glow: #44ADE2;
  --glow2: #354254;
  --text: #f5f6f7;
  --muted: #aeb3ba;
  --card: #16181c;
  --card-border: rgba(255,255,255,0.09);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background: var(--bg);
  color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Photo carousel background (the page-wide motif) --- */
.carousel-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:#101114;
}
.carousel-bg .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.06);
  transition: opacity 1.6s ease;
  filter: saturate(1.05) brightness(0.9);
}
.carousel-bg .slide.active{
  opacity:1;
  animation: kenburns 9s ease-in-out forwards;
}
@keyframes kenburns{
  from{ transform: scale(1.0); }
  to{ transform: scale(1.09); }
}
.carousel-overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1100px 550px at 12% -8%, rgba(68,173,226,0.18), transparent 60%),
    radial-gradient(900px 520px at 100% 105%, rgba(53,66,84,0.30), transparent 60%),
    linear-gradient(180deg, rgba(10,11,13,0.72) 0%, rgba(10,11,13,0.82) 45%, rgba(10,11,13,0.93) 100%);
}
.carousel-dots{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:7px;
}
.carousel-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.28);
  transition: background .25s ease, transform .25s ease;
}
.carousel-dots span.active{
  background: var(--glow);
  transform:scale(1.3);
}

.content{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 20px 60px;
}
.lang-switch{
  display:flex;
  gap:6px;
  margin-bottom:20px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--card-border);
  border-radius:999px;
  padding:4px;
  backdrop-filter: blur(6px);
}
.lang-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  padding:6px 14px;
  border-radius:999px;
  cursor:pointer;
  transition: background .18s ease, color .18s ease;
}
.lang-btn.active{
  background: rgba(68,173,226,0.18);
  color: var(--text);
}
header{
  width:100%;
  max-width:520px;
  text-align:center;
  margin-bottom:30px;
}
.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  filter: drop-shadow(0 0 14px rgba(0,0,0,0.5));
}
.logo img{
  height:34px;
  width:auto;
  border-radius:6px;
  background:rgba(255,255,255,0.92);
  padding:4px 8px;
}
.logo-word{
  font-size:19px;
  font-weight:700;
  letter-spacing:0.02em;
}
.logo-word b{ color: var(--glow); }
.division{
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.tagline{
  margin-top:10px;
  color:var(--text);
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.85;
  border-top:1px solid var(--card-border);
  padding-top:10px;
  display:inline-block;
}
main{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.00)), var(--card);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:22px 24px;
  text-decoration:none;
  color:var(--text);
  display:block;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.card:active{ transform: scale(0.98); }
.card:hover{
  border-color: rgba(68,173,226,0.4);
  box-shadow: 0 0 0 1px rgba(68,173,226,0.08), 0 8px 30px -10px rgba(68,173,226,0.28);
}
.card-title{
  font-size:18px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.card-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}
.arrow{
  color: var(--glow);
  font-size:20px;
  flex-shrink:0;
  transition: transform .18s ease;
}
.card:hover .arrow{ transform: translateX(3px); }

#contactPanel{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
#contactPanel.open{
  max-height:600px;
}
.contact-inner{
  padding-top:16px;
  margin-top:16px;
  border-top:1px solid var(--card-border);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.contact-row{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.contact-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--muted);
}
.contact-value{
  font-size:15px;
  color:var(--text);
}
.contact-value a{
  color: var(--glow);
  text-decoration:none;
}
.contact-value a:hover{ text-decoration:underline; }

.contact-person{
  display:flex;
  align-items:center;
  gap:12px;
}
.contact-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(68,173,226,0.4);
  flex-shrink:0;
}
.contact-avatar-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(68,173,226,0.12);
  color: var(--glow);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
}

.vcf-btn{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 18px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(68,173,226,0.4);
  color:var(--text);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  text-align:center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vcf-btn:hover{
  background: rgba(68,173,226,0.1);
  border-color: rgba(68,173,226,0.65);
  box-shadow: 0 0 0 1px rgba(68,173,226,0.08), 0 8px 24px -10px rgba(68,173,226,0.4);
}
.vcf-btn::before{
  content:"↓";
  color:var(--glow);
  font-weight:700;
}

.wa-btn{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 18px;
  border-radius:12px;
  background: rgba(37,211,102,0.08);
  border:1px solid rgba(37,211,102,0.4);
  color:var(--text);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  text-align:center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wa-btn:hover{
  background: rgba(37,211,102,0.14);
  border-color: rgba(37,211,102,0.65);
  box-shadow: 0 0 0 1px rgba(37,211,102,0.08), 0 8px 24px -10px rgba(37,211,102,0.35);
}
.wa-btn::before{
  content:"💬";
}

.brands-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:4px;
}
.brands-strip span{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.03em;
  color: var(--muted);
  border:1px solid var(--card-border);
  border-radius:999px;
  padding:4px 10px;
  background: rgba(255,255,255,0.03);
}

footer{
  margin-top:40px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
footer a{ color:var(--muted); }
footer .credit{
  margin-top:8px;
  font-size:11px;
  opacity:0.75;
}
footer .credit a{
  color: var(--glow);
  text-decoration:none;
  font-weight:600;
}
footer .credit a:hover{ text-decoration:underline; }