/* =====================================================================
   styles.css: the ONE stylesheet for every page on dgn-fly.com
   ---------------------------------------------------------------------
   Sections (search for the ==== headings):
     1. Colors and basics          (change brand colors here only)
     2. Shared: header, buttons, footer
     3. Homepage: hero scene, flying dragonflies
     4. Homepage: impact band, key cards, credentials, contact
     5. Inquiry page: forge glow, embers, form dialog
     6. Reduced motion
   ===================================================================== */


/* ==== 1. Colors and basics ========================================== */
:root {
    --ground: #17120c;       /* page background            */
    --surface: #211a11;      /* cards, panels              */
    --line: #3a2e1e;         /* subtle borders             */
    --line-strong: #6b5a3e;  /* stronger borders           */
    --text: #f1e6d2;         /* main text                  */
    --muted: #d6c9b1;        /* paragraph text             */
    --faint: #b9ab92;        /* small labels               */
    --gold: #e2b25a;         /* accent, buttons            */
    --gold-hover: #f3d08e;
    --gold-band: #c8963f;    /* impact band background     */
    --ember: #f08a2c;
    --danger: #ff9c8a;

    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --max: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    background: var(--ground);
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); }
a:hover { color: var(--gold-hover); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { max-width: var(--max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 10;
    padding: 12px 16px;
    background: var(--gold);
    color: var(--ground);
    border-radius: 8px;
}
.skip-link:focus { left: 8px; }


/* ==== 2. Shared: header, buttons, footer ============================ */
.site-header {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    padding-bottom: 24px;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-name { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: 0.5px; }
.brand-tag { font-size: 13px; color: var(--faint); letter-spacing: 2px; text-transform: uppercase; }

.navbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.navbar a {
    padding: 12px 14px;
    font-size: 15px;
    text-decoration: none;
    color: var(--text);
    border-radius: 999px;
}
.navbar a:hover,
.navbar a[aria-current="page"] { color: var(--gold); }
.navbar a.nav-cta { background: var(--gold); color: var(--ground); font-weight: 600; padding: 12px 18px; }
.navbar a.nav-cta:hover { background: var(--gold-hover); color: var(--ground); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    min-height: 48px;
    padding: 14px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold); color: var(--ground); }
.btn-primary:hover { background: var(--gold-hover); color: var(--ground); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--text); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.btn-lg { font-size: 18px; padding: 16px 32px; }

.site-footer { position: relative; z-index: 2; border-top: 1px solid var(--line); }
.site-footer .container {
    padding-top: 28px;
    padding-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-size: 14px;
    color: var(--faint);
}


/* ==== 3. Homepage: hero scene, flying dragonflies =================== */
.hero { position: relative; overflow: hidden; }

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 48px;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 16px;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
}
.hero-copy h1 em { color: var(--gold); }
.hero-copy .lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-emblem { display: flex; justify-content: center; }
.hero-emblem img { width: 100%; max-width: 520px; height: auto; border-radius: 18px; }

.scene {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 300px;
    margin-top: -40px;
}
@media (max-width: 640px) {
    .scene { height: 200px; margin-top: -20px; }   /* phones: keep the sun, water and perched dragonfly in view */
}
.flights {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Flight paths: horizontal (A), diagonal up (B), diagonal down (C) */
.flight { transform-box: view-box; transform-origin: 0 0; }
.fA { animation: flyA 18s linear infinite; }
.fB { animation: flyB 24s linear infinite; animation-delay: -6s; }
.fC { animation: flyC 21s linear infinite; animation-delay: -12s; }
@keyframes flyA {
    0%   { transform: translate(-120px, 640px) rotate(90deg); }
    30%  { transform: translate(420px, 600px) rotate(84deg); }
    38%  { transform: translate(470px, 596px) rotate(90deg); }
    46%  { transform: translate(480px, 602px) rotate(96deg); }
    100% { transform: translate(1560px, 620px) rotate(90deg); }
}
@keyframes flyB {
    0%   { transform: translate(80px, 860px) rotate(45deg); }
    35%  { transform: translate(560px, 470px) rotate(42deg); }
    45%  { transform: translate(590px, 450px) rotate(30deg); }
    55%  { transform: translate(600px, 455px) rotate(50deg); }
    100% { transform: translate(1540px, -60px) rotate(45deg); }
}
@keyframes flyC {
    0%   { transform: translate(1540px, 120px) rotate(-120deg); }
    40%  { transform: translate(900px, 420px) rotate(-115deg); }
    50%  { transform: translate(880px, 430px) rotate(-130deg); }
    100% { transform: translate(-120px, 860px) rotate(-120deg); }
}
.wing { transform-box: fill-box; transform-origin: center; animation: flutter 0.12s ease-in-out infinite alternate; }
@keyframes flutter { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }

.reed  { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
.reed2 { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 6.5s ease-in-out infinite alternate-reverse; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }

.sh1 { animation: shimmer 3.2s ease-in-out infinite alternate; }
.sh2 { animation: shimmer 2.4s ease-in-out infinite alternate-reverse; }
@keyframes shimmer { from { opacity: 0.25; } to { opacity: 0.85; } }


/* ==== 4. Homepage: impact band, key cards, credentials, contact ===== */
.impact { background: var(--gold-band); color: var(--ground); }
.impact .container {
    padding-top: 32px;
    padding-bottom: 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.impact-number { margin: 0; font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1.1; }
.impact-text { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }

.section { padding-top: 96px; padding-bottom: 96px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 40px; }
.section-head h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.1;
}

.key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.key-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;     /* centers the round image */
    text-align: center;      /* centers the label, title and text */
    gap: 14px;
}
.key-card h3 { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 600; }
.key-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.key-label { font-size: 13px !important; color: var(--gold) !important; letter-spacing: 1.5px; }

/* Round close-ups cut from the emblem image (positions match emblem-dark.jpg at 775px wide) */
.emblem-crop {
    position: relative;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
}
.emblem-crop img { position: absolute; width: 775px; max-width: none; }
.crop-owl img     { left: -318px; top: 0; }
.crop-wings img   { left: -30px; top: -80px; }
.crop-key img     { left: -318px; top: -310px; }
.crop-compass img { left: -318px; top: -500px; }

.credentials { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.credentials .container {
    padding-top: 88px;
    padding-bottom: 88px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px;
    align-items: start;
}
.bio { display: flex; flex-direction: column; gap: 20px; }
.bio img { width: 100%; max-width: 360px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; }
.bio h2 { margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 600; }
.bio .role { margin: 4px 0 0; font-size: 15px; color: var(--gold); letter-spacing: 1px; }
.bio p.about { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 460px; }

.badge-list { display: flex; flex-direction: column; gap: 16px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.badge {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px;
    border: 1px solid #4a3c27;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    background: var(--ground);
}
a.badge:hover { border-color: var(--gold); color: var(--text); }
.badge-name { font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--gold); }
.badge-title { font-size: 15px; }
.badge-id { font-size: 13px; color: var(--faint); }
.badge-verify { font-size: 13px; color: var(--gold); margin-top: 6px; }

.contact {
    max-width: 900px;
    margin: 0 auto;
    padding: 112px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.contact svg { width: 72px; height: 48px; }
.contact h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5vw, 60px); line-height: 1.1; }
.contact p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.copy-note { min-height: 24px; margin: 0; font-size: 15px !important; color: var(--gold) !important; }


/* ==== 5. Inquiry page: forge glow, embers, form dialog ============== */
.page-inquiry { min-height: 100vh; display: flex; flex-direction: column; }

.forge {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 160px;
    overflow: hidden;
}
.forge-glow {
    position: absolute;
    left: 50%;
    bottom: -260px;
    width: 1100px;
    height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(240, 138, 44, 0.32), rgba(226, 178, 90, 0.10) 55%, transparent);
    pointer-events: none;
    animation: breathe 6s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: 0.75; } to { opacity: 1; } }

.embers { position: absolute; inset: 0; pointer-events: none; }
.ember {
    position: absolute;
    bottom: -10px;
    width: var(--size, 4px);
    height: var(--size, 4px);
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 6px 1px rgba(240, 138, 44, 0.7);
    opacity: 0;
    animation: rise var(--dur, 9s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.ember.gold { background: var(--gold); box-shadow: 0 0 6px 1px rgba(226, 178, 90, 0.7); }
@keyframes rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 0.95; }
    60%  { opacity: 0.6; }
    100% { transform: translate(var(--drift, 30px), -70vh); opacity: 0; }
}

.forge-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.forge-content h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 6vw, 72px); line-height: 1.04; }
.forge-content h1 em { color: var(--gold); }
.forge-content .lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 560px; }
.steps-preview {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 24px;
    font-size: 15px;
    color: var(--faint);
}
.steps-preview b { color: var(--gold); font-weight: 600; margin-right: 6px; }

dialog.inquiry {
    width: min(640px, 92vw);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 0 40px rgba(240, 138, 44, 0.25);
}
dialog.inquiry::backdrop { background: rgba(10, 7, 4, 0.78); }
dialog.inquiry[open] { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

.dialog-inner { padding: 32px; overflow-y: auto; max-height: 90vh; }
.dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.step-label { margin: 0 0 6px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
dialog h2 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.1; }
.dialog-intro { margin: 10px 0 22px; color: var(--muted); line-height: 1.6; }

.close-button {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.close-button:hover { border-color: var(--gold); color: var(--gold); }

.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.hint { font-size: 13px; color: var(--faint); font-weight: 400; }
.req { color: var(--gold); }
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--ground);
    color: var(--text);
    font: inherit;
    font-size: 16px;        /* 16px stops iPhones zooming in on focus */
}
.form-group textarea { resize: vertical; min-height: 84px; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 178, 90, 0.3); }
.form-group [aria-invalid="true"] { border-color: var(--danger); }

.moscow-key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.moscow-key li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--faint); }
.moscow-key b { display: block; color: var(--gold); font-size: 15px; }

/* Spam trap: hidden from people, filled in only by bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.form-status { min-height: 22px; margin: 4px 0 0; font-size: 15px; color: var(--danger); }
.test-banner { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--gold); color: var(--gold); font-size: 14px; }
.done { text-align: center; padding: 12px 0 4px; }
.test-preview { margin: 0 0 20px; text-align: left; border: 1px dashed var(--gold); border-radius: 10px; padding: 10px 14px; }
.test-preview summary { cursor: pointer; color: var(--gold); font-size: 14px; min-height: 28px; }
.test-preview pre { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; color: var(--muted); max-height: 260px; overflow-y: auto; }
.done svg { width: 72px; height: 48px; margin: 0 auto; }


/* ==== 6. Reduced motion ============================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fA, .fB, .fC, .wing, .reed, .reed2, .sh1, .sh2,
    .ember, .forge-glow, dialog.inquiry[open] { animation: none; }
    .flight, .ember { display: none; }
    .btn:hover { transform: none; }
}