@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  © 2026 TP, Switzerland
  All rights reserved.
*/

:root {
  --app-height: 100vh;
  --app-height: 100dvh;
  --bottom-ui-offset: max(8vh, calc(env(safe-area-inset-bottom, 0px) + 18px));
  --bottom-ui-offset-mobile: max(6dvh, calc(env(safe-area-inset-bottom, 0px) + 18px));
  --top-ui-offset: max(8vh, calc(env(safe-area-inset-top, 0px) + 18px));

  --z-footer: 30;
  --z-progress: 20;
  --z-control: 80;
  --z-overlay: 100;
  --z-overlay-content: 110;
  --z-overlay-control: 120;
}

/* Reset */
html, body, div, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

html,
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  background: #eef7fb;
  font-family: 'Raleway', sans-serif;
  color: #eef7fb;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

h1 {
  line-height: 1;
  font-size: 6vh;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Canvas */
canvas {
  pointer-events: none;
}

/* Text input */
textarea {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height);
  min-height: var(--app-height);

  overflow-y: auto;
  overflow-x: hidden;
  resize: none;
  overscroll-behavior: contain;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;

  padding: 8vh 8vw 24vh 8vw;
  scroll-padding-bottom: 24vh;

  border: 2px solid #fff;
  border-radius: 4px;

  box-sizing: border-box;

  color: #fff;
  background: #e0e0e0;
  opacity: .8;

  font-family: 'Raleway', sans-serif;
  font-size: 3vh;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .015em;
  font-variant: normal;
  text-decoration: none;

  transition: all .4s;
}

textarea:hover {
  color: #558f4c;
  background: #fff;
  border-color: #558f4c;
}

textarea::-webkit-scrollbar {
  width: 4px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
}

textarea::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.2);
}

/* Progress bar */
#starter {
  position: absolute;
  top: 8vh;
  left: 8vw;
  right: 8vw;

  height: 3vh;
  width: auto;

  background: #ddd;
  border-radius: 1vh;
  overflow: hidden;
  text-decoration: none;
}

#swissBar {
  height: 100%;
  width: 0%;
  transition: width .5s ease;
  background: #d52b1e;
}

/* Footer */
#footer {
  position: fixed;
  left: 8vw;
  bottom: var(--bottom-ui-offset);

  z-index: var(--z-footer);

  max-width: 88vw;

  color: #888;
  font-family: 'Raleway', sans-serif;
  font-size: 2vh;
  line-height: 1.1em;
  text-align: left;
  text-decoration: none;

  padding: 0;
  margin: 0;
  background: transparent;
}

/* White footer shader:
   anchored below footer by 8vh, so visually it starts at viewport bottom,
   not at text height. */
#footer::before {
  content: "";
  position: fixed;

  left: -18vw;
  bottom: -16vh;

  width: min(118vw, 72em);
  height: min(72vh, 38em);

  z-index: -1;
  pointer-events: none;

  background: radial-gradient(
    ellipse at 18vw calc(100% - 16vh),
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.82) 18%,
    rgba(255,255,255,.52) 36%,
    rgba(255,255,255,.24) 54%,
    rgba(255,255,255,.08) 70%,
    rgba(255,255,255,0) 88%
  );

  filter: blur(10px);
  transform: translateZ(0);
}


#footer h1,
#footer p,
#result,
#footer a {
  position: relative;
  z-index: 1;
}


/* Button reset for semantic controls that must still look like links/icons */
button.fa,
#clearText,
#tryBtn,
#aboutBtn,
#aboutClose {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
}

button.fa,
#tryBtn,
#aboutBtn {
  background: transparent;
}

/* Links / icons */
.fa {
  color: #888;
  text-decoration: none;
}

.fa:hover {
  color: #eee;
  text-decoration: none;
  cursor: pointer;
}


/* Result */
#result {
  opacity: .92;
  text-shadow:
    0 0 14px rgba(255,255,255,1),
    0 0 5px rgba(255,255,255,.95);

  transition:
    opacity .4s ease,
    transform .4s ease,
    letter-spacing .4s ease;
}

#result.pulse {
  transform: translateY(-.05em);
  letter-spacing: .015em;
}

#resultHint {
  display: block;
  margin-top: .55em;
  max-width: 12em;

  font-size: .32em;
  line-height: 1.15;
  letter-spacing: .04em;
  opacity: .58;
}

/* Clear button */
#clearText {
  position: fixed;
  top: calc(var(--top-ui-offset) - 2.25em);
  right: 8vw;
  bottom: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.55em;
  height: 1.55em;

  z-index: var(--z-control);

  color: #777;
  background: rgba(255,255,255,.72);
  border: 0;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 2vh;
  font-weight: 200;
  text-decoration: none;
  line-height: 1;

  opacity: .42;

  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition:
    opacity .22s ease,
    transform .22s ease,
    background .22s ease;
}

#clearText.hasText {
  opacity: .48;
}

#clearText:hover {
  opacity: .82;
  transform: scale(1.04);
  background: rgba(255,255,255,.9);
}

/* About layer */
#aboutBtn {
  cursor: pointer;
}

#aboutLayer {
  position: fixed;
  inset: 0;

  z-index: var(--z-overlay);

  background: rgba(255,255,255,.88);

  opacity: 0;
  pointer-events: none;

  transition: opacity .35s ease;

  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

#aboutLayer.open {
  opacity: 1;
  pointer-events: auto;
}

#aboutText {
  position: fixed;
  left: 8vw;
  right: 8vw;
  bottom: var(--bottom-ui-offset);

  z-index: var(--z-overlay-content);

  max-width: 29em;

  color: #888;
  font-family: 'Raleway', sans-serif;
  font-size: 2.1vh;
  line-height: 1.35;
}

#aboutText h2 {
  margin: 0 0 .6em 0;

  color: #888;
  font-size: 6vh;
  line-height: 1;
  font-weight: 200;
  text-transform: lowercase;
}

#aboutText p {
  margin: 0 0 .86em 0;
}

#aboutText .aboutLead {
  color: #666;
  font-size: 1.08em;
}

#aboutText a {
  color: #888;
  text-decoration: none;
}

#aboutText a:hover {
  color: #558f4c;
}

#analysisCounter,.aboutLegal {
  display: block;
  margin-top: 1.05em;
  color: #888;
  font-size: .92em;
  line-height: 1.25;
  letter-spacing: .035em;
  opacity: .66;
}

#aboutClose {
  position: fixed;
  top: calc(var(--top-ui-offset) - 2.25em);
  right: 8vw;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 1.55em;
  height: 1.55em;

  z-index: var(--z-overlay-control);

  color: #777;
  background: rgba(255,255,255,.72);
  border: 0;
  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 2vh;
  font-weight: 200;
  line-height: 1;
  text-decoration: none;

  opacity: .42;

  cursor: pointer;
  user-select: none;

  transition:
    opacity .22s ease,
    transform .22s ease,
    background .22s ease;
}

#aboutClose:hover {
  opacity: .82;
  transform: scale(1.04);
  background: rgba(255,255,255,.9);
}

#aboutBranchCanvas {
  position: absolute;
  top: 20%;
  right: 8vw;

  z-index: var(--z-overlay-content);

  width: min(16vw, 165px);
  height: min(24vw, 225px);

  transform: translateY(-50%);

  opacity: .84;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.15))
    drop-shadow(0 0 16px rgba(255,255,255,.11))
    drop-shadow(0 0 24px rgba(85,143,76,.08))
    drop-shadow(0 0 30px rgba(213,43,30,.055));
  pointer-events: none;
  mix-blend-mode: multiply;
}

#aboutBranchLegend {
  position: absolute;
  top: calc(20% + 116px);
  right: 8vw;

  z-index: var(--z-overlay-content);

  display: grid;
  gap: .28em;

  color: rgba(116,116,116,.66);
  font-family: 'Raleway', sans-serif;
  font-size:  2.1vh;
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: .055em;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;
}

/* Hide footer while about layer is open.
   JS class alternative avoids relying only on :has support. */
#aboutLayer.open ~ #footer,
body:has(#aboutLayer.open) #footer {
  opacity: 0;
  pointer-events: none;
}

/* Desktop layout */
@media screen and (min-width: 769px) {
  #starter {
    position: fixed;
    top: 8vh;
    right: 8vw;
    left: auto;

    display: block;

    width: 3vh;
    height: 84vh;

    z-index: var(--z-progress);
  }

  #swissBar {
    position: absolute;
    bottom: 0;

    width: 100%;
    height: 0%;

    transition: height .5s ease;
  }

  textarea {
    padding-right: 12vw;
  }
}

/* Mobile layout */
@media screen and (max-width: 768px) {
  h1 {
    font-size: 5vh;
  }
  
  #aboutBranchCanvas, #aboutBranchLegend {
    display: none;
  }

  textarea {
    padding: 14vh 8vw calc(30vh + env(safe-area-inset-bottom, 0px)) 8vw;
    scroll-padding-bottom: calc(30vh + env(safe-area-inset-bottom, 0px));
  }

  #starter {
    top: 8vh;
    left: 8vw;
    right: 8vw;
  }

  #footer {
    left: 8vw;
    bottom: var(--bottom-ui-offset-mobile);
    max-width: 84vw;
    border: none;
  }

  #footer::before {
    left: -22vw;
    bottom: -15vh;

    width: 128vw;
    height: 64vh;

    background: radial-gradient(
      ellipse at 22vw calc(100% - 15vh),
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 18%,
      rgba(255,255,255,.52) 36%,
      rgba(255,255,255,.24) 54%,
      rgba(255,255,255,.08) 70%,
      rgba(255,255,255,0) 88%
    );
  }

  /* Keep stars + WhatsApp visible on mobile */

  #footer span:not(#resultHint) {
    display: inline;
  }

  #clearText {
    top: calc(var(--top-ui-offset) - 2.15em);
    right: 8vw;

    font-size: 2.6vh;
    transform: none;
  }

  #clearText:hover {
    transform: scale(1.04);
  }

  #aboutClose {
    top: calc(var(--top-ui-offset) - 2.15em);
    right: 8vw;

    font-size: 2.6vh;
  }

  #aboutBranchCanvas {
    top: 35%;
    right: 7vw;

    width: min(30vw, 150px);
    height: min(44vw, 205px);

    transform: translateY(-50%);

    opacity: .88;
    filter:
      drop-shadow(0 0 8px rgba(255,255,255,.16))
      drop-shadow(0 0 16px rgba(255,255,255,.12))
      drop-shadow(0 0 24px rgba(85,143,76,.09))
      drop-shadow(0 0 30px rgba(213,43,30,.06));
    mix-blend-mode: multiply;
  }

  #aboutBranchLegend {
    top: calc(35% + 104px);
    right: 7vw;
    gap: .24em;
    opacity: .84;
  }

  #aboutText {
    bottom: var(--bottom-ui-offset-mobile);
    z-index: var(--z-overlay-content);
  }
}


/* ==========================================================
   Launch branch overlay — single source of truth
   ========================================================== */
#canvas {
  display: none !important;
}

#branchOverlayCanvas {
  position: fixed;
  inset: auto auto 0 0;
  width: 100vw;
  height: var(--app-height);
  min-height: var(--app-height);
  display: block;
  visibility: visible;
  z-index: 13;
  margin: 0;
  padding: 0;
  border: 0;
  transform: none;
  pointer-events: none;
  overflow: visible;
  clip-path: none;
  contain: none;
  opacity: 1;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.15))
    drop-shadow(0 0 16px rgba(255,255,255,.11))
    drop-shadow(0 0 24px rgba(85,143,76,.08))
    drop-shadow(0 0 30px rgba(213,43,30,.055));
}

@media screen and (max-width: 768px) {
  #branchOverlayCanvas {
    height: var(--app-height);
    min-height: var(--app-height);
  }

  textarea {
    padding-bottom: calc(36vh + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(36vh + env(safe-area-inset-bottom, 0px));
  }
}




/* Result label + share icon */
#resultRow{
  display:flex;
  align-items:center;
  gap:.18em;
}

#waShareBtn,
#waShareBtn:link,
#waShareBtn:visited{
  all:unset;
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:.78em;
  height:.78em;
  color:#888;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#waShareBtn:hover{
  color:#eee;
}

#waShareBtn:focus-visible{
  outline:1px solid currentColor;
  outline-offset:.18em;
}

#waShareBtn .shareArrow{
  display:block;
  width:.78em;
  height:.78em;
  stroke:currentColor;
  stroke-width:2.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  pointer-events:none;
}

#waShareBtn::-moz-focus-inner{
  border:0;
  padding:0;
}

/* Model maturity upgrade: keep result row and hint aligned */
#resultRow {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
}

#resultHint {
  text-align: left;
}

#result[data-confidence="low"] + .shareIcon,
#result[data-confidence="medium"] + .shareIcon,
#result[data-confidence="high"] + .shareIcon {
  opacity: .92;
}


/* Document drop — browser-only, keeps existing Lu UI intact */
body.documentDropActive::after,
body.documentDropReading::after {
  content: attr(data-drop-message);
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8vw;
  color: rgba(85, 143, 76, .92);
  background: rgba(255, 255, 255, .68);
  border: 2px dashed rgba(85, 143, 76, .48);
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2.2rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 0 18px rgba(255,255,255,.95);
  pointer-events: none;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

body.documentDropReading::after {
  content: "Reading…";
  color: rgba(136, 136, 136, .92);
  border-color: rgba(213, 43, 30, .32);
}

body.documentDropActive textarea {
  border-color: #558f4c;
  background: #fff;
  color: #558f4c;
}


/* ==========================================================
   About layer — abstract Lu iris presence
   Congruent with Admin, almost transparent.
   ========================================================== */
#aboutBranchCanvas,
#aboutBranchLegend {
  display: none !important;
}

#aboutLuIris {
  --about-eye-x: 0px;
  --about-eye-y: 10px;
  --about-pupil-size: 34px;
  --about-eye-speed: 10s;
  --about-eye-glow: .16;
  --about-eye-wander: .55;

  position: absolute;
  top: 24%;
  right: 8vw;
  z-index: var(--z-overlay-content);
  width: min(20vw, 178px);
  height: min(20vw, 178px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: .24;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter:
    drop-shadow(0 0 calc(64px * var(--about-eye-glow)) rgba(85,143,76,.56))
    drop-shadow(0 0 86px rgba(85,143,76,.055));
  animation: aboutIrisBreath var(--about-eye-speed) ease-in-out infinite;
}

#aboutLuIris.watch {
  filter:
    drop-shadow(0 0 calc(64px * var(--about-eye-glow)) rgba(201,154,70,.54))
    drop-shadow(0 0 86px rgba(201,154,70,.05));
}

#aboutLuIris.danger {
  filter:
    drop-shadow(0 0 calc(64px * var(--about-eye-glow)) rgba(207,91,82,.52))
    drop-shadow(0 0 86px rgba(207,91,82,.045));
}

.aboutIrisRing,
.aboutIrisNoise {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.aboutIrisRing.r1 {
  background:
    repeating-conic-gradient(from 8deg,
      rgba(85,143,76,.26) 0deg,
      rgba(85,143,76,.055) 1.6deg,
      transparent 3.6deg,
      transparent 8.5deg);
  mask: radial-gradient(circle, transparent 0 31%, #000 33% 64%, transparent 68%);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 33% 64%, transparent 68%);
  opacity: .34;
  animation: aboutIrisTurn calc(var(--about-eye-speed) * 5.2) linear infinite;
}

.aboutIrisRing.r2 {
  inset: 9%;
  background:
    repeating-conic-gradient(from 120deg,
      rgba(95,102,104,.10) 0deg,
      rgba(85,143,76,.15) 1deg,
      transparent 2.5deg,
      transparent 7deg);
  mask: radial-gradient(circle, transparent 0 27%, #000 30% 58%, transparent 63%);
  -webkit-mask: radial-gradient(circle, transparent 0 27%, #000 30% 58%, transparent 63%);
  opacity: .22;
  animation: aboutIrisTurnRev calc(var(--about-eye-speed) * 6.4) linear infinite;
}

.aboutIrisRing.r3 {
  inset: 18%;
  border: 1px solid rgba(85,143,76,.08);
  box-shadow:
    0 0 0 18px rgba(85,143,76,.015),
    inset 0 0 28px rgba(255,255,255,.68);
  opacity: .66;
}

#aboutLuIris.watch .aboutIrisRing.r1,
#aboutLuIris.watch .aboutIrisRing.r2 { filter: hue-rotate(42deg) saturate(.9); }

#aboutLuIris.danger .aboutIrisRing.r1,
#aboutLuIris.danger .aboutIrisRing.r2 { filter: hue-rotate(110deg) saturate(.8); }

.aboutIrisNoise {
  inset: 6%;
  background:
    radial-gradient(circle at 42% 45%, rgba(255,255,255,.88), transparent 5%),
    radial-gradient(circle at 51% 42%, rgba(85,143,76,.20), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,.08) 39%, transparent 64%);
  opacity: .34;
}

.aboutLuPupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--about-pupil-size);
  height: var(--about-pupil-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%,
      rgba(53,58,59,.94),
      rgba(27,31,32,.95) 66%,
      rgba(8,10,10,.96));
  box-shadow: 0 5px 20px rgba(0,0,0,.12);
  transform: translate(calc(-50% + var(--about-eye-x)), calc(-50% + var(--about-eye-y)));
  will-change: transform, width, height;
}

.aboutLuShine {
  position: absolute;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  left: calc(50% + 18%);
  top: calc(50% - 23%);
  background: rgba(255,255,255,.70);
  filter: blur(.2px);
}

#aboutLuIris.blink .aboutIrisRing,
#aboutLuIris.blink .aboutIrisNoise {
  transform: scaleY(.12);
  transition: transform 140ms ease-in;
}

#aboutLuIris.blink .aboutLuPupil {
  transform: translate(calc(-50% + var(--about-eye-x)), calc(-50% + var(--about-eye-y))) scaleY(.18) !important;
  transition: transform 140ms ease-in !important;
}

@keyframes aboutIrisBreath {
  0%,100% { transform: scale(.985); opacity: .18; }
  50% { transform: scale(1.018); opacity: .31; }
}
@keyframes aboutIrisTurn { to { transform: rotate(360deg); } }
@keyframes aboutIrisTurnRev { to { transform: rotate(-360deg); } }

@media screen and (max-width: 768px) {
  #aboutLuIris {
    top: 24%;
    right: 8vw;
    width: min(34vw, 132px);
    height: min(34vw, 132px);
    opacity: .20;
  }
}

@media (prefers-reduced-motion: reduce) {
  #aboutLuIris,
  .aboutIrisRing {
    animation: none !important;
  }
}


/* ==========================================================
   Favorite Lu Iris for About — fluid / luminous / almost transparent
   ========================================================== */

#aboutLuIris{
  width:min(24vw,220px)!important;
  height:min(24vw,220px)!important;
  opacity:.26!important;
  filter:
    drop-shadow(0 0 calc(92px * var(--about-eye-glow)) rgba(85,143,76,.60))
    drop-shadow(0 0 98px rgba(255,213,136,.16))
    drop-shadow(0 0 130px rgba(95,170,190,.08))!important;
}

.aboutIrisRing.r1{
  opacity:.35!important;
  filter:blur(.55px) saturate(1.08);
  background:
    repeating-conic-gradient(from 22deg,
      rgba(85,143,76,.30) 0deg,
      rgba(255,213,136,.18) 1.15deg,
      rgba(85,143,76,.045) 2.1deg,
      transparent 5.1deg,
      transparent 9.8deg)!important;
  animation-duration:calc(var(--about-eye-speed) * 7.2)!important;
}

.aboutIrisRing.r2{
  opacity:.22!important;
  filter:blur(1px) saturate(1.15);
  background:
    repeating-conic-gradient(from 146deg,
      rgba(95,170,190,.16) 0deg,
      rgba(255,212,124,.18) 1.2deg,
      rgba(85,143,76,.065) 2.8deg,
      transparent 5.4deg,
      transparent 11deg)!important;
  animation-duration:calc(var(--about-eye-speed) * 8.7)!important;
}

.aboutIrisRing.r3{
  opacity:.42!important;
  border:0!important;
  box-shadow:
    0 0 0 20px rgba(85,143,76,.016),
    0 0 0 38px rgba(255,217,142,.011),
    inset 0 0 48px rgba(255,255,255,.84)!important;
}

.aboutIrisNoise{
  inset:3%!important;
  opacity:.38!important;
  filter:blur(2.7px) saturate(1.2);
  background:
    radial-gradient(circle at 38% 42%, rgba(255,255,255,.86), transparent 5%),
    radial-gradient(circle at 57% 43%, rgba(255,216,141,.22), transparent 17%),
    radial-gradient(circle at 44% 54%, rgba(116,198,214,.16), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.50), rgba(255,255,255,.10) 38%, transparent 67%)!important;
}

.aboutLuPupil{
  width:calc(var(--about-pupil-size) * .58)!important;
  height:calc(var(--about-pupil-size) * .58)!important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.14),
    0 0 22px rgba(0,0,0,.08)!important;
}

.aboutLuShine{
  width:8.5%!important;
  height:8.5%!important;
  left:calc(50% + 17%)!important;
  top:calc(50% - 25%)!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:
    0 0 12px rgba(255,255,255,.45),
    -18px 20px 34px rgba(255,219,142,.12);
}

@media screen and (max-width:768px){
  #aboutLuIris{
    width:min(38vw,150px)!important;
    height:min(38vw,150px)!important;
    opacity:.22!important;
  }
}




/* ==========================================================
   Lu final eye
   Static iris shadow. Algorithm-responsive pupil only.
   ========================================================== */

#aboutLuIris,
#aboutLuIris {
  position: relative !important;
  overflow: visible !important;
  animation: none !important;
  transform: none !important;
  isolation: isolate;
}

/* remove visible CSS-ring feeling */
.iris-ring,
.aboutIrisRing,
.iris-noise,
.aboutIrisNoise {
  animation: none !important;
  pointer-events: none !important;
}

/* one soft natural iris field, not moving */
#aboutLuIris::before,
#aboutLuIris::before {
  content: "";
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(21,28,30,.24) 0%,
      rgba(21,28,30,.115) 8%,
      rgba(91,129,116,.155) 17%,
      rgba(133,191,125,.13) 28%,
      rgba(255,225,155,.075) 42%,
      rgba(133,191,125,.04) 58%,
      rgba(133,191,125,0) 76%),
    radial-gradient(circle at 39% 34%,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.20) 9%,
      rgba(255,255,255,0) 24%);
  filter: blur(10px) saturate(1.02);
  opacity: .72;
}

#aboutLuIris::before {
  opacity: .34;
  filter: blur(12px) saturate(1.02);
}

/* faint fibers only; static */
.iris-ring.r1,
.aboutIrisRing.r1 {
  inset: -8% !important;
  opacity: .115 !important;
  filter: blur(.9px) saturate(.95) !important;
  background:
    repeating-conic-gradient(from 17deg,
      rgba(95,128,116,.23) 0deg,
      rgba(255,235,190,.11) 1deg,
      transparent 2.6deg,
      transparent 8.5deg) !important;
  mask: radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%) !important;
}

.iris-ring.r2,
.aboutIrisRing.r2 {
  inset: 2% !important;
  opacity: .075 !important;
  filter: blur(1.6px) saturate(.9) !important;
  background:
    repeating-conic-gradient(from 124deg,
      rgba(93,150,156,.16) 0deg,
      rgba(255,223,160,.10) 1.2deg,
      transparent 3.4deg,
      transparent 11deg) !important;
  mask: radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%) !important;
}

.iris-ring.r3,
.aboutIrisRing.r3 {
  inset: 18% !important;
  border: 0 !important;
  opacity: .22 !important;
  box-shadow:
    inset 0 0 32px rgba(255,255,255,.55),
    0 0 34px rgba(133,191,125,.07) !important;
}

.iris-noise,
.aboutIrisNoise {
  inset: -2% !important;
  opacity: .18 !important;
  filter: blur(2.8px) !important;
  background:
    radial-gradient(circle at 43% 39%, rgba(255,255,255,.72), transparent 5%),
    radial-gradient(circle at 54% 50%, rgba(133,191,125,.20), transparent 23%),
    radial-gradient(circle at 48% 47%, rgba(255,230,176,.13), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 64%) !important;
}

/* tone stays as a color-field only */
.watch #aboutLuIris::before,
#aboutLuIris.watch::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(21,28,30,.22) 0%,
      rgba(21,28,30,.11) 8%,
      rgba(152,112,58,.15) 20%,
      rgba(201,154,70,.13) 34%,
      rgba(255,225,155,.07) 48%,
      rgba(201,154,70,0) 76%);
}

.danger #aboutLuIris::before,
#aboutLuIris.danger::before {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(21,28,30,.24) 0%,
      rgba(21,28,30,.12) 8%,
      rgba(150,70,66,.15) 20%,
      rgba(207,91,82,.12) 34%,
      rgba(255,206,190,.06) 48%,
      rgba(207,91,82,0) 76%);
}

/* only pupil lives */
.aboutLuPupil,
.aboutLuPupil {
  z-index: 4 !important;
  width: calc(var(--pupil-size) * .52) !important;
  height: calc(var(--pupil-size) * .52) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(41,47,48,.96) 0%,
      rgba(17,22,23,.98) 58%,
      rgba(4,7,8,.98) 100%) !important;
  box-shadow:
    0 8px 26px rgba(0,0,0,.20),
    0 0 16px rgba(12,16,17,.20),
    inset 0 0 10px rgba(255,255,255,.035) !important;
  will-change: transform !important;
}

.aboutLuPupil {
  width: calc(var(--about-pupil-size) * .52) !important;
  height: calc(var(--about-pupil-size) * .52) !important;
}

/* small static catchlight */
.aboutLuShine,
.aboutLuShine {
  z-index: 5 !important;
  width: 7px !important;
  height: 7px !important;
  left: calc(50% + 19px) !important;
  top: calc(50% - 23px) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.55),
    -8px 10px 18px rgba(255,230,190,.13) !important;
  opacity: .78 !important;
  pointer-events: none !important;
}

.aboutLuShine {
  width: 5px !important;
  height: 5px !important;
  opacity: .55 !important;
}

/* blink is the only non-pupil change */
#aboutLuIris.blink .iris-ring,
#aboutLuIris.blink .iris-noise,
#aboutLuIris.blink .aboutIrisRing,
#aboutLuIris.blink .aboutIrisNoise,
#aboutLuIris.blink::before,
#aboutLuIris.blink::before {
  transform: scaleY(.10) !important;
  transition: transform 130ms ease-in !important;
}

#aboutLuIris:not(.blink) .iris-ring,
#aboutLuIris:not(.blink) .iris-noise,
#aboutLuIris:not(.blink) .aboutIrisRing,
#aboutLuIris:not(.blink) .aboutIrisNoise,
#aboutLuIris:not(.blink)::before,
#aboutLuIris:not(.blink)::before {
  transform: scaleY(1) !important;
  transition: transform 260ms ease-out !important;
}

/* stop old breathing/turning completely */
@keyframes iris-breathe { from { transform:none; opacity:1; } to { transform:none; opacity:1; } }
@keyframes iris-turn { from { transform:none; } to { transform:none; } }
@keyframes iris-turn-rev { from { transform:none; } to { transform:none; } }

@media(max-width:520px) {
  .aboutLuPupil { width: calc(var(--pupil-size) * .48) !important; height: calc(var(--pupil-size) * .48) !important; }
}




/* ==========================================================
   About visibility fix — Lu eye visible, still subtle
   ========================================================== */

#aboutLayer #aboutLuIris{
  display:grid !important;
  visibility:visible !important;
  position:absolute !important;
  top:31% !important;
  right:8vw !important;
  z-index:var(--z-overlay-content) !important;
  width:min(30vw,220px) !important;
  height:min(30vw,220px) !important;
  border-radius:50% !important;
  place-items:center !important;
  opacity:.42 !important;
  pointer-events:none !important;
  mix-blend-mode:multiply !important;
  overflow:visible !important;
  isolation:isolate !important;
  filter:
    drop-shadow(0 0 42px rgba(85,143,76,.18))
    drop-shadow(0 0 80px rgba(85,143,76,.08)) !important;
}

#aboutLayer #aboutLuIris::before{
  content:"" !important;
  position:absolute !important;
  inset:-24% !important;
  border-radius:50% !important;
  z-index:0 !important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(18,24,25,.22) 0%,
      rgba(18,24,25,.11) 8%,
      rgba(85,143,76,.16) 19%,
      rgba(133,191,125,.12) 34%,
      rgba(255,236,190,.055) 48%,
      rgba(133,191,125,.018) 62%,
      rgba(133,191,125,0) 78%) !important;
  filter:blur(8px) !important;
  opacity:1 !important;
  transform:none !important;
}

#aboutLayer #aboutLuIris .aboutIrisRing,
#aboutLayer #aboutLuIris .aboutIrisNoise{
  display:block !important;
  position:absolute !important;
  border-radius:50% !important;
  pointer-events:none !important;
  animation:none !important;
}

#aboutLayer #aboutLuIris .aboutIrisRing.r1{
  inset:-5% !important;
  opacity:.18 !important;
  background:
    repeating-conic-gradient(from 17deg,
      rgba(85,143,76,.34) 0deg,
      rgba(255,235,190,.12) 1deg,
      transparent 2.6deg,
      transparent 8.5deg) !important;
  mask:radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%) !important;
  -webkit-mask:radial-gradient(circle, transparent 0 21%, #000 27% 58%, transparent 73%) !important;
  filter:blur(.8px) !important;
}

#aboutLayer #aboutLuIris .aboutIrisRing.r2{
  inset:4% !important;
  opacity:.11 !important;
  background:
    repeating-conic-gradient(from 124deg,
      rgba(93,150,156,.20) 0deg,
      rgba(255,223,160,.10) 1.2deg,
      transparent 3.4deg,
      transparent 11deg) !important;
  mask:radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%) !important;
  -webkit-mask:radial-gradient(circle, transparent 0 25%, #000 30% 62%, transparent 76%) !important;
  filter:blur(1.4px) !important;
}

#aboutLayer #aboutLuIris .aboutIrisRing.r3{
  inset:20% !important;
  opacity:.28 !important;
  border:0 !important;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.58),
    0 0 36px rgba(85,143,76,.10) !important;
}

#aboutLayer #aboutLuIris .aboutIrisNoise{
  inset:-2% !important;
  opacity:.24 !important;
  filter:blur(2.2px) !important;
  background:
    radial-gradient(circle at 43% 39%, rgba(255,255,255,.72), transparent 5%),
    radial-gradient(circle at 54% 50%, rgba(85,143,76,.24), transparent 23%),
    radial-gradient(circle at 48% 47%, rgba(255,230,176,.14), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), transparent 64%) !important;
}

#aboutLayer #aboutLuIris .aboutLuPupil{
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  z-index:4 !important;
  width:calc(var(--about-pupil-size, 34px) * .52) !important;
  height:calc(var(--about-pupil-size, 34px) * .52) !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(41,47,48,.96) 0%,
      rgba(17,22,23,.98) 58%,
      rgba(4,7,8,.98) 100%) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    0 0 14px rgba(12,16,17,.16) !important;
  transform:translate(calc(-50% + var(--about-eye-x, 0px)), calc(-50% + var(--about-eye-y, 0px))) !important;
}

#aboutLayer #aboutLuIris .aboutLuShine{
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  width:5px !important;
  height:5px !important;
  left:calc(50% + 15px) !important;
  top:calc(50% - 18px) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 0 7px rgba(255,255,255,.5) !important;
  opacity:.72 !important;
}

@media screen and (max-width:768px){
  #aboutLayer #aboutLuIris{
    top:29% !important;
    right:8vw !important;
    width:min(46vw,160px) !important;
    height:min(46vw,160px) !important;
    opacity:.38 !important;
  }
}




/* ==========================================================
   Pupil-as-algorithm fix
   The iris stays static. The pupil visibly moves and carries all state.
   ========================================================== */

.iris-presence,
#aboutLuIris{
  animation:none !important;
  transform:none !important;
}

.iris-ring,
.aboutIrisRing,
.iris-noise,
.aboutIrisNoise{
  animation:none !important;
}

/* IMPORTANT: do not freeze pupil transform here — JS owns it */
.pupil,
.aboutLuPupil{
  left:50% !important;
  top:50% !important;
  z-index:10 !important;
  width:calc(var(--pupil-size) * .48) !important;
  height:calc(var(--pupil-size) * .48) !important;
  min-width:14px !important;
  min-height:14px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 38% 32%,
      rgba(46,51,52,.98) 0%,
      rgba(15,20,21,.99) 58%,
      rgba(2,5,6,.99) 100%) !important;
  box-shadow:
    0 8px 26px rgba(0,0,0,.22),
    0 0 18px rgba(0,0,0,.16),
    inset 0 0 9px rgba(255,255,255,.045) !important;
  will-change:transform !important;
  transform:translate(-50%, -50%);
}

.aboutLuPupil{
  width:calc(var(--about-pupil-size, 34px) * .48) !important;
  height:calc(var(--about-pupil-size, 34px) * .48) !important;
  min-width:12px !important;
  min-height:12px !important;
}

/* remove any older selectors that forced a static about transform */
#aboutLayer #aboutLuIris .aboutLuPupil{
  transform:translate(-50%, -50%);
}

/* blink hides/compresses the pupil briefly */
.iris-presence.blink .pupil,
#aboutLuIris.blink .aboutLuPupil{
  opacity:0 !important;
  transition:opacity 90ms ease !important;
}

.shine,
.aboutLuShine{
  z-index:11 !important;
  pointer-events:none !important;
}

@media(max-width:520px){
  .pupil{min-width:12px!important;min-height:12px!important;}
}




/* ==========================================================
   Blink restored
   Iris/shadow closes only during blink; pupil keeps algorithm motion otherwise.
   ========================================================== */

.iris-presence.blink .pupil,
#aboutLuIris.blink .aboutLuPupil{
  opacity:0 !important;
}

.iris-presence.blink::before,
#aboutLuIris.blink::before{
  transform:scaleY(.08) !important;
  transition:transform 120ms ease-in !important;
}

.iris-presence:not(.blink)::before,
#aboutLuIris:not(.blink)::before{
  transform:scaleY(1) !important;
  transition:transform 260ms ease-out !important;
}

.iris-presence.blink .iris-ring,
.iris-presence.blink .iris-noise,
#aboutLuIris.blink .aboutIrisRing,
#aboutLuIris.blink .aboutIrisNoise{
  transform:scaleY(.08) !important;
  opacity:.12 !important;
  transition:transform 120ms ease-in, opacity 120ms ease-in !important;
}

.iris-presence:not(.blink) .iris-ring,
.iris-presence:not(.blink) .iris-noise,
#aboutLuIris:not(.blink) .aboutIrisRing,
#aboutLuIris:not(.blink) .aboutIrisNoise{
  transform:scaleY(1) !important;
  transition:transform 260ms ease-out, opacity 260ms ease-out !important;
}

/* JS owns transform. CSS must not force static transform on the pupil. */
.pupil,
.aboutLuPupil{
  transition:opacity 90ms ease !important;
}


/* Lu Eye v3 compatibility */
#aboutLuIris{display:none!important;}




/* ==========================================================
   Lu Eye v3 — About layer final integration
   This belongs in style.css and ensures the shared eye is visible.
   ========================================================== */

#aboutLayer #aboutLuEyeWrap{
  position:fixed !important;
  top:28% !important;
  right:8vw !important;
  z-index:var(--z-overlay-content) !important;
  display:grid !important;
  justify-items:center !important;
  align-items:center !important;
  gap:.55rem !important;
  pointer-events:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

#aboutLayer #aboutLuEye{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

#aboutLayer #aboutBranchCanvas,
#aboutLayer #aboutBranchLegend,
#aboutLayer #aboutLuIris{
  display:none !important;
}

@media screen and (max-width:1024px){
  #aboutLayer #aboutLuEyeWrap{
    top:23% !important;
    right:8vw !important;
  }
}

@media screen and (max-width:768px){
  #aboutLayer #aboutLuEyeWrap{
    top:16% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  #aboutLayer .aboutLuHi{
    margin-top:.35rem !important;
    font-size:.92rem !important;
  }
}

@media screen and (max-width:480px){
  #aboutLayer #aboutLuEyeWrap{
    top:14% !important;
  }

  #aboutLayer .aboutLuHi{
    font-size:.88rem !important;
  }
}




/* ==========================================================
   Lu Eye v3 — About Sweet Spot / optical only
   Quieter About eye, smaller presence, softer "Hi."
   No PHP or JS changes required.
   ========================================================== */

.aboutLuEyeWrap{
  top:18% !important;
  right:8vw !important;
  gap:.45rem !important;
}

.lu-eye-about{
  --lu-eye-size:min(36vw,132px) !important;
  opacity:1 !important;
  filter:
    drop-shadow(0 0 calc(42px * var(--lu-eye-glow)) rgba(var(--lu-tone), .26))
    drop-shadow(0 0 60px rgba(var(--lu-tone), .08)) !important;
}

.lu-eye-about .lu-eye-shadow{
  opacity:.72 !important;
  filter:blur(8px) saturate(1.02) !important;
}

.lu-eye-about .lu-eye-fiber.f1{
  opacity:.095 !important;
}

.lu-eye-about .lu-eye-fiber.f2{
  opacity:.055 !important;
}

.lu-eye-about .lu-eye-depth{
  opacity:.22 !important;
}

.lu-eye-about .lu-eye-pupil{
  opacity:.86;
}

.lu-eye-about .lu-eye-shine{
  opacity:.58;
  width:5px;
  height:5px;
}

.aboutLuHi{
  opacity:.72 !important;
}

@media screen and (max-width:1024px){
  .aboutLuEyeWrap{
    top:17% !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(34vw,126px) !important;
  }
}

@media screen and (max-width:768px){
  .aboutLuEyeWrap{
    top:15% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(38vw,122px) !important;
  }

  .aboutLuHi{
    font-size:.82rem !important;
    opacity:.68 !important;
  }
}

@media screen and (max-width:480px){
  .aboutLuEyeWrap{
    top:13.5% !important;
  }

  .lu-eye-about{
    --lu-eye-size:min(40vw,112px) !important;
  }

  .aboutLuHi{
    font-size:.78rem !important;
  }
}




/* ==========================================================
   Lu Eye v3 — About grayscale final
   About eye is monochrome. Algorithm remains visible only
   through pupil motion/size/blink, not through iris color.
   ========================================================== */

#aboutLayer .lu-eye-about,
.lu-eye-about{
  --lu-tone: 92,98,101 !important;
  filter:
    drop-shadow(0 0 calc(38px * var(--lu-eye-glow)) rgba(72,78,81,.20))
    drop-shadow(0 0 58px rgba(45,49,51,.08)) !important;
}

#aboutLayer .lu-eye-about[data-tone="watch"],
#aboutLayer .lu-eye-about[data-tone="danger"],
.lu-eye-about[data-tone="watch"],
.lu-eye-about[data-tone="danger"]{
  --lu-tone: 92,98,101 !important;
}

#aboutLayer .lu-eye-about .lu-eye-shadow,
.lu-eye-about .lu-eye-shadow{
  background:
    radial-gradient(circle at 50% 50%,
      rgba(16,18,19,.24) 0%,
      rgba(32,35,36,.13) 8%,
      rgba(74,80,83,.16) 19%,
      rgba(118,125,128,.105) 34%,
      rgba(230,232,232,.075) 48%,
      rgba(142,148,151,.028) 62%,
      rgba(142,148,151,0) 78%),
    radial-gradient(circle at 38% 33%,
      rgba(255,255,255,.44) 0%,
      rgba(255,255,255,.20) 8%,
      rgba(255,255,255,0) 23%) !important;
  opacity:.70 !important;
  filter:blur(8px) saturate(.72) !important;
}

#aboutLayer .lu-eye-about .lu-eye-fiber.f1,
.lu-eye-about .lu-eye-fiber.f1{
  opacity:.085 !important;
  background:
    repeating-conic-gradient(from 17deg,
      rgba(86,92,95,.30) 0deg,
      rgba(210,213,214,.12) 1deg,
      transparent 2.6deg,
      transparent 8.5deg) !important;
  filter:blur(.95px) saturate(.65) !important;
}

#aboutLayer .lu-eye-about .lu-eye-fiber.f2,
.lu-eye-about .lu-eye-fiber.f2{
  opacity:.045 !important;
  background:
    repeating-conic-gradient(from 124deg,
      rgba(70,78,82,.18) 0deg,
      rgba(205,208,209,.10) 1.2deg,
      transparent 3.4deg,
      transparent 11deg) !important;
  filter:blur(1.45px) saturate(.6) !important;
}

#aboutLayer .lu-eye-about .lu-eye-depth,
.lu-eye-about .lu-eye-depth{
  opacity:.20 !important;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.56),
    0 0 30px rgba(70,76,79,.08) !important;
}

#aboutLayer .lu-eye-about .lu-eye-pupil,
.lu-eye-about .lu-eye-pupil{
  background:
    radial-gradient(circle at 38% 32%,
      rgba(45,49,50,.98) 0%,
      rgba(17,19,20,.99) 58%,
      rgba(4,5,6,.99) 100%) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 16px rgba(0,0,0,.13),
    inset 0 0 8px rgba(255,255,255,.045) !important;
  opacity:.84;
}

#aboutLayer .lu-eye-about .lu-eye-shine,
.lu-eye-about .lu-eye-shine{
  background:rgba(255,255,255,.82) !important;
  box-shadow:
    0 0 7px rgba(255,255,255,.48),
    -8px 10px 18px rgba(210,213,214,.10) !important;
  opacity:.55 !important;
}

#aboutLayer .aboutLuHi,
.aboutLuHi{
  color:#777 !important;
  opacity:.68 !important;
}


/* Final: aboutLuHi uses the exact aboutLead typography */
#aboutLayer .aboutLuHi,
.aboutLuHi{
  color:#666 !important;
  font-family:'Raleway',sans-serif !important;
  font-size:1.08em !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-shadow:none !important;
  opacity:1 !important;
}