@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

:root{
  --cs-purple:#7645c0;
  --cs-purple-dark:#4d4373;
  --cs-ink:#3b3260;
  --cs-soft:#f6f3fb;
  --cs-line:#e4dcf3;
  --cs-blue:#4cc3f5;
}

html{ background:#fff; scroll-behavior:smooth; }

body{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important;
  max-width:980px !important;
  margin:0 auto !important;
  padding:64px 22px 90px !important;
  color:var(--cs-ink) !important;
  font-size:18px;
  line-height:1.8 !important;
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(118,69,192,.10), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(76,195,245,.10), transparent 60%),
    #fff;
}

body::before{
  content:""; position:fixed; left:0; right:0; top:0; height:6px; z-index:50;
  background:linear-gradient(90deg,var(--cs-blue) 0 50%,var(--cs-purple) 50% 100%);
}

h1,h2,h3{ font-family:'Playfair Display', Georgia, serif !important; color:var(--cs-purple-dark) !important; line-height:1.2; }
h1{ font-size:clamp(2rem,6vw,3.2rem); font-weight:700; margin:0 0 .4em !important; }
h1::after, h2::after{
  content:""; display:block; width:84px; height:4px; margin-top:16px; border-radius:4px;
  background:linear-gradient(90deg,var(--cs-purple) 0 78%, transparent 78% 86%, var(--cs-purple) 86% 100%);
}
h2{ font-size:clamp(1.5rem,4vw,2rem); font-weight:700; margin:2.2em 0 .8em !important; }
h2::after{ width:64px; height:3px; margin-top:12px; }
h3{ font-size:1.25rem; margin:0 0 6px !important; }

h1 + p{ color:var(--cs-purple) !important; font-size:1.3rem !important; line-height:1.6; font-weight:500; margin:18px 0 28px !important; }
p{ color:var(--cs-ink); }

ul{ list-style:none; padding:0; margin:0 0 1em; }
ul li{
  position:relative; margin:10px 0; padding:14px 18px 14px 46px;
  background:var(--cs-soft); border-radius:16px; border-left:4px solid var(--cs-purple);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
ul li::before{
  content:""; position:absolute; left:18px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:2.5px solid var(--cs-purple); border-top:2.5px solid var(--cs-purple); transform:rotate(45deg);
}
ul li:hover{ transform:translateX(6px); background:#efe9fa; box-shadow:0 10px 24px rgba(77,67,115,.12); }

ol{ list-style:none; counter-reset:cs; padding:0; margin:0 0 1em; }
ol li{
  counter-increment:cs; position:relative; margin:14px 0; padding:16px 20px 16px 72px;
  background:var(--cs-soft); border-radius:18px; transition:transform .25s ease, box-shadow .25s ease;
}
ol li::before{
  content:counter(cs); position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; background:var(--cs-purple); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
ol li:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(77,67,115,.14); }

img{ border-radius:24px !important; box-shadow:0 18px 40px rgba(77,67,115,.22); transition:transform .5s ease, box-shadow .5s ease; }
img:hover{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(77,67,115,.30); }

a{ color:var(--cs-purple); text-decoration:none; background:linear-gradient(var(--cs-purple),var(--cs-purple)) 0 100%/0 2px no-repeat; transition:background-size .3s ease, color .2s; }
a:hover{ background-size:100% 2px; color:var(--cs-purple-dark); }

a:has(> div[style*="border"]){ background:none !important; display:block; }
div[style*="border: 1px solid"]{
  border:1px solid var(--cs-line) !important; border-radius:22px !important; padding:24px 26px !important;
  background:#fff; position:relative; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
div[style*="border: 1px solid"]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--cs-purple);
  transform:scaleY(0); transform-origin:top; transition:transform .35s ease;
}
div[style*="border: 1px solid"]:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(77,67,115,.18); border-color:var(--cs-purple) !important; }
div[style*="border: 1px solid"]:hover::before{ transform:scaleY(1); }

a[style*="background:#000"]{
  background:linear-gradient(135deg,#8a56d8,var(--cs-purple) 55%,#5d33a3) !important;
  color:#fff !important; border-radius:999px !important; padding:16px 34px !important; font-weight:600;
  box-shadow:0 14px 30px rgba(118,69,192,.40); transition:transform .25s ease, box-shadow .25s ease;
}
a[style*="background:#000"]:hover{ transform:translateY(-3px); box-shadow:0 20px 40px rgba(118,69,192,.5); color:#fff !important; }

body > p:last-of-type{
  margin-top:56px !important; padding-top:22px; border-top:1px solid var(--cs-line);
  font-size:15px; text-align:center; color:#7a7096;
}

a.cs-logo{ display:block !important; width:max-content; margin:0 auto 34px !important; background:none !important; }
a.cs-logo img{ display:block; width:116px; height:auto; border-radius:0 !important; box-shadow:none !important; transition:transform .4s ease; }
a.cs-logo:hover img{ transform:scale(1.06) rotate(-2deg); box-shadow:none !important; }

@keyframes csFadeUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
body > *{ animation:csFadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
body > *:nth-child(2){ animation-delay:.05s; } body > *:nth-child(3){ animation-delay:.12s; }
body > *:nth-child(4){ animation-delay:.19s; } body > *:nth-child(5){ animation-delay:.26s; }
body > *:nth-child(n+6){ animation-delay:.32s; }
@media (prefers-reduced-motion:reduce){ body > *, img, li, a{ animation:none !important; transition:none !important; } }

@media (max-width:600px){
  body{ padding:48px 18px 70px !important; font-size:17px; }
  ul li{ padding:12px 14px 12px 40px; }
  ol li{ padding:14px 16px 14px 64px; }
}