/* ============ Optivance – STRONA GŁÓWNA (tylko elementy unikalne dla home) ============ */
/* Wymaga wcześniej załadowanego style-shared.css */

/* ---- hero ---- */
.optivance-home .hero{padding:88px 0 100px;}
.optivance-home .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.optivance-home .hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.08;margin-bottom:22px;}
.optivance-home .accent-split{
  background:linear-gradient(90deg,var(--emerald),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.optivance-home .hero .lead{font-size:17.5px;color:var(--muted);max-width:480px;margin-bottom:34px;}
.optivance-home .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---- sygnaturowa grafika: makieta przeglądarki (#1 w SEO -> klik UX -> konwersja) ---- */
.optivance-home .browser-mock{
  background:var(--white);border:1px solid var(--paper-line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,22,28,.25);
}
.optivance-home .browser-bar{
  display:flex;align-items:center;gap:7px;padding:14px 18px;
  background:var(--paper-alt);border-bottom:1px solid var(--paper-line);
}
.optivance-home .browser-dot{width:9px;height:9px;border-radius:50%;background:var(--paper-line);}
.optivance-home .browser-url{
  margin-left:10px;flex:1;background:var(--white);border:1px solid var(--paper-line);
  border-radius:999px;padding:5px 14px;font-family:var(--font-mono);font-size:12px;color:var(--muted);
}
.optivance-home .browser-body{position:relative;padding:28px;min-height:290px;}

.optivance-home .rank-badge{
  position:absolute;top:24px;right:24px;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(31,111,82,.1);color:var(--emerald);
  font-family:var(--font-mono);font-size:11.5px;
  padding:7px 12px;border-radius:999px;
  animation:oa-badge-pop 3.6s ease-in-out infinite;
}
.optivance-home .rank-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald-bright);}

.optivance-home .mock-nav{width:70px;height:8px;border-radius:4px;background:var(--paper-alt);margin-bottom:26px;}
.optivance-home .mock-hero{
  height:78px;border-radius:10px;margin-bottom:18px;
  background:linear-gradient(120deg,rgba(31,111,82,.14),rgba(91,75,209,.14));
}
.optivance-home .mock-row{display:flex;flex-direction:column;gap:9px;margin-bottom:26px;}
.optivance-home .mock-line{height:9px;border-radius:4px;background:var(--paper-alt);width:100%;}
.optivance-home .mock-line.short{width:58%;}

.optivance-home .mock-cta{
  position:relative;display:inline-flex;align-items:center;
  background:var(--ink);color:var(--paper);border:none;cursor:default;
  font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:12px 22px;border-radius:999px;
  animation:oa-cta-pulse 3.6s ease-in-out infinite;
}
.optivance-home .cursor-dot{
  position:absolute;right:-8px;bottom:-8px;
  width:16px;height:16px;border-radius:50%;
  background:var(--violet);border:2px solid var(--white);
  animation:oa-cursor-move 3.6s ease-in-out infinite;
}
.optivance-home .conversion-toast{
  position:absolute;right:28px;bottom:28px;
  background:var(--emerald);color:#fff;
  font-family:var(--font-mono);font-size:11.5px;
  padding:8px 14px;border-radius:999px;
  opacity:0;transform:translateY(6px);
  animation:oa-toast-pop 3.6s ease-in-out infinite;
}

@keyframes oa-badge-pop{
  0%,45%{transform:scale(1);}
  50%{transform:scale(1.06);}
  56%{transform:scale(1);}
  100%{transform:scale(1);}
}
@keyframes oa-cursor-move{
  0%{transform:translate(48px,-56px);}
  50%{transform:translate(0,0);}
  58%{transform:translate(0,0) scale(.6);}
  66%{transform:translate(0,0) scale(1);}
  100%{transform:translate(48px,-56px);}
}
@keyframes oa-cta-pulse{
  0%,50%{box-shadow:0 0 0 0 rgba(31,111,82,0);}
  58%{box-shadow:0 0 0 7px rgba(31,111,82,.16);}
  66%{box-shadow:0 0 0 0 rgba(31,111,82,0);}
  100%{box-shadow:0 0 0 0 rgba(31,111,82,0);}
}
@keyframes oa-toast-pop{
  0%,54%{opacity:0;transform:translateY(6px);}
  62%{opacity:1;transform:translateY(0);}
  85%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(6px);}
}

/* ---- intro ---- */
.optivance-home .intro{padding:70px 0;}
.optivance-home .intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;}
.optivance-home .intro h2{font-size:clamp(26px,3vw,36px);}
.optivance-home .intro-text p{color:var(--muted);margin-bottom:18px;font-size:16.5px;}
.optivance-home .intro-highlight{
  font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:19px;
  border-left:3px solid var(--emerald);padding-left:18px;
}

/* ---- services teaser (2 karty z linkiem do pełnych stron SEO / UX) ---- */
.optivance-home .services{padding:40px 0 90px;}
.optivance-home .service-card{display:flex;flex-direction:column;gap:16px;}
.optivance-home .service-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:2px;}
.optivance-home .service-list li{font-size:14.5px;padding-left:18px;position:relative;color:var(--ink-soft);}
.optivance-home .service-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;}
.optivance-home .service-seo .service-list li::before{background:var(--emerald);}
.optivance-home .service-ux .service-list li::before{background:var(--violet);}
.optivance-home .service-link{
  font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:4px;
}
.optivance-home .service-seo .service-link{color:var(--emerald);}
.optivance-home .service-ux .service-link{color:var(--violet);}

/* ---- model współpracy (tylko na home) ---- */
.optivance-home .model{padding:90px 0;}
.optivance-home .model-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.optivance-home .model-copy h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px;}
.optivance-home .model-copy p{color:var(--muted);font-size:16.5px;}
.optivance-home .model-card.is-flexible{border-color:var(--violet);background:rgba(91,75,209,.04);}
.optivance-home .model-card .hv-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:block;
}

/* ---- responsive (tylko home) ---- */
/* Uwaga: BRAK "order" na .hero-visual - na mobile grafika ma być pod tekstem (naturalna kolejność w DOM) */
@media (max-width:960px){
  .optivance-home .hero-grid,
  .optivance-home .intro-grid,
  .optivance-home .model-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .optivance-home .hero{padding:56px 0 64px;}
  .optivance-home .service-list{grid-template-columns:1fr;}
}