:root {
  --ink: #153f40;
  --teal: #3f9899;
  --teal-deep: #226f70;
  --teal-pale: #e7f1ef;
  --gold: #b28b2d;
  --cream: #f8f6ef;
  --white: #fffefa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  height: 92px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--white);
  border-bottom: 1px solid rgba(21,63,64,.09);
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold); font-family: Georgia, serif; font-size: 15px;
}
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: #718686; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
nav { display: flex; gap: 36px; font-size: 13px; }
nav a { position: relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--gold); transition:.25s; }
nav a:hover::after, nav a:focus-visible::after { width:100%; }
.header-contact { color: var(--teal-deep); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--gold); padding-bottom: 6px; }

.hero {
  position: relative;
  max-width: 1440px;
  min-height: 730px;
  margin: 0 auto;
  padding-left: 7vw;
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
  background: var(--white);
}
.hero-copy { position: relative; z-index: 3; align-self: center; padding: 72px 48px 62px 0; }
.eyebrow { display:flex; align-items:center; gap:12px; color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:11px; }
.eyebrow span { width:34px; height:1px; background:currentColor; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing:-.04em; }
h1 { margin-top: 23px; font-size: clamp(48px, 5vw, 77px); line-height: 1.04; }
h1 em, h2 em { color:var(--gold); font-weight:400; }
.hero-text { max-width: 610px; margin: 26px 0 0; color:#587474; font-size:16px; line-height:1.75; }
.hero-actions { display:flex; align-items:center; gap:34px; margin-top:34px; }
.button {
  min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:0 25px; border-radius:2px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; transition:transform .2s, box-shadow .2s, background .2s;
}
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:var(--teal-deep); box-shadow:0 10px 28px rgba(34,111,112,.18); }
.button-primary:hover { background:#185e5f; box-shadow:0 14px 32px rgba(34,111,112,.28); }
.text-link { font-size:13px; border-bottom:1px solid rgba(21,63,64,.25); padding-bottom:6px; }
.text-link span { margin-left:8px; color:var(--gold); }
.trust-row { display:flex; gap:0; margin-top:48px; }
.trust-row div { padding:0 26px; border-left:1px solid rgba(21,63,64,.15); }
.trust-row div:first-child { padding-left:0; border:0; }
.trust-row strong, .trust-row span { display:block; }
.trust-row strong { font-family:Georgia,serif; font-size:20px; font-weight:400; color:var(--teal-deep); }
.trust-row span { margin-top:6px; color:#7c9090; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.hero-visual { position:relative; min-height:730px; background:linear-gradient(145deg,#4aa1a2 0%,#267a7b 78%); overflow:hidden; }
.portrait-backdrop { position:absolute; width:570px; height:570px; border-radius:50%; top:100px; left:28px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.25); animation:breathe 7s ease-in-out infinite; }
.gold-orbit { position:absolute; width:490px; height:490px; border-radius:50%; border:1px solid rgba(221,193,119,.58); top:140px; left:75px; animation:orbitPulse 6s ease-in-out infinite; }
.gold-orbit::before, .gold-orbit::after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:#e0c66f; box-shadow:0 0 0 7px rgba(224,198,111,.11); }
.gold-orbit::before { left:48px; top:56px; }
.gold-orbit::after { right:54px; bottom:48px; }
.hero-visual img { position:absolute; z-index:2; left:50%; bottom:0; width:min(92%,660px); max-height:680px; object-fit:contain; object-position:bottom; transform:translateX(-49%); filter:drop-shadow(0 22px 28px rgba(13,57,58,.25)); }
.dot-grid {
  position:absolute; right:26px; top:30px; width:150px; height:110px; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.9) 2px, transparent 2px); background-size:24px 24px;
}
.experience-card {
  position:absolute; z-index:4; left:24px; bottom:35px; display:flex; align-items:center; gap:12px;
  width:270px; padding:17px 20px; background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(14,55,56,.22);
}
.card-check { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--gold); }
.experience-card p { margin:0; }
.experience-card strong, .experience-card small { display:block; }
.experience-card strong { font-family:Georgia,serif; font-size:15px; font-weight:400; }
.experience-card small { margin-top:4px; color:#789090; font-size:10px; }

.intro-strip {
  max-width:1440px; margin:0 auto; padding:28px 7vw; display:flex; justify-content:space-between; gap:40px;
  color:white; background:var(--ink); font-family:Georgia,serif; font-size:18px;
}
.intro-strip p { margin:0; }
.intro-strip p:last-child { max-width:560px; color:#b9cccc; font-size:15px; line-height:1.5; }
.section { max-width:1440px; margin:0 auto; padding:110px 7vw; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:52px; }
.section-heading h2, .about h2 { margin-top:17px; font-size:clamp(38px,4.2vw,59px); line-height:1.08; }
.section-heading > p { max-width:410px; margin:0; color:#688080; line-height:1.7; font-size:14px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(21,63,64,.15); border-left:1px solid rgba(21,63,64,.15); }
.service-card { position:relative; min-height:340px; padding:30px; border-right:1px solid rgba(21,63,64,.15); border-bottom:1px solid rgba(21,63,64,.15); transition:.25s; }
.service-card:hover { background:var(--teal-pale); transform:translateY(-3px); }
.service-number { color:var(--gold); font-family:Georgia,serif; font-size:13px; }
.service-icon { position:absolute; right:24px; top:24px; width:38px; height:38px; border:1px solid rgba(21,63,64,.18); border-radius:50%; display:grid; place-items:center; color:var(--teal); }
.service-card h3 { margin:100px 0 15px; font-family:Georgia,serif; font-weight:400; font-size:23px; line-height:1.2; }
.service-card p { margin:0; color:#6a8080; font-size:13px; line-height:1.7; }

.about { max-width:1440px; display:grid; grid-template-columns:56% 44%; padding:0; background:var(--teal-deep); color:white; }
.about-panel { padding:100px 7vw; background:linear-gradient(135deg,rgba(255,255,255,.03),transparent); }
.eyebrow.light { color:#dac277; }
.about h2 em { color:#e0c66f; }
.about-lead { max-width:620px; margin:30px 0 0; color:#c9dddd; font-size:15px; line-height:1.8; }
blockquote { margin:34px 0; padding:4px 0 4px 22px; max-width:620px; border-left:2px solid var(--gold); color:#e4eded; font-family:Georgia,serif; font-size:18px; line-height:1.55; }
.button-gold { background:var(--gold); color:white; }
.button-gold:hover { background:#9f7920; box-shadow:0 12px 28px rgba(12,50,50,.2); }
.about-points { display:flex; flex-direction:column; justify-content:center; padding:60px; background:#f0eee6; color:var(--ink); }
.about-points > div { display:grid; grid-template-columns:50px 1fr; gap:20px; padding:32px 0; border-bottom:1px solid rgba(21,63,64,.14); }
.about-points > div:last-child { border:0; }
.about-points span { color:var(--gold); font-family:Georgia,serif; font-size:13px; }
.about-points p { margin:0; color:#6a8080; font-size:13px; line-height:1.7; }
.about-points strong { display:block; margin-bottom:7px; color:var(--ink); font-family:Georgia,serif; font-size:20px; font-weight:400; }

.compact { margin-bottom:42px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); }
.steps article { position:relative; padding:30px 30px 20px 0; border-top:1px solid rgba(21,63,64,.2); }
.steps article::before { content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.steps span { color:var(--gold); font-family:Georgia,serif; font-size:13px; }
.steps h3 { margin:30px 0 12px; font-family:Georgia,serif; font-size:23px; font-weight:400; }
.steps p { margin:0; max-width:245px; color:#718585; font-size:13px; line-height:1.65; }

.cta { max-width:1440px; margin:0 auto; padding:90px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:80px; color:white; background:var(--ink); }
.cta h2 { margin-top:18px; font-size:clamp(43px,5vw,70px); line-height:1.02; }
.cta-copy { align-self:center; }
.cta-copy > p { max-width:540px; margin:0 0 26px; color:#b7cccc; line-height:1.75; }
.button.large { min-width:270px; }
.cta-copy small { margin-left:17px; color:#8eaaaa; }
footer { max-width:1440px; margin:0 auto; padding:28px 5vw; display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--white); font-size:11px; color:#718585; }
footer > a:last-child { color:var(--teal-deep); font-weight:700; }

.telegram-float {
  position:fixed; z-index:50; right:24px; bottom:24px; min-height:52px;
  display:flex; align-items:center; gap:10px; padding:0 18px 0 15px;
  color:white; background:#229ed9; border-radius:999px; box-shadow:0 12px 34px rgba(15,65,77,.3);
  font-size:12px; font-weight:700; letter-spacing:.03em; transition:transform .2s, box-shadow .2s;
}
.telegram-float:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(15,65,77,.38); }
.telegram-float svg { width:22px; height:22px; fill:currentColor; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.service-card.reveal:nth-child(2), .steps article.reveal:nth-child(2) { transition-delay:.08s; }
.service-card.reveal:nth-child(3), .steps article.reveal:nth-child(3) { transition-delay:.16s; }
.service-card.reveal:nth-child(4), .steps article.reveal:nth-child(4) { transition-delay:.24s; }

@keyframes breathe {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.035); opacity:.82; }
}
@keyframes orbitPulse {
  0%,100% { transform:rotate(0deg) scale(1); opacity:.75; }
  50% { transform:rotate(4deg) scale(1.025); opacity:1; }
}

@media (max-width: 980px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-left:0; }
  .hero-copy { padding:70px 7vw 55px; }
  .hero-visual { min-height:610px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .about { grid-template-columns:1fr; }
  .about-points { padding:40px 7vw; }
  .steps { grid-template-columns:repeat(2,1fr); gap:30px 0; }
}

@media (max-width: 620px) {
  .site-header { height:78px; padding:0 20px; }
  .header-contact { font-size:0; border:0; padding:0; }
  .header-contact::after { content:"Telegram"; font-size:11px; }
  .hero-copy { padding:48px 20px 42px; }
  h1 { font-size:clamp(40px,12vw,50px); line-height:1.01; }
  .hero-text { font-size:15px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; }
  .trust-row { flex-wrap:wrap; gap:24px 0; }
  .trust-row div { width:50%; padding:0 12px; }
  .trust-row div:nth-child(3) { padding-left:0; border:0; width:100%; }
  .hero-visual { min-height:520px; }
  .portrait-backdrop { width:400px; height:400px; left:-15px; top:45px; }
  .gold-orbit { width:340px; height:340px; left:14px; top:75px; }
  .hero-visual img { width:112%; max-height:505px; }
  .experience-card { left:16px; bottom:18px; width:245px; padding:13px 15px; }
  .intro-strip { padding:25px 20px; flex-direction:column; gap:10px; }
  .section { padding:80px 20px; }
  .section-heading { align-items:flex-start; flex-direction:column; gap:22px; }
  .section-heading h2, .about h2 { font-size:39px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:280px; }
  .service-card h3 { margin-top:75px; }
  .about-panel { padding:75px 20px; }
  .about-points { padding:35px 20px; }
  .steps { grid-template-columns:1fr; gap:24px; }
  .cta { grid-template-columns:1fr; gap:35px; padding:70px 20px; }
  .cta-copy small { display:block; margin:14px 0 0; }
  footer { align-items:flex-start; flex-direction:column; padding:30px 20px; }
  footer p { margin:0; }
  .telegram-float { right:14px; bottom:14px; min-height:50px; padding:0 16px 0 14px; }
}

@media (max-width: 390px) {
  .brand strong { font-size:15px; }
  .brand small { font-size:8px; }
  .brand-mark { width:38px; height:38px; }
  .trust-row strong { font-size:18px; }
  .telegram-float span { display:none; }
  .telegram-float { width:52px; padding:0; justify-content:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
  .portrait-backdrop, .gold-orbit { animation:none !important; }
  .reveal { opacity:1; transform:none; }
}