/* Black Diamond Claims Solutions — application portal.
   A committed dark scheme on the brand palette (Emerald, Mint Leaf, Dusk Blue,
   Space Indigo, Midnight Violet), shared with the Keep app so every BDCS
   property reads as one family. The signature is the cut-gem motif: the
   faceted diamond in the hero, echoed as a clipped facet on every app tile.
   Elegant serif for the human voice, technical mono for machine labels. */

:root {
    --ground:   #1b0a1b;   /* page — Midnight Violet, deepened */
    --panel:    #251f47;   /* Space Indigo — cards */
    --panel-2:  #2c2554;   /* lifted panel (hover / inner) */
    --well:     #1e1840;
    --line:     rgba(184, 216, 194, 0.14);
    --line-2:   rgba(184, 216, 194, 0.22);
    --lip:      rgba(255, 255, 255, 0.05);
    --ink:      #edf4ef;
    --ink-2:    #a6c3b2;   /* Mint, lifted for legibility */
    --ink-3:    #7f95ab;   /* cool muted (footers, hosts) */

    --emerald:  #86cb92;
    --mint:     #71b48d;
    --dusk:     #6d80bd;   /* Dusk Blue, lifted so it reads on dark */
    --dusk-deep:#404e7c;
    --on-accent:#15231a;

    --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Georgia", serif;
    --mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
    --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --r: 4px;
    --ease: cubic-bezier(0.2, 0.85, 0.2, 1);
    --chamfer: 16px;   /* the facet cut on tiles */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ambient glow behind the hero gem */
.aura {
    position: fixed;
    top: -12%;
    left: 50%;
    width: min(760px, 90vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(closest-side, rgba(134, 203, 146, 0.16), transparent 70%),
        radial-gradient(closest-side, rgba(64, 78, 124, 0.22), transparent 72%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
}

/* ---------- header ---------- */

.top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px clamp(20px, 5vw, 56px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--emerald);
}

.brand-mark { width: 30px; height: 30px; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
}
.brand-sub {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11.5px;
}
.top-contact {
    color: var(--ink-2);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s var(--ease);
}
.top-contact:hover { color: var(--ink); }

.top-terms {
    appearance: none;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.top-terms:hover { border-color: var(--emerald); color: var(--emerald); }

/* ---------- layout ---------- */

.wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(36px, 8vh, 88px) clamp(20px, 5vw, 40px) 64px;
}

/* ---------- hero ---------- */

.hero { text-align: center; margin-bottom: clamp(40px, 7vh, 72px); }

.gem {
    width: clamp(96px, 16vw, 132px);
    height: auto;
    display: block;
    margin: 0 auto 26px;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.45));
    animation: rise 1s var(--ease) both;
}

.hero-logo {
    width: clamp(230px, 44vw, 384px);
    height: auto;
    display: block;
    /* +60px of air between the logo and the title below it */
    margin: 0 auto 88px;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
    animation: rise 1s var(--ease) both;
}

.eyebrow {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--emerald);
}

.headline {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 7vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.lede {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--ink-2);
    font-size: clamp(14px, 2.2vw, 16px);
}

/* ---------- app grid ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 224px));
    justify-content: center;
    gap: 18px;
}

/* Each tile is a cut gem: one corner is chamfered to echo the diamond. The
   border is drawn by a stacked clip so it follows the facet cleanly. */
.tile {
    --accent: var(--emerald);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 30px 20px 26px;
    min-height: 224px;
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--r);
    clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
    box-shadow: inset 0 1px 0 var(--lip);
    isolation: isolate;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}
/* hairline border via a stacked, identically-clipped underlay */
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--r);
    clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
    background: var(--line);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

a.tile:hover { background: var(--panel-2); transform: translateY(-2px); }
a.tile:hover::after { background: var(--accent); }
a.tile:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

/* the little cut edge that catches light along the chamfer */
.facet {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--chamfer);
    height: var(--chamfer);
    background: linear-gradient(135deg, var(--accent), transparent 62%);
    opacity: 0.5;
    transition: opacity 0.18s var(--ease);
}
a.tile:hover .facet { opacity: 0.9; }

.tile[data-accent="emerald"] { --accent: var(--emerald); }
.tile[data-accent="dusk"]    { --accent: var(--dusk); }
.tile[data-accent="mint"]    { --accent: var(--mint); }

.tile-icon {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 10px;
    background: var(--well);
    border: 1px solid var(--line);
    color: var(--accent);
}
.tile-icon svg { width: 54px; height: 54px; display: block; }

.tile-body { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.tile-name {
    display: block;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
}
.tile-desc {
    display: block;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.5;
}

.tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.tile-host {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}
.tile-go {
    font-size: 16px;
    color: var(--accent);
    transform: translateX(0);
    transition: transform 0.18s var(--ease);
}
a.tile:hover .tile-go { transform: translateX(4px); }

/* coming-soon tile: quieter, dashed, no chamfer border accent */
.tile-soon {
    --accent: var(--ink-3);
    background: transparent;
    border: 1px dashed var(--line-2);
    clip-path: none;
    box-shadow: none;
    justify-content: center;
}
.tile-soon::after { display: none; }
.tile-soon .tile-icon { color: var(--ink-3); background: transparent; }
.tile-soon .tile-name { font-size: 18px; color: var(--ink-2); }

/* ---------- footer ---------- */

.foot {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line);
    padding: 28px clamp(20px, 5vw, 56px) 34px;
}
.foot-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
}
.foot-brand { display: flex; flex-direction: column; gap: 3px; }
.foot-name { font-family: var(--serif); font-size: 15px; }
.foot-loc { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.foot-contact { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; font-family: var(--mono); font-size: 12px; }
.foot-contact a, .linklike { color: var(--ink-2); text-decoration: none; transition: color 0.15s var(--ease); }
.foot-contact a:hover, .linklike:hover { color: var(--emerald); }
.linklike { appearance: none; border: 0; background: transparent; font: inherit; padding: 0; cursor: pointer; text-align: right; }
.foot-legal { max-width: 960px; margin: 22px auto 0; font-size: 11px; color: var(--ink-3); }

/* ---------- modal ---------- */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(9, 4, 12, 0.72); backdrop-filter: blur(3px); animation: fade 0.2s var(--ease); }
.modal-card {
    position: relative;
    width: min(640px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 6px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 var(--lip);
    animation: pop 0.24s var(--ease);
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.modal-title { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.modal-x { appearance: none; border: 0; background: transparent; color: var(--ink-2); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 3px; }
.modal-x:hover { color: var(--ink); }
.modal-x:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

.modal-body { overflow-y: auto; padding: 20px 24px 26px; }
.modal-body p { margin: 0 0 14px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.modal-body h3 { margin: 20px 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald); }
.modal-body b { color: var(--ink); }
.modal-body a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }
.modal-eff { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3) !important; }
.modal-sign { margin-top: 20px !important; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; color: var(--ink-3) !important; }

/* ---------- motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto; }
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
    .grid { grid-template-columns: 1fr; }
    .top { justify-content: center; text-align: center; }
    .top-nav { justify-content: center; gap: 14px 18px; }
    .foot-row { flex-direction: column; }
    .foot-contact { align-items: flex-start; }
    .linklike { text-align: left; }
}