/* ==========================================================================
   Orbition NFC Cards - public profile
   Mobile first. Black and gold. Works LTR and RTL.
   ========================================================================== */

:root{
  --onc-black:#0A0A0A;
  --onc-surface:#121212;
  --onc-surface-2:#171717;
  --onc-border:#262626;
  --onc-border-2:#33302A;
  --onc-gold:#C9A24B;
  --onc-gold-2:#E3C57A;
  --onc-gold-soft:rgba(201,162,75,.14);
  --onc-text:#EDEDED;
  --onc-muted:#9A9A9A;
  --onc-muted-2:#6E6E6E;
  --onc-white:#FFFFFF;
  --onc-radius:16px;
  --onc-ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;background:var(--onc-black);}

body.onc-body{
  margin:0;
  background:var(--onc-black);
  color:var(--onc-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.onc-rtl{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
}

img{max-width:100%;height:auto;display:block;border:0;}
a{color:inherit;text-decoration:none;}

:focus-visible{outline:2px solid var(--onc-gold);outline-offset:3px;border-radius:8px;}

/* --------------------------------------------------------- card shell --- */
.onc-card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  background:var(--onc-surface);
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  overflow:hidden;
}
@media (min-width:560px){
  body.onc-body{padding:28px 16px;}
  .onc-card{
    min-height:0;
    border:1px solid var(--onc-border);
    border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
  }
}

/* -------------------------------------------------------------- cover --- */
.onc-cover{
  position:relative;
  height:160px;
  background:
    radial-gradient(520px 220px at 70% 0%, rgba(201,162,75,.22), transparent 65%),
    linear-gradient(160deg,#161310 0%,#0C0C0C 100%);
  overflow:hidden;
}
@media (min-width:560px){.onc-cover{height:190px;}}
.onc-cover__img{width:100%;height:100%;object-fit:cover;}
.onc-cover__wash{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(18,18,18,.96) 96%);
}

/* ----------------------------------------------------------- identity --- */
.onc-identity{
  padding:0 22px 22px;
  text-align:center;
  margin-top:-56px;
  position:relative;
}
.onc-avatar{
  width:112px;height:112px;
  margin:0 auto 16px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(140deg,var(--onc-gold-2),var(--onc-gold) 55%,#7A6330);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.onc-avatar__img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--onc-surface);
  background:var(--onc-surface-2);
}
.onc-name{
  margin:0 0 6px;
  font-size:26px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--onc-white);
}
.onc-title{
  margin:0 0 4px;
  color:var(--onc-gold);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
}
.onc-company{
  margin:0 0 14px;
  color:var(--onc-muted);
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.onc-bio{
  margin:0;
  color:var(--onc-muted);
  font-size:15px;
  line-height:1.65;
  max-width:44ch;
  margin-inline:auto;
}

/* ------------------------------------------------------------ buttons --- */
.onc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:50px;
  padding:13px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  text-align:center;
  transition:background-color .3s var(--onc-ease),
             border-color .3s var(--onc-ease),
             color .3s var(--onc-ease),
             transform .3s var(--onc-ease),
             box-shadow .3s var(--onc-ease);
}
.onc-btn:active{transform:scale(.98);}
.onc-ico{font-size:15px;line-height:1;}

.onc-btn--gold{
  background:linear-gradient(140deg,var(--onc-gold-2),var(--onc-gold));
  color:#1A1405;
  border-color:transparent;
}
.onc-btn--solid{
  background:var(--onc-white);
  color:var(--onc-black);
}
.onc-btn--outline{
  background:transparent;
  color:var(--onc-text);
  border-color:var(--onc-border-2);
}
.onc-btn--ghost{
  background:transparent;
  color:var(--onc-muted);
  border-color:var(--onc-border);
}

@media (hover:hover){
  .onc-btn--gold:hover{box-shadow:0 12px 30px rgba(201,162,75,.32);transform:translateY(-2px);}
  .onc-btn--solid:hover{background:#EDEDED;transform:translateY(-2px);}
  .onc-btn--outline:hover{border-color:var(--onc-gold);color:var(--onc-white);background:var(--onc-gold-soft);transform:translateY(-2px);}
}

/* ------------------------------------------------------------ actions --- */
.onc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0 22px 14px;
}
.onc-actions .onc-btn{flex:1 1 30%;min-width:96px;}

.onc-save{padding:0 22px 20px;}
.onc-save .onc-btn{width:100%;}

/* -------------------------------------------------------------- links --- */
.onc-links{padding:0 22px 8px;}
.onc-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  margin-bottom:10px;
  background:var(--onc-surface-2);
  border:1px solid var(--onc-border);
  border-radius:var(--onc-radius);
  transition:border-color .3s var(--onc-ease),transform .3s var(--onc-ease);
}
@media (hover:hover){
  .onc-link:hover{border-color:var(--onc-gold);transform:translateY(-2px);}
}
.onc-link__label{color:var(--onc-muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.onc-link__val{color:var(--onc-white);font-size:14px;font-weight:600;word-break:break-all;}

.onc-social{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:6px;
}
.onc-social__item{
  flex:1 1 calc(50% - 8px);
  min-width:120px;
  text-align:center;
  padding:12px 10px;
  font-size:14px;
  font-weight:600;
  color:var(--onc-text);
  background:var(--onc-surface-2);
  border:1px solid var(--onc-border);
  border-radius:12px;
  transition:border-color .3s var(--onc-ease),color .3s var(--onc-ease),
             background-color .3s var(--onc-ease),transform .3s var(--onc-ease);
}
@media (hover:hover){
  .onc-social__item:hover{
    border-color:var(--onc-gold);
    color:var(--onc-white);
    background:var(--onc-gold-soft);
    transform:translateY(-2px);
  }
}

/* ------------------------------------------------------------ gallery --- */
.onc-h2{
  margin:0 0 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--onc-muted-2);
}
.onc-gallery{padding:16px 22px 8px;}
.onc-gallery__grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.onc-gallery__item{
  flex:1 1 calc(50% - 8px);
  min-width:120px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--onc-border);
  transition:border-color .3s var(--onc-ease),transform .3s var(--onc-ease);
}
.onc-gallery__img{
  width:100%;
  height:130px;
  object-fit:cover;
  transition:transform .6s var(--onc-ease);
}
@media (hover:hover){
  .onc-gallery__item:hover{border-color:var(--onc-gold);transform:translateY(-2px);}
  .onc-gallery__item:hover .onc-gallery__img{transform:scale(1.06);}
}

/* ----------------------------------------------------------------- qr --- */
.onc-qr{padding:20px 22px 8px;text-align:center;}
.onc-qr__frame{
  width:180px;
  margin:0 auto;
  padding:12px;
  background:var(--onc-white);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.onc-qr__frame svg{width:100%;height:auto;display:block;}
.onc-qr__url{
  margin:12px 0 0;
  font-size:12px;
  color:var(--onc-muted-2);
  word-break:break-all;
  letter-spacing:.03em;
}

/* -------------------------------------------------------------- share --- */
.onc-share{padding:18px 22px 6px;}
.onc-share__row{display:flex;flex-wrap:wrap;gap:8px;}
.onc-share__row .onc-btn{flex:1 1 calc(50% - 8px);min-width:120px;min-height:46px;font-size:14px;}

/* ------------------------------------------------------------- footer --- */
.onc-foot{
  padding:22px;
  margin-top:10px;
  border-top:1px solid var(--onc-border);
  text-align:center;
}
.onc-foot p{margin:0 0 6px;}
.onc-views{color:var(--onc-muted);font-size:13px;}
.onc-cardid{
  color:var(--onc-muted-2);
  font-size:11px;
  letter-spacing:.22em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.onc-brand a{
  color:var(--onc-gold);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
}

/* ------------------------------------------------------------ message --- */
.onc-body--message{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
.onc-message{text-align:center;max-width:420px;}
.onc-message h1{font-size:22px;margin:0 0 10px;color:var(--onc-white);}
.onc-message p{color:var(--onc-muted);margin:0 0 20px;}

/* ---------------------------------------------------------------- rtl --- */
body.onc-rtl .onc-link{flex-direction:row-reverse;}
body.onc-rtl .onc-cardid{letter-spacing:normal;}

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
  .onc-btn:hover,.onc-link:hover,.onc-social__item:hover,.onc-gallery__item:hover{transform:none !important;}
  .onc-gallery__item:hover .onc-gallery__img{transform:none !important;}
}

/* -------------------------------------------------------------- print --- */
@media print{
  body.onc-body{background:#fff;color:#000;padding:0;}
  .onc-card{box-shadow:none;border:0;max-width:100%;}
  .onc-actions,.onc-save,.onc-share,.onc-cover{display:none !important;}
  .onc-qr__frame{box-shadow:none;border:1px solid #ccc;}
  .onc-name,.onc-title{color:#000;}
}

/* ------------------------------------------------- language switch --- */
.onc-lang{
  position:absolute;
  top:14px;
  inset-inline-end:14px;          /* right in LTR, left in RTL */
  z-index:3;
  display:flex;
  gap:4px;
  padding:4px;
  background:rgba(10,10,10,.55);
  border:1px solid rgba(201,162,75,.35);
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.onc-lang__btn{
  min-width:38px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--onc-muted);
  transition:background-color .3s var(--onc-ease),color .3s var(--onc-ease);
}
.onc-lang__btn.is-on{
  background:linear-gradient(140deg,var(--onc-gold-2),var(--onc-gold));
  color:#1A1405;
}
@media (hover:hover){
  .onc-lang__btn:not(.is-on):hover{color:var(--onc-white);background:rgba(255,255,255,.08);}
}

/* --------------------------------------------------- social icons --- */
.onc-social__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.onc-social__item svg.onc-social__icon{
  width:17px !important;
  height:17px !important;
  max-width:17px;
  max-height:17px;
  min-width:17px;
  flex:0 0 17px;
  fill:var(--onc-gold);
  transition:fill .3s var(--onc-ease),transform .3s var(--onc-ease);
}
@media (hover:hover){
  .onc-social__item:hover .onc-social__icon{fill:var(--onc-white);transform:scale(1.08);}
}

/* -------------------------------------------------------- qr frame --- */
/* Contrast is critical for scanning: never tint these. */
.onc-qr__frame{background:#FFFFFF;}
.onc-qr__frame svg{background:#FFFFFF;}
.onc-qr__frame .qr-data.dark,
.onc-qr__frame path.dark{fill:#000000 !important;}
.onc-qr__frame .qr-data.light,
.onc-qr__frame path.light{fill:#FFFFFF !important;}