/* Strict monochrome visual layer. Base layout remains in index.html. */
body{
  background:#050505;
  color:var(--text);
}

.topbar{
  background:rgba(7,7,7,.88);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 54px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}

.brand-mark{
  background:#f5f5f5;
  color:#050505;
  border-color:#f5f5f5;
  box-shadow:none;
}

.nav a,
.legal-links a,
.legal-links button{color:#9a9a9a}
.nav a:hover,
.nav a:focus,
.legal-links a:hover,
.legal-links button:hover{color:#fff}

.btn{
  background:#f5f5f5;
  color:#050505;
  border-color:#f5f5f5;
  box-shadow:none;
}
.btn:hover{
  background:#dcdcdc;
  border-color:#dcdcdc;
  box-shadow:none;
  transform:translateY(-1px);
}
.btn.ghost{
  background:transparent;
  color:#f5f5f5;
  border-color:#414141;
}
.btn.ghost:hover{
  background:#111;
  color:#fff;
  border-color:#777;
}

.eyebrow i{
  background:#f5f5f5;
  box-shadow:none;
}

.project-name span,
.section-head h2 span,
.final h2 span{
  color:#fff;
  text-shadow:none;
}
.section-head h2 span,
.final h2 span{opacity:.62}

.section-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:28px;
  padding:0 10px;
  margin-bottom:18px;
  border:1px solid #343434;
  border-radius:999px;
  color:#a6a6a6;
  font-size:10px;
  letter-spacing:.08em;
  line-height:1;
}

.portrait{
  background:#101010;
  border-color:#242424;
}
.portrait img{
  filter:grayscale(1) contrast(1.06) brightness(.92);
}
.portrait:after{
  background:linear-gradient(180deg,rgba(5,5,5,.02) 42%,rgba(5,5,5,.80) 100%),
             linear-gradient(90deg,rgba(5,5,5,.28),transparent 44%);
}

.goal{
  border-color:#262626;
  background:linear-gradient(160deg,#111,#090909);
}
.goal-media{
  background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.08),transparent 42%),
             linear-gradient(135deg,#171717,#090909);
}
.before{color:#777}
.after{color:#d8d8d8}
.goal-num{color:#bcbcbc}
.goal p{color:#969696}
.carousel-controls button{
  border-color:#333;
  background:#0a0a0a;
  color:#d7d7d7;
}
.carousel-controls button:hover{
  border-color:#777;
  color:#fff;
}

.tariffs{
  background:#080808;
  border-color:#202020;
}
.tariff,
.tariff-strip .tariff{
  background:#0e0e0e;
  border-color:#2c2c2c;
}
.tariff h3{color:#f4f4f4}
.tariff-price .price-period{color:#999}

.benefits-head p{color:#8f8f8f}
.benefit{
  border-color:#bdbdbd;
  background:linear-gradient(145deg,#eeeeee 0%,#cfcfcf 100%);
  color:#080808;
  box-shadow:none;
}
.benefit:before{
  width:52%;
  right:-4%;
  filter:grayscale(1) brightness(.18) contrast(1.6);
  opacity:.80;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 18%,#000 48%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 18%,#000 48%,#000 100%);
}
.benefit:after{
  background:linear-gradient(90deg,rgba(242,242,242,.97) 0%,rgba(230,230,230,.95) 46%,rgba(205,205,205,.72) 72%,rgba(176,176,176,.36) 100%);
}
.benefit-number{
  border-color:rgba(0,0,0,.24);
  color:#111;
}
.benefit-kicker{color:#3f3f3f}
.benefit-desc{color:#333}
.split-card{
  background:rgba(8,8,8,.94);
  color:#fff;
}
.split-card.alt{
  background:rgba(35,35,35,.88);
}
.split-card small,
.split-card.alt small{color:#cfcfcf}
.slider-note{color:#777}

.final{border-color:#222}
.final p{color:#8f8f8f}
.footer{
  border-color:#222;
  color:#777;
}

.cookie-banner{
  background:#0d0d0d;
  color:#f5f5f5;
  border-color:#333;
  box-shadow:0 25px 90px rgba(0,0,0,.65);
}
.cookie-banner p{color:#bdbdbd}
.cookie-banner a{color:#fff}
.cookie-actions button{
  background:#f5f5f5;
  color:#050505;
  border-color:#f5f5f5;
}
.cookie-actions button.cookie-reject{
  background:transparent;
  color:#f5f5f5;
  border-color:#555;
}

.mobile-cta{
  background:#f5f5f5;
  color:#050505;
  box-shadow:0 14px 50px rgba(0,0,0,.34);
}

@media(max-width:700px){
  .topbar{background:rgba(7,7,7,.94)}
  .benefit:before{
    width:82%;
    right:-30%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 20%,#000 52%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 20%,#000 52%,#000 100%);
  }
  .benefit:after{
    background:linear-gradient(90deg,rgba(240,240,240,.98) 0%,rgba(226,226,226,.96) 52%,rgba(198,198,198,.74) 76%,rgba(169,169,169,.44) 100%);
  }
}


/* Replace long "sad" rules with a lighter monochrome rhythm. */
.tariffs,
.final,
.footer{
  position:relative;
}
.tariffs{
  border-top:0;
  border-bottom:0;
  background:
    radial-gradient(680px 240px at 50% 0,rgba(255,255,255,.045),transparent 70%),
    #080808;
}
.final,
.footer{
  border-top:0;
}

/* Short fading dash fields: visible enough to structure the page, but not a hard rule. */
.tariffs::before,
.tariffs::after,
.final::before,
.footer::before{
  content:"";
  position:absolute;
  left:50%;
  width:min(760px,72vw);
  height:8px;
  transform:translateX(-50%);
  pointer-events:none;
  opacity:.52;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      #3a3a3a 9px 11px,
      transparent 11px 20px
    );
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.tariffs::before{top:0}
.tariffs::after{bottom:0}
.final::before,
.footer::before{top:0}

/* Give section numbers a small visual rhythm instead of a written label. */
.section-index{
  position:relative;
  overflow:visible;
}
.section-index::after{
  content:"";
  width:3px;
  height:3px;
  margin-left:11px;
  border-radius:50%;
  background:#666;
  box-shadow:8px 0 #444,16px 0 #2e2e2e;
}

/* Cards stay crisp; reduce the feeling of a page made only from outlines. */
.goal,
.tariff{
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
.goal:hover,
.tariff:hover{
  border-color:#3b3b3b;
}
.benefit{
  box-shadow:0 28px 70px rgba(0,0,0,.18);
}

@media(max-width:700px){
  .tariffs::before,
  .tariffs::after,
  .final::before,
  .footer::before{
    width:70vw;
    opacity:.40;
  }
}


/* Safe polish 2026-10-01: visual properties only; no geometry/layout overrides. */
body{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.035),transparent 28%),
    radial-gradient(circle at 82% 38%,rgba(255,255,255,.018),transparent 30%),
    #050505;
}

.topbar{
  background:rgba(7,7,7,.91);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    0 20px 54px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.045);
}

.brand-mark{
  box-shadow:
    0 9px 28px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

.btn{
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}
.btn:hover{
  background:#e7e7e7;
  border-color:#e7e7e7;
  box-shadow:0 16px 36px rgba(0,0,0,.30);
  filter:brightness(1.02);
}
.btn.ghost:hover{
  background:rgba(255,255,255,.055);
  border-color:#747474;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

.project-name span{
  text-shadow:0 16px 48px rgba(255,255,255,.08);
}

.portrait{
  border-color:rgba(255,255,255,.15);
  box-shadow:
    0 36px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.portrait img{
  filter:grayscale(1) contrast(1.08) brightness(.94);
  transition:filter .35s ease;
}
.portrait:hover img{
  filter:grayscale(1) contrast(1.10) brightness(.97);
}

.section-index{
  background:rgba(255,255,255,.025);
  border-color:#414141;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.goal{
  border-color:#2c2c2c;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 32%),
    linear-gradient(160deg,#111,#090909);
  box-shadow:
    0 24px 62px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}
.goal:hover{
  border-color:#444;
  box-shadow:
    0 30px 72px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),transparent 34%),
    linear-gradient(160deg,#131313,#090909);
}

.carousel-controls button{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}
.carousel-controls button:hover{
  background:#171717;
  border-color:#666;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}

.tariffs{
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.045),transparent 34%),
    #080808;
}

.tariff{
  border-color:#303030;
  box-shadow:
    0 24px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}
.tariff:first-child{
  background:#eeeeee;
  border-color:#eeeeee;
  color:#090909;
}
.tariff:first-child h3,
.tariff:first-child .tariff-price b{
  color:#090909;
}
.tariff:first-child .price-period{
  color:#555;
}
.tariff:last-child{
  background:
    radial-gradient(circle at 100% 0,rgba(255,255,255,.05),transparent 42%),
    #101010;
}
.tariff:hover{
  border-color:#555;
  box-shadow:
    0 30px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.benefit{
  border-color:#c5c5c5;
  box-shadow:
    0 32px 82px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.48);
}
.benefit-number{
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
.split-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 28px rgba(0,0,0,.12);
}
.split-card.alt{
  background:rgba(31,31,31,.90);
}

.final{
  background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.04),transparent 34%),
    linear-gradient(145deg,#0b0b0b,#070707);
  box-shadow:
    0 28px 72px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.footer{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.008));
}
.legal-links a,
.legal-links button{
  transition:color .2s ease,border-color .2s ease;
}
.legal-links a:hover,
.legal-links button:hover{
  color:#fff;
}

.cookie-banner{
  box-shadow:
    0 30px 90px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.mobile-cta{
  box-shadow:
    0 18px 48px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.14);
}

@media(prefers-reduced-motion:reduce){
  .btn,
  .goal,
  .tariff,
  .portrait img,
  .carousel-controls button,
  .legal-links a,
  .legal-links button{
    transition:none!important;
  }
}