.elementor-19 .elementor-element.elementor-element-3619bac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-19 .elementor-element.elementor-element-3619bac.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-19 .elementor-element.elementor-element-56d0524{width:100%;max-width:100%;margin:6px 6px calc(var(--kit-widget-spacing, 0px) + 6px) 6px;padding:6px 6px 6px 6px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-19 .elementor-element.elementor-element-3619bac{--width:82.094%;}}/* Start custom CSS for html, class: .elementor-element-56d0524 */:root{

  --bg:#FFFDF5;

  --ink:#1F2A2E;

  --white:#ffffff;



  --violet:#6C5CE7;

  --blue:#0984E3;

  --red:#FF4757;

  --yellow:#FDCB6E;

  --mint:#E8FFEB;



  --border:3px solid var(--ink);

  --shadow:10px 10px 0 var(--violet);

  --shadow2:12px 12px 0 var(--red);



  --radius:28px;

  --max:1180px;

}



/* optional: тихий режим трохи приглушує */

:root[data-mode="silent"]{

  --shadow:10px 10px 0 rgba(31,42,46,.22);

  --shadow2:12px 12px 0 rgba(31,42,46,.30);

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:var(--bg);

  color:var(--ink);

  overflow-x:hidden;

}



h1,h2,h3,.btn,.chip,.side-title,.logo{

  font-family:Unbounded,system-ui,sans-serif;

  text-transform:uppercase;

  letter-spacing:.02em

}

a{color:inherit}

.wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}



.skip{

  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;

}

.skip:focus{

  left:18px; top:18px; width:auto; height:auto; padding:12px 16px;

  background:var(--yellow); border:var(--border); border-radius:14px; z-index:10000;

}



/* START */

#start{

  position:fixed; inset:0; z-index:9999;

  display:flex; align-items:center; justify-content:center;

  padding:18px;

  background:linear-gradient(135deg,var(--violet),var(--blue));

  color:var(--white);

  transition:transform .55s cubic-bezier(.7,0,.3,1);

}

#start.hidden{transform:translateY(-110%)}

.start-card{

  width:min(860px,100%);

  border:4px solid rgba(255,255,255,.35);

  border-radius:var(--radius);

  padding:24px;

  text-align:center;

  background:rgba(255,255,255,.08);

  box-shadow:0 22px 80px rgba(0,0,0,.25);

}

.start-logo{

  width:min(520px,100%);

  height:auto;

  filter:drop-shadow(0 12px 30px rgba(0,0,0,.20));

}

.start-text{

  margin:14px auto 0;

  max-width:70ch;

  font-weight:700;

  line-height:1.6;

}

.start-actions{

  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;

  margin-top:18px;

}

.tiny{font-size:.92rem; opacity:.92; line-height:1.55; margin-top:14px}



/* BUTTONS */

.btn{

  display:inline-flex; align-items:center; justify-content:center;

  padding:16px 26px;

  border-radius:999px;

  border:4px solid var(--ink);

  background:var(--yellow);

  color:var(--ink);

  cursor:pointer;

  font-weight:900;

  box-shadow:6px 6px 0 var(--ink);

  transition:.18s transform,.18s box-shadow,.18s background;

  text-decoration:none;

  user-select:none;

}

.btn:hover{transform:translateY(-2px) scale(1.02); box-shadow:10px 10px 0 rgba(255,255,255,.6)}

.btn:active{transform:translateY(0)}

.btn.alt{background:var(--white); color:var(--violet); box-shadow:6px 6px 0 rgba(0,0,0,.35)}

.btn.small{padding:12px 18px; border-width:3px; font-size:.95rem}



/* HEADER */

header{

  position:sticky; top:0; z-index:1000;

  background:rgba(255,255,255,.9);

  backdrop-filter:blur(10px);

  border-bottom:2px solid rgba(108,92,231,.35);

}



/* ✅ fixed header layout (no PDF overlap) */

.topbar{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:12px 0;

  flex-wrap:wrap;

}



.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto;}



.brand-logo{

  height:auto;

  width:220px;

  max-width:38vw;

}



/* nav uses gap (not margin-left) and can wrap */

nav{

  flex:1 1 auto;

  display:flex;

  justify-content:center;

  gap:10px;

  flex-wrap:wrap;

  min-width:260px;

}



nav a{

  text-decoration:none;

  font-weight:800;

  padding:10px 12px;

  border-radius:14px;

  white-space:nowrap;

  margin-left:0;

}

nav a:hover{background:rgba(108,92,231,.10)}



.nav-cta{

  border:2px solid var(--ink);

  background:var(--yellow);

  box-shadow:4px 4px 0 var(--ink);

  white-space:nowrap;

}

.nav-cta:hover{transform:translateY(-1px)}



/* MOOD PANEL */

.mood{

  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:10px;

}



.chip{

  border:2px solid var(--ink);

  background:var(--white);

  border-radius:999px;

  padding:10px 12px;

  font-weight:900;

  cursor:pointer;

  box-shadow:3px 3px 0 rgba(31,42,46,.18);

}

.chip[aria-pressed="true"]{background:var(--yellow)}



.db{

  border:2px solid var(--ink);

  border-radius:16px;

  padding:10px 12px;

  background:rgba(108,92,231,.08);

  display:flex;

  flex-direction:column;

  min-width:110px;

}

.db-label{font-size:.72rem; font-weight:900; opacity:.75}

.db-value{font-weight:900}



/* HERO */

.hero{

  padding:84px 0 46px;

  background:radial-gradient(var(--yellow) 18%, transparent 19%) 0 0/32px 32px;

}

.hero-grid{

  display:grid;

  grid-template-columns:1.2fr .8fr;

  gap:22px;

  align-items:start;

}

.hero h1{

  margin:0 0 16px;

  font-size:clamp(2.2rem,6vw,4.6rem);

  line-height:.92;

  color:var(--violet);

  text-shadow:4px 4px 0 var(--yellow);

}

.tagline{

  display:inline-block;

  padding:10px 16px;

  border-radius:999px;

  background:var(--violet);

  color:var(--white);

  font-weight:900;

}

.lead{

  margin:16px 0 0;

  font-size:1.1rem;

  line-height:1.6;

  font-weight:650;

  max-width:58ch;

}

.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.hook{

  margin-top:16px;

  border:2px dashed rgba(31,42,46,.35);

  border-radius:18px;

  padding:12px 14px;

  background:rgba(253,203,110,.25);

  font-weight:800;

}



.hero-side{

  border:var(--border);

  border-radius:var(--radius);

  background:var(--white);

  box-shadow:var(--shadow);

  padding:18px;

}

.side-title{margin:0; font-size:1.2rem}

.meter{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.pill{

  border:2px solid var(--ink);

  border-radius:999px;

  padding:8px 12px;

  background:var(--yellow);

  font-weight:900;

  box-shadow:3px 3px 0 var(--ink);

}



/* Fun card */

.fun-card{

  margin-top:16px;

  border:2px solid rgba(31,42,46,.18);

  border-radius:20px;

  padding:14px;

  background:linear-gradient(135deg, rgba(108,92,231,.08), rgba(255,71,87,.06));

}

.fun-title{font-weight:900; margin-bottom:6px}

.fun-text{font-weight:650; line-height:1.5}

.fun-out{margin-top:10px; font-weight:900; min-height:24px}



/* LEGEND */

.legend{

  margin-top:14px;

  background:var(--red);

  color:var(--white);

  border-top:var(--border);

  border-bottom:var(--border);

  padding:56px 0;

  position:relative;

  overflow:hidden;

}

.legend:before{

  content:"";

  position:absolute; inset:-40px;

  background:

    radial-gradient(circle at 20% 30%, rgba(253,203,110,.55), transparent 45%),

    radial-gradient(circle at 80% 60%, rgba(9,132,227,.35), transparent 48%);

  transform:rotate(-2deg);

  pointer-events:none;

}

.legend .wrap{position:relative}

.legend h2{

  margin:0 0 16px;

  font-size:clamp(1.6rem,4vw,2.8rem);

  color:var(--yellow);

  text-shadow:3px 3px 0 rgba(0,0,0,.35);

}

.legend p{

  margin:10px 0;

  font-size:1.12rem;

  line-height:1.65;

  font-weight:700;

  max-width:82ch;

}

.hl{

  background:var(--yellow);

  color:var(--ink);

  padding:2px 10px;

  border-radius:999px;

  display:inline-block;

  transform:rotate(-1deg);

  font-weight:900;

}

.legend-punch{

  margin-top:14px;

  font-size:1.18rem;

  font-weight:900;

}



/* SECTION */

.section{padding:64px 0}

.section h2{margin:0 0 18px; font-size:clamp(1.5rem,4vw,2.4rem)}

.intro{margin:0 0 18px; max-width:86ch}



/* CARDS */

.cards{display:grid; grid-template-columns:1fr; gap:26px}

.card{

  display:grid;

  grid-template-columns:.95fr 1.05fr;

  border:var(--border);

  border-radius:var(--radius);

  background:var(--white);

  box-shadow:var(--shadow);

  overflow:hidden;

  opacity:.12;

  transform:translateY(32px);

  transition:opacity .35s, transform .35s, box-shadow .35s;

}

.card.active{opacity:1; transform:translateY(0)}

.card:hover{box-shadow:var(--shadow2); transform:translateY(-4px)}

.media{

  border-right:var(--border);

  background:#fafafa;

  display:flex; align-items:center; justify-content:center;

  padding:22px;

  min-height:320px;

}

.media.mint{background:var(--mint)}

.media img{

  width:100%;

  max-width:360px;

  height:auto;

  filter:drop-shadow(10px 10px 0 rgba(0,0,0,.10));

  transition:transform .25s;

}

.card:hover .media img{transform:scale(1.06) rotate(4deg)}



.content{padding:28px}

.badge{

  display:inline-flex; align-items:center;

  padding:8px 14px;

  border-radius:999px;

  background:var(--violet);

  color:var(--white);

  font-weight:900;

  font-size:.82rem;

}

.badge.red{background:var(--red)}

.content h3{margin:14px 0 10px; font-size:clamp(1.25rem,3.6vw,2.1rem)}

.content p{margin:0; line-height:1.65; font-weight:650; font-size:1.02rem}

.specs{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

.spec{

  border:2px solid var(--ink);

  border-radius:14px;

  padding:10px 12px;

  background:var(--yellow);

  box-shadow:3px 3px 0 var(--ink);

  font-weight:900;

  white-space:nowrap;

}



/* TEAM */

.team{

  background:var(--violet);

  padding:72px 0;

  background-image:linear-gradient(45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);

  background-size:44px 44px;

}

.team h2{

  color:var(--yellow);

  text-shadow:4px 4px 0 rgba(0,0,0,.35);

  margin:0 0 24px;

}

.grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;

}

.person{

  background:var(--white);

  border:var(--border);

  border-radius:22px;

  padding:20px;

  box-shadow:8px 8px 0 rgba(0,0,0,.22);

  transition:transform .22s, box-shadow .22s;

  min-height:220px;

}

.person:hover{transform:translateY(-6px); box-shadow:12px 12px 0 var(--yellow)}

.role{

  color:var(--red);

  font-weight:900;

  text-transform:uppercase;

  font-size:.85rem;

  min-height:44px;

  line-height:1.25;

  margin-bottom:10px;

}

.name{font-weight:900; font-size:1.25rem; color:var(--violet); margin-bottom:10px}

.person a{display:block; text-decoration:none; margin:8px 0; font-weight:850}

.person a:hover{color:var(--blue)}



/* FAQ */

.faq{

  background:var(--white);

  border-top:var(--border);

  border-bottom:var(--border);

}

details{

  border:2px solid rgba(31,42,46,.18);

  border-radius:18px;

  padding:14px 16px;

  margin:12px 0;

  background:#fff;

}

summary{cursor:pointer; font-weight:900}

details p{margin:10px 0 0; line-height:1.6; font-weight:650}



/* CATALOG */

.catalog{

  background:var(--yellow);

  border-top:var(--border);

  padding:64px 0;

  text-align:center;

}

.catalog p{margin:10px auto 0; max-width:70ch; line-height:1.65; font-weight:750}



/* FOOTER */

footer{padding:18px 0; text-align:center; font-weight:850; color:rgba(31,42,46,.85)}



.noscript{padding:14px 18px; font-weight:850}



/* Responsive */

@media (max-width: 1180px){

  .mood{ display:none; } /* ✅ hide mood earlier to prevent nav collisions */

}



@media (max-width: 980px){

  .hero-grid{grid-template-columns:1fr}

  .card{grid-template-columns:1fr}

  .media{border-right:none; border-bottom:var(--border)}

  .grid{grid-template-columns:1fr}

  nav{display:none}

}



/* Reduced motion */

@media (prefers-reduced-motion: reduce){

  html{scroll-behavior:auto}

  .card, .person, .btn{transition:none}

}/* End custom CSS */