/* divara Landingpage – PARAT GmbH */
@font-face{font-family:"Giorgio";src:url("../fonts/Giorgio.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Giorgio";src:url("../fonts/Giorgio-Thin.ttf") format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-L.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-R.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-M.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Ubuntu Mono";src:url("../fonts/UbuntuMono-R.ttf") format("truetype");font-weight:400;font-display:swap}

html,body{margin:0}
@font-face{font-family:"Giorgio";src:url(data:font/ttf;base64,{{GIORGIO}}) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Giorgio";src:url(data:font/ttf;base64,{{GIORGIO_THIN}}) format("truetype");font-weight:200;font-display:swap}

:root{
  --green-100:#BAEA9D; --green-200:#96DA6E; --green-400:#70BA44; --green-600:#53A126;
  --teal-400:#348F6F; --teal-600:#1D7B5A; --blue-400:#38638A; --orange-400:#D57A4E; --orange-200:#F9A67E;

  --stage:#2B2D2F; --stage-2:#212325; --stage-text:#E7EAE7; --stage-muted:#C0C0C0; --stage-line:rgba(255,255,255,.14);

  --page:#F6F7F5; --card:#FFFFFF; --sunken:#EDEEEB;
  --ink:#3F3F3F; --ink-strong:#2B2D2F; --muted:#5C5C5C; --faint:#8A8A8A;
  --hair:#DCDDDA; --link:#1D7B5A; --link-hover:#53A126;
  --shadow-md:0 1px 2px rgba(31,31,31,.04),0 8px 24px rgba(31,31,31,.06);
  --shadow-lg:0 2px 6px rgba(31,31,31,.08),0 18px 40px rgba(31,31,31,.12);
  --sign-1:var(--green-400); --sign-2:var(--teal-400); --sign-3:var(--blue-400);
  --gradient:linear-gradient(90deg,var(--green-400),var(--teal-400) 50%,var(--blue-400));
  --focus:0 0 0 3px rgba(52,143,111,.45);
  --logo-text:#3F3F3F; --logo-stage:#D4D6D4;
  --tint-1:#EEF8E6; --tint-2:#E6F2ED; --tint-3:#E8EEF4;

  --display:"Giorgio","Ubuntu",system-ui,sans-serif;
  --sans:"Ubuntu","Segoe UI",system-ui,sans-serif;
  --mono:"Ubuntu Mono",ui-monospace,"Cascadia Mono",monospace;
  --ease:cubic-bezier(.32,.72,.28,1);
  --dur:180ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#1C1E20; --card:#25282A; --sunken:#17191A;
    --ink:#E2E5E2; --ink-strong:#FFFFFF; --muted:#B4B8B4; --faint:#8A8E8A;
    --hair:rgba(255,255,255,.12); --link:#96DA6E; --link-hover:#BAEA9D;
    --shadow-md:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.4);
    --stage:#151618; --stage-2:#0F1011;
    --logo-text:#C0C0C0;
    --tint-1:rgba(112,186,68,.14); --tint-2:rgba(52,143,111,.18); --tint-3:rgba(56,99,138,.24);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#1C1E20; --card:#25282A; --sunken:#17191A;
  --ink:#E2E5E2; --ink-strong:#FFFFFF; --muted:#B4B8B4; --faint:#8A8E8A;
  --hair:rgba(255,255,255,.12); --link:#96DA6E; --link-hover:#BAEA9D;
  --shadow-md:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.4);
  --stage:#151618; --stage-2:#0F1011;
  --logo-text:#C0C0C0;
  --tint-1:rgba(112,186,68,.14); --tint-2:rgba(52,143,111,.18); --tint-3:rgba(56,99,138,.24);
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

*,*::before,*::after{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur) var(--ease)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink-strong)}
h3{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.3;margin:0;color:var(--ink-strong)}
p{margin:0}
.rule{width:72px;height:3px;border-radius:2px;background:var(--gradient);border:0;margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 16px/1 var(--sans);padding:15px 22px;border-radius:6px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--green-400);color:#fff}
.btn-primary:hover{background:var(--green-600);color:#fff}
.btn-primary svg{transition:transform var(--dur) var(--ease)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-small{padding:10px 16px;font-size:14px}

/* Stage (the one dark band) */
.stage{background:var(--stage);color:var(--stage-text);position:relative;overflow:hidden}
.stage .eyebrow{color:var(--stage-muted)}
.stage h1{color:#fff}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.topbar{position:relative;z-index:1}
.topbar a:first-child{display:block;line-height:0}
.topbar .logo{height:42px;width:auto;display:block}
.topbar .logo .wm{fill:var(--logo-stage)}
@media (max-width:480px){.topbar .logo{height:30px}.topbar .btn-small{padding:9px 12px}}
.watermark{position:absolute;right:-140px;top:-60px;width:620px;height:auto;opacity:.06;pointer-events:none}
@media (max-width:880px){.watermark{width:420px;right:-160px;top:auto;bottom:-80px}}

.hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-block:40px 88px}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:40rem}
.badge{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stage-text);border:1px solid var(--stage-line);border-radius:999px;padding:7px 14px 7px 12px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--orange-400);box-shadow:0 0 0 4px rgba(213,122,78,.22)}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.06}
.hero h1 .name{display:block;font-weight:200;font-size:1.35em;line-height:1;margin-bottom:.12em;color:var(--green-200)}
.lede{font-size:clamp(17px,1.6vw,19px);font-weight:300;line-height:1.6;color:var(--stage-text);max-width:34rem}
.pledge{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:14px;color:var(--green-200);list-style:none;margin:0;padding:0}
.pledge li{display:flex;align-items:center;gap:8px}
.pledge svg{flex:none}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cta-row .mail{font-family:var(--mono);font-size:15px;color:var(--stage-muted)}
.cta-row .mail b{font-weight:400;color:var(--stage-text);user-select:all}

.figure{position:relative;margin:0}
.figure img{width:100%;aspect-ratio:900/1004;object-fit:cover;border-radius:20px;border:1px solid var(--stage-line);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.03)}
.figure figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--stage-muted)}
.stage::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--gradient)}

@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:40px;padding-block:24px 64px}
  .figure{max-width:460px}
}

/* Sections */
section.band{padding-block:88px}
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:40px;max-width:44rem}
.section-head h2{font-size:clamp(30px,3.6vw,39px);line-height:1.15}
.section-head p.sub{font-size:18px;font-weight:300;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:880px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--hair);border-radius:14px;box-shadow:var(--shadow-md);padding:28px;display:flex;flex-direction:column;gap:14px;
  border-top:3px solid var(--c);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ico{width:44px;height:44px;border-radius:10px;background:var(--t);display:grid;place-items:center;color:var(--c)}
.card p{color:var(--muted)}
.card:nth-child(1){--c:var(--sign-1);--t:var(--tint-1)} .card:nth-child(2){--c:var(--sign-2);--t:var(--tint-2)} .card:nth-child(3){--c:var(--sign-3);--t:var(--tint-3)}

.places{margin-top:56px;display:flex;flex-direction:column;gap:16px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--hair);border-radius:999px;padding:8px 16px}

/* Closing */
.closing{background:var(--card);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.closing-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
@media (max-width:880px){.closing-grid{grid-template-columns:1fr;gap:40px}}
blockquote{margin:0;display:flex;flex-direction:column;gap:22px}
blockquote p{font-family:var(--display);font-weight:200;font-size:clamp(28px,3.4vw,40px);line-height:1.2;letter-spacing:-.01em;color:var(--ink-strong);text-wrap:balance}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--hair);counter-increment:s}
.steps li:first-child{padding-top:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:14px;color:var(--teal-400);padding-top:3px}
.steps strong{display:block;font-weight:500;color:var(--ink-strong)}
.steps span{color:var(--muted);font-size:15px}
.contact{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.contact-lines{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--muted)}
.contact-lines .addr{font-family:var(--mono);color:var(--ink-strong);user-select:all}
.copy{font:500 13px/1 var(--sans);background:none;border:1px solid var(--hair);color:var(--muted);border-radius:6px;padding:7px 10px;cursor:pointer;margin-left:8px;vertical-align:1px;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.copy:hover{border-color:var(--green-400);color:var(--link)}

footer{padding-block:48px 40px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 40px}
footer .brand{display:flex;flex-direction:column;gap:16px}
footer .logo{height:36px;width:auto;display:block}
footer .logo .wm{fill:var(--logo-text)}
footer address{font-style:normal;line-height:1.6}
footer nav{display:flex;gap:24px}
footer a{color:var(--muted)}
.legal{width:100%;padding-top:20px;border-top:1px solid var(--hair);font-size:13px;color:var(--faint)}