/* EFT HUB V28 — MAIN PAGE THEME
   Loaded after css/style.css. Visual only. */
:root{
  --lime:#8fd3e8 !important;
  --olive:#6faabd !important;
  --line:rgba(143,211,232,.14) !important;
  --line-strong:rgba(143,211,232,.34) !important;
  --cream:#e5eef1 !important;
  --muted:#8da9b2 !important;
}

/* Base */
html,body{background:#070a0d !important;color:#d9e4e8 !important}
::selection{background:rgba(143,211,232,.28) !important;color:#f0fbff !important}

/* Header / HUD */
.topbar{border-color:rgba(143,211,232,.12) !important}
.brand i{background:#8fd3e8 !important;box-shadow:0 0 14px rgba(143,211,232,.55) !important}
.brand strong,.brand em{color:#dbe8ec !important}
.micro,.hud-corner,.node,.coordinates{color:#6f8c96 !important}
.coordinates b{color:#8fb8c3 !important}

/* Hero: cool blue grading over the actual user image */
.hero{background:#070a0d !important}
.hero-image{filter:saturate(.42) hue-rotate(145deg) brightness(.58) contrast(1.06) !important}
.hero-shade{
  background:
    linear-gradient(180deg,rgba(4,8,12,.18),rgba(4,8,12,.50) 68%,#070a0d 100%),
    linear-gradient(90deg,rgba(42,102,126,.10),rgba(91,72,140,.07)) !important;
}
.grid-overlay{
  background-image:
    linear-gradient(rgba(143,211,232,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,211,232,.035) 1px,transparent 1px) !important;
}
.eyebrow{color:#82aeb9 !important}
.eyebrow span{background:#8fd3e8 !important;box-shadow:0 0 10px rgba(143,211,232,.7) !important}
.hero-title{color:#e8f2f5 !important;text-shadow:0 4px 0 rgba(0,0,0,.18),0 18px 48px rgba(0,0,0,.42) !important}
.hero-title span:last-child{color:#9bd9e9 !important}
.title-line i{background:#8fd3e8 !important}
.title-line b{border-color:#8fd3e8 !important}

/* Main CTA */
.btn{border-color:rgba(143,211,232,.75) !important}
.btn.primary{
  background:linear-gradient(135deg,#a9e6f5,#78bfd5) !important;
  border-color:#8fd3e8 !important;
  color:#061015 !important;
  box-shadow:0 12px 35px rgba(120,191,213,.24) !important;
}
.btn.primary:hover{background:#b8edf8 !important;border-color:#b8edf8 !important}

/* Bottom scroll */
.scroll-cue{border-color:rgba(143,211,232,.28) !important}
.scroll-cue i{border-color:#8fd3e8 !important}

/* Resource section */
.resources{
  background:
    radial-gradient(circle at 12% 12%,rgba(143,211,232,.055),transparent 28%),
    radial-gradient(circle at 84% 70%,rgba(139,122,199,.05),transparent 30%),
    linear-gradient(180deg,#090d11,#070a0d) !important;
}
.resources:before{
  background:linear-gradient(90deg,transparent,rgba(143,211,232,.34),transparent) !important;
}
.section-head h2{color:#dbe8ec !important}
.section-head .eyebrow{color:#82aeb9 !important}

/* Cards — cool palette */
.card{
  border-color:rgba(143,211,232,.15) !important;
  background:
    radial-gradient(circle at 82% 15%,rgba(139,122,199,.05),transparent 28%),
    linear-gradient(145deg,#142027,#080d12) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.card:hover{
  border-color:rgba(143,211,232,.48) !important;
  background:
    radial-gradient(circle at 82% 15%,rgba(139,122,199,.08),transparent 28%),
    linear-gradient(145deg,#1a2b34,#080d12) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.44),0 0 38px rgba(143,211,232,.08) !important;
}
.card:before{background:#8fd3e8 !important}
.card-no{color:#58737e !important}
.card-type{color:#7193a0 !important}
.card-icon{color:#8fd3e8 !important}
.card h3{color:#dce9ed !important}
.card p{color:#80969f !important}
.card-scan{background:linear-gradient(90deg,transparent,rgba(143,211,232,.55),transparent) !important}
.art{opacity:.22 !important;filter:saturate(.45) hue-rotate(145deg) !important}

/* Cursor / global overlays */
.cursor-glow{
  background:radial-gradient(circle,rgba(143,211,232,.14) 0%,rgba(143,211,232,.06) 25%,rgba(139,122,199,.025) 48%,transparent 72%) !important;
}
.scanlines{background:linear-gradient(rgba(143,211,232,.025) 50%,transparent 50%) !important}
.ambient-dot{background:#8fd3e8 !important;box-shadow:0 0 12px rgba(143,211,232,.5) !important}

/* Footer */
.footer{border-color:rgba(143,211,232,.12) !important;color:#6e858d !important}

/* V29 — unified rounded card system */
.resource-grid{
  perspective:1400px;
}
.card{
  position:relative !important;
  border-radius:22px !important;
  min-height:255px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 82% 12%,rgba(139,122,199,.065),transparent 30%),
    linear-gradient(145deg,#142027,#080d12) !important;
  border:1px solid rgba(143,211,232,.15) !important;
  box-shadow:
    0 12px 38px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition:
    transform .55s cubic-bezier(.16,.8,.2,1),
    border-color .35s ease,
    box-shadow .5s ease,
    background .4s ease !important;
}
.card:hover{
  transform:translateY(-10px) scale(1.012) !important;
  border-color:rgba(143,211,232,.48) !important;
  background:
    radial-gradient(circle at 82% 12%,rgba(139,122,199,.09),transparent 30%),
    linear-gradient(145deg,#1a2b34,#080d12) !important;
  box-shadow:
    0 26px 65px rgba(0,0,0,.45),
    0 0 38px rgba(143,211,232,.08),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.card:before{
  border-radius:22px !important;
  background:linear-gradient(135deg,rgba(143,211,232,.11),transparent 34%,rgba(139,122,199,.065)) !important;
}
.card .card-icon{
  border-radius:16px !important;
  width:52px !important;height:52px !important;
  background:rgba(143,211,232,.055) !important;
  border:1px solid rgba(143,211,232,.18) !important;
  transition:transform .45s cubic-bezier(.16,.8,.2,1),background .35s ease,box-shadow .35s ease !important;
}
.card:hover .card-icon{
  transform:translateY(-4px) rotate(-4deg) !important;
  background:rgba(143,211,232,.11) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.2) !important;
}

/* CTA gets the same rounded language as the cards */
.hero-actions .btn.primary{
  min-height:52px !important;
  padding:0 24px !important;
  border-radius:999px !important;
  border:1px solid rgba(143,211,232,.72) !important;
  background:linear-gradient(135deg,#a9e6f5,#78bfd5) !important;
  box-shadow:0 12px 35px rgba(120,191,213,.22) !important;
}
.hero-actions .btn.primary b{
  display:grid !important;
  place-items:center !important;
  width:30px !important;height:30px !important;
  border-radius:50% !important;
  background:rgba(6,16,21,.12) !important;
  transition:transform .35s ease !important;
}
.hero-actions .btn.primary:hover b{
  transform:translateY(3px) !important;
}

/* Bottom scroll control */
.scroll-cue{
  width:44px !important;height:44px !important;
  border-radius:50% !important;
  background:rgba(8,14,18,.42) !important;
  backdrop-filter:blur(8px) !important;
  border:1px solid rgba(143,211,232,.28) !important;
  box-shadow:0 8px 25px rgba(0,0,0,.22) !important;
  transition:transform .35s ease,border-color .35s ease,background .35s ease !important;
}
.scroll-cue:hover{
  transform:translateY(5px) !important;
  border-color:rgba(143,211,232,.55) !important;
  background:rgba(143,211,232,.07) !important;
}


/* V31 — polish of the elements marked in the screenshots */

/* Card icons: compact, intentional HUD markers instead of large empty boxes. */
.card .card-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  margin:0 0 18px !important;
  border-radius:10px !important;
  border:1px solid rgba(143,211,232,.22) !important;
  background:rgba(143,211,232,.035) !important;
  color:#8fd3e8 !important;
  font-size:15px !important;
  line-height:1 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background .25s ease,border-color .25s ease !important;
}
.card:hover .card-icon{
  transform:none !important;
  background:rgba(143,211,232,.08) !important;
  border-color:rgba(143,211,232,.42) !important;
  box-shadow:0 0 18px rgba(143,211,232,.06) !important;
}

/* CTA arrow: small secondary control, not a second oversized button. */
.hero-actions .btn.primary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
  min-height:50px !important;
  padding:0 14px 0 24px !important;
}
.hero-actions .btn.primary b{
  flex:0 0 26px !important;
  width:26px !important;
  height:26px !important;
  min-width:26px !important;
  min-height:26px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border-radius:50% !important;
  background:rgba(6,16,21,.10) !important;
  color:#061015 !important;
  font-size:13px !important;
  line-height:1 !important;
  transition:transform .25s ease,background .25s ease !important;
}
.hero-actions .btn.primary:hover b{
  transform:translateY(2px) !important;
  background:rgba(6,16,21,.16) !important;
}

/* V32 — icon only: remove the box completely */
.card .card-icon,
.card:hover .card-icon{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  display:block !important;
  padding:0 !important;
  margin:0 0 18px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#8fd3e8 !important;
  transform:none !important;
}

/* V33 — clean HUD glyphs: no box, no border, no background */
.resource-grid .card .card-icon,
.resource-grid .card .icon,
.resource-grid .card [class*="icon"]{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 0 18px !important;
  border:0 !important;
  border-width:0 !important;
  border-style:none !important;
  border-color:transparent !important;
  outline:0 !important;
  border-radius:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  color:#8fd3e8 !important;
  display:block !important;
  transform:none !important;
}

/* If the icon is an inline SVG, remove any SVG container treatment while
   preserving the actual drawing. */
.resource-grid .card .card-icon svg,
.resource-grid .card .icon svg,
.resource-grid .card [class*="icon"] svg{
  width:22px !important;
  height:22px !important;
  display:block !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:#8fd3e8 !important;
  stroke:currentColor !important;
  fill:none !important;
}

/* CTA is intentionally just the pill button — no secondary arrow control. */
.hero-actions .btn.primary b{
  display:none !important;
}
.hero-actions .btn.primary{
  justify-content:center !important;
  gap:0 !important;
  padding:0 26px !important;
}


/* ================================================================
   V34 — RESOURCE CARD ICONS / CLEAN HUD GLYPHS
   No icon box, no border, no background, larger glyphs.
   ================================================================ */

.resource-grid .card .card-icon,
.resource-grid .card .icon,
.resource-grid .card .resource-icon,
.resource-grid .card [class*="card-icon"],
.resource-grid .card [class*="resource-icon"],
.resource-grid .card [class*="icon"] {
  width: 58px !important;
  height: 58px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 4px 0 24px !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  color: #8fd8ee !important;
  filter: drop-shadow(0 0 7px rgba(143, 216, 238, .12)) !important;
  transform: none !important;
}

/* SVG = the actual glyph only. */
.resource-grid .card .card-icon svg,
.resource-grid .card .icon svg,
.resource-grid .card .resource-icon svg,
.resource-grid .card [class*="card-icon"] svg,
.resource-grid .card [class*="resource-icon"] svg,
.resource-grid .card [class*="icon"] svg {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #8fd8ee !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  overflow: visible !important;
}

/* Prevent generic pseudo-elements from rebuilding the old icon shell. */
.resource-grid .card .card-icon::before,
.resource-grid .card .card-icon::after,
.resource-grid .card .icon::before,
.resource-grid .card .icon::after,
.resource-grid .card .resource-icon::before,
.resource-grid .card .resource-icon::after,
.resource-grid .card [class*="icon"]::before,
.resource-grid .card [class*="icon"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the card itself rounded, but never round the glyph container. */
.resource-grid .card {
  overflow: hidden;
}

/* Slightly more breathing room under the larger glyph. */
.resource-grid .card .card-title,
.resource-grid .card h3,
.resource-grid .card h2 {
  margin-top: 0 !important;
}

/* V34 final: text glyph icons use the same visual scale as the reference. */
.resource-grid .card .card-icon,
.resource-grid .card .icon,
.resource-grid .card .resource-icon {
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #8fd8ee !important;
  text-shadow: 0 0 10px rgba(143, 216, 238, .10) !important;
}


/* ================================================================
   V35 FINAL — MAIN PAGE RESOURCE GLYPHS
   The icon is ONLY the glyph. No shell, no box, no background.
   ================================================================ */

.resource-grid > .card > .card-icon {
  all: unset !important;
  box-sizing: border-box !important;

  display: block !important;
  width: 58px !important;
  height: 58px !important;

  margin: 2px 0 20px 0 !important;
  padding: 0 !important;

  color: #8fd8ee !important;
  font-family: inherit !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 58px !important;
  letter-spacing: 0 !important;
  text-align: left !important;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  transform: none !important;
  filter: drop-shadow(0 0 8px rgba(143,216,238,.10)) !important;
}

.resource-grid > .card:hover > .card-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  color: #8fd8ee !important;
}

.resource-grid > .card > .card-icon::before,
.resource-grid > .card > .card-icon::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The CTA stays clean: text only, no decorative arrow. */
.hero-actions > a[href="#resources"] {
  gap: 0 !important;
}
.hero-actions > a[href="#resources"]::before,
.hero-actions > a[href="#resources"]::after {
  content: none !important;
  display: none !important;
}


/* ================================================================
   V36 — MAIN CTA RESTORE ROUNDED PILL
   "PRZEJDŹ DO ZASOBÓW" is a rounded control like the resource cards.
   ================================================================ */
.hero-actions > a[href="#resources"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 290px !important;
  min-width: 290px !important;
  height: 54px !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;

  border: 1px solid rgba(143, 216, 238, .35) !important;
  border-radius: 999px !important;

  background: #8fd8ee !important;
  color: #061017 !important;

  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(91, 190, 220, .10) !important;
  text-decoration: none !important;
}

.hero-actions > a[href="#resources"]:hover {
  border-radius: 999px !important;
  background: #9be0f2 !important;
  color: #061017 !important;
  transform: translateY(-1px) !important;
}

.hero-actions > a[href="#resources"] span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* ================================================================
   V38 — FINAL SCROLL CUE + CURSOR GLOW
   These rules intentionally live in the last-loaded theme stylesheet
   so older hover declarations cannot override them.
   ================================================================ */
.scroll-cue{
  transform:translateX(-50%) !important;
  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    opacity .26s ease,
    border-color .26s ease,
    background .26s ease,
    box-shadow .26s ease !important;
}
.scroll-cue:hover{
  transform:translateX(-50%) scale(1.10) !important;
  opacity:1 !important;
  border-color:rgba(143,211,232,.72) !important;
  background:rgba(143,211,232,.08) !important;
  box-shadow:
    0 0 0 1px rgba(143,211,232,.10),
    0 0 28px rgba(143,211,232,.20) !important;
}
.scroll-cue i{
  transition:transform .26s ease,opacity .26s ease !important;
}
.scroll-cue:hover i:first-child{
  transform:rotate(45deg) !important;
}
.scroll-cue:hover i:last-child{
  transform:rotate(45deg) !important;
  opacity:.75 !important;
}

/* Strong, visible cyan cursor-following light. */
.cursor-glow{
  width:420px !important;
  height:420px !important;
  opacity:1 !important;
  background:
    radial-gradient(circle,
      rgba(143,211,232,.22) 0%,
      rgba(143,211,232,.105) 22%,
      rgba(143,211,232,.045) 42%,
      rgba(139,122,199,.018) 56%,
      transparent 74%) !important;
}

/* V44 — HERO TITLE ABSOLUTELY STATIC
   No animation, no hover transform, no transition on either line. */
.hero-title,
.hero-title span,
.hero:hover .hero-title span:first-child,
.hero:hover .hero-title span:last-child {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* V44 — MAP BACK BUTTON TYPOGRAPHY
   Match the clean white typography used on the main page. */
.maps-page .back-btn {
  color: #dce7ea !important;
  border-color: rgba(143,211,232,.28) !important;
}
.maps-page .back-btn:hover {
  color: #071014 !important;
  background: #8fd3e8 !important;
  border-color: #8fd3e8 !important;
  transform: none !important;
}

/* V46 — USER-REPLACEABLE HOMEPAGE HERO
   Replace assets/hero-bg.jpg with your own image; no HTML edit required. */
.hero .hero-image{
  background-image:url("../assets/hero-bg.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
}

/* ================================================================
   V47 — HOMEPAGE HERO IMAGE LAYER FIX
   The image was placed at z-index:-5 inside an isolated hero.
   That put it behind the hero's own background and made the image
   invisible. Put the image inside the hero stacking context.
   ================================================================ */
.hero{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#070a0d !important;
}
.hero .hero-image{
  position:absolute !important;
  inset:-2% !important;
  z-index:0 !important;
  display:block !important;
  background-image:url("../assets/hero-bg.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  pointer-events:none !important;
}
.hero .hero-shade{
  z-index:1 !important;
}
.hero .grid-overlay{
  z-index:2 !important;
}
.hero .hero-content{
  z-index:4 !important;
}
.hero:after{
  z-index:3 !important;
}

/* ================================================================
   V48 — HERO / SCROLL CUE / MAP IMAGE FIXES
   ================================================================ */

/* Keep the hero artwork visible without crushing the lower edge. */
.hero .hero-shade{
  background:
    linear-gradient(180deg,
      rgba(4,8,12,.16) 0%,
      rgba(4,8,12,.34) 58%,
      rgba(4,8,12,.50) 100%
    ),
    linear-gradient(90deg,
      rgba(4,7,10,.56) 0%,
      rgba(4,7,10,.30) 46%,
      rgba(4,7,10,.08) 100%
    ) !important;
}

/* The scroll cue must sit above every hero overlay and remain clickable. */
.hero .scroll-cue{
  z-index:10 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* Native anchor navigation, but smooth rather than abrupt. */
html{
  scroll-behavior:smooth !important;
}

/* Map cards: the user image is a background and is strictly clipped to the
   rounded card box. No visual child is allowed to escape the card. */
.maps-page .map-card{
  position:relative !important;
  overflow:hidden !important;
  clip-path:inset(0 round 22px) !important;
  background-clip:padding-box !important;
  isolation:isolate !important;
}
.maps-page .map-card::before,
.maps-page .map-card::after{
  pointer-events:none !important;
}
.maps-page .map-card > img,
.maps-page .map-card picture,
.maps-page .map-card picture img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  clip-path:inset(0 round 22px) !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Background artwork never scales outside the card when the card hovers. */
.maps-page .map-card:hover{
  overflow:hidden !important;
  clip-path:inset(0 round 22px) !important;
}
.maps-page .map-card:hover .map-grid,
.maps-page .map-card:hover .map-sweep{
  max-width:100% !important;
}

/* Do not scale the map image itself on hover. Only the card interaction
   remains active. */
.maps-page .map-card:hover > img,
.maps-page .map-card:hover picture,
.maps-page .map-card:hover picture img{
  transform:none !important;
}

/* V49 — disable legacy map artwork zoom; keep artwork inside card */
.maps-page .map-card:hover .map-grid {
  transform: none !important;
  scale: 1 !important;
}