:root {
  --gold: #B99A72;
  --gold-light: #D4BC9E;
  --gold-dim: rgba(185,154,114,0.35);
  --bg-overlay: rgba(7,10,15,0.45);
  --text: #ffffff;
  --gold-text: #B99A72;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hand: 'Caveat', cursive;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: var(--font);
  background: #070a0f;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  cursor:default;
}

#hero { position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }

/* ── Background video ── */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video-fallback { display:none; position:absolute; inset:0; background:#070a0f; align-items:center; justify-content:center; color:rgba(255,255,255,0.3); font-size:14px; z-index:0; }
.hero-overlay { position:absolute; inset:0; background:var(--bg-overlay); }

/* ── Top bar ── */
.hero-top { position:absolute; top:0; right:0; z-index:10; padding:40px 40px 0; pointer-events:none; }
.hero-top > * { pointer-events:auto; }
.btn-bo { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.65); padding:6px 16px; border-radius:20px; font-size:11px; font-weight:500; font-family:var(--font); cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:all 0.3s ease; }
.btn-bo:hover { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.95); border-color:var(--gold-text); }
.btn-bo svg { width:14px; height:14px; }

/* ── Body layout ── */
.hero-body { position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center; padding:0 60px; }
.zone-center { display:flex; align-items:center; justify-content:center; position:relative; }

/* ── Center: main block (title + subtitle + CTA) ── */
.hero-main-block { display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:-30px; }
.hero-title {
  position:relative; display:inline-block;
  font-size:97px; font-weight:800; line-height:0.9; letter-spacing:0.06em; margin-bottom:16px;
}
.hero-title-text {
  display:block; color:#fff;
}
/* Second video layer, full-bleed like the main background video so the footage
   lines up frame-for-frame. It is clipped to the exact on-screen shape of the
   "INKEY" headline via a canvas-based mask (see script.js) whose text position/
   size is recalculated from the headline's real bounding box, so the cut-out
   always tracks the title through every breakpoint and resize instead of using
   fixed coordinates. */
.hero-title-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.4s ease;
}
.hero-title-video.is-ready { opacity:1; }
/* ── CTA block ── */
.cta-block { position:relative; display:flex; flex-direction:column; align-items:center; margin-top:8px; }

.cta-btn {
  position:relative; width:289px; height:77px; border:none; border-radius:20px;
  background:linear-gradient(135deg, #C9A87C, #DFC29E);
  box-shadow:0 0 60px rgba(185,154,114,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  cursor:pointer; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font); font-size:22px; font-weight:800; color:#111111;
  letter-spacing:0.02em;
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.6s ease;
  transform:scale(1);
  z-index:2;
}
.cta-btn .cta-shine {
  position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);
  pointer-events:none; opacity:0;
}

.cta-btn:hover {
  box-shadow:0 0 40px rgba(201,168,124,0.4), 0 0 80px rgba(201,168,124,0.15);
}
.cta-btn.active {
  transform:scale(1.04);
  box-shadow:0 0 80px rgba(201,168,124,0.4), 0 0 120px rgba(201,168,124,0.2);
}
.cta-btn.active .cta-shine {
  opacity:1;
  animation:ctaShine 0.8s ease forwards;
}
@keyframes ctaShine {
  0% { left:-100%; opacity:0; }
  20% { opacity:1; }
  100% { left:150%; opacity:0; }
}

/* ── CTA rings ── */
.cta-rings { position:absolute; top:50%; left:50%; transform:translate(-50%,calc(-50% - 0.8cm)); z-index:1; pointer-events:none; }
.cta-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid var(--gold);
  opacity:0; transform:translate(-50%,-50%) scale(0.8);
}
.cta-ring-1 { width:300px; height:300px; }
.cta-ring-2 { width:420px; height:420px; }
.cta-ring.active {
  opacity:0.25;
  animation:ctaRingExpand 2s ease-out forwards;
}
@keyframes ctaRingExpand {
  0% { transform:translate(-50%,-50%) scale(0.8); opacity:0.25; }
  100% { transform:translate(-50%,-50%) scale(1.15); opacity:0; }
}

/* ── CTA handwrite ── */
.cta-arrow { opacity:0.6; margin-top:28px; }
.cta-arrow svg { width:24px; height:24px; color:var(--gold); display:block; }
.cta-handwrite { font-family:var(--font-hand); font-size:26px; color:var(--gold-text); margin-top:8px; text-align:center; }

/* ── Footer ── */
.hero-footer {
  position:relative; z-index:10; height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px;
  background:rgba(0,0,0,0.15);
  border-top:1px solid rgba(255,255,255,0.05);
}
.hf-left { font-size:12px; font-weight:500; letter-spacing:0.08em; color:rgba(255,255,255,0.5); white-space:nowrap; }
.hf-center { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:500; letter-spacing:0.08em; }
.hf-center a { position:relative; color:rgba(255,255,255,0.5); text-decoration:none; cursor:pointer; transition:color 0.3s ease; }
.hf-center a::after { content:''; position:absolute; left:50%; bottom:-2px; width:0; height:1px; background:var(--gold-text); transition:width 0.3s ease, left 0.3s ease; }
.hf-center a:hover { color:rgba(255,255,255,0.9); }
.hf-center a:hover::after { width:100%; left:0; }
.hf-sep { color:rgba(255,255,255,0.15); font-size:10px; }
.hf-right { display:flex; align-items:center; gap:18px; }
.hf-audio { display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:rgba(255,255,255,0.45); font-size:12px; font-weight:500; letter-spacing:0.08em; white-space:nowrap; transition:color 0.3s ease; }
.hf-audio:hover { color:rgba(255,255,255,0.9); }
.hf-audio.sb-audio-on { color:var(--gold-text); }
.hf-audio svg { width:14px; height:14px; flex-shrink:0; display:block; }

/* ── Modal system ── */
.modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.12); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.45s ease; }
.modal-overlay--open { opacity:1; pointer-events:auto; }
.modal-overlay--open .modal { opacity:1; transform:translateY(0) scale(1); }
.modal {
  position:relative; width:90%; max-width:520px; max-height:80vh; overflow-y:auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,245,239,0.95) 100%);
  backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(185,154,114,0.35);
  border-radius:20px; padding:44px 40px;
  color:#4b4b4b;
  box-shadow:0 30px 80px rgba(0,0,0,0.15), 0 5px 20px rgba(185,154,114,0.08);
  opacity:0; transform:translateY(30px) scale(0.94);
  transition:opacity 0.45s cubic-bezier(0.23,1,0.32,1), transform 0.45s cubic-bezier(0.23,1,0.32,1);
}
.modal::before {
  content:''; position:absolute; top:0; left:10%; width:80%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,154,114,0.5), rgba(185,154,114,0.8), rgba(185,154,114,0.5), transparent);
  box-shadow:0 0 10px rgba(185,154,114,0.15);
}
.modal::-webkit-scrollbar { display:none; }
.modal { scrollbar-width:none; }
.modal-close { position:absolute; top:14px; right:18px; background:none; border:none; color:rgba(75,75,75,0.25); font-size:30px; cursor:pointer; transition:color 0.3s; font-family:var(--font); line-height:1; padding:4px; }
.modal-close:hover { color:var(--gold-text); }
.modal h2 { font-size:28px; font-weight:700; margin-bottom:20px; letter-spacing:-0.01em; color:var(--gold-text); }
.modal p { font-size:15px; line-height:1.8; margin-bottom:12px; color:#4b4b4b; font-weight:400; }
.modal p strong { font-weight:600; color:#6A5D4A; display:block; margin-bottom:2px; }
.modal-ul { list-style:none; padding:0; margin:0 0 12px 0; }
.modal-ul li { position:relative; padding-left:16px; font-size:14px; line-height:1.7; color:#4b4b4b; margin-bottom:4px; }
.modal-ul li::before { content:'—'; position:absolute; left:0; color:var(--gold-text); }
.modal--legal h2 { color:var(--gold-text); }
.legal-contact { display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.legal-contact-item { display:flex; align-items:center; gap:10px; font-size:14px; }
.legal-contact-item svg { width:18px; height:18px; color:var(--gold); flex-shrink:0; }
.legal-contact-item a { color:rgba(75,75,75,0.7); text-decoration:none; transition:color 0.3s; }
.legal-contact-item a:hover { color:var(--gold-text); }
.legal-response { font-size:13px; color:rgba(75,75,75,0.5); margin-top:12px; padding-top:12px; border-top:1px solid rgba(75,75,75,0.06); line-height:1.5; }
/* ── Markers ── */
.markers { position:absolute; inset:0; z-index:5; pointer-events:none; }
.marker { position:absolute; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-light)); cursor:pointer; pointer-events:auto; transition:transform 0.3s ease, box-shadow 0.3s ease; box-shadow:0 0 10px var(--gold-dim); min-width:44px; min-height:44px; margin:-6px; }
.marker:hover { transform:scale(1.15); box-shadow:0 0 20px rgba(255,255,255,0.3); }
.marker::before { content:attr(data-label); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); font-size:10px; font-weight:600; color:#fff; letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.3); pointer-events:none; opacity:0.85; }
.marker[data-side="left"]::before { left:auto; right:calc(100% + 12px); }
.marker::after { content:''; position:absolute; top:50%; left:50%; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(255,255,255,0.25); animation:markerPulse 3s ease-in-out infinite; transition:transform 0.3s ease; }
@keyframes markerPulse { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.5; } 50% { transform:translate(-50%,-50%) scale(1.4); opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .marker::after, .cta-shine, .cta-ring, .founder-titr { animation:none !important; }
  .modal, .modal-overlay { transition:opacity 0.2s ease; }
}

.modal--marker { border-left:3px solid var(--gold); }

/* ── New Agent Access Modal (live HTML) ── */
.modal--agent-new {
  padding:0; background:#F7F4EF; border:none; border-radius:28px;
  max-width:1320px; width:96%; height:760px; max-height:90vh;
  overflow:hidden; box-shadow:0 32px 120px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.06);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
.modal--agent-new::before { display:none; }
.modal-close--agent {
  position:absolute; top:20px; right:24px;
  background:none; border:none; color:#B8B8B8; font-size:32px;
  cursor:pointer; font-family:'Inter',sans-serif; line-height:1; padding:4px; z-index:10;
  transition:color 0.2s ease;
}
.modal-close--agent:hover { color:#1F1F1F; }
.agent-new-inner { display:flex; height:100%; }
.agent-new-left {
  width:42%; padding:44px 0 44px 56px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  justify-content:center;
}

/* Brand block: mark + wordmark, top of the left column */
.agent-new-brand { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; }
.agent-new-brand-mark { flex-shrink:0; width:40px; height:72px; object-fit:contain; }
.agent-new-brand-word {
  font-size:15px; font-weight:700; letter-spacing:0.28em; color:#1F1F1F;
  font-family:'Inter',sans-serif;
}
.agent-new-restricted {
  font-size:13px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:#B99A72; line-height:1.6; margin:0 0 32px;
}

.agent-new-qr-wrap { display:flex; flex-direction:column; align-items:center; padding-bottom:8px; width:100%; }
.agent-new-qr {
  width:210px; height:210px; margin-bottom:20px; flex-shrink:0;
  border-radius:16px; overflow:hidden; padding:14px; background:#F7F4EF;
  border:1px solid rgba(185,154,114,0.35); box-shadow:0 12px 32px rgba(0,0,0,0.06);
  box-sizing:border-box;
}
.agent-new-qr svg { display:block; width:100%; height:100%; }
.agent-new-qr-caption {
  font-size:13.5px; line-height:1.7; color:#666666; font-weight:400;
  margin:0 0 24px; max-width:260px;
}
.agent-new-qr-options {
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.agent-new-qr-option {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:0.08em; color:#1F1F1F;
}
.agent-new-qr-or {
  font-size:12px; color:#B0B0B0; font-weight:500; font-style:italic; padding-top:2px;
}

/* Right column */
.agent-new-right {
  width:58%; padding:44px 56px 44px 48px;
  display:flex; flex-direction:column;
}
.agent-new-heading {
  font-size:36px; font-weight:700; color:#B99A72;
  letter-spacing:-0.02em; text-transform:none; line-height:1.1; margin:58px 0 16px; font-family:'Inter',sans-serif;
}
.agent-new-list { list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:0; }
.agent-new-list li {
  display:flex; align-items:flex-start; gap:14px;
  font-size:16px; font-weight:500; color:#1F1F1F; line-height:1.4;
  padding:14px 0; border-bottom:1px solid rgba(185,154,114,0.22);
}
.agent-new-list li:first-child { padding-top:0; }
.agent-new-check { flex-shrink:0; margin-top:1px; display:flex; }
.agent-new-status { margin-top:12px; margin-bottom:24px; }
.agent-new-status h4 {
  font-size:13px; font-weight:700; color:#9B9B9B;
  letter-spacing:0.14em; text-transform:uppercase; margin:0 0 14px; font-family:'Inter',sans-serif;
}
.agent-new-status p {
  font-size:14.5px; line-height:1.6; color:#4A4A4A; margin:0; max-width:400px;
}
.agent-new-footer {
  display:flex; align-items:flex-start; gap:14px;
  background:#EFE6D8; border-radius:14px; padding:18px 20px; margin-top:auto;
}
.agent-new-footer-icon {
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(185,154,114,0.16);
}
.agent-new-footer-main {
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:#B99A72; margin:0 0 4px; line-height:1.4;
}
.agent-new-footer-sub {
  font-size:14px; color:#4A4A4A; margin:0; font-weight:500; line-height:1.4;
}

/* ── Meeting modal ── */

.modal--meeting {
  max-width:1380px;
  width:96%;
  height:800px;
  max-height:90vh;
  padding:0;
  overflow:hidden;
  background:#FFFFFF;
  border-radius:24px;
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 48px 120px rgba(0,0,0,0.22), 0 8px 32px rgba(0,0,0,0.08);
  color:#555555;
  opacity:0;
  transform:translateY(30px) scale(0.98);
  transition:opacity 0.45s cubic-bezier(0.23,1,0.32,1), transform 0.45s cubic-bezier(0.23,1,0.32,1);
}
.modal-overlay--open .modal--meeting {
  opacity:1;
  transform:translateY(0) scale(1);
}
.modal--meeting::before { display:none; }
.modal--meeting .modal-close {
  position:absolute;
  top:20px;
  right:24px;
  z-index:10;
  background:none;
  border:none;
  color:rgba(30,30,30,0.22);
  font-size:28px;
  cursor:pointer;
  transition:color 0.25s;
  font-family:var(--font);
  line-height:1;
  padding:6px;
}
.modal--meeting .modal-close:hover { color:var(--gold-text); }

.meeting-inner {
  display:flex;
  height:100%;
}

/* ── Photo column (40%) ── */
.meeting-photo-col {
  flex:0 0 40%;
  position:relative;
  overflow:hidden;
}
.meeting-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  display:block;
  filter:brightness(0.88);
}

/* ── Content column (60%) ── */
.meeting-content-col {
  flex:0 0 60%;
  display:flex;
  background:linear-gradient(180deg, #FFFFFF 0%, #F7F4EE 100%);
  position:relative;
  overflow-y:auto;
}

/* Appointment label top-right */
.meeting-appointment {
  position:absolute;
  top:35px;
  right:80px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  color:#6A6A6A;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Left info panel */
.meeting-info {
  flex:0 0 48%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 48px 72px 64px;
}

.meeting-label {
  font-size:12px;
  font-weight:600;
  color:var(--gold-text);
  letter-spacing:0.28em;
  text-transform:uppercase;
  margin-bottom:20px;
}

.modal--meeting .meeting-name {
  font-family:'Cormorant Garamond', 'Georgia', serif;
  font-size:64px;
  font-weight:500;
  color:#000000;
  line-height:1.0;
  margin:0 0 20px;
  letter-spacing:-0.01em;
}

.meeting-founder-row {
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:20px;
}
.meeting-founder-title {
  font-size:16px;
  font-weight:500;
  color:var(--gold-text);
  letter-spacing:0.22em;
  text-transform:uppercase;
}
.meeting-founder-sub {
  font-size:16px;
  font-weight:500;
  color:var(--gold-text);
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.meeting-divider {
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(185,154,114,0.6) 0%, rgba(185,154,114,0.15) 100%);
  margin-bottom:28px;
}

.meeting-desc {
  font-size:15px;
  line-height:1.75;
  color:#5A5A5A;
  font-weight:400;
  margin:0;
  max-width:320px;
}

/* Right form panel */
.meeting-form-col {
  flex:0 0 52%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 64px 72px 48px;
}

.meeting-form-title {
  font-family:'Cormorant Garamond', 'Georgia', serif;
  font-size:32px;
  font-weight:500;
  color:#1A1A1A;
  margin:0 0 36px;
  letter-spacing:-0.01em;
  line-height:1.2;
}

.meeting-form {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.meeting-field {
  position:relative;
  display:flex;
  align-items:center;
}

.meeting-field input {
  width:100%;
  height:64px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.08);
  background:#FFFFFF;
  padding:0 52px 0 22px;
  font-size:15px;
  font-family:var(--font);
  color:#1A1A1A;
  outline:none;
  transition:border-color 0.2s;
  box-shadow:none;
  -webkit-appearance:none;
}
.meeting-field input:focus {
  border-color:rgba(185,154,114,0.4);
}
.meeting-field input::placeholder {
  color:#B8B8B8;
}

.meeting-field-icon {
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
}
.meeting-field-icon svg {
  width:18px;
  height:18px;
  stroke-width:1.5;
}

.meeting-submit {
  width:100%;
  height:64px;
  border-radius:16px;
  border:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  color:#1A1A1A;
  font-size:14px;
  font-weight:700;
  font-family:var(--font);
  cursor:pointer;
  margin-top:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  transition:filter 0.2s;
}
.meeting-submit:hover {
  filter:brightness(1.06);
}
.meeting-submit-arrow {
  font-size:18px;
  font-weight:300;
  letter-spacing:0;
  opacity:0.75;
}

.meeting-privacy {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.meeting-privacy svg {
  width:14px;
  height:14px;
  color:#9A9A9A;
  flex-shrink:0;
  stroke-width:1.5;
}
.meeting-privacy span {
  font-size:10px;
  color:#9A9A9A;
  line-height:1.5;
}

/* ── Responsive breakpoints ── */
@media (max-width:1280px) {
  .hero-body { padding:0 40px; }
  .hero-title { font-size:90px; letter-spacing:0.06em; }
  .cta-btn { width:226px; height:80px; font-size:22px; }
  .modal--meeting { max-width:1100px; max-height:85vh; height:auto; min-height:600px; }
  .modal--agent-new { height:auto; max-height:88vh; }
  .agent-new-left { padding:40px 0 40px 40px; }
  .agent-new-right { padding:40px 40px 40px 32px; }
  .agent-new-heading { font-size:32px; }
  .agent-new-list li { font-size:15px; gap:12px; }
  .modal--meeting .meeting-name { font-size:52px; }
  .meeting-info { padding:56px 36px 56px 48px; }
  .meeting-form-col { padding:56px 48px 56px 36px; }
}

@media (max-width:1024px) {
  .hero-body { padding:0 30px; }
  .hero-title { font-size:72px; letter-spacing:0.06em; }
  .cta-btn { width:186px; height:72px; font-size:20px; }
  .modal--meeting { max-width:900px; min-height:auto; height:auto; }
  .modal--meeting .meeting-name { font-size:44px; }
  .meeting-info { padding:48px 28px 48px 40px; }
  .meeting-form-col { padding:48px 40px 48px 28px; }
  .modal--agent-new { height:auto; max-height:90vh; overflow-y:auto; }
  .agent-new-inner { flex-direction:column; overflow-y:auto; }
  .agent-new-left { width:100%; padding:40px 40px 24px; align-items:center; text-align:center; justify-content:flex-start; }
  .agent-new-right { width:100%; padding:0 40px 40px; }
  .agent-new-heading { margin-top:0; font-size:28px; }
  .agent-new-list li { font-size:15px; }
  .agent-new-status { margin-bottom:20px; }
}

@media (max-width:900px) {
  .hero-title { font-size:64px; letter-spacing:0.06em; }
  .modal--meeting { max-width:680px; height:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .meeting-inner { flex-direction:column; }
  .meeting-photo-col { flex:none; height:280px; }
  .meeting-content-col { flex-direction:column; }
  .meeting-info { flex:none; padding:40px 32px 28px; }
  .meeting-form-col { flex:none; padding:0 32px 40px; }
  .meeting-desc { max-width:100%; }
  .meeting-appointment { top:14px; right:3px; font-size:10px; }
  .modal--meeting .meeting-name { font-size:40px; }
}

@media (max-width:768px) {
  .hero-body { padding:0 24px; }
  .modal { padding:36px 28px; }
  .modal--meeting { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .hero-main-block { align-items:center; }
  .hero-title { font-size:60px; letter-spacing:0.06em; }
  .cta-block { transform:none; margin-top:0; }
  .cta-btn { width:210px; height:64px; font-size:16px; }
  .hero-footer { padding:0 16px; min-height:48px; height:auto; flex-wrap:wrap; gap:6px; }
  .hf-center { gap:6px; font-size:10px; flex-wrap:wrap; justify-content:center; }
  .hf-left, .hf-right { font-size:10px; }
  .hero-top { padding:20px 20px 0; }
  .cta-handwrite { font-size:22px; }
  .modal--meeting { width:98%; border-radius:18px; }
  .meeting-info { padding:32px 24px 20px; }
  .meeting-form-col { padding:0 24px 32px; }
  .meeting-form-title { font-size:26px; margin-bottom:24px; }
  .meeting-field input, .meeting-submit { height:56px; }
  .modal--agent-new { height:auto; max-height:90vh; border-radius:20px; }
  .agent-new-left { padding:32px 28px 20px; }
  .agent-new-right { padding:0 28px 32px; }
  .agent-new-heading { font-size:24px; margin-bottom:18px; }
  .agent-new-list li { font-size:14px; padding:12px 0; }
  .agent-new-qr { width:160px; height:160px; }
  .agent-new-status h4 { font-size:14px; }
  .agent-new-status p { font-size:13px; }
}

@media (max-width:480px) {
  .hero-title { font-size:42px; letter-spacing:0.06em; }
  .modal { padding:28px 20px; }
  .modal--meeting { overflow-y:auto; }
  .hero-body { padding:0 16px; }
  .cta-btn { width:190px; height:58px; font-size:14px; }
  .cta-handwrite { font-size:20px; }
  .btn-bo { font-size:10px; padding:4px 12px; }
  .marker { min-width:40px; min-height:40px; margin:-4px; }
  .modal--meeting { border-radius:14px; }
  .meeting-photo-col { height:200px; }
  .modal--meeting .meeting-name { font-size:32px; }
  .meeting-info { padding:24px 20px 16px; }
  .meeting-form-col { padding:0 20px 24px; }
  .meeting-form-title { font-size:22px; margin-bottom:20px; }
  .meeting-field input, .meeting-submit { height:50px; }
  .meeting-appointment { top:10px; right:2px; font-size:9px; }
  .modal--agent-new { border-radius:16px; }
  .agent-new-left { padding:24px 20px 16px; }
  .agent-new-right { padding:0 20px 28px; }
  .agent-new-heading { font-size:21px; margin-bottom:16px; }
  .agent-new-list li { font-size:13px; gap:10px; padding:10px 0; }
  .agent-new-qr { width:140px; height:140px; }
  .agent-new-qr-caption { font-size:12px; }
  .agent-new-qr-option { font-size:10px; }
  .agent-new-status h4 { font-size:13px; }
  .agent-new-status p { font-size:12px; }
}

@media (max-width:359px) {
  .modal { padding:24px 16px; }
  .hero-title { font-size:36px; letter-spacing:0.06em; }
  .cta-btn { width:160px; height:52px; font-size:12px; }
  .cta-arrow { margin-top:16px; }
  .cta-handwrite { font-size:18px; }
  .meeting-form-title { font-size:20px; }
  .modal--agent-new { border-radius:12px; }
  .agent-new-left { padding:20px 16px 12px; }
  .agent-new-right { padding:0 16px 24px; }
  .agent-new-heading { font-size:19px; }
  .agent-new-list li { font-size:12px; }
  .agent-new-qr { width:120px; height:120px; }
}