/* NORVO brand guide 2026: ink, paper and one orange; one colour per service */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#0B0B0C;--graphite:#161618;--paper:#F2EFE8;--muted:#9C9993;--line:#393938;
  --orange:#FF5B1F;--orange-paper:#A8340C;
  --c-logo:#FF2D87;--c-identity:#C8FF2E;--c-motion:#FF5B1F;--c-pack:#14D9C5;--c-web:#2D5BFF;--c-app:#8A3FFC;
  --ar:"Noto Kufi Arabic","Readex Pro",system-ui,sans-serif;
  --lat:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1160px;--gutter:clamp(16px,4vw,40px);--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--ar);font-size:17px;line-height:1.8;overflow-x:clip}
html[lang=en] body{font-family:var(--lat);line-height:1.6}
::selection{background:var(--orange);color:var(--ink)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.3}
html[lang=en] h1,html[lang=en] h2{font-weight:600;letter-spacing:-.02em;line-height:1.12}
html[lang=en] h3,html[lang=en] h4{font-weight:600}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.lat{font-family:var(--lat);font-weight:500;letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:-9999px;top:10px;z-index:50;background:var(--paper);color:var(--ink);padding:8px 14px;border-radius:8px}
.skip:focus{inset-inline-start:12px}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[lang=en] .ic-arrow{transform:scaleX(-1)}

/* double-line rule under headlines */
.rule{display:block;width:56px;height:8px;margin-top:16px;background:linear-gradient(currentColor,currentColor) top/100% 4px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 1.5px no-repeat}

/* crosshair: corners of a grid layout */
.xh{position:absolute;width:18px;height:18px;pointer-events:none;opacity:.6}
.xh::before,.xh::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.xh::before{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.xh::after{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
.xh.tl{top:-9px;left:-9px}.xh.tr{top:-9px;right:-9px}.xh.bl{bottom:-9px;left:-9px}.xh.br{bottom:-9px;right:-9px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:block;flex:none;padding-block:8px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:26px}
.nav a{position:relative;text-decoration:none;font-size:.95rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1.5px;background:var(--paper);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
html[lang=en] .nav a::after{transform-origin:left}
.nav a:hover{color:var(--paper)}
.nav a:hover::after{transform:scaleX(1)}
.actions{display:flex;align-items:center;gap:10px}
@media (max-width:920px){.nav{display:none}}
@media (max-width:420px){.brand img{height:34px}}

/* CTA pills: magnetic, with a fill that grows from the cursor */
.btn{--btn-bg:transparent;--btn-fg:var(--paper);--btn-bd:rgba(242,239,232,.4);--fill:var(--paper);--fill-fg:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:999px;font:inherit;font-weight:700;font-size:1rem;line-height:1.5;text-decoration:none;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .6s var(--ease),scale .15s ease,color .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
html[lang=en] .btn{font-weight:500}
.btn::before{content:"";position:absolute;z-index:0;left:var(--fx,50%);top:var(--fy,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill);transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--ease);pointer-events:none}
.btn-in{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;transform:translate3d(calc(var(--mx,0px)*.5),calc(var(--my,0px)*.5),0);transition:transform .6s var(--ease)}
.btn.is-near{transition:transform .2s ease-out,scale .15s ease,color .3s,border-color .3s}
.btn.is-near .btn-in{transition:transform .2s ease-out}
.btn.is-hot,.btn:focus-visible{color:var(--fill-fg);border-color:var(--fill)}
.btn.is-hot::before,.btn:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
.btn:active{scale:.95}
.btn-orange{--btn-bg:var(--orange);--btn-fg:var(--ink);--btn-bd:var(--orange);--fill:var(--paper);--fill-fg:var(--ink)}
.btn-paper{--btn-bg:var(--paper);--btn-fg:var(--ink);--btn-bd:var(--paper);--fill:var(--orange);--fill-fg:var(--ink)}
.btn-sm{padding:7px 18px;font-size:.92rem}
.lang{--btn-bd:var(--line);padding:6px 15px;font-size:.9rem;font-weight:500}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--paper);padding-block:10px;border-bottom:1.5px solid rgba(242,239,232,.35);transition:border-color .25s,gap .25s var(--ease)}
html[lang=en] .text-link{font-weight:500}
.text-link:hover{border-color:var(--paper);gap:12px}
.text-link .ic{width:18px;height:18px}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(242,239,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,232,.07) 1px,transparent 1px);background-size:48px 48px;background-position:center top}
.hero-frame{position:absolute;inset:32px;pointer-events:none}
.xhair{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;direction:ltr}
.hero.is-tracking .xhair{opacity:1}
.xc-v,.xc-h,.xc-node,.xc-label{position:absolute;left:0;top:0;transition:transform .14s ease-out}
.xc-v{bottom:0;width:0;border-left:1px dashed rgba(242,239,232,.35);transform:translateX(var(--x,0px))}
.xc-h{right:0;height:0;border-top:1px dashed rgba(242,239,232,.35);transform:translateY(var(--y,0px))}
.xc-node{width:18px;height:18px;transform:translate(calc(var(--x,0px) - 9px),calc(var(--y,0px) - 9px))}
.xc-node::before,.xc-node::after{content:"";position:absolute;background:var(--paper)}
.xc-node::before{left:0;right:0;top:8px;height:2px}
.xc-node::after{top:0;bottom:0;left:8px;width:2px}
.xc-label{font-family:var(--mono);font-size:11px;line-height:1;color:var(--muted);white-space:pre;transform:translate(calc(var(--x,0px) + 14px),calc(var(--y,0px) + 12px))}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(56px,8vw,104px)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.3}
html[lang=en] .hero h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.08}
.hero h1 .o{color:var(--orange)}
.slam{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .slam{animation:slam .34s cubic-bezier(.2,.7,.2,1) both}
  .slam:nth-child(2){animation-delay:.22s}
}
@keyframes slam{from{opacity:0;transform:scale(1.22)}55%{opacity:1}to{opacity:1;transform:scale(1)}}
.lede{margin-top:22px;font-size:clamp(1.05rem,1.6vw,1.18rem);color:var(--muted);max-width:32em}
.hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.mark{width:100%;max-width:540px;height:auto;justify-self:center;direction:ltr;overflow:visible;transform:perspective(1100px) rotateY(calc(var(--px,0)*9deg)) rotateX(calc(var(--py,0)*-7deg));transition:transform .6s var(--ease)}
.guides,.n-layer,.o-layer{transition:transform .6s var(--ease)}
.guides{transform:translate(calc(var(--px,0)*-24px),calc(var(--py,0)*-20px))}
.n-layer{transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*8px))}
.o-layer{transform:translate(calc(var(--px,0)*24px),calc(var(--py,0)*20px))}
.cl{fill:none;stroke:var(--paper);stroke-opacity:.2;stroke-width:2.4;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s cubic-bezier(.6,.1,.2,1) forwards}
  .reveal{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.65,0,.25,1) 1s forwards}
  .reveal-o{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s cubic-bezier(.65,0,.25,1) 2s forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.25s}.d3{animation-delay:.45s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.mark{max-width:380px}.hero-frame{inset:16px}}

/* sections */
.section{padding-block:clamp(64px,10vw,120px)}
.sec-head{max-width:44em;margin-bottom:clamp(32px,5vw,52px)}
.sec-head h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
.sec-head p{margin-top:18px;color:var(--muted);font-size:1.05rem}

/* services: each row in its own service colour */
.sheet{position:relative;border:1px solid var(--line);background:var(--graphite)}
.svc{--svc:var(--paper);--svc-ink:var(--ink);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(16px,3vw,32px);row-gap:4px;align-items:center;padding:26px clamp(18px,3vw,34px);transition:background-color .3s}
.svc + .svc{border-top:1px solid var(--line)}
.svc::before{content:"";position:absolute;inset-inline-start:-1px;top:-1px;bottom:-1px;width:4px;background:var(--svc);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.svc:hover,.svc:focus-within{background:#1C1C1F}
.svc:hover::before,.svc:focus-within::before{transform:scaleY(1)}
.s-logo{--svc:var(--c-logo)}.s-identity{--svc:var(--c-identity)}.s-motion{--svc:var(--c-motion)}.s-pack{--svc:var(--c-pack)}.s-web{--svc:var(--c-web);--svc-ink:var(--paper)}.s-app{--svc:var(--c-app);--svc-ink:var(--paper)}
.s-icon{grid-row:1 / span 3;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;color:var(--paper);transition:border-color .3s,color .3s}
.svc:hover .s-icon{border-color:var(--svc);color:var(--svc)}
.svc h3{font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:700;line-height:1.5}
.svc p{color:var(--muted);max-width:40em;font-size:.98rem}
.svc .ask{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.92rem;font-weight:700;text-decoration:none;color:var(--paper);border-bottom:1.5px solid var(--svc);padding-bottom:2px;transition:gap .25s var(--ease)}
html[lang=en] .svc .ask{font-weight:500}
.svc .ask:hover{gap:10px}
.svc .ask .ic{width:16px;height:16px}
.price{grid-column:3;grid-row:1 / span 3;display:grid;justify-items:center;min-width:112px;padding:10px 16px 12px;border-radius:16px;background:var(--svc);color:var(--svc-ink);line-height:1;text-align:center;transition:transform .4s var(--ease)}
.svc:hover .price{transform:translateY(-3px)}
.price .from{font-size:.8rem;font-weight:500;margin-bottom:6px;line-height:1.4}
.price .amt{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.price b{font-size:clamp(1.7rem,2.8vw,2.1rem);font-weight:800;font-variant-numeric:tabular-nums}
html[lang=en] .price b{font-weight:600}
.price .cur{font-size:.85rem;font-weight:500}
.price-quote b{font-size:clamp(1rem,1.5vw,1.12rem);font-weight:700;line-height:1.3;white-space:nowrap}
@media (max-width:720px){
  .svc{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .s-icon{grid-row:auto;width:44px;height:44px}
  .price{grid-column:1 / -1;grid-row:auto;justify-self:start;display:flex;align-items:baseline;gap:8px;padding:8px 14px}
  .price .from{margin:0}
  .svc p,.svc .ask{grid-column:1 / -1}
}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:22px clamp(18px,3vw,34px);border-top:1px solid var(--line)}
.also-label{font-weight:700;margin-inline-end:6px}
html[lang=en] .also-label{font-weight:500}
.chip{--svc:var(--paper);display:inline-flex;align-items:center;gap:8px;padding:7px 15px 7px 13px;border-radius:999px;border:1.5px solid var(--svc);text-decoration:none;font-size:.95rem;font-weight:500;transition:background-color .25s,color .25s}
.chip .ic{width:18px;height:18px;color:var(--svc)}
.chip:hover{background:var(--svc);color:var(--ink)}
.chip:hover .ic{color:var(--ink)}
.chip.s-app:hover{color:var(--paper)}.chip.s-app:hover .ic{color:var(--paper)}
.also-note{flex-basis:100%;color:var(--muted);font-size:.92rem}

/* case studies */
.cases{display:grid;gap:clamp(20px,3vw,32px)}
.case{background:#2B2D31;color:#ECECEE;border:1px solid rgba(255,255,255,.07);border-radius:28px;padding:clamp(24px,5vw,60px);display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,72px);align-items:center}
.case-id{display:flex;align-items:center;gap:16px}
.case-id img{width:64px;height:64px;object-fit:contain;border-radius:16px;flex:none}
.case h3{font-size:clamp(1.8rem,3.6vw,2.5rem);line-height:1.2}
.tag{display:inline-block;margin-top:6px;font-size:.82rem;font-weight:500;padding:2px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#A7A9AF}
.case .lead{margin-top:22px;color:#D3D4D8;font-size:1.06rem;max-width:32em}
.case h4{margin-top:28px;font-weight:500;font-size:.92rem;color:#A7A9AF}
.did{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.did li{display:flex;gap:12px;align-items:center}
.did li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--svc,var(--paper));flex:none}
.case-link{--btn-bd:rgba(255,255,255,.4);--fill:#fff;--fill-fg:#2B2D31;margin-top:30px}
.case-link .ic{width:18px;height:18px}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,22px);align-items:end;direction:ltr;padding-top:30px;perspective:1100px}
.phones figure{margin:0}
.phones figure:nth-child(2){transform:translateY(-30px)}
.phone{position:relative;aspect-ratio:9/19.5;border-radius:clamp(14px,2.4vw,26px);border:clamp(4px,.6vw,7px) solid #0D0E10;background:#3A3D42;overflow:hidden;box-shadow:0 24px 40px -22px rgba(0,0,0,.7);transform:translateY(var(--lift,0px)) rotateY(calc(var(--tx,0)*14deg)) rotateX(calc(var(--ty,0)*-10deg));transition:transform .6s var(--ease),box-shadow .4s}
.phones figure:hover .phone{--lift:-10px;box-shadow:0 34px 50px -24px rgba(0,0,0,.9)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone.failed::after{content:"MISHT";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--lat);font-size:.9rem;color:#8B8E94;letter-spacing:.12em}
.phones figcaption{margin-top:12px;font-size:.85rem;color:#A7A9AF;text-align:center;line-height:1.4}
@media (max-width:900px){.case{grid-template-columns:1fr}}
.work-note{margin-top:20px;color:var(--muted);font-size:.95rem}

/* process */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps li{position:relative;padding-top:38px;border-top:1px solid var(--line)}
.num{position:absolute;top:-19px;inset-inline-start:0;min-width:38px;height:38px;padding-inline:8px;border-radius:999px;background:var(--ink);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:.85rem;line-height:1;transition:background-color .3s,color .3s,border-color .3s}
.steps li:hover .num{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.steps h3{font-size:1.12rem;font-weight:700;line-height:1.5;margin-bottom:6px}
.steps p{color:var(--muted);font-size:.98rem}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:52px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* faq */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
html[lang=en] .faq summary{font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;color:var(--muted);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;color:var(--muted);max-width:40em}

/* contact: paper ground, ink marks */
.contact{position:relative;background:var(--paper);color:var(--ink);overflow:hidden}
.contact .wrap{position:relative;padding-block:clamp(80px,11vw,136px);display:grid;gap:22px;justify-items:start}
.contact h2{font-size:clamp(2.2rem,5vw,3.4rem)}
.contact p{color:#4B4944;max-width:32em;font-size:1.08rem}
.contact-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.contact .btn{--btn-fg:var(--ink);--btn-bd:rgba(11,11,12,.3);--fill:var(--ink);--fill-fg:var(--paper)}
.contact .btn-orange{--btn-bg:var(--orange);--btn-fg:var(--ink);--btn-bd:var(--orange);--fill:var(--ink);--fill-fg:var(--paper)}
.contact :focus-visible{outline-color:var(--ink)}
.c-meta{font-size:.9rem;color:#4B4944}
.c-meta a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange-paper);text-underline-offset:5px;text-decoration-thickness:1.5px}
.c-meta .lat{letter-spacing:.12em}
.contact-mark{position:absolute;width:min(600px,78vw);inset-inline-end:-120px;bottom:-170px;pointer-events:none}
.contact-mark .cl{stroke:var(--ink);stroke-opacity:.17}
.contact .xh{color:var(--ink);opacity:.5}
@media (max-width:640px){.contact-mark{opacity:.5}}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-block:28px;font-size:.88rem;color:var(--muted)}
.foot .lat{letter-spacing:.12em;font-size:.8rem}

@media (prefers-reduced-motion:reduce){
  .btn,.btn-in,.btn::before,.mark,.guides,.n-layer,.o-layer,.phone,.price,.svc::before{transition:none!important}
}