:root{--bg:#f6f8fb;--text:#0f1a2a;--muted:#5e6674;--primary:#0071e3;--gold:#f4c046;--blue:#2b6cf0;--card:#ffffff;--light:#f7fbff}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#fdfefe 0%,var(--bg) 50%,#eef1f6 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}

.nav{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e2e6ed;box-shadow:0 8px 24px rgba(6,24,53,.06)}
.nav__brand{font-weight:800;letter-spacing:.02em}
.nav__links{display:flex;gap:18px;align-items:center}
.nav__cta{padding:8px 14px;border-radius:999px;background:var(--primary);color:#fff;box-shadow:0 12px 24px rgba(0,113,227,.18)}

.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:86vh;padding:72px 7vw;column-gap:3vw;gap:24px;overflow:hidden}
.hero--dark{background:radial-gradient(1300px 520px at 12% 16%,#ffffff 0%,#f3f6fc 45%,#e6ebf4 100%)}
.hero__content{align-self:center}
.hero__title{font-size:clamp(48px,8vw,120px);line-height:.9;margin:0;background:linear-gradient(180deg,#0f1a2a 0%,#3a4a63 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__subtitle{font-size:clamp(18px,2.5vw,28px);color:var(--muted);margin:12px 0 24px}
.hero__actions{display:flex;gap:12px}
#hero-image{justify-self:flex-start;width:auto;max-width:min(100%,640px);max-height:68vh;height:auto;border-radius:26px;display:block;box-shadow:0 18px 44px rgba(12,33,71,.12);background:transparent}
.hero[data-product="condolex"] #hero-image{width:auto;max-width:min(100%,820px);max-height:68vh}
.hero__arrow{position:absolute;background:rgba(15,26,42,.92);color:#fff;border:none;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 10px 24px rgba(8,31,72,.18);transition:transform .2s ease,box-shadow .2s ease;z-index:5}
.hero__arrow:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(8,31,72,.24)}

.split{padding:40px 7vw}
.split__pane{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;background:linear-gradient(135deg,#f4f7ff 0%,#eef3ff 50%,#e7ebf3 100%);border-radius:40px;box-shadow:0 24px 60px rgba(14,33,71,.1)}
.split__pane--light{background:linear-gradient(135deg,#e8f2ff 0%,#f3f8ff 52%,#edf1f8 100%)}
.pane__content{padding:72px}
.pane__title{font-size:clamp(38px,6vw,90px);margin:0;color:#0f1a2a}
.pane__subtitle{font-size:clamp(18px,2.2vw,26px);color:#4e5c6f;margin:10px 0 24px}
.pane__actions{display:flex;gap:12px}
.pane__visual{padding:28px 48px}
.pane__visual img{width:min(560px,90%);border-radius:26px;clip-path:inset(0 round 26px);display:block;box-shadow:0 24px 70px rgba(12,40,90,.18)}

.plans{padding:96px 7vw;background:linear-gradient(180deg,#f7f9fd 0%,#eef2f8 100%)}
.plans__title{font-size:clamp(28px,4vw,48px);margin:0 0 10px}
.plans__subtitle{color:var(--muted);margin:0 0 24px}
.plan__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.plan__card{background:var(--card);border:1px solid #dbe2ed;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 14px 38px rgba(12,33,71,.08)}
.plan__card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,40,110,.14)}
.plan__badge{color:#6b7484}
.plan__price{font-weight:700}
.plans__note{margin-top:16px;color:#6c7482}

.cta-band{position:sticky;bottom:0;z-index:20;display:flex;gap:12px;justify-content:center;padding:12px;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-top:1px solid #dfe4ec;box-shadow:0 -10px 28px rgba(6,24,53,.08)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid #cfd7e3}
.btn--primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(0,113,227,.2)}
.btn--ghost{background:rgba(255,255,255,.65);color:#253348;border-color:#d4dce7}
.btn--xl{font-size:18px;padding:16px 24px}
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:0;top:calc(100% + 18px);transform:translateY(6px) scale(.98);background:rgba(255,255,255,.95);color:#0f1a2a;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.3;white-space:normal;width:max-content;min-width:260px;max-width:420px;box-shadow:0 12px 30px rgba(12,33,71,.18);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:12}
[data-tooltip]::before{content:"";position:absolute;left:20px;top:calc(100% + 8px);transform:translateY(6px);border-width:0 10px 10px 10px;border-style:solid;border-color:transparent transparent rgba(255,255,255,.95) transparent;filter:drop-shadow(0 8px 16px rgba(12,33,71,.14));opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:11}
[data-tooltip]:hover::after,[data-tooltip]:focus::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translateY(0) scale(1)}
[data-tooltip]:hover::before,[data-tooltip]:focus::before,[data-tooltip]:focus-visible::before{opacity:1;transform:translateY(0)}
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:0;top:calc(100% + 18px);transform:translateY(6px) scale(.98);background:rgba(255,255,255,.95);color:#0f1a2a;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.3;white-space:normal;width:max-content;min-width:260px;max-width:420px;box-shadow:0 12px 30px rgba(12,33,71,.18);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:12}
[data-tooltip]::before{content:"";position:absolute;left:20px;top:calc(100% + 8px);transform:translateY(6px);border-width:0 10px 10px 10px;border-style:solid;border-color:transparent transparent rgba(255,255,255,.95) transparent;filter:drop-shadow(0 8px 16px rgba(12,33,71,.14));opacity:0;transition:opacity .18s ease,transform .18s ease;z-index:11}
[data-tooltip]:hover::after,[data-tooltip]:focus::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translateY(0) scale(1)}
[data-tooltip]:hover::before,[data-tooltip]:focus::before,[data-tooltip]:focus-visible::before{opacity:1;transform:translateY(0)}

.footer{display:flex;justify-content:center;align-items:center;padding:28px 8vw;color:#5b6372;background:#f8fafc;border-top:1px solid #e0e6ef}
.footer__links{display:flex;align-items:center;gap:12px;justify-content:center;width:100%}
.footer__zap{padding:10px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px}
.footer__zap-icon{width:18px;height:18px;object-fit:contain}

.upsell{position:fixed;inset:0;background:rgba(12,20,32,.35);display:grid;place-items:center}
.hidden{display:none}
.upsell__dialog{position:relative;width:min(640px,92vw);background:#ffffff;border:1px solid #e2e6ef;border-radius:22px;padding:28px;box-shadow:0 30px 80px rgba(12,33,71,.16)}
.upsell__title{margin:0 0 8px;font-size:clamp(22px,3vw,28px)}
.upsell__text{margin:0 0 20px;color:#4e5c6f}
.upsell__actions{display:flex;gap:12px}
.upsell__close{position:absolute;right:14px;top:10px;background:#eef2f8;border:none;color:#4e5c6f;width:34px;height:34px;border-radius:50%}

.system-page{background:linear-gradient(180deg,#f8fbff 0%,#eef2f8 60%,#e8edf7 100%)}
.system-hero{display:flex;align-items:flex-start;gap:22px;padding:86px 7vw 38px;width:100%;max-width:1400px;margin:0 auto}
.system-hero__logo{width:min(140px,28vw);height:auto;border-radius:18px;box-shadow:0 12px 30px rgba(12,33,71,.12);background:#fff;padding:10px}
.system-hero__copy{flex:1 1 auto;max-width:none}
.system-hero__eyebrow{margin:0 0 8px;color:var(--muted);letter-spacing:.04em;font-weight:700;display:block}
.system-hero__title{margin:0 0 12px;font-size:clamp(32px,5vw,62px);line-height:1.05;color:#0f1a2a}
.system-hero__subtitle{margin:0;color:#4b5566;font-size:clamp(16px,2.2vw,22px)}

.comic{padding:12px 7vw 86px}
.comic__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,360px));gap:18px;justify-items:center;justify-content:center;max-width:1140px;margin:0 auto}
.comic__panel{position:relative;display:block;overflow:hidden;background:var(--card);border:1px solid #d9e1ec;border-radius:20px;box-shadow:0 18px 50px rgba(12,33,71,.08);aspect-ratio:1/1;min-height:300px;isolation:isolate;width:100%;max-width:360px}
.comic__panel--clickable{cursor:pointer}
.comic__image{position:absolute;inset:0}
.comic__image img{width:100%;height:100%;object-fit:cover;display:block}
.comic__image--contain img{object-fit:contain;background:#fff}
.comic__image--bottom img{object-position:center bottom}
.comic__badge{position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 10px 24px rgba(0,113,227,.18);z-index:2}
.comic__text{position:absolute;left:56px;right:14px;top:14px;margin:0;font-size:15px;color:#0f1a2a;background:rgba(255,255,255,.95);padding:12px 14px;border-radius:12px;box-shadow:0 12px 30px rgba(12,33,71,.18);opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .25s ease,transform .25s ease;z-index:2;pointer-events:none}
.comic__text::after{content:"";position:absolute;top:100%;left:18px;border-width:10px 10px 0 10px;border-style:solid;border-color:rgba(255,255,255,.95) transparent transparent transparent;filter:drop-shadow(0 6px 10px rgba(12,33,71,.1))}
.comic__text--right::after{top:100%;left:auto;right:18px;border-width:10px 10px 0 10px;border-color:rgba(255,255,255,.95) transparent transparent transparent;transform:none;filter:drop-shadow(0 6px 10px rgba(12,33,71,.1))}
.comic__text--bottom{left:50%;right:auto;bottom:14px;top:auto;width:82%;text-align:center;transform:translate(-50%,0) scale(.98)}
.comic__text--bottom::after{top:auto;bottom:100%;left:50%;right:auto;transform:translateX(-50%);border-width:0 12px 12px 12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,.95) transparent;filter:drop-shadow(0 6px 10px rgba(12,33,71,.1))}
.comic__text--centered{left:50%;right:auto;top:50%;width:82%;text-align:center;transform:translate(-50%,-50%) scale(.98)}
.comic__text--centered::after{top:auto;bottom:100%;left:50%;right:auto;transform:translateX(-50%);border-width:0 12px 12px 12px;border-color:transparent transparent rgba(255,255,255,.95) transparent;filter:drop-shadow(0 6px 10px rgba(12,33,71,.1))}
.comic__panel:hover .comic__text,.comic__panel:focus-within .comic__text{opacity:1;transform:translateY(0) scale(1)}
.comic__panel:hover .comic__text--centered,.comic__panel:focus-within .comic__text--centered{transform:translate(-50%,-50%) scale(1)}
.comic__panel:hover .comic__text--bottom,.comic__panel:focus-within .comic__text--bottom{transform:translate(-50%,0) scale(1)}
.comic__details{grid-column:1/-1;width:100%}
.comic__details-card{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;background:var(--card);border:1px solid #d9e1ec;border-radius:22px;padding:20px;box-shadow:0 18px 50px rgba(12,33,71,.08);max-width:1200px;margin:0 auto}
.comic__details-title{margin:0;color:#0f1a2a;font-size:clamp(20px,2.6vw,26px)}
.comic__details-gallery{display:grid;grid-template-columns:1fr;gap:16px}
.comic__details-media img{width:100%;height:100%;object-fit:contain;display:block;border-radius:14px;background:#fff}

.condolexa{padding:24px 7vw 96px}
.condolexa__list{display:grid;gap:22px;max-width:1200px;margin:0 auto}
.condolexa__item{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid #d9e1ec;border-radius:22px;padding:20px;box-shadow:0 18px 40px rgba(12,33,71,.08)}
.condolexa__item--reverse{grid-template-columns:1fr minmax(280px,420px)}
.condolexa__item--reverse .condolexa__media{order:2}
.condolexa__item--reverse .condolexa__text{order:1}
.condolexa__media img{width:100%;height:100%;object-fit:contain;display:block;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(12,33,71,.12)}
.condolexa__text h3{margin:0 0 8px;font-size:clamp(18px,2.6vw,24px);color:#0f1a2a}
.condolexa__text p{margin:0;color:#1f2b3c;line-height:1.5}

.cta-final{padding:40px 7vw 96px;display:grid;gap:14px;justify-items:center;text-align:center}
.cta-final__text{margin:0;font-size:18px;color:#0f1a2a;font-weight:700;max-width:900px}
.cta-final__btn{font-size:18px}
.cta-final__btn--zap{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:#fff;border:1px solid #cfd7e3;color:#0f1a2a;box-shadow:0 10px 22px rgba(12,33,71,.08)}
.cta-final__btn--zap:hover{transform:translateY(-1px)}
.cta-final__btn--zap .cta-final__icon{width:22px;height:22px;object-fit:contain}

@media(max-width:900px){.hero{grid-template-columns:1fr}.split__pane{grid-template-columns:1fr}.pane__content{padding:40px}.pane__visual{padding:20px}}

.parallax{will-change:transform}

@media(max-width:720px){
  .cta-band{display:none}
}

@media(min-width:1200px){
  .hero{padding-right:4vw}
  #hero-image{margin-left:0}
  .hero[data-product="condolex"] #hero-image{max-width:min(100%,820px)}
}

@media(min-width:960px){
  .comic__grid{grid-template-columns:repeat(3,minmax(260px,360px))}
}

@media(max-width:720px){
  .system-hero{padding-top:68px;flex-direction:column;align-items:flex-start}
  .comic__panel{aspect-ratio:unset;min-height:280px}
  .comic__image{min-height:100%}
  .condolexa__item{grid-template-columns:1fr;grid-auto-rows:auto}
}

.lightbox{position:fixed;inset:0;background:rgba(12,20,32,.87);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
.lightbox__img{max-width:90%;max-height:90%;width:auto;height:auto;border-radius:20px;box-shadow:0 24px 60px rgba(3,9,20,.35);object-fit:contain}
.lightbox__close{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.92);color:#1c2436;border:none;width:44px;height:44px;font-size:26px;font-weight:700;border-radius:50%;cursor:pointer;box-shadow:0 12px 32px rgba(3,9,20,.35)}
.lightbox.hidden{display:none}