/* ================================================================
   FRUTIGER AERO — "Digital Greenhouse"
   Full-viewport floating glass islands over a living aurora.
   Every element floats, tilts, and reacts to its neighbors.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&display=swap');

/* === PALETTE === */
:root {
  --sky:          #3EAAE4;
  --sky-deep:     #1B6FA6;
  --sky-pale:     #A8DDF5;
  --aqua:         #47C9D2;
  --green:        #72BF44;
  --green-deep:   #4A9A2B;
  --green-pale:   #B8E886;
  --leaf:         #5DAE2B;
  --white:        #FFFFFF;
  --text:         #153248;
  --text-mid:     #2D6080;
  --text-muted:   #5B99B5;

  --glass:        rgba(255, 255, 255, 0.52);
  --glass-border: rgba(255, 255, 255, 0.60);
  --glass-shadow: rgba(8, 40, 72, 0.14);

  --r:    16px;
  --r-sm: 12px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 100px;

  --f: "Outfit", "Segoe UI", "Frutiger", sans-serif;

  --mx: 0;
  --my: 0;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }

/* === BODY — The Sky === */
body {
  margin: 0;
  padding: 24px 20px 40px;
  font-family: var(--f);
  font-weight: 400;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(170deg,
      #082E52 0%, #0D4A78 10%, #1976A8 22%, #3EAAE4 36%,
      #6EC8E8 48%, #A1DFF0 56%, #8BCB6A 72%, #5AAF2F 86%, #3D8C1C 100%
    );
  background-attachment: fixed;
}

/* ================================================================
   SCENE — Aurora blobs, orbs, leaves
   All parallax-reactive via --mx / --my custom properties
   ================================================================ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Sunlight wash */
.scene::before {
  content: "";
  position: absolute;
  top: -25%; right: -18%;
  width: 75vw; height: 75vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,240,0.22) 0%, transparent 65%);
  animation: sun-breathe 18s ease-in-out infinite alternate;
}
@keyframes sun-breathe {
  0%   { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0.85; transform: scale(1.2); }
}

/* === SPARKLE DOTS — tiny twinkling stars === */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 25% 42%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 72% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 38% 68%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 65% 78%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 82% 62%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 48% 92%, rgba(255,255,255,0.4), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.7; }
  100% { opacity: 0.4; }
}

/* === AURORA BLOBS — inverse parallax for depth === */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  mix-blend-mode: screen;
  translate: calc(var(--mx) * -18px) calc(var(--my) * -14px);
  transition: translate 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ab-1 {
  width: 65vw; height: 65vw; top: -18%; left: -12%;
  background: radial-gradient(circle, rgba(62,170,228,0.55), transparent 70%);
  animation: ab-1 28s ease-in-out infinite alternate;
}
.ab-2 {
  width: 55vw; height: 55vw; bottom: -12%; right: -18%;
  background: radial-gradient(circle, rgba(114,191,68,0.50), transparent 70%);
  animation: ab-2 34s ease-in-out infinite alternate;
  translate: calc(var(--mx) * -25px) calc(var(--my) * -20px);
}
.ab-3 {
  width: 40vw; height: 40vw; top: 28%; left: 35%;
  background: radial-gradient(circle, rgba(71,201,210,0.35), transparent 70%);
  animation: ab-3 22s ease-in-out infinite alternate;
  translate: calc(var(--mx) * -12px) calc(var(--my) * -10px);
}

@keyframes ab-1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,3vh) scale(1.15); } 100% { transform: translate(-3vw,-2vh) scale(1.05); } }
@keyframes ab-2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,-4vh) scale(1.1); } 100% { transform: translate(2vw,3vh) scale(0.95); } }
@keyframes ab-3 { 0% { transform: translate(0,0) scale(1); opacity:.35; } 50% { transform: translate(6vw,-5vh) scale(1.2); opacity:.5; } 100% { transform: translate(-2vw,4vh) scale(.9); opacity:.3; } }

/* === GLASS ORBS — parallax-reactive floating bubbles === */
.orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.50), rgba(255,255,255,0.08) 45%, transparent 70%);
  box-shadow: inset 0 -6px 18px rgba(62,170,228,0.10), 0 0 20px rgba(255,255,255,0.06);
  transition: translate 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.orb::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.75), transparent);
  transform: rotate(-22deg);
}
.orb::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.42);
}

.orb-1 { width:180px; height:180px; top:5%;  left:3%;  --px:35; --py:25; animation: o1 22s ease-in-out infinite; }
.orb-2 { width:110px; height:110px; bottom:10%; right:5%; --px:22; --py:18; animation: o2 28s ease-in-out infinite; }
.orb-3 { width:75px;  height:75px;  top:40%; right:2%;  --px:18; --py:14; animation: o3 16s ease-in-out infinite; }
.orb-4 { width:55px;  height:55px;  top:65%; left:2%;   --px:28; --py:20; animation: o4 19s ease-in-out infinite; }
.orb-5 { width:40px;  height:40px;  top:20%; left:10%;  --px:15; --py:12; animation: o5 24s ease-in-out infinite; }
.orb-6 { width:28px;  height:28px;  top:52%; left:6%;   --px:20; --py:16; animation: o6 14s ease-in-out infinite; }
.orb-7 { width:50px;  height:50px;  top:78%; right:10%; --px:24; --py:18; animation: o7 20s ease-in-out infinite; }
.orb-8 { width:90px;  height:90px;  top:15%; right:8%;  --px:30; --py:22; animation: o8 26s ease-in-out infinite; }

/* Parallax via translate (composes with transform animation) */
.orb { translate: calc(var(--mx) * calc(var(--px, 20) * 1px)) calc(var(--my) * calc(var(--py, 15) * 1px)); }

.orb-1::before { width:44%; height:27%; top:10%; left:14%; }
.orb-2::before { width:40%; height:24%; top:12%; left:18%; }
.orb-3::before { width:38%; height:22%; top:13%; left:16%; }
.orb-4::before { width:42%; height:26%; top:11%; left:17%; }
.orb-5::before { width:40%; height:22%; top:14%; left:18%; }
.orb-6::before { width:36%; height:20%; top:15%; left:20%; }
.orb-7::before { width:40%; height:24%; top:12%; left:16%; }
.orb-8::before { width:42%; height:26%; top:11%; left:15%; }

@keyframes o1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(22px,-28px) scale(1.06)} 66%{transform:translate(-14px,18px) scale(.96)} }
@keyframes o2 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(-28px,20px) scale(1.08)} 75%{transform:translate(14px,-16px) scale(.94)} }
@keyframes o3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-18px,-22px)} }
@keyframes o4 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(24px,-18px) scale(1.12)} }
@keyframes o5 { 0%,100%{transform:translate(0,0)} 35%{transform:translate(12px,18px)} 70%{transform:translate(-10px,-12px)} }
@keyframes o6 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(16px,10px)} }
@keyframes o7 { 0%,100%{transform:translate(0,0) scale(1)} 45%{transform:translate(-20px,-14px) scale(1.06)} }
@keyframes o8 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(18px,-22px) scale(1.04)} 80%{transform:translate(-10px,12px) scale(.97)} }

/* === LEAVES — parallax-reactive === */
.leaf {
  position: absolute;
  border-radius: 0 70% 0 70%;
  opacity: 0.32;
  transition: translate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.leaf::before {
  content: "";
  position: absolute;
  top: 50%; left: 15%;
  width: 65%; height: 1.5px;
  background: rgba(255,255,255,0.25);
  transform: translateY(-50%) rotate(-2deg);
  border-radius: 2px;
}

.leaf-1 {
  width:95px; height:58px; top:12%; right:5%;
  background: linear-gradient(135deg, var(--green) 30%, var(--green-pale));
  animation: lf1 12s ease-in-out infinite alternate;
  translate: calc(var(--mx) * 12px) calc(var(--my) * 10px);
}
.leaf-2 {
  width:65px; height:40px; bottom:18%; left:3%;
  background: linear-gradient(135deg, var(--leaf), var(--green-pale));
  animation: lf2 15s ease-in-out 2s infinite alternate;
  translate: calc(var(--mx) * 8px) calc(var(--my) * 7px);
}
.leaf-3 {
  width:48px; height:30px; top:58%; right:2%;
  background: linear-gradient(135deg, var(--green-deep), var(--green));
  animation: lf3 10s ease-in-out 4s infinite alternate;
  translate: calc(var(--mx) * 15px) calc(var(--my) * 12px);
}

@keyframes lf1 { 0%{transform:rotate(25deg) translate(0,0)} 50%{transform:rotate(31deg) translate(5px,-7px)} 100%{transform:rotate(21deg) translate(-4px,4px)} }
@keyframes lf2 { 0%{transform:rotate(-15deg) translate(0,0)} 50%{transform:rotate(-9deg) translate(4px,-5px)} 100%{transform:rotate(-19deg) translate(-3px,3px)} }
@keyframes lf3 { 0%{transform:rotate(40deg) translate(0,0)} 50%{transform:rotate(46deg) translate(3px,-5px)} 100%{transform:rotate(36deg) translate(-2px,3px)} }

/* ================================================================
   WRAPPER — wide, breathing layout
   ================================================================ */
#wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ================================================================
   GLASS CARD — the core Aero surface
   ================================================================ */
.glass-card {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.6) brightness(1.05);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 24px 26px 22px;
  box-shadow:
    0 8px 32px var(--glass-shadow),
    0 1.5px 0 rgba(255,255,255,0.45) inset,
    0 -1px 3px rgba(0,20,50,0.04) inset;
  transition:
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.4s ease,
    translate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    scale 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.4s ease;
  will-change: transform;
}

/* Aero top-edge gloss */
.glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10px; right: 10px;
  height: 50%;
  border-radius: var(--r-lg) var(--r-lg) 50% 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.02) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.glass-card > *:not(.drops) {
  position: relative;
  z-index: 2;
}

/* Cursor spotlight — follows mouse via --cx/--cy set by JS */
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at calc(var(--cx, 50) * 1%) calc(var(--cy, 50) * 1%),
    rgba(255,255,255,0.12) 0%, transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.glass-card.card-hover::after { opacity: 1; }

/* === EXTREME HOVER — card glows and lifts === */
.glass-card.card-hover {
  box-shadow:
    0 24px 70px rgba(62,170,228,0.35),
    0 1.5px 0 rgba(255,255,255,0.60) inset,
    0 0 55px rgba(62,170,228,0.16),
    0 0 0 1px rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.92);
}

/* === NEIGHBOR PUSH — other cards gently drift === */
.glass-card.card-pushed {
  filter: brightness(0.97);
  translate: 0 4px;
}

/* === CARD POSITIONS — staggered layout === */
.cards-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-left  { max-width: 75%; margin-right: auto; margin-left: 0; }
.card-wide  { max-width: 100%; }
.card-right { max-width: 70%; margin-left: auto; margin-right: 0; }
.card-center { max-width: 60%; margin: 0 auto; }

.glass-card-sm {
  padding: 0;
  border-radius: var(--r);
}
.glass-card-sm::before { border-radius: var(--r) var(--r) 50% 50%; }

/* Card headings */
.glass-card h2 {
  margin: 0 0 14px;
  font-size: 1.25em;
  font-weight: 700;
  color: var(--sky-deep);
  letter-spacing: 0.3px;
}
.glass-card h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sky), var(--aqua), var(--green), var(--sky));
  background-size: 200% 100%;
  animation: gradient-slide 4s linear infinite;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gradient-slide { 0%{background-position:0% 0} 100%{background-position:200% 0} }
.glass-card.card-hover h2::after {
  width: 100%;
}

.glass-card p {
  font-size: 0.92em;
  line-height: 1.75;
  margin: 0 0 8px;
}

/* === WATER DROPS — jiggle on hover === */
.drops {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.drops::before,
.drops::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 25%,
    rgba(200,235,255,0.15) 50%, transparent 70%
  );
  box-shadow:
    0 2px 4px rgba(0,30,60,0.12),
    inset 0 -1.5px 2px rgba(0,30,60,0.06),
    0 0 0 0.5px rgba(255,255,255,0.35);
  transition: transform 0.3s ease;
}
.drops::before { width:10px; height:12px; top:18px; right:32px; }
.drops::after  { width:6px;  height:7px;  top:40px; right:58px; }

.card-hover .drops::before { animation: drop-jiggle 0.5s ease; }
.card-hover .drops::after  { animation: drop-jiggle 0.5s 0.08s ease; }

@keyframes drop-jiggle {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(2px,-1px); }
  50%     { transform: translate(-1px,2px); }
  75%     { transform: translate(1px,-1px); }
}

/* ================================================================
   HEADER — wide Vista title bar
   ================================================================ */
#header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(25,118,168,0.62) 0%, rgba(62,170,228,0.52) 30%,
    rgba(71,201,210,0.42) 60%, rgba(114,191,68,0.38) 100%
  );
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1.5px solid rgba(255,255,255,0.50);
  border-bottom-color: rgba(255,255,255,0.28);
  border-radius: var(--r-xl);
  padding: 36px 32px 30px;
  text-align: center;
  user-select: none;
  box-shadow:
    0 12px 48px rgba(8,50,90,0.20),
    0 2px 0 rgba(255,255,255,0.38) inset,
    0 -1px 3px rgba(0,20,50,0.04) inset;
  transition: box-shadow 0.4s ease;
  will-change: transform;
}

#header::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 55%;
  border-radius: var(--r-xl) var(--r-xl) 50% 50%;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.02) 65%, transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Sparkle */
#header::after {
  content: "";
  position: absolute;
  top: 18px; left: 30px;
  width: 6px; height: 6px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.6);
  animation: sparkle 4s ease-in-out infinite;
  z-index: 4;
}
@keyframes sparkle {
  0%,100% { opacity:.3; transform:scale(.8); }
  50%     { opacity:1;  transform:scale(1.3); }
}

#header h1 {
  position: relative; z-index: 2;
  margin: 0;
  font-size: 3.2em;
  font-weight: 200;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,60,120,0.28), 0 0 50px rgba(255,255,255,0.12);
  letter-spacing: 5px;
  background: linear-gradient(90deg, #fff 0%, #A8DDF5 25%, #fff 50%, #B8E886 75%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-shimmer 6s ease-in-out infinite;
}
@keyframes title-shimmer { 0%,100%{background-position:0% center} 50%{background-position:200% center} }

#header .tagline {
  position: relative; z-index: 2;
  margin: 12px 0 0;
  font-size: 1.05em;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  letter-spacing: 3px;
  text-shadow: 0 1px 6px rgba(0,50,100,0.22);
  animation: tagline-breathe 5s ease-in-out infinite;
}
@keyframes tagline-breathe {
  0%,100% { letter-spacing: 3px; opacity: 0.85; }
  50%     { letter-spacing: 4.5px; opacity: 1; }
}

/* ================================================================
   SECTION TABS — glossy floating pills
   ================================================================ */
.section-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  will-change: transform;
}

.tab-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 10px 26px;
  font-family: var(--f);
  font-size: 0.84em;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(220,245,255,0.52) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow:
    0 4px 14px var(--glass-shadow),
    0 1px 0 rgba(255,255,255,0.50) inset;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.tab-pill::before {
  content: "";
  position: absolute;
  top: 0; left: 5px; right: 5px; height: 50%;
  border-radius: var(--r-pill) var(--r-pill) 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.tab-pill:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(185,235,255,0.78) 100%);
  box-shadow:
    0 8px 28px rgba(62,170,228,0.28),
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 0 22px rgba(62,170,228,0.14);
  color: var(--sky-deep);
}
.tab-pill:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.40) 47%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.40) 53%, transparent 70%);
  background-size: 250% 100%;
  animation: btn-shine 0.7s ease-out;
  pointer-events: none;
}
.tab-pill:active {
  box-shadow: 0 2px 8px var(--glass-shadow);
  transform: scale(0.94) !important;
}

/* ================================================================
   SITE NAV — blue gel capsules
   ================================================================ */
#nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  will-change: transform;
}
#nav a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  font-family: var(--f);
  font-size: 0.84em;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--white);
  text-decoration: none;
  background: linear-gradient(180deg,
    rgba(62,170,228,0.72) 0%, rgba(27,111,166,0.68) 45%, rgba(25,90,140,0.78) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.32);
  border-bottom-color: rgba(0,40,80,0.18);
  border-radius: var(--r-pill);
  box-shadow:
    0 4px 16px rgba(8,50,100,0.18),
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 -1px 2px rgba(0,20,60,0.08) inset;
  text-shadow: 0 1px 3px rgba(0,40,80,0.28);
  transition: all 0.25s ease;
  will-change: transform;
}
#nav a::before {
  content: "";
  position: absolute;
  top: 0; left: 5px; right: 5px; height: 48%;
  border-radius: var(--r-pill) var(--r-pill) 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
#nav a:hover {
  background: linear-gradient(180deg,
    rgba(85,200,245,0.88) 0%, rgba(45,150,210,0.82) 45%, rgba(35,120,180,0.92) 100%
  );
  box-shadow:
    0 8px 28px rgba(62,170,228,0.35),
    0 1px 0 rgba(255,255,255,0.48) inset,
    0 0 24px rgba(62,170,228,0.16);
  border-color: rgba(255,255,255,0.55);
}
#nav a:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 47%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.35) 53%, transparent 70%);
  background-size: 250% 100%;
  animation: btn-shine 0.7s ease-out;
  pointer-events: none;
}
@keyframes btn-shine { from{background-position:150% 0} to{background-position:-50% 0} }
#nav a:active {
  box-shadow: 0 2px 8px rgba(8,50,100,0.25) inset;
  transform: scale(0.95) !important;
}

/* ================================================================
   PHOTO GRID
   ================================================================ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.photo-item {
  position: relative;
  text-align: center;
  border: 1.5px solid rgba(255,255,255,0.68);
  border-radius: var(--r-sm);
  padding: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(215,240,255,0.38) 100%);
  min-width: 0;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(8,40,70,0.10),
    0 1px 0 rgba(255,255,255,0.48) inset;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.photo-item::before {
  content: "";
  position: absolute;
  top: 0; left: 3px; right: 3px; height: 45%;
  border-radius: var(--r-sm) var(--r-sm) 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.photo-item:hover {
  transform: translateY(-8px) scale(1.07) rotate(0.8deg);
  box-shadow:
    0 16px 40px rgba(62,170,228,0.25),
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 0 28px rgba(62,170,228,0.12);
  border-color: rgba(255,255,255,0.90);
}

.photo-placeholder {
  position: relative;
  background: linear-gradient(135deg, rgba(168,221,245,0.30), rgba(184,232,134,0.18));
  border: none;
  border-radius: 8px;
  font-size: 0.8em;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.photo-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.4s ease;
}
.photo-full {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.4s ease;
  pointer-events: none;
}
.photo-item:hover .photo-thumb,
.photo-item:hover .photo-full {
  transform: scale(1.06);
}

/* === LOAD MORE — gel button === */
.load-more-btn {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 22px auto 4px;
  font-family: var(--f);
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 12px 34px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(210,240,255,0.55) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  box-shadow: 0 4px 16px var(--glass-shadow), 0 1px 0 rgba(255,255,255,0.52) inset;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.load-more-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 6px; right: 6px; height: 50%;
  border-radius: var(--r-pill) var(--r-pill) 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.load-more-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(185,235,255,0.75) 100%);
  box-shadow:
    0 8px 28px rgba(62,170,228,0.22),
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 0 20px rgba(62,170,228,0.10);
  color: var(--sky-deep);
  transform: translateY(-3px) scale(1.04);
}
.load-more-btn:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.40) 47%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.40) 53%, transparent 70%);
  background-size: 250% 100%;
  animation: btn-shine 0.7s ease-out;
  pointer-events: none;
}
.load-more-btn:active {
  transform: translateY(1px) scale(0.96);
  box-shadow: 0 2px 8px var(--glass-shadow);
}

/* === CLICK RIPPLE — spawned by JS === */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(168,221,245,0.25) 40%, transparent 70%);
  pointer-events: none;
  z-index: 10;
  animation: ripple-expand 0.6s ease-out forwards;
}
@keyframes ripple-expand {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(3); opacity: 0; }
}

/* === COMING SOON — shimmer === */
.coming-soon {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 22px;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(114,191,68,0.10) 0%, rgba(62,170,228,0.08) 40%, rgba(71,201,210,0.10) 100%);
  border: 1.5px solid rgba(114,191,68,0.18);
}
.coming-soon-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 48%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.25) 52%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 0%{background-position:150% 0} 100%{background-position:-50% 0} }

.coming-soon-icon {
  font-size:1.6em; position:relative; z-index:1;
  animation: icon-float 3s ease-in-out infinite;
}
@keyframes icon-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%     { transform: translateY(-4px) rotate(5deg); }
  75%     { transform: translateY(2px) rotate(-3deg); }
}
.coming-soon-text {
  position:relative; z-index:1;
  font-size:0.9em; font-weight:500;
  color: var(--text-mid);
  letter-spacing:0.5px;
}

/* === DISCLAIMER — fully animated accordion === */
.disclaimer-card { border-radius: var(--r); }
.disclaimer-card::before { border-radius: var(--r) var(--r) 50% 50%; }

.disclaimer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  font-family: var(--f);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  position: relative; z-index: 2;
  transition: color 0.3s, background 0.3s;
  border-radius: var(--r);
}
.disclaimer-toggle:hover { color: var(--sky); background: rgba(62,170,228,0.04); }
.disclaimer-card.is-open .disclaimer-toggle { color: var(--sky-deep); }

.toggle-icon {
  display: inline-block;
  font-weight: 300;
  font-size: 1.3em;
  line-height: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-open > .disclaimer-toggle > .toggle-icon,
.is-open > .fonts-toggle > .toggle-icon {
  transform: rotate(45deg);
}

.disclaimer-collapse,
.fonts-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.disclaimer-card.is-open > .disclaimer-collapse,
.fonts-list.is-open > .fonts-collapse {
  grid-template-rows: 1fr;
}

.disclaimer-body,
.fonts-body {
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(2px);
  transition:
    opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.4s ease;
}
.disclaimer-card.is-open > .disclaimer-collapse > .disclaimer-body,
.fonts-list.is-open > .fonts-collapse > .fonts-body {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.disclaimer-body {
  position: relative; z-index: 2;
  padding: 0 24px 18px;
  font-size: 0.78em;
  color: var(--text-muted);
  line-height: 1.7;
}
.disclaimer-body p { font-size: 1em; color: inherit; margin: 0 0 10px; }

.fonts-list { margin: 8px 0; }
.fonts-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  padding: 6px 0;
  transition: color 0.3s;
}
.fonts-toggle:hover { color: var(--sky); }
.fonts-body p { margin: 8px 0 0; line-height: 1.8; }

.privacy-pill {
  display:inline-block; margin-top:8px; padding:5px 14px;
  font-family:var(--f); font-size:0.88em; font-weight:600;
  color:var(--text-muted); text-decoration:none;
  border:1px solid rgba(62,170,228,0.20);
  border-radius:var(--r-pill);
  background:rgba(62,170,228,0.06);
  transition:all 0.2s;
}
.privacy-pill:hover {
  color:var(--sky-deep);
  background:rgba(62,170,228,0.14);
  border-color:rgba(62,170,228,0.35);
  transform: translateY(-1px);
}

/* ================================================================
   LIGHTBOX — frosted Aero glass
   ================================================================ */
#lightbox {
  display:none; position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(8,46,82,0.65) 0%, rgba(20,80,130,0.55) 50%, rgba(60,140,60,0.35) 100%);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  z-index:1000;
  align-items:center; justify-content:center; gap:16px;
  padding-bottom:5vh;
}
#lb-center { display:flex; flex-direction:column; align-items:center; gap:16px; perspective: 1000px; }
#lightbox.open { display:flex; animation: lb-bg-in 0.5s ease-out forwards; }
#lightbox.open #lightbox-wrap { animation: lb-pop-in 1.2s linear forwards; transform-style: preserve-3d; will-change: transform, opacity; }
#lightbox.open #lb-caption { animation: lb-caption-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
#lightbox.open #lb-prev { animation: lb-nav-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards; }
#lightbox.open #lb-next { animation: lb-nav-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards; }

#lightbox.closing { animation: lb-bg-out 0.4s ease-in forwards; }
#lightbox.closing #lightbox-wrap { animation: lb-pop-out 0.7s linear forwards; transform-style: preserve-3d; will-change: transform, opacity; }
#lightbox.closing #lb-caption { animation: lb-caption-out 0.25s ease-in forwards; }
#lightbox.closing #lb-prev,
#lightbox.closing #lb-next { animation: lb-nav-out 0.25s ease-in forwards; }

@keyframes lb-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lb-bg-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes lb-pop-in {
  0%   { opacity: 0; transform: scale(0.1) translateZ(-600px) translateX(-100px) translateY(70px) rotateY(540deg); }
  20%  { opacity: 0.5; transform: scale(0.3) translateZ(-400px) translateX(70px) translateY(-50px) rotateY(360deg); }
  45%  { opacity: 0.9; transform: scale(0.65) translateZ(-180px) translateX(-30px) translateY(20px) rotateY(160deg); }
  70%  { opacity: 1; transform: scale(0.95) translateZ(-20px) translateX(6px) translateY(-4px) rotateY(15deg); }
  85%  { transform: scale(1.02) translateZ(5px) rotateY(-3deg); }
  100% { transform: scale(1) translateZ(0) translateX(0) translateY(0) rotateY(0deg); }
}
@keyframes lb-pop-out {
  0%   { opacity: 1; transform: scale(1) translateZ(0) rotateY(0deg); }
  15%  { opacity: 1; transform: scale(1.02) translateZ(15px) translateX(12px) rotateY(-12deg); }
  50%  { opacity: 0.6; transform: scale(0.5) translateZ(-250px) translateX(-40px) translateY(-25px) rotateY(180deg); }
  100% { opacity: 0; transform: scale(0.05) translateZ(-700px) translateX(60px) translateY(50px) rotateY(540deg); }
}
@keyframes lb-caption-in {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lb-caption-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(8px); }
}
@keyframes lb-nav-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.5); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes lb-nav-out {
  from { opacity: 1; transform: translateY(-50%) scale(1); }
  to   { opacity: 0; transform: translateY(-50%) scale(0.5); }
}

#lightbox-wrap {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 100%);
  padding: 6px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.45),
    0 28px 80px rgba(0,0,0,0.45),
    0 0 100px rgba(62,170,228,0.15),
    0 2px 0 rgba(255,255,255,0.25) inset;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}
#lightbox-wrap:hover {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.60),
    0 32px 90px rgba(0,0,0,0.50),
    0 0 120px rgba(62,170,228,0.22),
    0 2px 0 rgba(255,255,255,0.35) inset;
}

#lb-thumb { width:100%; height:100%; object-fit:fill; display:block; border-radius: calc(var(--r-lg) - 6px); }
#lb-full {
  position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px);
  object-fit:fill; opacity:0; transition:opacity 0.5s ease;
  border-radius: calc(var(--r-lg) - 6px);
}

#lb-prev, #lb-next {
  position:fixed; top:50%; transform:translateY(-50%);
  height:60px; width:48px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.7);
  font-size:1.6em; font-family:var(--f); font-weight:300;
  user-select:none; z-index:1001; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.20) inset;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#lb-prev { left:20px; }
#lb-next { right:20px; }
#lb-prev:hover, #lb-next:hover {
  color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 100%);
  border-color: rgba(255,255,255,0.50);
  box-shadow: 0 8px 28px rgba(62,170,228,0.25), 0 1px 0 rgba(255,255,255,0.35) inset, 0 0 20px rgba(62,170,228,0.12);
  transform:translateY(-50%) scale(1.08);
}
#lb-prev:active, #lb-next:active {
  transform:translateY(-50%) scale(0.95);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) inset;
}

#lb-caption {
  color:rgba(255,255,255,0.80);
  font-size:0.88em; font-weight:300; letter-spacing:0.8px;
  text-align:center; user-select:none;
  padding:6px 22px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-pill);
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}

/* ================================================================
   FOOTER — dark glass taskbar
   ================================================================ */
#footer {
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,
    rgba(15,60,100,0.58) 0%, rgba(10,45,75,0.70) 45%, rgba(8,35,60,0.78) 100%
  );
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,0.20);
  border-top-color:rgba(255,255,255,0.35);
  border-radius:var(--r-lg);
  padding:24px 24px;
  text-align:center;
  box-shadow:0 8px 32px var(--glass-shadow), 0 1px 0 rgba(255,255,255,0.16) inset;
  transition:box-shadow 0.4s ease;
  will-change: transform;
}
#footer::before {
  content:""; position:absolute;
  top:0; left:10px; right:10px; height:48%;
  border-radius:var(--r-lg) var(--r-lg) 50% 50%;
  background:linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.01) 55%, transparent 100%);
  pointer-events:none;
}
#footer p {
  position:relative; z-index:1; margin:0;
  font-size:0.84em; font-weight:300; line-height:1.8;
  color:rgba(255,255,255,0.72);
  text-shadow:0 1px 3px rgba(0,20,50,0.28);
  letter-spacing:0.3px;
}
#footer:hover {
  box-shadow: 0 8px 32px var(--glass-shadow), 0 1px 0 rgba(255,255,255,0.22) inset, 0 0 40px rgba(62,170,228,0.08);
  border-color: rgba(255,255,255,0.32);
}
#footer a { color:rgba(255,255,255,0.88); text-decoration:none; transition:all 0.2s; display:inline-block; margin-top:2px; }
#footer a:hover { color:#fff; text-shadow: 0 0 12px rgba(168,221,245,0.5); }
.footer-privacy { font-size:0.88em; color:rgba(255,255,255,0.50) !important; }
.footer-privacy:hover { color:rgba(255,255,255,0.95) !important; text-shadow: 0 0 12px rgba(168,221,245,0.4) !important; }

/* ================================================================
   ENTRANCE ANIMATIONS
   ================================================================ */
/* Hide before entrance */
#header, .section-tabs .tab-pill, #nav a, .cards-flow > *, #footer { opacity: 0; }

@keyframes glass-rise {
  from { opacity:0; transform:translateY(28px) scale(0.97); filter:blur(4px); }
  to   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
#header              { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s forwards; }
.section-tabs .tab-pill:nth-child(1) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.08s forwards; }
.section-tabs .tab-pill:nth-child(2) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.11s forwards; }
.section-tabs .tab-pill:nth-child(3) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.14s forwards; }
#nav a:nth-child(1)  { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.12s forwards; }
#nav a:nth-child(2)  { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s forwards; }
#nav a:nth-child(3)  { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.18s forwards; }
#nav a:nth-child(4)  { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.21s forwards; }
#nav a:nth-child(5)  { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.24s forwards; }
.cards-flow > :nth-child(1) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.22s forwards; }
.cards-flow > :nth-child(2) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.28s forwards; }
.cards-flow > :nth-child(3) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.34s forwards; }
.cards-flow > :nth-child(4) { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.40s forwards; }
#footer              { animation: glass-rise 0.7s cubic-bezier(0.16,1,0.3,1) 0.46s forwards; }

/* === HIDDEN legacy === */
.footer-banner, #mobile-disclaimer, hr.fancy, .marquee-bar, #sidebar { display:none !important; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 700px) {
  body { padding: 16px 10px 32px; }
  #wrapper { gap: 14px; }
  #header { padding:36px 18px 28px; border-radius:var(--r-lg); }
  #header h1 { font-size:10vw; letter-spacing:2px; }
  #header .tagline { font-size:0.85em; letter-spacing:1.5px; }
  .section-tabs { gap:6px; }
  .tab-pill { font-size:0.74em; padding:8px 16px; }
  #nav { gap:6px; }
  #nav a { font-size:0.74em; padding:9px 15px; }
  .glass-card { padding:22px 18px 20px; border-radius:var(--r); }
  .glass-card::before { border-radius:var(--r) var(--r) 50% 50%; }
  .glass-card h2 { font-size:1.08em; }
  .card-left, .card-right, .card-center { max-width:100%; margin:0; }
  .photo-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .photo-item:hover { transform:none; }
  .coming-soon { padding:22px 14px; flex-direction:column; gap:8px; }
  #footer { border-radius:var(--r); padding:16px 14px; }
  #footer p { font-size:clamp(0.62em, 3.2vw, 0.84em); }
  .orb-5,.orb-6,.orb-7,.orb-8,.leaf-2,.leaf-3 { display:none; }
  .drops { display:none; }
}

@media (max-width: 420px) {
  .tab-pill { padding:7px 12px; font-size:0.7em; }
  #nav a { padding:8px 12px; font-size:0.7em; }
  .orb,.leaf { display:none; }
}

@media (min-width: 1200px) {
  #wrapper { max-width: 940px; }
  .orb-1 { width:220px; height:220px; }
  .orb-8 { width:110px; height:110px; }
}