{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{ --fuchsia:#CC0099; /* Royal Fuchsia */ --plum:#392f5a; /* Deep Plum */ --charcoal:#413f47;/* Charcoal Gray */ --bg:#ffffff; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,0.08); } body{ margin:0; font-family: 'Lato', system-ui, sans-serif; color:var(--charcoal); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .container{max-width:960px; margin-inline:auto; padding-inline:20px;} .gradient-background { background: linear-gradient(238deg,#0f0032,#cc0099,#392f5a,#cc0099); background-size: 240% 240%; animation: gradient-animation 20s ease infinite; } @keyframes gradient-animation { 0% {background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100% {background-position: 0% 50%;} } header{ padding:100px 20px; text-align:center; color:white; } header h1{ font-size:clamp(2.8rem,5vw,4rem); margin:0; font-weight:700; opacity:0; animation: fadeIn 2s ease forwards; } .tagline{ margin-top:25px; font-size:clamp(1.4rem,2vw,1.6rem); font-weight:300; font-style:italic; color:#fdfdfd; opacity:0; animation: fadeIn 2s ease forwards; animation-delay:1s; } @keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} } .btn{ display:inline-block; margin-top:35px; padding:14px 28px; border-radius:999px; font-weight:700; text-decoration:none; background:white; color:var(--fuchsia); box-shadow:var(--shadow); transition:all .3s ease; opacity:0; animation: fadeIn 2s ease forwards; animation-delay:2s; } .btn:hover{background:var(--fuchsia); color:white; transform:translateY(-2px);} section{padding:60px 20px; background:white;} h2{color:var(--plum); font-family:'Lato', sans-serif; font-size:1.9rem; margin-bottom:20px; font-weight:700; text-align:center;} .about, .services, .cta{text-align:center; max-width:1000px; margin:auto;} .services-grid, .pain-points { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:30px; } @media (max-width: 768px){ .services-grid, .pain-points {grid-template-columns:1fr;} } .card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;} .card h3{color:var(--fuchsia); margin-top:0; font-family:'Lato', sans-serif; font-weight:700;} footer{ padding:40px 20px; text-align:center; color:white; background: linear-gradient(238deg,#0f0032,#cc0099,#392f5a,#cc0099); background-size: 240% 240%; animation: gradient-animation 20s ease infinite; } footer a{color:white; text-decoration:none; border-bottom:2px solid transparent; transition:border-color .3s;} footer a:hover{border-color:var(--fuchsia);} .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;} @media (max-width: 900px){ .about-grid{grid-template-columns:1fr; text-align:left;} .about-photo{justify-self:center;} } .about-text p{margin:0 0 14px} .about-kicker{margin-top:6px; color:var(--plum)} .profile-img{max-width: 260px; width:100%; height:auto; border-radius:50%; box-shadow:0 10px 30px rgba(0,0,0,.18);} .about-caption{font-size:.9rem; color:#6b7280; margin-top:8px; text-align:center} .point {background:#fff0fa; padding:15px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.05); border:2px solid var(--fuchsia);} .centered-point {text-align:center;}