:root{
  color-scheme:dark;
  --bg:#101112;
  --panel:#18191c;
  --ink:#f4f2eb;
  --muted:#99999f;
  --line:#ffffff20;
  --accent:#c5ff6a;
  --violet:#b7a0fc;
  --header:#101112ed}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.65 Manrope,Arial,sans-serif}
a{
  color:inherit;
  text-decoration:none}
button{
  font:inherit;
  color:inherit;
  cursor:pointer}
button,a{
  -webkit-tap-highlight-color:transparent}
button{
  border:0}
img{
  display:block;
  max-width:100%;
  height:auto}
::selection{
  background:var(--violet);
  color:#101112}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px}
.skip-link{
  position:fixed;
  top:-60px;
  left:20px;
  padding:12px;
  background:var(--accent);
  color:#111;
  z-index:100}
.skip-link:focus{
  top:12px}
.topbar{
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.3%;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
  background:var(--header);
  backdrop-filter:blur(18px)}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.7px}
.brand img{
  object-fit:contain;
  width:36px;
  height:32px}
.brand-dot{
  font-size:11px;
  vertical-align:super;
  margin-left:4px;
  color:var(--muted)}
.topnav{
  display:flex;
  gap:31px}
.topnav a{
  font-size:12px;
  color:var(--muted);
  position:relative;
  padding:10px 0}
.topnav a:hover,.topnav a[aria-current]{
  color:var(--ink)}
.topnav a[aria-current]:after{
  content:'';
  width:4px;
  height:4px;
  background:var(--accent);
  border-radius:50%;
  position:absolute;
  bottom:0;
  left:50%}
.nav-actions{
  display:flex;
  align-items:center;
  gap:18px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  padding:17px 25px;
  border:1px solid var(--line);
  font-size:12px;
  font-weight:800;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:background .25s,box-shadow .25s,transform .25s}
.button:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,#fff6 50%,transparent 80%);
  transform:translateX(-130%);
  z-index:-1;
  transition:transform .7s}
.button:hover:before{
  transform:translateX(130%)}
.button:hover .arrow{
  transform:translate(3px,-3px)}
.arrow{
  font-size:21px;
  line-height:1;
  transition:transform .25s}
.button-small{
  padding:10px 16px;
  gap:19px}
.button-primary{
  color:#111;
  background:var(--accent);
  border-color:var(--accent)}
.button-primary:hover{
  box-shadow:0 0 30px #c5ff6a24}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  font-weight:700;
  background:transparent;
  padding:0}
.text-link span{
  font-size:20px}
.text-link:hover{
  color:var(--violet)}
.eyebrow{
  font:10px/1.7 Manrope,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  margin:0 0 24px}
.muted{
  color:var(--muted)}
.gradient-text{
  background:linear-gradient(100deg,#c1abff 10%,#b5a0fb 40%,#8bc9ff 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent}
.hero-home{
  min-height:730px;
  height:calc(100svh - 88px);
  max-height:1000px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,#7c55c51b,transparent 60%)}
.hero-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(var(--line) .7px,transparent .7px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse,black,transparent 70%)}
.hero-topline,.hero-bottom{
  position:absolute;
  left:4.3%;
  right:4.3%;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.3px;
  z-index:3}
.hero-topline{
  top:30px}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:9px;
  box-shadow:0 0 12px #c5ff6a40;
  vertical-align:middle}
.hero-center{
  position:relative;
  text-align:center;
  z-index:3;
  top:19%;
  pointer-events:none}
.hero-center a{
  pointer-events:auto}
.hero-center .eyebrow{
  font-size:9px;
  color:var(--muted);
  margin-bottom:26px}
.hero-center h1{
  font-family:Unbounded,Arial,sans-serif;
  font-size:clamp(46px,5.8vw,90px);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-4px;
  margin:0}
.hero-description{
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  margin:26px auto}
.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:30px}
.hero-bottom{
  bottom:27px;
  align-items:center;
  font-size:9px}
.hero-bottom a{
  color:var(--ink)}
.hero-bottom a span{
  margin-left:18px}
.orbit{
  position:absolute;
  left:50%;
  top:50%;
  width:720px;
  height:720px;
  border:1px solid #af8ee616;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none}
.orbit-two{
  width:950px;
  height:950px;
  border-style:dashed;
  opacity:.4}
.floating-art,.floating-web,.floating-code{
  position:absolute;
  z-index:2;
  box-shadow:0 16px 45px #0005;
  animation:float 8s ease-in-out infinite}
.floating-art{
  width:170px;
  border:1px solid #ffffff30;
  background:#15171a;
  padding:7px;
  border-radius:5px;
  transition:scale .4s}
.floating-art:hover{
  scale:1.06}
.floating-art img{
  aspect-ratio:1;
  object-fit:cover}
.floating-art>span{
  display:block;
  font:8px/1.5 monospace;
  padding:9px 3px 2px;
  color:#d8d8d8}
.art-one{
  left:4.5%;
  top:14%;
  rotate:-10deg}
.art-two{
  right:4.7%;
  top:41%;
  rotate:10deg;
  animation-delay:-3s;
  width:188px}
.floating-web{
  left:7%;
  top:61%;
  width:230px;
  rotate:7deg;
  border:1px solid #ffffff2b;
  background:#151718;
  border-radius:6px;
  overflow:hidden;
  animation-delay:-5s}
.mini-browser{
  height:23px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:0 10px;
  background:#1a1d20}
.mini-browser i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:#7d8085}
.mini-browser>span{
  font:7px monospace;
  color:#a7a8ab;
  margin:auto}
.mini-site{
  padding:18px 16px 12px;
  background:linear-gradient(90deg,#0b1520d9,#10182044),url('/static/images/projects/avayusstroi.webp') center/cover}
.mini-site strong{
  font-size:18px;
  line-height:1.2;
  display:block;
  color:#fff}
.mini-site em{
  color:#ffb52a;
  font-style:normal}
.mini-site>span{
  display:block;
  font:7px monospace;
  color:#ddd;
  margin-top:22px}
.floating-code{
  right:6%;
  top:12%;
  width:213px;
  rotate:7deg;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--panel);
  animation-delay:-2s}
.floating-code>span{
  display:block;
  border-bottom:1px solid var(--line);
  padding:7px 12px;
  font:9px monospace;
  color:var(--muted)}
.floating-code i{
  float:right;
  color:var(--accent);
  font-size:7px}
.floating-code code{
  display:block;
  padding:14px;
  font:9px/1.9 monospace;
  color:#d2d2da}
.floating-code b{
  color:#b5a0fc}
.floating-code em{
  color:#bfe57b;
  font-style:normal}
.ticker{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:19px 0;
  background:#b7a0fc08}
.ticker>div{
  display:flex;
  align-items:center;
  width:max-content;
  gap:44px;
  animation:ticker 40s linear infinite}
.ticker span{
  font:600 14px Unbounded,sans-serif;
  letter-spacing:1px}
.ticker b{
  color:var(--violet);
  font-size:25px;
  line-height:1}
.section{
  max-width:1600px;
  padding:110px 4.3%;
  margin:0 auto}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-bottom:45px}
.section-heading>p,.section-heading>div>p:not(.eyebrow){
  color:var(--muted);
  font-size:12px;
  line-height:1.9}
.section-heading h2,h2{
  font-family:Unbounded,Arial,sans-serif;
  font-size:clamp(26px,3.1vw,48px);
  line-height:1.35;
  letter-spacing:-1.6px;
  font-weight:500;
  margin:0}
.section-heading .text-link{
  margin-top:10px}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px}
.project-visual{
  position:relative;
  height:410px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  padding:60px 28px 0;
  background:#2a2924;
  border:1px solid #ffffff12;
  border-radius:4px}
.workservice .project-visual{
  background:#292339}
.project-visual:after{
  content:'';
  pointer-events:none;
  position:absolute;
  inset:0;
  background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),#ffffff10,transparent);
  z-index:5}
.project-visual-top{
  position:absolute;
  left:24px;
  right:24px;
  top:21px;
  display:flex;
  justify-content:space-between;
  color:#d4d2ce;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.5px}
.browser-mockup,.app-mockup{
  width:100%;
  box-shadow:0 20px 70px #0005;
  transform:translateY(18px) rotate(-3deg);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  border:1px solid #ffffff26;
  border-radius:7px;
  overflow:hidden}
.project-card:hover .browser-mockup,.project-card:hover .app-mockup{
  transform:translateY(0) rotate(0)}
.browser-bar{
  height:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  color:#91969b;
  background:#192025;
  font-size:8px}
.browser-bar>span:first-child{
  font-size:7px;
  letter-spacing:3px}
.avs-screen{
  height:300px;
  background:linear-gradient(90deg,#07111ce8,#0b152020),url('/static/images/projects/avayusstroi.webp') center/cover;
  color:#fff}
.avs-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #ffffff20;
  padding:12px 16px;
  font-size:8px}
.avs-nav strong{
  font-size:11px}
.avs-copy{
  padding:28px 20px}
.avs-copy h3{
  font-size:28px;
  line-height:1.2;
  margin:0;
  letter-spacing:-.5px}
.avs-copy em{
  color:#ffb521;
  font-style:normal}
.avs-copy p{
  font-size:9px;
  color:#ccc;
  margin:14px 0}
.avs-copy>span{
  display:inline-block;
  background:#ffb521;
  color:#111;
  padding:8px 12px;
  font-size:8px;
  font-weight:800}
.app-mockup{
  display:flex;
  background:#f5f5f8;
  color:#20202a;
  transform:translateY(18px) rotate(3deg);
  height:330px}
.app-mockup aside{
  width:130px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
  padding:18px 12px;
  background:#171b24;
  color:#a6aebb;
  font-size:8px}
.app-mockup aside strong{
  color:white;
  font-size:11px;
  margin:-4px 0 10px}
.app-mockup aside small{
  font-size:6px;
  margin-top:auto;
  color:#b5bbc6}
.app-active{
  padding:6px;
  background:#a9baff22;
  color:#d6dfff;
  width:100%;
  border-radius:3px}
.app-main{
  flex:1;
  min-width:0;
  padding:16px}
.app-toolbar{
  display:flex;
  justify-content:space-between;
  color:#8a8c97;
  font-size:7px;
  border-bottom:1px solid #e4e4ed;
  padding-bottom:13px}
.app-main h3{
  font-size:20px;
  letter-spacing:-.7px;
  margin:20px 0 4px;
  line-height:1.3}
.app-main>p{
  font-size:8px;
  color:#85858f;
  margin:0 0 17px}
.app-tiles{
  display:flex;
  gap:9px}
.app-tiles>div{
  width:50%;
  padding:9px;
  background:white;
  border:1px solid #e7e7ed;
  border-radius:5px}
.app-tiles span{
  color:#8c80da}
.app-tiles strong,.app-tiles small{
  display:block;
  font-size:8px}
.app-tiles small{
  font-size:6px;
  color:#9898a1;
  margin-top:4px}
.app-schedule{
  margin-top:13px;
  background:white;
  border:1px solid #e7e7ed;
  border-radius:5px;
  padding:10px;
  font-size:8px}
.app-schedule small{
  float:right;
  color:#91919b;
  font-size:6px}
.app-schedule i{
  display:block;
  height:9px;
  margin-top:9px;
  border-radius:2px;
  width:75%;
  background:linear-gradient(90deg,#bcb0ef88 40%,transparent 40%,transparent 44%,#bcb0ef88 44%)}
.app-schedule i:nth-child(3){
  width:90%;
  background:#cde3d8}
.app-schedule i:nth-child(4){
  width:60%}
.project-open{
  position:absolute;
  right:17px;
  bottom:17px;
  width:42px;
  height:42px;
  background:var(--ink);
  color:var(--bg);
  border-radius:50%;
  z-index:6;
  font-size:22px;
  transition:rotate .3s,background .3s}
.project-open:hover{
  rotate:45deg;
  background:var(--accent);
  color:#111}
.project-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:24px}
.project-info .eyebrow{
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted);
  margin:0 0 5px}
.project-info h3{
  font-size:24px;
  margin:0;
  letter-spacing:-.7px}
.project-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px}
.project-tags span{
  border:1px solid var(--line);
  border-radius:30px;
  font-size:8px;
  padding:5px 9px}
.project-description{
  color:var(--muted);
  font-size:12px;
  max-width:440px;
  line-height:1.9;
  margin:17px 0}
.project-links{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  gap:10px}
.project-links>a{
  font-size:10px;
  color:var(--muted)}
.design-section{
  border-block:1px solid var(--line);
  background:#ffffff02;
  max-width:none}
.serif-text{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.4em;
  color:var(--violet);
  line-height:1}
.art-preview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px}
.art-card{
  text-align:left;
  background:none;
  padding:0;
  min-width:0}
.art-image{
  overflow:hidden;
  position:relative;
  background:var(--panel);
  border-radius:3px}
.art-image img{
  aspect-ratio:1;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .6s}
.art-card:hover img{
  transform:scale(1.06);
  filter:saturate(1.15)}
.art-expand{
  position:absolute;
  bottom:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  background:#111b;
  color:white;
  border:1px solid #fff4;
  border-radius:50%;
  opacity:0;
  transform:translateY(10px);
  transition:.25s}
.art-card:hover .art-expand,.art-card:focus-visible .art-expand{
  opacity:1;
  transform:none}
.art-caption{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:13px}
.art-caption strong{
  font-weight:600;
  font-size:11px}
.art-caption>span{
  color:var(--muted);
  font-size:8px;
  text-align:right}
.design-credit{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:9px/1.6 monospace;
  margin-top:30px;
  letter-spacing:1px}
.about-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  padding-block:140px}
.about-heading h2{
  font-size:clamp(26px,2.8vw,43px)}
.about-copy>p:first-child{
  font-size:20px;
  line-height:1.7;
  margin:0 0 22px}
.about-copy>.muted{
  font-size:13px;
  line-height:1.9}
.fact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  border-top:1px solid var(--line);
  margin-top:35px;
  padding-top:25px}
.fact-grid strong{
  font:500 43px Unbounded,sans-serif;
  color:var(--violet);
  display:block}
.fact-grid span{
  font-size:9px;
  line-height:1.7;
  color:var(--muted);
  display:block;
  margin-top:10px}
.services-section{
  padding-top:20px}
.service-row{
  display:grid;
  grid-template-columns:40px 1fr 1fr 45px;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--line);
  padding:34px 0;
  transition:padding .4s,color .3s}
.service-row:last-child{
  border-bottom:1px solid var(--line)}
.service-row:hover{
  padding-inline:15px;
  color:var(--violet)}
.service-number{
  font:10px monospace;
  color:var(--muted)}
.service-row h3{
  font-size:23px;
  font-weight:500;
  letter-spacing:-.6px;
  margin:0}
.service-row p{
  font-size:10px;
  color:var(--muted);
  text-align:right}
.service-arrow{
  font-size:34px;
  text-align:right}
.process-section{
  padding-top:50px}
.process-section h2{
  font-size:clamp(22px,2.5vw,36px)}
.process-grid,.offer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px}
.process-grid article{
  border-top:1px solid var(--line);
  padding-top:22px}
.process-grid article>span,.offer-grid article>span{
  color:var(--violet);
  font-size:10px}
.process-grid h3,.offer-grid h3{
  font-size:21px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:28px 0 15px}
.process-grid p,.offer-grid p{
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  max-width:330px}
.contact-section{
  margin:25px 4.3% 0;
  padding:35px 42px 45px;
  background:#c1a6f1;
  color:#17111f;
  border-radius:4px}
.contact-top{
  display:flex;
  justify-content:space-between;
  align-items:center}
.contact-top .eyebrow{
  margin:0;
  font-size:9px}
.contact-top>span{
  font:9px monospace;
  letter-spacing:1px}
.contact-top .status-dot{
  background:#362548}
.contact-section h2{
  font-size:clamp(40px,6.6vw,100px);
  line-height:1.2;
  letter-spacing:-4px;
  margin:50px 0}
.contact-section h2 a{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #17111f55;
  width:fit-content;
  min-width:85%}
.contact-section h2 a span{
  transition:transform .3s;
  margin-left:30px}
.contact-section h2 a:hover span{
  transform:translate(10px,-10px)}
.contact-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px}
.contact-bottom>p{
  font-size:12px;
  margin:0}
.contact-links{
  display:flex;
  gap:40px}
.contact-links a{
  font-size:13px;
  font-weight:700}
.contact-links span{
  display:block;
  font-size:9px;
  font-weight:400;
  margin-top:5px}
.contact-links a:hover{
  text-decoration:underline}
.footer{
  padding:35px 4.3%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:var(--muted)}
.footer-brand{
  font-size:14px;
  color:var(--ink);
  font-weight:800}
.service-hero{
  padding-top:85px;
  padding-bottom:65px;
  background:radial-gradient(ellipse at 70% 40%,#b69be812,transparent 65%)}
.service-hero h1{
  font:500 clamp(38px,5vw,76px)/1.3 Unbounded,sans-serif;
  letter-spacing:-3px;
  max-width:1050px;
  margin:0 0 38px}
.page-design .service-hero h1{
  max-width:950px;
  color:var(--violet)}
.service-hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:50px}
.service-hero-bottom p{
  color:var(--muted);
  font-size:15px;
  max-width:600px}
.service-work,.full-art-section{
  padding-top:40px}
.full-art-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px 25px}
.full-art-grid .art-card:nth-child(1){
  grid-column:span 2;
  grid-row:span 2}
.full-art-grid .art-card:nth-child(1) .art-image{
  height:calc(100% - 37px)}
.full-art-grid .art-card:nth-child(1) img{
  height:100%;
  object-fit:cover}
.full-art-grid .art-card:nth-child(6){
  grid-column:span 2;
  grid-row:span 2}
.full-art-grid .art-card:nth-child(6) .art-image{
  height:calc(100% - 37px)}
.full-art-grid .art-card:nth-child(6) img{
  height:100%;
  object-fit:cover}
.approach{
  border-block:1px solid var(--line)}
.offer-grid{
  margin-top:50px}
.offer-grid article{
  padding:26px;
  background:var(--panel);
  border:1px solid var(--line)}
.faq{
  padding-top:30px}
.faq h2{
  margin-bottom:36px}
.faq details{
  border-bottom:1px solid var(--line);
  padding:23px 0}
.faq summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:17px;
  cursor:pointer}
.faq summary::-webkit-details-marker{
  display:none}
.faq summary>span{
  color:var(--violet);
  transition:rotate .3s}
.faq details[open] summary>span{
  rotate:45deg}
.faq details p{
  max-width:700px;
  color:var(--muted);
  font-size:13px;
  line-height:1.9}
.project-dialog{
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
  width:min(650px,90vw);
  padding:55px;
  border-radius:8px;
  max-height:85svh;
  overflow:auto}
.project-dialog::backdrop,.lightbox::backdrop{
  background:#08090bea;
  backdrop-filter:blur(12px)}
.project-dialog h2{
  font-size:32px;
  overflow-wrap:anywhere}
.project-dialog>p:not(.eyebrow),.project-dialog li{
  color:var(--muted);
  font-size:13px;
  line-height:1.9}
.project-dialog ul{
  padding-left:20px;
  margin-block:25px}
.project-dialog li{
  margin-bottom:12px}
.dialog-close{
  position:absolute;
  right:18px;
  top:12px;
  background:transparent;
  font-size:30px;
  z-index:2}
.lightbox{
  padding:30px 65px;
  background:transparent;
  border:0;
  color:white;
  width:100vw;
  max-width:100vw;
  height:100svh;
  max-height:100svh;
  overflow:hidden}
.lightbox[open]{
  display:flex;
  align-items:center;
  justify-content:center}
.lightbox figure{
  margin:0;
  text-align:center}
.lightbox figure img{
  max-height:80svh;
  max-width:80vw;
  width:auto;
  object-fit:contain;
  margin:auto}
.lightbox figcaption{
  font-size:12px;
  margin-top:15px}
.lightbox-prev,.lightbox-next{
  position:absolute;
  top:48%;
  background:#ffffff18;
  border:1px solid #ffffff30;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:22px}
.lightbox-prev{
  left:15px}
.lightbox-next{
  right:15px}
body:has(dialog[open]){
  overflow:hidden}
.reveal{
  opacity:1;
  transform:none}
.motion-ready .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s,transform .8s}
.motion-ready .reveal.is-visible{
  opacity:1;
  transform:none}
.process-grid .reveal:nth-child(2){
  transition-delay:.1s}
.process-grid .reveal:nth-child(3){
  transition-delay:.2s}
@keyframes float{
  0%,100%{
  translate:0 0}
50%{
  translate:0 -13px}
}
@keyframes ticker{
  to{
  transform:translateX(-50%)}
}

[data-theme=light]{
  color-scheme:light;
  --bg:#f4f1e9;
  --panel:#eae6dd;
  --ink:#1b1b20;
  --muted:#67656c;
  --line:#1b1b2025;
  --header:#f4f1e9ef;
  --accent:#b3e75d;
  --violet:#7652bc}
[data-theme=light] .brand img{
  filter:invert(1)}
[data-theme=light] .floating-code code{
  color:#363540}
[data-theme=light] .floating-code b{
  color:#7652bc}
[data-theme=light] .floating-code em{
  color:#4b6e19}
[data-theme=light] .gradient-text{
  background-image:linear-gradient(100deg,#8e57c9,#6964ce,#386e9c)}
[data-theme=light] .orbit{
  border-color:#81629e25}

@media(min-width:1600px){
  .hero-center{
  top:22%}
.floating-art{
  width:210px}
.art-two{
  width:240px}
.floating-web{
  width:280px}
.mini-site{
  min-height:160px}
.floating-code{
  width:260px}
.floating-code code{
  font-size:12px}
.project-visual{
  height:480px}
}

@media(max-width:1100px){
  .topnav{
  gap:20px}
.hero-center h1{
  font-size:6vw;
  letter-spacing:-2.7px}
.floating-art{
  width:140px}
.art-two{
  width:150px;
  right:2%}
.art-one{
  left:2%;
  top:13%}
.floating-code{
  right:3%;
  width:180px;
  top:11%}
.floating-web{
  width:190px;
  left:3%;
  top:65%}
.hero-center{
  top:24%}
.project-visual{
  height:350px;
  padding-inline:16px}
.app-mockup aside{
  width:100px;
  padding-inline:8px}
.app-main{
  padding:13px}
.app-main h3{
  font-size:16px}
.project-info{
  align-items:flex-start}
.project-tags{
  max-width:150px}
.service-row h3{
  font-size:20px}
.contact-links{
  gap:20px}
.about-section{
  gap:5%}
.about-copy>p:first-child{
  font-size:17px}
.full-art-grid{
  gap:30px 18px}
}

@media(max-width:760px){
  html{
  scroll-padding-top:125px}
.topbar{
  height:112px;
  flex-wrap:wrap;
  padding:13px 5% 0;
  align-content:space-between}
.brand{
  font-size:16px}
.brand img{
  width:28px;
  height:26px}
.nav-actions{
  gap:10px}
.button-small{
  font-size:10px;
  padding:8px 10px;
  gap:12px}
.topnav{
  order:3;
  width:100%;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-block:2px}
.topnav a{
  font-size:11px;
  padding:9px 0}
.topnav a[aria-current]:after{
  bottom:3px}
.hero-home{
  height:760px;
  min-height:0;
  max-height:none}
.hero-topline{
  left:5%;
  right:5%;
  top:23px;
  font-size:9px}
.hero-topline>span:last-child{
  display:none}
.hero-center{
  top:27%}
.hero-center .eyebrow{
  font-size:7px;
  letter-spacing:1.2px;
  margin-bottom:20px}
.hero-center h1{
  font-size:clamp(29px,6.7vw,49px);
  letter-spacing:-1.8px;
  line-height:1.3}
.hero-description{
  font-size:12px;
  margin:21px 20px}
.hero-actions{
  gap:20px;
  flex-direction:column;
  margin-top:25px}
.button{
  padding:14px 21px;
  font-size:11px}
.button-small{
  padding:8px 10px;
  font-size:10px}
.hero-actions .text-link{
  font-size:10px}
.floating-art{
  width:100px;
  padding:4px}
.floating-art>span{
  font-size:5px;
  padding:5px 2px}
.art-one{
  top:10%;
  left:7%;
  rotate:-12deg}
.art-two{
  width:104px;
  right:5%;
  top:72%;
  rotate:10deg}
.floating-code{
  width:145px;
  right:6%;
  top:9%;
  rotate:8deg}
.floating-code>span{
  font-size:7px;
  padding:5px 9px}
.floating-code code{
  font-size:6px;
  padding:9px}
.floating-web{
  left:7%;
  top:73%;
  width:155px;
  rotate:-7deg}
.mini-site{
  padding:10px}
.mini-site strong{
  font-size:13px}
.mini-site>span{
  font-size:5px;
  margin-top:14px}
.mini-browser{
  height:18px}
.mini-browser>span{
  font-size:5px}
.hero-bottom{
  bottom:18px;
  justify-content:center;
  left:5%;
  right:5%}
.hero-bottom>span{
  display:none}
.hero-bottom a{
  font-size:8px}
.orbit{
  width:480px;
  height:480px;
  top:46%}
.orbit-two{
  width:630px;
  height:630px}
.ticker{
  padding:14px 0}
.ticker span{
  font-size:10px}
.ticker>div{
  gap:25px}
.ticker b{
  font-size:19px}
.section{
  padding:70px 5%}
.section-heading{
  display:block;
  margin-bottom:30px}
.section-heading>p,.section-heading>div>p:not(.eyebrow){
  font-size:11px;
  margin-top:20px}
.section-heading h2,h2{
  font-size:28px;
  letter-spacing:-1px}
.eyebrow{
  font-size:8px;
  margin-bottom:18px;
  letter-spacing:1.5px}
.project-grid{
  grid-template-columns:1fr;
  gap:45px}
.project-visual{
  height:330px;
  padding:55px 20px 0}
.browser-mockup,.app-mockup{
  max-width:560px;
  margin:auto auto 0}
.project-visual-top{
  font-size:8px;
  left:20px;
  right:20px}
.avs-screen{
  height:260px}
.avs-nav{
  font-size:6px;
  padding:12px}
.avs-nav strong{
  font-size:10px}
.avs-copy{
  padding:25px 15px}
.avs-copy h3{
  font-size:25px}
.app-mockup{
  height:290px}
.app-mockup aside{
  width:95px;
  gap:12px}
.app-main h3{
  font-size:18px}
.project-info h3{
  font-size:22px}
.project-info{
  padding-top:20px}
.project-tags{
  max-width:170px}
.project-tags span{
  font-size:7px}
.project-description{
  font-size:11px}
.project-links>a{
  font-size:9px}
.art-preview{
  grid-template-columns:repeat(2,1fr);
  gap:25px 13px}
.art-caption{
  display:block;
  margin-top:9px}
.art-caption strong{
  font-size:10px;
  display:block}
.art-caption>span{
  display:block;
  text-align:left;
  font-size:8px;
  margin-top:2px}
.art-expand{
  opacity:1;
  transform:none;
  width:27px;
  height:27px;
  bottom:8px;
  right:8px}
.design-credit{
  font-size:7px;
  letter-spacing:.5px;
  align-items:center}
.about-section{
  grid-template-columns:1fr;
  gap:30px}
.about-heading h2{
  font-size:28px}
.about-copy>p:first-child{
  font-size:18px}
.about-copy>.muted{
  font-size:12px}
.fact-grid strong{
  font-size:37px}
.fact-grid span{
  font-size:8px}
.services-section{
  padding-top:10px}
.service-row{
  grid-template-columns:20px 1fr 25px;
  gap:15px;
  padding-block:25px}
.service-row h3{
  font-size:17px;
  line-height:1.5}
.service-row p{
  grid-column:2;
  text-align:left;
  margin:0;
  font-size:9px}
.service-arrow{
  grid-column:3;
  grid-row:1 / span 2;
  font-size:27px}
.service-number{
  align-self:start;
  padding-top:5px;
  font-size:8px}
.process-section{
  padding-top:15px}
.process-section h2{
  font-size:25px}
.section-heading>span{
  display:block;
  font-size:10px;
  margin-top:15px}
.process-grid,.offer-grid{
  grid-template-columns:1fr;
  gap:25px}
.process-grid h3{
  font-size:21px;
  margin-top:18px}
.process-grid p{
  max-width:none;
  font-size:12px}
.process-grid article>span{
  font-size:9px}
.contact-section{
  margin:0 5%;
  padding:25px 22px 30px}
.contact-top>span{
  display:none}
.contact-top .eyebrow{
  font-size:7px}
.contact-section h2{
  font-size:clamp(27px,6.7vw,46px);
  letter-spacing:-1.5px;
  margin:35px 0}
.contact-section h2 a{
  min-width:100%}
.contact-section h2 a span{
  margin-left:10px}
.contact-bottom{
  display:block}
.contact-bottom>p{
  font-size:11px}
.contact-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:28px}
.contact-links a{
  font-size:11px}
.contact-links span{
  font-size:8px}
.contact-links>a:last-child{
  grid-column:span 2}
.footer{
  padding:25px 5%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  font-size:8px}
.footer>span:nth-child(2){
  grid-row:2;
  grid-column:span 2}
.footer>span:nth-child(3){
  grid-row:3}
.footer>a:last-child{
  grid-row:3;
  grid-column:2}
.service-hero{
  padding-top:55px;
  padding-bottom:35px}
.service-hero h1{
  font-size:clamp(30px,7vw,48px);
  letter-spacing:-1.5px;
  line-height:1.35;
  margin-bottom:25px}
.service-hero-bottom{
  display:block}
.service-hero-bottom p{
  font-size:13px}
.service-hero-bottom .button{
  margin-top:15px}
.service-work,.full-art-section{
  padding-top:25px}
.full-art-grid{
  grid-template-columns:1fr 1fr;
  gap:28px 14px}
.full-art-grid .art-card:nth-child(1),.full-art-grid .art-card:nth-child(6){
  grid-column:span 1;
  grid-row:span 1}
.full-art-grid .art-card:nth-child(1) .art-image,.full-art-grid .art-card:nth-child(6) .art-image{
  height:auto}
.full-art-grid .art-card:nth-child(1) img,.full-art-grid .art-card:nth-child(6) img{
  height:auto}
.offer-grid{
  margin-top:30px}
.offer-grid article{
  padding:24px}
.offer-grid h3{
  margin-top:18px}
.faq{
  padding-top:20px}
.faq summary{
  font-size:14px}
.faq details p{
  font-size:12px}
.project-dialog{
  padding:45px 25px 30px}
.project-dialog h2{
  font-size:25px}
.project-dialog li,.project-dialog>p:not(.eyebrow){
  font-size:12px}
.lightbox{
  padding:40px}
.lightbox figure img{
  max-width:82vw}
.lightbox-prev,.lightbox-next{
  width:30px;
  height:30px;
  font-size:18px}
.lightbox-prev{
  left:4px}
.lightbox-next{
  right:4px}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*:before,*:after{
  animation:none!important;
  transition:none!important}
.motion-ready .reveal{
  opacity:1;
  transform:none}
}



/* Sales content, real media and compact navigation. */
.hero-description { max-width: 590px; padding-inline: 20px; }
.hero-promises { display:flex; justify-content:center; gap:22px; margin-top:24px; color:var(--muted); font-size:9px; }
.hero-promises span::before { content:'✓'; color:var(--accent); margin-right:7px; }
.topnav { align-items:center; gap:25px; }
.nav-toggle { display:none; }
.service-assurance { color:var(--muted); font-size:10px; margin-top:28px; }
.art-image img { object-fit:contain; }
.full-art-grid .art-card:nth-child(1) img,
.full-art-grid .art-card:nth-child(6) img { object-fit:contain; }
.media-section { border-top:1px solid var(--line); }
.media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.motion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.media-card { margin:0; min-width:0; }
.media-frame { height:460px; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#08090b; border:1px solid var(--line); border-radius:4px; }
.media-frame img, .media-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.motion-grid .media-frame { height:500px; background:radial-gradient(ellipse at center,#24222a,#08090b 80%); }
.media-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 15px; margin-top:15px; }
.media-caption strong { font-size:12px; font-weight:600; }
.media-caption span { font-size:9px; color:var(--muted); }
.motion-section { padding-top:75px; }
.ownership-section { border-top:1px solid var(--line); background:radial-gradient(ellipse at 15% 50%,#b7a0fc0c,transparent 65%); }
.ownership-body { display:grid; grid-template-columns:1fr 1fr; gap:9%; }
.ownership-copy > p:first-child { font-size:20px; line-height:1.8; margin:0 0 22px; }
.ownership-copy > .muted { font-size:13px; line-height:1.9; }
.ownership-copy .button { margin-top:20px; }
.ownership-points article { display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line); }
.ownership-points article > span { color:var(--violet); font:11px monospace; padding-top:6px; }
.ownership-points article:first-child { padding-top:0; border-top:0; }
.ownership-points h3 { margin:0 0 8px; font-size:19px; font-weight:600; }
.ownership-points p { margin:0; color:var(--muted); font-size:12px; }
.contact-section h2 { font-size:clamp(34px,5.8vw,88px); }
.contact-bottom > div:first-child > p { font-size:12px; margin:0; }
.contact-bottom .payment-note { margin-top:18px !important; color:#392d47; font-size:10px !important; }
.contact-links { gap:26px; }
.project-links > a { max-width:65%; text-align:right; }
@media (max-width:1100px) {
  .topnav { gap:18px; }
  .media-frame { height:390px; }
  .motion-grid .media-frame { height:460px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:108px; }
  .topbar { height:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:56px 34px; padding:0 5%; align-content:normal; align-items:center; transition:grid-template-rows .3s ease; overflow-anchor:none; }
  .brand { grid-column:1; grid-row:1; font-size:15px; gap:7px; min-width:0; width:fit-content; }
  .brand img { width:24px; height:24px; }
  .brand-dot { font-size:8px; margin-left:2px; }
  .nav-actions { grid-column:2; grid-row:1; gap:8px; }
  .nav-actions .button-small { font-size:9px; padding:8px 10px; gap:11px; }
  .nav-actions .arrow { font-size:17px; }
  .nav-toggle { display:flex; width:25px; height:32px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:transparent; padding:4px; }
  .nav-toggle span { display:block; height:1px; width:17px; background:var(--ink); transition:transform .3s; }
  .nav-toggle span:first-child { transform:translateY(3px) rotate(45deg); }
  .nav-toggle span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .is-nav-collapsed .nav-toggle span { transform:none; }
  .topnav { grid-column:1 / -1; grid-row:2; margin:0; padding:0; gap:8px; width:100%; max-height:34px; align-self:stretch; align-items:center; opacity:1; overflow:hidden; transform:translateY(0); transition:max-height .3s,opacity .2s,transform .3s,border-color .2s; }
  .topnav a { font-size:10px; padding:7px 0; white-space:nowrap; }
  .topnav a[aria-current]::after { bottom:1px; }
  .topbar.is-nav-collapsed { grid-template-rows:56px 0px; }
  .is-nav-collapsed .topnav { max-height:0; opacity:0; transform:translateY(-8px); border-color:transparent; pointer-events:none; }
  .hero-home { height:770px; }
  .hero-center { top:26%; }
  .hero-description { font-size:12px; margin:20px auto; padding-inline:25px; max-width:420px; }
  .hero-description .desktop-break { display:none; }
  .hero-promises { gap:12px; font-size:7px; margin-top:20px; padding-inline:15px; }
  .hero-promises span::before { margin-right:4px; }
  .hero-actions { gap:17px; }
  .art-two { top:76%; }
  .floating-web { top:77%; }
  .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 14px; }
  .media-grid .media-card:last-child { grid-column:1 / -1; }
  .media-frame { height:auto; aspect-ratio:9 / 16; }
  .media-grid .media-card:last-child .media-frame { height:420px; aspect-ratio:auto; }
  .motion-grid { gap:14px; }
  .motion-grid .media-frame { height:auto; aspect-ratio:464 / 848; }
  .media-caption { display:block; margin-top:10px; }
  .media-caption strong { display:block; font-size:10px; }
  .media-caption span { display:block; margin-top:3px; font-size:8px; }
  .motion-section { padding-top:60px; }
  .media-section .design-credit { align-items:flex-start; }
  .media-section .design-credit .text-link { font-size:9px; gap:10px; text-align:right; }
  .service-assurance { font-size:9px; margin-top:22px; }
  .ownership-body { grid-template-columns:1fr; gap:36px; }
  .ownership-copy > p:first-child { font-size:17px; }
  .ownership-copy > .muted { font-size:12px; }
  .ownership-points h3 { font-size:17px; }
  .ownership-points p { font-size:11px; }
  .contact-section h2 { font-size:clamp(26px,6.2vw,44px); }
  .contact-bottom > div:first-child > p { font-size:11px; }
  .contact-bottom .payment-note { font-size:9px !important; }
  .contact-links { gap:22px; }
  .project-links > a { font-size:9px; }
}
@media (max-width:350px) {
  .brand { font-size:13px; gap:5px; }
  .brand img { width:22px; }
  .nav-actions .button-small { gap:6px; padding:8px; font-size:8px; }
  .nav-actions { gap:5px; }
  .topnav a { font-size:9px; }
  .hero-promises { gap:8px; font-size:6px; }
  .hero-center h1 { font-size:27px; }
}
@media (prefers-reduced-motion:reduce) {
  .topbar,.topnav,.nav-toggle span { transition:none; }
}


/* Drawn icons stay monochrome on iOS; no emoji glyphs are used. */
.icon-arrow { display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.12em; }
.project-open .icon-arrow,.lightbox-prev .icon-arrow,.lightbox-next .icon-arrow { vertical-align:middle; }
.contact-links .icon-arrow { display:inline-block; margin-left:5px; }
.floating-art video { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:1px; }
video[data-motion-preview] { pointer-events:none; }
video[data-motion-preview]::-webkit-media-controls { display:none !important; }
video[data-motion-preview]::-webkit-media-controls-start-playback-button { display:none !important; }
@media (max-width:760px) {
  /* Keep the header's footprint constant: menu animation cannot trigger scroll anchoring. */
  .topbar,.topbar.is-nav-collapsed { height:56px; grid-template-rows:56px; transition:none; }
  .topnav { position:absolute; top:100%; left:0; right:0; width:100%; height:34px; max-height:none; grid-row:auto; padding:0 5%; background:var(--header); border-top:1px solid var(--line); border-bottom:1px solid var(--line); visibility:visible; transition:opacity .2s,transform .25s,visibility .25s; }
  .is-nav-collapsed .topnav { max-height:none; height:34px; opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none; }
  .hero-topline { top:50px; }
}
@media (prefers-reduced-motion:reduce) {
  .topnav { transition:none; }
}

/* Project enquiry: short form and a direct-contact alternative. */
.lead-dialog { width:min(860px,94vw); max-width:94vw; max-height:92svh; padding:0; overflow:auto; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.lead-dialog::backdrop { background:#08090bcd; backdrop-filter:blur(12px); }
.lead-layout { display:grid; grid-template-columns:.85fr 1.15fr; min-height:640px; }
.lead-sidebar { padding:44px 30px 32px; background:#c1a6f1; color:#21172e; }
.lead-sidebar .eyebrow { font-size:9px; }
.lead-sidebar h2 { font-size:30px; letter-spacing:-1.1px; }
.lead-sidebar > p:not(.eyebrow) { font-size:12px; line-height:1.9; margin:25px 0; }
.lead-sidebar ul { list-style:none; padding:0; margin:28px 0 35px; font-size:11px; }
.lead-sidebar li { margin-block:11px; }
.lead-sidebar li::before { content:'✓'; margin-right:9px; }
.lead-contacts-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 0; border-block:1px solid #21172e44; background:none; color:#21172e; font-weight:700; font-size:13px; }
.lead-contacts-toggle .icon-arrow { transition:rotate .2s; }
.lead-contacts-toggle[aria-expanded=true] .icon-arrow { rotate:180deg; }
.lead-contacts { display:grid; gap:15px; margin-top:20px; }
.lead-contacts a { font-size:11px; font-weight:700; }
.lead-contacts a span { display:block; font-size:10px; font-weight:400; margin-top:3px; overflow-wrap:anywhere; }
.lead-contacts a:hover { text-decoration:underline; }
.lead-dialog .dialog-close { top:7px; right:14px; color:var(--ink); }
.lead-form-panel { padding:42px 34px 28px; }
.lead-form-panel .eyebrow { color:var(--muted); margin-bottom:22px; font-size:9px; }
.lead-field { margin-bottom:16px; }
.lead-field label,.lead-channel legend { display:block; margin-bottom:7px; font-size:11px; font-weight:600; }
.lead-field label > span { font-size:9px; color:var(--muted); font-weight:400; margin-left:5px; }
.lead-field input,.lead-field select,.lead-field textarea { width:100%; border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--ink); font:13px/1.6 Manrope,Arial,sans-serif; padding:10px 12px; min-height:43px; }
.lead-field textarea { resize:vertical; min-height:86px; }
.lead-field input::placeholder,.lead-field textarea::placeholder { color:var(--muted); opacity:.8; }
.lead-field small { display:block; font-size:9px; color:var(--muted); margin-top:5px; }
.lead-channel { border:0; padding:0; margin:0 0 16px; min-width:0; }
.lead-channel-options { display:flex; gap:7px; }
.lead-channel label { flex:1; cursor:pointer; }
.lead-channel input { position:absolute; opacity:0; width:1px; height:1px; }
.lead-channel label > span { display:block; text-align:center; padding:9px 4px; border:1px solid var(--line); border-radius:4px; font-size:10px; }
.lead-channel input:checked + span { color:var(--ink); border-color:var(--violet); background:#b7a0fc1a; }
.lead-channel input:focus-visible + span { outline:2px solid var(--violet); outline-offset:3px; }
.lead-submit { width:100%; gap:20px; min-height:46px; margin-top:4px; }
.lead-submit:disabled { opacity:.6; cursor:wait; }
.lead-privacy { font-size:9px; line-height:1.7; color:var(--muted); margin:12px 0 0; }
.lead-status { font-size:11px; line-height:1.8; background:#b7a0fc15; border-left:2px solid var(--violet); padding:10px 12px; margin:14px 0; }
.lead-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.lead-success { min-height:440px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.lead-success-mark { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; font-size:26px; color:#111; background:var(--accent); margin-bottom:25px; }
.lead-success h3 { font:500 29px/1.4 Unbounded,Arial,sans-serif; letter-spacing:-1px; margin:0 0 18px; }
.lead-success > p:not(.eyebrow) { font-size:13px; color:var(--muted); margin-bottom:25px; }
.lead-dialog [hidden] { display:none !important; }
/* Private QR workspace. */
.qr-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 5%; border-bottom:1px solid var(--line); }
.qr-header > span,.qr-header > a:last-child { font-size:11px; color:var(--muted); }
.qr-main { max-width:1280px; margin:auto; padding:60px 5%; }
.qr-main h1 { font-size:clamp(25px,4vw,42px); margin:0; line-height:1.4; letter-spacing:-1.2px; }
.qr-main h2 { font-size:23px; letter-spacing:-.8px; }
.qr-status { font-size:10px; color:var(--muted); }
.qr-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:45px; }
.qr-metrics article { padding:25px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.qr-metrics span { font-size:11px; color:var(--muted); }
.qr-metrics strong { font-size:40px; display:block; color:var(--violet); line-height:1.5; }
.qr-generator { display:grid; grid-template-columns:1fr 300px; gap:50px; padding:35px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.qr-generator > div > .muted { font-size:12px; line-height:1.9; }
.qr-create { margin-top:25px; }
.qr-create label,.qr-link-label { display:block; font-size:11px; margin-bottom:8px; }
.qr-create > div { display:flex; gap:12px; }
.qr-create input,.qr-tracking-link { min-width:0; width:100%; padding:12px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:4px; font:13px Arial,sans-serif; }
.qr-create input { flex:1; }
.qr-create .button { flex-shrink:0; padding:12px 17px; }
.qr-create small { color:var(--muted); font-size:10px; display:block; margin-top:8px; }
.qr-link-label { margin-top:22px; }
.qr-downloads { display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; }
.qr-downloads .text-link { font-size:10px; }
.qr-image { align-self:center; text-align:center; }
.qr-image img { background:white; border-radius:4px; width:300px; height:300px; }
.qr-image > span { display:block; color:var(--muted); font-size:12px; margin-top:15px; }
.qr-note { color:var(--muted); font-size:10px; line-height:1.9; margin-top:25px; }
.qr-tables { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-top:50px; }
.qr-tables h2 { font-size:20px; margin-bottom:20px; }
.qr-table-wrap { overflow:auto; }
.qr-tables table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
.qr-tables th,.qr-tables td { padding:14px 10px; border-bottom:1px solid var(--line); }
.qr-tables th { color:var(--muted); font-weight:500; }
.qr-tables td:not(:first-child),.qr-tables th:not(:first-child) { text-align:right; }
.qr-empty { text-align:left !important; color:var(--muted); font-size:11px; }
@media (max-width:760px) {
 .lead-dialog { width:94vw; max-height:92svh; }
 .lead-layout { grid-template-columns:1fr; min-height:0; }
 .lead-sidebar { padding:27px 23px 22px; }
 .lead-sidebar h2 { font-size:24px; }
 .lead-sidebar h2 br { display:none; }
 .lead-sidebar .eyebrow { margin-bottom:12px; }
 .lead-sidebar > p:not(.eyebrow) { font-size:11px; margin:15px 0; }
 .lead-sidebar ul { display:none; }
 .lead-contacts-toggle { padding:10px 0; font-size:12px; }
 .lead-contacts { grid-template-columns:1fr 1fr; gap:16px 12px; }
 .lead-contacts > a:nth-child(2) { grid-column:1 / -1; order:3; }
 .lead-dialog .dialog-close { color:#21172e; top:4px; right:12px; }
 .lead-form-panel { padding:25px 23px; }
 .lead-field input,.lead-field select,.lead-field textarea { font-size:16px; }
 .lead-field label,.lead-channel legend { font-size:12px; }
 .lead-field small { font-size:10px; }
 .lead-channel label > span { font-size:12px; }
 .lead-privacy { font-size:10px; }
 .lead-success { min-height:300px; }
 .qr-header { padding:18px 5%; }
 .qr-header > span { display:none; }
 .qr-main { padding:40px 5%; }
 .qr-metrics { gap:10px; }
 .qr-metrics article { padding:15px 10px; }
 .qr-metrics span { font-size:9px; }
 .qr-metrics strong { font-size:30px; }
 .qr-generator { grid-template-columns:1fr; padding:22px; gap:25px; }
 .qr-generator h2 { font-size:22px; }
 .qr-image { margin:auto; order:-1; }
 .qr-image img { width:240px; height:240px; }
 .qr-create > div { flex-direction:column; }
 .qr-create input,.qr-tracking-link { font-size:16px; }
 .qr-tables { grid-template-columns:1fr; gap:35px; }
}