/* Smart Mission brand (smart-mission.hr) za prezentaciju: Fraunces + Inter, zlatna na gotovo crnoj.
   Učitava se nakon stilova naslovnice i samo ih nadjačava; pregled za vlasnike (/app) ostaje na svojoj temi. */
@font-face { font-family: "Fraunces"; font-weight: 400 700; font-display: swap; src: url(/fonts/Fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-weight: 400 700; font-display: swap; src: url(/fonts/Fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --sm-bg0: #08090c; --sm-bg1: #0c0e13; --sm-surface: #101319; --sm-surface2: #161a22;
  --sm-border: rgba(255, 255, 255, .07); --sm-border-strong: rgba(255, 255, 255, .13);
  --sm-text: #eceef2; --sm-dim: #9aa1ad; --sm-faint: #606774;
  --sm-gold: #c9a227; --sm-gold-bright: #e7c869; --sm-gold-soft: rgba(201, 162, 39, .14); --sm-gold-glow: rgba(201, 162, 39, .30);
  --sm-grad: linear-gradient(120deg, #e7c869, #c9a227);
  /* tokeni naslovnice preusmjereni na brand */
  --bg: var(--sm-bg0); --ink: var(--sm-text); --muted: var(--sm-dim); --line: var(--sm-border); --soft: var(--sm-bg1);
  --orange: var(--sm-gold); --orange-deep: var(--sm-gold-bright); --on-orange: #0a0a0a; --navy: var(--sm-bg0); --navy2: var(--sm-surface);
  --green: var(--sm-gold-bright);
}
body { background: var(--sm-bg0); color: var(--sm-text); font-family: Inter, system-ui, "Segoe UI", sans-serif; }
h1, h2, h3, .brand {
  font-family: "Fraunces", Georgia, serif;
}
h1, h2 { color: #fff; letter-spacing: -.01em; font-weight: 500; }
h3 { color: #fff; font-weight: 600; letter-spacing: 0; }
h1 em { font-style: italic; background: none; color: var(--sm-gold-bright); -webkit-text-fill-color: currentColor; }
.kicker, section.dark .kicker { color: var(--sm-gold-bright); letter-spacing: .18em; font-weight: 600; }
.lead, .muted, section.dark .lead, section.dark .muted { color: var(--sm-dim); }

/* sekcije: izmjena dviju nijansi kao na smart-mission.hr */
section { background: var(--sm-bg0); }
section.soft { background: var(--sm-bg1); }
section.dark { background: radial-gradient(70% 60% at 85% 0%, rgba(201, 162, 39, .10), transparent 60%), var(--sm-bg1); color: var(--sm-text); }
section + section { border-top: 1px solid var(--sm-border); }

/* zaglavlje */
header.top { background: rgba(8, 9, 12, .86); border-bottom: 1px solid var(--sm-border); }
header.top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--sm-gold), transparent); }
.brand { gap: 12px; font-weight: 500; letter-spacing: .01em; flex-shrink: 0; }
nav.links { gap: 17px; margin-left: 6px; }
nav.links a { font-size: 14px; }
.brand img { width: 50px; height: 22px; }
.brand small { display: block; font-family: Inter, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sm-faint); margin-top: 1px; }
.brand i { display: none; }
nav.links a { color: var(--sm-dim); }
nav.links a:hover { color: #fff; }
header.top .actions .login { color: var(--sm-text); }

/* gumbi: zlatni gradijent s tamnim tekstom, sekundarni obrubljeni */
.btn { border-radius: 12px; font-size: 15px; font-weight: 600; }
.btn.primary { background: var(--sm-grad); color: #0a0a0a; box-shadow: 0 10px 34px var(--sm-gold-glow); }
.btn.primary:hover { background: var(--sm-grad); filter: brightness(1.06); }
.btn.ghost { border-color: var(--sm-border-strong); color: var(--sm-text); background: transparent; }
.btn.ghost:hover { border-color: var(--sm-gold); color: #fff; background: transparent; }

/* naslovnica */
.hero { background: radial-gradient(55% 65% at 85% 5%, rgba(201, 162, 39, .18), transparent 60%),
                    linear-gradient(180deg, var(--sm-bg1), var(--sm-bg0)); }
.hero .lead { color: var(--sm-dim); }
.chips span { border-radius: 999px; background: var(--sm-surface); border: 1px solid var(--sm-border-strong); color: var(--sm-text); font-weight: 500; }
.hero .shotwrap img { box-shadow: 0 -10px 60px rgba(0, 0, 0, .5), 0 0 0 1px var(--sm-border-strong), 0 0 70px rgba(201, 162, 39, .12); }

/* kartice i površine */
.card, section.soft .card, .plan, details, .cost, .extras div, .day > div, .hw .photo {
  background: var(--sm-surface); border-color: var(--sm-border); color: var(--sm-text);
}
.card .ic { background: var(--sm-gold-soft); color: var(--sm-gold-bright); border: 1px solid rgba(201, 162, 39, .25); }
.shot, section.dark .shot { box-shadow: 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px var(--sm-border-strong); }
.caption, section.dark .caption { color: var(--sm-faint); }
ul.ticks li, section.dark ul.ticks li { color: #c9ccd3; }
ul.ticks b, section.dark ul.ticks b { color: #fff; }
ul.ticks li::before { background: var(--sm-gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23e7c869' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .3); }
.stats div { border-left: 2px solid var(--sm-gold); }
.steps .n { background: var(--sm-bg1); color: var(--sm-gold-bright); box-shadow: 0 0 0 1px rgba(201, 162, 39, .4); }
.cost .row { border-color: var(--sm-border); }
.cost .fc b { color: var(--sm-gold-bright); }
.day time, .plan .badge { background: var(--sm-grad); color: #0a0a0a; }
.hw .photo { background: #eef0f4; } /* fotografije uređaja su na bijeloj podlozi */
.hw dt, .hw dd { border-color: var(--sm-border); }
.hw .card.best, .plan.best { border: 1px solid rgba(201, 162, 39, .5); box-shadow: 0 0 0 1px var(--sm-gold), 0 0 40px rgba(201, 162, 39, .14); }
summary::after { color: var(--sm-gold-bright); }
.plan hr { border-top-color: var(--sm-border); }
.extras span { color: var(--sm-dim); }

/* kontakt i podnožje */
#kontakt { background: radial-gradient(60% 70% at 100% 0%, rgba(201, 162, 39, .14), transparent 60%), var(--sm-bg1); }
.contact a { background: var(--sm-surface); border-color: var(--sm-border); }
.contact a:hover { border-color: var(--sm-gold); }
.contact a span { color: var(--sm-gold-bright); }
.contact a small { display: block; color: var(--sm-dim); font-size: 13px; margin-top: 2px; }
footer { background: var(--sm-bg0); border-top: 1px solid var(--sm-border); color: var(--sm-faint); }
footer a:hover { color: var(--sm-gold-bright); }
:focus-visible { outline: 2px solid var(--sm-gold); outline-offset: 2px; }