:root{--bg:#fff5f6;--card:#fff;--muted:#5b6472;--text:#111827;--brand:#ff3d5a;--brand2:#ffb703;--brand3:#2ec4b6;--border:rgba(17,24,39,.10);--shadow:0 18px 60px rgba(17,24,39,.12);--radius:18px;--max:1120px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;}*{box-sizing:border-box}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(900px 520px at 10% 0%, rgba(255,61,90,.18), transparent 60%),radial-gradient(900px 520px at 100% 10%, rgba(46,196,182,.18), transparent 55%),radial-gradient(900px 520px at 60% 100%, rgba(255,183,3,.22), transparent 55%),linear-gradient(180deg,#fff7ed,#fff 40%,#fff7ed)}a{color:inherit;text-decoration:none}.container{max-width:var(--max);margin:0 auto;padding:0 18px}.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:14px}.brand{display:flex;align-items:center;gap:10px}.brand .title{font-weight:900}.badge{font-size:12px;padding:4px 10px;border-radius:999px;color:#7c2d12;border:1px solid rgba(255,183,3,.45);background:rgba(255,183,3,.20)}.nav-links{display:flex;gap:12px;flex-wrap:wrap}@media(max-width:860px){.nav-links{display:none}}.nav-links a{padding:10px 12px;border-radius:999px;color:var(--muted);border:1px solid transparent}.nav-links a:hover{color:var(--text);border-color:var(--border);background:rgba(17,24,39,.03)}.cta{display:flex;gap:10px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.9)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.btn.primary{border-color:rgba(255,61,90,.40);background:linear-gradient(135deg, rgba(255,61,90,.95), rgba(255,61,90,.70));color:#fff;font-weight:900}.btn.secondary{border-color:rgba(46,196,182,.45);background:linear-gradient(135deg, rgba(46,196,182,.95), rgba(46,196,182,.70));color:#05312c;font-weight:900}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.hero{padding:54px 0 24px}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}.hero-card{padding:26px}.h1{font-size:46px;line-height:1.05;margin:14px 0 10px;font-weight:1000}@media(max-width:520px){.h1{font-size:36px}}.lead{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 16px}

/* ===== Brand gradient background (subtle, animated) ===== */
body{
  position: relative;
  overflow-x: hidden;
}
body::before{
  content:"";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(255,61,90,.18), rgba(255,61,90,0) 60%),
    radial-gradient(860px 520px at 85% 0%, rgba(46,196,182,.14), rgba(46,196,182,0) 60%),
    radial-gradient(900px 620px at 85% 95%, rgba(255,183,3,.14), rgba(255,183,3,0) 62%),
    linear-gradient(120deg, rgba(255,61,90,.08), rgba(255,61,90,0) 45%, rgba(46,196,182,.06) 70%, rgba(255,183,3,.06));
  filter: saturate(1.05);
  animation: bgShift 16s ease-in-out infinite;
}
@keyframes bgShift{
  0%{transform: translate3d(-1.5%, -1.2%, 0) scale(1.03) rotate(0deg);}
  50%{transform: translate3d(1.6%, 1.2%, 0) scale(1.05) rotate(1deg);}
  100%{transform: translate3d(-1.5%, -1.2%, 0) scale(1.03) rotate(0deg);}
}

/* ===== Promo side boards (desktop only) ===== */
.promo{
  position: fixed;
  top: 96px;
  width: 170px;
  max-width: 170px;
  z-index: 20;
}
.promo-left{left: 16px;}
.promo-right{right: 16px;}
.promo .card{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
}
.promo h4{margin: 0 0 8px; font-size: 14px;}
.promo p{margin: 0 0 10px; font-size: 13px; color: var(--muted);}
.promo a.btn{display:block; text-align:center; padding:10px 12px;}
@media (max-width: 1180px){
  .promo{display:none;}
}
@media (min-width: 1181px){
  /* give the main container breathing room when promos are visible */
  .container{max-width: 980px;}
}

/* ===== Mobile polish ===== */
@media (max-width: 560px){
  .nav .brand{gap:10px}
  .nav img.logo{width:38px;height:38px}
  h1{font-size:28px}
  .grid{grid-template-columns:1fr}
  .card{border-radius:16px}
  .btn{width:100%; justify-content:center}
  .hero{padding:18px}
}

/* ===== Subtle watermark ===== */
.watermark{position:relative; overflow:hidden;}
.watermark::after{
  content:"";
  position:absolute;
  right:-26px;
  bottom:-26px;
  width:220px;
  height:220px;
  background:url("../img/logo.svg") no-repeat center/contain;
  opacity:.06;
  transform: rotate(-8deg);
  pointer-events:none;
}
@media (max-width: 560px){
  .watermark::after{width:160px;height:160px;opacity:.05;}
}