/*
  UTF homepage visual foundation v1
  Scope: homepage presentation only.
  Preserves current ids, scripts, links, storage behavior, routes, and wording.
*/
:root{
  --utf-bg-canvas:#050814;
  --utf-bg-deep:#030611;
  --utf-surface-1:#0b1220;
  --utf-surface-2:#101a2c;
  --utf-surface-3:#16233a;
  --utf-text-strong:#f7f9fc;
  --utf-text-body:#c8d2e1;
  --utf-text-muted:#93a1b5;
  --utf-text-faint:#6f7d91;
  --utf-blue:#126bff;
  --utf-cyan:#14c7de;
  --utf-teal:#21b8a6;
  --utf-amber:#f4b62c;
  --utf-error:#e6727d;
  --utf-border-subtle:rgba(200,210,225,.10);
  --utf-border-default:rgba(200,210,225,.16);
  --utf-border-strong:rgba(200,210,225,.24);
  --utf-shadow-soft:0 10px 28px rgba(0,0,0,.24);
  --utf-shadow-raised:0 22px 56px rgba(0,0,0,.36);
  --utf-shadow-modal:0 32px 90px rgba(0,0,0,.52);
}

html{background:var(--utf-bg-canvas)!important;color-scheme:dark;}
body{
  padding-top:68px!important;
  color:var(--utf-text-strong)!important;
  background:
    radial-gradient(900px 560px at 86% 0%,rgba(18,107,255,.13),transparent 64%),
    radial-gradient(740px 480px at 4% 23%,rgba(20,199,222,.055),transparent 68%),
    linear-gradient(180deg,var(--utf-bg-canvas) 0%,var(--utf-bg-deep) 100%)!important;
  background-attachment:scroll!important;
  font-family:"Inter","Segoe UI Variable Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Global shell */
.topbar{
  min-height:68px;
  padding:0 28px!important;
  background:rgba(3,6,17,.88)!important;
  border-bottom:1px solid var(--utf-border-subtle)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:none!important;
}
.topbar::after{display:none!important;}
.topbar-inner{
  max-width:1200px!important;
  min-height:68px;
  gap:20px!important;
}
.eu-site-wordmark{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  font-size:1.34rem!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  background:none!important;
  color:var(--utf-text-strong)!important;
  -webkit-text-fill-color:initial!important;
  text-shadow:none!important;
}
.eu-brand-mark{
  width:31px;
  height:31px;
  object-fit:contain;
  flex:0 0 auto;
  margin-right:10px;
}
.eu-site-wordmark .eu-brand-word{
  color:var(--utf-text-strong)!important;
  -webkit-text-fill-color:var(--utf-text-strong)!important;
  text-shadow:none!important;
}
.eu-site-wordmark .eu-brand-dot{
  color:var(--utf-amber)!important;
  -webkit-text-fill-color:var(--utf-amber)!important;
  text-shadow:none!important;
}
.eu-site-wordmark .eu-brand-u{
  background:linear-gradient(135deg,var(--utf-cyan),var(--utf-blue))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
.menu-btn{
  width:44px!important;
  height:44px!important;
  border-radius:12px!important;
  border:1px solid var(--utf-border-default)!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--utf-text-body)!important;
  box-shadow:none!important;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease!important;
}
.menu-btn:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(20,199,222,.40)!important;
  background:rgba(20,199,222,.055)!important;
}
.menu-btn:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(20,199,222,.25)!important;
}


/* Keep core homepage content visible and honor the quieter motion system. */
.hero,
.why-section,
.privacy-block,
.profile-teaser{
  animation:none!important;
  opacity:1!important;
  transform:none!important;
}

/* Real homepage DOM mapped into the new layout */
.container{
  width:min(100% - 64px,1200px)!important;
  max-width:1200px!important;
  margin:0 auto!important;
  padding:0 0 92px!important;
  display:grid;
  grid-template-columns:minmax(0,1.13fr) minmax(350px,.87fr);
  column-gap:70px;
  align-items:start;
}
.hero{
  grid-column:1;
  grid-row:1;
  text-align:left!important;
  padding:112px 0 94px!important;
}
.hero-eyebrow{
  display:flex!important;
  width:max-content;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 22px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:#e9c66e!important;
  font-size:12px!important;
  line-height:16px!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
  text-shadow:none!important;
}
.hero-eyebrow span{
  width:7px!important;
  height:7px!important;
  background:var(--utf-amber)!important;
  box-shadow:none!important;
}
.hero h1{
  max-width:760px;
  margin:0 0 25px!important;
  color:var(--utf-text-strong)!important;
  font-size:clamp(48px,5.1vw,70px)!important;
  line-height:1.03!important;
  letter-spacing:-.052em!important;
  font-weight:800!important;
  text-wrap:balance;
}
.hero h1 em{
  background:linear-gradient(135deg,var(--utf-cyan) 0%,var(--utf-blue) 90%)!important;
  background-size:100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:none!important;
}
.hero-sub{
  max-width:620px!important;
  margin:0 0 26px!important;
  color:var(--utf-text-body)!important;
  font-size:18px!important;
  line-height:1.68!important;
  font-weight:400!important;
}
.trust-row{
  justify-content:flex-start!important;
  gap:9px 22px!important;
  margin:0 0 22px!important;
}
.trust-badge{
  gap:7px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:var(--utf-text-muted)!important;
  font-size:13px!important;
  font-weight:500!important;
}
.trust-badge svg{color:var(--utf-teal)!important;}
.hero > div[style*="flex-direction:column"]{
  align-items:flex-start!important;
  gap:10px!important;
}
.hero > div[style*="flex-direction:column"] > div:first-child{
  max-width:620px!important;
  margin:0!important;
  color:var(--utf-text-muted)!important;
  font-size:14px!important;
  line-height:1.6!important;
  text-align:left!important;
}
.hero-cta{
  min-height:52px!important;
  padding:0 24px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:linear-gradient(135deg,var(--utf-cyan),var(--utf-blue))!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:0!important;
  box-shadow:0 12px 28px rgba(18,107,255,.22)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.hero-cta:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 16px 34px rgba(18,107,255,.28)!important;
}

/* Primary hero action: one restrained, slow brand-gradient movement. */
.hero .hero-cta{
  margin:0!important;
  background:linear-gradient(110deg,var(--utf-cyan) 0%,var(--utf-blue) 34%,#4857e8 56%,var(--utf-teal) 78%,var(--utf-cyan) 100%)!important;
  background-size:260% 100%!important;
  animation:utf-home-cta-gradient 10s ease-in-out infinite!important;
}
@keyframes utf-home-cta-gradient{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
.assessment-time-note{
  margin:2px 0 0!important;
  max-width:610px!important;
  color:var(--utf-text-muted)!important;
  font-size:13px!important;
  line-height:1.55!important;
  text-align:left!important;
}
.time-callout{
  justify-content:flex-start!important;
  max-width:610px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:var(--utf-text-faint)!important;
  font-size:12px!important;
  font-weight:500!important;
  text-align:left!important;
}
.time-callout svg{color:var(--utf-teal)!important;}

/* Existing profile teaser becomes the hero-side preview */
.profile-teaser{
  grid-column:2;
  grid-row:1;
  align-self:center;
  position:relative;
  margin:0!important;
  padding:30px!important;
  border:1px solid var(--utf-border-default)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(16,26,44,.96),rgba(11,18,32,.96))!important;
  box-shadow:var(--utf-shadow-raised)!important;
  text-align:left!important;
  overflow:hidden;
}
.profile-teaser::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--utf-amber),var(--utf-cyan),var(--utf-blue));
}
.profile-tag{
  display:block!important;
  width:auto!important;
  margin:0 0 15px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  color:var(--utf-text-muted)!important;
  font-size:12px!important;
  line-height:16px!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
}
.profile-teaser h3{
  margin:0 0 14px!important;
  color:var(--utf-text-strong)!important;
  font-size:27px!important;
  line-height:1.25!important;
  letter-spacing:-.025em!important;
  font-weight:700!important;
}
.profile-teaser p{
  margin:0!important;
  color:var(--utf-text-body)!important;
  font-size:15px!important;
  line-height:1.68!important;
}

/* Editorial section: same text and DOM, new composition */
.why-section{
  grid-column:1 / -1;
  grid-row:2;
  display:grid!important;
  grid-template-columns:minmax(250px,.64fr) minmax(0,1.36fr);
  column-gap:86px;
  margin:0!important;
  padding:90px 0 96px!important;
  border:0!important;
  border-top:1px solid var(--utf-border-subtle)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  text-align:left!important;
}
.why-section .section-label{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px!important;
  color:var(--utf-cyan)!important;
  font-size:12px!important;
  line-height:16px!important;
  font-weight:700!important;
  letter-spacing:.10em!important;
  text-align:left!important;
}
.why-section .section-label::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--utf-cyan);
}
.why-section .section-title{
  grid-column:1;
  grid-row:2 / span 2;
  align-self:start;
  max-width:340px;
  margin:0!important;
  color:var(--utf-text-strong)!important;
  font-size:clamp(32px,3.3vw,46px)!important;
  line-height:1.12!important;
  letter-spacing:-.04em!important;
  font-weight:700!important;
  text-align:left!important;
}
.why-section .label-line{
  grid-column:2;
  grid-row:1 / span 2;
  max-width:730px!important;
  margin:0!important;
  color:var(--utf-text-body)!important;
  font-size:17px!important;
  line-height:1.72!important;
  text-align:left!important;
}
.why-section .label-line strong{
  color:var(--utf-text-strong)!important;
  font-weight:600!important;
}
.why-grid{
  grid-column:2;
  grid-row:3;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  margin:42px 0 0!important;
  border-top:1px solid var(--utf-border-subtle);
}
.why-item{
  display:grid!important;
  grid-template-columns:30px 1fr!important;
  gap:13px!important;
  align-items:start!important;
  margin:0!important;
  padding:24px 24px 24px 0!important;
  border:0!important;
  border-bottom:1px solid var(--utf-border-subtle)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  text-align:left!important;
}
.why-item:nth-child(even){
  padding-left:24px!important;
  border-left:1px solid var(--utf-border-subtle)!important;
}
.why-icon{
  width:28px!important;
  height:28px!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(20,199,222,.075)!important;
  color:var(--utf-cyan)!important;
  box-shadow:none!important;
}
.why-text strong{
  margin:1px 0 7px!important;
  color:var(--utf-text-strong)!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
.why-text span{
  color:var(--utf-text-muted)!important;
  font-size:13px!important;
  line-height:1.58!important;
}

/* Privacy remains visible but quieter */
.privacy-block{
  grid-column:1 / -1;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
  margin:0 0 34px!important;
  padding:25px 28px!important;
  border:1px solid var(--utf-border-default)!important;
  border-radius:16px!important;
  background:rgba(11,18,32,.68)!important;
  box-shadow:none!important;
}
.privacy-icon{
  width:38px!important;
  height:38px!important;
  border:1px solid rgba(33,184,166,.22)!important;
  border-radius:12px!important;
  background:rgba(33,184,166,.075)!important;
  color:var(--utf-teal)!important;
  box-shadow:none!important;
}
.privacy-content strong{
  color:var(--utf-text-strong)!important;
  font-size:15px!important;
  font-weight:700!important;
}
.privacy-content p{
  margin-top:7px!important;
  color:var(--utf-text-muted)!important;
  font-size:13px!important;
  line-height:1.65!important;
}

/* Existing duplicate CTA, returning state, and legal/footer */
.privacy-block + div[style*="text-align:center"]{
  grid-column:1 / -1;
  margin:0 0 42px!important;
  text-align:center!important;
}
.privacy-block + div[style*="text-align:center"] > div{
  color:var(--utf-text-faint)!important;
  font-size:12px!important;
}
.returning-wrap{
  grid-column:1 / -1;
  margin:0 0 52px!important;
}
.returning{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:28px!important;
  padding:22px 24px!important;
  border:1px solid var(--utf-border-default)!important;
  border-radius:16px!important;
  background:rgba(11,18,32,.68)!important;
  box-shadow:none!important;
}
.returning p{
  color:var(--utf-text-muted)!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.returning p strong{color:var(--utf-text-strong)!important;font-weight:700!important;}
.returning-btn{
  min-height:42px!important;
  padding:0 16px!important;
  border:1px solid var(--utf-border-default)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--utf-text-body)!important;
  font-size:13px!important;
  font-weight:600!important;
  box-shadow:none!important;
}
.returning-actions{
  gap:10px!important;
  margin-top:10px!important;
}
.returning-box{
  min-height:42px!important;
  border:1px solid var(--utf-border-default)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--utf-text-muted)!important;
  box-shadow:none!important;
}
.returning-box.danger{color:#eaa0a8!important;border-color:rgba(230,114,125,.20)!important;}
.legal{
  grid-column:1 / -1;
  position:relative;
  margin:0!important;
  padding:34px 0 0 42px!important;
  border-top:1px solid var(--utf-border-subtle)!important;
  color:var(--utf-text-faint)!important;
  text-align:left!important;
}
.legal::before{
  content:"";
  position:absolute;
  left:0;
  top:31px;
  width:25px;
  height:25px;
  background:url('../img/utf-mark-transparent.png') center/contain no-repeat;
}
.legal-links{
  justify-content:flex-start!important;
  gap:12px 22px!important;
  margin-bottom:16px!important;
}
.legal-links a{
  color:var(--utf-text-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
  text-decoration:none!important;
}
.legal-links a:hover{color:var(--utf-text-strong)!important;}
.legal-text{
  color:var(--utf-text-faint)!important;
  font-size:11px!important;
  line-height:1.6!important;
}

/* Existing modal structures preserved, visually normalized */
.modal-backdrop,
.confirm-backdrop{
  background:rgba(1,3,9,.78)!important;
  backdrop-filter:blur(10px)!important;
}
.modal,
.confirm-modal{
  border:1px solid var(--utf-border-default)!important;
  border-radius:24px!important;
  background:var(--utf-surface-1)!important;
  box-shadow:var(--utf-shadow-modal)!important;
}
.modal-header,
.confirm-header{
  border-bottom:1px solid var(--utf-border-subtle)!important;
}
.modal-title,
.confirm-title{
  color:var(--utf-text-strong)!important;
  font-weight:700!important;
}
.modal-close,
.confirm-close,
.confirm-cancel,
.confirm-clear{
  border-radius:10px!important;
  box-shadow:none!important;
}
.menu-link{
  border:1px solid var(--utf-border-subtle)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--utf-text-body)!important;
  box-shadow:none!important;
}
.menu-link:hover{
  border-color:rgba(20,199,222,.32)!important;
  background:rgba(20,199,222,.055)!important;
}
.toast{
  border:1px solid var(--utf-border-default)!important;
  border-radius:10px!important;
  background:var(--utf-surface-2)!important;
  color:var(--utf-text-body)!important;
  box-shadow:var(--utf-shadow-soft)!important;
}

@media(max-width:920px){
  .container{
    width:min(100% - 44px,760px)!important;
    grid-template-columns:1fr;
    column-gap:0;
  }
  .hero{
    grid-column:1;
    grid-row:1;
    padding:82px 0 54px!important;
  }
  .profile-teaser{
    grid-column:1;
    grid-row:2;
    max-width:640px;
    margin:0 0 76px!important;
  }
  .why-section{grid-row:3;}
}

@media(max-width:660px){
  body{padding-top:64px!important;}
  .topbar{min-height:64px;padding:0 18px!important;}
  .topbar-inner{min-height:64px;}
  .eu-brand-mark{width:27px;height:27px;}
  .eu-site-wordmark{font-size:1.17rem!important;gap:0!important;}
  .menu-btn{width:42px!important;height:42px!important;}
  .container{width:calc(100% - 32px)!important;padding-bottom:58px!important;}
  .hero{padding:62px 0 46px!important;}
  .hero h1{
    font-size:clamp(39px,12vw,48px)!important;
    line-height:1.055!important;
    letter-spacing:-.047em!important;
  }
  .hero-sub{font-size:16px!important;line-height:1.65!important;}
  .trust-row{display:grid!important;gap:9px!important;}
  .hero > div[style*="flex-direction:column"]{width:100%!important;}
  .hero-cta{width:100%!important;justify-content:center!important;}
  .assessment-time-note,.time-callout{text-align:left!important;}
  .profile-teaser{
    margin:0 0 20px!important;
    padding:24px 21px!important;
  }
  .profile-teaser h3{font-size:23px!important;line-height:1.3!important;}
  .why-section{
    display:block!important;
    padding:28px 0 70px!important;
    border-top:0!important;
  }
  .why-section .section-label{margin-bottom:17px!important;}
  .why-section .section-title{
    max-width:none;
    margin-bottom:25px!important;
    font-size:32px!important;
  }
  .why-section .label-line{font-size:16px!important;line-height:1.68!important;}
  .why-grid{
    grid-template-columns:1fr!important;
    margin-top:34px!important;
  }
  .why-item,
  .why-item:nth-child(even){
    padding:20px 0!important;
    border-left:0!important;
  }
  .privacy-block{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:14px!important;
    padding:22px 18px!important;
  }
  .privacy-icon{width:34px!important;height:34px!important;}
  .returning{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .returning-btn{width:100%!important;justify-content:center!important;}
  .returning-actions{grid-template-columns:1fr!important;}
  .legal{padding-left:0!important;padding-top:68px!important;}
  .legal::before{top:28px;left:0;}
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-cta{
    animation:none!important;
    background-position:50% 50%!important;
  }
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
/* UTF HOMEPAGE DESKTOP VIEWPORT FIT V5
   Reduces only the excess vertical air on shorter desktop browser viewports so
   the primary CTA and automatic-save note remain visible without scrolling. */
@media (min-width:921px) and (max-height:940px){
  .hero{
    padding:58px 0 54px!important;
  }
  .hero-eyebrow{
    margin-bottom:18px!important;
  }
  .hero h1{
    margin-bottom:20px!important;
  }
  .hero-sub{
    margin-bottom:21px!important;
    line-height:1.6!important;
  }
  .trust-row{
    margin-bottom:18px!important;
  }
  .hero > div[style*="flex-direction:column"]{
    gap:8px!important;
  }
  .assessment-time-note{
    margin-top:0!important;
  }
}