/* Qanat Network — site styles, v2
   One typeface: Latin Modern Roman (GUST Font License), self-hosted as QN LM Roman subsets.
   Optical sizes: 8 for labels, 10 for text, 12 for headings, 17 for display. */

@font-face{font-family:"QN LM Roman 8";src:url(../fonts/qn-lmroman8-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QN LM Roman 10";src:url(../fonts/qn-lmroman10-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QN LM Roman 10";src:url(../fonts/qn-lmroman10-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"QN LM Roman 12";src:url(../fonts/qn-lmroman12-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QN LM Roman 12";src:url(../fonts/qn-lmroman12-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"QN LM Roman 17";src:url(../fonts/qn-lmroman17-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* colour — one blue family (hue ≈ 231°) plus ink and paper */
  --ink:#0E0E0E; --paper:#FFFFFF;
  --deep:#1B2C9C;      /* Q, channel line, links, primary button */
  --channel:#2742F5;   /* NETWORK, the dot, hover, focus */
  --light:#8FA0FF;     /* deep-blue roles on dark */
  --pale:#C3CBFF;      /* channel-blue roles on dark */
  --rule:#D8D8D4;      /* hairlines */
  --grey:#5B5E6B;      /* secondary text, 6.4:1 on paper */

  /* type */
  --f-label:"QN LM Roman 8","Latin Modern Roman",serif;
  --f-text:"QN LM Roman 10","Latin Modern Roman",serif;
  --f-head:"QN LM Roman 12","Latin Modern Roman",serif;
  --f-display:"QN LM Roman 17","QN LM Roman 12","Latin Modern Roman",serif;
  --fs-display:clamp(2.6rem, 1.55rem + 4.4vw, 5.6rem);
  --fs-h2:clamp(2.05rem, 1.45rem + 2.5vw, 3.75rem);
  --fs-h3:clamp(1.3rem, 1.18rem + .45vw, 1.6rem);
  --fs-lede:clamp(1.22rem, 1.1rem + .5vw, 1.55rem);
  --fs-body:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-small:.9375rem;
  --fs-label:.8125rem;

  /* spacing: 4-pt base, used in steps */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
  --gutter:clamp(20px, 4vw, 56px);
  --measure:34em;
  --hair:1px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:var(--fs-body);line-height:1.58;font-kerning:normal;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure,dl,dd{margin:0}
::selection{background:var(--pale);color:var(--ink)}

/* links & focus */
a{color:var(--deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--deep) 45%,transparent);transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--channel);text-decoration-color:currentColor}
a:active{color:var(--ink)}
:focus-visible{outline:2px solid var(--channel);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:12px 16px;z-index:10}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}

/* draft notice */
.draft{border-bottom:var(--hair) solid var(--rule);font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.04em;color:var(--grey)}
.draft .wrap{display:flex;gap:10px;align-items:center;min-height:36px;padding-top:6px;padding-bottom:6px}
.draft i{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--channel)}

/* header */
.site-header{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:var(--hair) solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:76px}
.brand{display:flex;align-items:center;min-height:44px;padding:4px 0}
.brand img{height:36px;width:auto}
.nav{display:flex;align-items:center;gap:var(--s1)}
.nav a{font-family:var(--f-text);font-size:1rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
.nav a .n{font-family:var(--f-label);font-size:.75rem;color:var(--channel);margin-right:6px;letter-spacing:.04em}
.nav a:hover{color:var(--deep)}
.nav .btn{margin-left:12px}
@media (max-width:980px){.nav a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font-family:var(--f-text);font-size:1.0625rem;line-height:1;letter-spacing:.01em;text-decoration:none;border:1px solid var(--deep);background:var(--deep);color:var(--paper);border-radius:2px;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--channel);border-color:var(--channel);color:var(--paper)}
.btn:active{background:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--deep)}
.btn--ghost:hover{background:transparent;color:var(--channel);border-color:var(--channel)}
.btn--sm{min-height:44px;padding:0 16px;font-size:1rem}
.btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.btn--rev{background:var(--paper);border-color:var(--paper);color:var(--deep)}
.btn--rev:hover{background:var(--pale);border-color:var(--pale);color:var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.link-arrow::after{content:"→";text-decoration:none;display:inline-block;transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}

/* labels */
.label{font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--channel)}

/* hero */
.hero{padding:clamp(48px,8vw,120px) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.012em;max-width:13.5em;margin-top:var(--s5)}
.hero h1 em{font-family:var(--f-head);font-style:italic;color:var(--deep)}
.hero .lede{font-size:var(--fs-lede);line-height:1.45;max-width:31em;color:var(--ink)}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s2)}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 22rem;align-items:end;column-gap:var(--s8)}
  .hero h1{grid-column:1/-1}
  .hero .lede{grid-column:1}
  .hero .actions{grid-column:2;justify-content:flex-start;margin:0 0 6px}
}
.hero-figure{margin-top:clamp(48px,7vw,96px);border-top:var(--hair) solid var(--rule);padding-top:var(--s6)}
.hero-figure .art-wide{display:block}
.hero-figure .art-narrow{display:none}
@media (max-width:720px){.hero-figure .art-wide{display:none}.hero-figure .art-narrow{display:block;margin:0 -8px}}

/* figure caption, paper-style */
figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:var(--s5);font-size:var(--fs-small);line-height:1.5;color:var(--grey);max-width:46em}
figcaption b{font-weight:400;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--ink);padding-top:3px}

/* the channel animation (single, restrained) */
.qn-flow{stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0;animation:qn-flow 7.5s cubic-bezier(.45,0,.55,1) 1.2s infinite}
@keyframes qn-flow{0%{stroke-dashoffset:100;opacity:0}6%{opacity:1}62%{stroke-dashoffset:7;opacity:1}70%,100%{stroke-dashoffset:7;opacity:0}}
@media (prefers-reduced-motion:reduce){.qn-flow{animation:none;display:none}}

/* sections */
.section{padding:clamp(72px,10vw,144px) 0 0}
.opener{display:flex;align-items:center;gap:0;margin-bottom:clamp(28px,4vw,48px)}
.opener .ring{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center}
.opener .ring::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--deep)}
.opener .line{flex:1;height:1px;background:var(--deep)}
.opener .end{flex:none;width:9px;height:9px;border-radius:50%;background:var(--channel)}
.opener .num{font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--channel);padding:0 14px;white-space:nowrap}
.sec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5) var(--s8)}
@media (min-width:1000px){.sec-grid{grid-template-columns:15rem minmax(0,1fr)}}
.sec-aside{font-size:var(--fs-small);color:var(--grey);line-height:1.5}
.sec-aside .label{display:block;margin-bottom:var(--s2)}
.section h2{font-family:var(--f-head);font-weight:400;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.008em;max-width:16em}
.section h2 em{font-style:italic;color:var(--deep)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1em}
.prose .big{font-size:var(--fs-lede);line-height:1.45}
.sec-body>*+*{margin-top:var(--s6)}

/* two-column statement */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media (min-width:860px){.split{grid-template-columns:1.25fr 1fr;gap:var(--s8)}}
.note{border-left:1px solid var(--deep);padding-left:var(--s5);font-size:var(--fs-small);color:var(--grey);line-height:1.55}
.note p+p{margin-top:.8em}
.note strong{font-weight:400;color:var(--ink)}

/* figure 1 */
.figure{margin-top:var(--s7);padding-top:var(--s6);border-top:var(--hair) solid var(--rule)}
.figure picture img{width:100%}
@media (max-width:720px){.figure picture img{max-width:440px;margin:0 auto}}

/* numbered steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--hair) solid var(--ink);margin-top:var(--s7)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{padding:var(--s5) 0 var(--s6);border-bottom:var(--hair) solid var(--rule)}
@media (min-width:860px){.steps li{padding:var(--s5) var(--s6) var(--s5) 0;border-bottom:0}.steps li+li{padding-left:var(--s6);border-left:var(--hair) solid var(--rule)}}
.steps .k{font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.14em;color:var(--channel)}
.steps h3,.benefits h3,.approach h3{font-family:var(--f-head);font-weight:400;font-size:var(--fs-h3);line-height:1.2;margin:var(--s2) 0 var(--s3)}
.steps p,.benefits p,.approach p{font-size:var(--fs-small);line-height:1.55;color:#2B2D35;max-width:30em}

/* benefits — ruled grid, no boxes */
.benefits{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--hair) solid var(--ink)}
@media (min-width:640px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s6)}}
@media (min-width:1000px){.benefits{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s7)}}
.benefits li{padding:var(--s5) 0 var(--s6);border-bottom:var(--hair) solid var(--rule);display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--s4);align-content:start}
.benefits .ic{color:var(--deep);width:32px;height:32px;margin-top:6px}
.benefits .k{font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.14em;color:var(--channel)}
.benefits h3{margin-top:4px}

/* approach */
.approach{list-style:none;padding:0;margin-top:var(--s2)}
.approach li{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2) var(--s6);padding:var(--s5) 0;border-top:var(--hair) solid var(--rule)}
.approach li:last-child{border-bottom:var(--hair) solid var(--rule)}
@media (min-width:860px){.approach li{grid-template-columns:5rem 16rem minmax(0,1fr);align-items:baseline}}
.approach .k{font-family:var(--f-display);font-size:2rem;line-height:1;color:var(--deep)}
.approach h3{margin:0}

/* contact */
.contact{padding:clamp(72px,10vw,144px) 0 clamp(72px,10vw,128px)}
.contact .mail{font-family:var(--f-head);font-size:clamp(1.6rem,1.2rem + 1.8vw,2.75rem);line-height:1.2;display:inline-block;padding:6px 0;word-break:break-word}
.contact .actions{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;margin-top:var(--s6)}

/* footer */
.site-footer{background:var(--ink);color:#E9E9EC;padding:var(--s8) 0 var(--s6);font-size:var(--fs-small)}
.site-footer a{color:var(--pale);text-decoration-color:color-mix(in srgb,var(--pale) 50%,transparent)}
.site-footer a:hover{color:var(--paper)}
.f-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);padding-bottom:var(--s6);border-bottom:1px solid #2A2A2E}
@media (min-width:860px){.f-top{grid-template-columns:1fr 1.4fr;align-items:start}}
.f-top img{height:40px;width:auto}
.notabank{font-size:1.0625rem;line-height:1.55;color:var(--paper);max-width:36em}
.notabank .label{color:var(--pale);display:block;margin-bottom:var(--s2)}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s6);padding-top:var(--s5);color:#B4B6C0;font-size:.875rem}
.f-bottom nav{display:flex;flex-wrap:wrap;gap:0 var(--s4)}
.f-bottom nav a{display:inline-flex;align-items:center;min-height:44px}
.ph{font-family:var(--f-label);letter-spacing:.04em;background:color-mix(in srgb,var(--pale) 22%,transparent);padding:1px 5px;border-radius:2px}
.site-footer .ph{background:#24242A}

/* phone refinements */
@media (max-width:560px){
  .site-header .wrap{min-height:64px}
  .brand img{height:30px}
  .nav .btn{margin-left:0}
  .hero .actions .btn{width:100%}
  .benefits li{grid-template-columns:36px minmax(0,1fr)}
}

/* ---- refinements after first render ---- */
.nav a.btn{color:var(--paper)}
.nav a.btn:hover{color:var(--paper)}
.brand img{height:44px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:root{--fs-small:1rem}
.note{color:#454854}
.steps p,.benefits p,.approach p{font-size:1rem;color:#2B2D35}
figcaption{color:#4A4D58}
.hide-s{display:inline}
@media (max-width:560px){.brand img{height:34px}.hide-s{display:none}}
.contact .mail{min-height:48px}
.nav a.btn--ghost{color:var(--deep)}.nav a.btn--ghost:hover{color:var(--channel)}

/* ---- v2: comparison table, fine print ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compare-wrap{overflow-x:auto;margin-top:var(--s7)}
.compare{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}
.compare caption{caption-side:bottom;padding-top:var(--s4);text-align:left;color:#4A4D58;font-size:1rem}
.compare caption b{font-weight:400;font-family:var(--f-label);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;color:var(--ink);margin-right:12px}
.compare thead th{font-family:var(--f-label);font-weight:400;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);text-align:left;padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid var(--ink)}
.compare tbody th{font-family:var(--f-head);font-weight:400;text-align:left;vertical-align:top;color:var(--ink);padding:var(--s4) var(--s4) var(--s4) 0;width:28%}
.compare td{vertical-align:top;padding:var(--s4) var(--s4) var(--s4) 0;color:#2B2D35}
.compare tbody tr{border-bottom:var(--hair) solid var(--rule)}
.compare td:nth-child(2){color:var(--ink)}
@media (max-width:560px){.compare{font-size:.9375rem}.compare tbody th{width:30%}}
.fineprint{margin-top:var(--s5);font-size:.9375rem;line-height:1.5;color:#4A4D58;max-width:46em}
.notabank p+p{margin-top:.8em;color:#E9E9EC}