/* ==========================================================================
   Pro Contract — shared design system
   Theme: light and blue, in the register of Facebook's own product design —
   white surfaces, a confident blue for every action, generous air. The
   "drafting table" idea survives in the details: dimension-line dividers,
   numbered plates, a document that still looks like a real document.
   ========================================================================== */

:root{
  --ink:#0F2540;
  --ink-2:#1A3A63;
  --slate:#5B6B85;
  --mist:#8996AC;

  --paper:#F0F4FA;
  --paper-2:#E4EBF5;
  --surface:#FFFFFF;
  --rule:#D8E0EC;
  --grid:#E6ECF6;

  --accent:#1877F2;
  --accent-dark:#1259C3;
  --accent-tint:#E8F0FE;
  --danger:#D93025;
  --danger-tint:#FBEAE8;
  --ok:#1F8A5C;

  --display:'Space Grotesk',-apple-system,sans-serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --read:'Newsreader',Georgia,serif;

  --r:6px;
  --shadow:0 1px 2px rgba(15,37,64,.05), 0 10px 28px rgba(15,37,64,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px;
  background-position:-1px -1px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.wrap-tight{max-width:780px;margin:0 auto;padding:0 24px}
.muted{color:var(--slate)}
.small{font-size:.86rem}
.mono{font-family:var(--mono)}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- scroll progress ruler ---------- */
.ruler{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);z-index:200;transition:width .08s linear}
.ruler::after{content:"";position:absolute;right:-1px;top:-2px;width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 3px rgba(225,79,61,.22)}

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="stagger"]>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal="stagger"].in>*{opacity:1;transform:none}
[data-reveal="stagger"].in>*:nth-child(1){transition-delay:.02s}
[data-reveal="stagger"].in>*:nth-child(2){transition-delay:.09s}
[data-reveal="stagger"].in>*:nth-child(3){transition-delay:.16s}
[data-reveal="stagger"].in>*:nth-child(4){transition-delay:.23s}
[data-reveal="stagger"].in>*:nth-child(5){transition-delay:.30s}
[data-reveal="stagger"].in>*:nth-child(6){transition-delay:.37s}

/* ---------- section header, drawn like a plan title block ---------- */
.plate{display:flex;align-items:baseline;gap:14px;margin-bottom:28px}
.plate::after{content:"";flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 11px)}
.plate-no{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.plate-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.h-display{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.06}
.h2{font-size:clamp(1.7rem,3.3vw,2.5rem)}
.lede{color:var(--slate);max-width:60ch;font-size:1.02rem}

/* dimension-line rule, used as a decorative divider */
.dim{display:flex;align-items:center;gap:8px;color:var(--mist);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em}
.dim::before,.dim::after{content:"";flex:none;width:8px;height:8px;border:1px solid var(--mist);border-right:none;border-top:none}
.dim::after{border-right:1px solid var(--mist);border-left:none;transform:scaleX(-1)}
.dim i{flex:1;height:1px;background:var(--mist)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:.93rem;font-weight:600;
  padding:12px 22px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:transform .14s,box-shadow .14s,background .14s,color .14s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--accent);color:#fff;border-color:var(--accent-dark)}
.btn-ink:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 6px 18px rgba(24,119,242,.28)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-dark);box-shadow:0 6px 18px rgba(24,119,242,.3)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost.on-white{border-color:var(--ink);color:var(--ink)}
.btn-ghost.on-white:hover{background:var(--ink);color:#fff}
.btn-quiet{background:var(--surface);border-color:var(--rule);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-lg{padding:16px 30px;font-size:1rem}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--rule)}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .hdr{background:color-mix(in srgb, var(--surface) 92%, transparent);backdrop-filter:blur(12px)}
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:11px}
.mark{width:30px;height:30px;flex:none;position:relative}
.mark::before,.mark::after{content:"";position:absolute;background:var(--ink)}
.mark::before{left:50%;top:-3px;bottom:-3px;width:1.6px;transform:translateX(-50%)}
.mark::after{top:50%;left:-3px;right:-3px;height:1.6px;transform:translateY(-50%)}
.mark i{position:absolute;inset:6px;border:1.6px solid var(--accent);border-radius:50%}
.logo-txt{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo-txt span{color:var(--accent)}
.nav{display:flex;align-items:center;gap:2px}
.nav a.lnk{padding:9px 12px;font-size:.9rem;font-weight:500;color:var(--ink-2);border-radius:var(--r)}
.nav a.lnk:hover{background:var(--paper-2)}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.08em;cursor:pointer;color:var(--ink-2)}
.lang-btn:hover{border-color:var(--accent)}
.lang-btn .cur{color:var(--accent)}
.nav-cta{padding:8px 14px;font-size:.8rem;font-weight:600;border-radius:var(--r);background:var(--accent);color:#fff;
  border:1px solid var(--accent-dark);margin-left:12px;display:inline-flex;align-items:center;line-height:1.2;
  transition:background .14s,border-color .14s,transform .14s}
.nav-cta:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.nav-cta:active{transform:translateY(1px)}

/* ---------- language dialog ---------- */
dialog.sheet{border:none;border-radius:var(--r);padding:0;max-width:430px;width:calc(100% - 34px);box-shadow:0 30px 80px rgba(15,37,64,.32)}
dialog.sheet::backdrop{background:rgba(15,37,64,.5)}
.sheet-in{padding:26px;background:var(--surface)}
.sheet h3{font-family:var(--display);font-size:1.28rem;font-weight:600;margin-bottom:4px}
.langgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 4px}
.langgrid a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);font-weight:500;font-size:.92rem}
.langgrid a:hover{border-color:var(--accent)}
.langgrid a.on{border-color:var(--accent);background:var(--accent);color:#fff}
.langgrid a .code{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;opacity:.6}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-size:.78rem;color:var(--mist);margin-top:5px;line-height:1.45}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=tel],select,textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px;transition:border-color .14s,box-shadow .14s}
textarea{resize:vertical;min-height:96px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,26,46,.09)}
input.err,select.err,textarea.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-tint)}
.err-msg{color:var(--danger);font-size:.78rem;margin-top:5px}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2357637C' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;padding:56px 0 26px;font-size:.9rem}
.ftr-grid{display:grid;grid-template-columns:1.6fr .9fr 1.1fr .9fr;gap:36px}
.ftr h4{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7DB2FF;margin-bottom:13px}
.ftr a{display:block;padding:5px 0;color:#fff}
.ftr a:hover{opacity:.75}
.ftr .logo{margin-bottom:13px}
.ftr .mark::before,.ftr .mark::after{background:#fff}
.ftr .logo-txt{color:#fff}
.ftr .logo-txt span{color:#7DB2FF}
.ftr-bot{border-top:1px solid rgba(255,255,255,.13);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#fff;font-size:.8rem;opacity:.85}
.ftr-mail{font-family:var(--mono);font-size:.82rem;color:#fff!important}

@media (max-width:820px){
  .ftr-grid{grid-template-columns:1fr;gap:26px}
  .nav a.lnk{display:none}
  .langgrid{grid-template-columns:1fr}
}