/* Kiev Shipping — design tokens (brand-aligned) */

:root {
  /* Maritime — deep blue + white */
  --paper:    #FFFFFF;
  --paper-2:  #F2F5F8;
  --paper-3:  #E5EDF4;
  --ink:      #06223E;       /* deep navy primary */
  --ink-2:    #0C2F52;
  --ink-3:    #133E6A;
  --sea:      #1565D8;       /* main brand blue (was green) */
  --sea-2:    #0F4FB0;
  --sea-3:    #2E7EE6;
  --wave:     #4FA3E0;       /* light wave / hover */
  --wave-2:   #2C87C9;
  --sand:     #E8F1FB;       /* tint background */
  --gold:     #D4A537;
  --steel:    #5A6B78;
  --steel-2:  #98A4AE;
  --signal:   #D72638;
  --hairline: rgba(11, 34, 54, 0.10);
  --hairline-d: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(11,34,54,0.06), 0 2px 8px rgba(11,34,54,0.04);
  --shadow-md: 0 8px 24px rgba(11,34,54,0.08), 0 2px 8px rgba(11,34,54,0.04);
  --shadow-lg: 0 24px 64px rgba(11,34,54,0.14), 0 8px 24px rgba(11,34,54,0.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Fraunces', 'Times New Roman', serif; font-optical-sizing: auto; }
.font-sans    { font-family: 'Inter', system-ui, sans-serif; }
.tab-nums     { font-variant-numeric: tabular-nums lining-nums; }
.caps         { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 500; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.hairline   { border-color: var(--hairline); }
.hairline-d { border-color: var(--hairline-d); }

/* Top utility bar */
.topbar { background: var(--ink); color: rgba(255,255,255,0.82); }
.topbar a:hover { color: #fff; }

/* Site header */
.site-header { transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background-color: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }

/* Hero effects */
.hero-image { will-change: transform; }
.hero-text  { text-shadow: 0 2px 24px rgba(6,34,62,0.5); }
.hero-veil  {
  background:
    linear-gradient(95deg, rgba(6,34,62,0.85) 0%, rgba(6,34,62,0.60) 45%, rgba(6,34,62,0.25) 100%),
    linear-gradient(180deg, rgba(6,34,62,0.45) 0%, rgba(6,34,62,0.15) 35%, rgba(6,34,62,0.80) 100%);
}
.hero-grain { background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; }

/* Photo tones */
.tone-marine { filter: saturate(0.7) contrast(1.06) brightness(0.92); }
.tone-soft   { filter: saturate(0.85) contrast(1.02); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-size: 14px; font-weight: 500; letter-spacing: .03em; transition: all .25s ease; cursor: pointer; border: 1px solid transparent; border-radius: 999px; }
.btn-primary { background: var(--sea); color: #fff; }
.btn-primary:hover { background: var(--sea-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-wave   { background: var(--wave); color: #fff; }
.btn-wave:hover   { background: var(--wave-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-d { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-outline-d:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline-l { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline-l:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { color: var(--sea); }

/* Reveal animations */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal-d2 { transition-delay: .12s; }
  .reveal-d3 { transition-delay: .24s; }
  .reveal-d4 { transition-delay: .36s; }
}

/* Card hover */
.svc-card { position: relative; overflow: hidden; background: #fff; transition: transform .5s cubic-bezier(.2,.6,.2,1), box-shadow .5s; }
.svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.svc-card .svc-image { transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.svc-card:hover .svc-image { transform: scale(1.06); }
.svc-card .svc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(11,34,54,0.85) 100%); }

/* Modal */
.modal-backdrop { background: rgba(6,22,40,0.88); opacity: 0; transition: opacity .25s ease; }
.modal-backdrop.is-open { opacity: 1; }
.modal-panel {
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 6px 24px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,0.10);
  transform: translateY(20px) scale(0.985);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.modal-backdrop.is-open .modal-panel { transform: none; opacity: 1; }
body.no-scroll { overflow: hidden; }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 50s linear infinite; }
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Float animation for hero ornament */
@keyframes float { 0%,100%{ transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float-slow { animation: float 7s ease-in-out infinite; }

/* Pulse dot */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,122,77,0.6); } 70% { box-shadow: 0 0 0 12px rgba(31,122,77,0); } 100% { box-shadow: 0 0 0 0 rgba(31,122,77,0); } }
.pulse-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--sea); animation: pulse 2.4s infinite; }

/* Marquee live ticker */
.live-ticker { background: linear-gradient(90deg, var(--sea) 0%, var(--wave) 100%); }

/* Field styles — bordered, sharp */
.field {
  width: 100%;
  background: #fff;
  border: 1.5px solid #D5DDE6;
  padding: 12px 14px;
  margin-top: 6px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  border-radius: 4px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field:hover  { border-color: #B6C2CE; }
.field:focus  { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(21,101,216,0.15); }
.field::placeholder { color: #98A4AE; }
.field-d { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); color: #fff; }
.field-d:hover  { border-color: rgba(255,255,255,0.35); }
.field-d:focus  { border-color: var(--wave); box-shadow: 0 0 0 3px rgba(79,163,224,0.25); background: rgba(255,255,255,0.08); }
.field-d::placeholder { color: rgba(255,255,255,0.45); }
textarea.field { resize: vertical; min-height: 90px; }
select.field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1 L6 6 L11 1' stroke='%235A6B78' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 38px;
}
.field-label { display: block; }
.field-label > span { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }

/* Mobile nav */
.mobile-nav { transform: translateY(-100%); transition: transform .4s cubic-bezier(.4,0,.2,1); }
.mobile-nav.is-open { transform: translateY(0); }

/* Accordion */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .2s ease; }
.faq-item[open] summary .faq-icon { transform: rotate(45deg); }

/* Arrow link */
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.arrow-link svg { transition: transform .25s ease; }
.arrow-link:hover svg { transform: translateX(6px); }

/* Section spacing fallback */
.section { padding-top: clamp(64px, 9vw, 140px); padding-bottom: clamp(64px, 9vw, 140px); }

/* Number animation */
.count-up { font-variant-numeric: tabular-nums lining-nums; }

/* Decorative ship icon */
.ship-mark { color: var(--sea); }

/* ─── Two-step forms ──────────────────────────────────────────────────── */
.form-step[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .form-step-2:not([hidden]) { animation: stepIn .32s cubic-bezier(.2,.7,.2,1); }
  @keyframes stepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Success banners inside forms */
.success-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--sand); color: var(--sea);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  border-left: 3px solid var(--sea);
}
.success-banner-d {
  background: rgba(255,255,255,0.06); color: #fff;
  border-left-color: var(--wave);
}
.success-check {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--sea); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}

/* Alternative CTAs (WhatsApp / phone) next to form */
.form-alt-cta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  flex-wrap: wrap;
}
.form-alt-cta-d { border-top-color: var(--hairline-d); }
.form-alt-cta > span {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); flex-shrink: 0;
}
.form-alt-cta-d > span { color: rgba(255,255,255,0.6); }
.form-alt-cta .btn { padding: 10px 16px; font-size: 13px; }
@media (max-width: 480px) {
  .form-alt-cta { flex-direction: column; align-items: stretch; }
  .form-alt-cta > span { text-align: center; margin-bottom: 4px; }
  .form-alt-cta .btn { justify-content: center; }
}