/* geowycena.pl landing. Palette + type ported from panel.geowycena.pl (portal.css)
   so the two properties read as one family. Institutional-editorial direction:
   warm paper, navy ink, terracotta accent, serif display, mono for data + section numerals. */
:root{
  --paper:#F4EFE6; --paper-edge:#EFE9DD; --card:#FBF8F2;
  --ink:#1C2A39; --ink-soft:#46566A; --ink-mute:#7E8A99;
  --line:#DFD7C8; --accent:#C8741A; --accent-soft:#E9C9A3;
  --good:#2E7D32; --watch:#B8860B; --alert:#9A3412;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',monospace;
  --shadow:0 10px 30px rgba(28,42,57,.14);
  --shadow-soft:0 4px 14px rgba(28,42,57,.07);
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  background-image:radial-gradient(1100px 460px at 50% -220px,#fff 0%,var(--paper) 62%);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif); color:var(--ink); margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px; width:100%}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:500; margin:0 0 14px;
}
.lead{color:var(--ink-soft); font-size:17px; line-height:1.6}
.muted{color:var(--ink-mute)}

/* Seal (matches portal .seal) */
.seal{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:var(--mono); font-weight:500; font-size:15px;
  color:#fff; background:linear-gradient(140deg,var(--accent),#9c5410);
  letter-spacing:.5px; box-shadow:var(--shadow);
}

/* Masthead / nav */
.mast{
  position:sticky; top:0; z-index:30;
  background:rgba(251,248,242,.86); backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.mast-in{display:flex; align-items:center; gap:14px; padding:12px 0}
.brand{display:flex; align-items:center; gap:11px}
.brand .wm{font-family:var(--serif); font-weight:600; font-size:19px; line-height:1}
.brand .wm b{color:var(--accent); font-weight:600}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{color:var(--ink-soft); font-size:14.5px; font-weight:500}
.nav a:hover{color:var(--ink); text-decoration:none}

.btn{
  font-family:var(--sans); font-weight:600; font-size:15px; border-radius:9px;
  padding:11px 18px; cursor:pointer; display:inline-block; transition:filter .15s,transform .05s,background .15s;
}
.btn-primary{color:#fff; background:linear-gradient(140deg,var(--accent),#a85e12); border:0}
.btn-primary:hover{filter:brightness(1.05); text-decoration:none}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{color:var(--ink-soft); background:transparent; border:1px solid var(--line)}
.btn-ghost:hover{background:var(--paper-edge); text-decoration:none}

/* Hero */
.hero{position:relative; overflow:hidden; padding:74px 0 60px}
.hero .wrap{position:relative; z-index:2; max-width:820px}
.hero h1{font-size:44px; line-height:1.12; font-weight:700; letter-spacing:-.01em; margin:0 0 20px}
.hero .lead{font-size:19px; max-width:640px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
/* Cadastral contour motif, CSS/SVG only, evokes a parcel outline on a survey sheet */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(680px 360px at 78% 30%,#000 0%,transparent 72%);
  mask-image:radial-gradient(680px 360px at 78% 30%,#000 0%,transparent 72%);
}

/* Generic section */
section.band{padding:60px 0; border-top:1px solid var(--line)}
.sec-head{max-width:680px; margin:0 0 34px}
.sec-num{font-family:var(--mono); font-size:13px; color:var(--accent); letter-spacing:.1em}
.sec-head h2{font-size:30px; font-weight:600; margin:8px 0 12px; letter-spacing:-.01em}
.sec-head p{margin:0; color:var(--ink-soft); font-size:16.5px}

/* Source grid (kazda dana ze zrodlem) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px}
.src{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 18px 15px; box-shadow:var(--shadow-soft); transition:border-color .15s,box-shadow .15s;
}
.src:hover{border-color:var(--accent-soft); box-shadow:var(--shadow)}
.src h3{font-family:var(--serif); font-size:17px; font-weight:600; margin:0 0 6px}
.src p{margin:0 0 12px; color:var(--ink-soft); font-size:14px; line-height:1.5}
.src .cite{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); letter-spacing:.02em;
  padding-top:10px; border-top:1px dashed var(--line); display:block;
}

/* Steps (jak to dziala) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step}
.step{position:relative; padding-top:8px}
.step .n{
  font-family:var(--mono); font-size:13px; color:#fff; background:var(--accent);
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;
}
.step h3{font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 7px}
.step p{margin:0; color:var(--ink-soft); font-size:15px}

/* Trust points */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tp{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px}
.tp h3{font-family:var(--serif); font-size:17px; font-weight:600; margin:0 0 8px}
.tp p{margin:0; color:var(--ink-soft); font-size:14.5px}

/* Example + contact panels */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:38px 34px; text-align:center;
}
.panel h2{font-size:27px; font-weight:600; margin:0 0 12px}
.panel p{max-width:560px; margin:0 auto 24px; color:var(--ink-soft); font-size:16.5px}
/* Contact form (kontakt). Backend mechanism shared with cc4.life; styling native to geowycena. */
.cform{max-width:520px; margin:26px auto 0; text-align:left}
.cfield{margin-bottom:16px}
.cfield label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 7px;
}
.cfield input,.cfield textarea{
  width:100%; font-family:var(--sans); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; transition:border-color .15s,box-shadow .15s;
}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--ink-mute)}
.cfield input:focus,.cfield textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,116,26,.15);
}
.cfield textarea{resize:vertical; min-height:104px; line-height:1.5}
.cform .cform-send{margin-top:4px}
.cform .cform-send:disabled{opacity:.6; cursor:not-allowed}
.cform .cform-status{
  min-height:1.2em; max-width:none; margin:14px auto 0; font-family:var(--mono); font-size:14px;
}
.cform .cform-status.ok{color:var(--good)}
.cform .cform-status.err{color:var(--alert)}
.cform .cform-note{max-width:none; margin:12px auto 0; font-size:12.5px; color:var(--ink-mute)}

/* Footer */
.foot{border-top:1px solid var(--line); padding:34px 0 44px; margin-top:20px}
.foot-in{display:flex; flex-wrap:wrap; gap:18px; align-items:center; color:var(--ink-mute); font-size:13.5px}
.foot .links{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.foot .links a{color:var(--ink-soft)}

/* Motion: one staggered page-load reveal (frontend-design guidance) */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .reveal.d1{animation-delay:.06s} .reveal.d2{animation-delay:.14s} .reveal.d3{animation-delay:.22s}
  @keyframes rise{to{opacity:1; transform:none}}
}

@media (max-width:820px){
  .steps,.trust{grid-template-columns:1fr}
  .hero{padding:54px 0 44px}
  .hero h1{font-size:33px}
  .hero .lead{font-size:17px}
  .nav{display:none}
  .sec-head h2{font-size:25px}
  .panel{padding:30px 22px}
}

@media (max-width:480px){
  .cform .cform-send{width:100%}
}