/* ==========================================================================
   NÁVRH 2 – „Hluboká voda & zlato"
   Načítá se PO style.css a jen přepisuje. Původní modrý styl zůstává beze změny.
   ========================================================================== */
body.v2 {
  color-scheme: light only;
  --ink: #0a1f2b;          /* hluboká petrolejová noc */
  --ink-2: #123445;
  --sea: #17607c;          /* mořská modrá – podpis značky */
  --sea-2: #1e7a9c;
  --ink-soft: #52626c;
  --paper: #fbfaf7;        /* čistá teplá bílá (ne béžová, ne modrá) */
  --cream: #eff2f3;        /* neutrální světle šedá */
  --line: #e1e5e7;
  --accent: #f4b23e;       /* zlatá – akce, zvýraznění */
  --accent-2: #ffd27a;
  --shadow: 0 20px 60px rgba(10, 31, 43, .12);
}
body.v2 .btn--primary { background: var(--accent); color: var(--ink); box-shadow: 0 10px 30px rgba(244,178,62,.35); }
body.v2 .btn--primary:hover { background: #ffc35a; }
body.v2 .eyebrow::before { background: var(--accent); }
body.v2 .hl { color: var(--accent); }
body.v2 .mark { background: linear-gradient(transparent 62%, rgba(244,178,62,.55) 62%); }
body.v2 .logo__mark { background: var(--ink); color: var(--accent); }
body.v2 .stat strong { color: var(--white); }

/* ---------- Hlavička: průhledná nad tmavým úvodem ---------- */
body.v2 .header { transition: background .35s ease, border-color .35s ease; }
body.v2 .header.on-dark { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.v2 .header.on-dark .logo, body.v2 .header.on-dark .nav a:not(.btn) { color: var(--white); }
body.v2 .header.on-dark .logo small { color: rgba(255,255,255,.6); }
body.v2 .header.on-dark .logo__mark { background: rgba(255,255,255,.1); }
body.v2 .header.on-dark .nav-toggle { color: var(--white); }
@media (max-width: 940px) {
  body.v2 .header.on-dark .nav.is-open { background: var(--ink); }
  body.v2 .header.on-dark .nav.is-open a:not(.btn) { border-color: rgba(255,255,255,.1); }
}

/* ---------- Úvod: celá obrazovka, tmavá voda ---------- */
body.v2 main { margin-top: -76px; }
.hero--v2 { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: var(--ink); color: #dce8ee; padding: 120px 0 110px; overflow: hidden; isolation: isolate; }
.hero--v2 .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero--v2 .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.hero--v2 .glow--1 { width: 60vw; height: 60vw; left: -18vw; top: -25vw; background: #17607c; animation: drift1 18s ease-in-out infinite alternate; }
.hero--v2 .glow--2 { width: 45vw; height: 45vw; right: -12vw; bottom: -20vw; background: #0f7f8f; opacity: .4; animation: drift2 22s ease-in-out infinite alternate; }
.hero--v2 .glow--3 { width: 26vw; height: 26vw; right: 18vw; top: 8vh; background: #f4b23e; opacity: .16; animation: drift1 26s ease-in-out infinite alternate-reverse; }
.hero--v2 .grain { position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero--v2 .hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-6vw, -8vh) scale(1.15); } }

.hero--v2 .hero__badge { background: rgba(255,255,255,.08); color: #d6f5e2; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.hero--v2 .hero__title { color: var(--white); font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.035em; margin: 0; }
.hero--v2 .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero--v2 .hero__title .line > span { display: inline-block; }
.hero--v2 .lead { color: #b7cad4; max-width: 560px; }
.hero--v2 .btn--ghost { border-color: rgba(255,255,255,.35); color: var(--white); }
.hero--v2 .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero--v2 .stats { border-top-color: rgba(255,255,255,.12); }
.hero--v2 .stat + .stat { border-left-color: rgba(255,255,255,.12); }
.hero--v2 .stat span { color: #93aebb; }

.hero--v2 .hero__visual { position: relative; }
.hero--v2 .hero__photo { box-shadow: 0 40px 80px rgba(0,0,0,.45); background: var(--ink-2); position: relative; z-index: 1; }
.hero--v2 .hero__photo img { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.2,.8,.2,1); }
.hero--v2.is-in .hero__photo img { transform: scale(1); }
.hero--v2 .hero__ring { position: absolute; inset: -18px 18px 18px -18px; border: 2px solid var(--accent); border-radius: 240px 240px var(--radius) var(--radius); opacity: .7; }
.hero--v2 .float-card { z-index: 2; }
.hero--v2 .float-card--pfp .float-card__icon { background: var(--ink); color: var(--accent); }

/* scroll výzva – napojení na cestičku */
.hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #93aebb; text-decoration: none; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.hero__scroll i { width: 2px; height: 46px; background: repeating-linear-gradient(var(--accent) 0 3px, transparent 3px 9px); position: relative; }
.hero__scroll i::after { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: fall 1.8s ease-in-out infinite; }
@keyframes fall { 0% { top: 0; opacity: 0; } 20% { opacity: 1; } 100% { top: 40px; opacity: 0; } }

/* ---------- Animace nástupu ---------- */
.js .hero--v2 .reveal, .js .hero--v2 .hero__title .line > span { opacity: 0; transform: translateY(28px); }
.js .hero--v2 .hero__title .line > span { transform: translateY(105%); }
.hero--v2.is-in .reveal, .hero--v2.is-in .hero__title .line > span { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }

/* ---------- Ostatní sekce – svěžejší kontrast ---------- */
body.v2 .section--cream { background: var(--cream); }
body.v2 .section--dark { background: var(--ink); }
body.v2 .section--deep { background: radial-gradient(1100px 500px at 85% -10%, rgba(23,96,124,.45), transparent 60%), var(--ink); }
body.v2 .fixace { background: linear-gradient(120deg, var(--sea), var(--ink)); }
body.v2 .calc__result { background: linear-gradient(160deg, var(--sea), var(--ink)); }
body.v2 .rating strong, body.v2 .calc-switch button[aria-selected="true"] { background: var(--ink); }
body.v2 .free__num { background: var(--ink); color: var(--accent); }
body.v2 .review__stars { color: var(--accent); }
body.v2 .journey__stop text { fill: #b9801a; }
body.v2 .next-step { color: #b9801a; }

@media (max-width: 900px) {
  .hero--v2 { min-height: auto; padding: 110px 0 90px; }
  .hero--v2 .hero__ring { inset: -10px 10px 10px -10px; }
  .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--v2 .glow { animation: none; }
  .js .hero--v2 .reveal, .js .hero--v2 .hero__title .line > span { opacity: 1; transform: none; }
}
.hero--v2 .stat strong span { font: inherit; color: inherit; display: inline; margin: 0; }
.hero--v2 .float-card { color: var(--ink); }
.hero--v2 .hero__title { font-size: clamp(2.6rem, 6vw, 5rem); }
.hero--v2 .hero__actions { margin: 26px 0 30px; }
@media (min-width: 901px) { .hero--v2 { padding: 100px 0 90px; } }
.hero__scroll { position: relative; left: auto; bottom: auto; transform: none; align-self: center; margin-top: 44px; }

/* ===== Úprava 2: pevná petrolejová hlavička + víc „noci" ===== */
body.v2 main { margin-top: 0; }
body.v2 .header, body.v2 .header.on-dark, body.v2 .header.is-scrolled {
  background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: none; }
body.v2 .header .logo, body.v2 .header .nav a:not(.btn) { color: var(--white); }
body.v2 .header .nav a:not(.btn):hover { color: var(--accent); }
body.v2 .header .logo small { color: rgba(255,255,255,.6); }
body.v2 .header .logo__mark { background: rgba(255,255,255,.08); color: var(--accent); }
body.v2 .header .nav-toggle { color: var(--white); }
@media (max-width: 940px) {
  body.v2 .header .nav { background: var(--ink); border-color: rgba(255,255,255,.08); }
  body.v2 .header .nav a:not(.btn) { border-color: rgba(255,255,255,.1); }
}
.hero--v2 { min-height: calc(100svh - 76px); justify-content: flex-start; padding: clamp(40px, 7vh, 90px) 0 60px; }
@media (max-width: 900px) { .hero--v2 { min-height: auto; padding: 36px 0 70px; } }

/* noční sekce */
body.v2 .section--night { background: linear-gradient(180deg, #0c2533, var(--ink)); }
body.v2 .section--night + .section--night { background: var(--ink); border-top: 1px solid rgba(255,255,255,.05); }
body.v2 .section--dark p, body.v2 .section--dark .lead { color: #b3c7d1; }
body.v2 .section--dark strong { color: var(--white); }
body.v2 .section--dark .plan__num { border-color: var(--accent); color: var(--accent); }
body.v2 .section--dark .why__card { border-top-color: var(--accent); }
body.v2 .section--dark .why__icon { color: var(--accent); }
body.v2 .section--dark .steps li { border-color: rgba(255,255,255,.1); }
body.v2 .section--dark .steps li::before { color: var(--accent); }
body.v2 .section--dark .about__sign { color: var(--accent); }
body.v2 .section--dark .about__video { box-shadow: 0 30px 70px rgba(0,0,0,.45); }
body.v2 .section--dark .process__photo { box-shadow: 0 30px 70px rgba(0,0,0,.45); }
body.v2 .section--dark .mark { background: linear-gradient(transparent 62%, rgba(244,178,62,.45) 62%); }
body.v2 .section--dark .service:not(.is-active) p { color: var(--ink-soft); }
body.v2 .section--dark .service:not(.is-active) strong { color: var(--ink); }
body.v2 .section--dark .pfp__item strong { color: var(--white); }
body.v2 .journey__stop text { stroke: var(--ink); fill: var(--accent); }
body.v2 .journey__base { stroke: var(--accent); stroke-opacity: .25; }
body.v2 .journey__line, body.v2 .journey__stop circle, body.v2 .journey__stop path { stroke: var(--accent); }
body.v2 .journey__stop circle { fill: var(--ink); }
body.v2 .journey__stop.is-reached circle { fill: var(--accent); }
body.v2 .journey__stop.is-reached path { stroke: var(--ink); }

/* ===== Úprava 3: bez oranžové, plynulé přechody, nové aktivní karty ===== */
body.v2 { --accent: #f4b23e; --accent-2: #ffd27a; }
body.v2 .journey__stop text, body.v2 .next-step { fill: var(--accent); color: var(--accent); }
body.v2 .float-card--pfp .float-card__icon, body.v2 .pfp__seal { background: var(--accent); color: var(--ink); }
body.v2 .faq details[open] summary::after { background-color: var(--accent); }
body.v2 .service li::before { background: var(--accent); }
body.v2 input[type="range"]::-webkit-slider-thumb { background: var(--accent); }
body.v2 input[type="range"]::-moz-range-thumb { background: var(--accent); }
body.v2 .form .check input, body.v2 .calc__check input { accent-color: var(--accent); }
body.v2 .hero__photo { box-shadow: 0 0 0 10px rgba(255,255,255,.04), 0 40px 80px rgba(0,0,0,.45); }

/* plynulé přechody: všechny tmavé sekce na stejné noci, světla uvnitř (ne na hranách) */
body.v2 .section--dark, body.v2 .section--night, body.v2 .section--deep,
body.v2 .section--night + .section--night { background: var(--ink); border-top: 0; position: relative; isolation: isolate; }
body.v2 .section--deep::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 80vw; height: 70%;
  transform: translate(-10%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23,96,124,.35), transparent);
  pointer-events: none; }
.hero--v2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--ink)); pointer-events: none; }
/* světlé sekce: měkký přechod z noci */
body.v2 .section--cream, body.v2 #reference, body.v2 #kalkulacka { position: relative; }
body.v2 .section--dark + .section:not(.section--dark),
body.v2 .section--dark + .fixace + .section:not(.section--dark) {
  background-image: linear-gradient(to bottom, rgba(10,31,43,.08), transparent 160px); }

/* Služby – tmavé „skleněné" karty, aktivní = zlatý rámeček */
body.v2 .section--deep .service,
body.v2 .section--deep .service:not(.is-active) {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #b3c7d1; box-shadow: none; transform: none; }
body.v2 .section--deep .service h3, body.v2 .section--deep .service:not(.is-active) h3 { color: var(--white); }
body.v2 .section--deep .service > p, body.v2 .section--deep .service:not(.is-active) p { color: #9fb6c2; }
body.v2 .section--deep .service li { color: #dce8ee; }
body.v2 .section--deep .service__icon { background: rgba(255,255,255,.07); color: var(--white); }
body.v2 .section--deep .service .btn--dark { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.3); }
body.v2 .section--deep .service.is-active,
body.v2 .section--deep .services .service:hover {
  background: linear-gradient(180deg, rgba(244,178,62,.10), rgba(255,255,255,.03));
  border-color: var(--accent); color: #dce8ee; transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(0,0,0,.4), 0 0 50px rgba(244,178,62,.12); }
body.v2 .section--deep .service.is-active .service__icon,
body.v2 .section--deep .services .service:hover .service__icon { background: var(--accent); color: var(--ink); }
body.v2 .section--deep .service.is-active .btn--dark,
body.v2 .section--deep .services .service:hover .btn--dark { background: var(--accent); color: var(--ink); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  body.v2 .section--deep .services:hover .service.is-active:not(:hover) {
    background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); box-shadow: none; transform: none; }
  body.v2 .section--deep .services:hover .service.is-active:not(:hover) h3 { color: var(--white); }
  body.v2 .section--deep .services:hover .service.is-active:not(:hover) .service__icon { background: rgba(255,255,255,.07); color: var(--white); }
  body.v2 .section--deep .services:hover .service.is-active:not(:hover) .btn--dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.3); }
}

/* ===== Logo G: oblouk a cíl ===== */
body.v2 .logo__g { width: 40px; height: 40px; color: var(--white); flex: none; }
body.v2 .footer .logo__g { width: 32px; height: 32px; }
/* scroll výzva: bez padající tečky, linka plynule pokračuje cestičkou */
.hero__scroll i::after { display: none; }
.hero__scroll i { height: 40px; }

/* oprava: záře v tmavých sekcích nesmí přetékat do strany */
body.v2 .section--deep{overflow:hidden}
html,body.v2{overflow-x:clip}

/* ===== popisky cestičky: tmavý štítek, čitelný na světlém i tmavém ===== */
body.v2 .journey__lbl { fill: var(--ink); stroke: rgba(244,178,62,.45); stroke-width: 1; }
body.v2 .journey__stop text { stroke: none !important; paint-order: normal; fill: var(--accent); }

/* ===== sloučená sekce Jak spolu pracujeme ===== */
body.v2 #postup .process { align-items: center; }
body.v2 #postup .steps li { padding: 14px 0; }
body.v2 .why--3 { grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 64px); }
body.v2 .why__card p, body.v2 .steps p, body.v2 .free__card p, body.v2 .pfp__item span { font-size: 1rem; line-height: 1.6; }
body.v2 .section--dark .why__card p, body.v2 .section--dark .steps p { color: #c3d4dc; }
@media (max-width: 980px) { body.v2 .why--3 { grid-template-columns: 1fr; gap: 28px; } }

/* odkaz na hru v úvodu */
.hero__game { display: inline-block; flex-basis: 100%; margin: 2px 0 0; width: max-content; max-width: 100%; color: #b7cad4; text-decoration: none; font-size: .95rem; border-bottom: 1px dashed rgba(244,178,62,.5); padding-bottom: 2px; }
.hero__game b { color: var(--accent); font-weight: 600; }
.hero__game:hover { color: #fff; }

/* ===== mobil: nic v úvodu nesmí být širší než obrazovka ===== */
.hero__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--v2 .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .hero--v2 .hero__actions .btn { max-width: 100%; white-space: normal; }
}