/* CYKARIA website styles. Design tokens live in :root below; everything else is per-section. */
/* DM Sans, served from the site itself (assets/fonts, licence in OFL.txt): one variable file for weights 400 to 700, latin characters only */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/dm-sans-latin-opsz-normal.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}
/* the base palette is the dark theme; the light theme below overrides it */
:root{color-scheme:dark;
  --void:#05070C;--panel:#0A1226;
  --blue:#2F63FF;--blue-soft:#6E9BFF;--blue-pale:#BFD0FF;
  --seal:#6E9BFF;--seal-dim:rgba(47,99,255,.22);
  --ink:#F2F4F8;--muted:#9AA5B8;--faint:#7E88A2;
  --rule:rgba(255,255,255,.10);--rule-2:rgba(255,255,255,.18);
  --slot-bg:rgba(110,155,255,.12);--slot-line:rgba(110,155,255,.45);
  --nav-bg:rgba(5,7,12,.72);--nav-bg-solid:rgba(5,7,12,.96);--hover-bg:rgba(255,255,255,.06);
  --hero-bg:linear-gradient(180deg,#05070C 0%,#070C1B 58%,#05070C 100%);
  --text-halo:0 2px 24px rgba(5,7,12,.9);--viz-bg:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(47,99,255,.10),transparent 70%),linear-gradient(180deg,#070C19,#05070C);
  --void-rgb:5,7,12;--glow:47,99,255;--accent:110,155,255;--spark:110,155,255;--dim:rgba(255,255,255,.07);--dim2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.03);--node:rgba(255,255,255,.55);
  --net-bg:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(47,99,255,.08),transparent 70%);--sov-bg:linear-gradient(160deg,#0B142B,#080F22 60%,#070C1B);--grain-blend:screen;--grain-op:.12;--bar-done:rgba(255,255,255,.32);--sep:.55;--sep-haze:.10;
  --max:1200px;--gutter:clamp(20px,4vw,48px);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{--void:#05070C;--panel:#0A1226;--ink:#F2F4F8;--muted:#9AA5B8;--faint:#7E88A2}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
h1,h2,h3{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;letter-spacing:-.02em;margin:0}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.mark{width:22px;height:22px;flex:none}

/* ---- light theme: set data-theme="light" on <html> ---- */
:root[data-theme="light"]{color-scheme:light;
  --void:#F2F3F5;--panel:#FFFFFF;--blue:#141A28;--blue-soft:#141A28;--blue-pale:#3F4756;--seal:#141A28;--seal-dim:rgba(20,26,40,.12);
  --ink:#0A0D14;--muted:#3F4756;--faint:#626875;--rule:rgba(10,13,20,.12);--rule-2:rgba(10,13,20,.26);
  --slot-bg:rgba(20,26,40,.06);--slot-line:rgba(20,26,40,.35);
  --nav-bg:rgba(242,243,245,.8);--nav-bg-solid:rgba(242,243,245,.98);--hover-bg:rgba(10,13,20,.05);
  --hero-bg:linear-gradient(180deg,#F4F5F7 0%,#E8EAEE 58%,#F2F3F5 100%);
  --text-halo:0 2px 24px rgba(242,243,245,.9);--viz-bg:radial-gradient(ellipse 60% 50% at 50% 55%,rgba(10,13,20,.05),transparent 70%),linear-gradient(180deg,#FFFFFF,#F2F3F5);
  --void-rgb:242,243,245;--glow:160,178,232;--accent:20,26,40;--spark:42,85,214;--dim:rgba(10,13,20,.08);--dim2:rgba(10,13,20,.18);--surface:rgba(10,13,20,.03);--node:rgba(10,13,20,.5);
  --net-bg:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(10,13,20,.04),transparent 70%);--sov-bg:linear-gradient(160deg,#FFFFFF,#F3F4F7 60%,#ECEEF2);--grain-blend:multiply;--grain-op:.05;--bar-done:rgba(10,13,20,.30);--sep:.45;--sep-haze:.05}
/* light page with the blue hero keeps blue accents throughout, to match its hero */
:root[data-theme="light"][data-hero="blue"]{--blue:#1F4FE0;--blue-soft:#2A55D6;--blue-pale:#17367F;--seal:#2A55D6;--seal-dim:rgba(42,85,214,.18);--slot-bg:rgba(31,79,224,.10);--slot-line:rgba(31,79,224,.45);--glow:42,85,214;--accent:42,85,214;--spark:42,85,214}
:root[data-theme="light"] .btn.primary:hover{background:#000;color:#fff}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;position:relative}
.brand{display:flex;align-items:center;gap:12px;font-family:"DM Sans",sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:.16em}
.links{display:flex;gap:32px;font-size:.95rem}
.links a{color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
@media(max-width:1180px){.links{gap:22px}}
.links a:hover,.links a.on{color:var(--ink);border-bottom-color:var(--rule-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--rule-2);font-size:.95rem;font-weight:500;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{background:var(--hover-bg);border-color:var(--rule-2)}
.btn.primary{background:var(--ink);color:var(--void);border-color:var(--ink)}
.btn.primary:hover{background:#fff;color:#000}
.menu{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu span{display:block;width:20px;height:1.5px;background:var(--ink);position:relative}
.menu span::before,.menu span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--ink)}
.menu span::before{top:-6px}.menu span::after{top:6px}
@media(max-width:1040px){
  .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--nav-bg-solid);border-bottom:1px solid var(--rule);padding:8px var(--gutter) 16px}
  .links a{padding:14px 0;border-bottom:1px solid var(--rule)}
  .nav.open .links{display:flex}
  .nav .cta{display:none}
  .menu{display:flex}
}

/* hero */
.hero{position:relative;min-height:calc(100svh - 72px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero .glow{position:absolute;inset:0;z-index:-3;background:var(--hero-bg)}
.hero .grain{position:absolute;inset:0;z-index:-1;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);pointer-events:none;background-image:var(--grain)}
.stack{position:absolute;inset:0;z-index:-2;overflow:hidden}
.stack canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:48px}
.hcopy{max-width:none;width:fit-content;min-width:280px;position:relative}
.hcopy::before{content:"";position:absolute;inset:-64px -110px -64px -80px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 64% 62% at 44% 50%,rgba(var(--void-rgb),.98) 0%,rgba(var(--void-rgb),.94) 50%,rgba(var(--void-rgb),.6) 72%,rgba(var(--void-rgb),0) 92%)}
.hero h1{font-size:clamp(2.2rem,3.6vw,4.4rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;text-shadow:var(--text-halo)}
.hero h1 span{display:block;opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 span{white-space:nowrap}
.hero h1 span:nth-child(2){animation-delay:.1s}
.hero h1 span:nth-child(3){animation-delay:.2s}
.hero .lead{margin-top:clamp(18px,2vw,28px);max-width:34ch;color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.5;text-shadow:var(--text-halo);opacity:0;animation:rise .9s .34s cubic-bezier(.2,.7,.2,1) forwards}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,2.4vw,34px);opacity:0;animation:rise .9s .46s cubic-bezier(.2,.7,.2,1) forwards}
@media(max-width:600px){.hero h1{font-size:9vw}}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero h1 span,.hero .lead,.hero .actions{animation:none;opacity:1;transform:none}}
@media(max-width:959px){.hero{min-height:0}.hero .wrap{display:grid;gap:24px}.hcopy{max-width:none}.stack{position:relative;inset:auto;z-index:0;width:100%;order:2}}

/* sections */
.section{position:relative;padding:clamp(72px,9vw,112px) 0;border-top:1px solid var(--rule)}
.section::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(var(--accent),var(--sep)) 50%,transparent 100%);pointer-events:none}
.section::after{content:"";position:absolute;left:0;right:0;top:0;height:64px;background:linear-gradient(180deg,rgba(var(--glow),var(--sep-haze)),transparent);pointer-events:none;z-index:0}
.section > .wrap{position:relative;z-index:1}
.section h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;max-width:20ch}

/* servis */
.servis{padding:clamp(96px,14vw,190px) 0 clamp(72px,9vw,112px)}
.servis .case-label{font-size:clamp(.85rem,1.1vw,1rem);margin-bottom:clamp(14px,2vw,22px)}
.servis .name{font-family:"DM Sans",sans-serif;font-weight:500;font-size:clamp(3.2rem,11vw,9rem);line-height:.95;letter-spacing:-.045em}
.servis .under{margin-top:clamp(14px,2vw,26px);font-family:"DM Sans",sans-serif;font-weight:400;font-size:clamp(1.3rem,3.2vw,2.3rem);line-height:1.15;color:var(--muted);letter-spacing:-.02em;max-width:30ch}
/* Servis cover: photo behind the header copy. Text colours are fixed light values (not theme tokens) because the photo is dark in every theme. */
.case-cover{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:1px solid var(--rule-2);background:#0B0E14;min-height:clamp(400px,46vw,620px);display:flex;align-items:flex-end;padding:clamp(24px,4.4vw,60px)}
.case-cover .cc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;z-index:-2}
.case-cover::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.78) 34%,rgba(5,7,12,.38) 62%,rgba(5,7,12,.08) 100%),linear-gradient(0deg,rgba(5,7,12,.72) 0%,rgba(5,7,12,0) 58%)}
.case-cover .cc-copy{position:relative;max-width:100%}
.case-cover .case-label{color:#C9D7FF;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.case-cover .name{font-size:clamp(3rem,8.4vw,7.25rem);color:#FFFFFF;text-shadow:0 2px 28px rgba(0,0,0,.45)}
.case-cover .under{color:rgba(242,244,248,.88);text-shadow:0 1px 18px rgba(0,0,0,.55)}
@media(max-width:700px){
  .case-cover{min-height:clamp(308px,84vw,392px)}
  .case-cover .cc-img{object-position:70% 50%}
  .case-cover::before{background:linear-gradient(0deg,rgba(5,7,12,.94) 0%,rgba(5,7,12,.8) 45%,rgba(5,7,12,.35) 78%,rgba(5,7,12,.15) 100%)}
}
.case-cover .eyebrow{color:#C9D7FF;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.case-cover h2{color:#FFFFFF;text-shadow:0 2px 28px rgba(0,0,0,.45)}
.sol-cover{min-height:clamp(380px,40vw,540px)}
.sol-cover .cc-img{object-position:66% 50%}
.sol-cover::before{background:linear-gradient(90deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.8) 36%,rgba(5,7,12,.42) 64%,rgba(5,7,12,.12) 100%),linear-gradient(0deg,rgba(5,7,12,.72) 0%,rgba(5,7,12,.32) 70%,rgba(5,7,12,.12) 100%)}
/* photo side of the Solutions cover (right of the copy): shading at 85% of its strength */
@media(min-width:900px){.sol-cover::before{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 66%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.85) 100%);mask-image:linear-gradient(90deg,#000 0%,#000 66%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.85) 100%)}}
@media(max-width:700px){.sol-cover{min-height:clamp(294px,78.4vw,364px)}.sol-cover .cc-img{object-position:62% 50%}.sol-cover::before{background:linear-gradient(0deg,rgba(5,7,12,.95) 0%,rgba(5,7,12,.86) 50%,rgba(5,7,12,.64) 80%,rgba(5,7,12,.4) 100%)}}
@media(max-width:420px){.sol-cover{min-height:clamp(329px,105vw,364px)}}

/* servis work: illustrated cards */
.worklabel{margin-top:clamp(36px,5vw,56px);font-size:.95rem;color:var(--faint)}
.work{display:grid;grid-template-columns:1fr;gap:24px;margin-top:clamp(36px,5vw,56px)}
.worklabel + .work{margin-top:14px}
@media(min-width:860px){.work{grid-template-columns:1fr 1fr;gap:28px}
  .work>.wk{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
  @supports not (grid-template-rows:subgrid){.work>.wk{display:flex}.wk>.efs,.wk>.wk-ill{margin-bottom:auto}}}
.wk{border:1px solid var(--rule-2);border-radius:22px;background:var(--viz-bg);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.wk-top{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wk .n{font-size:.85rem;color:var(--faint)}
.wk h3{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.2}
.wk-ill{margin:18px 0 0}
.wk-tiles{list-style:none;margin:clamp(24px,2.8vw,32px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;container-type:inline-size}
.wk-tiles li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px 14px;border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);color:var(--ink);font-size:.95rem;font-weight:500;line-height:1.3}
.wk-tiles .oi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--blue-soft);background:rgba(var(--accent),.08);border:1px solid rgba(var(--accent),.25)}
.wk-tiles .oi svg{width:18px;height:18px}
@media(max-width:600px){.wk-tiles li{flex-basis:100%;flex-direction:row;align-items:center;padding:12px 14px}}
@container (max-width:420px){.wk-tiles li{flex-basis:100%;flex-direction:row;align-items:center;padding:12px 14px}}
.ill{width:100%;height:auto;display:block;overflow:visible}
.ill text{font-family:"DM Sans",sans-serif;fill:var(--muted);font-size:12.5px}
.ill .cap{font-size:11.5px;fill:var(--faint)}
.ill .track{stroke:var(--rule-2);stroke-width:1.2}
.ill .sk{fill:var(--dim2)}
.ill .fr{fill:var(--surface);stroke:var(--rule-2);stroke-width:1.1}
.ill .hex path{fill:var(--blue-soft);filter:drop-shadow(0 0 5px rgba(var(--glow),.7))}
.ill .q{fill:var(--ink);font-size:13.5px}
.ill .caret{fill:var(--blue-soft)}
.ill .rev{fill:var(--dim2)}
.ill .pro{fill:var(--blue-soft)}
.ill .trend{fill:none;stroke:var(--blue-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(var(--glow),.5))}
.ill .ins-dot{fill:var(--blue-soft)}

/* EFS card: five-step flow and a log that records it */
.efs{margin:18px 0 0}
.efs-flow{--ico:clamp(34px,10.5vw,60px);--pt:clamp(14px,3.4vw,46px);--p:2;position:relative;display:flex;justify-content:space-between;padding-top:var(--pt)}
.efs-track,.efs-fill{position:absolute;left:calc(var(--ico) / 2);top:calc(var(--pt) + var(--ico) / 2 - 1px);height:2px}
.efs-track{right:calc(var(--ico) / 2);height:1.2px;top:calc(var(--pt) + var(--ico) / 2 - .6px);background:var(--rule-2)}
.efs-fill{width:max(0px,calc(var(--p) * (100% - var(--ico)) / 4 - var(--ico) / 2 - 6px));background:var(--blue-soft);box-shadow:0 0 6px rgba(var(--glow),.55);transition:width .5s ease}
.efs-flow.all .efs-fill{width:calc(100% - var(--ico))}
.efs-fill::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:rgb(var(--spark));box-shadow:0 0 8px 1px rgba(var(--glow),.8)}
.efs-step{position:relative;z-index:1;flex:none;width:var(--ico);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.3vw,12px)}
.efs-ico{width:var(--ico);height:var(--ico);border-radius:calc(var(--ico) * .2);border:1.2px solid var(--rule-2);background:var(--panel);color:var(--muted);display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s,box-shadow .4s}
.efs-ico svg{width:40%;height:40%}
.efs-step.on .efs-ico{background:linear-gradient(rgba(var(--accent),.12),rgba(var(--accent),.12)),var(--panel);border-color:var(--blue-soft);color:var(--blue-soft);box-shadow:0 0 10px rgba(var(--glow),.4)}
.efs-lbl{width:calc(var(--ico) + 22px);font-size:clamp(9.5px,2.5vw,12.5px);line-height:1.25;color:var(--muted);text-align:center;text-wrap:balance;transition:color .4s}
.efs-step.on .efs-lbl{color:var(--ink)}
.efs-log{display:flex;flex-direction:column;gap:8px;margin-top:clamp(14px,2.6vw,24px)}
.efs-cap{font-size:11.5px;color:var(--faint)}
.efs-rows{display:flex;flex-direction:column;gap:6px}
.efs-row{display:flex;align-items:center;gap:12px;height:18px;padding-inline:10px;background:var(--surface);border:1px solid var(--rule);border-radius:5px;overflow:hidden;transition:background .5s,border-color .5s}
.efs-row.live{background:var(--panel);border-color:rgba(var(--accent),.45)}
.efs-box{flex:none;position:relative;width:9px;height:9px;border-radius:2px;border:1px solid var(--rule-2);transition:background .3s,border-color .3s}
.efs-box::after{content:"";position:absolute;left:2.4px;top:.4px;width:2.5px;height:5px;border:solid var(--panel);border-width:0 1.25px 1.25px 0;transform:rotate(45deg);opacity:0;transition:opacity .3s}
.efs-row.ticked .efs-box{background:var(--blue-soft);border-color:var(--blue-soft)}
.efs-row.done .efs-box{background:var(--faint);border-color:var(--faint)}
.efs-row.ticked .efs-box::after,.efs-row.done .efs-box::after{opacity:1}
.efs-b{flex:none;position:relative;overflow:hidden;height:4px;border-radius:2px;background:var(--dim2)}
.efs-b.end{margin-left:auto}
.efs-b::before{content:"";position:absolute;inset:0;background:var(--blue-soft);transform:scaleX(0);transform-origin:left center;transition:transform .45s ease,background-color .6s ease}
.efs-b.w::before{transform:scaleX(1)}
.efs-row.done .efs-b::before{transform:scaleX(1);background:var(--bar-done)}
.efs-row.in{animation:efsRowIn .5s ease both}
@keyframes efsRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.efs-fill,.efs-ico,.efs-lbl,.efs-row,.efs-box,.efs-box::after,.efs-b::before{transition:none}.efs-row.in{animation:none}}
.wk{min-width:0}

/* client review */
.review{margin:0;display:grid;grid-template-columns:1fr;gap:14px 64px}
.reviewsec{padding:clamp(56px,7vw,88px) 0}
@media(min-width:960px){.review{grid-template-columns:16rem 1fr}}
.review h3{font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--ink);font-family:"DM Sans",sans-serif;padding-top:6px}
.review blockquote{margin:0;font-family:"DM Sans",sans-serif;font-weight:400;font-size:clamp(1.69rem,2.84vw,2.3rem);line-height:1.28;letter-spacing:-.015em;color:var(--ink)}
.review figcaption{grid-column:2;margin-top:6px;font-size:.95rem;color:var(--muted);line-height:1.6}
@media(max-width:959px){.review figcaption{grid-column:1}}
.review figcaption b{display:block;color:var(--ink);font-weight:500}

/* shared pieces: icon tiles (How it works, security), step numbers (How it works) and note icons */
.pt-ic{width:40px;height:40px;border-radius:10px;border:1.2px solid var(--rule-2);background:var(--panel);display:grid;place-items:center;color:var(--blue-soft)}
.pt-ic svg{width:20px;height:20px}
.pw-n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;border:1.2px solid var(--rule-2);background:var(--panel);display:grid;place-items:center;font-size:.8rem;color:var(--muted);transition:border-color .4s,color .4s,background .4s,box-shadow .4s}
.t-ic{flex:none;width:22px;height:22px;color:var(--blue-soft)}
.t-ic svg{width:22px;height:22px}

/* AI Readiness Audit */
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-soft);margin:0 0 12px}
.promise{margin-top:14px;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.3;color:var(--muted);max-width:40ch;letter-spacing:-.01em}
.au-h{font-size:1.05rem;margin-bottom:16px}
.au-cta{margin-top:clamp(32px,4vw,48px)}
.pw-notes{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px}
@media(min-width:860px){.pw-notes{grid-template-columns:1fr 1fr}}
.pw-notes p{margin:0;display:flex;gap:12px;align-items:flex-start;color:var(--muted);padding:2px 4px}

/* your AI transformation starts here */
.begin h2.big{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.04;letter-spacing:-.03em;max-width:none;text-wrap:balance}

/* AI Readiness Audit: how it works */
.begin .promise b{font-weight:600;color:var(--ink)}
.begin .au-intro{margin-top:clamp(18px,2.4vw,26px)}
.begin .promise{margin-top:0;max-width:none;text-wrap:pretty}
.au-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:clamp(24px,3vw,32px)}
.au-act .au-cta,.au-act .hiw-h{margin:0}
.hiw-h{font-weight:700;letter-spacing:normal}   /* now an h3; keeps the bold, normal spacing it had as an h4 */
.hiw-in>.hiw{margin-top:clamp(24px,3vw,32px)}
.hiw-tg{display:inline-flex;align-items:center;gap:12px;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hiw-tg:hover .tc-ic,.hiw-tg[aria-expanded="true"] .tc-ic{border-color:var(--blue-soft);color:var(--blue-soft)}
.hiw-tg[aria-expanded="true"] .tc-v{transform:scaleY(0)}
.hiw-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.hiw-body.open{grid-template-rows:1fr}
.hiw-in{min-height:0;overflow:hidden}
.hiw-body:not(.open) .hiw-in{visibility:hidden;transition:visibility 0s .45s}
@media (prefers-reduced-motion:reduce){.hiw-body{transition:none}}
.hiw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:860px){.hiw{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.hs{position:relative;min-width:0;display:flex;flex-direction:column;gap:12px}
.hs.on .pw-n{border-color:var(--blue-soft);color:var(--blue-soft);background:linear-gradient(rgba(var(--accent),.12),rgba(var(--accent),.12)),var(--panel);box-shadow:0 0 10px rgba(var(--glow),.45)}
.hs-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hs-card{flex:1;border:1px solid var(--rule-2);border-radius:18px;background:var(--viz-bg);padding:20px;transition:border-color .5s}
.hs.on .hs-card{border-color:rgba(var(--accent),.45)}
.hs-card b{display:block;margin-top:14px;font-size:1.1rem;font-weight:600;color:var(--ink)}
.hs-card p{margin-top:6px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.hs-card,.hs .pw-n{transition:none}}

/* security, governance and secure AI: one panel */
.sec-one{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;margin-top:clamp(28px,4vw,44px);border:1px solid var(--rule-2);border-radius:22px;background:var(--viz-bg);padding:clamp(20px,3vw,40px)}
@media(min-width:900px){.sec-one{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}}
.sp-list{list-style:none;margin:0;padding:0;display:grid}
.sp-list li + li{border-top:1px solid var(--rule)}
.sp{width:100%;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;text-align:left;padding:18px 0 18px 14px;position:relative;color:inherit}
.sp::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:transparent;transition:background .4s,box-shadow .4s}
.sp.on::before{background:var(--blue-soft);box-shadow:0 0 8px rgba(var(--glow),.5)}
.sp .pt-ic{transition:border-color .4s,box-shadow .4s}
.sp.on .pt-ic{border-color:var(--blue-soft);box-shadow:0 0 10px rgba(var(--glow),.35)}
.sp-t b{display:block;font-weight:600;color:var(--ink);font-size:1.08rem;line-height:1.3}
.sp-t span{display:block;margin-top:4px;color:var(--muted);transition:color .4s;text-wrap:pretty}
.sp:not(.on) .sp-t span{color:var(--faint)}
.sec-fig{margin:0;max-width:440px;width:100%;justify-self:center}
@media(max-width:899px){.sec-fig{order:-1;max-width:360px}}
.ill .lr{fill:rgba(var(--accent),.02);stroke:var(--rule-2);stroke-width:1.3;transition:stroke .45s,fill .45s,filter .45s}
.ill .ll{font-size:9.5px;font-weight:600;letter-spacing:.09em;fill:var(--faint);transition:fill .45s}
.ill .lyr.on .lr{stroke:var(--blue-soft);fill:rgba(var(--accent),.06);filter:drop-shadow(0 0 7px rgba(var(--glow),.55))}
.ill .lyr.on .ll{fill:var(--ink)}
.ill .coreb{fill:rgba(var(--accent),.14);stroke:var(--blue-soft);stroke-width:1.4}
.ill .coret{fill:var(--ink);font-size:12px}
.ill .spark{fill:rgb(var(--spark));filter:drop-shadow(0 0 5px rgba(var(--glow),.9))}
@media (prefers-reduced-motion:reduce){.sp::before,.sp .pt-ic,.sp-t span,.ill .lr,.ill .ll{transition:none}}

/* AI solutions and corporate AI training: shared heading scale */
.solutions h2,.train h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.025em;max-width:22ch;text-wrap:balance}

/* AI Solutions: six illustrated cards, lit in turn */
.pc-grid{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.pc-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(min-width:960px){.pc-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.pc-grid li{display:flex}
.pc{width:100%;display:flex;flex-direction:column;gap:18px;text-align:left;color:inherit;padding:clamp(16px,1.8vw,22px);border:1px solid var(--rule-2);border-radius:18px;background:var(--viz-bg);transition:border-color .45s,box-shadow .45s}
.pc.on{border-color:var(--blue-soft);box-shadow:0 0 0 1px var(--blue-soft),0 0 22px rgba(var(--glow),.18)}
.pc-ill{display:block;border:1px solid var(--rule);border-radius:12px;background:rgba(var(--accent),.03);padding:10px 8px}
.pc-ill svg{display:block;width:100%;height:auto;overflow:visible}
.pc .sp-t b{font-size:1.06rem}
.pc .sp-t span{margin-top:6px}
.pc-ill .o{fill:none;stroke:var(--rule-2);stroke-width:1.4;transition:stroke .45s,filter .45s,fill .45s}
.pc-ill .ln{fill:none;stroke:var(--dim2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.pc-ill .flow{stroke-dasharray:4 4}
.pc-ill .dot{fill:var(--faint);transition:fill .45s}
.pc-ill .pp circle,.pc-ill .pp path{fill:none;stroke:var(--faint);stroke-width:1.5;stroke-linecap:round;transition:stroke .45s}
.pc-ill .chips rect{fill:var(--panel);stroke:var(--rule-2);stroke-width:1.3;transition:stroke .45s,fill .45s}
.pc.on .pc-ill .o,.pc.on .pc-ill .ln{stroke:var(--blue-soft)}
.pc.on .pc-ill .dot{fill:var(--blue-soft)}
.pc.on .pc-ill .flow{animation:pcFlow 1s linear infinite}
.pc.on .pc-ill .us circle,.pc.on .pc-ill .us path{stroke:var(--blue-soft)}
.pc.on .pc-ill .hub,.pc.on .pc-ill .hex,.pc.on .pc-ill .shield{fill:rgba(var(--accent),.1);filter:drop-shadow(0 0 6px rgba(var(--glow),.5))}
.pc.on .pc-ill .chips rect{stroke:var(--blue-soft);animation:pcChip 1.8s ease-in-out infinite}
.pc.on .pc-ill .chips rect:nth-child(2){animation-delay:.2s}.pc.on .pc-ill .chips rect:nth-child(3){animation-delay:.4s}
.pc.on .pc-ill .ring{stroke-dasharray:4 5;animation:pcFlow 1.6s linear infinite}
@keyframes pcFlow{to{stroke-dashoffset:-16}}
@keyframes pcChip{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media(max-width:599px){
  .pc{flex-direction:row;align-items:center;gap:14px;padding:12px 14px 12px 12px}
  .pc-ill{flex:none;width:112px;padding:6px 4px}
  .pc .sp-t b{font-size:1rem}
  .pc .sp-t span{font-size:.92rem;margin-top:3px}
}
@media (prefers-reduced-motion:reduce){.pc,.pc-ill *{transition:none!important;animation:none!important}}
.pc::before{display:none}
.pc-grid .pc .sp-t span{color:var(--muted)}
/* bold icon picture */
.pc-ill .bd{fill:rgba(var(--accent),.04);stroke:var(--rule);stroke-width:1;transition:fill .45s}
.pc-ill .du{fill:rgba(var(--accent),.07);stroke:none;transition:fill .45s}
.pc-ill .st{fill:none;stroke:var(--faint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s}
.pc-ill .ic{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pc.on .pc-ill .bd{fill:rgba(var(--accent),.08)}
.pc.on .pc-ill .du{fill:rgba(var(--accent),.2)}
.pc.on .pc-ill .st{stroke:var(--blue-soft)}
.pc.on .pc-ill .du.us{fill:rgba(var(--accent),.36)}
.pc.on .pc-ill .ic{transform:scale(1.06)}
/* flowing-line pictures */
.pc-ill .fl{fill:none;stroke:var(--rule-2);stroke-width:1.5;stroke-linecap:round;transition:stroke .45s}
.pc-ill .flp{fill:none;stroke:var(--blue-soft);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:16 260;stroke-dashoffset:276;opacity:0;transition:opacity .45s}
.pc.on .pc-ill .fl{stroke:rgba(var(--accent),.38)}
.pc.on .pc-ill .flp{opacity:1;filter:drop-shadow(0 0 4px rgba(var(--glow),.8));animation:flRun 2.2s linear infinite;animation-delay:calc(var(--k,0) * -.37s)}
@keyframes flRun{from{stroke-dashoffset:276}to{stroke-dashoffset:0}}

/* Corporate AI training: photo cover and four text cards */
@media(min-width:1100px){.pc-grid.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px) and (max-width:1099px){.pc-grid.four{grid-template-columns:repeat(2,1fr)}}
.tr-cover{min-height:clamp(380px,40vw,540px)}
.tr-cover .cc-img{object-position:72% 40%}
.tr-cover::before{background:linear-gradient(90deg,rgba(5,7,12,.86) 0%,rgba(5,7,12,.7) 38%,rgba(5,7,12,.22) 66%,rgba(5,7,12,0) 100%),linear-gradient(0deg,rgba(5,7,12,.62) 0%,rgba(5,7,12,.16) 70%,rgba(5,7,12,0) 100%)}
@media(max-width:700px){.tr-cover{min-height:clamp(308px,86.8vw,378px)}.tr-cover .cc-img{object-position:78% 40%}
  .tr-cover::before{background:linear-gradient(0deg,rgba(5,7,12,.95) 0%,rgba(5,7,12,.86) 50%,rgba(5,7,12,.62) 80%,rgba(5,7,12,.4) 100%)}}
.pc-grid.tr-cards{align-items:start}
.tr-cards .tc.pc{flex-direction:column;align-items:stretch;padding:0;gap:0}
.tc-h{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:clamp(18px,2vw,24px);border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:18px;min-height:calc(2.7em + 2 * clamp(18px,2vw,24px))}
.tc-h b{font-weight:600;color:var(--ink);font-size:var(--fs-body);line-height:1.35}
.tc-ic{flex:none;width:30px;height:30px;border-radius:50%;border:1.2px solid var(--rule-2);display:grid;place-items:center;color:var(--ink);background:var(--panel);transition:border-color .3s,background .3s,color .3s}
.tc-ic svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tc-ic .tc-v{transform-box:fill-box;transform-origin:center;transition:transform .3s ease}
.tc-h:hover .tc-ic,.tc.open .tc-ic{border-color:var(--blue-soft);color:var(--blue-soft)}
.tc.open{border-color:rgba(var(--accent),.45)}
.tc.open .tc-v{transform:scaleY(0)}
.tc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.tc.open .tc-body{grid-template-rows:1fr}
.tc-body>div{overflow:hidden}
.tc-body p{margin:0;padding:0 clamp(18px,2vw,24px) clamp(18px,2vw,24px);color:var(--muted);font-size:var(--fs-body)}
@media (prefers-reduced-motion:reduce){.tc-body,.tc-ic,.tc-ic .tc-v{transition:none}}

/* contact */
.contact h2{max-width:none;text-wrap:balance}
.contact .form{margin-top:clamp(28px,3.4vw,40px)}
.form{display:grid;gap:16px;width:100%}
.field{display:grid;gap:8px}
.field label{font-size:.95rem;color:var(--muted)}
.field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--rule-2);color:var(--ink);font:inherit;padding:12px 14px;min-height:44px;border-radius:0;transition:border-color .2s,background .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--blue-soft);background:rgba(var(--glow),.06);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
.form .msg{font-size:.92rem;color:var(--muted);min-height:1.4em}
.form .msg a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* honeypot: moved off-screen rather than display:none, so bots still find and fill it */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* thank-you pop-up after a request is sent; never set display on it, or it would stop hiding when closed */
dialog.thanks{width:min(440px,100vw - 2 * var(--gutter));max-width:none;margin:auto;padding:clamp(24px,4vw,36px);border:1px solid var(--rule-2);border-radius:18px;background:var(--panel);color:var(--ink);text-align:left}
dialog.thanks:not([open]){display:none}   /* keeps it hidden in browsers that don't know dialog */
dialog.thanks p{color:var(--ink);line-height:1.35}
dialog.thanks form{margin:clamp(20px,3vw,28px) 0 0}
dialog.thanks::backdrop{background:rgba(5,7,12,.6)}   /* a literal colour: older browsers don't pass custom properties into ::backdrop */
footer{border-top:1px solid var(--rule);padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px));color:var(--faint);font-size:.9rem}
footer .wrap{display:flex;justify-content:flex-start;gap:12px 32px;flex-wrap:wrap;align-items:center}
footer .brand{color:var(--ink);gap:9px}
footer .mark{width:17px;height:17px}   /* the header mark scaled to the footer's 13px wordmark (Shehryar, 2026-10-16) */

/* ---- Type scale: four sizes only ---- */
:root{--fs-h:clamp(2rem,3.4vw,3rem);--fs-sub:clamp(1.125rem,1.67vw,1.5rem);--fs-body:1.0625rem;--fs-sm:.8125rem}
/* 1 headline */
.hero h1,.section h2,.begin h2.big,.solutions h2,.train h2,.servis .name,.case-cover .name{font-size:var(--fs-h)}
/* 2 subheading */
.hero .lead,.servis .under,.promise,.review blockquote,.thanks p{font-size:var(--fs-sub)}
/* 3 body (titles stay bold) */
body,.brand,.links,.links a,.btn,.wk h3,.wk-tiles li,.review h3,.review figcaption,.au-h,
.hs-card b,.hs-card p,.sp-t b,.sp-t span,.pc .sp-t b,.pc .sp-t span,.field label,.form .msg,
.worklabel,.pw-notes p{font-size:var(--fs-body)}
/* 4 small */
.eyebrow,.servis .case-label,.wk .n,.pw-n,.efs-lbl,.efs-cap,footer,footer *,footer .brand{font-size:var(--fs-sm)}
/* Diagram labels: labels inside drawings may be centred and scale with the drawing, but never show smaller than 13px
   on any screen (Shehryar, 2026-10-16). SVG text is sized in drawing units. --k is drawing units per screen pixel
   (viewBox width / drawn width), so 13px * --k always shows as 13px; site.js keeps --k up to date. */
.ill .q{font-size:max(13.5px,calc(13px * var(--k,1)))}
.ill .cap{font-size:max(11.5px,calc(13px * var(--k,1)))}
.ill .ll{font-size:max(9.5px,calc(13px * var(--k,1)))}
.ill .coret{font-size:max(12px,calc(13px * var(--k,1)))}
/* Until site.js runs (or without JavaScript), --k comes from these steps: each is the value at the narrowest width of its range,
   so labels stay at 13px or more across the range. site.js then sets the exact value on the drawing itself.
   The desktop steps allow for a 17px scrollbar (Windows), which takes page width but still counts in min-width. */
@media(max-width:599px){#illAna{--k:1.38}#secLayers{--k:1.04}}
@media(max-width:429px){#illAna{--k:1.46}#secLayers{--k:1.10}}
@media(max-width:411px){#illAna{--k:1.56}#secLayers{--k:1.17}}
@media(max-width:389px){#illAna{--k:1.64}#secLayers{--k:1.23}}
@media(max-width:374px){#illAna{--k:1.73}#secLayers{--k:1.30}}
@media(max-width:359px){#illAna{--k:1.84}#secLayers{--k:1.38}}
@media(max-width:343px){#illAna{--k:2.02}#secLayers{--k:1.52}}
@media(min-width:860px) and (max-width:1279px){#illAna{--k:1.12}}
@media(min-width:860px) and (max-width:1099px){#illAna{--k:1.21}}
@media(min-width:860px) and (max-width:1023px){#illAna{--k:1.46}}
@media(min-width:900px) and (max-width:919px){#secLayers{--k:1.02}}
@media(max-width:600px){.hero h1{font-size:var(--fs-h)}.pc .sp-t b{font-size:var(--fs-body)}.pc .sp-t span{font-size:var(--fs-body)}}
/* Photo covers: heading 30% larger again (after +6px); small label stays at the small size */
.case-cover h2,.case-cover .name{font-size:calc((var(--fs-h) + 6px) * 1.3)}
@media(max-width:420px){.case-cover h2,.case-cover .name{font-size:min(calc((var(--fs-h) + 6px) * 1.3),calc((100vw - 90px) / 5.5))}}
@media(max-width:480px){
  .case-cover::before{background:linear-gradient(0deg,rgba(5,7,12,.94) 0%,rgba(5,7,12,.84) 45%,rgba(5,7,12,.7) 78%,rgba(5,7,12,.6) 100%)}
  .sol-cover::before,.tr-cover::before{background:linear-gradient(0deg,rgba(5,7,12,.95) 0%,rgba(5,7,12,.88) 50%,rgba(5,7,12,.8) 80%,rgba(5,7,12,.74) 100%)}}
/* Hero network: on narrow screens it sits in its own square below the copy */
@media(max-width:959px){.stack{aspect-ratio:1/1;max-height:620px}}