/* inteligencija.hr · Kontakt
   Page styles on top of styles.css (tokens, buttons, header, footer, chat, cookie notice).
   Layout: left column = headline + form card, right column = sticky aside with Albert's box
   (3D Albert in albert3d.js "tour" mode inside a contained stage) and the contact facts. */

:root { --alert-ink: #c62f2f; } /* shade of --alert for error text (AA on white) */

/* ---------------- Page frame ---------------- */
.k-main { position: relative; padding: calc(var(--header-h) + clamp(56px, 9vh, 104px)) 0 clamp(72px, 12vh, 140px); overflow: clip; }
.k-glow {
  position: absolute; inset: 0 0 auto 0; height: min(1100px, 130vh); pointer-events: none;
  background:
    radial-gradient(42% 46% at 84% 30%, rgba(168, 200, 232, .5), transparent 70%),
    radial-gradient(40% 38% at 6% 4%, rgba(216, 231, 246, .95), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(234, 242, 251, .9), transparent 70%);
}
.k-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "hero side" "form side";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: clamp(32px, 5vh, 52px);
  align-items: start;
}

/* ---------------- Hero ---------------- */
.k-hero { grid-area: hero; }
.k-title {
  font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .98; letter-spacing: -0.02em; font-weight: 600;
  padding-bottom: .04em;
}
.k-lead { margin-top: clamp(18px, 2.6vh, 26px); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 46ch; }

/* ---------------- Cards ---------------- */
.k-card {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

/* ---------------- Form ---------------- */
.k-formwrap { grid-area: form; min-width: 0; }
.contact-form { padding: clamp(24px, 3.4vw, 48px); display: grid; gap: 22px; }
.contact-form[hidden] { display: none; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .field-set > legend {
  font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--navy); letter-spacing: -0.005em;
}
.req { color: var(--blue-dk); margin-left: 1px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-width: 0;
  font: inherit; font-size: 16px; color: var(--navy);
  background: var(--frost);
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 14px 18px; min-height: 54px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .3s var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; border-radius: 20px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .85; }
.field input:hover, .field textarea:hover { border-color: var(--sky); }
.field input:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58, 126, 200, .16); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--alert); background: var(--white); }
.field.is-invalid input:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 4px rgba(232, 69, 69, .14); }
.field.is-invalid > label { color: var(--alert-ink); }

/* service chips (native checkboxes, restyled) */
.field-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.field-set > legend { padding: 0; margin-bottom: 10px; }
.field-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  font-weight: 600; font-size: 15px; color: var(--navy); cursor: pointer; user-select: none;
  transition: border-color .2s ease, background-color .25s ease, color .2s ease, transform .35s var(--ease-out);
}
.check i { font-size: 19px; color: var(--blue-dk); transition: color .2s ease; }
.check input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--sky); background: var(--white);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.check input::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease-out);
}
.check:hover { border-color: var(--sky); transform: translateY(-1px); }
.check:has(input:checked) { background: var(--tint); border-color: var(--blue); color: var(--steel); }
.check input:checked { background: var(--blue-dk); border-color: var(--blue-dk); }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* submit row */
.form-foot { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 4px; }
.form-foot .btn { flex: none; }
.form-foot .btn[disabled] { opacity: .75; cursor: progress; transform: none; }
.form-notes { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.form-note { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.form-note strong { color: var(--navy); font-weight: 600; }
.form-note a { color: var(--blue-dk); text-underline-offset: 3px; }
.form-note.is-error { font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.form-note.is-error::before { content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--alert); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.contact-form.is-sending { pointer-events: none; }
.contact-form.is-sending .field { opacity: .7; transition: opacity .3s ease; }

/* success */
.form-success {
  padding: clamp(32px, 4vw, 56px); text-align: left;
  display: grid; justify-items: start; gap: 14px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(168, 200, 232, .55), transparent 70%),
    linear-gradient(150deg, var(--tint), var(--white) 70%);
}
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.form-success svg { width: 92px; height: 110px; margin-bottom: 4px; }
.form-success h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em; }
.form-success p { color: var(--muted); font-size: 17px; max-width: 44ch; }
.form-success .btn { margin-top: 10px; }
.form-success.in { animation: k-pop .7s var(--ease-out) both; }
@keyframes k-pop { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------- Aside: Albert + facts ---------------- */
.k-side { grid-area: side; display: grid; gap: 16px; align-self: start; }
@media (min-width: 900px) and (min-height: 860px) {
  .k-side { position: sticky; top: calc(var(--header-h) + 28px); }
}

.k-albert {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--white);
  background:
    radial-gradient(70% 70% at 60% 100%, rgba(168, 200, 232, .75), transparent 72%),
    linear-gradient(160deg, var(--tint), var(--tint-2));
  box-shadow: var(--shadow-soft);
}
.k-speech { top: 22px; left: 22px; max-width: calc(100% - 44px); white-space: nowrap; }
.k-speech:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 22px 22px 22px 6px; }
.k-stage { position: relative; height: clamp(340px, 44vh, 410px); }
.k-stage .stage-disc { width: 120%; bottom: 0; left: 56%; transform: translate(-50%, 52%); }
.k-stage > .k-albert3d { position: absolute; inset: 0; }
.k-albert2d { position: absolute; right: 18%; bottom: 4%; height: 72%; width: auto; margin: 0; }

.k-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.info-box {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px 16px 16px;
  border-radius: 22px; border: 1px solid var(--line); background: var(--white);
  transition: border-color .3s ease, box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.info-box:hover { border-color: var(--sky); box-shadow: var(--shadow-soft); }
.info-icon {
  flex: none; width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--tint); color: var(--blue-dk); font-size: 23px;
  transition: background-color .3s ease, color .3s ease, transform .5s var(--ease-out);
}
.info-box:hover .info-icon { background: var(--blue-dk); color: #fff; transform: rotate(-6deg); }
.info-label { font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.info-value { display: inline-block; margin-top: 1px; font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
a.info-value { background: linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 1px; transition: background-size .3s var(--ease-out), color .2s; }
a.info-value:hover { color: var(--blue-dk); background-image: linear-gradient(var(--blue), var(--blue)); }

/* 2D fallback keeps its original idle animation when there is no WebGL */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sparkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* header CTA icon spacing */
.nav-cta i, .mobile-menu .btn i { font-size: 17px; }
.footer-nav a[aria-current="page"] { color: var(--blue-dk); }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) and (min-width: 900px) {
  .k-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .k-speech { font-size: 15px; padding: 12px 16px; }
}

@media (max-width: 899.98px) {
  .k-main { padding-top: calc(58px + 40px); }
  .k-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "albert" "form" "info"; grid-template-rows: none; row-gap: 22px; }
  .k-side { display: contents; }
  .k-albert { grid-area: albert; }
  .k-info { grid-area: info; margin-top: 8px; }
  .k-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .k-stage { height: clamp(280px, 80vw, 340px); }
  .k-speech { top: 16px; left: 16px; }
}

@media (max-width: 600px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-form { padding: 22px 18px; gap: 20px; }
  .k-card { border-radius: 24px; }
  .check { flex: 1 1 calc(50% - 5px); padding: 0 12px; min-height: 48px; gap: 8px; font-size: 14.5px; }
  .form-foot .btn { width: 100%; }
  .info-value { font-size: 18px; }
}