/* ------------------------------------------------------------------ *
 * sirin.ee — the front of the house.
 *
 * Shares its tokens and type scale with the product at fit.sirin.ee, so
 * the two read as one thing rather than a brochure bolted to an app. It
 * is allowed to be warmer and larger here; it is not allowed to be a
 * different product.
 * ------------------------------------------------------------------ */
:root{
  --bg:#fbfbfd; --surface:#ffffff; --surface-2:#f2f4f6;
  --ink:#16202b; --ink-2:#54636e; --ink-3:#7f8d97;
  --line:#dde3e7; --line-soft:#eaeef1;
  --accent:#1c5c46; --accent-ink:#ffffff; --accent-soft:#e4efea;
  --warn:#8a5a12;

  /* Spacing. Multiples of 8, and nothing between them.
     Ad-hoc margins are how a layout drifts: two elements set 20px apart here
     and 24px there read as a mistake nobody can name. */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px; --s10:128px;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:980px;
  --shadow:0 1px 2px rgba(16,32,43,.05), 0 8px 28px rgba(16,32,43,.06);
  --shadow-lg:0 2px 6px rgba(16,32,43,.06), 0 24px 60px rgba(16,32,43,.12);

  --t-xs:11px; --t-sm:12px; --t-foot:13px; --t-body-s:14px; --t-body:15px;
  --t-lg:17px; --t-h3:20px; --t-h2:26px; --t-h1:34px; --t-display:56px;

  /* Exactly two, and both are Apple's own.
   *
   * SF Pro Display for anything set large, SF Pro Text for everything read at
   * size — the pair Apple uses on its own pages, and the pair that sits with
   * the wordmark, which is a wide geometric sans. A serif heading face would
   * have fought it.
   *
   * No web font is loaded. These resolve locally on Apple devices and fall
   * back to the platform UI face elsewhere, so the page paints with no
   * network round trip and no flash of the wrong typeface.
   */
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1417; --surface:#161d22; --surface-2:#1d262c;
    --ink:#e9eef0; --ink-2:#a6b3bb; --ink-3:#7d8b94;
    --line:#2a353c; --line-soft:#1f282e;
    --accent:#57bd97; --accent-ink:#0e1417; --accent-soft:#132720;
    --warn:#d9a44b;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.3);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1417; --surface:#161d22; --surface-2:#1d262c;
  --ink:#e9eef0; --ink-2:#a6b3bb; --ink-3:#7d8b94;
  --line:#2a353c; --line-soft:#1f282e;
  --accent:#57bd97; --accent-ink:#0e1417; --accent-soft:#132720;
  --warn:#d9a44b;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:var(--t-lg); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding-inline:var(--s3)}
.col{max-width:62ch}
.mono{font-variant-numeric:tabular-nums}
.eyebrow{margin-bottom:var(--s1); font-size:var(--t-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.small{font-size:var(--t-body)} .tiny{font-size:var(--t-sm)}

/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{display:flex; align-items:center; gap:22px; height:60px}
.brand{display:inline-flex; align-items:center; text-decoration:none; color:inherit}
/*
  The wordmark, set rather than drawn — for now.

  The real files are two PNGs, one per ground. Until they are in
  assets/, this is type that echoes them: the same wide geometric
  spacing, in the display face, so the header is never a broken image on a
  live page. Swapping to the files is one markup change.
*/
.brand .wordmark{
  font-family:var(--display); font-weight:600; font-size:19px;
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  line-height:1;
}
.brand img{height:18px; width:auto; display:block}
.brand .on-light{display:block} .brand .on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .on-light{display:none}
  :root:not([data-theme="light"]) .brand .on-dark{display:block}
}
:root[data-theme="dark"] .brand .on-light{display:none}
:root[data-theme="dark"] .brand .on-dark{display:block}
footer .brand img{height:26px}
footer .brand .wordmark{font-size:22px}
.brand b{font-weight:600}
.top nav{display:flex; gap:20px; margin-left:auto; align-items:center}
.top nav a{font-size:var(--t-body); color:var(--ink-2); text-decoration:none}
.top nav a:hover{color:var(--ink)}
.top nav a.cta{
  background:var(--accent); color:var(--accent-ink); padding:8px 16px;
  border-radius:var(--r-pill); font-weight:550;
}
.top nav a.cta:hover{filter:brightness(1.08); color:var(--accent-ink)}
@media (max-width:640px){ .top nav a.hide-s{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:var(--t-lg); font-weight:550; line-height:1;
  padding:15px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  background:var(--accent); color:var(--accent-ink); text-decoration:none; cursor:pointer;
  transition:filter .15s, transform .08s;
}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.985)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2); filter:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- hero ---------- */
.hero{padding-block:var(--s9) var(--s3)}
.hero h1{font-size:clamp(38px,6.4vw,var(--t-display)); line-height:1.03}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero .lede{font-size:clamp(18px,2.2vw,21px); color:var(--ink-2); margin-top:var(--s3); max-width:56ch}
.hero .acts{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5)}

/* ---------- the demonstration ---------- */
.demo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden; margin-top:var(--s6);
}
.demo-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 22px; border-bottom:1px solid var(--line-soft); background:var(--surface-2);
}
.demo-head .t{font-size:var(--t-body); font-weight:550}
.demo-body{display:grid; grid-template-columns:270px 1fr; gap:0}
@media (max-width:800px){ .demo-body{grid-template-columns:1fr} }

.people{border-right:1px solid var(--line-soft); padding:14px}
@media (max-width:800px){ .people{border-right:0; border-bottom:1px solid var(--line-soft); display:flex; gap:8px; overflow-x:auto} }
.person{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border:0; border-radius:var(--r-md); background:transparent;
  font-family:inherit; color:inherit; cursor:pointer; transition:background .14s;
}
.person:hover{background:var(--surface-2)}
.person[aria-pressed="true"]{background:var(--accent-soft)}
.person .av{
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-2); font-size:var(--t-foot); font-weight:650;
}
.person[aria-pressed="true"] .av{background:var(--accent); color:var(--accent-ink)}
.person .who{display:grid; gap:1px; min-width:0}
.person .nm{font-size:var(--t-body); font-weight:550}
.person .rl{font-size:var(--t-sm); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.roles{padding:16px 22px 22px}
.roles .cap{font-size:var(--t-body); color:var(--ink-2); margin-bottom:14px; min-height:44px}
.roles .cap b{color:var(--ink); font-weight:600}
.rowline{display:grid; grid-template-columns:1fr 54px; align-items:center; gap:14px; padding:7px 0}
.rowline .nm{font-size:var(--t-body); display:flex; align-items:center; gap:8px}
.rowline .bar{grid-column:1/-1; height:6px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden}
.rowline .bar i{display:block; height:100%; border-radius:var(--r-pill); background:var(--accent); width:0; transition:width .7s cubic-bezier(.2,.7,.2,1)}
.rowline .sc{font-variant-numeric:tabular-nums; font-variant-numeric:tabular-nums; text-align:right; font-size:var(--t-body); font-weight:600}
.rowline.dim{opacity:.42}
.tag{
  font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent);
}
.tag.warn{background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn)}
/* "never clicked" is the whole argument, so it is the one that carries colour. */
.tag.warn{background:var(--surface-2); color:var(--ink-3)}

/* ---------- sections ---------- */
section{padding-block:var(--s8)}
section.tight{padding-block:var(--s6)}
.rule{border-top:1px solid var(--line-soft)}
/* Two rules never stack, and a rule never opens the page. */
.rule + .rule{margin-top:0}
main > section:first-child.rule{border-top:0; margin-top:0}
h2{font-size:clamp(26px,3.6vw,var(--t-h1)); line-height:1.14}
.sub{font-size:var(--t-lg); color:var(--ink-2); margin-top:var(--s2); max-width:58ch}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s5)}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px}
.step .n{
  font-size:var(--t-sm); color:var(--accent);
  display:block; margin-bottom:14px; letter-spacing:.1em;
}
.step h3{font-size:var(--t-h3); margin-bottom:8px}
.step p{font-size:var(--t-body); color:var(--ink-2)}

.figures{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s5)}
@media (max-width:800px){ .figures{grid-template-columns:1fr} }
.fig{border-left:2px solid var(--accent); padding-left:20px}
.fig .big{font-family:var(--display); font-variant-numeric:tabular-nums; font-size:38px; font-weight:600; letter-spacing:-.02em; display:block; line-height:1.1}
.fig p{font-size:var(--t-body); color:var(--ink-2); margin-top:8px}

.doors{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s5)}
@media (max-width:760px){ .doors{grid-template-columns:1fr} }
.door{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 30px; text-decoration:none;
  transition:border-color .15s, box-shadow .2s, transform .15s;
}
.door:hover{border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.door h3{font-size:var(--t-h2); margin-bottom:10px}
.door p{color:var(--ink-2); font-size:var(--t-body)}
.door .go{display:inline-flex; align-items:center; gap:7px; margin-top:18px; color:var(--accent); font-weight:550; font-size:var(--t-body)}

/* ---------- pricing ---------- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s5)}
@media (max-width:1000px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .tiers{grid-template-columns:1fr} }
/* Room for the flag reserved on every card, so the four titles sit on one
   line whether or not a card is wearing one. */
.tier{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:46px 22px 26px; display:flex; flex-direction:column}
.tier.pick{border-color:var(--accent); box-shadow:var(--shadow)}
.tier .flag{position:absolute; top:20px; left:22px; margin:0; font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.tier h3{font-size:var(--t-h3)}
.tier .price{font-family:var(--display); font-variant-numeric:tabular-nums; font-size:32px; font-weight:600; letter-spacing:-.02em; margin:14px 0 2px}
.tier .per{font-size:var(--t-sm); color:var(--ink-3); margin-bottom:20px}
.tier dl{margin:0 0 20px; display:grid; gap:10px; font-size:var(--t-body)}
.tier dt{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.tier dd{margin:0}
.tier .btn{margin-top:auto; width:100%; font-size:var(--t-body); padding:12px 18px}

.faq{display:grid; gap:0; margin-top:var(--s5); border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:20px 0; cursor:pointer; font-weight:550; font-size:var(--t-lg);
  list-style:none; display:flex; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--accent); font-size:var(--t-h3)}
.faq details[open] summary::before{content:"−"}
.faq .a{padding:0 0 22px 30px; color:var(--ink-2); font-size:var(--t-body); max-width:64ch}

/* ---------- job list ---------- */
.jobs{display:grid; gap:var(--s1); margin-top:var(--s5)}
.job{
  display:flex; align-items:center; gap:var(--s3); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s3);
  text-decoration:none; transition:border-color .15s, background .15s;
}
.job:hover{border-color:var(--accent); background:var(--surface-2)}
/* Title over detail, not beside it: two spans in one parent are inline by
   default, which ran the role and its location into a single sentence. */
.job > span:first-child{display:grid; gap:var(--s1); min-width:0}
.job .t{display:block; font-size:var(--t-lg); font-weight:550}
.job .m{display:block; font-size:var(--t-body); color:var(--ink-3)}
.job .go{margin-left:auto; color:var(--accent); font-size:var(--t-body); font-weight:550; white-space:nowrap}

.note{
  background:var(--surface-2); border-radius:var(--r-md); padding:var(--s3);
  font-size:var(--t-body); color:var(--ink-2); margin-top:var(--s4);
}

/* ---------- foot ---------- */
footer{border-top:1px solid var(--line-soft); padding-block:var(--s6) var(--s8); margin-top:var(--s6)}
.footgrid{display:flex; gap:var(--s7); flex-wrap:wrap; align-items:flex-start}
.footgrid nav{display:grid; gap:9px}
.footgrid a{font-size:var(--t-body); color:var(--ink-2); text-decoration:none}
.footgrid a:hover{color:var(--ink)}
/* The company line sits on its own, centred, with air above it. It is an
   address, not an argument, and crowding it against the link columns made it
   read as another paragraph of copy. */
footer .legal{
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
  font-size:var(--t-sm); color:var(--ink-3);
  text-align:center; line-height:1.7;
}

/* ---------- modifiers, so no page needs an inline style ---------- */
.hero.short{padding-block:var(--s9) var(--s2)}
.lead-in{padding-block:var(--s3) var(--s8)}
.stack-sm{margin-top:var(--s1)}
.stack{margin-top:var(--s3)}
.hero h1.mid{font-size:clamp(32px,4.6vw,var(--t-h1))}
.footbrand{flex:1 1 240px}
.footbrand p{margin-top:var(--s2); max-width:34ch}
.note strong{color:var(--ink); font-weight:600}
.note p{margin-top:var(--s1)}
.demo-head .grow{margin-left:auto}
.roles .cap{min-height:var(--s6)}

/* ---------------------------------------------------------------------------
   The candidate's way in.

   One subject, one action, and a great deal of room around both. The icon
   carries the meaning — a document going up — so the heading does not have to
   spend words explaining what "upload" is, and can spend them on what the
   person actually gets.

   No dashed drop-zone border here on purpose: this page cannot accept a file,
   and a target that looks droppable but swallows nothing is worse than a
   button. The dashed border appears on the next screen, where dropping works.
   --------------------------------------------------------------------------- */
.cvcard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--s8) var(--s6);
  text-align:center;
  display:grid;
  justify-items:center;
  gap:0;
}
.cvcard-icon{
  width:64px; height:64px; margin-bottom:var(--s4);
  display:grid; place-items:center;
  border-radius:var(--r-md);
  background:var(--accent-soft);
  color:var(--accent);
}
.cvcard-icon svg{width:30px; height:30px}
.cvcard h2{
  font-size:var(--t-h1);
  letter-spacing:-0.022em;
  line-height:1.12;
  margin:0 0 var(--s2);
  max-width:18ch;
}
.cvcard-sub{
  color:var(--ink-2);
  font-size:var(--t-lg);
  line-height:1.55;
  margin:0 0 var(--s5);
  max-width:46ch;
}
.cvcard-go{
  font-size:var(--t-lg);
  padding:15px 34px;
}
.cvcard-note{
  margin:var(--s3) 0 0;
  font-size:var(--t-body-s);
  color:var(--ink-3);
}

@media (max-width:720px){
  .cvcard{padding:var(--s6) var(--s3)}
  .cvcard h2{font-size:var(--t-h2)}
  .cvcard-sub{font-size:var(--t-body)}
  .cvcard-go{width:100%}
}

/* ---------------------------------------------------------------------------
   Sections arriving as you scroll.

   CSS only, using a scroll-driven animation. No JavaScript touches this, and
   that is the whole point: a script that HIDES content and relies on an
   observer to bring it back can leave a section invisible for ever if the
   observer never fires — a hidden tab, a zero-height viewport, anything
   unexpected. A missing animation is a shrug; a missing paragraph is a broken
   page.

   Here the hiding only exists inside an animation that a supporting browser is
   already running. Where `animation-timeline` is not supported the rules are
   ignored entirely and every section is simply visible, which is the correct
   answer rather than a fallback.

   The movement is small and the curve is a standard ease-out. It should be
   noticed once and then forgotten.
   --------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rise {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }

    [data-reveal] {
      animation: rise linear both;
      animation-timeline: view();
      /* Starts as the section enters from the bottom and finishes well before
         it reaches the middle, so nothing is still fading while being read. */
      animation-range: entry 0% cover 26%;
    }

    /* A row of cards lands as a row, not a slab: each child a beat behind. */
    [data-reveal="stagger"] > * {
      animation: rise linear both;
      animation-timeline: view();
    }
    [data-reveal="stagger"] > *:nth-child(1) { animation-range: entry 0%  cover 24%; }
    [data-reveal="stagger"] > *:nth-child(2) { animation-range: entry 4%  cover 28%; }
    [data-reveal="stagger"] > *:nth-child(3) { animation-range: entry 8%  cover 32%; }
    [data-reveal="stagger"] > *:nth-child(4) { animation-range: entry 12% cover 36%; }
  }
}

/* The language link in the nav. A link rather than a control, because on a
   marketing site each language is a real address and the browser's own
   behaviour — open in a new tab, copy the link — should all work. */
.top nav a.langlink{
  font-variant: small-caps; letter-spacing: .04em; font-weight: 600;
  opacity: .72; padding-left: 4px;
}
.top nav a.langlink:hover{ opacity: 1; }