:root { --purple:#47258c; --pink:#e62075; --teal:#008e9b; --orange:#ff9e00; --green:#70a900; --ink:#25213a; --soft:#fff7fb; --line:#ece4f1; --container:1120px; --header-height:82px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 20px); } body { margin:0; color:var(--ink); font-family:"Segoe UI",Arial,sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } img { max-width:100%; } .container { width:min(100% - 40px,var(--container)); margin-inline:auto; } .section { padding:88px 0; } .section--soft { background:var(--soft); } .section-kicker { margin:0 0 10px; color:var(--pink); font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { text-wrap:balance; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .navbar { min-height:var(--header-height); display:flex; justify-content:space-between; align-items:center; gap:28px; } .logo { display:flex; align-items:center; gap:11px; color:var(--purple); font-weight:800; font-size:.95rem; line-height:1.18; } .logo img { width:55px; height:55px; border-radius:50%; object-fit:cover; } .nav-menu { display:flex; gap:6px; margin:0; padding:0; list-style:none; } .nav-link { display:inline-flex; padding:10px 14px; border-radius:999px; font-weight:700; } .nav-link:hover,.nav-link.active { color:var(--purple); background:#f3edfa; } .menu-toggle { display:none; border:1px solid var(--line); background:#fff; border-radius:10px; width:44px; height:44px; } .menu-toggle span { display:block; width:20px; height:2px; margin:5px auto; background:var(--purple); }
.hero { min-height:620px; display:grid; align-items:center; overflow:hidden; background:radial-gradient(circle at 83% 18%,rgba(230,32,117,.18),transparent 28%),radial-gradient(circle at 71% 78%,rgba(0,142,155,.15),transparent 30%),linear-gradient(125deg,#f8f2ff 0%,#fff 56%,#fff4f9 100%); } .hero__grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:64px; } .hero h1 { max-width:720px; margin:0; color:var(--purple); font-size:clamp(2.55rem,5.2vw,4.8rem); line-height:1.06; } .hero__text { max-width:650px; margin:22px 0 0; color:#574f68; font-size:1.15rem; } .hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; } .btn { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 21px; border-radius:999px; font-weight:800; transition:transform .2s,box-shadow .2s; } .btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(71,37,140,.18); } .btn--primary { color:#fff; background:linear-gradient(135deg,var(--pink),#b7189b); } .btn--secondary { color:var(--purple); border:1px solid #cdbce1; background:#fff; } .hero__logo-card { display:grid; place-items:center; padding:26px; border-radius:48% 52% 48% 52%; background:linear-gradient(135deg,#fff,#f8eefa); box-shadow:0 30px 70px rgba(78,36,123,.15); } .hero__logo-card img { width:min(100%,390px); border-radius:50%; }
.welcome-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; } h2 { margin:0; color:var(--purple); font-size:clamp(2rem,3.4vw,3.15rem); line-height:1.15; } .welcome-copy { padding-left:32px; border-left:5px solid var(--orange); color:#514a5f; font-size:1.15rem; } .welcome-copy p { margin:0 0 20px; } .welcome-copy p:last-child { margin-bottom:0; } .section-heading { max-width:760px; margin:0 auto 42px; text-align:center; } .value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .value-card { padding:34px 28px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 35px rgba(71,37,140,.07); } .value-card span { display:grid; place-items:center; width:50px; height:50px; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--teal),var(--purple)); font-size:1.8rem; } .value-card:nth-child(2) span { background:linear-gradient(135deg,var(--orange),var(--pink)); } .value-card:nth-child(3) span { background:linear-gradient(135deg,var(--green),var(--teal)); } .value-card h3 { margin:20px 0 8px; color:var(--purple); font-size:1.25rem; } .value-card p { margin:0; color:#645c6c; }
.contact-section { position:relative; overflow:hidden; background:linear-gradient(135deg,#452582,#6a278a 58%,#ba197e); color:#fff; } .contact-section::before { content:""; position:absolute; width:540px; height:540px; top:-330px; left:-170px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 65px rgba(255,255,255,.04),0 0 0 130px rgba(255,255,255,.03); } .contact-grid { position:relative; display:grid; grid-template-columns:1fr .85fr; gap:60px; align-items:center; } .contact-section h2,.contact-section .section-kicker { color:#fff; } .contact-section .section-kicker { opacity:.75; } .contact-intro p:last-child { font-size:1.12rem; color:#f5eefa; } .contact-note { display:inline-flex; gap:10px; align-items:center; margin-top:22px; padding:10px 14px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:.92rem; } .contact-card { padding:30px; border:1px solid rgba(255,255,255,.8); border-radius:26px; color:var(--ink); background:rgba(255,255,255,.98); box-shadow:0 25px 56px rgba(19,6,49,.32); } .contact-card__heading { display:flex; align-items:center; gap:13px; margin-bottom:20px; } .contact-card__heading p { margin:0; color:var(--pink); font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } .contact-card h3 { margin:1px 0 0; color:var(--purple); font-size:1.35rem; } .contact-card__badge { display:grid; place-items:center; flex:0 0 auto; width:46px; height:46px; border-radius:15px; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); } .contact-row { display:grid; grid-template-columns:46px 1fr auto; gap:13px; align-items:center; margin-top:10px; padding:14px; border:1px solid transparent; border-radius:16px; color:#554e60; background:#fbf9fd; transition:transform .2s,border-color .2s,background .2s; } .contact-row:hover { transform:translateX(4px); border-color:#e2d4ee; background:#f6f0fa; } .contact-row__icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#eee7f7; font-size:1.25rem; } .contact-row strong,.contact-row small { display:block; } .contact-row strong { color:var(--purple); font-size:.92rem; } .contact-row small { margin-top:2px; color:#655d6e; font-size:.84rem; line-height:1.4; } .contact-row__arrow { color:var(--pink); font-size:1.25rem; font-weight:800; } .contact-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; } .btn--contact,.btn--call-contact { width:100%; color:#fff; } .btn--contact { background:#25d366; } .btn--call-contact { background:var(--purple); } .floating-call { position:fixed; right:20px; bottom:20px; z-index:9; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--pink); color:#fff; font-size:1.5rem; box-shadow:0 14px 30px rgba(230,32,117,.32); } .site-footer { padding:28px 0; color:#eee7f3; background:#26163e; } .footer-inner { display:flex; gap:16px; align-items:center; } .footer-inner img { width:50px; height:50px; border-radius:50%; object-fit:cover; } .footer-inner strong { color:#fff; } .footer-inner p { margin:0; } .footer-inner > p { margin-left:auto; font-size:.9rem; }
@media(max-width:760px) { :root { --header-height:70px; } .container { width:min(100% - 28px,var(--container)); } .menu-toggle { display:block; } .nav-menu { position:absolute; top:calc(var(--header-height) - 2px); right:14px; left:14px; display:none; flex-direction:column; padding:10px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 14px 30px rgba(34,20,62,.12); } .nav-menu.open { display:flex; } .nav-link { width:100%; } .hero { min-height:auto; padding:68px 0; } .hero__grid,.welcome-grid,.contact-grid { grid-template-columns:1fr; gap:38px; } .hero__logo-card { max-width:320px; margin:auto; } .section { padding:64px 0; } .welcome-copy { padding-left:22px; } .value-grid { grid-template-columns:1fr; } .footer-inner { flex-wrap:wrap; } .footer-inner > p { width:100%; margin-left:66px; } .hero__actions .btn { width:100%; } .contact-note { border-radius:16px; } }