/* ===== siljanfoto — "Studio Dark" ===== */

/* Sora, self-hosted — variable weight 200–600 in one file per subset.
   See README for how to refresh these from Google Fonts. */
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('/fonts/sora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:200 600;
  font-display:swap;
  src:url('/fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#0a0c0f;
  --bg-soft:#11151a;
  --ink:#f4f7fa;
  --ink-soft:#a8b2bb;
  /* keeps small text (price sub-labels, fineprint, footer) above WCAG AA
     even where the hero glow lifts the background — #727c85 fell to 4.1:1 */
  --muted:#838d96;
  --accent:#35b6ee;
  --accent-deep:#8bd9fa;
  --line:rgba(244,247,250,.14);
  --line-soft:rgba(244,247,250,.07);
  --display:"Sora",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--display);
  background:var(--bg); color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column;
  line-height:1.6; font-weight:300; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(1.4rem,5vw,3.5rem)}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20; padding:1rem 0;
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,12,15,.72);
  /* -webkit- prefix required by Safari < 18 / iOS — without it the header is
     merely translucent and content scrolls through it illegibly */
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:inherit}
.brand .mark{width:34px; height:34px; flex:none}
/* wordmark: siljan a touch heavier and wider-tracked than foto, as in the logo */
.brand .name{font-size:1.3rem; white-space:nowrap; letter-spacing:-.01em}
.brand .name b{font-weight:400; letter-spacing:.05em}
.brand .name i{font-style:normal; font-weight:200; color:var(--ink-soft)}
.head-right{display:flex; align-items:center; gap:clamp(1rem,3vw,1.6rem)}
.top-mail{font-size:.9rem; color:var(--ink-soft); text-decoration:none; font-weight:400}
.top-mail:hover{color:var(--accent)}
.langs{display:flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600; letter-spacing:.1em}
.langs a{color:var(--muted); text-decoration:none; padding:.3rem .55rem; border-radius:999px}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="page"]{color:var(--bg); background:var(--accent)}
.langs .sep{display:none}
@media (max-width:600px){ .top-mail{display:none} }

/* ---------- hero ---------- */
main{flex:1}
.hero{position:relative; padding:clamp(3.5rem,11vw,8rem) 0 clamp(3rem,8vw,6rem); overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 55% at 82% 6%, rgba(53,182,238,.28), transparent 62%),
    radial-gradient(45% 55% at 2% 96%, rgba(53,182,238,.12), transparent 60%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 78%);
}
.hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(2rem,5vw,4rem); align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--accent-deep); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding:.4rem .9rem; border-radius:999px; margin-bottom:1.7rem;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent)}
h1{
  font-size:clamp(3rem,10.5vw,6.6rem); font-weight:400; letter-spacing:.01em;
  /* room for the descender of the "j" — gradient text clips to the line box */
  line-height:1.14; padding-bottom:.12em; margin-bottom:2.4rem;
  background:linear-gradient(180deg,#ffffff 30%, #9fb0bd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 em{font-style:normal; font-weight:200; letter-spacing:-.01em}
.lead{font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:400; color:var(--ink); max-width:22ch; line-height:1.28; letter-spacing:-.025em}
.desc{font-size:1.02rem; color:var(--ink-soft); max-width:48ch; margin-top:1.3rem; font-weight:300}
.cta{margin-top:2.6rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--accent); color:#04222f; text-decoration:none;
  font-weight:600; font-size:1rem; padding:1rem 1.7rem; border-radius:999px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 18px 40px -18px rgba(53,182,238,.9);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px); background:var(--accent-deep); box-shadow:0 22px 50px -18px rgba(53,182,238,1)}
.btn svg{width:17px;height:17px}
.note{font-size:.88rem; color:var(--muted); max-width:26ch}

/* enso hero mark */
.enso{width:clamp(200px,28vw,360px); height:auto; flex:none; filter:drop-shadow(0 0 24px rgba(53,182,238,.35))}
.enso g{transform-origin:100px 100px; animation:sweep 1.5s cubic-bezier(.22,1,.36,1) both}
.enso .ring{fill:none; stroke:var(--accent); stroke-linecap:round}
@keyframes sweep{from{opacity:0; transform:rotate(-80deg) scale(.88)} to{opacity:1; transform:rotate(-24deg) scale(1)}}
@media (prefers-reduced-motion:reduce){ .enso g{animation:none; opacity:1; transform:rotate(-24deg)} }
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr} .enso{display:none} }

/* ---------- section heads ---------- */
.sechead{display:flex; align-items:baseline; gap:1rem; margin-bottom:2.2rem; flex-wrap:wrap}
.sechead h2{font-size:clamp(1.8rem,4.2vw,2.7rem); font-weight:600; letter-spacing:-.04em; line-height:1.05}
.sechead .tag{font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}

/* ---------- services ---------- */
.services{border-top:1px solid var(--line-soft); padding:clamp(3rem,7vw,5rem) 0; background:var(--bg-soft)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden}
.card{background:var(--bg); padding:2rem 1.75rem 2.2rem; position:relative; transition:background .2s ease}
.card::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.card:hover{background:var(--bg-soft)}
.card:hover::after{transform:scaleX(1)}
.card .num{font-size:.7rem; letter-spacing:.18em; color:var(--accent); font-weight:600}
.card h3{font-size:1.22rem; font-weight:600; letter-spacing:-.03em; margin:.85rem 0 .55rem; color:var(--ink)}
.card p{font-size:.94rem; color:var(--ink-soft); line-height:1.62; font-weight:300}

/* ---------- pricing ---------- */
.pricing{padding:clamp(3rem,8vw,5.5rem) 0}
.pricing .intro{color:var(--ink-soft); max-width:56ch; margin:-1rem 0 2.4rem; font-weight:300}
.pricing .intro strong{color:var(--ink); font-weight:500}
.prices{list-style:none}
.prices li{
  display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:1.6rem .2rem; border-top:1px solid var(--line-soft);
}
.prices li:last-child{border-bottom:1px solid var(--line-soft)}
.prices .what{flex:1 1 24rem; min-width:0}
.prices h3{font-size:1.18rem; font-weight:600; letter-spacing:-.03em; color:var(--ink); margin-bottom:.3rem}
.prices p{font-size:.94rem; color:var(--ink-soft); font-weight:300}
.prices .price{
  font-size:1.5rem; font-weight:600; letter-spacing:-.04em;
  color:var(--ink); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
}
.prices .price b{display:block; margin-top:.25rem; font-weight:400; color:var(--muted); font-size:.76rem; letter-spacing:.02em}
.prices li.highlight{
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius:18px;
  background:linear-gradient(120deg, rgba(53,182,238,.14), rgba(53,182,238,.03));
  padding:1.7rem 1.4rem; margin-top:.6rem;
}
.prices li.highlight h3{color:var(--accent-deep)}
.prices li.highlight .price{color:var(--accent-deep)}
/* once the price wraps under the description it is no longer on the right,
   so right-aligning its sub-label just looks like a stray indent */
@media (max-width:560px){
  .prices .price{text-align:left}
}
.fineprint{margin-top:2rem; font-size:.87rem; color:var(--muted); max-width:62ch; font-weight:300}
.fineprint strong{color:var(--ink-soft); font-weight:500}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; padding:2rem 0}
footer .row{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{color:var(--accent)}
footer a.co{
  color:var(--ink-soft); font-weight:500;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition:color .18s ease, border-color .18s ease;
}
footer a.co:hover{color:var(--accent); border-color:var(--accent)}