/* JIVESFACTORY DESIGN
   Edit the colors in :root to change the entire site.
   All pages use this ONE stylesheet.
*/

:root {
  --pink:#f51f63;
  --pink-soft:#fff0f5;
  --navy:#11133f;
  --ink:#24263b;
  --muted:#687087;
  --line:#e9eaf0;
  --paper:#fff;
  --wash:#f8f8fc;
  --mint:#e8f7f2;
  --radius:22px;
  --shadow:0 18px 50px rgba(24,27,66,.08);
  --max:1180px}


* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

a {
  color:inherit;
  text-decoration:none}

button,input,textarea,select {
  font:inherit}

img {
  max-width:100%;
  height:auto}

 .wrap {
  width:min(var(--max),calc(100% - 44px));
  margin:auto}


.topbar {
  background:var(--navy);
  color:#fff;
  font-size:12px;
  letter-spacing:.04em}

.topbar .wrap {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  gap:15px}


header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(233,234,240,.8)}

.nav {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px}

.brand img {
  width:230px;
  display:block}

.navlinks {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
  font-weight:650}

.navlinks a {
  color:#45485f}

.navlinks a:hover,.navlinks a.active {
  color:var(--pink)}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 21px;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-weight:750;
  font-size:14px;
  border:1px solid rgba(245,31,99,.28);
  box-shadow:0 5px 16px rgba(245,31,99,.07);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}

.btn:hover {
  background:#fff7fa;
  border-color:rgba(245,31,99,.58);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(245,31,99,.11)}

.btn.outline {
  background:#fff;
  color:var(--navy);
  border-color:#e6e3eb;
  box-shadow:none}

.btn.outline:hover {
  background:#fff7fa;
  border-color:rgba(245,31,99,.4)}

.menu {
  display:none;
  border:0;
  background:var(--pink-soft);
  color:var(--navy);
  border-radius:12px;
  padding:10px 13px;
  font-size:20px}


.hero {
  padding:84px 0 78px;
  background:radial-gradient(circle at 88% 20%,#ffe4ed 0,transparent 29%),linear-gradient(120deg,#fff 0%,#fff9fb 54%,#f7f6ff 100%);
  overflow:hidden}

.hero-grid {
  display:grid;
  grid-template-columns:1.04fr .96fr;
  align-items:center;
  gap:50px}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--pink);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px}

.eyebrow:before {
  content:"";
  width:24px;
  height:2px;
  background:var(--pink)}

h1,h2,h3 {
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  color:var(--navy);
  line-height:1.12;
  letter-spacing:-.045em;
  margin:0 0 18px}

h1 {
  font-size:clamp(42px,5.4vw,68px);
  max-width:700px}

h2 {
  font-size:clamp(32px,4vw,46px)}

h3 {
  font-size:21px;
  letter-spacing:-.025em}

.hero p {
  font-size:18px;
  color:#5f6479;
  max-width:610px;
  margin:0 0 28px}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px}

.hero-art {
  position:relative;
  min-height:420px;
  border-radius:34px;
  background:linear-gradient(145deg,#f8e6ed,#e9e8fb);
  overflow:hidden;
  box-shadow:var(--shadow)}

.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(1px)}

.orb.one {
  width:290px;
  height:290px;
  background:#ffb5cb;
  right:-40px;
  top:-55px}

.orb.two {
  width:240px;
  height:240px;
  background:#b9b6ef;
  left:-60px;
  bottom:-65px}

.art-card {
  position:absolute;
  background:#fff;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 18px 45px rgba(28,24,75,.12);
  border-radius:20px;
  padding:22px}

.art-main {
  left:12%;
  top:18%;
  width:72%;
  transform:rotate(-3deg)}

.art-main .label {
  font-size:11px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase}

.art-main strong {
  display:block;
  font-size:28px;
  line-height:1.15;
  color:var(--navy);
  margin:10px 0 18px}

.bar {
  height:9px;
  border-radius:10px;
  background:#f0f0f6;
  margin:10px 0}

.bar i {
  display:block;
  height:100%;
  border-radius:10px;
  background:var(--pink)}

.art-mini {
  right:5%;
  bottom:10%;
  width:42%;
  transform:rotate(5deg)}

.dots {
  display:flex;
  gap:6px;
  margin-bottom:14px}

.dots i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pink)}

.dots i:nth-child(2) {
  background:#b9b6ef}

.dots i:nth-child(3) {
  background:#91d5bf}


.section {
  padding:84px 0}

.section.soft {
  background:var(--wash)}

.section-head {
  max-width:720px;
  margin-bottom:38px}

.section-head p,.intro {
  color:var(--muted);
  font-size:17px}

.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}

.grid2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px}

.card {
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 8px 26px rgba(24,27,66,.035)}

.card p {
  color:var(--muted);
  margin:0}

.iconbox {
  width:48px;
  height:48px;
  border-radius:15px;
  background:var(--pink-soft);
  display:grid;
  place-items:center;
  color:var(--pink);
  font-size:22px;
  margin-bottom:20px}

.card h3 {
  margin-bottom:11px}

.pill {
  display:inline-flex;
  border-radius:999px;
  background:var(--pink-soft);
  color:#b9144a;
  padding:6px 11px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center}

.visual-panel {
  background:linear-gradient(140deg,#fdf0f5,#f0efff);
  border-radius:28px;
  padding:34px;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:space-between}

.visual-panel .big {
  font-size:clamp(35px,4vw,52px);
  font-weight:850;
  color:var(--navy);
  line-height:1.08;
  letter-spacing:-.05em}

.statrow {
  display:flex;
  gap:12px;
  flex-wrap:wrap}

.stat {
  background:#fff;
  border:1px solid #eee;
  border-radius:15px;
  padding:13px 16px;
  min-width:110px}

.stat b {
  display:block;
  color:var(--pink);
  font-size:21px}

.stat small {
  color:var(--muted)}

.step {
  display:flex;
  gap:16px;
  margin:20px 0}

.stepno {
  flex:0 0 38px;
  height:38px;
  border-radius:12px;
  background:var(--pink-soft);
  color:var(--pink);
  display:grid;
  place-items:center;
  font-weight:850}

.step p {
  margin:5px 0 0;
  color:var(--muted)}


.cta {
  padding:58px 0;
  background:var(--navy);
  color:white}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}

.cta h2 {
  color:white;
  margin:0 0 10px}

.cta p {
  margin:0;
  color:#c6c7da}

.cta .btn {
  flex-shrink:0}


.pagehero {
  padding:70px 0 56px;
  background:linear-gradient(120deg,#fff5f8,#f8f7ff)}

.pagehero h1 {
  font-size:clamp(38px,4.5vw,58px);
  max-width:820px}

.crumb {
  font-size:13px;
  color:var(--muted);
  margin-bottom:22px}

.content {
  max-width:850px}

.content h2 {
  font-size:30px;
  margin:38px 0 14px}

.content p,.content li {
  color:#62687c}

.content ul {
  padding-left:22px}

.form {
  display:grid;
  gap:14px}

.form label {
  display:grid;
  gap:7px;
  font-weight:700;
  color:var(--navy);
  font-size:13px}

.form input,.form textarea,.form select {
  border:1px solid #dfe1e9;
  border-radius:12px;
  padding:13px 14px;
  background:white;
  color:var(--ink);
  outline:none}

.form input:focus,.form textarea:focus {
  border-color:var(--pink);
  box-shadow:0 0 0 3px #ffe1eb}

.form textarea {
  min-height:130px;
  resize:vertical}


footer {
  background:#11133f;
  color:#fff;
  padding:58px 0 22px}

.footgrid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:42px}

.footbrand img {
  width:220px;
  background:#fff;
  border-radius:8px;
  padding:6px}

.footgrid p,.footgrid a {
  color:#c6c7da;
  font-size:14px}

.footgrid h3 {
  color:#fff;
  font-size:16px;
  letter-spacing:0;
  margin-bottom:18px}

.footlinks {
  display:grid;
  gap:10px}

.footbottom {
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:38px;
  padding-top:18px;
  color:#aeb1c8;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:20px}


.notice {
  background:#fff8e8;
  border:1px solid #f4e4bd;
  border-radius:14px;
  padding:16px;
  color:#68532a;
  font-size:14px}

.article-card {
  overflow:hidden;
  padding:0}

.article-art {
  height:145px;
  background:linear-gradient(130deg,#ffe1eb,#e7e5ff);
  display:grid;
  place-items:center;
  font-size:38px;
  color:var(--pink)}

.article-body {
  padding:22px}

.article-body small {
  color:var(--pink);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em}


@media(max-width:850px) {
  .navlinks {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:82px;
  background:#fff;
  padding:20px 24px 25px;
  border-bottom:1px solid var(--line);
  flex-direction:column;
  align-items:flex-start;
  gap:17px}

.navlinks.open {
  display:flex}

.menu {
  display:block}

.nav .btn {
  display:none}

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

.hero {
  padding:60px 0}

.hero-art {
  min-height:340px}

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

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

.cta-inner {
  align-items:flex-start;
  flex-direction:column}

}


@media(max-width:560px) {
  .wrap {
  width:min(var(--max),calc(100% - 32px))}

.brand img {
  width:195px}

.nav {
  height:72px}

.navlinks {
  top:72px}

.hero-art {
  min-height:290px}

.art-main {
  left:8%;
  width:82%;
  padding:17px}

.art-mini {
  width:48%;
  padding:14px}

.grid3,.grid2,.footgrid {
  grid-template-columns:1fr}

.section {
  padding:62px 0}

.pagehero {
  padding:52px 0 42px}

.footbottom {
  flex-direction:column}

.topbar .wrap {
  justify-content:center}

.topbar span:last-child {
  display:none}

}



/* ============================================================
   RESPONSIVE IMPROVEMENTS — edit these rules for screen sizes.
   Desktop: 1025px+ | Tablet: 601–1024px | Phone: <=600px
   ============================================================ */
html { overflow-x: clip; }
body { min-width: 0; overflow-wrap: break-word; }
main, section, .wrap, .card, .visual-panel, .content { min-width: 0; }
.wrap { width: min(var(--max), calc(100% - 48px)); }
img, video, iframe, svg { max-width: 100%; }
h1,h2,h3,p,a { overflow-wrap: break-word; }
.hero-grid, .split, .grid2, .grid3, .footgrid { min-width: 0; }
.hero-grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); }
.split { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.footgrid { grid-template-columns: 1.4fr 1fr 1fr; }
.nav { position:relative; min-width:0; }
.brand { flex:0 1 auto; min-width:0; }
.brand img { width:clamp(165px,18vw,230px); }
.navlinks { min-width:0; gap:clamp(12px,2vw,28px); }
.nav > .btn { white-space:nowrap; }
.btn { max-width:100%; text-align:center; }
.hero-art, .visual-panel { min-width:0; }
.art-main { max-width:calc(100% - 32px); }
.art-mini { max-width:52%; }
.form input, .form select, .form textarea { width:100%; min-width:0; }
.content { width:100%; }
.article-body { min-width:0; }
@media (max-width:1024px) {
 .nav { height:74px; gap:14px; }
 .navlinks { display:none; position:absolute; top:100%; left:0; right:0; z-index:30; background:white; padding:16px 22px 22px; border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; box-shadow:0 18px 30px rgba(17,19,63,.1); flex-direction:column; align-items:stretch; gap:0; }
 .navlinks.open { display:flex; }
 .navlinks a { display:block; padding:12px 6px; border-bottom:1px solid var(--line); }
 .navlinks a:last-child { border-bottom:0; }
 .menu { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; margin-left:auto; }
 .nav > .btn { display:none; }
 .hero-grid, .split { grid-template-columns:minmax(0,1fr); gap:32px; }
 .hero { padding:64px 0; }
 .hero-art { width:100%; min-height:360px; }
 .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .footgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
 .cta-inner { flex-direction:column; align-items:flex-start; }
 .section { padding:68px 0; }
 .pagehero { padding:60px 0 48px; }
}
@media (max-width:600px) {
 .wrap { width:calc(100% - 32px); }
 .nav { height:66px; }
 .brand img { width: min(190px, 60vw); }
 .topbar { font-size:10px; letter-spacing:0; }
 .topbar .wrap { text-align:center; justify-content:center; padding:7px 0; }
 .topbar span:last-child { display:none; }
 .hero { padding:42px 0 50px; }
 .hero-grid { gap:28px; }
 h1 { font-size:clamp(32px,9vw,44px); line-height:1.13; }
 h2 { font-size:clamp(27px,7vw,36px); line-height:1.18; }
 h3 { font-size:20px; }
 .hero p, .intro, .section-head p { font-size:16px; }
 .hero-art { min-height:270px; border-radius:22px; }
 .art-card { border-radius:14px; }
 .art-main { top:14%; left:7%; width:80%; padding:15px; transform:rotate(-2deg); }
 .art-main strong { font-size:clamp(17px,5vw,24px); margin:7px 0 10px; }
 .art-mini { right:4%; bottom:8%; width:49%; padding:11px; transform:rotate(3deg); }
 .art-mini b { font-size:13px!important; }
 .art-mini p { font-size:11px!important; }
 .section { padding:48px 0; }
 .pagehero { padding:44px 0 36px; }
 .pagehero h1 { font-size:clamp(30px,8vw,42px); }
 .grid2,.grid3,.footgrid { grid-template-columns:minmax(0,1fr); gap:16px; }
 .card { padding:21px; border-radius:17px; }
 .article-card { padding:0; }
 .article-body { padding:20px; }
 .visual-panel { padding:24px; min-height:260px; }
 .visual-panel .big { font-size:clamp(30px,8vw,42px); }
 .actions { flex-direction:column; align-items:stretch; }
 .actions .btn { width:100%; }
 .cta { padding:44px 0; }
 .cta-inner { gap:24px; }
 .cta-inner .btn { width:100%; }
 .footgrid { gap:30px; }
 footer { padding:42px 0 20px; }
 .footbottom { flex-direction:column; gap:8px; }
 .content h2 { font-size:26px; }
}
@media (max-width:360px) {
 .wrap { width:calc(100% - 24px); }
 .brand img { width:155px; }
 .art-main { width:85%; left:4%; }
 .art-mini { width:52%; }
 .card { padding:17px; }
 .article-card { padding:0; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .btn { transition:none; }
}