/* =========================================================
   OC Technology – ozoncleaner.cz
   Barevná schémata (tmavý / světlý režim) a styly webu.
   Vzhled jednotlivých prvků je zapsán přímo v index.html (inline styly);
   barvy se berou z proměnných níže, takže změnou hodnot zde se změní celý web.
   ========================================================= */

/* --- Tmavý režim (výchozí) --- */
#site {
  --bg: #000000;
  --bg2: #0B1118;
  --deep: #07111D;
  --contact: #0B1A2C;
  --hdr: #000000;
  --hero: #02060C;
  --foot: #000000;
  --glass: rgba(0,0,0,0.9);
  --card: #0B1118;
  --tint: #101B28;
  --text: #F2F6FA;
  --text2: #C9D5E2;
  --muted: #9AAABD;
  --accent: #5CC0EC;
  --line: #1F2A37;
  --line2: #18212C;
  --line3: #2C3A4A;
  --line-in: #3A4B5F;
  --btn-bg: #1FA2D6;
  --btn-fg: #04121F;
  --ring: #1FA2D6;
  --ring-off: #2A3848;
  --panel: #13273D;
}

/* --- Světlý režim --- */
#site[data-theme="light"] {
  --bg: #FFFFFF;
  --bg2: #F3F7FB;
  --deep: #0F2D57;
  --contact: #1E4A8A;
  --hdr: #173F78;
  --hero: #123566;
  --foot: #0B2448;
  --glass: rgba(18,53,102,0.96);
  --card: #FFFFFF;
  --tint: #EAF3FA;
  --text: #0E2442;
  --text2: #2C3F58;
  --muted: #4A5D75;
  --accent: #1E4A8A;
  --line: #DCE6F0;
  --line2: #E7EEF5;
  --line3: #C9D8E8;
  --line-in: #A9BDD2;
  --btn-bg: #1E4A8A;
  --btn-fg: #FFFFFF;
  --ring: #1E4A8A;
  --ring-off: #DCE6F0;
  --panel: #2A5798;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #000000; }
body.theme-light { background: #FFFFFF; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Ikona sluníčka / měsíčku podle režimu */
.only-dark { display: contents; }
.only-light { display: none; }
#site[data-theme="light"] .only-dark { display: none; }
#site[data-theme="light"] .only-light { display: contents; }

/* Viditelné zaměření při ovládání klávesnicí */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #5CC0EC; outline-offset: 2px; }

/* Přehrávač YouTube po kliknutí na náhled videa */
figure.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

/* Skryté pole proti spamu ve formuláři */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button[disabled] { opacity: 0.6; cursor: progress; }

/* --- Rozložení, tlačítka, animace (z návrhu webu) --- */
body{margin:0}
.hdr-label{display:none}
.hdr-desk{display:none !important}
.hdr-wide{display:none}
@media (min-width: 720px){.hdr-label{display:inline}.hdr-desk{display:inline-flex !important}}
@media (min-width: 1180px){.hdr-wide{display:flex}}
.hdr-btn{min-width:44px;height:44px;padding:0 11px;box-sizing:border-box;border-radius:12px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s}
.hdr-btn:hover{background:rgba(255,255,255,0.16)}
.hdr-link{padding:10px 12px;border-radius:10px;color:#E3EEF8;text-decoration:none;font-family:Montserrat,sans-serif;font-weight:600;font-size:16px;transition:background .2s,color .2s}
.hdr-link:hover{background:rgba(255,255,255,0.1);color:#FFFFFF}
.hdr-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:#1FA2D6;color:#04121F;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 8px 24px -10px rgba(31,162,214,0.8)}
.menu-item{padding:13px 2px;min-height:50px;box-sizing:border-box;color:#FFFFFF;text-decoration:none;font-family:Montserrat,sans-serif;font-weight:600;font-size:17px;border-bottom:1px solid rgba(255,255,255,0.1)}
a.menu-item{display:flex;align-items:center}
.grad{background:linear-gradient(90deg,#9BE1FF 0%,#38B6E8 55%,#1FA2D6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-primary{background:#1FA2D6;color:#04121F;box-shadow:0 12px 32px -12px rgba(31,162,214,0.9);transition:transform .2s,box-shadow .2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(31,162,214,1)}
.btn-ghost{border:1.5px solid rgba(255,255,255,0.45);color:#FFFFFF;transition:background .2s}
.btn-ghost:hover{background:rgba(255,255,255,0.1)}
.btn-solid{background:var(--btn-bg);color:var(--btn-fg);transition:transform .2s,filter .2s}
.btn-solid:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-outline{border:1.5px solid var(--line3);color:var(--accent);transition:background .2s}
.btn-outline:hover{background:var(--tint)}
.tag-glass{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#0A1B33;color:#FFFFFF;font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:0.02em}
.lift{transition:transform .25s ease,box-shadow .25s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 20px 36px -20px rgba(0,0,0,0.6)}
.card:hover{box-shadow:0 26px 50px -26px rgba(0,0,0,0.65)}
.card:hover .arrow-dot{transform:translateX(3px)}
.arrow-dot{transition:transform .2s}
.copy-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,0.4);background:transparent;color:#FFFFFF;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s}
.copy-btn:hover{background:rgba(255,255,255,0.12)}
.inp{width:100%;box-sizing:border-box;min-height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--line-in);font:inherit;font-size:16px;color:var(--text);background:var(--bg)}
.inp:focus{outline:2px solid #1FA2D6;outline-offset:1px}
.foot-link{color:#C9DAEC;text-decoration:none;padding:6px 0}
.foot-link:hover{color:#FFFFFF}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
.bento .b-big{grid-column:span 2;grid-row:span 2}
.bento .b-tall{grid-row:span 2}
.bento .b-wide{grid-column:span 2}
@media (min-width: 900px){.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:12px}}
body{overflow-x:clip}
.o3{color:#46BDF0;font-weight:700}
.o2{color:#4FD98A;font-weight:700}
#site .o3,#site .o2{white-space:nowrap}
.hero-title{font-size:clamp(44px,11.5vw,84px)}
.hero-stage{min-height:236px}
@media (min-width: 1001px){.hero-title{font-size:clamp(56px,6.2vw,88px)}.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr) !important}.hero-stage{order:2;min-height:420px}}
.oc-anchor{position:sticky;top:0;height:0;z-index:6;pointer-events:none;--oc-w:min(52vw,210px);--oc-t:40px;--oc-r:calc((100vw - var(--oc-w)) / 2)}
@media (min-width: 1001px){.oc-anchor{--oc-w:min(30vw,340px);--oc-t:150px;--oc-r:calc(max(5vw, calc((100vw - 1200px) / 2 + 48px)) + min(170px, 15vw) - var(--oc-w) / 2)}}
.oc-mark{position:absolute;top:var(--oc-t);right:var(--oc-r);width:var(--oc-w);aspect-ratio:1;pointer-events:none}
.oc-mark svg{display:block;width:100%;height:100%;overflow:visible}
.oc-core,.oc-ring{transform-box:fill-box;transform-origin:center}
@keyframes oc-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes oc-pop{0%{transform:scale(0.4);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes oc-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes oc-away{0%{opacity:1}100%{opacity:0.02}}
@supports (animation-timeline: scroll()){.oc-mark{animation:oc-away ease-out both;animation-timeline:scroll(root);animation-range:0px 240px}}
@supports not (animation-timeline: scroll()){.oc-js .oc-mark{transition:opacity .7s ease}.oc-js.is-away .oc-mark{opacity:0.02}}
@media (prefers-reduced-motion: no-preference){
.oc-mk{stroke-dasharray:100;animation:oc-draw 1.4s cubic-bezier(.5,0,.2,1) .1s both}
.oc-ring{animation:oc-pop .9s cubic-bezier(.2,.8,.2,1) .8s both}
.oc-core{animation:oc-breathe 8s ease-in-out 2.2s infinite}
.led{animation:oc-led 3.6s ease-in-out infinite}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:rgba(10,27,51,0.88);color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.gal-arrow:hover{background:#1FA2D6}
.gal-arrow:active{transform:translateY(-50%) scale(0.94)}
.gal-prev{left:10px}.gal-next{right:10px}
.gal-count{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(10,27,51,0.88);color:#FFFFFF;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px}
.led{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:#35C3FF;box-shadow:0 0 0 3px rgba(53,195,255,0.14),0 0 8px 1px rgba(53,195,255,0.65)}
@keyframes oc-led{0%,100%{opacity:0.55;box-shadow:0 0 0 3px rgba(53,195,255,0.08),0 0 4px 0 rgba(53,195,255,0.4)}50%{opacity:1;box-shadow:0 0 0 4px rgba(53,195,255,0.2),0 0 10px 2px rgba(53,195,255,0.85)}}
@keyframes oc-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
.hero-in{animation:oc-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-in-2{animation-delay:.15s}
@supports (animation-timeline: view()){.reveal{animation:oc-rise linear both;animation-timeline:view();animation-range:entry 0% cover 18%}}
}