
:root{
  --bg:#000090;
  --bg-deep:#000090;
  --panel:#000063;
  --panel-2:#000090;
  --panel-3:#000063;
  --blue:#004be8;
  --blue-2:#004be8;
  --blue-soft:#8fb9ff;
  --white:#fff;
  --text:#fff;
  --muted:rgba(255,255,255,.78);
  --border:#004be8;
  --border-strong:#004be8;
  --shadow:none;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:#000090;
}
body{
  margin:0;
  min-width:320px;
  min-height:100vh;
  color:var(--text);
  background:#000090;
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{display:none}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #fff;outline-offset:3px}
svg{display:block;width:100%;height:100%}

.page{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding-bottom:70px;
}

/* slim rail */
.top-rail{
  overflow:hidden;
  min-height:34px;
  background:#160d87;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.top-track{
  display:flex;
  width:max-content;
  animation:railMove 34s linear infinite;
}
.top-track span{
  padding:8px 22px;
  color:#d7e2ff;
  white-space:nowrap;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.top-track span::after{
  content:"•";
  margin-left:22px;
  color:#7da7ff;
}
@keyframes railMove{to{transform:translateX(-50%)}}

/* header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 0 16px;
}
.brand-row{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.logo-trace{
  position:relative;
  width:138px;
  height:50px;
  flex-shrink:0;
}
.logo-trace::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:14px;
  background:conic-gradient(
    from 0deg,
    transparent 0 15%,
    #fff 24%,
    var(--blue) 34%,
    transparent 44% 64%,
    #86adff 73%,
    transparent 82%
  );
  animation:logoFlow 5.5s linear infinite;
}
.logo-trace::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:12px;
  background:#07056c;
}
@keyframes logoFlow{to{transform:rotate(360deg)}}

.xnxx-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:#fff;
  font-weight:900;
  letter-spacing:-1.6px;
}
.compact-logo{
  position:absolute;
  inset:5px;
  z-index:2;
  font-size:1.45rem;
}
.metallic-logo{
  background:linear-gradient(180deg,#fff 0%,#edf5ff 20%,#bfd5ff 48%,#6c94e3 74%,#eef5ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 2px rgba(0,0,55,.4);
}
.brand-kicker{
  display:block;
  margin-bottom:3px;
  color:#9dbbff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.site-header h1{
  margin:0;
  font-size:1.55rem;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.035em;
}
.site-header p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.88rem;
}
.adult-status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#0f39b6;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.adult-status span{
  width:8px;height:8px;
  border-radius:50%;
  background:#83adff;
}

/* compact hero, readable */
.browser-hero{
  margin-top:6px;
  padding:26px 28px;
  border:1px solid var(--border);
  border-radius:18px;
  background:
    radial-gradient(circle at 75% 0,rgba(7,85,246,.22),transparent 280px),
    linear-gradient(145deg,#0b0c86,#070568);
  box-shadow:var(--shadow);
}
.compact-xnxx-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.hero-brand{
  display:flex;
  align-items:center;
  gap:28px;
}
.hero-metal-logo{
  flex-shrink:0;
  font-size:2.25rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.06em;
  white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,#e9f2ff 18%,#b8d0ff 50%,#6c95e5 76%,#eef5ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 3px 5px rgba(0,0,55,.34);
}
.hero-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#9dbbff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.hero-copy h2{
  margin:0;
  font-size:2rem;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.04em;
}
.hero-copy h2 span{
  color:#9ab8ff;
  font-weight:500;
}
.hero-copy p{
  margin:10px 0 0;
  color:#ced9f4;
  font-size:1rem;
  line-height:1.55;
}
.hero-route-mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.mini-route{
  padding:16px;
  border-radius:12px;
  background:linear-gradient(145deg,#164dd7,#0f3bb0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.mini-route:nth-child(2){
  background:linear-gradient(145deg,#12369e,#0c2b85);
}
.mini-route small{
  display:block;
  color:#a9c4ff;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
}
.mini-route strong{
  display:block;
  margin-top:4px;
  font-size:1.05rem;
}
.mini-route span{
  display:block;
  margin-top:4px;
  color:#d0dcf7;
  font-size:.82rem;
}

/* section headings */
.website-section,.app-section{margin-top:34px}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.section-heading span{
  color:#9ebcff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.section-heading h2{
  margin:5px 0 0;
  font-size:1.75rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.03em;
}
.section-heading p{
  margin:0;
  color:#aab9db;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
}

/* primary cards */
.primary-site-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.destination-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:18px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 95% 0,rgba(41,112,255,.22),transparent 250px),
    linear-gradient(145deg,#123db9,#0a277c 72%,#071a62);
  box-shadow:var(--shadow);
}
.gold-card{
  background:
    radial-gradient(circle at 95% 0,rgba(30,91,233,.22),transparent 250px),
    linear-gradient(145deg,#0d329f,#08247c 72%,#061a5f);
}
.destination-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-logo-wrap,.gold-logo-wrap{
  min-width:190px;
  min-height:68px;
  display:grid;
  place-items:center;
  padding:10px 16px;
  border-radius:10px;
  background:#02034c;
}
.large-logo{
  font-size:1.7rem;
  white-space:nowrap;
}
.gold-logo{
  display:flex;
  align-items:center;
  gap:4px;
  color:#eef4ff;
  font-size:1.45rem;
  font-weight:900;
}
.gold-logo b{
  margin-left:7px;
  padding:5px 7px;
  border-radius:5px;
  background:#0d52ed;
  color:#fff;
  font-size:.62rem;
}
.gold-x{color:#9fbdff}
.route-badge{
  padding:7px 9px;
  border-radius:999px;
  background:#05066b;
  border:1px solid rgba(255,255,255,.14);
  color:#e5ecff;
  font-size:.66rem;
  font-weight:700;
}
.destination-copy{margin-top:24px}
.destination-kicker{
  display:block;
  margin-bottom:7px;
  color:#9ebcff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
}
.destination-copy h3{
  margin:0;
  font-size:1.85rem;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.035em;
}
.destination-copy p{
  margin:14px 0 0;
  color:#d0dbf5;
  font-size:1rem;
  line-height:1.7;
}
.destination-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:22px 0 16px;
}
.destination-meta span{
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  color:#c3d0ee;
  font-size:.76rem;
  font-weight:600;
  text-transform:uppercase;
}
.destination-meta b{
  margin-bottom:3px;
  color:#fff;
  font-size:.67rem;
}

/* flowing CTA */
.cta-trace{
  position:relative;
  overflow:hidden;
  padding:2px;
  border-radius:14px;
}
.cta-trace::before{
  content:"";
  position:absolute;
  inset:-120%;
  background:conic-gradient(
    from 0deg,
    transparent 0 14%,
    #fff 22%,
    #78a5ff 30%,
    transparent 38% 60%,
    #0d5eff 70%,
    #fff 76%,
    transparent 84%
  );
  animation:ctaFlow 4.2s linear infinite;
}
.cta-trace::after{
  content:"";
  position:absolute;
  inset:2px;
  z-index:1;
  border-radius:12px;
  background:#0a2f9a;
}
@keyframes ctaFlow{to{transform:rotate(360deg)}}

.destination-cta{
  position:relative;
  z-index:2;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(135deg,#0e5df5,#174fda);
  color:#fff;
  transition:transform .2s var(--ease),filter .2s ease;
}
.destination-cta:hover{
  transform:translateY(-3px);
  filter:brightness(1.08);
}
.gold-cta{
  background:linear-gradient(135deg,#164cce,#0d359f);
}
.destination-cta small{
  display:block;
  color:#cddaff;
  font-size:.76rem;
  font-weight:600;
}
.destination-cta strong{
  display:block;
  margin-top:2px;
  font-size:1.08rem;
  font-weight:800;
}
.destination-cta>b{
  font-size:1.35rem;
}

/* route explanation */
.route-info{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:22px;
  margin-top:18px;
  padding:28px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#07066c;
}
.route-copy>span{
  color:#9ebcff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
}
.route-copy h2{
  margin:6px 0 0;
  font-size:1.55rem;
  line-height:1.2;
}
.route-copy p{
  margin:12px 0 0;
  color:#c7d3ee;
  font-size:.96rem;
  line-height:1.7;
}
.route-stat-grid{display:grid;gap:10px}
.route-stat-grid div{
  padding:14px 15px;
  border-radius:10px;
  background:#10349c;
  border:1px solid rgba(255,255,255,.1);
}
.route-stat-grid small{
  color:#9fbcff;
  font-size:.68rem;
  font-weight:700;
}
.route-stat-grid strong{
  display:block;
  margin-top:3px;
  font-size:.92rem;
}
.route-stat-grid span{
  display:block;
  margin-top:3px;
  color:#c6d3ef;
  font-size:.78rem;
}

/* app section */
.app-section{margin-top:42px}
.app-panel{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:34px;
  padding:30px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#070665;
}
.app-phone{
  min-height:320px;
  display:grid;
  place-items:center;
}
.phone-shell{
  position:relative;
  width:142px;
  height:282px;
  padding:8px;
  border-radius:24px;
  border:2px solid #4269d6;
  background:#050512;
  transform:rotate(-3deg);
  box-shadow:0 22px 44px rgba(0,0,30,.35);
}
.phone-speaker{
  position:absolute;
  left:50%;top:10px;
  width:42px;height:4px;
  transform:translateX(-50%);
  background:#354b83;
  border-radius:4px;
}
.phone-screen{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(180deg,#0a1a66,#050512);
}
.phone-logo{
  position:absolute;
  top:38px;
  left:50%;
  transform:translateX(-50%);
  font-size:.82rem;
}
.android-mark{
  width:72px;
  height:62px;
  margin-bottom:12px;
  color:#4782ff;
}
.phone-screen strong{font-size:.68rem}
.phone-screen>span{
  margin-top:3px;
  color:#93b3ff;
  font-size:.58rem;
}
.app-eyebrow{
  display:block;
  margin-bottom:6px;
  color:#9ebcff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
}
.app-copy h3{
  margin:0;
  font-size:1.8rem;
  line-height:1.15;
}
.app-copy p{
  margin:13px 0 0;
  color:#cad6f0;
  font-size:.98rem;
  line-height:1.68;
}
.app-highlights{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:20px 0 13px;
}
.app-highlights span{
  min-height:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
  border-radius:9px;
  background:#10349c;
  border:1px solid rgba(255,255,255,.1);
  color:#c6d2ee;
  font-size:.76rem;
}
.app-highlights b{
  margin-bottom:2px;
  color:#fff;
  font-size:.66rem;
}
.download-shell{
  position:relative;
  overflow:hidden;
  padding:2px;
  border-radius:14px;
}
.download-shell::before{
  content:"";
  position:absolute;
  inset:-120%;
  background:conic-gradient(
    from 0deg,
    transparent 0 14%,
    #fff 22%,
    #6f9fff 30%,
    transparent 38% 60%,
    #0755f6 70%,
    #fff 77%,
    transparent 85%
  );
  animation:ctaFlow 4.4s linear infinite;
}
.download-shell::after{
  content:"";
  position:absolute;
  inset:2px;
  z-index:1;
  border-radius:12px;
  background:#0a2f9a;
}
.download-cta{
  position:relative;
  z-index:2;
  min-height:72px;
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-radius:12px;
  background:linear-gradient(135deg,#0e5df5,#174fda);
  color:#fff;
  transition:transform .2s var(--ease),filter .2s ease;
}
.download-cta:hover{
  transform:translateY(-3px);
  filter:brightness(1.08);
}
.download-icon{
  width:42px;height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.18);
  font-size:1.25rem;
}
.download-cta small{
  display:block;
  color:#cbd9ff;
  font-size:.74rem;
}
.download-cta strong{
  display:block;
  margin-top:2px;
  font-size:1.03rem;
}
.download-cta>b{
  padding:5px 7px;
  border-radius:6px;
  background:rgba(255,255,255,.1);
  font-size:.72rem;
}
.app-note{
  margin:12px 0 0!important;
  padding:12px 14px;
  border-radius:10px;
  background:#10349c;
  border:1px solid rgba(255,255,255,.1);
  color:#cad6f0!important;
  font-size:.82rem!important;
  line-height:1.55!important;
}
.app-note strong{color:#fff}

/* install + support */
.install-panel{
  margin-top:16px;
  padding:24px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#070660;
}
.install-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.install-step{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:11px;
  min-height:126px;
  padding:15px;
  border-radius:10px;
  background:#10349c;
  border:1px solid rgba(255,255,255,.1);
}
.step-no{
  width:34px;height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#0e56ea;
  font-size:.7rem;
  font-weight:800;
}
.install-step h3{
  margin:0;
  font-size:.88rem;
}
.install-step p{
  margin:6px 0 0;
  color:#c7d3ef;
  font-size:.78rem;
  line-height:1.55;
}
.install-alert{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  margin-top:12px;
  padding:13px 15px;
  border-radius:10px;
  background:#10349c;
}
.alert-icon{
  width:36px;height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#0e56ea;
  font-weight:900;
}
.install-alert p{
  margin:0;
  color:#c8d5ef;
  font-size:.8rem;
}
.install-alert strong{color:#fff}

.support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.support-card{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:15px;
  padding:18px;
  border-radius:12px;
  background:#070660;
  border:1px solid var(--border);
}
.support-number{
  width:58px;height:58px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#0f48cf;
  font-size:.78rem;
  font-weight:800;
}
.support-card small{
  color:#9ebcff;
  font-size:.68rem;
  font-weight:700;
}
.support-card h3{
  margin:3px 0 0;
  font-size:1rem;
}
.support-card p{
  margin:7px 0 0;
  color:#c8d4ef;
  font-size:.85rem;
  line-height:1.55;
}

.footer{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:#9fb0d6;
  text-align:center;
  font-size:.76rem;
}
.footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-bottom:8px;
}
.footer-logo{
  font-size:.85rem;
}
.footer-brand>strong{
  color:#bbcaec;
  font-size:.72rem;
}

/* responsive */
@media(max-width:900px){
  .compact-xnxx-hero{grid-template-columns:1fr}
  .primary-site-grid,
  .route-info,
  .app-panel,
  .support-grid{grid-template-columns:1fr}
  .install-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .page{width:min(100% - 18px,1180px)}
  .top-rail{display:none}
  .site-header{padding:12px 0}
  .brand-kicker{display:none}
  .site-header p{display:none}
  .logo-trace{width:112px;height:42px}
  .compact-logo{font-size:1.22rem}
  .site-header h1{font-size:1.1rem}
  .browser-hero{padding:18px}
  .hero-brand{display:block}
  .hero-metal-logo{font-size:1.9rem;margin-bottom:14px}
  .hero-copy h2{font-size:1.6rem}
  .hero-copy p{font-size:.92rem}
  .hero-route-mini{grid-template-columns:1fr 1fr;margin-top:16px}
  .mini-route{padding:13px}
  .section-heading{display:block}
  .section-heading p{margin-top:5px}
  .destination-card{padding:20px}
  .destination-top{align-items:flex-start}
  .site-logo-wrap,.gold-logo-wrap{min-width:145px;min-height:56px}
  .large-logo{font-size:1.35rem}
  .destination-copy h3{font-size:1.6rem}
  .destination-copy p{font-size:.94rem}
  .destination-meta{grid-template-columns:1fr}
  .app-panel{padding:22px}
  .app-highlights{grid-template-columns:1fr 1fr}
  .install-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .top-track,
  .logo-trace::before,
  .cta-trace::before,
  .download-shell::before{
    animation:none!important;
  }
  *{transition-duration:.001ms!important}
}


/* =========================================================
   XNXX.FR V5 BALANCE + SUBTLE LOGO TRACE
========================================================= */

/* Replace propeller-like logo animation with a subtle border tracer */
.logo-trace{
  position:relative;
  width:138px;
  height:50px;
  flex-shrink:0;
  padding:1px;
  border-radius:14px;
  background:#07056c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  overflow:hidden;
}

.logo-trace::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  padding:1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 34%,
      rgba(255,255,255,.92) 48%,
      #76a3ff 52%,
      transparent 66%,
      transparent 100%
    );
  background-size:220% 100%;
  background-position:160% 0;
  animation:logoEdgeSweep 6.8s cubic-bezier(.45,0,.55,1) infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.logo-trace::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:12px;
  background:linear-gradient(180deg,#0a0876,#07056c);
  z-index:0;
}

@keyframes logoEdgeSweep{
  0%,14%{background-position:160% 0;opacity:0}
  22%{opacity:.8}
  55%{background-position:-70% 0;opacity:.8}
  66%,100%{background-position:-70% 0;opacity:0}
}

.compact-logo{
  z-index:2;
}

/* Equal-height route cards */
.primary-site-grid{
  align-items:stretch;
}

.destination-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.destination-top{
  flex:0 0 auto;
}

.destination-copy{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.destination-copy h3{
  min-height:42px;
  display:flex;
  align-items:flex-end;
}

.destination-copy p{
  max-width:100%;
}

.destination-copy p:first-of-type{
  min-height:108px;
}

.destination-copy p:nth-of-type(2){
  min-height:108px;
}

.destination-meta{
  margin-top:auto;
}

.cta-trace{
  margin-top:0;
}

.destination-cta{
  min-height:72px;
}

/* Keep both logo blocks and top rows aligned */
.site-logo-wrap,
.gold-logo-wrap{
  width:190px;
  min-width:190px;
  height:68px;
  min-height:68px;
}

.destination-top{
  min-height:70px;
}

/* Slightly reduce contrast variation between the two cards */
.main-card,
.gold-card{
  min-height:650px;
}

.main-card{
  background:
    radial-gradient(circle at 95% 0,rgba(41,112,255,.16),transparent 250px),
    linear-gradient(145deg,#123db9,#0b2c8a 72%,#071f70);
}

.gold-card{
  background:
    radial-gradient(circle at 95% 0,rgba(41,112,255,.14),transparent 250px),
    linear-gradient(145deg,#1038aa,#092980 72%,#071e69);
}

/* Balance route badge widths visually */
.route-badge{
  min-width:92px;
  text-align:center;
}

/* CTA tracers remain lively, logo tracer stays subtle */
.cta-trace::before,
.download-shell::before{
  animation-duration:4.8s;
}

/* Desktop heading rhythm */
.destination-copy{
  padding-right:2px;
}

/* Responsive balance */
@media(max-width:900px){
  .main-card,
  .gold-card{
    min-height:0;
  }

  .destination-copy h3,
  .destination-copy p:first-of-type,
  .destination-copy p:nth-of-type(2){
    min-height:0;
  }
}

@media(max-width:620px){
  .logo-trace{
    width:112px;
    height:42px;
  }

  .site-logo-wrap,
  .gold-logo-wrap{
    width:150px;
    min-width:150px;
    height:58px;
    min-height:58px;
  }

  .destination-top{
    min-height:60px;
  }

  .route-badge{
    min-width:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .logo-trace::before{
    animation:none!important;
    opacity:.35;
    background-position:50% 0;
  }
}


/* XNXX.FR enriched content layout */
.access-guide{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  margin-top:18px;
  padding:28px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(145deg,#0b0b75,#07065f);
}
.access-guide-copy>span{
  color:#ffe86b;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.access-guide-copy h2{
  margin:6px 0 0;
  color:#ffd400;
  font-size:1.55rem;
  line-height:1.2;
}
.access-guide-copy p{
  margin:12px 0 0;
  color:#cdd8f2;
  font-size:.96rem;
  line-height:1.7;
}
.access-guide-grid{
  display:grid;
  gap:10px;
}
.access-guide-grid div{
  padding:15px 16px;
  border-radius:10px;
  background:#10349c;
  border:1px solid rgba(255,255,255,.1);
}
.access-guide-grid b{
  display:block;
  color:#ffd400;
  font-size:.9rem;
}
.access-guide-grid span{
  display:block;
  margin-top:3px;
  color:#c7d3ef;
  font-size:.78rem;
}
.destination-card{
  min-height:720px;
}
.destination-copy p{
  line-height:1.74;
}
@media(max-width:900px){
  .access-guide{grid-template-columns:1fr}
  .destination-card{min-height:0}
}


/* =========================================================
   XNXX.FR V7 BALANCED HEADER + YELLOW TYPOGRAPHY
========================================================= */

:root{
  --yellow:#ffd400;
  --yellow-soft:#ffe86b;
  --yellow-deep:#e0b600;
}

/* Balanced header */
.site-header{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr);
  align-items:center;
  gap:34px;
  padding:20px 0 18px;
}

.brand-row{
  min-width:0;
}

.header-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
}

.header-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:390px;
}

.header-points span{
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(8,49,163,.72);
  border:1px solid rgba(255,255,255,.11);
  color:#d4def6;
  font-size:.72rem;
  line-height:1.2;
}

.header-points b{
  margin-bottom:4px;
  color:var(--yellow);
  font-size:.65rem;
  letter-spacing:.04em;
}

.adult-status{
  flex-shrink:0;
}

/* Restore yellow heading system */
.site-header h1,
.hero-copy h2,
.section-heading h2,
.destination-copy h3,
.route-copy h2,
.access-guide-copy h2,
.app-copy h3,
.install-step h3,
.support-card h3{
  color:var(--yellow)!important;
}

.hero-copy h2 span{
  color:var(--yellow-soft)!important;
}

.brand-kicker,
.hero-eyebrow,
.section-heading span,
.destination-kicker,
.gold-kicker,
.route-copy>span,
.access-guide-copy>span,
.app-eyebrow,
.support-card small{
  color:var(--yellow-soft)!important;
}

.route-stat-grid strong,
.access-guide-grid b{
  color:var(--yellow)!important;
}

/* Keep logos metallic blue/white, NOT yellow */
.metallic-logo,
.hero-metal-logo,
.large-logo,
.footer-logo{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #eef5ff 18%,
      #c7d9ff 38%,
      #82a7ec 60%,
      #4f78d5 76%,
      #dce8ff 100%
    )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:
    0 2px 2px rgba(0,0,55,.38),
    0 0 12px rgba(92,137,230,.12)!important;
}

/* Yellow CTA system */
.destination-cta,
.download-cta,
.main-cta,
.gold-cta{
  background:
    linear-gradient(
      135deg,
      var(--yellow-soft) 0%,
      var(--yellow) 55%,
      var(--yellow-deep) 100%
    )!important;
  color:#07135f!important;
  box-shadow:
    0 12px 28px rgba(0,0,45,.20),
    inset 0 1px 0 rgba(255,255,255,.5)!important;
}

.destination-cta small,
.download-cta small{
  color:rgba(7,19,95,.72)!important;
}

.destination-cta strong,
.download-cta strong,
.destination-cta>b,
.download-cta>b{
  color:#07135f!important;
}

.destination-cta:hover,
.download-cta:hover,
.main-cta:hover,
.gold-cta:hover{
  color:#07135f!important;
  filter:brightness(1.05);
}

/* Yellow flowing outline around CTAs */
.cta-trace::before,
.download-shell::before{
  background:
    conic-gradient(
      from 0deg,
      transparent 0 14%,
      #fff8c4 22%,
      var(--yellow) 31%,
      transparent 40% 61%,
      var(--yellow-soft) 70%,
      #fff 77%,
      transparent 85%
    )!important;
}

/* More authority in hero without making it taller */
.browser-hero{
  padding-top:28px;
  padding-bottom:28px;
}

.hero-copy{
  max-width:760px;
}

.hero-copy p{
  max-width:720px;
}

/* Clean desktop balance */
@media(max-width:1080px){
  .site-header{
    grid-template-columns:1fr;
    gap:14px;
  }

  .header-side{
    justify-content:space-between;
  }

  .header-points{
    min-width:0;
    flex:1;
  }
}

@media(max-width:720px){
  .header-side{
    align-items:stretch;
    flex-direction:column;
  }

  .header-points{
    grid-template-columns:1fr 1fr 1fr;
    width:100%;
  }

  .adult-status{
    align-self:flex-start;
  }
}

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

  .header-points span{
    min-height:46px;
  }
}


/* =========================================================
   XNXX.FR V8 HERO BALANCE FIX
========================================================= */

.browser-hero{
  position:relative;
  overflow:hidden;
  padding:30px 32px;
}

.browser-hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-230px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 48px rgba(255,255,255,.018),
    0 0 0 96px rgba(255,255,255,.012);
  pointer-events:none;
}

.compact-xnxx-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:42px;
  align-items:stretch;
}

.hero-left{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:28px;
  align-items:center;
  min-width:0;
}

.hero-metal-logo{
  width:100%;
  font-size:2.55rem;
  text-align:center;
  white-space:nowrap;
}

.hero-copy{
  max-width:none;
  min-width:0;
}

.hero-copy h2{
  max-width:640px;
  font-size:2.15rem;
  line-height:1.08;
}

.hero-copy p{
  max-width:650px;
  font-size:1rem;
  line-height:1.65;
}

.hero-options{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-content:center;
}

.hero-option{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:92px;
  padding:14px 16px;
  border-radius:12px;
  background:
    linear-gradient(145deg,rgba(20,63,190,.94),rgba(11,41,135,.94));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.hero-option-main{
  background:
    linear-gradient(145deg,rgba(23,79,224,.98),rgba(14,51,165,.96));
}

.hero-option-no{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(3,8,79,.48);
  border:1px solid rgba(255,255,255,.1);
  color:var(--yellow);
  font-size:.74rem;
  font-weight:800;
}

.hero-option small{
  display:block;
  color:var(--yellow-soft);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.05em;
}

.hero-option strong{
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:1rem;
  line-height:1.2;
}

.hero-option p{
  margin:4px 0 0;
  color:#cbd7f3;
  font-size:.78rem;
  line-height:1.45;
}

@media(max-width:1080px){
  .compact-xnxx-hero{
    grid-template-columns:1fr;
    gap:24px;
  }

  .hero-options{
    grid-template-columns:repeat(3,1fr);
  }

  .hero-option{
    grid-template-columns:1fr;
    align-content:start;
    min-height:150px;
  }
}

@media(max-width:760px){
  .hero-left{
    grid-template-columns:1fr;
    gap:18px;
  }

  .hero-metal-logo{
    width:auto;
    text-align:left;
    font-size:2rem;
  }

  .hero-options{
    grid-template-columns:1fr;
  }

  .hero-option{
    grid-template-columns:44px 1fr;
    min-height:0;
  }
}

@media(max-width:560px){
  .browser-hero{
    padding:20px;
  }

  .hero-copy h2{
    font-size:1.65rem;
  }

  .hero-copy p{
    font-size:.92rem;
  }
}


/* =========================================================
   XNXX.FR V12 HEADER STRUCTURE REBUILD
========================================================= */

.site-header{
  display:block;
  width:100%;
  padding:18px 0 16px;
}

.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:100%;
}

.brand-row{
  display:grid;
  grid-template-columns:138px minmax(0,1fr);
  align-items:center;
  gap:20px;
  min-width:0;
}

.brand-copy{
  min-width:0;
  max-width:680px;
  overflow:visible;
}

.brand-copy p{
  max-width:620px;
}

.adult-status{
  flex:0 0 auto;
  width:auto;
  min-width:190px;
  min-height:52px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  white-space:nowrap;
  margin:0;
}

.header-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  min-width:0;
  margin-top:14px;
}

.header-points span{
  min-width:0;
  min-height:68px;
  padding:13px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(145deg,#1647c7,#1037a6);
  border:1px solid rgba(255,255,255,.12);
  color:#d9e2f8;
  font-size:.8rem;
  line-height:1.35;
  overflow:hidden;
}

.header-points b{
  display:block;
  margin-bottom:5px;
  color:var(--yellow);
  font-size:.67rem;
  line-height:1.1;
  white-space:nowrap;
}

@media(max-width:820px){
  .header-top{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .adult-status{
    min-width:0;
  }
}

@media(max-width:620px){
  .brand-row{
    grid-template-columns:110px minmax(0,1fr);
    gap:12px;
  }

  .header-points{
    grid-template-columns:1fr;
  }

  .header-points span{
    min-height:56px;
  }

  .adult-status{
    width:100%;
  }
}

/* XNXX.NET CLASSIC HEADER */
.xnxx-classic-header,.xnxx-classic-header *{box-sizing:border-box}
.xnxx-classic-header{width:100%;margin:0;padding:0;border-top:4px solid #000;background:#000063;font-family:Arial,Helvetica,sans-serif}
.xnxx-classic-top{position:relative;isolation:isolate;overflow:hidden;width:100%;height:82px;min-height:82px;margin:0;padding:3px 0 0 15px;background:#000063}
.xnxx-classic-top::before{content:"";position:absolute;z-index:-1;left:245px;right:0;top:0;bottom:0;background:#000063 url("../images/xnxx-header-pattern.png") repeat-x left top/auto 76px;opacity:.92;pointer-events:none}
.xnxx-classic-brand{position:relative;z-index:2;width:max-content;max-width:100%;margin:0;padding:0}
.xnxx-classic-logo-link{display:block;width:315px;height:63px;max-width:none;margin:0;padding:0;background:transparent}
.xnxx-classic-logo-image{display:block;width:315px;height:63px;max-width:none;margin:0;padding:0;border:0;object-fit:contain;background:transparent}
.xnxx-classic-tagline{display:block;margin:-1px 0 0 8px;padding:0;color:#fff;font-size:12px;font-weight:700;line-height:14px;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.55)}
.xnxx-classic-nav{width:100%;height:34px;min-height:34px;display:flex;align-items:stretch;justify-content:flex-end;margin:0;padding:0;overflow:hidden;border:0;border-bottom:1px solid #000090;background:#004be8}
.xnxx-nav-right{height:34px;min-height:34px;display:flex;align-items:stretch;justify-content:flex-end;margin:0 0 0 auto;padding:0}
.xnxx-classic-nav a{height:34px;min-height:34px;display:flex;align-items:center;justify-content:center;margin:0;padding:0 14px;border:0;border-left:1px solid rgba(0,0,144,.22);border-radius:0;background:#004be8;color:#fff;font-size:13px;font-weight:400;line-height:34px;white-space:nowrap;text-decoration:none;box-shadow:none;text-shadow:none;transform:none}
.xnxx-classic-nav a:hover{background:#000090;color:#ffda00}
.xnxx-classic-nav .xnxx-gold-link{min-width:94px;padding:0 13px;border-left:1px solid rgba(0,0,99,.45);background:linear-gradient(180deg,#fff4a8 0,#ffda4d 25%,#e4b31b 66%,#c78f00 100%);color:#211900;font-size:12px;font-weight:900;text-shadow:0 1px #fff0a6}
.xnxx-classic-nav .xnxx-gold-link:hover{color:#000}
.xnxx-direct-link{width:100%;background:#000090;border-bottom:1px solid #004be8}
.xnxx-direct-link-inner{width:calc(100% - 28px);max-width:1120px;margin:auto;padding:13px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:#fff;font-size:20px;line-height:1.35}
.xnxx-direct-link strong{color:#ffda00}.xnxx-direct-link a{color:#8fb9ff;font-weight:800;text-decoration:underline}

/* XNXX.NET BACKGROUND AND TYPE PALETTE */
:root{--yellow:#ffda00;--yellow-soft:#ffda4d;--yellow-deep:#c78f00}
a:hover{color:#ffda00}
.site-header,.browser-hero,.destination-card,.route-info,.access-guide,.app-panel,.install-panel,.support-card{border-color:#004be8!important;background:#000063!important;box-shadow:none!important}
.site-header{display:block!important;width:100%;margin-top:14px;padding:16px 18px!important;border:1px solid #004be8;border-radius:5px}
.header-points span,.hero-option,.mini-route,.destination-meta span,.route-stat-grid div,.access-guide-grid div,.app-highlights span,.install-step,.install-alert{border-color:#004be8!important;background:#000090!important;color:#fff!important;box-shadow:none!important}
.hero-option-main{background:#004be8!important}.hero-option-no{border-color:#004be8!important;background:#000063!important;color:#ffda00!important}
.browser-hero::after{border-color:#004be8!important;box-shadow:0 0 0 48px rgba(0,75,232,.08),0 0 0 96px rgba(0,75,232,.04)!important}
.logo-trace{background:#000090!important;box-shadow:inset 0 0 0 1px #004be8!important}.logo-trace::before{background:linear-gradient(90deg,transparent 0 34%,#fff 48%,#004be8 52%,transparent 66% 100%)!important}.logo-trace::after{background:#000063!important}
.adult-status{border-color:#004be8!important;background:#000090!important;color:#fff!important}.adult-status span{background:#fff!important}
.site-header h1,.hero-copy h2,.section-heading h2,.destination-copy h3,.route-copy h2,.access-guide-copy h2,.app-copy h3,.install-step h3,.support-card h3{color:#ffda00!important}
.brand-kicker,.hero-eyebrow,.section-heading span,.section-heading p,.destination-kicker,.gold-kicker,.route-copy>span,.access-guide-copy>span,.app-eyebrow{color:#fff!important;opacity:1!important}
.header-points b,.hero-option small,.hero-option strong,.destination-meta b,.route-stat-grid strong,.access-guide-grid b,.app-highlights b,.support-card small{color:#ffda00!important}
.site-header p,.hero-copy p,.hero-option p,.destination-copy p,.route-copy p,.route-stat-grid small,.route-stat-grid span,.access-guide-copy p,.access-guide-grid span,.app-copy p,.install-step p,.install-alert p,.support-card p,.footer{color:#fff!important}
.metallic-logo,.hero-metal-logo,.large-logo,.footer-logo{background:linear-gradient(180deg,#fff 0,#eef5ff 18%,#c7d9ff 38%,#82a7ec 60%,#4f78d5 76%,#dce8ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;text-shadow:0 2px 2px rgba(0,0,55,.38)!important}
.site-logo-wrap,.gold-logo-wrap{border:1px solid #004be8!important;background:#000090!important}.gold-logo{color:#fff!important}.gold-x{color:#ffda00!important}.gold-logo b{background:linear-gradient(180deg,#fff4a8 0,#ffda4d 25%,#e4b31b 66%,#c78f00 100%)!important;color:#211900!important}
.route-badge{border-color:#004be8!important;background:#000090!important;color:#fff!important}.main-card{border-top:3px solid #004be8!important}.gold-card{border-top:3px solid #ffda00!important}
.cta-trace,.download-shell{background:#004be8!important}.cta-trace::before,.download-shell::before{background:conic-gradient(from 0deg,transparent 0 35%,#fff 42%,#ffda00 46%,#fff 50%,transparent 58% 100%)!important}.cta-trace::after,.download-shell::after{background:#004be8!important}
.destination-cta,.download-cta,.main-cta,.gold-cta{background:#004be8!important;color:#fff!important;box-shadow:none!important}.destination-cta small,.download-cta small{color:#fff!important}.destination-cta strong,.download-cta strong,.destination-cta>b,.download-cta>b{color:#ffda00!important}.destination-cta:hover,.download-cta:hover,.main-cta:hover,.gold-cta:hover{color:#fff!important}
.phone-shell{border-color:#004be8!important;background:#000036!important;box-shadow:none!important}.phone-speaker{background:#004be8!important}.phone-screen{border:1px solid #004be8!important;background:#000063!important}.android-mark{color:#fff!important}.phone-screen strong{color:#ffda00!important}.phone-screen>span{color:#fff!important}
.download-icon,.download-cta>b{border-color:#fff!important;background:#000090!important}.app-note{border-color:#004be8!important;background:#000090!important;color:#fff!important}.app-note strong,.install-alert strong,.alert-icon{color:#ffda00!important}
.step-no,.support-number,.alert-icon{border:1px solid #004be8!important;background:#004be8!important;color:#fff!important}.app-number{background:#000090!important}
.footer{border-top-color:#004be8!important}.footer-brand>strong{color:#fff!important}

@media(max-width:760px){
  .xnxx-classic-top{height:76px;min-height:76px;padding-left:10px}.xnxx-classic-top::before{left:210px;background-size:auto 70px}
  .xnxx-classic-logo-link,.xnxx-classic-logo-image{width:275px;height:55px}.xnxx-classic-tagline{margin-left:7px;font-size:11px;line-height:13px}
  .xnxx-classic-nav,.xnxx-nav-right,.xnxx-classic-nav a{height:32px;min-height:32px}.xnxx-classic-nav a{padding:0 11px;font-size:12px;line-height:32px}.xnxx-classic-nav .xnxx-gold-link{min-width:auto;padding:0 10px;font-size:11px}
}
@media(max-width:480px){
  .xnxx-classic-top{height:70px;min-height:70px;padding:3px 6px 0}.xnxx-classic-top::before{left:55%;background-size:auto 63px;opacity:.72}
  .xnxx-classic-logo-link,.xnxx-classic-logo-image{width:240px;max-width:100%;height:48px}.xnxx-classic-tagline{margin:-1px 0 0 6px;font-size:10px;line-height:12px}
  .xnxx-classic-nav,.xnxx-nav-right,.xnxx-classic-nav a{height:30px;min-height:30px}.xnxx-classic-nav a{padding:0 8px;font-size:10px;line-height:30px}.xnxx-classic-nav .xnxx-gold-link{padding:0 8px;font-size:10px}
  .xnxx-direct-link-inner{width:calc(100% - 18px);padding:11px 0;font-size:16px}
}
