/* Tolsicky — shared stylesheet, WebTolsicky-v.4
   PRD-008 Phase 2 design sample. No jQuery / legacy plugins required. */

:root{
  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --bg-card: #ffffff;
  --border: #e3e7ee;
  --text: #171b23;
  --text-muted: #5b6472;
  --accent: #2e4fc7;
  --accent-ink: #1b3690;
  --accent-soft: #eaf0ff;
  --teal: #0f9c8f;
  --teal-text: #0c8277;
  --teal-soft: #e4f7f4;
  --radius: 14px;
  --maxw: 1120px;
  font-size: 16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0f1216;
    --bg-alt: #151a20;
    --bg-card: #171c23;
    --border: #262c35;
    --text: #eef1f5;
    --text-muted: #9aa4b2;
    --accent: #6f8bff;
    --accent-ink: #b7c4ff;
    --accent-soft: #1c2440;
    --teal: #4fd6c6;
    --teal-text: #4fd6c6;
    --teal-soft: #103330;
  }
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.cleaner{ clear: both; }

/* banner — sample-only, never ships */
.sample-banner{
  background: #171b23; color: #fff; font-size: 13px; text-align:center;
  padding: 8px 16px;
}
.sample-banner strong{ color: #ffd166; }
.sample-banner a{ color:#fff; text-decoration:underline; }

/* header */
header.site{
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{
  width:36px; height:36px; border-radius: 11px;
  background: #14181f;
  border: 1.5px solid var(--accent);
  box-shadow: 0 2px 6px rgba(20,30,60,.2);
  display:flex; align-items:center; justify-content:center;
  color: var(--accent); font-weight:800; font-size: 14px; letter-spacing:-0.01em;
  flex: none;
}
.brand .mark svg{ width:20px; height:20px; }
.brand .name{ font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand .tagline{ font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }

nav.primary{ display:flex; align-items:center; gap: 28px; }
nav.primary > a{ color: var(--text); font-size: 14.5px; font-weight: 600; }
nav.primary > a:hover{ color: var(--accent); text-decoration:none; }
.nav-cta{
  background: var(--accent); color:#fff !important; padding: 9px 16px;
  border-radius: 999px; font-size: 13.5px !important;
}
.nav-cta:hover{ background: var(--accent-ink); }
.nav-toggle{ display:none; }

/* products dropdown */
.nav-dropdown{ position: relative; }
.nav-dropdown::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
}
.dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--text); font-size: 14.5px; font-weight: 600; cursor:pointer;
  background:none; border:none; font-family:inherit; padding:0;
}
.dropdown-toggle:hover{ color: var(--accent); }
.dropdown-toggle svg{ width:14px; height:14px; }
.dropdown-menu{
  position:absolute; top: calc(100% + 14px); left: -14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(20,30,60,.25);
  padding: 8px; min-width: 220px;
  display:none; flex-direction:column; gap:2px;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.open .dropdown-menu{ display:flex; }
.dropdown-menu a{
  color: var(--text); font-size: 14px; font-weight: 500; padding: 9px 12px;
  border-radius: 8px; display:flex; align-items:center; gap:10px;
}
.dropdown-menu a:hover{ background: var(--bg-alt); color: var(--accent); text-decoration:none; }
.dropdown-menu img{ width:22px; height:22px; border-radius:6px; flex:none; }
.dropdown-divider{ height:1px; background: var(--border); margin: 6px 8px; }
.dropdown-group-label{
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 4px 12px 2px;
}
.dropdown-menu a.legacy{ opacity: .65; }
.dropdown-menu a.legacy:hover, .dropdown-menu a.legacy:focus{ opacity: 1; }
.dropdown-menu a.current{ color: var(--accent); }

/* hero (home) */
.hero{
  padding: 72px 24px 64px;
  background:
    radial-gradient(700px 320px at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(600px 300px at -5% 10%, var(--teal-soft), transparent 55%);
}
.hero-inner{
  max-width: var(--maxw); margin: 0 auto;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center;
}
.app-badge-row{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.app-badge-icons{ display:flex; }
.app-badge-icons img{
  width:40px; height:40px; border-radius:11px; object-fit:cover;
  border:2px solid var(--bg); box-shadow: 0 3px 8px rgba(20,30,60,.18);
  margin-left:-12px; background: var(--bg-alt); position:relative;
}
.app-badge-icons img:first-child{ margin-left:0; }
.app-badge-label{ font-size: 13px; font-weight: 600; color: var(--text-muted); }
.hero h1{
  font-size: clamp(32px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.hero p.lead{ font-size: 17.5px; color: var(--text-muted); max-width: 46ch; margin: 0 0 28px; }
.hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 22px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  border: 1px solid transparent;
}
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-ink); text-decoration:none; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); text-decoration:none; }

.hero-visual{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.phone{
  position:relative; width: 300px;
  background: #1c2230; border-radius: 36px;
  box-shadow: 0 30px 60px -20px rgba(20,30,60,.4);
  padding: 10px 10px 14px;
}
.phone::before{
  content:""; position:absolute; right:-3px; top:118px;
  width:3px; height:52px; border-radius:2px 0 0 2px;
  background:#2b3348;
}
.phone::after{
  content:""; position:absolute; left:-3px; top:96px;
  width:3px; height:34px; border-radius:0 2px 2px 0;
  background:#2b3348;
  box-shadow: 0 52px 0 0 #2b3348;
}
.phone.small{ width: 220px; }
.phone.landscape{ width: 380px; }
.phone.landscape::before, .phone.landscape::after{ display:none; }
.phone .screen{
  position: relative; aspect-ratio: 420 / 699; border-radius: 27px; overflow: hidden;
  background: #14181f;
}
.phone.landscape .screen{ aspect-ratio: 480 / 287; }
.phone .screen img{
  position:absolute; inset:0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0; animation: phoneCycle 16s infinite backwards;
}
.phone .screen img:only-child{ animation: none; opacity: 1; }
.phone .screen img:nth-child(1){ animation-delay: 0s; }
.phone .screen img:nth-child(2){ animation-delay: 4s; }
.phone .screen img:nth-child(3){ animation-delay: 8s; }
.phone .screen img:nth-child(4){ animation-delay: 12s; }
@keyframes phoneCycle{
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  19%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .phone .screen img{ animation: none; opacity: 0; }
  .phone .screen img:first-child{ opacity: 1; }
}
.phone-caption{
  font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0; text-align:center;
}
.phone-caption strong{ color: var(--text); font-weight: 700; }

/* section headings */
.section{ padding: 8px 0 64px 0; }
.section-head{ max-width: 640px; margin: 0 0 40px; }
.section-head .kicker{
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal-text); margin-bottom: 8px;
}
.section-head h1, .section-head h2{ font-size: 28px; letter-spacing: -0.01em; margin: 0 0 10px; }
.section-head p{ color: var(--text-muted); margin: 0; }

/* app cards */
.apps-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.app-card{
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; display:flex; flex-direction:column; gap: 14px;
}
.app-card .icon{
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--bg-alt); border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  flex: none; overflow: hidden;
}
.app-card .icon img{ width: 76%; height: 76%; object-fit: contain; border-radius: 6px; }
.app-card h3{ margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.app-card p{ margin: 0; color: var(--text-muted); font-size: 14.5px; }
.app-card ul{ list-style: none; margin: 4px 0 0; padding: 0; display:flex; flex-direction:column; gap: 6px; }
.app-card li{ font-size: 13.5px; color: var(--text); display:flex; gap: 8px; align-items:flex-start; }
.app-card li svg{ width: 15px; height:15px; flex: none; margin-top: 3px; color: var(--teal); }
.app-card .more{ margin-top: 6px; font-weight: 700; font-size: 13.5px; }

/* screenshot showcase / gallery — horizontal scroll strip, same pattern for every app */
.showcase{
  display:flex; gap: 20px; margin-top: 44px; padding-bottom: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.showcase figure{
  flex: 0 0 auto; width: 64px; margin:0; display:flex; flex-direction:column; gap:10px;
  scroll-snap-align: start;
}
.showcase.landscape figure{ width: 94px; }
.showcase .shot{
  border-radius: 16px; overflow:hidden; border: 1px solid var(--border);
  box-shadow: 0 16px 32px -18px rgba(20,30,60,.35);
  background: var(--bg-alt);
}
.showcase .shot img{ width:100%; display:block; }
.showcase figcaption{ font-size: 13px; font-weight: 700; color: var(--text-muted); text-align:center; }
.showcase::-webkit-scrollbar{ height: 8px; }
.showcase::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 999px; }
.showcase::-webkit-scrollbar-track{ background: transparent; }

/* two column: download + updates */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel{
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px;
}
.panel h3{ margin: 0 0 14px; font-size: 16px; }
.panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.panel li a{ font-size: 14.5px; font-weight: 600; }
.update{ padding: 12px 0; border-bottom: 1px solid var(--border); }
.update:last-child{ border-bottom: none; padding-bottom: 0; }
.update .date{ font-size: 12.5px; color: var(--text-muted); font-weight:700; letter-spacing:.02em; }
.update p{ margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* ---- product detail page ---- */
.breadcrumb{
  font-size: 13px; color: var(--text-muted); padding: 20px 0 0;
}
.breadcrumb a{ color: var(--text-muted); font-weight: 600; }
.breadcrumb a:hover{ color: var(--accent); }

.product-hero{
  padding: 32px 24px 24px;
}
.discontinued-notice{
  display:flex; gap:12px; align-items:flex-start;
  background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.3);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 28px; max-width: var(--maxw);
  margin-left:auto; margin-right:auto;
}
.discontinued-notice svg{ width:19px; height:19px; color:#e5484d; flex:none; margin-top:2px; }
.discontinued-notice strong{ color: var(--text); }
.discontinued-notice p{ margin:0; font-size:14px; color: var(--text-muted); }
.status-unavailable{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--text-muted); font-weight:700; font-size:14.5px;
  padding: 13px 0;
}
.status-unavailable svg{ width:17px; height:17px; color:#e5484d; }
.product-hero-inner{
  max-width: var(--maxw); margin: 0 auto;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items:center;
}
.product-title-row{ display:flex; align-items:center; gap:16px; margin-bottom: 16px; }
.product-title-row img{
  width:56px; height:56px; border-radius:14px; object-fit:contain;
  background: var(--bg-alt); border:1px solid var(--border); padding:6px;
}
.product-hero h1{
  font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -0.02em; margin:0;
}
.product-tagline{ font-size: 16px; color: var(--text-muted); margin: 4px 0 0; font-style: italic; }
.product-hero .lead{ font-size: 16.5px; color: var(--text-muted); margin: 18px 0 26px; max-width: 56ch; }
.product-hero .lead strong{ color: var(--text); }

.feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 0;
}
.feature-grid .feature{
  background: var(--bg-card); border:1px solid var(--border); border-radius: 12px;
  padding: 16px; font-size: 13.5px; display:flex; gap:10px; align-items:flex-start;
}
.feature-grid svg{ width:16px; height:16px; flex:none; margin-top:2px; color: var(--teal); }

.detail-body{ font-size: 15.5px; color: var(--text); }
.detail-body p{ margin: 0 0 16px; color: var(--text-muted); }
.detail-body strong{ color: var(--text); }
.detail-body h2{ font-size: 22px; margin: 36px 0 12px; letter-spacing:-0.01em; }
.detail-body h3{ font-size: 20px; margin: 32px 0 12px; letter-spacing:-0.01em; }
.detail-body ul, .detail-body ol{ color: var(--text-muted); margin: 0 0 16px; padding-left: 22px; }
.detail-body li{ margin-bottom: 6px; }
.detail-body .sources{ font-size: 13px; color: var(--text-muted); }
.detail-body .sources a{ word-break: break-word; }

/* simple text-page hero — articles, privacy policy, tool pages */
.page-hero{ padding: 40px 24px 8px; }
.page-hero .wrap{ max-width: 760px; }
.page-hero .kicker{
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal-text); margin-bottom: 10px;
}
.page-hero h1{ font-size: clamp(26px, 3.2vw, 34px); letter-spacing:-0.02em; margin: 0 0 10px; }
.page-hero .dek{ font-size: 16.5px; color: var(--text-muted); font-style: italic; margin: 0; }
.narrow{ max-width: 760px; }

.article-gallery{ display:flex; flex-wrap:wrap; gap:12px; margin: 24px 0; }
.article-gallery img{ width: 64px; height:auto; border-radius: 8px; border:1px solid var(--border); }

.tutorial-video{
  width:100%; border-radius: var(--radius); border:1px solid var(--border);
  background:#000; box-shadow: 0 16px 32px -18px rgba(20,30,60,.35); margin: 8px 0 20px;
}

.crosssell{
  background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding: 48px 0;
}
.crosssell-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 20px;
}
.crosssell-item{
  background: var(--bg-card); border:1px solid var(--border); border-radius: 12px;
  padding: 14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.crosssell-item:hover{ border-color: var(--accent); text-decoration:none; }
.crosssell-item img{ width:36px; height:36px; border-radius:9px; object-fit:contain; }
.crosssell-item span{ font-size: 12px; font-weight:700; color: var(--text); line-height:1.3; }
.crosssell-item.current{ border-color: var(--accent); background: var(--accent-soft); }

/* ---- contact page ---- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start;
}
.contact-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 30px;
}
.contact-card h2{ margin:0 0 6px; font-size:22px; }
.contact-card > p{ color: var(--text-muted); margin: 0 0 22px; font-size:14.5px; }
.contact-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.contact-row:last-of-type{ border-bottom:none; }
.contact-row svg{ width:18px; height:18px; color: var(--accent); flex:none; }
.field{ margin-bottom: 16px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size: 13px; font-weight:700; color: var(--text); }
.field input, .field textarea{
  font: inherit; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); resize: vertical;
}
.field input:focus, .field textarea:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.field input.field-invalid, .field textarea.field-invalid{ border-color: #e5484d; }
.form-status{
  font-size: 13.5px; font-weight: 600; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
}
.form-status-error{ color: #e5484d; background: rgba(229,72,77,.1); }
.form-status-ok{ color: var(--teal-text); background: var(--teal-soft); }
#formSubmit:disabled{ opacity: .6; cursor: default; }

/* clickable screenshot thumbnails, enlarged via js/lightbox.js */
.showcase .shot img, .article-gallery img{ cursor: zoom-in; }

.lightbox-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,12,16,.86); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding: 40px;
}
.lightbox-overlay[hidden]{ display:none; }
.lightbox-img{
  max-width: min(90vw, 520px); max-height: 88vh; width:auto; height:auto;
  border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  display:block;
}
.lightbox-close{
  position: fixed; top: 20px; right: 20px;
  width: 42px; height: 42px; border-radius: 999px; border: none;
  background: rgba(255,255,255,.12); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }
.lightbox-close svg{ width:20px; height:20px; }

footer.site{
  border-top: 1px solid var(--border); margin-top: 40px;
  padding: 28px 24px; font-size: 13.5px; color: var(--text-muted);
}
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap: wrap; }
.social-links{ display:flex; gap: 12px; }
.social-links a{
  width: 34px; height: 34px; border-radius: 999px; background: var(--bg-alt);
  border: 1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color: var(--text-muted);
}
.social-links a:hover{ color: var(--accent); border-color: var(--accent); }
.social-links svg{ width:16px; height:16px; }

@media (max-width: 900px){
  .hero-inner, .product-hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; margin: 0 auto 8px; }
  .phone{ width: 238px; }
  .phone.small{ width: 190px; }
  .phone.landscape{ width: 300px; }
  .apps-grid{ grid-template-columns: 1fr; }
  .split, .contact-grid{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .crosssell-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  nav.primary{
    position: fixed; inset: 64px 0 0 0; background: var(--bg);
    flex-direction: column; align-items: flex-start; padding: 24px; gap:18px;
    transform: translateX(100%); transition: transform .25s ease;
    border-top: 1px solid var(--border); overflow-y:auto;
  }
  .nav-toggle:checked ~ nav.primary{ transform: translateX(0); }
  .nav-toggle-label{
    display:flex; align-items:center; justify-content:center;
    width: 40px; height: 40px; cursor: pointer;
  }
  .nav-dropdown{ width:100%; }
  .dropdown-menu{
    display:flex; position:static; box-shadow:none; border:none; background:none;
    padding: 4px 0 0 8px; min-width:0;
  }
  .crosssell-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 721px){ .nav-toggle-label{ display:none; } }