/* ---------------------------------------------------------------------------
   dynamicsolutionsbulgaria.com — shared stylesheet (MLT-177 redesign)

   One stylesheet for every page. There is no build step, so this file is the
   single source of truth for the shell (header, footer, type scale) that every
   page repeats in markup. Design language adapted from "Directive" by HTML5 UP
   (CC BY 3.0) — see THIRD-PARTY.md.

   Order: tokens · base · utility bar · header · hero · bands · service cards ·
          app cards · company · form · footer · privacy page · media queries
   --------------------------------------------------------------------------- */

:root{
  /* neutrals */
  --page:#f4f4f4;          /* grey bands / page background */
  --surface:#ffffff;       /* white bands, cards, form fields */
  --line:#e0e0e0;          /* borders and rules */
  --line-soft:#ececec;
  --ink:#222222;           /* headings */
  --body:#4a4a4a;          /* body text */
  --muted:#6e6e6e;         /* secondary text */
  --faint:#8a8a8a;         /* small print */

  /* dark surfaces */
  --dark:#2b2f33;          /* footer + service cards */
  --dark-2:#22262a;        /* utility bar */
  --dark-line:#3c4146;
  --dark-ink:#b9bcbe;

  /* THE one accent. Changing these two lines re-tints the whole site. */
  --accent:#2c6e8f;        /* 5.65:1 on white — AA */
  --accent-dk:#22576f;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman","Noto Serif",serif;
  --max:1080px;
}

/* --- base ---------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface);
  color:var(--body);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

h1,h2,h3{color:var(--ink);margin:0}
h1{font:400 31px/1.25 var(--serif)}
h2{font:400 24px/1.3 var(--serif);margin:0 0 10px}
h3{font:600 15px/1.4 var(--sans)}

p{margin:0 0 14px}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

.kicker{
  display:block;font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin:0 0 10px;
}
.lede{color:var(--muted);max-width:640px;margin:0 0 26px}
.small{font-size:12.5px;color:var(--faint)}

/* --- utility bar --------------------------------------------------------- */

.utilbar{background:var(--dark-2);color:#9a9ea1;font-size:12px;line-height:1}
.utilbar .wrap{display:flex;align-items:center;justify-content:space-between;height:32px;gap:12px}
.utilbar a{color:#c3c6c8}
.utilbar a:hover{color:#fff;text-decoration:none}

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

.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:600 15px/1.2 var(--sans)}
.brand:hover{text-decoration:none}
.brand .mark{
  width:30px;height:30px;border-radius:3px;background:var(--accent);color:#fff;flex:none;
  display:grid;place-items:center;font:700 16px/1 var(--serif);
}
.brand .name{letter-spacing:.02em}
.site-nav{display:flex;gap:22px}
.site-nav a{
  color:var(--muted);font:600 11.5px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.12em;
}
.site-nav a:hover{color:var(--accent);text-decoration:none}

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

.hero{
  position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center;
  border-bottom:1px solid var(--line);background:#eceded;
}
/* inset:-10px hides the blur bleed that would otherwise show at all four edges */
.hero::before{
  content:"";position:absolute;inset:-10px;
  background:url(/assets/hero-office.jpg) center/cover no-repeat;
  filter:grayscale(85%) blur(2px);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(246,246,246,.94) 0%,rgba(246,246,246,.80) 55%,rgba(246,246,246,.58) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:44px;padding-bottom:44px}
.hero-copy{max-width:640px}
.hero h1{margin:0 0 14px}
.hero .lede{color:#4a4a4a;margin-bottom:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}

/* --- buttons ------------------------------------------------------------- */

.btn{
  display:inline-block;padding:11px 20px;font:600 12.5px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.1em;border-radius:3px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-primary[disabled]{background:#9bb4c1;cursor:default}
.btn-ghost{background:#fff;color:#333;border-color:#c9c9c9}
.btn-ghost:hover{border-color:#8a8a8a}

/* --- bands --------------------------------------------------------------- */

.band{padding:56px 0;border-top:1px solid var(--line)}
.band-grey{background:var(--page)}
.band-white{background:var(--surface)}
.hero + .band{border-top:0}

.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* --- service cards (dark, flat) ------------------------------------------ */

.svc{
  background:var(--dark);color:var(--dark-ink);
  border-top:3px solid var(--accent);border-radius:3px;padding:24px 22px;
}
.svc svg{width:26px;height:26px;color:#fff;display:block;margin:0 0 14px}
.svc h3{
  color:#fff;font:600 13px/1.3 var(--sans);text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 9px;
}
.svc p{font-size:14px;margin:0}

/* --- app cards ----------------------------------------------------------- */

.app{
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px 22px;
  display:flex;gap:16px;align-items:flex-start;
}
.app-icon{
  width:40px;height:40px;flex:none;background:#f0f0f0;border-radius:3px;
  display:grid;place-items:center;
}
.app-icon svg{width:22px;height:22px;color:#4a4a4a;display:block}
.app-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.app-name{font:400 18px/1.2 var(--serif);color:var(--ink)}
.app p{font-size:14px;color:var(--muted);margin:0}

.tag{
  display:inline-block;font:600 10px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.12em;padding:4px 7px;border-radius:2px;vertical-align:middle;
}
.tag-testing{background:#e6eef3;color:var(--accent)}
.tag-dev{background:#efefef;color:#6e6e6e}

/* --- company ------------------------------------------------------------- */

.company-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.facts{border:1px solid var(--line);border-radius:4px;padding:20px 22px;background:#fbfbfb}
.facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.facts dt{
  font:600 10.5px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);white-space:nowrap;
}
.facts dd{margin:0;font-size:14px;color:var(--body)}
.facts .small{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}

/* --- contact / form ------------------------------------------------------ */

.contact-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.form-box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px}
.field{margin:0 0 16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{
  display:block;font:600 12px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.1em;color:#555;margin:0 0 6px;
}
label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--faint)}
input,select,textarea{
  width:100%;background:#fff;border:1px solid #cccccc;border-radius:3px;
  padding:10px 12px;font:15px/1.5 var(--sans);color:var(--body);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 2px rgba(44,110,143,.18);outline:none;
}
textarea{resize:vertical;min-height:132px}
/* Honeypot: off-screen, NOT display:none — some bots skip hidden fields. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.note{font-size:12.5px;color:var(--faint);margin:14px 0 0}
.status{margin:16px 0 0;padding:12px 14px;border-radius:3px;font-size:14px;display:none;border:1px solid transparent}
.status.ok{display:block;background:#e7f1ea;color:#1e6b46;border-color:#bcd8c8}
.status.err{display:block;background:#fbeaea;color:#9b2c2c;border-color:#e3c2c2}

.aside h3{margin:0 0 8px}
.aside h3 + p{font-size:14px}
.aside .block{margin:0 0 26px}
.aside .block:last-child{margin-bottom:0}
.aside ol{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.aside ol li{margin:0 0 6px}

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

.site-footer{background:var(--dark);color:var(--dark-ink);font-size:13.5px;padding:44px 0 0}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:34px}
.site-footer h4{
  color:#fff;font:600 11px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.14em;margin:0 0 14px;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 7px}
.site-footer a{color:var(--dark-ink)}
.site-footer a:hover{color:#fff;text-decoration:none}
.f-bottom{
  border-top:1px solid var(--dark-line);padding:16px 0 22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:#83878a;
}
.f-bottom a{color:#9a9ea1;text-decoration:underline}
.f-bottom a:hover{color:#fff}

/* --- privacy page -------------------------------------------------------- */

.page-privacy main{padding-top:44px;padding-bottom:56px}
.page-privacy .prose{max-width:760px}
.page-privacy .prose h1{margin:0 0 6px}
.page-privacy .prose .upd{color:var(--faint);font-size:13px;margin:0 0 30px}
.page-privacy .prose h2{
  font:600 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);margin:30px 0 10px;
}
.page-privacy .prose ul{padding-left:20px;margin:0 0 14px}
.page-privacy .prose li{margin:0 0 6px}
.page-privacy .box{
  background:var(--page);border:1px solid var(--line);border-radius:4px;
  padding:20px 22px;margin-top:32px;
}
.page-privacy .box p{margin:0 0 4px}
.page-privacy .box .small{margin-top:12px}

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

@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-3 > :last-child{grid-column:1 / -1}
  .company-grid,.contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}

@media (max-width:736px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-3 > :last-child{grid-column:auto}
  .field-row{grid-template-columns:1fr}

  /* Two rows: wordmark, then the nav wrapped as a left-aligned row of links.
     align-items:stretch + width:100% are load-bearing — without them the nav
     keeps its max-content width and pushes the whole page wider than 390px. */
  .site-header .wrap{height:auto;flex-direction:column;align-items:stretch;gap:10px;padding-top:12px;padding-bottom:12px}
  .site-nav{width:100%;gap:14px;flex-wrap:wrap}
  .site-nav a{font-size:12px;letter-spacing:.06em}

  .utilbar .util-place{display:none}
  .utilbar .wrap{justify-content:flex-end}

  .hero{min-height:300px}
  .hero .wrap{padding-top:34px;padding-bottom:34px}
  h1{font-size:23px}
  h2{font-size:20px}
  .app-name{font-size:17px}

  .band{padding:40px 0}
  .page-privacy main{padding-top:32px;padding-bottom:40px}
}

@media (max-width:480px){
  .f-grid{grid-template-columns:1fr}
  .f-bottom{justify-content:center;text-align:center}
  .hero-actions{display:block}
  .hero-actions .btn{display:block;text-align:center}
  .hero-actions .btn + .btn{margin-top:10px}
  .app{flex-direction:column;gap:12px}
  .facts dl{grid-template-columns:1fr;gap:2px 0}
  .facts dd{margin:0 0 10px}
}